/* ---------------------------------------------------------------------------
   RÈGLE DE FOND, reprise de la maquette

   Sans vidéo derrière, les pages intérieures, chaque section porte un fond
   opaque : le texte est sombre sur du blanc.

   Avec la vidéo, page d'accueil, la section s'efface et le contenu se pose sur
   un panneau de verre dépoli, blanc translucide et flou. Le texte reste sombre
   parce qu'il repose sur ce panneau, pas sur la vidéo. C'est le dispositif de
   la maquette, y compris son repli en blanc plein si la vidéo échoue.

   Ne jamais poser de texte sombre directement sur la vidéo.
   --------------------------------------------------------------------------- */

.bandeau, .grille-cartes, .chiffres, .agences, .frise, .faq { background: var(--tc-blanc); }
.appel-action { background: var(--tc-fond-creme); }

/* Les variantes sombres gardent leur fond : leur texte est clair. */
body:has(.fond-video) .bandeau:not(.bandeau--marine),
body:has(.fond-video) .grille-cartes,
body:has(.fond-video) .chiffres:not(.chiffres--bandeau),
body:has(.fond-video) .agences,
body:has(.fond-video) .frise,
body:has(.fond-video) .faq,
body:has(.fond-video) .appel-action:not(.appel-action--marine) { background: transparent; }

body:has(.fond-video) section:not(.hero-accueil):not(.citation):not(.bandeau--marine):not(.chiffres--bandeau):not(.appel-action--marine) > .contenu-large {
    /* Panneau gris opaque, valide par Lucile le 24/09. AUCUNE TRANSPARENCE,
       et c est le point important : tant qu une part du fond traverse, la
       teinte chaude de la photo peut passer. Il suffit qu un navigateur
       applique `blur` sans honorer `saturate(0)` pour que le panneau vire au
       beige chez le relecteur pendant qu il parait gris ailleurs. C est
       exactement ce qui s est produit ce jour-la. Le verre depoli est donc
       abandonne sur ce site : une couleur posee, aucun rendu a parier.
       Contraste mesure sur ce gris : titres marine 8,92, textes courants
       4,73 apres passage au gris froid, tous deux au-dessus du seuil. */
    /* 28/09 : legere transparence demandee par Lucile, 94 %. Deux precautions,
       toutes deux mesurees sur les pixels reels de la photo de fond.

       1. LA TEINTE. C est le point qui avait fait abandonner le verre depoli le
          24/09 : la photo est un coucher de soleil, et des qu elle traverse,
          elle rechauffe le panneau. Mesure de l ecart rouge moins bleu sur
          toute la surface : le panneau opaque est a -6 (froid et constant) ;
          a 92 % d opacite avec le meme gris il monte a +10,3, ce qui se voit
          comme du beige. Le gris est donc REFROIDI a #C6CAD0 pour compenser :
          l ecart maximal retombe a +2,5, quasi neutre.

       2. LE TEXTE. La transparence assombrit le panneau la ou la photo est
          sombre. A 94 % le texte tombait a 4,36, sous le seuil de 4,5 ;
          a 97 % il remonte de lui-meme a 4,86 et garde sa couleur normale.

       3. L UNIFORMITE. C est ce qui a fait redescendre de 94 a 97 % : la photo
          n etant pas uniforme, le panneau ne l est plus non plus. Ecart de
          luminance d un bord a l autre du meme panneau : 0 % en opaque,
          7 % a 97 %, 14 % a 94 %. A 94 % cela se voyait comme un marbrage,
          avec la masse claire de l avion qui transparaissait. Constate par
          Lucile sur capture le 28/09.

       Ne pas augmenter la transparence sans refaire ces trois mesures. */
    /* Eclairci le 28/09 : Lucile trouvait le panneau trop gris. Il passe de
       #C9CCD0 a #E4E7EB, soit 23 % d ecart avec le blanc au lieu de 42 %.
       Pas plus clair que cela : les cartes posees DANS le panneau sont
       quasi blanches, et a #EEF0F3 elles cesseraient de s en detacher.
       Le texte courant y gagne aussi : il etait a 4,41, sous le seuil de
       4,5, il remonte a 5,71. Titres marine a 10,77. */
    background: rgba(228, 231, 235, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* Le panneau porte déjà la gouttière : on évite de la doubler */
body:has(.fond-video) section:not(.hero-accueil):not(.citation):not(.bandeau--marine):not(.chiffres--bandeau):not(.appel-action--marine) > .contenu-large {
    max-width: calc(var(--tc-largeur-max) - 2rem);
}

/* Bandeau éditorial : surtitre, titre, chapeau, bouton */
.bandeau { padding-block: var(--tc-espace-xl); }
.bandeau__interieur { max-width: 62ch; }
.bandeau--centre .bandeau__interieur { max-width: 52ch; margin-inline: auto; text-align: center; }
.bandeau--centre .bandeau__chapeau { margin-inline: auto; }
.bandeau__titre { margin-bottom: var(--tc-espace-m); }
.bandeau__chapeau { color: var(--tc-gris); }
.bandeau__chapeau p:last-child { margin-bottom: 0; }
.bandeau__action { margin-top: var(--tc-espace-m); margin-bottom: 0; }

.bandeau--blanc { background: var(--tc-blanc); }
.bandeau--creme { background: var(--tc-fond-creme); }
.bandeau--bleu-pale { background: var(--tc-fond-bleu-pale); }
.bandeau--marine { background: var(--tc-marine); }
.bandeau--marine .bandeau__titre { color: var(--tc-blanc); }
.bandeau--marine .bandeau__chapeau { color: rgba(255,255,255,0.75); }
.bandeau--marine .bandeau__titre em { color: rgba(255,255,255,0.6); }

/* Appel à l'action : titre + deux boutons, en bas de page */
.appel-action { padding-block: var(--tc-espace-xl); text-align: center; }
.appel-action__titre { margin-bottom: var(--tc-espace-m); }
.appel-action__boutons { display: flex; flex-wrap: wrap; gap: var(--tc-espace-s); justify-content: center; }
.appel-action--creme { background: var(--tc-fond-creme); }
.appel-action--blanc { background: var(--tc-blanc); }
.appel-action--marine { background: var(--tc-marine); }
.appel-action--marine .appel-action__titre { color: var(--tc-blanc); }
.appel-action--marine .appel-action__titre em { color: rgba(255,255,255,0.6); }
.appel-action--marine .bouton--secondaire { color: var(--tc-blanc); border-color: rgba(255,255,255,0.5); }
.appel-action--marine .bouton--principal,
.bandeau--marine .bouton--principal { background: var(--tc-blanc); color: var(--tc-marine); }
.appel-action--marine .bouton--principal:hover,
.bandeau--marine .bouton--principal:hover { background: var(--tc-fond-creme); color: var(--tc-marine); }

/* Héros de page interne */
.hero-page { position: relative; display: flex; align-items: center; min-height: 60vh; padding-block: var(--tc-espace-xl); overflow: hidden; }
.hero-page__fond { position: absolute; inset: 0; z-index: 0; }
.hero-page__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Le voile etait a 0,5 au milieu du degrade, cest-a-dire au plus faible
   exactement la ou se pose le chapeau. Sur une photo claire — la carrosserie
   blanche du camion — le texte tombait a 2,86:1. Porte a 0,65 : dans le pire
   cas, un pixel blanc pur sous le voile, le blanc plein atteint 5,85:1.
   Mesure, pas estime. Repond au critere de recette A-5. */
.hero-page--avec-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,18,45,0.85) 0%, rgba(6,18,45,0.65) 50%, rgba(6,18,45,0.9) 100%); z-index: 1; }
.hero-page__interieur { position: relative; z-index: 2; width: 100%; text-align: center; }
.hero-page--avec-image .hero-page__titre { color: var(--tc-blanc); }
.hero-page--avec-image .hero-page__titre em { color: rgba(255,255,255,0.65); }
.hero-page--avec-image .hero-page__chapeau { color: var(--tc-blanc); }
.hero-page--avec-image .bouton--principal { background: var(--tc-blanc); color: var(--tc-noir); }
.hero-page--avec-image .bouton--principal:hover { background: var(--tc-fond-creme); color: var(--tc-noir); }
.hero-page--avec-image .bouton--secondaire { color: var(--tc-blanc); border-color: rgba(255,255,255,0.7); }
.hero-page--avec-image .bouton--secondaire:hover { background: var(--tc-blanc); color: var(--tc-marine); }
.hero-page__titre { max-width: 20ch; margin: 0 auto var(--tc-espace-s); }
.hero-page__chapeau { max-width: 56ch; margin-inline: auto; }
.hero-page__boutons { display: flex; flex-wrap: wrap; gap: var(--tc-espace-s); justify-content: center; margin-top: var(--tc-espace-m); }

