/* =========================================================================
   GCA Après Sinistre : pages internes, formulaires et parcours de contact.
   Chargé après home.css. Tokens, échelle et espacements : app.css (v4 « Précision »).

   Règle de composition : un texte qui peut recevoir un <span class="nowrap"> (filtre
   fr_typo) n'est jamais l'enfant direct d'un conteneur flex ou grid : il est placé dans
   son propre élément, sinon le span devient un élément de grille et les espaces sautent.

   Sommaire
     1. En-tête des pages internes      7. Pages légales
     2. Blocs de contenu                8. Pages d'erreur
     3. Index des services              9. Formulaire
     4. Page Nos services              10. Contact
     5. Fiche service                  11. Page de remerciement
     6. FAQ, zone, recrutement         12. Composants partagés (panneaux)
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. EN-TÊTE DES PAGES INTERNES
   --------------------------------------------------------------------------- */
.crumbs { margin-bottom: var(--space-6); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--step--1); line-height: 1.4; }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--muted); }
.crumbs li + li::before {
    content: ""; flex: none;
    width: 6px; height: 6px;
    border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong);
    transform: rotate(45deg);
}
.crumbs a { display: block; padding-block: var(--space-1); color: var(--navy); font-weight: 600; text-decoration: none; }
/* Mobile : cible de 44 px, compensée par une marge négative pour garder l'espacement du fil d'ariane */
@media (max-width: 767.98px) {
    .crumbs ol { row-gap: var(--space-4); }
    .crumbs a { display: flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-2)); }
}
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { display: block; }

.page-head { background: var(--mist); border-bottom: 1px solid var(--line); }
.page-head__inner { display: grid; gap: var(--space-8); padding-block: var(--space-5) var(--space-10); }
.page-head__text { display: grid; justify-items: start; align-content: start; }
.page-head .eyebrow { margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; max-width: 22ch; font-size: var(--fs-page); line-height: var(--lh-tight); }
.page-head__lead { max-width: var(--measure-lead); margin: var(--space-4) 0 0; font-size: var(--step-1); line-height: var(--lh-lead); color: var(--muted); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.page-head__more { margin-left: var(--space-3); }
.page-head__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-l); background: var(--sky); }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599.98px) {
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 100%; }
}
@media (min-width: 768px) {
    .page-head__inner { padding-block: var(--space-6) var(--space-12); }
    .page-head__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
    .page-head--media .page-head__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-12); }
    .page-head--media .page-head__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1200px) {
    .page-head__inner { padding-block: var(--space-8) var(--space-16); }
    .page-head--media .page-head__inner { gap: var(--space-16); }
}

/* ---------------------------------------------------------------------------
   2. BLOCS DE CONTENU
   --------------------------------------------------------------------------- */
/* Cartes à icône (types de sinistres, métiers recrutés) : grille paire, jamais d'orpheline */
.cases { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
    /* Sous-grille : en-têtes, textes et pieds de cartes alignés d'une colonne à l'autre */
    .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
    .cases > .case { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-4); }
    .cases .case__foot { margin-top: 0; }
}
.case {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--white);
}
@media (min-width: 1200px) { .case { padding: var(--space-8); } }
.case__head { display: flex; align-items: center; gap: var(--space-4); }
.case__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-m); background: var(--sky); color: var(--blue); }
.case__icon .icon { width: 24px; height: 24px; }
.case h3 { margin: 0; font-size: var(--step-2); }
.case > p { margin: 0; color: var(--muted); }
.case__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.case__label { margin: 0 0 var(--space-2); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.case__profile { margin: 0; font-size: var(--step--1); color: var(--text-soft); }

/* Enchaînement de services : « A › B › C » */
.chain { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--step--1); line-height: 1.4; }
.chain li { display: flex; align-items: center; gap: var(--space-2); }
.chain li + li::before {
    content: ""; flex: none;
    width: 6px; height: 6px;
    border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue);
    transform: rotate(45deg);
}
.chain a { display: block; padding-block: var(--space-1); font-weight: 600; color: var(--navy); text-decoration-color: var(--line-strong); }
.chain a:hover { color: var(--blue); text-decoration-color: currentColor; }
/* Mobile : cible de 44 px, marge négative pour garder le même interlignage de la chaîne */
@media (max-width: 767.98px) {
    .chain { row-gap: var(--space-4); }
    .chain a { display: flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-2)); }
}

