/* Coffre DépannageWP */
@font-face { font-family: Outfit; src: url(outfit-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url(outfit-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Outfit; src: url(outfit-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--bleu: #4169e1;
	--orange: #f85f0d;
	--marine: #242239;
	--texte: #4a4860;
	--gris: #5f5d70;
	--fond: #f6f7fc;
	--peche: #feefe6;
	--vert: #679414;
	--vert-clair: #eef3e0;
	--vert-light: #e3e8a1;
	--bleu-light: #eef1fc;
	--ease: cubic-bezier(.19, 1, .22, 1);
	--rouge: #c42424;
	--bord: #d9dbe6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--marine); font-family: Outfit, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--bleu); }
a:hover { color: var(--orange); }
h1, h2 { margin: 0; }
p { margin: 0; }

/* En-tête */
.c-entete { background: #fff; border-bottom: 1px solid #e6e8f2; }
.c-sur svg { width: 16px; height: 16px; fill: currentColor; }
.c-entete__in { max-width: 1200px; margin: 0 auto; padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.c-logo { display: inline-flex; line-height: 0; }
.c-logo svg { display: block; width: 185px; height: auto; }
.c-sur { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--vert); background: var(--vert-clair); padding: 8px 14px; border-radius: 500px; }

/* Page */
.c-page { max-width: 1200px; margin: 0 auto; padding: 60px 30px 120px; display: flex; flex-direction: column; gap: 30px; }
.c-intro { display: flex; flex-direction: column; gap: 15px; max-width: 760px; }
.c-pastille { align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); background: var(--peche); padding: 6px 12px; border-radius: 500px; }
.c-intro h1, .c-merci h1 { font-size: 2.75rem; line-height: 1.15; font-weight: 400; }
.c-intro h1 strong { font-weight: 700; color: var(--bleu); }
.c-intro p { font-size: 1.0625rem; line-height: 1.6; color: var(--texte); }
.c-alerte { background: var(--peche); border-radius: 6px; padding: 15px 20px; font-size: 0.9375rem; }

.c-grille { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.c-form { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: relative; }
.c-cote { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }

/* Cartes et champs */
.c-carte { background: #fff; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.c-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.c-carte h2 { font-size: 1.25rem; font-weight: 700; }
.c-etape { font-size: 0.75rem; color: var(--gris); }

/* Étapes en onglets (boutons radio + CSS, aucun script) */
.c-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.c-onglets { display: flex; gap: 6px; padding: 6px; background: #fff; border-radius: 500px; overflow-x: auto; scrollbar-width: none; }
.c-onglets::-webkit-scrollbar { display: none; }
.c-onglet { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 500px; font-size: 0.875rem; font-weight: 600; color: var(--texte); white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.c-onglet:hover { background: var(--bleu-light); color: var(--bleu); }
.c-onglet__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fond); font-size: 0.75rem; }
.c-onglet--erreur .c-onglet__num { background: var(--rouge); color: #fff; }
.c-panneau { display: none; }
#o-vous:checked ~ .c-panneau--vous, #o-wp:checked ~ .c-panneau--wp, #o-heb:checked ~ .c-panneau--heb,
#o-ftp:checked ~ .c-panneau--ftp, #o-bdd:checked ~ .c-panneau--bdd, #o-notes:checked ~ .c-panneau--notes { display: flex; }
#o-vous:checked ~ .c-onglets .c-onglet--vous, #o-wp:checked ~ .c-onglets .c-onglet--wp, #o-heb:checked ~ .c-onglets .c-onglet--heb,
#o-ftp:checked ~ .c-onglets .c-onglet--ftp, #o-bdd:checked ~ .c-onglets .c-onglet--bdd, #o-notes:checked ~ .c-onglets .c-onglet--notes { background: var(--bleu); color: #fff; }
#o-vous:checked ~ .c-onglets .c-onglet--vous .c-onglet__num, #o-wp:checked ~ .c-onglets .c-onglet--wp .c-onglet__num, #o-heb:checked ~ .c-onglets .c-onglet--heb .c-onglet__num,
#o-ftp:checked ~ .c-onglets .c-onglet--ftp .c-onglet__num, #o-bdd:checked ~ .c-onglets .c-onglet--bdd .c-onglet__num, #o-notes:checked ~ .c-onglets .c-onglet--notes .c-onglet__num { background: #fff; color: var(--bleu); }
#o-vous:focus-visible ~ .c-onglets .c-onglet--vous, #o-wp:focus-visible ~ .c-onglets .c-onglet--wp, #o-heb:focus-visible ~ .c-onglets .c-onglet--heb,
#o-ftp:focus-visible ~ .c-onglets .c-onglet--ftp, #o-bdd:focus-visible ~ .c-onglets .c-onglet--bdd, #o-notes:focus-visible ~ .c-onglets .c-onglet--notes { outline: 2px solid var(--orange); outline-offset: 2px; }
.c-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; padding-top: 10px; }
.c-navigation .c-btn:only-child { margin-left: auto; }
.c-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.c-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-champ--large { grid-column: 1 / -1; }
.c-champ label { font-size: 0.8125rem; font-weight: 600; }
.c-requis { color: var(--orange); }
.c-champ input, .c-champ textarea { font: inherit; font-size: 1rem; color: var(--marine); background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 12px 14px; width: 100%; }
.c-champ textarea { min-height: 110px; resize: vertical; }
.c-champ input:focus, .c-champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.c-champ input::placeholder, .c-champ textarea::placeholder { color: #8a889a; }
.c-champ--erreur input, .c-champ--erreur textarea { border-color: var(--rouge); }
.c-erreur { font-size: 0.8125rem; color: var(--rouge); }

/* Champ piège (robots) */
.c-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Envoi */
.c-envoi { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.c-accord { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--texte); max-width: 720px; cursor: pointer; }
.c-accord input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--bleu); }
.c-envoi .c-erreur { margin-top: -10px; }

/* Boutons à la charte DépannageWP */
.c-btn { --b-fond: var(--vert-light); --b-icone: var(--vert); --b-survol: var(--vert); position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 15px; max-width: 100%; padding: 5px 5px 5px 30px; border: 0; border-radius: 500px; background: var(--b-fond); color: var(--marine); font: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .65s var(--ease); }
.c-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-survol); border-radius: inherit; transform: scaleX(0); transform-origin: right center; transition: transform .65s var(--ease); }
.c-btn__icone { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--b-icone); color: #fff; overflow: hidden; transition: background .65s var(--ease), color .65s var(--ease); }
.c-btn__icone svg { width: 20px; height: 20px; fill: currentColor; }
.c-btn:hover, .c-btn:focus-visible { color: #fff; }
.c-btn:hover::before, .c-btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.c-btn:hover .c-btn__icone, .c-btn:focus-visible .c-btn__icone { background: #fff; color: var(--b-survol); }
.c-btn:hover .c-btn__icone svg { animation: c-icone-droite .65s var(--ease); }
.c-btn:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.c-btn--orange { --b-fond: var(--peche); --b-icone: var(--orange); --b-survol: var(--orange); }
.c-btn--blanc { --b-fond: #fff; --b-icone: var(--bleu-light); --b-survol: var(--bleu); box-shadow: 0 1px 2px rgba(36, 34, 57, 0.08); }
.c-btn--blanc .c-btn__icone { color: var(--bleu); }
.c-btn--avant { flex-direction: row-reverse; padding: 5px 30px 5px 5px; }
.c-btn--avant:hover .c-btn__icone svg { animation-name: c-icone-gauche; }
@keyframes c-icone-droite { 0% { transform: translateX(0); } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: translateX(0); } }
@keyframes c-icone-gauche { 0% { transform: translateX(0); } 45% { transform: translateX(-140%); } 46% { transform: translateX(140%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .c-btn, .c-btn::before, .c-btn__icone, .c-btn__icone svg, .c-onglet { transition: none; animation: none !important; } }

/* Colonne de droite */
.c-sombre { background: var(--marine); color: #fff; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.c-sombre { gap: 15px; }
.c-sombre h2 { font-size: 1.25rem; font-weight: 700; }
.c-sombre p { font-size: 0.875rem; line-height: 1.6; color: #d9d8e6; }
.c-sombre__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bleu); color: #fff; }
.c-sombre__icone svg { width: 22px; height: 22px; fill: currentColor; }
.c-peche { background: var(--peche); border-radius: 12px; padding: 25px 30px; display: flex; flex-direction: column; gap: 10px; }
.c-peche p { font-size: 0.875rem; line-height: 1.55; color: var(--texte); }
.c-peche a { font-weight: 700; text-decoration: none; }

/* Merci */
.c-merci { max-width: 760px; margin: 0 auto; padding: 120px 30px; display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; }
.c-merci__icone { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--vert-clair); color: var(--vert); }
.c-merci__icone svg { width: 40px; height: 40px; fill: currentColor; }
.c-merci h1 { font-size: 2.5rem; }
.c-vert { font-weight: 700; color: var(--vert); }
.c-merci p { font-size: 1.0625rem; line-height: 1.6; color: var(--texte); }

/* Tablette et mobile */
@media (max-width: 767px) {
	.c-sur svg { width: 16px; height: 16px; fill: currentColor; }
.c-entete__in { padding: 15px; }
	.c-page { padding: 30px 15px 60px; gap: 20px; }
	.c-intro h1, .c-merci h1 { font-size: 1.875rem; line-height: 1.2; }
	.c-intro p { font-size: 0.9375rem; }
	.c-form { gap: 15px; }
	.c-carte { padding: 30px 15px; gap: 15px; }
	.c-carte h2 { font-size: 1.125rem; }
	.c-champs { gap: 15px; }
	.c-champs--simple { grid-template-columns: minmax(0, 1fr); }
	.c-sur svg { width: 16px; height: 16px; fill: currentColor; }
.c-entete__in { flex-wrap: nowrap; }
	.c-logo svg { width: 150px; }
	.c-sur { font-size: 0.75rem; padding: 6px 10px; white-space: nowrap; }
	.c-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 12px; overflow: visible; }
	.c-onglet { justify-content: flex-start; padding: 8px 10px; font-size: 0.8125rem; }
	.c-navigation { flex-direction: column-reverse; align-items: stretch; }
	.c-navigation .c-btn { width: 100%; }
	.c-btn { white-space: normal; }
	.c-merci { padding: 60px 15px; }
	.c-sombre, .c-peche { padding: 30px 15px; }
}
@media (max-width: 359px) {
	.c-champs { grid-template-columns: minmax(0, 1fr); }
}