/* Grille de cartes */
.grille-cartes { padding-block: var(--tc-espace-xl); }
.grille-cartes--blanc { background: var(--tc-blanc); }
.grille-cartes--creme { background: var(--tc-fond-creme); }
.grille-cartes--bleu-pale { background: var(--tc-fond-bleu-pale); }
.grille-cartes__entete { max-width: 62ch; margin: 0 auto var(--tc-espace-l); text-align: center; }
.grille-cartes__titre { margin-bottom: var(--tc-espace-s); }
.grille-cartes__chapeau { color: var(--tc-gris); }
.grille-cartes__action { margin: var(--tc-espace-m) 0 0; }
.grille-cartes__liste { display: grid; gap: var(--tc-espace-m); list-style: none; margin: 0; padding: 0; }
.grille-cartes__liste--2 { grid-template-columns: repeat(2, 1fr); }
.grille-cartes__liste--3 { grid-template-columns: repeat(3, 1fr); }
.grille-cartes__liste--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
    display: flex; flex-direction: column; gap: 0.75rem;
    padding: var(--tc-espace-m); min-height: 260px;
    background: linear-gradient(135deg, var(--tc-blanc) 0%, var(--tc-fond-bleu-clair) 100%);
    border: 1px solid #E2E8F0; border-radius: 24px;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.carte:hover { border-color: var(--tc-marine); box-shadow: 0 10px 30px rgba(12,42,84,0.05); }
/* Les 260 px de hauteur minimale ci-dessus etaient calcules pour une carte
   portant un numero et une icone. Privee des deux, elle gardait le vide qui
   leur etait reserve, soit 92 px sous le dernier texte. La carte reprend donc
   sa hauteur naturelle des que ces deux elements manquent. 23/09. */
.carte:not(:has(.carte__icone)):not(:has(.carte__numero)) { min-height: 0; }
.carte__icone { display: inline-flex; color: var(--tc-orange); margin-bottom: var(--tc-espace-xs); }
.carte__icone .icone { width: 32px; height: 32px; }
.carte__titre { font-family: var(--tc-police-texte); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--tc-marine); margin: 0; }
.carte__texte { color: var(--tc-gris); font-size: 0.9375rem; margin: 0; }
.carte__lien { margin-top: auto; padding-top: var(--tc-espace-xs); color: var(--tc-marine); font-weight: 600; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }

/* Cinq cartes dans une grille de trois : la derniere rangee n en porte que
   deux et laisse un trou en bas a droite, visible depuis le retrait du
   transport maritime le 24/09 qui a fait passer le bloc de six a cinq.
   On double le nombre de colonnes, chaque carte en occupe deux, ce qui permet
   de decaler la derniere rangee d une demi-carte : les deux cartes se centrent
   sous les trois du dessus, et le trou devient une marge symetrique.
   Aucune carte n est ajoutee : le titre annonce « Cinq expertises », et on
   n invente pas une sixieme prestation pour boucher un trou. 28/09. */
.grille-cartes__liste--3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
.grille-cartes__liste--3:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
.grille-cartes__liste--3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }

@media (max-width: 980px) {
    .grille-cartes__liste--3, .grille-cartes__liste--4 { grid-template-columns: repeat(2, 1fr); }
    /* A deux colonnes, c est la cinquieme carte qui se retrouve seule.
       Meme principe : quatre colonnes, et elle se centre sur la derniere rangee. */
    .grille-cartes__liste--3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(4, 1fr); }
    .grille-cartes__liste--3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: auto / span 2; }
    .grille-cartes__liste--3:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
    .grille-cartes__liste { grid-template-columns: 1fr !important; }
    /* Une seule colonne : les spans ci-dessus creeraient des colonnes
       implicites et casseraient l empilement. On les annule. */
    .grille-cartes__liste--3:has(> :nth-child(5):last-child) > * { grid-column: auto !important; }
}

/* Fiches d'agence, trois présentations */
.agences { padding-block: var(--tc-espace-xl); }
.agences__entete { max-width: 62ch; margin: 0 auto var(--tc-espace-l); text-align: center; }
.agences__action { margin: var(--tc-espace-m) 0 0; }
.agences__liste { list-style: none; margin: 0; padding: 0; }
.agence__etiquette { font-family: var(--tc-police-titre); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tc-orange-texte); margin: 0 0 var(--tc-espace-xs); }
.agence__ville { margin: 0 0 0.25rem; }
.agence__sous-titre { color: var(--tc-gris); margin: 0 0 var(--tc-espace-s); }
.agence__adresse { font-style: normal; color: var(--tc-gris); margin-bottom: var(--tc-espace-s); }
.agence__contacts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--tc-espace-s); margin: 0; font-size: 0.9375rem; }
.agence__contacts dt { color: var(--tc-gris); }
.agence__contacts dd { margin: 0; color: var(--tc-marine); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
/* Sans `min-width: 0`, une colonne de grille refuse de descendre sous la
   largeur de son contenu : le courriel debordait de la carte au lieu de passer
   a la ligne. Constate le 25/09 a quatre fiches de front. */
.agence__contacts a:hover { color: var(--tc-orange); }
.agence__action { margin-top: var(--tc-espace-m); }

/* Détaillée : photo pleine hauteur, alternance gauche/droite */
.agences--fiche-detaillee .agence { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tc-espace-l); align-items: center; padding-block: var(--tc-espace-l); border-top: 1px solid rgba(12,42,84,0.1); }
.agences--fiche-detaillee .agence:first-child { border-top: 0; }
.agences--fiche-detaillee .agence--inversee .agence__photo { order: 2; }
.agence__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; }

/* Grille de cartes de l'accueil : vignette en tete, informations sur marine.
   Decide avec Lucile le 21/09/2026 — les cartes etaient du texte sur fond tres
   clair, elles ne se voyaient pas. Les photos des trois agences existaient deja
   et ne servaient que sur la page Agences.
   Le texte s'inverse ici comme dans une section marine : blanc sur #0C2A54,
   14,24:1, et 78 % de blanc pour les lignes secondaires, 9,18:1. */
/* Quatre implantations depuis le 24/09, disposees DEUX PAR DEUX sur l accueil.
   Choix de Lucile le 25/09, apres un essai a quatre de front : a 264 px de
   large, les adresses de courriel etaient coupees net par le bord de la carte. */
.agences--grille-teaser .agences__liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tc-espace-m);
}
/* Le portrait des fiches se resserre a quatre de front : le format 3/2
   donnait des photos trop hautes pour la largeur restante. */
.agences--grille-teaser .agence__photo img { aspect-ratio: 16 / 10; }
.agences--grille-teaser .agence {
    display: flex; flex-direction: column;
    padding: 0; background: var(--tc-marine); border-radius: 4px; overflow: hidden;
}
.agences--grille-teaser .agence__photo { display: block; }
.agences--grille-teaser .agence__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
.agences--grille-teaser .agence__infos { padding: var(--tc-espace-m); }
.agences--grille-teaser .agence__ville { color: var(--tc-blanc); }
.agences--grille-teaser .agence__sous-titre,
.agences--grille-teaser .agence__adresse,
.agences--grille-teaser .agence__contacts dt { color: rgba(255,255,255,0.78); }
.agences--grille-teaser .agence__contacts dd,
.agences--grille-teaser .agence__contacts dd a { color: var(--tc-blanc); }

/* Liste compacte */
/* Deux par deux, comme sur l accueil : a trois colonnes, la quatrieme fiche
   restait seule sur sa rangee. Aligne le 25/09 sur la grille de l accueil. */
.agences--liste-compacte .agences__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tc-espace-m); }
/* Les photos reviennent sur Nous contacter, demande de Lucile du 25/09 : la
   variante compacte les masquait. Meme format que l accueil, 16/10, pour que
   les quatre implantations se presentent partout de la meme facon. */
.agences--liste-compacte .agence__photo { display: block; margin-bottom: var(--tc-espace-m); }
.agences--liste-compacte .agence__photo img {
    display: block; width: 100%; aspect-ratio: 16 / 10;
    object-fit: cover; border-radius: 4px;
}
.agences--liste-compacte .agence__ville { font-size: clamp(20px, 2vw, 26px); }

@media (max-width: 900px) {
    .agences--fiche-detaillee .agence { grid-template-columns: 1fr; }
    .agences--fiche-detaillee .agence--inversee .agence__photo { order: 0; }
    .agences--grille-teaser .agences__liste,
    .agences--liste-compacte .agences__liste { grid-template-columns: 1fr; }
}