/* Liste technique (matériel) : deux colonnes de lignes filetées */
.spec-list { list-style: none; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.spec-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); font-weight: 600; line-height: 1.4; color: var(--navy); }
.spec-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-3) + 0.45em); width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.spec-list--single { grid-template-columns: 1fr; }

/* Trois niveaux (organisation selon la distance) : lignes, puis colonnes */
.tiers { list-style: none; display: grid; border-top: 1px solid var(--line); }
.tiers li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.tiers__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-m); background: var(--white); color: var(--blue); }
.section:not(.section--mist) .tiers__icon { background: var(--sky); }
.tiers__icon .icon { width: 24px; height: 24px; }
.tiers h3 { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.tiers p { margin: 0; color: var(--muted); }
@media (min-width: 1024px) {
    .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
    .tiers li { grid-template-columns: 1fr; align-content: start; gap: var(--space-5); padding: var(--space-8) var(--space-8) var(--space-8) 0; border-bottom: 0; }
    .tiers li + li { padding-left: var(--space-8); border-left: 1px solid var(--line); }
}

/* Variantes de composants de l'accueil, propres aux pages internes */
.stack-xl { display: grid; gap: var(--sp-2xl); }
.dossier__points--flush { margin-top: 0; }
@media (min-width: 1040px) { .dossier--page { align-items: start; } }
.dossier__points a { font-weight: 600; }
.section--navy .dossier__points, .section--navy .dossier__points li { border-color: var(--line-dark); }
.reflexes__list--plain { counter-reset: none; }
.reflexes__list--plain li { grid-template-columns: 1fr; }
.reflexes__list--plain li::before { display: none; }

/* Étapes d'une méthode : titres et textes alignés d'une colonne à l'autre */
@media (min-width: 900px) {
    .steps--aligned { grid-template-rows: auto auto auto; row-gap: 0; }
    .steps--aligned li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
    .steps--aligned li::before { margin-bottom: var(--space-2); }
    .steps--aligned h3 { align-self: start; }
}

/* ---------------------------------------------------------------------------
   3. INDEX DES SERVICES (entreprise, zone, services liés)
   Une ligne par service : icône, nom, description, flèche. Pas d'étiquettes.
   --------------------------------------------------------------------------- */
.svc-index { list-style: none; display: grid; border-top: 1px solid var(--line); }
.svc-index__item {
    position: relative;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px;
    grid-template-areas: "icon title arrow" "text text text";
    align-items: center; gap: var(--space-3) var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
}
.svc-index__body { display: contents; }
.svc-index__icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--sky); color: var(--blue); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.section--mist .svc-index__icon { background: var(--white); }
.svc-index__icon .icon { width: 22px; height: 22px; }
.svc-index h2, .svc-index h3 { grid-area: title; margin: 0; font-size: var(--step-2); }
.svc-index :is(h2, h3) a { color: var(--navy); text-decoration: none; }
.svc-index :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.svc-index__text { grid-area: text; margin: 0; color: var(--muted); max-width: var(--measure-lead); }
.svc-index__arrow { grid-area: arrow; display: grid; place-items: center; color: var(--blue); transition: transform var(--dur) var(--ease); }
.svc-index__arrow .icon { width: 22px; height: 22px; }
.svc-index__item:hover :is(h2, h3) a { color: var(--blue); }
.svc-index__item:hover .svc-index__icon { background: var(--blue); color: var(--white); }
.svc-index__item:hover .svc-index__arrow { transform: translateX(4px); }
.svc-index__item:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.svc-index :is(h2, h3) a:focus-visible { outline: none; }
@media (min-width: 960px) {
    .svc-index__item {
        grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr) 32px;
        grid-template-areas: "icon title text arrow";
        gap: var(--space-8);
        padding: var(--space-6) 0;
    }
    .svc-index__icon { width: 56px; height: 56px; }
    .svc-index__icon .icon { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------------
   4. PAGE NOS SERVICES : grille de cartes photo
   5 cartes : 1 (pleine largeur) + 2 + 2 sur tablette, 2 + 3 sur grand écran.
   --------------------------------------------------------------------------- */
.svc-grid { list-style: none; display: grid; gap: var(--space-6); }
.svc-card {
    position: relative;
    display: grid; grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--white);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card:hover { border-color: var(--line-strong); box-shadow: 0 16px 40px -28px rgb(6 23 41 / 0.45); }
.svc-card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.svc-card h3 a:focus-visible { outline: none; }
.svc-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sky); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.03); }
.svc-card__icon { position: absolute; left: var(--space-4); top: var(--space-4); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--white); color: var(--blue); }
.svc-card__icon .icon { width: 22px; height: 22px; }
.svc-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.svc-card__kicker { margin: 0; font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue); }
.svc-card h3 { margin: 0; font-size: var(--step-2); }
.svc-card h3 a { color: var(--navy); text-decoration: none; }
.svc-card h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-card__text { margin: 0; color: var(--muted); }
.svc-card .link { margin-top: auto; padding-top: var(--space-2); }
@media (min-width: 700px) {
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card:first-child { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .svc-card:first-child .svc-card__media { aspect-ratio: auto; min-height: 100%; }
    .svc-card:first-child .svc-card__body { justify-content: center; padding: var(--space-8); }
}
@media (min-width: 1024px) {
    .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svc-card, .svc-card:first-child { grid-column: span 2; grid-template-columns: none; grid-template-rows: auto 1fr; }
    .svc-card:first-child .svc-card__media { aspect-ratio: 16 / 9; min-height: 0; }
    .svc-card:first-child .svc-card__body { justify-content: flex-start; padding: var(--space-6) var(--space-8) var(--space-8); }
    .svc-card--lg, .svc-card--lg:first-child { grid-column: span 3; }
    .svc-card--lg .svc-card__media { aspect-ratio: 16 / 9; }
    .svc-card--lg .svc-card__body { padding: var(--space-6) var(--space-8) var(--space-8); }
    .svc-card--lg h3 { font-size: var(--step-3); }
}

/* ---------------------------------------------------------------------------
   5. FICHE SERVICE
   --------------------------------------------------------------------------- */
.svc-context { display: grid; gap: var(--space-10); }
.svc-context h2 { max-width: 20ch; }
.svc-context .lead { max-width: var(--measure-lead); margin: 0; }
.svc-signs { padding: var(--space-6); border-radius: var(--r-l); background: var(--mist); }
.svc-signs h3 { margin: 0 0 var(--space-5); font-size: var(--step-1); }
@media (min-width: 600px) { .svc-signs { padding: var(--space-8); } }
@media (min-width: 1024px) {
    .svc-context { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
}

.svc-kit { display: grid; gap: var(--space-12); }
.svc-kit h2 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.svc-kit .lead { margin-bottom: var(--space-6); font-size: var(--step-0); }
.svc-kit .dossier__points { margin-top: var(--space-6); }
@media (min-width: 1024px) { .svc-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); } }