/* Fond vidéo de la page d'accueil : fixé derrière tout le contenu */
.fond-video { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fond-video__media { width: 100%; height: 100%; object-fit: cover; }
/* Variante image : le conteneur est deja en position fixe, l image ne bouge
   donc pas au defilement. Demande de Lucile du 24/09, en remplacement de la
   video. `object-position` garde le camion et son lettrage dans le cadre
   quand la fenetre est plus etroite que l image. */
.fond-video--image .fond-video__media { object-position: 72% 50%; }
/* Le voile de la video ne suffit pas sur une photo de coucher de soleil :
   mesure du 24/09, le titre blanc tombait a 1,12 de contraste et la ligne
   orange a 1,00, pour un minimum exige de 3 sur du grand texte. Voile propre
   a la variante image, plus dense et plus haut. */
/* 28/09 : le voile dense est DESCENDU sur le heros, et le voile global est
   allege. Raison : `.fond-video` est en `position: fixed`, son voile couvrait
   donc tout l ecran en permanence. Il protegeait le texte du heros, mais il
   assombrissait aussi les bandes de photo visibles entre les panneaux, ou il
   n y a aucun texte a proteger. Mesure du 28/09 : ces bandes etaient a 0,02-0,03
   de luminance, c est-a-dire quasi noires, et c est ce que Cecile voyait quand
   elle a ecrit que le site etait sombre.
   On ne peut pas regler les deux avec un seul voile : alleger le voile fixe
   faisait tomber la mention du heros de 5,95 a 3,81, sous le seuil de 4,5.
   D ou la separation des deux roles. Ne pas les refusionner. */
.fond-video--image .fond-video__voile { background: rgba(6,18,45,0.12); }

/* Pas de voile sur le heros. Retire le 28/09 a la demande de Lucile, qui le
   trouvait trop couvrant sur la photo choisie par Cecile.

   Ce que cela coute, mesure sur les pixels reels avant retrait : sans voile,
   le pire cas tombe a 1,22 sur la ligne orange (seuil 3), 2,85 sur la mention
   et 2,11 sur le bouton a contour (seuil 4,5). Le ciel du coucher de soleil a
   une luminance proche de celle de l orange, d ou l effondrement.

   La lisibilite est donc reportee sur une ombre portee appliquee AUX LETTRES,
   qui n assombrit pas l image. Attention : une ombre portee ameliore la
   lisibilite reelle mais n est pas creditee par la mesure de contraste WCAG,
   qui ne regarde que la couleur du fond. Les chiffres ci-dessus restent donc
   les chiffres officiels de ce heros. Ne pas les presenter comme conformes. */
/* Les ombres portees du heros sont definies plus bas, sur `.hero-accueil__titre`
   et `.hero-accueil__mention` : elles y sont renforcees. Ne pas en ajouter ici,
   ces regles-ci seraient ecrasees par les leurs, qui viennent apres. */
.hero-accueil__boutons .bouton--clair { border-color: rgba(255,255,255,0.85); }
@media (max-width: 760px) {
    .fond-video--image .fond-video__media { object-position: 78% 50%; }
}


.fond-video__voile {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,18,45,0.25) 0%, rgba(6,18,45,0) 35%, rgba(6,18,45,0) 55%, rgba(6,18,45,0.55) 100%);
}

/* Tout le contenu passe au-dessus de la vidéo */
body:has(.fond-video) main > * { position: relative; z-index: 1; }
body:has(.fond-video) .entete { z-index: 110; }
body:has(.fond-video) .pied-de-page { position: relative; z-index: 2; }

/* Héros d'accueil : titre géant sur la vidéo */
.hero-accueil {
    position: relative; z-index: 1;
    display: flex; align-items: center; text-align: left;
    min-height: min(88vh, 820px);
    padding-block: var(--tc-espace-xl) var(--tc-espace-l);
    background: transparent;
}
.hero-accueil__interieur { position: relative; z-index: 2; width: 100%; }

/* Le bloc du heros remonte de 90 px sur grand ecran. Demande de Lucile le
   28/09 : la ligne orange « pour tous les pays » se posait sur le ciel clair du
   coucher de soleil, ou elle se lisait mal. Mesure sur les pixels reels, pire
   cas sous la ligne : 3,92 a la position d origine, 5,08 une fois remontee.
   Le gain vient de deux choses a la fois, un ciel plus sombre et un voile plus
   dense en haut du heros (0,70 contre 0,52 a mi-hauteur).
   90 px et pas davantage : au-dela de 100 px le gain plafonne, et le titre
   viendrait toucher le bandeau, qui fait 88 px. La le titre reste a 160 px du
   haut. Sous 900 px de large le bloc reste centre : le titre y est plus petit
   et le heros plus court, remonter n aurait plus de sens. */
@media (min-width: 900px) {
    .hero-accueil { align-items: flex-start; padding-top: 160px; }
}
.hero-accueil__titre {
    font-family: var(--tc-police-titre);
    font-size: var(--tc-titre-taille);
    line-height: var(--tc-titre-interligne);
    letter-spacing: var(--tc-titre-interlettrage);
    color: var(--tc-blanc);
    margin: 0 0 var(--tc-espace-m);
    max-width: 18ch;
    /* Ombre renforcee le 28/09, quand le voile du heros a ete retire, puis
       allegee le 07/10 a la demande de Lucile qui la trouvait trop marquee :
       halo de 40 px retire, les deux autres couches adoucies. */
    text-shadow: 0 1px 2px rgba(6,18,45,0.6), 0 2px 10px rgba(6,18,45,0.35);
}
.hero-accueil__titre em { display: block; color: var(--tc-orange); }
.hero-accueil__boutons { display: flex; flex-wrap: wrap; gap: var(--tc-espace-s); justify-content: flex-start; }
.hero-accueil__boutons .bouton--clair { text-shadow: 0 1px 2px rgba(6,18,45,0.95), 0 2px 12px rgba(6,18,45,0.8); }
/* Fond marine propre au bouton a contour, decide le 06/10 (option 3 du
   contraste du heros, choix de Lucile) : la photo reste sans voile, seul le
   bouton porte son fond. Pire cas mesure sous les lettres : 2,43 -> 8,38 a
   1280 px, 1,35 -> 6,73 a 390 px (seuil 4,5). */
.hero-accueil__boutons .bouton--clair { background: rgba(12,42,84,0.88); }
.hero-accueil__boutons .bouton--clair:hover { background: var(--tc-blanc); color: var(--tc-marine); }
/* Mention entre le titre et les boutons. Petite capitale interlettree assumee
   ici, contrairement aux surtitres de section passes en bas de casse le 18/09 :
   ce n est pas un surtitre de section mais une signature sous le titre, et
   c est la forme proposee par la cliente. */
.hero-accueil__mention {
    margin: 0 0 var(--tc-espace-l);
    font-family: var(--tc-police-texte);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(6,18,45,0.95), 0 2px 12px rgba(6,18,45,0.85), 0 0 26px rgba(6,18,45,0.7);
    /* Pastille marine, decidee le 06/10 (option 3) : sans elle la mention
       tombait sur le nez blanc de l avion. Pire cas sous les lettres :
       2,14 -> 8,33 a 1280 px, 1,88 -> 8,00 a 390 px (seuil 4,5). */
    display: inline-block;
    padding: 0.45em 0.95em;
    border-radius: 999px;
    background: rgba(12,42,84,0.72);
    color: var(--tc-blanc);
}
@media (max-width: 760px) {
    .hero-accueil__titre { max-width: none; }
    .hero-accueil__mention { letter-spacing: 0.12em; font-size: 0.75rem; }
}

.bouton--clair { background: transparent; color: var(--tc-blanc); border-color: rgba(255,255,255,0.55); }
.bouton--clair:hover { background: var(--tc-blanc); color: var(--tc-marine); }

/* Respiration : une section transparente qui laisse voir la vidéo */
.respiration { position: relative; z-index: 1; background: transparent; pointer-events: none; }
/* Hauteurs reduites le 28/09. Ces bandes laissent voir la photo de fond entre
   les panneaux : a 25vh, elles montraient 900 px de photo sombre sur le seul
   accueil, ce qui portait la page a 36 % de surface sombre. Cecile trouvait le
   site trop sombre. On garde une echappee sur la photo, sans qu elle domine. */
.respiration--courte { height: 7vh; }
.respiration--moyenne { height: 9vh; }
.respiration--longue { height: 14vh; }

/* Chiffres clés. Le bloc n'avait aucune mise en forme : les valeurs sortaient
   en texte courant. La maquette les aligne sur une ligne, valeur en gros
   au-dessus de son libellé en capitales. */
.chiffres { padding-block: var(--tc-espace-l); }
.chiffres__entete { max-width: 62ch; margin: 0 auto var(--tc-espace-m); text-align: center; }
.chiffres__liste {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--tc-espace-m); margin: 0; padding: 0;
}
.chiffres__liste:has(.chiffre:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
/* Le bloc faisait 175 px de haut, dont 96 de marge : une seule ligne de texte
   dans un grand cadre. Lucile le trouvait petit et vide, le 22/09. Trois
   ajouts : un pictogramme au-dessus du chiffre, le chiffre agrandi — c'est lui
   le visuel —, et un filet entre les colonnes pour que les quatre se lisent
   comme une serie et non comme quatre mots perdus.
   Le bandeau marine pleine largeur a ete essaye puis ecarte le meme jour :
   il denotait trop sur la page d accueil. */
.chiffre { text-align: center; position: relative; }
.chiffres:not(.chiffres--cartes) .chiffres__liste .chiffre + .chiffre::before {
    content: ""; position: absolute; left: calc(var(--tc-espace-m) / -2); top: 12%;
    width: 1px; height: 76%; background: rgba(12,42,84,0.14);
}
.chiffre__icone {
    display: inline-flex; color: var(--tc-orange); margin-bottom: var(--tc-espace-xs);
}
.chiffre__icone .icone { width: 32px; height: 32px; }
.chiffre__valeur {
    font-family: var(--tc-police-texte);
    font-size: clamp(38px, 4.4vw, 68px); font-weight: 600; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--tc-marine);
    font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
    margin: 0.5rem 0 0; font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-gris);
}

/* Variante bandeau : le bloc garde un fond marine plein, texte clair.
   Il respire plus que les autres sections : sur l'accueil, la regle du fond
   video resserre tout a 2,5rem, ce qui donnerait un bandeau etrique. Retenu
   avec Lucile le 22/09, qui trouvait le bloc des chiffres trop petit et trop
   vide en panneau translucide. */
.chiffres--bandeau { background: var(--tc-marine); }
.chiffres--bandeau { padding-block: var(--tc-espace-l); }
.chiffres--bandeau .chiffres__titre,
.chiffres--bandeau .chiffre__valeur { color: var(--tc-blanc); }
.chiffres--bandeau .chiffres__titre em { color: var(--tc-orange); }
.chiffres--bandeau .chiffre__libelle { color: rgba(255,255,255,0.78); }

@media (max-width: 760px) {
    .chiffres__liste,
    .chiffres__liste:has(.chiffre:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Variante cartes : chaque chiffre dans sa propre carte claire. */
/* Les chiffres en cartes gardent la taille d origine : agrandis a 68 px ils
   deborderaient de leur carte. L agrandissement du 22/09 ne vise que l accueil
   et les variantes pleine largeur. */
.chiffres--cartes .chiffre__valeur { font-size: clamp(30px, 3.2vw, 46px); }

.chiffres--cartes .chiffre {
    padding: var(--tc-espace-m);
    background: linear-gradient(135deg, var(--tc-blanc) 0%, var(--tc-fond-bleu-clair) 100%);
    border: 1px solid #E2E8F0; border-radius: 24px;
}

/* Sur telephone, ces cartes tombaient a deux par ligne pour TROIS chiffres :
   deux en haut, une seule en bas, et un grand trou a cote. Elles gardaient en
   plus 32 px de marge interieure sur 163 px de large, soit 99 px utiles pour
   un chiffre et deux mots : Lucile les a trouvees vides, a juste titre.
   Sous 620 px elles passent donc sur une seule colonne et deviennent des
   bandes compactes, chiffre a gauche et libelle a droite. Plus de trou, plus
   de vide interieur, et la largeur est enfin occupee. 28/09. */
@media (max-width: 620px) {
    .chiffres--cartes .chiffres__liste,
    .chiffres--cartes .chiffres__liste:has(.chiffre:nth-child(3):last-child) {
        grid-template-columns: 1fr; gap: var(--tc-espace-s);
    }
    .chiffres--cartes .chiffre {
        display: flex; align-items: center; gap: var(--tc-espace-m);
        text-align: left; padding: var(--tc-espace-s) var(--tc-espace-m);
    }
    .chiffres--cartes .chiffre__valeur { flex: 0 0 auto; line-height: 1.1; }
    .chiffres--cartes .chiffre__libelle { margin: 0; }
}

/* Rythme vertical. Sur l'accueil, les sections sont serrées et ce sont les
   respirations qui donnent l'air, comme dans la maquette. Sur les pages
   intérieures, il n'y a pas de respiration : la section respire elle-même. */
/* Le bandeau marine est exclu : pleine largeur, il a besoin de respirer,
   sinon il parait plus etrique que le panneau qu il remplace. 22/09. */
body:has(.fond-video) section:not(.hero-accueil):not(.respiration):not(.chiffres--bandeau) { padding-block: 2.5rem; }
body:not(:has(.fond-video)) .bandeau,
body:not(:has(.fond-video)) .grille-cartes,
body:not(:has(.fond-video)) .agences,
body:not(:has(.fond-video)) .faq,
body:not(:has(.fond-video)) .frise,
body:not(:has(.fond-video)) .mur-logos,
body:not(:has(.fond-video)) .appel-action { padding-block: 6rem; }

/* Fond transparent : la section s'efface, mais le contenu se pose sur le
   panneau de verre dépoli, qui est clair. Le texte reste donc marine, comme
   dans la maquette. Éclaircir le texte ici le rendait blanc sur blanc. */
.bandeau--transparent .surtitre,
.grille-cartes--transparent .surtitre,
.chiffres--transparent .surtitre { color: var(--tc-orange); }

/* Mobile : la vidéo reste, elle défile comme sur grand écran. Décision de
   Lucile du 23/09, qui révise le retrait du 21/09. Le marine foncé demeure en
   fond du conteneur : c'est ce qu'on voit tant que la vidéo n'a pas peint,
   et si elle échoue. En mouvement réduit, elle cède toujours la place. */
@media (max-width: 760px) {
    .hero-accueil { min-height: 68vh; }
    .fond-video { background: var(--tc-marine-fonce); }
}
@media (prefers-reduced-motion: reduce) {
    .fond-video__media { display: none; }
    .fond-video { background: var(--tc-marine-fonce); }
}

/* Questions fréquentes */
.faq { padding-block: var(--tc-espace-xl); }
.faq__entete { max-width: 62ch; margin-bottom: var(--tc-espace-l); }
.faq__chapeau { color: var(--tc-gris); }
.faq__liste { max-width: 80ch; border-top: 1px solid rgba(12,42,84,0.12); }
.question { border-bottom: 1px solid rgba(12,42,84,0.12); }
.question__intitule {
    display: flex; align-items: baseline; gap: var(--tc-espace-s);
    padding: var(--tc-espace-s) 2.2rem var(--tc-espace-s) 0;
    position: relative; cursor: pointer; list-style: none;
    font-family: var(--tc-police-texte); font-weight: 600; color: var(--tc-marine);
}
.question__intitule::-webkit-details-marker { display: none; }
.question__intitule::after {
    content: ""; position: absolute; right: 0.4rem; top: 1.35rem;
    width: 10px; height: 10px; border-right: 2px solid var(--tc-orange); border-bottom: 2px solid var(--tc-orange);
    transform: rotate(45deg); transition: transform var(--tc-transition);
}
.question[open] .question__intitule::after { transform: rotate(-135deg); }
.question__intitule:hover { color: var(--tc-orange); }
.question__intitule:focus-visible { outline: 2px solid var(--tc-orange); outline-offset: 2px; }
/* Le theme n est plus un rectangle creme. Pose sur une section marine, il
   faisait autocollant et son texte restait faible : signale par Lucile le
   21/09. C est desormais un libelle discret, sans fond, qui suit la couleur de
   la section — 7,68:1 sur marine, 5,02:1 sur fond clair. */
.question__theme {
    margin-left: auto; padding: 0; background: transparent;
    font-family: var(--tc-police-texte);
    font-size: 0.8125rem; font-weight: 500;
    letter-spacing: 0; text-transform: none; white-space: nowrap;
    color: var(--tc-gris);
}
.fond-marine .question__theme { color: rgba(255,255,255,0.7); }
/* 70 caracteres par ligne, comme partout ailleurs sur le site. Mesure du
   23/09 : les reponses couraient sur 918 px, soit 89 caracteres, quand les
   CGV et les mentions legales tiennent a 74 et les pages interieures a 65. */
.question__reponse { padding: 0 2.2rem var(--tc-espace-m) 0; color: var(--tc-gris); max-width: 60ch; }
.question__reponse p:last-child { margin-bottom: 0; }

/* Carte des implantations, dessin figé, aucun service extérieur */
.implantations { padding-block: var(--tc-espace-xl); background: var(--tc-fond-bleu-clair); }
.implantations__interieur { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tc-espace-l); align-items: center; }
.implantations__texte { max-width: 52ch; }
.implantations__titre { margin-bottom: var(--tc-espace-s); }
.implantations__chapeau { color: var(--tc-gris); }
.implantations__astuce { margin-top: var(--tc-espace-m); font-size: 0.875rem; color: var(--tc-gris); font-style: italic; }
.implantations__zone { display: flex; justify-content: center; }
.implantations__dessin { width: 100%; max-width: 440px; height: auto; }

.implantations__contour { fill: none; stroke: rgba(12,42,84,0.22); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.implantations__liaison { fill: none; stroke: var(--tc-orange); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.5; }
.implantations__halo  { fill: var(--tc-orange); opacity: 0.15; transform-box: fill-box; transform-origin: center; }
.implantations__point { fill: var(--tc-orange); transform-box: fill-box; transform-origin: center; transition: transform var(--tc-transition); }
.implantations__nom   { font-family: var(--tc-police-texte); font-size: 13px; font-weight: 600; fill: var(--tc-marine); }

.implantations__ville { cursor: pointer; }
.implantations__ville:hover .implantations__point { transform: scale(1.3); }
.implantations__ville:hover .implantations__nom { fill: var(--tc-orange); }
.implantations__ville:focus-visible { outline: 2px solid var(--tc-orange); outline-offset: 3px; }

@keyframes tc-pulsation {
    0%   { transform: scale(0.4); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}
.implantations__halo { animation: tc-pulsation 2s ease-out infinite; }
.implantations__ville:nth-of-type(2) .implantations__halo { animation-delay: 0.6s; }
.implantations__ville:nth-of-type(3) .implantations__halo { animation-delay: 1.2s; }

@media (max-width: 900px) {
    .implantations__interieur { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .implantations__halo { animation: none; opacity: 0.2; }
}

/* Grille de cartes : présentations supplémentaires */
.carte__numero { font-family: var(--tc-police-titre); font-size: 2.25rem; line-height: 1; color: rgba(12,42,84,0.18); margin: 0 0 var(--tc-espace-xs); font-variant-numeric: tabular-nums; }
.grille-cartes--numerotees .carte { border: 1px solid rgba(12,42,84,0.1); }
.carte--avant { background: var(--tc-marine) !important; border-color: var(--tc-marine) !important; }
.carte--avant .carte__titre { color: var(--tc-blanc); }
.carte--avant .carte__texte { color: rgba(255,255,255,0.8); }
.carte--avant .carte__numero { color: rgba(255,255,255,0.3); }
.carte--avant .carte__icone { color: var(--tc-blanc); }
.grille-cartes--valeurs .carte { background: transparent; border: 0; border-top: 2px solid var(--tc-marine); border-radius: 0; padding-inline: 0; }

/* Variante valeurs : l'icone quitte le dessus du titre pour passer sur le
   cote, en grand, et prendre toute la hauteur du bloc de texte. Demande de
   Lucile du 23/09. Le dessin reste centre verticalement : le SVG conserve ses
   proportions et se cale au milieu de la colonne etiree. */
.grille-cartes--valeurs .carte {
    display: grid;
    grid-template-columns: auto 1fr;
    /* Des rangees EXPLICITES, sinon `grid-row: 1 / -1` ne couvre qu une seule
       rangee : dans une grille implicite, la ligne -1 est la ligne 1. Les
       rangees en trop sont vides, donc hautes de zero. Piege paye le 23/09 :
       l icone restait dans la premiere rangee, qu elle gonflait, et le texte
       se retrouvait decolle du titre. */
    grid-template-rows: repeat(6, auto);
    /* Les cartes d une meme rangee sont etirees a la hauteur de la plus haute.
       Sans align-content, ce surplus est reparti entre les six rangees, y
       compris les vides : le titre et le texte se decollaient de quelques
       pixels chacun. */
    align-content: start;
    column-gap: var(--tc-espace-m);
    align-items: start;
}
.grille-cartes--valeurs .carte > *:not(.carte__icone) { grid-column: 2; }
.grille-cartes--valeurs .carte__icone {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
/* Taille POSEE, pas relative. `height: 100%` n a de sens que si la carte a
   une hauteur definie : des que la hauteur minimale de 260 px est retiree, le
   pourcentage n a plus de reference, la colonne `auto` se dimensionne sur le
   contenu intrinseque et l icone part a 1 436 px. Constate le 25/09 en
   corrigeant le vide sous les cartes. Une taille en dur regle les deux
   problemes a la fois : plus de vide reserve, et les icones d une meme rangee
   sont enfin identiques — la premiere sortait a 107 px de large pour 131 de
   haut quand ses voisines faisaient 131, parce que la largeur se resolvait
   avant la hauteur. */
.grille-cartes--valeurs .carte__icone .icone {
    height: 112px;
    width: 112px;
    aspect-ratio: 1;
}
/* En grille, les marges ne fusionnent plus : sans cela le titre et le texte
   se decollent l un de l autre. */
.grille-cartes--valeurs .carte { row-gap: 0; }

/* Les 260 px de hauteur minimale de `.carte` etaient calcules pour une icone
   POSEE AU-DESSUS du titre, qui occupait le haut de la carte. Ici l icone est
   passee sur le cote : la reserve ne sert plus a rien et laisse environ 170 px
   de vide sous le dernier texte. Vu le 25/09 pendant la repasse visuelle, sur
   /qui-sommes-nous et sur /nos-agences. Meme raison que la regle des cartes
   sans icone ni numero, ligne 130 : la carte reprend sa hauteur naturelle. */
.grille-cartes--valeurs .carte { min-height: 0; }
.grille-cartes--valeurs .carte__titre { margin-block: 0 var(--tc-espace-xs); }
.grille-cartes--valeurs .carte__texte { margin-top: 0; }
@media (max-width: 600px) {
    .grille-cartes--valeurs .carte { column-gap: var(--tc-espace-s); }
    .grille-cartes--valeurs .carte__icone .icone { height: 88px; width: 88px; }
}
.grille-cartes--modes .carte__icone .icone { width: 40px; height: 40px; }

/* Bandeau photo et phrase */
.citation { position: relative; padding-block: var(--tc-espace-xl); background: var(--tc-marine-fonce); overflow: hidden; }
.citation__fond { position: absolute; inset: 0; z-index: 0; }
.citation__fond img { width: 100%; height: 100%; object-fit: cover; }
.citation--avec-image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,18,45,0.9) 0%, rgba(6,18,45,0.55) 60%, rgba(6,18,45,0.35) 100%); }
.citation__interieur { position: relative; z-index: 2; max-width: 60ch; }
.citation__phrase { font-family: var(--tc-police-titre); font-size: clamp(30px, 4.5vw, 58px); line-height: 1.05; letter-spacing: -1.5px; color: var(--tc-blanc); margin: 0; }
.citation__accent { color: var(--tc-orange); }
.citation__puces { display: flex; flex-wrap: wrap; gap: var(--tc-espace-xs); list-style: none; margin: var(--tc-espace-m) 0 0; padding: 0; }
.citation__puces li { padding: 0.3rem 0.85rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; color: var(--tc-blanc); font-size: 0.8125rem; font-weight: 500; }

/* Assistance directe */
.assistance { padding-block: var(--tc-espace-l); background: var(--tc-blanc); }
.assistance__interieur { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--tc-espace-l); align-items: center; }
.assistance__texte { max-width: 52ch; }
.assistance__chapeau { color: var(--tc-gris); }
.assistance__voies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tc-espace-s); }
/* Les deux moyens de contact etaient deux rectangles blancs. Ils portent
   desormais un pictogramme, une barre d accent, et la carte entiere devient
   cliquable. Demande de Lucile du 25/09 : rendre la section plus visuelle. */