/* ---------------------------------------------------------------------------
   6. FAQ, ZONE, RECRUTEMENT, ENTREPRISE
   --------------------------------------------------------------------------- */
/* FAQ : thèmes en tête de page (pas de sommaire collant), un bloc par thème */
.faq-themes { list-style: none; display: grid; gap: var(--space-2); }
.faq-themes li { display: grid; } /* la carte occupe toute la hauteur de sa rangée */
@media (min-width: 600px) { .faq-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
/* 10 thèmes : 5 rangées de 2, puis 2 rangées de 5 (en 3 colonnes, le dernier restait seul).
   En 5 colonnes (dès 1280 px), la flèche cède sa place au libellé, équilibré sur deux lignes au plus. */
@media (min-width: 1280px) {
    .faq-themes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .faq-themes a { grid-template-columns: 40px minmax(0, 1fr); }
    .faq-themes a > span:nth-child(2) { text-wrap: balance; }
    .faq-themes__arrow { display: none; }
}
.faq-themes a {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3);
    min-height: 64px; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--white);
    color: var(--navy); font-weight: 700; line-height: 1.3; text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.faq-themes a:hover { border-color: var(--blue); color: var(--blue); }
.faq-themes__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--sky); color: var(--blue); }
.faq-themes__icon .icon { width: 20px; height: 20px; }
.faq-themes__arrow { color: var(--blue); }
.faq-themes__arrow .icon { width: 18px; height: 18px; transform: rotate(90deg); }