.voie {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: var(--tc-espace-m);
    padding: var(--tc-espace-m);
    background: var(--tc-blanc);
    border-radius: 4px;
    border-left: 3px solid var(--tc-orange);
    transition: box-shadow var(--tc-transition), transform var(--tc-transition);
}
.voie:hover { box-shadow: 0 10px 26px rgba(6,18,45,0.16); transform: translateY(-2px); }
.voie:focus-within { outline: 2px solid var(--tc-orange); outline-offset: 3px; }
.voie__icone {
    display: flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: rgba(238,119,33,0.12);
    color: var(--tc-orange-texte);
    flex: none;
}
.voie__icone .icone { width: 1.6rem; height: 1.6rem; }
.voie__libelle { margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-gris); }
.voie__valeur { margin: 0; font-family: var(--tc-police-texte); font-size: 1.5rem; font-weight: 600; color: var(--tc-marine); overflow-wrap: anywhere; }
.voie__valeur a { color: inherit; }
/* Toute la carte est cliquable, pas seulement la ligne de texte. */
.voie__valeur a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.voie:hover .voie__valeur { color: var(--tc-orange-texte); }

/* Sur telephone, `marseille@transcourrier.fr` demande 323 px a 24 px de corps
   pour 288 disponibles : il passait a la ligne, et `overflow-wrap: anywhere`
   le coupait en plein milieu du mot, « marseille@transcourrie / r.fr ».
   Mesure dans un cadre de 390 px le 28/09. A 20 px l adresse tient sur une
   seule ligne, avec 19 px de marge. On garde `anywhere` comme filet pour une
   adresse plus longue, mais il ne sert plus dans le cas courant. */
@media (max-width: 520px) {
    .voie__valeur { font-size: 1.25rem; }
}
@media (max-width: 480px) {
    .voie { grid-template-columns: 1fr; gap: var(--tc-espace-s); }
}

@media (max-width: 900px) { .assistance__interieur { grid-template-columns: 1fr; } }

/* Accroche de carte, la formule courte en italique sous le texte */
.carte__accroche { margin: 0; font-size: 0.875rem; font-style: italic; color: rgba(12,42,84,0.55); }
.carte--avant .carte__accroche { color: rgba(255,255,255,0.7); }

/* Phrase d'accompagnement de l'appel à l'action */
.appel-action__chapeau { max-width: 58ch; margin: 0 auto var(--tc-espace-m); color: var(--tc-gris); }
.appel-action--marine .appel-action__chapeau { color: rgba(255,255,255,0.78); }

/* Mur de logos */
.mur-logos { padding-block: var(--tc-espace-xl); background: var(--tc-blanc); }
.mur-logos--creme { background: var(--tc-fond-creme); }
.mur-logos--bleu-pale { background: var(--tc-fond-bleu-clair); }
.mur-logos__entete { max-width: 60ch; margin-bottom: var(--tc-espace-l); }
.mur-logos__titre { margin-bottom: var(--tc-espace-s); }
.mur-logos__chapeau { color: var(--tc-gris); }
.mur-logos__liste { display: grid; gap: var(--tc-espace-m); list-style: none; margin: 0; padding: 0; }
.mur-logos__liste--3 { grid-template-columns: repeat(3, 1fr); }
.mur-logos__liste--4 { grid-template-columns: repeat(4, 1fr); }
.mur-logos__liste--5 { grid-template-columns: repeat(5, 1fr); }
.mur-logos__element {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; padding: var(--tc-espace-s);
    background: var(--tc-blanc); border: 1px solid rgba(12,42,84,0.08); border-radius: 4px;
}
.mur-logos__image { max-width: 100%; max-height: 72px; width: auto; height: auto; filter: grayscale(1); opacity: 0.75; transition: filter var(--tc-transition), opacity var(--tc-transition); }
.mur-logos__element:hover .mur-logos__image { filter: grayscale(0); opacity: 1; }
.mur-logos__lien { display: flex; align-items: center; justify-content: center; }
.mur-logos__nom { font-weight: 600; color: var(--tc-marine); text-align: center; }

@media (max-width: 900px) {
    .mur-logos__liste--3,
    .mur-logos__liste--4,
    .mur-logos__liste--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Pages légales. Dix pages de conditions générales ne se lisent pas au même
   corps qu'une page de présentation : texte plus petit, ligne plus courte,
   titres ramenés à leur rôle de repère. Les titres du document source sont
   en capitales, on ne les retaille pas, on les descend en taille. */
.frame { max-width: 46rem; margin-inline: auto; padding-inline: var(--tc-gouttiere); padding-block: var(--tc-espace-m); }
.frame > * { max-width: none; }
.frame p, .frame li { font-size: 1rem; line-height: 1.7; color: var(--tc-gris-froid); }
.frame h2 {
    font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: 0;
    color: var(--tc-marine); margin-top: var(--tc-espace-l);
    padding-top: var(--tc-espace-s); border-top: 1px solid rgba(12,42,84,0.1);
}
.frame h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.frame h3 { font-size: 1.125rem; font-weight: 600; color: var(--tc-marine); margin-top: var(--tc-espace-m); }
.frame ul { padding-left: 1.25em; }
.frame li { margin-bottom: 0.5rem; }
.frame li::marker { color: var(--tc-orange); }

/* ---------------------------------------------------------------------------
   Formulaires. EXT:form produit un balisage à classes bootstrap sans charger
   bootstrap : sans ces règles, les champs sortent au style par défaut du
   navigateur. Les couleurs et la typographie viennent des jetons du site.
   --------------------------------------------------------------------------- */

form { max-width: 68ch; }
.frame-type-form_formframework { padding-block: var(--tc-espace-m); }

form legend {
    font-family: var(--tc-police-texte);
    font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--tc-orange);
    padding: 0; margin-bottom: var(--tc-espace-m);
}
form fieldset { border: 0; padding: 0; margin: 0 0 var(--tc-espace-l); }

.form-group { margin-bottom: var(--tc-espace-m); }
.form-label {
    display: block; margin-bottom: 0.375rem;
    font-size: 0.9375rem; font-weight: 600; color: var(--tc-marine);
}
.form-text { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--tc-gris); }

.form-control {
    width: 100%; padding: 0.75rem 1rem;
    font-family: var(--tc-police-texte); font-size: 1rem; color: var(--tc-marine);
    background: var(--tc-blanc);
    border: 1px solid rgba(12,42,84,0.2); border-radius: 12px;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.form-control:focus {
    outline: 0; border-color: var(--tc-orange);
    box-shadow: 0 0 0 3px rgba(238,119,33,0.18);
}
.form-control::placeholder { color: rgba(12,42,84,0.4); }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tc-marine) 50%), linear-gradient(135deg, var(--tc-marine) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
textarea.form-control { min-height: 9rem; resize: vertical; }

/* Cases à cocher et boutons radio */
.form-check { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 0.5rem; }
.form-check input { margin: 0.25rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--tc-orange); flex: 0 0 auto; }
.form-check-label { font-size: 0.9375rem; color: var(--tc-marine); line-height: 1.45; }
.input.checkbox .form-text { margin-left: 1.675rem; }

/* Boutons de navigation entre les étapes */
form .actions, form .btn-toolbar { margin-top: var(--tc-espace-l); }
form .btn-group { display: flex; flex-wrap: wrap; gap: var(--tc-espace-s); }
form .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.9375rem 2.25rem;
    font-family: var(--tc-police-texte); font-size: 1rem; font-weight: 600;
    border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--tc-transition), color var(--tc-transition);
}
form .btn-primary { background: var(--tc-marine); color: var(--tc-blanc); }
form .btn-primary:hover { background: var(--tc-marine-fonce); }
form .btn-secondary, form .btn-default {
    background: transparent; color: var(--tc-marine); border-color: var(--tc-marine);
}
form .btn-secondary:hover, form .btn-default:hover { background: var(--tc-marine); color: var(--tc-blanc); }

/* Champ en erreur et messages de validation */
.form-group.has-error .form-control, .form-control[aria-invalid="true"] { border-color: #C0392B; }
form .help-block, form .error { color: #C0392B; font-size: 0.875rem; margin-top: 0.375rem; }
form ul.f3-form-error, form .f3-form-error { color: #C0392B; }

/* Mention reCAPTCHA : ses conditions d'utilisation imposent de citer les
   règles de Google dès lors que le badge flottant n'est pas affiché. */
.form-recaptcha {
    margin: var(--tc-espace-xs) 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--tc-gris);
}
.form-recaptcha a { color: inherit; text-decoration: underline; }
/* Refus de la protection anti-robot : le message doit se voir, sinon le
   visiteur reprend le formulaire sans comprendre pourquoi il est refuse. */
.form-recaptcha--erreur { color: #C0392B; font-size: 0.875rem; font-weight: 500; margin-top: var(--tc-espace-xs); }

/* Étapes : le titre de page sert de repère au visiteur */
.form-navigation { margin-top: var(--tc-espace-m); }

/* Accès à l'espace de suivi : un formulaire court, posté directement vers la
   plateforme. Rien ne transite par ce site, d'où la mention sous le bouton. */
.acces-suivi { padding-block: var(--tc-espace-l); }
.acces-suivi__interieur { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tc-espace-l); align-items: start; }
.acces-suivi__entete { max-width: 46ch; }
.acces-suivi__titre { margin-bottom: var(--tc-espace-s); }
.acces-suivi__chapeau { color: var(--tc-gris); }
.acces-suivi__formulaire {
    display: flex; flex-direction: column; gap: var(--tc-espace-s);
    padding: var(--tc-espace-m);
    background: linear-gradient(135deg, var(--tc-blanc) 0%, var(--tc-fond-bleu-clair) 100%);
    border: 1px solid #E2E8F0; border-radius: 24px;
}
.acces-suivi__champ { display: flex; flex-direction: column; gap: 0.375rem; }
.acces-suivi__champ label { font-size: 0.9375rem; font-weight: 600; color: var(--tc-marine); }
.acces-suivi__champ input {
    width: 100%; padding: 0.75rem 1rem;
    font-family: var(--tc-police-texte); font-size: 1rem; color: var(--tc-marine);
    background: var(--tc-blanc);
    border: 1px solid rgba(12,42,84,0.2); border-radius: 12px;
}
.acces-suivi__champ input:focus {
    outline: 0; border-color: var(--tc-orange);
    box-shadow: 0 0 0 3px rgba(238,119,33,0.18);
}
.acces-suivi__formulaire .bouton { justify-content: center; margin-top: var(--tc-espace-xs); }
.acces-suivi__avertissement { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--tc-gris); }

@media (max-width: 900px) {
    .acces-suivi__interieur { grid-template-columns: 1fr; }
}

/* Frise d'histoire. Le bloc n'avait aucune mise en forme : les icônes SVG
   partaient à pleine largeur et la section atteignait près de six mille
   pixels de haut. Quatre colonnes reliées par un filet, empilées sur mobile. */
.frise { padding-block: var(--tc-espace-l); background: var(--tc-blanc); }
.frise__entete { max-width: 62ch; margin: 0 auto var(--tc-espace-l); text-align: center; }
.frise__titre { margin-bottom: var(--tc-espace-s); }
.frise__chapeau { color: var(--tc-gris); }

.frise__liste {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--tc-espace-m);
    list-style: none; margin: 0; padding: 0;
}
/* Le filet qui relie les époques, derrière les pastilles */
.frise__liste::before {
    content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px;
    height: 2px; background: rgba(12,42,84,0.12);
}
.etape { position: relative; display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.etape__marque { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.etape__icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--tc-fond-bleu-clair); border: 2px solid var(--tc-blanc);
    box-shadow: 0 0 0 2px rgba(12,42,84,0.12);
    color: var(--tc-marine);
}
.etape__icone .icone { width: 24px; height: 24px; }
.etape__annee {
    font-family: var(--tc-police-texte); font-size: 1.5rem; font-weight: 600;
    color: var(--tc-marine); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.etape__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0; }