.faq-nav { margin-bottom: var(--space-12); }
@media (min-width: 1200px) { .faq-nav { margin-bottom: var(--space-16); } }
.faq-theme { display: grid; gap: var(--space-6); padding-block: var(--space-12); border-top: 1px solid var(--line); }
.faq-theme:first-child { padding-top: 0; border-top: 0; }
.faq-theme:last-child { padding-bottom: 0; }
.faq-theme__intro { display: grid; gap: var(--space-3); justify-items: start; align-content: start; }
.faq-theme__intro > * { margin: 0; }
.faq-theme__intro h2 { font-size: var(--step-3); line-height: 1.15; }
.faq-theme__intro p { color: var(--muted); }
.faq-theme__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-2); }
.faq-theme__back { font-size: var(--step--1); }
.faq-theme__back .icon { transform: rotate(-90deg); }
.link.faq-theme__back:hover .icon { transform: rotate(-90deg) translateX(3px); }
@media (min-width: 1024px) {
    .faq-theme { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); padding-block: var(--space-12); }
}

/* Zone : carte et villes alignées en haut, villes en deux colonnes équilibrées */
.zone-page { display: grid; gap: var(--space-10); }
.zone-cities { display: grid; gap: var(--space-8); align-content: start; }
.zone-cities .city-cols { margin-top: 0; }
.zone-cities__note { margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--r-m); background: var(--mist); color: var(--text-soft); }
@media (min-width: 1024px) {
    .zone-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
}
@media (min-width: 1200px) { .zone-page { gap: var(--space-16); } }

/* Recrutement : candidature spontanée en trois temps */
.apply { display: grid; gap: var(--space-10); padding: var(--space-8) var(--space-6); border-radius: var(--r-l); background: var(--sky); }
.apply h2 { font-size: var(--step-3); margin-bottom: var(--space-4); }
.apply .lead { font-size: var(--step-0); color: var(--text-soft); }
.apply .btn-row { margin-top: var(--space-8); }
@media (min-width: 600px) { .apply { padding: var(--space-12) var(--space-10); } }
@media (min-width: 1024px) { .apply { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; padding: var(--space-16); } }

/* Étapes numérotées (hexagone de la marque) : candidature, après l'envoi du formulaire */
.numbered { list-style: none; counter-reset: nb; display: grid; gap: var(--space-6); }
.numbered li { counter-increment: nb; position: relative; display: grid; gap: var(--space-1); padding-left: var(--space-16); min-height: 40px; }
.numbered li::before {
    content: counter(nb);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center;
    width: 44px; height: 40px;
    clip-path: var(--hex);
    background: var(--navy); color: var(--white);
    font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.0625rem;
}
.numbered h3 { margin: 0; padding-top: var(--space-2); font-size: var(--step-1); }
.numbered p { margin: 0; color: var(--muted); }
.on-dark .numbered li::before { background: var(--white); color: var(--navy); }


/* ---------------------------------------------------------------------------
   7. PAGES LÉGALES : intitulé à gauche, texte à droite
   --------------------------------------------------------------------------- */
.legal { display: grid; }
.legal__section { display: grid; gap: var(--space-4); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.legal__section:first-child { padding-top: 0; border-top: 0; }
.legal__section:last-child { padding-bottom: 0; }
.legal__section h2 { margin: 0; font-size: var(--step-2); line-height: var(--lh-snug); }
.legal__body { max-width: var(--measure); color: var(--text-soft); }
.legal__body > :last-child { margin-bottom: 0; }
.legal__body ul { padding-left: 1.25em; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.legal__body li::marker { color: var(--blue); }
.legal__body a { overflow-wrap: anywhere; }
.legal-dl { display: grid; margin: 0 0 var(--space-4); border-top: 1px solid var(--line); }
.legal-dl > div { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.legal-dl dt { font-size: var(--step--1); font-weight: 700; color: var(--muted); }
.legal-dl dd { margin: 0; color: var(--text); }
@media (min-width: 600px) { .legal-dl > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-6); } .legal-dl dt { font-size: var(--step-0); } }
@media (min-width: 1024px) {
    .legal__section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); padding-block: var(--space-12); }
}

/* ---------------------------------------------------------------------------
   8. PAGES D'ERREUR
   --------------------------------------------------------------------------- */
.error-page { display: grid; gap: var(--space-10); }
.error-page__main { display: grid; justify-items: start; align-content: start; }
.error-page__code { margin: 0 0 var(--space-4); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(4.5rem, 3rem + 7vw, 9rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--sky); }
.error-page h1 { margin: 0; font-size: var(--fs-page); max-width: 20ch; }
.error-page .lead { margin: var(--space-4) 0 0; max-width: var(--measure-lead); }
.error-page .btn-row { margin-top: var(--space-8); }
.error-page__aside { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); }
.error-page__aside h2 { margin: 0 0 var(--space-4); font-size: var(--step-1); }
.error-links { list-style: none; display: grid; border-top: 1px solid var(--line); }
.error-links a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; }
.error-links a:hover { color: var(--blue); }
.error-links .icon { width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 599.98px) { .error-page .btn-row .btn { flex: 1 1 100%; } }
@media (min-width: 600px) { .error-page__aside { padding: var(--space-8); } }
@media (min-width: 1024px) { .error-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; } }