.etape__etiquette {
    font-family: var(--tc-police-titre); font-size: 0.9375rem; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--tc-orange-texte);
}
.etape__lieu { font-size: 0.8125rem; color: var(--tc-gris); }
.etape__titre { font-size: 1.0625rem; font-weight: 600; color: var(--tc-marine); margin: 0; line-height: 1.35; }
.etape__texte { font-size: 0.9375rem; color: var(--tc-gris); margin: 0; }

@media (max-width: 900px) {
    .frise__liste { grid-template-columns: repeat(2, 1fr); }
    .frise__liste::before { display: none; }
}
@media (max-width: 560px) {
    .frise__liste { grid-template-columns: 1fr; }
}

/* Menu repliable. Au-dessus de 1100 pixels, la navigation et les deux boutons
   tiennent sur la barre. En dessous, ils passent dans un panneau que le bouton
   à trois barres ouvre. Un seul balisage sert aux deux cas. */
/* display:contents efface ce conteneur de la mise en page : la navigation et
   les boutons redeviennent les deuxième et troisième enfants de la barre,
   comme dans la maquette. Le balisage reste entier pour le mode replié. */
.entete__replis { display: contents; }
.navigation__bascule { display: none; }

.navigation__barres { position: relative; }
.navigation__barres, .navigation__barres::before, .navigation__barres::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    border-radius: 2px; transition: transform var(--tc-transition), background-color var(--tc-transition);
}
.navigation__barres::before, .navigation__barres::after { content: ""; position: absolute; left: 0; top: 0; }
.navigation__barres::before { transform: translateY(-7px); }
.navigation__barres::after { transform: translateY(7px); }

@media (max-width: 1180px) {
    .navigation__bascule {
        display: inline-flex; align-items: center; justify-content: center;
        position: relative; width: 44px; height: 44px;
        background: transparent; border: 0; cursor: pointer;
        color: var(--tc-marine);
    }
    body:has(.fond-video) .entete:not(.entete--pose) .navigation__bascule,
    body:has(.hero-page--avec-image) .entete:not(.entete--pose) .navigation__bascule { color: var(--tc-blanc); }

    .entete__replis {
        position: absolute; left: 0; right: 0; top: 100%;
        display: none; flex-direction: column; align-items: stretch; gap: var(--tc-espace-m);
        padding: var(--tc-espace-m) var(--tc-gouttiere) var(--tc-espace-l);
        background: var(--tc-blanc);
        box-shadow: 0 16px 30px rgba(12,42,84,0.12);
        max-height: calc(100vh - 100%); overflow-y: auto;
    }
    .entete--ouvert .entete__replis { display: flex; }

    .entete .navigation { position: static; transform: none; }

    /* Deux corrections du 28/09, mesurees dans un cadre de 390 px.

       1. base.css cache les onglets sous 820 px (`.navigation__liste
          { display: none }`) et ne les reaffiche JAMAIS. Sur telephone, le
          panneau du burger s ouvrait donc vide : les deux boutons, et zero
          onglet sur cinq. Il faut les rendre au panneau ouvert.

       2. La ligne ci-dessus n a jamais pris. base.css centre la navigation en
          absolu avec `.entete__interieur > .entete__replis .navigation`, soit
          0-3-0, plus specifique que `.entete .navigation`, 0-2-0. Resultat :
          dans le panneau, la nav restait posee en absolu, hauteur nulle a
          390 px et bloc centre qui chevauche les boutons a 1000 px. On reprend
          exactement la meme specificite pour reprendre la main. */
    .entete--ouvert .entete__replis .navigation__liste { display: flex; }
    .entete__interieur > .entete__replis .navigation { position: static; transform: none; }
    .navigation__liste { flex-direction: column; gap: 0; }
    .navigation__element > a {
        display: block; padding: 0.875rem 0; font-size: 1.0625rem;
        color: var(--tc-marine); border-bottom: 1px solid rgba(12,42,84,0.08);
    }
    .entete__actions { display: flex; flex-direction: column; gap: 0.625rem; }
    .entete__actions .bouton { justify-content: center; padding-block: 0.875rem; font-size: 1rem; }
    .entete--ouvert .entete__actions .bouton--contour { color: var(--tc-marine); border-color: rgba(12,42,84,0.3); }
    .entete--ouvert .entete__actions .bouton--blanc { background: var(--tc-marine); color: var(--tc-blanc); }

    /* Le panneau est blanc : son texte est marine, même par-dessus la vidéo. */
    body .entete--ouvert .navigation__element > a { color: var(--tc-marine); }
    body .entete--ouvert .navigation__element--actif > a { color: var(--tc-orange); }

    /* Le bouton devient une croix quand le panneau est ouvert */
    .entete--ouvert .navigation__barres { background: transparent; }
    .entete--ouvert .navigation__barres::before { transform: rotate(45deg); }
    .entete--ouvert .navigation__barres::after { transform: rotate(-45deg); }
    .entete--ouvert { background: var(--tc-blanc); }
    .entete--ouvert .entete__logo img { filter: none; }
    .entete--ouvert .navigation__bascule { color: var(--tc-marine); }
}

/* ═══ Sections marine ══════════════════════════════════════════════════════
   Alternance des pages intérieures, décidée le 21/09/2026 : sur toutes les
   pages sauf l'accueil, une section de contenu sur deux passe au marine de la
   charte, en commençant par la première sous le héros.

   Une seule définition pour tous les blocs : poser la classe `fond-marine`
   suffit, il n'y a rien à écrire bloc par bloc.

   Deux exclusions volontaires :
   - l'appel au devis reste clair sur les quinze pages (décision du 17/09) ;
   - une section qui porte un formulaire n'est jamais mise en marine, inverser
     des champs de saisie relevant d'un autre arbitrage.

   Le sélecteur porte `section` pour passer devant les blocs qui déclarent leur
   propre fond opaque — .assistance et .mur-logos — sans dépendre de l'ordre
   des règles dans ce fichier.

   Ce qui vit dans une tuile blanche ne s'inverse PAS : les cartes, les voies
   de contact et les chiffres en cartes gardent leur texte marine, ils sont
   posés sur du blanc. Seul ce qui touche directement le fond change. */
section.fond-marine { background: var(--tc-marine); }

/* Titres de section */
.fond-marine .grille-cartes__titre,
.fond-marine .chiffres__titre,
.fond-marine .agences__titre,
.fond-marine .mur-logos__titre,
.fond-marine .assistance__titre,
.fond-marine .faq__titre,
.fond-marine .agence__ville,
.fond-marine .question__intitule { color: var(--tc-blanc); }

/* Une fin de titre en emphase reste plus discrète que le titre, comme sur les
   bandeaux marine. Le procédé a été retiré le 18/09, la règle couvre le cas
   d'un titre saisi à la main dans le backend. */
.fond-marine .grille-cartes__titre em,
.fond-marine .chiffres__titre em,
.fond-marine .agences__titre em,
.fond-marine .mur-logos__titre em,
.fond-marine .assistance__titre em,
.fond-marine .faq__titre em { color: rgba(255,255,255,0.6); }

.fond-marine .surtitre { color: rgba(255,255,255,0.65); }

/* Textes courants posés sur le fond */
.fond-marine .grille-cartes__chapeau,
.fond-marine .mur-logos__chapeau,
.fond-marine .assistance__chapeau,
.fond-marine .faq__chapeau,
.fond-marine .agence__sous-titre,
.fond-marine .agence__adresse,
.fond-marine .question__reponse,
.fond-marine .agence__contacts dt { color: rgba(255,255,255,0.78); }

/* Ne PAS inverser .question__theme ni .mur-logos__nom : l'un est une étiquette
   posée sur un fond crème, l'autre vit dans une tuile blanche. Les inverser les
   rend illisibles — constaté en ouvrant la page le 21/09, le balisage seul ne le
   disait pas. Règle générale : ce qui porte son propre fond clair garde son
   texte sombre. */

.fond-marine .agence__contacts dd { color: var(--tc-blanc); }