/* ---------------------------------------------------------------------------
   9. FORMULAIRE
   --------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.form__step { display: grid; gap: var(--space-5); min-width: 0; }
.form__step + .form__step { padding-top: var(--space-8); border-top: 1px solid var(--line); }
.form__step-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0; font-size: var(--step-1); line-height: 1.3; }
.form__num {
    display: grid; place-items: center;
    width: 34px; height: 30px;
    clip-path: var(--hex);
    background: var(--navy); color: var(--white);
    font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 0.9375rem; line-height: 1;
}
.form__step-note { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--step--1); color: var(--muted); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { display: block; padding: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: var(--navy); }
.field__req { margin-left: 0.15em; color: var(--error); }
.field__opt { font-weight: 500; color: var(--muted); }
.field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea {
    display: block; width: 100%; min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-s);
    background: var(--white);
    font-size: 1rem; line-height: 1.4; color: var(--text);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { min-height: 136px; resize: vertical; }
.field select {
    appearance: none; padding-right: var(--space-10);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2440' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right var(--space-3) center / 18px no-repeat;
}
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--text); }
.field :is(input, select, textarea):hover { border-color: var(--navy); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(0 88 171 / 0.22); }
.field__help { margin: 0; font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.field__error { position: relative; margin: 0; padding-left: var(--space-6); font-size: var(--step--1); font-weight: 600; line-height: 1.45; color: var(--error); }
.field__error::before {
    content: "!"; position: absolute; left: 0; top: 0.05em;
    display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%;
    background: var(--error); color: var(--white); font-size: 0.75rem; font-weight: 800; line-height: 1;
}
.field--invalid :is(input, select, textarea):not([type="checkbox"]) { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field--invalid :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--error), 0 0 0 3px rgb(179 38 30 / 0.18); }

.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-3); }
.field--check input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.field--check .field__label { font-size: var(--step--1); font-weight: 500; line-height: 1.5; color: var(--text-soft); cursor: pointer; }
.field--check .field__error, .field--check .field__help { grid-column: 1 / -1; }
.field--check.field--invalid input { outline: 2px solid var(--error); outline-offset: 1px; }

/* Choix en cartes (sinistre en cours / planifié) */
.field--choice > legend { margin-bottom: var(--space-1); }
.choice { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice__item { position: relative; display: grid; }
.choice__item input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
    position: relative;
    display: grid; gap: var(--space-1); align-content: start;
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 20px + var(--space-3));
    border: 1px solid var(--line-strong); border-radius: var(--r-m);
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.choice label::before {
    content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-4) + 2px);
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--line-strong); background: var(--white);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.choice label strong { font-size: 1rem; line-height: 1.4; color: var(--navy); }
.choice label small { font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.choice__item:hover label { border-color: var(--navy); }
.choice input:checked + label { border-color: var(--blue); background: var(--sky); box-shadow: inset 0 0 0 1px var(--blue); }
.choice input:checked + label::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 4px var(--white); }
.choice input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
/* « Sinistre en cours » : la seule carte qui prend la couleur d'urgence */
.choice__item:first-child input:checked + label { border-color: #a07c00; background: #fff8d1; box-shadow: inset 0 0 0 1px #a07c00; }
.choice__item:first-child input:checked + label::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 4px #fff8d1; }
.field--invalid .choice label { border-color: var(--error); }

/* Résumé d'erreurs (en tête de formulaire, reçoit le focus) */
.form-errors { padding: var(--space-5) var(--space-6); border: 1px solid #f0c4c0; border-left: 4px solid var(--error); border-radius: var(--r-s); background: #fdf3f2; }
.form-errors:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.form-errors__title { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--error); }
.form-errors ul { list-style: none; display: grid; gap: var(--space-2); }
.form-errors a { font-weight: 600; color: var(--error); text-decoration-color: currentColor; }
.form-errors a:hover { color: #8c1d17; }
.form-errors p { margin: 0; color: var(--error); font-weight: 600; }

/* Envoi : consentement, bouton et réassurance */
.form__end { display: grid; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.form__submit { display: grid; gap: var(--space-4); }
.form__submit .btn { width: 100%; }
.form__reassure { margin: 0; font-size: var(--step--1); color: var(--muted); }
@media (min-width: 640px) {
    .form__submit { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-6); }
    .form__submit .btn { width: auto; min-width: 280px; }
}
.btn__spinner { display: none; width: 1.125rem; height: 1.125rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.btn.is-loading, .btn.is-loading[aria-disabled="true"] { opacity: 1; pointer-events: none; cursor: progress; }
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading .icon { display: none; }
@media (prefers-reduced-motion: no-preference) { .btn.is-loading .btn__spinner { animation: spin 0.8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

.form__prefill { position: relative; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12); border-radius: var(--r-s); background: var(--sky); font-size: var(--step--1); color: var(--text-soft); }
.form__prefill .icon { position: absolute; left: var(--space-4); top: var(--space-3); width: 1.25rem; height: 1.25rem; color: var(--blue); }
.form__prefill strong { color: var(--navy); }

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.flash { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--r-s); font-weight: 600; }
.flash--error { border-left: 4px solid var(--error); background: #fdf3f2; color: var(--error); }
.flash--success { border-left: 4px solid var(--success); background: #e7f5ee; color: var(--success); }

/* ---------------------------------------------------------------------------
   10. CONTACT
   Mobile : appel d'urgence, formulaire, aide. Grand écran : formulaire à gauche,
   appel puis aide à droite, sans colonne collante.
   --------------------------------------------------------------------------- */
.section--form { padding-top: var(--space-6); }
@media (min-width: 768px) { .section--form { padding-top: var(--space-10); } }
.contact-layout { display: grid; gap: var(--space-6); grid-template-areas: "urgent" "form" "aside"; }
.contact-layout__urgent { grid-area: urgent; }
.contact-layout .form-card { grid-area: form; }
.contact-aside { grid-area: aside; display: grid; gap: var(--space-6); align-content: start; }
@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        grid-template-rows: auto 1fr;
        grid-template-areas: "form urgent" "form aside";
        gap: var(--space-6) var(--space-8);
        align-items: start;
    }
}
@media (min-width: 1200px) { .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: var(--space-12); } }

.form-card { padding: var(--space-6) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); }
.form-card__head h2 { margin: 0 0 var(--space-2); font-size: var(--step-3); line-height: 1.15; }
.form-card__head p { margin: 0; color: var(--muted); }
.form-card__head .form__required { margin-top: var(--space-2); font-size: var(--step--1); }
@media (min-width: 600px) { .form-card { padding: var(--space-8); } }
@media (min-width: 1200px) { .form-card { padding: var(--space-12); } }

/* Appel d'urgence : la voie la plus rapide, visible avant le formulaire sur mobile */
.urgent-card { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--r-l); background: var(--navy); color: var(--white); }
.urgent-card__label { margin: 0; font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--signal); }
.urgent-card h2 { margin: 0; font-size: var(--step-2); line-height: 1.2; color: var(--white); }
.urgent-card p { margin: 0; color: rgb(255 255 255 / 0.78); font-size: var(--step--1); }
.urgent-card .btn { width: 100%; font-size: 1.125rem; letter-spacing: 0.01em; }
.urgent-card__note { text-align: center; }
@media (min-width: 600px) and (max-width: 1023.98px) {
    .urgent-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-10); row-gap: var(--space-3); }
    .urgent-card > :not(.btn, .urgent-card__note) { grid-column: 1; }
    .urgent-card .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: auto; }
    .urgent-card__note { grid-column: 2; grid-row: 3; align-self: start; }
}

.aside-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); }
.aside-card h2 { margin: 0 0 var(--space-5); font-size: var(--step-1); line-height: 1.3; }
.aside-card .checklist { font-size: var(--step--1); line-height: 1.5; color: var(--text-soft); }
.aside-card--sky { border-color: #c9dcf1; background: var(--sky); }
.aside-card--sky .checklist li::before { background-color: var(--white); }

.info-list { list-style: none; display: grid; gap: var(--space-4); }
.info-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.info-list .icon-wrap { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--sky); color: var(--blue); }
.info-list .icon { width: 20px; height: 20px; }
.info-list__label { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
.info-list__value { display: block; font-size: var(--step--1); line-height: 1.5; color: var(--text); }
.info-list a { font-weight: 700; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   11. PAGE DE REMERCIEMENT
   --------------------------------------------------------------------------- */
.thanks-head { background: var(--mist); border-bottom: 1px solid var(--line); }
.thanks-head__inner { display: grid; justify-items: start; padding-block: var(--space-10) var(--space-12); }
.thanks-head__check { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-6); border-radius: 50%; background: var(--success); color: var(--white); }
.thanks-head__check .icon { width: 28px; height: 28px; }
.thanks-head h1 { margin: 0; font-size: var(--fs-page); max-width: 20ch; }
.thanks-head .lead { margin: var(--space-4) 0 0; max-width: var(--measure-lead); }
@media (min-width: 1200px) { .thanks-head__inner { padding-block: var(--space-16); } }

.thanks-body { display: grid; gap: var(--space-10); }
.thanks-body > div:first-child > h2 { font-size: var(--step-3); margin-bottom: var(--space-6); }
@media (min-width: 1024px) { .thanks-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; } }

.gestures { list-style: none; display: grid; gap: var(--space-4); counter-reset: gs; }
@media (min-width: 768px) { .gestures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.gestures li { counter-increment: gs; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.gestures li::before { content: "0" counter(gs); font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: var(--step--1); color: var(--blue); }
.gestures h3 { margin: 0; font-size: var(--step-1); }
@media (min-width: 768px) {
    .gestures { grid-template-rows: auto auto auto; row-gap: 0; }
    .gestures li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
.gestures p { margin: 0; font-size: var(--step--1); color: var(--muted); }

/* ---------------------------------------------------------------------------
   12. COMPOSANTS PARTAGÉS : panneaux
   --------------------------------------------------------------------------- */
.panel { padding: var(--space-6); border-radius: var(--r-l); background: var(--mist); }
.panel--navy { background: var(--navy); color: var(--white); }
.panel h2, .panel h3 { margin-bottom: var(--space-4); font-size: var(--step-1); line-height: 1.3; }
.panel--navy h2 { color: var(--white); }