/* Filets : un trait à 10 % de marine ne se voit plus sur du marine. Ils sont
   à 35 % et non moins, parce qu'ils délimitent des contenus — une ligne de FAQ
   est cliquable, une fiche d'agence est une entrée à part entière. À 35 % le
   rapport de contraste atteint 3,02:1, le seuil du critère WCAG 1.4.11 ;
   mesuré, pas estimé. */
.fond-marine.agences--fiche-detaillee .agence,
.fond-marine .agences--fiche-detaillee .agence { border-top-color: rgba(255,255,255,0.35); }
.fond-marine .question { border-bottom-color: rgba(255,255,255,0.35); }

/* Les cartes « valeurs » ne sont PAS des tuiles blanches : elles sont dessinées
   par un filet supérieur, fond transparent, titre et lien en marine. Sur marine,
   tout y devenait invisible — le titre disparaissait en laissant son espace, ce
   qui ouvrait un grand blanc entre l'icône et le texte. Elles s'inversent donc
   entièrement, contrairement aux cartes des autres variantes.
   Constaté par Lucile sur /qui-sommes-nous le 21/09. */
.fond-marine.grille-cartes--valeurs .carte { border-top-color: rgba(255,255,255,0.45); }
.fond-marine.grille-cartes--valeurs .carte__titre,
.fond-marine.grille-cartes--valeurs .carte__lien { color: var(--tc-blanc); }
.fond-marine.grille-cartes--valeurs .carte__texte,
.fond-marine.grille-cartes--valeurs .carte__accroche { color: rgba(255,255,255,0.78); }

/* Boutons. Depuis le 16/09 le bouton principal est marine : invisible ici, il
   s'inverse, exactement comme sur les bandeaux et les appels au devis marine.
   Aucun bouton ne vit dans une tuile blanche, les cartes portent un lien. */
.fond-marine .bouton--principal { background: var(--tc-blanc); color: var(--tc-marine); }
.fond-marine .bouton--principal:hover { background: var(--tc-fond-creme); color: var(--tc-marine); }
.fond-marine .bouton--secondaire { color: var(--tc-blanc); border-color: rgba(255,255,255,0.5); }
.fond-marine .bouton--secondaire:hover { background: var(--tc-blanc); color: var(--tc-marine); }

/* Sur marine, l orange assombri retomberait a 2,58:1 : c est l orange vif de la
   charte qui y passe, avec 4,95:1. Mesure le 21/09/2026. */
.fond-marine .agence__etiquette,
.fond-marine .etape__etiquette,
.bandeau--marine .agence__etiquette { color: var(--tc-orange); }

/* Chiffres sur une section marine : le filet doit devenir clair pour se voir. */
.fond-marine .chiffres:not(.chiffres--cartes) .chiffres__liste .chiffre + .chiffre::before,
.chiffres--bandeau:not(.chiffres--cartes) .chiffres__liste .chiffre + .chiffre::before { background: rgba(255,255,255,0.22); }

/* Ecran de confirmation d envoi. EXT:form remplace le formulaire par un simple
   <div id="<identifiant du formulaire>"> sans classe : d ou ce selecteur sur
   l identifiant, qui vaut « contact-… » ou « devis-… ». Sans mise en forme, le
   message se perdait en petit gris dans le blanc laisse par le formulaire.
   Constate au premier envoi reel du site, le 22/09. */
main div[id^="contact-"]:not(:has(form)),
main div[id^="devis-"]:not(:has(form)) {
    max-width: 46rem; margin: var(--tc-espace-m) auto; padding: var(--tc-espace-m);
    background: var(--tc-fond-bleu-pale); border-radius: 16px;
    text-align: center; font-size: 1.0625rem; line-height: 1.6; color: var(--tc-marine);
}


/* Texte assombri, indissociable du panneau gris : sur ce fond, le gris
   `#6F6F6F` des paragraphes tombait a 3,2 de contraste, sous le seuil de 4,5.
   Ces deux reglages vont ensemble, on ne touche pas l un sans l autre.

   On assombrit la VARIABLE, pas une liste de classes. La liste enumeree
   jusqu au 25/09 oubliait `.chiffre__libelle` (3,15) et surtout imposait le
   gris fonce a `.agence__adresse`, qui vit sur une carte MARINE dans la
   grille de l accueil : les quatre adresses y tombaient a 1,88, illisibles.
   Mesure le 25/09 pendant la repasse visuelle. En passant par la variable,
   toute regle qui pose une couleur explicite — `.agences--grille-teaser`,
   `.chiffres--bandeau`, `.fond-marine`, `.appel-action--marine` — reprend la
   main d elle-meme, et tout futur bloc gris est couvert sans y penser.
   `--tc-gris` ne sert que pour `color`, jamais un fond ni une bordure : la
   redefinir ici ne peut rien repeindre d autre. Verifie le 25/09. */
body:has(.fond-video) section:not(.hero-accueil) > .contenu-large {
    --tc-gris: var(--tc-gris-froid);
}


/* Le verre depoli est abandonne le 24/09. Tant qu une part du fond traverse,
   la teinte chaude de la photo peut passer : il suffit qu un navigateur
   applique `blur` sans appliquer `saturate(0)` pour que le panneau vire au
   beige chez le relecteur pendant qu il parait gris ici. Panneau opaque
   partout, une seule couleur, aucun rendu a parier. */


/* Groupes de choix (EXT:form) : le dernier `.form-group` gardait sa marge
   basse de 32 px A L INTERIEUR du cadre bleu, qui ajoute deja 32 px de
   remplissage. Il y avait donc 64 px sous le dernier choix contre 32 au
   dessus. Mesure le 25/09 sur l etape 1 du devis. */
.inputs-list > .form-group:last-child { margin-bottom: 0; }

/* Ancres sous l'en-tête fixe, 30/09/2026 : un lien vers #c1699 (formulaire de
   contact) ou #faq posait le titre visé sous l'en-tête collant, haut de 72 px. */
html { scroll-padding-top: 6rem; }

/* Variante « choix » de la grille de cartes, 30/09/2026 : aiguillage de la
   page Contact entre devis, message et demande d'accès. Demande de Lucile, qui
   trouvait les icônes de la variante valeurs datées : agrandies à 112 px, leur
   trait de 1,6 y dépasse 7 px. Ici l'icône reste à taille de lecture, en trait
   fin, sur une pastille. Toute la carte est cliquable : le lien s'étend par un
   pseudo-élément, sans changer le balisage. */
.grille-cartes--choix .carte { position: relative; min-height: 0; }
.grille-cartes--choix .carte__icone {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: var(--tc-espace-xs);
    border-radius: 16px; background: rgba(238, 119, 33, 0.10);
    color: var(--tc-orange-texte);
}
.grille-cartes--choix .carte__icone .icone { width: 28px; height: 28px; }
.grille-cartes--choix .carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.grille-cartes--choix .carte:hover { transform: translateY(-2px); }
.grille-cartes--choix .carte { transition: border-color var(--tc-transition), box-shadow var(--tc-transition), transform var(--tc-transition); }
.grille-cartes--choix .carte:focus-within { border-color: var(--tc-marine); }
@media (prefers-reduced-motion: reduce) { .grille-cartes--choix .carte:hover { transform: none; } }
/* Pas de lien visible sous le texte, demande de Lucile du 30/09 : la carte
   entiere est le lien. Le texte garde sa place dans l'arbre d'accessibilite
   (taille nulle, pas `display: none`), et le pseudo-element ci-dessus, place
   par rapport a la carte, continue de couvrir toute sa surface. */
.grille-cartes--choix .carte__lien { font-size: 0; padding: 0; margin: 0; line-height: 0; text-decoration: none; }
.grille-cartes--choix .carte:focus-within { outline: 2px solid var(--tc-marine); outline-offset: 2px; }

/* Liens dans le chapeau d'un heros de page, 30/09/2026 : la page Nous ecrire
   renvoie vers le devis et la creation de compte depuis son chapeau. Sans
   soulignement, ces liens blancs sur blanc ne se distinguaient pas du texte
   (WCAG 1.4.1, un lien ne se reconnait pas a la seule couleur). */
.hero-page__chapeau a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero-page__chapeau a:hover { text-decoration-thickness: 2px; }

/* Variante choix, carte mise en avant, 30/09/2026 : Lucile voulait alterner
   les couleurs des trois cartes. Blanc, marine, blanc plutot que l inverse :
   la section suivante de la page Contact est une bande marine, deux cartes
   marine juste au-dessus alourdissaient le haut de page. L accent passe par la
   case « mise en avant » de la carte, reglable dans le backoffice. Pastille
   blanche translucide et icone orange : contraste mesure 3,4 pour 3 requis
   sur un element graphique. Contour de focus orange, le marine y serait
   invisible. */
.grille-cartes--choix .carte--avant .carte__icone { background: rgba(255, 255, 255, 0.12); color: var(--tc-orange); }
.grille-cartes--choix .carte--avant:hover { box-shadow: 0 14px 34px rgba(12, 42, 84, 0.22); }
.grille-cartes--choix .carte--avant:focus-within { outline-color: var(--tc-orange); }