/* =============================================================================
   MK — Composants d'interface
   Parti pris repris du nouveau site Falcou, transposé en bâtiment : titrage
   condensé en capitales, aplats francs, angles vifs, voile sombre 0,37 sur les
   photos. Aucun angle arrondi, aucun dégradé, aucune ombre décorative, aucun
   liseré d'accent à gauche : ce sont les tics qui font « site généré ».
   ========================================================================== */

/* Un display explicite (flex, grid) l'emporte sur l'attribut hidden : sans cette
   règle, les boutons « Retour » et « Envoyer » resteraient visibles dès la
   première étape du formulaire. */
[hidden] { display: none !important; }

.t-xxl, .t-xl, .t-l {
  text-transform: uppercase; letter-spacing: -.005em; line-height: 1.04;
}
.t-xxl { font-size: clamp(34px, 5vw, 62px); font-weight: 700; }
.t-xl  { font-size: clamp(30px, 4vw, 52px); font-weight: 700; }
.t-l   { font-size: clamp(26px, 3vw, 40px); font-weight: 700; }
.t-m   { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; text-transform: uppercase; }
.t-s   { font-size: 19px; font-weight: 600; text-transform: uppercase; }

.marqueur { font-size: 13px; letter-spacing: .24em; }
.btn { font-size: 15px; letter-spacing: .09em; font-weight: 600; }
.nav__lien, .nav > a {
  font-size: 16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
/* Un intitulé de menu ne se coupe jamais en deux lignes : depuis l'ajout du lien
   « Estimer », la barre est plus serrée et « À propos » passait à la ligne. */
@media (min-width: 1000px) {
  .nav__lien { white-space: nowrap; }
  .nav { column-gap: clamp(14px, 1.6vw, 26px); }
}

/* Le chapeau d'un héros est borné par sa colonne, pas par sa longueur de ligne :
   sinon un texte un peu long déborde sous la photo voisine. */
.heros__texte .chapeau { max-width: 100%; }

/* Voile sombre sur les photos de bandeau, pour que le texte tienne dessus */
.photo--pleine { position: relative; }
.heros__media .photo--pleine::after,
.duo__media .photo--pleine::after {
  content: ""; position: absolute; inset: 0; background: #000; opacity: var(--voile);
}

/* Suppression des liserés d'accent à gauche */
.avis { border-left: none; border-top: 3px solid var(--marine); }
.info { border-top: none; border-left: 4px solid var(--marine); }
.encart { border-top-width: 5px; }

/* Un encart posé dans une section sombre garde son fond clair : il doit donc
   reprendre sa propre couleur d'encre, sinon il hérite du blanc de la section
   et son texte devient illisible. */
.encart { color: var(--encre); }
.encart h3 { color: var(--marine); }
.encart p, .encart ul.liste li, .encart span { color: var(--gris); }
.encart .encart__pied strong { color: var(--marine); }

/* Liste à coche posée sur fond sombre */
.sur-sombre .liste-coche p { color: var(--gris-pale); }
.sur-sombre .liste-coche strong { color: var(--blanc); }

/* =============================================================================
   MÉGA-MENU AVEC APERÇU PHOTO
   ========================================================================== */

.entete { position: relative; }

/* Le groupe reste en position statique : c'est l'en-tête qui sert de repère au
   panneau, sans quoi celui-ci serait contraint à la largeur du seul lien. */
.nav__groupe { position: static; }

.nav__groupe > .nav__lien::after {
  content: ""; display: block; width: 0; height: 2px; background: var(--sable);
  transition: width .18s ease; margin-top: 4px;
}
.nav__groupe:hover > .nav__lien::after,
.nav__groupe:focus-within > .nav__lien::after { width: 100%; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  display: none; background: var(--blanc);
  border-top: 1px solid var(--bord-clair);
  box-shadow: 0 22px 44px rgba(12, 46, 72, .13);
}
.nav__groupe:hover .mega,
.nav__groupe:focus-within .mega { display: block; }

.mega__in {
  display: grid; grid-template-columns: 1.25fr .95fr; gap: 52px;
  max-width: var(--largeur); margin-inline: auto;
  padding: 34px var(--gouttiere) 38px;
}
.mega__col { display: flex; flex-direction: column; gap: 14px; }
.mega__titre {
  font-family: var(--titre); font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sable-fonce);
  padding-bottom: 10px; border-bottom: 2px solid var(--marine);
}
.mega__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; }
.mega__lien {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 8px 4px 0;
  font-family: var(--titre); font-size: 17px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--encre);
  border-bottom: 1px solid var(--bord-clair);
}
.mega__lien .ico { stroke: var(--sable-fonce); flex-shrink: 0; }
.mega__lien:hover, .mega__lien:focus-visible { color: var(--marine); background: var(--creme); }

.mega__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--bord-clair);
}
.mega__pied span { font-size: 14.5px; color: var(--gris); }

.mega__apercu { display: flex; flex-direction: column; }
.mega__vue { position: relative; height: 250px; overflow: hidden; background: var(--marine-fonce); }
.mega__vue .photo { height: 100%; }
.mega__vue img { width: 100%; height: 100%; object-fit: cover; }
.mega__vue::after {
  content: ""; position: absolute; inset: 0; background: #000;
  opacity: var(--voile); pointer-events: none;
}
.mega__legende {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 20px; background: var(--marine); color: var(--blanc);
}
.mega__legende strong {
  font-family: var(--titre); font-size: 19px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
}
.mega__legende span { font-size: 14.5px; line-height: 1.55; color: var(--gris-pale); }

@media (max-width: 1099px) {
  .mega { position: static; display: block; box-shadow: none; border: none; }
  .mega__in { grid-template-columns: 1fr; gap: 0; padding: 0 0 10px 14px; }
  .mega__titre, .mega__apercu, .mega__pied { display: none; }
  .mega__liste { grid-template-columns: 1fr; }
  .mega__lien { min-height: 44px; font-size: 15.5px; color: var(--gris); }
  .nav__groupe > .nav__lien::after { display: none; }
}

/* =============================================================================
   MODALE
   ========================================================================== */

.modale {
  width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: none; background: var(--blanc); color: var(--encre); overflow: auto;
}
.modale::backdrop { background: rgba(12, 46, 72, .74); }
.modale__tete {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 28px 22px; background: var(--marine); color: var(--blanc);
}
.modale__tete h2 { color: var(--blanc); }
.modale__tete p { font-size: 15px; color: var(--gris-pale); margin-top: 6px; }
.modale__fermer {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  background: transparent; border: 1.5px solid rgba(232, 221, 207, .45);
  color: var(--blanc); font-size: 26px; line-height: 1; cursor: pointer;
}
.modale__fermer:hover { background: rgba(255, 255, 255, .12); }
.modale__corps { padding: 26px 28px 30px; }

/* =============================================================================
   FORMULAIRE PAR ÉTAPES
   ========================================================================== */

.etapes { display: flex; margin-bottom: 24px; border: 1px solid var(--bord); }
.etapes__item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--blanc); border-right: 1px solid var(--bord);
}
.etapes__item:last-child { border-right: none; }
.etapes__num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  font-family: var(--titre); font-size: 15px; font-weight: 700;
  background: var(--creme); color: var(--gris);
}
.etapes__lib {
  font-family: var(--titre); font-size: 14.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.etapes__item.est-active { background: var(--marine); }
.etapes__item.est-active .etapes__num { background: var(--sable); color: var(--marine-fonce); }
.etapes__item.est-active .etapes__lib { color: var(--blanc); }
.etapes__item.est-faite .etapes__num { background: var(--marine); color: var(--blanc); }
.etapes__item.est-faite .etapes__lib { color: var(--marine); }

@media (max-width: 700px) {
  .etapes { flex-direction: column; }
  .etapes__item { border-right: none; border-bottom: 1px solid var(--bord); }
  .etapes__item:not(.est-active) { display: none; }
}

.volet { display: none; }
.volet.est-active { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) {
  .volet.est-active { grid-template-columns: 1fr 1fr; }
  .volet .large { grid-column: 1 / -1; }
}
.volet__titre {
  grid-column: 1 / -1; font-family: var(--titre); font-size: 21px; font-weight: 600;
  text-transform: uppercase; color: var(--marine);
}

.form__pilote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bord);
}
.form__pilote-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Choix visuels, en remplacement d'une liste déroulante */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.choix label {
  position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 58px; padding: 10px 14px; cursor: pointer;
  background: var(--blanc); border: 1.5px solid var(--bord);
  font-family: var(--titre); font-size: 16px; font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix label:hover { border-color: var(--sable); }
.choix label:has(input:checked) {
  border-color: var(--marine); background: var(--creme);
  box-shadow: inset 0 0 0 1px var(--marine);
}
.choix label:focus-within { outline: 3px solid var(--sable); outline-offset: 2px; }
.choix .ico { stroke: var(--sable-fonce); flex-shrink: 0; }

/* Dépôt de photos */
.depot {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 28px 24px; text-align: center; cursor: pointer;
  background: var(--creme); border: 2px dashed var(--sable);
}
.depot:hover, .depot.est-survole { background: var(--sable-clair); border-color: var(--marine); }
.depot .ico { stroke: var(--marine); }
.depot strong {
  font-family: var(--titre); font-size: 18px; font-weight: 600;
  text-transform: uppercase; color: var(--marine);
}
.depot span { font-size: 14.5px; color: var(--gris); }
.depot input[type=file] { display: none; }

.vignettes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px; margin-top: 14px;
}
.vignette { position: relative; aspect-ratio: 4 / 3; background: var(--creme); overflow: hidden; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette button {
  position: absolute; top: 0; right: 0; width: 30px; height: 30px; padding: 0;
  background: var(--marine); color: #fff; border: none; cursor: pointer;
  font-size: 17px; line-height: 1;
}
.vignette button:hover { background: var(--marine-fonce); }
.vignette__nom {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
  background: rgba(12, 46, 72, .85); color: #fff; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Message de confirmation */
.merci { display: none; flex-direction: column; gap: 14px; padding: 30px 26px; background: var(--creme); }
.merci.est-active { display: flex; }
.merci .ico { stroke: var(--marine); }
.merci h3 { font-family: var(--titre); font-size: 24px; font-weight: 600; text-transform: uppercase; color: var(--marine); }
.merci p { font-size: 16px; line-height: 1.6; color: var(--gris); }

/* =============================================================================
   BLOC DEVIS EN BAS DE PAGE
   ========================================================================== */

.bloc-devis__in { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) { .bloc-devis__in { grid-template-columns: .82fr 1.18fr; gap: 58px; } }
.bloc-devis__forme { background: var(--blanc); padding: clamp(22px, 3vw, 36px); border: 1px solid var(--bord); }
.bloc-devis__arg { display: flex; flex-direction: column; gap: 22px; }
.bloc-devis__arg ul { display: flex; flex-direction: column; gap: 18px; }
.bloc-devis__arg li { display: flex; gap: 14px; align-items: flex-start; }
.bloc-devis__arg li .ico { stroke: var(--sable); flex-shrink: 0; margin-top: 3px; }
.bloc-devis__arg li strong {
  display: block; font-family: var(--titre); font-size: 18px; font-weight: 600;
  text-transform: uppercase; color: var(--blanc); margin-bottom: 3px;
}
.bloc-devis__arg li span { font-size: 15.5px; line-height: 1.6; color: var(--gris-pale); }

/* Pied de page à cinq colonnes, depuis l'ajout de la colonne Guides */
@media (min-width: 1000px) {
  .pied__grille--5 { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 34px; }
}

/* =============================================================================
   SIMULATEUR DE COUT
   ========================================================================== */

.simu { display: flex; flex-direction: column; gap: 26px; }
.choix--simu { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.choix--simu label { min-height: 54px; font-size: 15.5px; }

.simu__curseur { display: flex; align-items: center; gap: 18px; }
.simu__curseur input[type=range] {
  flex: 1; height: 8px; -webkit-appearance: none; appearance: none;
  background: var(--bord); cursor: pointer; border: none; padding: 0; min-height: 0;
}
.simu__curseur input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; background: var(--marine); cursor: pointer; border: none;
}
.simu__curseur input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px; background: var(--marine); cursor: pointer;
  border: none; border-radius: 0;
}
.simu__curseur output {
  min-width: 88px; text-align: right;
  font-family: var(--titre); font-size: 30px; font-weight: 700; color: var(--marine);
}

.simu__sortie {
  align-self: flex-start; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px 26px 30px; background: var(--creme); color: var(--encre);
}
.simu__titre {
  font-family: var(--titre); font-size: 20px; font-weight: 600;
  text-transform: uppercase; color: var(--marine); margin-top: 4px;
}
.simu__prix {
  font-family: var(--titre); font-size: clamp(30px, 3.4vw, 42px); font-weight: 700;
  line-height: 1.1; color: var(--encre); margin-top: 4px;
}
.simu__ht {
  font-family: var(--titre); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.simu__detail {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bord);
}
.simu__detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.simu__detail span { font-size: 14px; color: var(--gris); }
.simu__detail strong {
  font-family: var(--titre); font-size: 15.5px; font-weight: 600;
  color: var(--marine); text-align: right;
}
.simu__note { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin-top: 14px; }

@media (max-width: 999px) { .simu__sortie { position: static; } }

/* =============================================================================
   GLOSSAIRE
   ========================================================================== */

.glossaire { display: flex; flex-direction: column; gap: 34px; }
.glossaire__lettre {
  font-family: var(--titre); font-size: 34px; font-weight: 700; color: var(--sable);
  padding-bottom: 8px; border-bottom: 2px solid var(--marine); margin-bottom: 6px;
}
.glossaire__terme {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 0; border-bottom: 1px solid var(--bord-clair);
}
.glossaire__terme dt {
  font-family: var(--titre); font-size: 19px; font-weight: 600;
  text-transform: uppercase; color: var(--marine);
}
.glossaire__terme dd { margin: 0; font-size: 16px; line-height: 1.65; color: #3F4F5C; }
.glossaire__renvoi { font-size: 14.5px; }

.alphabet { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.alphabet a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  font-family: var(--titre); font-size: 16px; font-weight: 600;
  background: var(--creme); border: 1px solid var(--bord);
}
.alphabet a:hover { background: var(--marine); color: var(--blanc); border-color: var(--marine); }

/* Réponse courte en tête de page, lisible par les moteurs génératifs */
.reponse-courte {
  display: flex; gap: 16px; padding: 22px 26px;
  background: var(--creme); border-left: 5px solid var(--marine);
}
.reponse-courte .ico { stroke: var(--marine); flex-shrink: 0; margin-top: 2px; }
.reponse-courte p { font-size: 17px; line-height: 1.62; color: var(--encre); }
.reponse-courte strong { font-weight: 600; }

/* =============================================================================
   HÉROS VIDÉO
   La vidéo remplace la photo de droite et occupe tout le bandeau. Le texte
   passe au-dessus, tenu par le même voile sombre que les photos de bandeau,
   pour que le contraste reste garanti quelle que soit l'image du moment.
   ========================================================================== */

.heros--video {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(440px, 74vh, 700px);
  overflow: hidden;
  isolation: isolate;
}

/* Fond : la vidéo, plus une trame de repli si le fichier manque. */
.heros__fond {
  position: absolute; inset: 0; z-index: -2;
  background-color: var(--marine-fonce);
  background-image: repeating-linear-gradient(135deg,
    rgba(189,164,135,.14) 0 2px, transparent 2px 11px);
}
.heros__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  display: block;
}

/* Voile : même valeur que les photos de bandeau, plus un dégradé qui charge le
   bas pour que le bloc de réassurance qui suit ne flotte pas sur du clair. */
.heros--video::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(9,32,50,.28) 0%, rgba(9,32,50,.62) 100%),
    rgba(0,0,0,var(--voile));
}

.heros--video .heros__in { display: block; width: 100%; }
.heros--video .heros__texte {
  max-width: min(var(--largeur), 100%);
  margin-inline: auto;
  padding-block: clamp(52px, 7vw, 90px);
  min-height: 0;
}
@media (min-width: 900px) {
  .heros--video .heros__texte {
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
  }
  .heros--video .heros__texte > * { max-width: 60ch; }
  .heros--video .heros__actions { max-width: none; }
}

.heros--video .t-xxl { text-shadow: 0 2px 26px rgba(9,32,50,.45); }

/* Commande de pause : obligatoire dès qu'une animation dépasse cinq secondes,
   et de toute façon plus élégant que de l'imposer. Affichée par le script,
   pour ne pas laisser un bouton inerte si le navigateur ne lit pas la vidéo. */
.heros__pause {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; min-height: 0;
  font-family: var(--titre); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blanc); background: rgba(9,32,50,.55);
  border: 1px solid rgba(232,221,207,.45); cursor: pointer;
  backdrop-filter: blur(3px);
}
.heros__pause:hover { background: rgba(9,32,50,.8); border-color: var(--sable); }
.heros__pause:focus-visible { outline: 3px solid var(--sable); outline-offset: 2px; }

/* Mouvement réduit : la vidéo est masquée, l'affiche prend sa place. */
@media (prefers-reduced-motion: reduce) {
  .heros__video { display: none; }
  .heros__fond {
    background-image: var(--affiche, repeating-linear-gradient(135deg,
      rgba(189,164,135,.14) 0 2px, transparent 2px 11px));
    background-size: cover; background-position: center;
  }
  .heros__pause { display: none; }
}

/* =============================================================================
   COUCHE 2026 — ARRONDIS, RÉVÉLATION AU DÉFILEMENT, TEXTURE
   -----------------------------------------------------------------------------
   La première version tenait l'angle vif partout. Le client veut plus moderne :
   on introduit une échelle d'arrondis, et une seule, pour que le rayon ne soit
   jamais choisi au hasard. Le reste des partis pris tient : pas de dégradé
   arc-en-ciel, pas d'ombre portée molle, pas de verre dépoli, pas d'emoji.
   La modernité vient du rythme et de la matière, pas des effets.
   ========================================================================== */

:root {
  --r-xs: 4px;
  --r-s:  8px;
  --r-m:  14px;
  --r-l:  22px;
  --r-xl: 30px;
  --ressort: cubic-bezier(.22, .8, .28, 1);
}

/* --- Images : elles remplissent leur cadre -------------------------------- */
.photo { overflow: hidden; position: relative; }
.photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform .8s var(--ressort);
}

/* --- Angle vif ------------------------------------------------------------
   Retour au parti pris d'origine. L'arrondi generalise adoucissait tout de la
   meme facon et c'est exactement ce qui fait « site genere ». Seuls les
   boutons restent en gelule : ce sont des objets a saisir, pas des surfaces. */
.carte, .encart, .info, .avis, .bloc, .simu__sortie, .reponse-courte,
.modale, .mega, .vignette, .depot, .champ input, .champ select, .champ textarea,
.choix label, .alphabet a, .glossaire__terme, .faq__item, .photo, .chiffres {
  border-radius: 0;
}
.btn { border-radius: 999px; }
.heros__pause { border-radius: 999px; }

/* Le filet d'accent redevient un bord franc en haut du bloc. */
.info, .avis { position: static; padding-top: 0; }
.info::before, .avis::before { content: none; }
.info { border-top: none; border-left: 4px solid var(--marine); }
.avis { border-top: 3px solid var(--marine); }

/* --- Heros pleine page ---------------------------------------------------- */
.heros--video {
  margin: 0; border-radius: 0;
  min-height: clamp(560px, 88svh, 900px);
  display: flex; flex-direction: column; align-items: stretch;
}
.heros--video .heros__in {
  flex: 1; display: flex; align-items: center;
  padding-block: clamp(40px, 5vw, 70px) 0;
}

/* Grain leger sur le heros : c'est ce qui empeche un aplat video de ressembler
   a un fond de banque d'images. Genere en SVG, aucun fichier a charger. */
.heros--video::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Bandeau de réassurance, en verre au bas du héros ----------------------
   Il n'est plus une bande marine de plus sous le héros : il repose sur la photo
   et la floute. Le picto passe dans un disque clair pour se détacher. */
.reassurance { margin: 0; border-radius: 0; background: transparent; }
.heros .reassurance {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.18);
}
.heros .reassurance__in { padding-inline: 0; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .heros .reassurance {
    background: rgba(9,32,50,.34);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}
/* Repli sans flou : un voile plus dense, pour que le texte tienne. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .heros .reassurance { background: rgba(9,32,50,.72); }
}
.heros .reassurance__item { border-color: rgba(255,255,255,.16); }
.reassurance__item { gap: 18px; padding-block: 26px; }
.reassurance__item .ico {
  box-sizing: content-box; width: 22px; height: 22px; padding: 12px;
  border-radius: 50%;
  background: rgba(232, 221, 207, .1);
  border: 1px solid rgba(232, 221, 207, .22);
  stroke: var(--sable);
  transition: background .3s var(--ressort), border-color .3s var(--ressort);
}
.reassurance__item:hover .ico {
  background: var(--sable); border-color: var(--sable); stroke: var(--marine-fonce);
}
.reassurance__item strong {
  font-size: 15px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 3px;
}
.reassurance__item span { font-size: 14px; color: #9FB4C4; }

/* --- Cartes : l'image respire au survol ----------------------------------- */
.carte { transition: transform .4s var(--ressort); }
.carte:hover { transform: translateY(-4px); }
.carte:hover .photo img { transform: scale(1.055); }

/* --- Révélation au défilement ---------------------------------------------
   Animation pilotée par le défilement, en CSS natif. Aucun JavaScript, donc
   aucun risque de contenu resté invisible si un script échoue, et aucun
   clignotement au chargement.
   Le bloc entier est sous @supports : un navigateur qui ne connaît pas
   animation-timeline affiche simplement tout, sans animation. C'est le bon
   sens de la dégradation, l'inverse serait une page vide.
   -------------------------------------------------------------------------- */
@keyframes apparait {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section__tete,
    .carte,
    .info,
    .avis,
    .encart,
    .reponse-courte,
    .grille > *,
    .prose > h2,
    .prose > .photo,
    .glossaire > div,
    .simu__sortie {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    /* Le héros est déjà visible à l'ouverture : l'animer reviendrait à faire
       attendre le visiteur devant un écran vide. */
    .heros .section__tete { animation: none; }
  }
}

/* --- Barre de progression de lecture --------------------------------------
   Même principe : la barre n'existe que là où le défilement peut la piloter. */
.progression {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 3px; width: 100%; transform-origin: 0 50%;
  background: var(--sable); pointer-events: none;
  display: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progression {
      display: block;
      animation: progresse linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes progresse { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Bandeau défilant des interventions ------------------------------------
   Il était écrit en 28 px capitales : à cette taille un texte qui défile ne se
   lit pas, il crie. Ramené à une taille de libellé, sur le fond crème, il
   redevient ce qu'il doit être : une frise qui dit l'étendue du catalogue sans
   prendre le pas sur le contenu. */
.ruban {
  overflow: hidden; padding: 15px 0;
  background: var(--creme); color: var(--marine);
  border-bottom: 1px solid var(--bord);
}
.ruban__piste {
  display: flex; width: max-content;
  animation: ruban 64s linear infinite;
}
.ruban:hover .ruban__piste { animation-play-state: paused; }
.ruban__lot { display: flex; align-items: center; }
.ruban a, .ruban span {
  display: flex; align-items: center; gap: 20px;
  padding-right: 20px; white-space: nowrap;
  font-family: var(--titre); font-size: 14px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris);
}
.ruban a::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sable); flex-shrink: 0;
}
.ruban a:hover { color: var(--marine); }
@keyframes ruban { to { transform: translateX(-50%); } }

/* --- Chiffres animés ------------------------------------------------------- */
.compteur { font-variant-numeric: tabular-nums; }

/* --- Numérotation éditoriale des piliers ---------------------------------- */
.carte__rang {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--titre); font-size: 40px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.82); text-shadow: 0 2px 18px rgba(9,32,50,.55);
}
.carte { position: relative; }

/* --- Respect du mouvement réduit ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ruban__piste { animation: none; }
  .carte, .carte:hover, .photo img, .carte:hover .photo img { transition: none; transform: none; }
  .progression { display: none; }
}

/* --- Chiffres clés --------------------------------------------------------
   Le composant .chiffres existe déjà dans mk.css : on ne le double pas, on
   l'agrandit un peu et on lui donne le même arrondi que le reste. */
/* Le bandeau défilant et les chiffres forment un seul bloc marine, pleine
   largeur, sans marge ni arrondi : la page s'enchaîne sans respiration morte. */
.ruban   { margin: 0; border-radius: 0; }

/* Les chiffres reprennent le crème du ruban : ils forment avec lui une seule
   bande claire entre la section blanche et le bloc marine du simulateur.
   Trois aplats marine à la suite, c'était trop de bleu d'un coup. */
.chiffres {
  margin: 0; border-radius: 0; overflow: hidden;
  background: var(--creme); border-bottom: 1px solid var(--bord);
}
.chiffre { border-color: var(--bord); }
.chiffres .chiffre__val { color: var(--marine); }
.chiffres .chiffre__val--accent { color: var(--sable-fonce); }
.chiffre span:not([class]) { color: var(--gris); }
/* mk.css pose « .chiffre span » : plus spécifique que « .chiffre__val », il
   gagne quel que soit l'ordre des feuilles. D'où le sélecteur descendant. */
.chiffre__val { font-size: clamp(34px, 4vw, 52px); line-height: .95; }
.chiffre { padding: 28px 26px; border-bottom: none; }
/* Les filets verticaux ne servent à rien contre un bord arrondi. */
.chiffre:last-child { border-right: none; }
@media (min-width: 900px) { .chiffre:nth-child(4n) { border-right: none; } }
@media (max-width: 899px) { .chiffre:nth-child(2n) { border-right: none; } }



/* --- Débordement horizontal sur petit écran --------------------------------
   Un enfant de grille vaut par défaut min-width:auto : il refuse de descendre
   sous la largeur de son contenu le plus large, et pousse la page au-delà de
   l'écran. Sur mobile, cela se voit tout de suite, la page glisse
   latéralement. min-width:0 lui rend le droit de rétrécir.
   -------------------------------------------------------------------------- */
.bloc-devis__in > *,
.colonnes > *,
.grille > *,
.pied__grille > *,
.mega__in > * { min-width: 0; }

/* Ceinture et bretelles : plus rien ne déborde la fenêtre. */
html, body { overflow-x: clip; }

/* --- Bloc simulateur de la page d'accueil ----------------------------------
   Un duo dont la colonne de droite ne porte pas une photo mais la carte de
   résultat du simulateur, posée sur le crème et centrée dans sa colonne. */
/* La colonne porte une vraie photo de chantier, assombrie : c'est elle qui
   donne au verre dépoli quelque chose à flouter. Un effet de verre posé sur un
   aplat uni ne floute rien et ne se voit pas. */
.duo--simu .duo__media--encart {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(34px, 4.5vw, 72px) var(--gouttiere);
  min-height: 0;
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}
.duo--simu .duo__media--encart::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(9,32,50,.72), rgba(9,32,50,.5));
}

/* =============================================================================
   VERRE
   -----------------------------------------------------------------------------
   Une seule règle dans tout le site : le verre ne s'emploie que sur une
   photographie. Posé sur un aplat uni il ne floute rien et devient un simple
   cadre gris, c'est-à-dire un effet gratuit. Trois emplacements le méritent :
   le bandeau de réassurance sur le héros, la carte de prix sur la photo de
   chantier, et le bloc des communes sur le paysage du Lauragais.

   backdrop-filter n'est pas universel : la couleur de fond garantit la
   lisibilité là où il n'est pas appliqué, le flou n'est qu'un supplément.
   ========================================================================== */
.verre {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-top-color: rgba(255, 255, 255, .38);
  box-shadow: 0 24px 60px rgba(6, 22, 36, .35);
  color: var(--blanc);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .verre {
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.duo--simu .simu__sortie { width: 100%; max-width: 470px; }
.duo--simu .simu__sortie .marqueur { color: var(--sable); }
.duo--simu .simu__titre { color: var(--blanc); }
.duo--simu .simu__prix  { color: var(--blanc); }
.duo--simu .simu__ht    { color: #B9CBD8; }
.duo--simu .simu__detail { border-top-color: rgba(255,255,255,.18); }
.duo--simu .simu__detail span   { color: #B9CBD8; }
.duo--simu .simu__detail strong { color: var(--blanc); }
.duo--simu .simu__note  { color: #B9CBD8; }
.duo--simu .form__note  { color: #9FB4C4; }
.duo--simu .btn--marine {
  background: var(--sable); color: var(--marine-fonce); border-color: var(--sable);
}
.duo--simu .btn--marine:hover { background: var(--blanc); border-color: var(--blanc); }

/* =============================================================================
   PIED DE PAGE, VERSION COURTE
   -----------------------------------------------------------------------------
   Moins d'éléments, plus d'air, et le téléphone traité comme ce qu'il est :
   l'information la plus utile de la page. Le reste passe en petit.
   ========================================================================== */

/* Le bloc de devis qui précède est marine lui aussi : sans filet, les deux
   aplats se confondent et l'espace entre eux se lit comme un trou. */
.pied { padding-block: clamp(40px, 4.5vw, 66px) 26px; border-top: 1px solid rgba(232,221,207,.13); }
.pied__haut--immo { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pied__haut--immo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pied__haut--immo { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.pied__joindre .pied__tel { color: var(--blanc); }

.pied__haut {
  display: grid; grid-template-columns: 1fr; gap: 40px 30px;
  padding-bottom: clamp(36px, 4vw, 54px);
}
@media (min-width: 640px)  { .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pied__haut { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 54px; } }

.pied__marque { gap: 20px; }
.pied__marque img { height: 40px; }
.pied__marque p { font-size: 15px; line-height: 1.7; color: #9FB4C4; max-width: 32ch; }

.pied__col h4,
.pied__joindre h4 {
  font-family: var(--titre); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #6F8698;
  margin-bottom: 14px;
}
.pied__col { gap: 2px; }
.pied__col a {
  font-size: 15px; color: #D7E0E7; min-height: 32px;
  width: fit-content;
}
.pied__col a:hover { color: var(--sable); }

/* Nous joindre : le numéro est l'élément le plus gros du pied de page. */
.pied__joindre { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pied__tel {
  font-family: var(--titre); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700;
  line-height: 1.05; color: var(--blanc); letter-spacing: .01em;
}
.pied__tel:hover { color: var(--sable); }
.pied__joindre a[href^="mailto"] { font-size: 15px; color: #D7E0E7; margin-bottom: 10px; }
.pied__joindre a[href^="mailto"]:hover { color: var(--sable); }
.pied__joindre address {
  font-style: normal; font-size: 14.5px; line-height: 1.7; color: #9FB4C4;
}
.pied__horaires { color: #6F8698; }

/* Les trois marques : une ligne, pas un bloc. */
.pied__maison {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
  padding-block: 22px;
  border-block: 1px solid rgba(232,221,207,.13);
}
.pied__maison-lab {
  font-family: var(--titre); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #6F8698;
}
.pied__maison a {
  font-family: var(--titre); font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: #D7E0E7;
}
.pied__maison a:hover { color: var(--sable); }
/* La marque du site courant se lit, mais ne se clique pas. */
.pied__maison a:not([href]) { color: var(--sable); cursor: default; }

.pied__bas {
  margin-top: 22px; padding-top: 0; border-top: none;
  align-items: baseline; gap: 10px 26px;
}
.pied__bas span, .pied__bas a { font-size: 12.5px; line-height: 1.6; }
.pied__legal { gap: 10px 22px; }
.pied__legal a:hover { color: var(--sable); }
.pied__signature { color: #55697A; }

@media (max-width: 639px) {
  .pied__bas { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   RYTHME DE LA PAGE
   -----------------------------------------------------------------------------
   Les grands aplats blancs entre deux sections cassaient l'enchaînement. On
   resserre le pas vertical et on supprime la respiration morte entre un bloc
   pleine largeur et la section suivante.
   ========================================================================== */

.section { padding-block: clamp(44px, 5vw, 76px); }
.section--serre { padding-block: clamp(34px, 3.8vw, 58px); }

/* Deux sections de même fond qui se suivent ne rejouent pas la marge du haut.
   La règle est volontairement restreinte aux paires de même couleur : appliquée
   à toutes les sections, elle collerait le titre d'une section crème contre son
   propre bord. */
.section--creme + .section--creme,
.section:not([class*="--"]) + .section:not([class*="--"]) { padding-top: 0; }

/* =============================================================================
   BANDEAU DES TROIS OUTILS
   -----------------------------------------------------------------------------
   Trois liens, pleine largeur, entre la section des guides et le duo final.
   Il remplace trois cartes blanches qui flottaient dans un aplat blanc.
   ========================================================================== */

.outils { background: var(--marine); }
.outils__in {
  display: grid; grid-template-columns: 1fr;
  padding-inline: 0;
}
@media (min-width: 820px) { .outils__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.outil {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 34px var(--gouttiere);
  color: var(--blanc);
  border-bottom: 1px solid rgba(232,221,207,.16);
  transition: background .3s var(--ressort);
}
.outil:last-child { border-bottom: none; }
@media (min-width: 820px) {
  .outil { border-bottom: none; border-right: 1px solid rgba(232,221,207,.16); }
  .outil:last-child { border-right: none; }
}
.outil:hover { background: var(--marine-fonce); color: var(--blanc); }

.outil__ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(232,221,207,.1);
  border: 1px solid rgba(232,221,207,.22);
  transition: background .3s var(--ressort), border-color .3s var(--ressort);
}
.outil__ico .ico { stroke: var(--sable); }
.outil:hover .outil__ico { background: var(--sable); border-color: var(--sable); }
.outil:hover .outil__ico .ico { stroke: var(--marine-fonce); }

.outil__txt { display: flex; flex-direction: column; gap: 6px; }
.outil__txt strong {
  font-family: var(--titre); font-size: 19px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--blanc);
}
.outil__txt > span { font-size: 15px; line-height: 1.6; color: #9FB4C4; }
.outil__txt em {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--titre); font-style: normal;
  font-size: 13.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sable);
}
.outil__txt em .ico { stroke: var(--sable); transition: transform .3s var(--ressort); }
.outil:hover .outil__txt em .ico { transform: translateX(5px); }

/* Les trois cartes de métier n'ont pas le même nombre de liens. Sans cette
   règle, le bouton se cale au milieu de la carte la plus courte et laisse un
   vide sous lui : on le pousse au bas de chaque carte. */
.carte__corps { height: 100%; }
.carte__corps > .btn { margin-top: auto; }

/* --- Cartes métier : hauteur maîtrisée ------------------------------------
   Les cartes ne s'étirent plus à la hauteur de la plus longue : chacune fait
   la sienne. Avec quatre liens au lieu de vingt et un, l'écart est faible et
   le bas de carte ne laisse plus un vide. */
.grille--metiers { align-items: start; }
.carte__liens-plus {
  font-family: var(--titre); font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sable-fonce);
}
.carte__liens-plus:hover { color: var(--marine); }

/* --- Zone d'intervention : les communes sur le paysage --------------------- */
.duo__media--verre {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 4vw, 64px) var(--gouttiere);
  min-height: clamp(360px, 42vw, 520px);
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}
.duo__media--verre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(9,32,50,.66), rgba(9,32,50,.44));
}
.carte-zone { width: 100%; max-width: 470px; padding: 28px 28px 30px; }
.carte-zone .marqueur { color: var(--sable); margin-bottom: 16px; }
.carte-zone__liste { display: flex; flex-direction: column; }
.carte-zone__liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; color: var(--blanc);
  font-family: var(--titre); font-size: 17px; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.carte-zone__liste a:last-child { border-bottom: none; }
.carte-zone__liste a:hover { color: var(--sable); }
.carte-zone__liste em {
  font-style: normal; font-size: 13.5px; font-weight: 600;
  letter-spacing: .06em; color: #B9CBD8; flex-shrink: 0;
}
.carte-zone__pied { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: #B9CBD8; }

/* --- Avis, format resserré ------------------------------------------------- */
.avis-tete { flex-wrap: wrap; gap: 12px 20px; margin-bottom: 22px; }
.avis--compact .avis { padding: 20px 22px 22px; }
.avis--compact .avis p { font-size: 15px; line-height: 1.62; }
.avis--compact .avis cite { font-size: 13.5px; }

/* =============================================================================
   FIN DE PAGE : ON CASSE LA SÉRIE SOMBRE
   -----------------------------------------------------------------------------
   Le bandeau des outils, le duo construction, le bloc de devis et le pied
   s'enchaînaient en quatre aplats sombres. Le bloc de devis passe donc en
   crème : c'est le dernier appel à l'action de la page, il gagne à ressortir
   plutôt qu'à se fondre dans le bleu qui l'entoure.
   ========================================================================== */

/* Le dernier appel à l'action de la page repose sur une photo de chantier, et
   le formulaire flotte dessus en verre clair. C'est le troisième emploi du
   verre, toujours selon la même règle : uniquement sur une photographie.
   Le formulaire reste en verre CLAIR, pas sombre : ses champs doivent rester
   des champs, avec du texte foncé sur fond blanc. */
.section--nuit#devis {
  position: relative; isolation: isolate;
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
  background-attachment: scroll;
}
.section--nuit#devis::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(9,32,50,.78), rgba(9,32,50,.5));
}

.verre-clair {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 28px 70px rgba(6, 22, 36, .4);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .verre-clair {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

/* La classe .verre doit l'emporter sur le fond crème que .simu__sortie porte
   par défaut : c'est ce fond qui reprenait le dessus, et la carte de l'accueil
   se retrouvait en texte clair sur crème, illisible. */
.simu__sortie.verre {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-top: 1px solid rgba(255, 255, 255, .38);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .simu__sortie.verre { background: rgba(255, 255, 255, .08); }
}

/* =============================================================================
   AJUSTEMENTS DE FIN
   ========================================================================== */

/* Les trois cartes métier reprennent la même hauteur : avec quatre liens au
   lieu de vingt et un, l'écart tient sur une ligne et les boutons peuvent
   enfin s'aligner. C'est le désalignement qui se voyait, pas la hauteur. */
.grille--metiers { align-items: stretch; }
.grille--metiers .carte__corps { height: 100%; }
.grille--metiers .carte__liens { margin-bottom: 8px; }
.grille--metiers .carte__corps > .btn { margin-top: auto; }

/* Un bouton garde la même hauteur quel que soit son libellé. */
.btn { min-height: 50px; text-align: center; }
.btn--petit { min-height: 42px; }

/* --- Cartes d'étape en marine ---------------------------------------------
   Quatre cartes blanches sur fond crème : le contraste était si faible que la
   section paraissait vide. En marine, la séquence se lit d'un coup d'œil. */
.etape {
  background: var(--marine); color: var(--blanc);
  padding: 26px 24px 28px;
}
.etape__num { color: var(--sable); }
.etape h4 { color: var(--blanc); }
.etape p { color: #B9CBD8; }

/* --- Cartes de guide : lien de lecture ------------------------------------- */
.carte__lire {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--titre); font-size: 13.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sable-fonce);
}
.carte__lire .ico { stroke: var(--sable-fonce); transition: transform .3s var(--ressort); }
.carte--plate:hover .carte__lire .ico { transform: translateX(5px); }

/* --- Bandeau des outils, au format du bandeau de réassurance ---------------
   Trois blocs hauts pour trois liens, c'était trois fois trop. Même gabarit
   que la réassurance du héros : une bande, trois entrées, rien de plus. */
.outil { padding: 24px var(--gouttiere); align-items: center; gap: 16px; }
.outil__ico { width: 46px; height: 46px; }
.outil__txt { gap: 3px; }
.outil__txt strong { font-size: 15px; letter-spacing: .02em; }
.outil__txt > span { font-size: 14px; line-height: 1.5; }
.outil__txt em { margin-top: 2px; font-size: 12.5px; }

/* =============================================================================
   SECTION PARALLAXE
   -----------------------------------------------------------------------------
   Photo pleine largeur qui dérive lentement au défilement. L'effet est piloté
   par animation-timeline, en CSS natif : pas de JavaScript à faire tourner à
   chaque trame, et pas de background-attachment: fixed, que les navigateurs
   mobiles ignorent ou rendent par saccades.

   Sans prise en charge, l'image reste fixe. On perd l'effet, jamais le texte.
   ========================================================================== */

.parallaxe {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center;
  min-height: clamp(420px, 62svh, 640px);
  padding-block: clamp(56px, 7vw, 96px);
}
.parallaxe__fond {
  position: absolute; inset: -14% 0; z-index: -2;
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}
.parallaxe::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(9,32,50,.8) 0%, rgba(9,32,50,.42) 55%, rgba(9,32,50,.2) 100%);
}
.parallaxe__in { display: flex; flex-direction: column; gap: 18px; max-width: var(--largeur); }
.parallaxe__in > * { max-width: 60ch; }
.parallaxe__in .heros__actions { max-width: none; }
.parallaxe .t-xl { text-shadow: 0 2px 26px rgba(9,32,50,.45); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallaxe__fond {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
  }
}
@keyframes derive {
  from { transform: translateY(-9%); }
  to   { transform: translateY(9%); }
}

/* La règle de couleur des titres clairs vise .section--marine et .section--nuit.
   La section parallaxe n'est ni l'une ni l'autre : son h2 sortait en encre
   foncée sur une photo sombre, donc illisible. */
.parallaxe h2, .parallaxe .t-xl { color: var(--blanc); }
.parallaxe .chapeau { color: #D7E0E7; }

/* =============================================================================
   FORMULAIRE SUR MOBILE
   -----------------------------------------------------------------------------
   Trois corrections liées à la barre APPELER / DEVIS, fixée en bas de l'écran
   sur mobile : elle mesure 60 px et recouvre tout ce qui passe dessous.
   ========================================================================== */

/* 1. La barre ne doit jamais recouvrir le bouton d'une étape. On réserve sa
      hauteur sous les actions du formulaire, en plus du padding du body. */
@media (max-width: 899px) {
  .form__pilote { padding-bottom: 8px; }
  .form__pilote, .bloc-devis__forme, .modale__corps {
    scroll-margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  /* Le formulaire est ramené sous l'en-tête, pas collé au bord de l'écran. */
  .bloc-devis__forme, .form { scroll-margin-top: 14px; }
  .barre-mobile { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* 2. La modale se dimensionne en dvh : sur mobile, 100vh ignore la barre
      d'adresse rétractable et le bas de la modale se retrouve hors écran. */
.modale { max-height: calc(100vh - 48px); }
@supports (height: 100dvh) {
  .modale { max-height: calc(100dvh - 32px); }
}

/* 3. Les boutons d'étape prennent toute la largeur sur petit écran : deux
      boutons côte à côte sous 400 px donnaient des cibles trop étroites. */
@media (max-width: 480px) {
  .form__pilote { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .form__pilote-droite { width: 100%; flex-wrap: nowrap; }
  .form__pilote-droite .btn { flex: 1; min-width: 0; }
  .form__pilote [data-compteur] { text-align: center; }
}

/* --- La barre fixe ne masque plus rien -------------------------------------
   Deux corrections complémentaires :

   1. scroll-padding-bottom sur la racine : tout défilement programmé
      (changement d'étape, ancre, scrollIntoView) réserve désormais la hauteur
      de la barre. Sans cela, un élément amené « en bas de l'écran » atterrit
      pile dessous.

   2. La barre s'efface pendant que le visiteur remplit un formulaire. Elle
      propose APPELER et DEVIS, c'est-à-dire exactement ce qu'il est en train
      de faire : elle ne lui apporte rien à ce moment-là, et elle lui prend
      soixante pixels au moment où il en a le plus besoin.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .form__pilote .btn { scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.barre-mobile {
  transition: transform .25s var(--ressort), opacity .25s var(--ressort);
}
.barre-mobile.est-repliee {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* =============================================================================
   PORTRAIT DANS L'EN-TÊTE DE LA MODALE
   -----------------------------------------------------------------------------
   Le disque reprend le motif déjà employé pour les pictogrammes du bandeau de
   réassurance et du bandeau des outils : c'est le seul arrondi du site, et il
   ne sert qu'à désigner une personne ou un signe, jamais une surface.
   ========================================================================== */

.modale__qui { display: flex; align-items: center; gap: 18px; min-width: 0; }

.modale__visage {
  width: 66px; height: 66px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; object-position: center 30%;
  border: 2px solid rgba(232, 221, 207, .4);
  background: var(--marine-fonce);
}
/* Sans photo : les initiales, dans le même disque. */
.modale__visage--vide {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-size: 23px; font-weight: 700;
  letter-spacing: .06em; color: var(--sable);
  background: rgba(232, 221, 207, .12);
}

.modale__tete p strong { color: var(--blanc); font-weight: 600; }

.modale__tel {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--titre); font-size: 13.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--sable);
}
.modale__tel .ico { stroke: var(--sable); }
.modale__tel:hover { color: var(--blanc); }
.modale__tel:hover .ico { stroke: var(--blanc); }

/* Un numéro de téléphone ne se coupe jamais en deux lignes. */
.modale__tel-num { white-space: nowrap; }

@media (max-width: 560px) {
  .modale__qui { gap: 14px; }
  .modale__visage { width: 52px; height: 52px; }
  .modale__visage--vide { font-size: 18px; }
  .modale__tete { padding: 20px 20px 18px; }
  /* Sur petit écran, l'amorce de phrase saute : le picto et le numéro suffisent. */
  .modale__tel-avant { display: none; }
  .modale__tel { font-size: 15px; margin-top: 10px; }
}

/* =============================================================================
   FORMULAIRE DANS UN CONTENEUR ÉTROIT
   -----------------------------------------------------------------------------
   Dans la modale sur mobile, le formulaire débordait de 22 px vers la droite.
   Deux causes cumulées, toutes deux classiques :

   1. Un <fieldset> refuse par défaut de descendre sous la largeur minimale de
      son contenu, quel que soit son conteneur. C'est un comportement hérité,
      que min-width:0 corrige.

   2. La grille des choix impose des colonnes de 168 px minimum. Dans une modale
      de 352 px moins ses marges, deux colonnes ne tiennent pas, et la grille
      déborde au lieu de repasser sur une seule. minmax(min(168px, 100%), 1fr)
      lui rend le droit de descendre sous 168 px quand la place manque.
   ========================================================================== */

fieldset, .volet { min-width: 0; }

.choix {
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
}
.choix--simu {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

@media (max-width: 560px) {
  .modale__corps { padding: 22px 18px 26px; }
}

/* Le volet d'étape est une grille : ses enfants gardaient min-width:auto et
   refusaient de descendre sous la largeur de leur contenu. C'est .champ.large
   qui poussait à 346 px dans un volet de 316, et la grille des choix suivait. */
.volet > *, .champ { min-width: 0; }

/* =============================================================================
   GUIDES : SOMMAIRE, TABLEAUX, APPELS À L'ACTION
   ========================================================================== */

.sommaire {
  padding: 22px 26px 24px;
  background: var(--creme);
  border-left: 4px solid var(--marine);
}
.sommaire__titre {
  font-family: var(--titre); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sable-fonce);
  margin-bottom: 12px;
}
.sommaire ol {
  list-style: none; counter-reset: som;
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0;
}
.sommaire li { counter-increment: som; padding: 0; }
.sommaire li::before { content: none; }
.sommaire a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; font-size: 16px; line-height: 1.45; color: var(--marine);
}
.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  font-family: var(--titre); font-size: 13px; font-weight: 700;
  color: var(--sable-fonce); flex-shrink: 0;
}
.sommaire a:hover { color: var(--sable-fonce); text-decoration: underline; }

/* Une ancre ne doit pas coller au bord haut de la fenêtre. */
.prose h2, .prose h3 { scroll-margin-top: 24px; }

/* --- Tableaux ------------------------------------------------------------- */
.tableau-defile { overflow-x: auto; margin: 6px 0 4px; }
.tableau-guide { width: 100%; border-collapse: collapse; min-width: 460px; }
.tableau-guide caption {
  caption-side: top; text-align: left; padding-bottom: 10px;
  font-size: 14.5px; font-style: italic; color: var(--gris);
}
.tableau-guide th, .tableau-guide td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  font-size: 15.5px; line-height: 1.55;
  border-bottom: 1px solid var(--bord);
}
.tableau-guide thead th {
  font-family: var(--titre); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blanc); background: var(--marine);
  border-bottom: none;
}
.tableau-guide tbody th { font-weight: 600; color: var(--marine); }
.tableau-guide tbody td { color: #3F4F5C; }
.tableau-guide tbody tr:last-child th,
.tableau-guide tbody tr:last-child td { border-bottom: none; }

/* --- Appel à l'action dans le fil du texte -------------------------------- */
.cta-guide {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; padding: 22px 26px;
  background: var(--creme);
}
.cta-guide p {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--titre); font-size: 18px; font-weight: 600;
  line-height: 1.35; color: var(--marine);
}
.cta-guide .btn { flex-shrink: 0; }

/* --- Amorces de la FAQ globale --------------------------------------------
   La page FAQ ne recopie plus les reponses : elle annonce trois questions et
   renvoie vers la page qui repond. Ces deux regles habillent cette amorce. */
.faq-amorce{list-style:none;margin:0 0 12px;padding:0}
.faq-amorce li{position:relative;padding:7px 0 7px 20px;font-size:.94rem;
  line-height:1.5;color:var(--gris);border-bottom:1px solid var(--bord-clair)}
.faq-amorce li::before{content:"?";position:absolute;left:0;top:7px;
  font-weight:700;color:var(--sable)}
.faq-suite{display:inline-block;font-size:.86rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--marine);
  border-bottom:2px solid var(--sable);padding-bottom:2px}
.faq-suite:hover{border-bottom-color:var(--marine)}
.section--marine .faq-suite,.sur-sombre .faq-suite{color:var(--blanc)}


/* --- Bande des metiers professionnels --------------------------------------
   Ce bloc reprenait la grille de quatre cartes marine du bloc « comment ca se
   passe », a quelques ecrans d'intervalle. Deux propos differents portes par
   le meme objet : l'oeil decrochait. Ici, pas de cartes du tout — quatre
   metiers poses sur la meme bande, separes par un filet, l'appel a l'action
   dans la continuite. Une ligne de texte par metier, pas trois. */
.metiers__tete {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px 40px; margin-bottom: 34px;
}
.metiers__tete h2 { margin-top: 6px; }
.metiers__phrase {
  flex: 0 1 320px; min-width: 0; margin: 0;
  font-family: var(--titre); font-size: 19px; font-weight: 500;
  line-height: 1.35; color: var(--sable-clair);
}
.metiers__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.18);
}
.metier {
  min-width: 0; padding: 30px 26px 30px 0;
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 26px;
}
.metier:first-child { border-left: none; padding-left: 0; }
.metier__ico { display: block; color: var(--sable); margin-bottom: 16px; }
.metier h3 {
  font-family: var(--titre); font-size: 19px; font-weight: 600;
  line-height: 1.2; color: var(--blanc); margin-bottom: 8px;
}
.metier p { margin: 0; font-size: .95rem; line-height: 1.55; color: #B9CBD8; }
.metiers__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 34px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 900px) {
  .metiers__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metier { padding: 24px 18px 24px 18px; border-top: 1px solid rgba(255,255,255,.18); }
  .metier:first-child { padding-left: 18px; border-top: none; }
  .metier:nth-child(2) { border-top: none; }
  .metier:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .metiers__liste { grid-template-columns: 1fr; }
  .metier { padding: 22px 0; border-left: none; border-top: 1px solid rgba(255,255,255,.18); }
  .metier:first-child { border-top: none; padding-top: 4px; }
}

/* --- Page d'accueil, version de test ---------------------------------------
   Deux ajouts du hero : la phrase humaine sous le chapeau, et la ligne de
   preuves sous les boutons. Elles portent l'essentiel de ce que l'audit
   reprochait au hero : trop de metier, pas assez de voix. */
.heros__phrase {
  margin: 14px 0 0; max-width: 46ch;
  font-family: var(--titre); font-size: 22px; font-weight: 500;
  line-height: 1.3; color: var(--sable-clair);
}
.heros__preuves {
  /* Tenir sur une ligne : coupee en deux, la ligne de preuves perd son effet
     de liste et « materiel en propre » se retrouve orphelin. */
  margin: 16px 0 0; font-size: .78rem; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase; color: rgba(255,255,255,.72);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .heros__preuves { white-space: normal; letter-spacing: .04em; }
}

/* Les trois facteurs de prix. En puces, on lisait un paragraphe ; en colonnes
   numerotees, on voit d'un coup qu'il y en a trois, et lesquels. */
.facteurs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-top: 34px; border-top: 1px solid var(--bord);
}
.facteur {
  min-width: 0; padding: 30px 30px 8px 0;
  border-left: 1px solid var(--bord); padding-left: 30px;
}
.facteur:first-child { border-left: none; padding-left: 0; }
.facteur__num {
  display: block; font-family: var(--titre); font-size: 40px; font-weight: 700;
  line-height: 1; color: var(--sable); margin-bottom: 14px;
}
.facteur h3 {
  font-family: var(--titre); font-size: 22px; font-weight: 600;
  line-height: 1.15; color: var(--marine); margin-bottom: 4px;
}
.facteur__sous {
  margin: 0 0 12px; font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair);
}
.facteur p { margin: 0; line-height: 1.6; color: var(--gris); }
@media (max-width: 860px) {
  .facteurs { grid-template-columns: 1fr; }
  .facteur { padding: 24px 0; border-left: none; border-top: 1px solid var(--bord); }
  .facteur:first-child { border-top: none; }
}
@media (max-width: 700px) {
  .heros__phrase { font-size: 18px; }
}

/* ===========================================================================
   DYNAMISME — page d'accueil de test
   ---------------------------------------------------------------------------
   Les apparitions existaient déjà, mais toute une rangée surgissait d'un bloc :
   quatre cartes qui montent ensemble ne se lisent pas comme une séquence, elles
   se lisent comme un rideau. Ici on décale chaque enfant de quelques dixièmes,
   et le regard suit l'ordre de lecture.

   Tout reste sous @supports et sous prefers-reduced-motion : un navigateur qui
   ne sait pas animer affiche la page complète, immédiatement. C'est le bon sens
   de la dégradation — l'inverse donnerait une page blanche.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* --- La cascade ------------------------------------------------------- */
    .grille > *:nth-child(2),
    .facteur:nth-child(2),
    .metier:nth-child(2)  { animation-range: entry 4% cover 26%; }
    .grille > *:nth-child(3),
    .facteur:nth-child(3),
    .metier:nth-child(3)  { animation-range: entry 4% cover 32%; }
    .grille > *:nth-child(4),
    .metier:nth-child(4)  { animation-range: entry 4% cover 38%; }

    /* Les blocs neufs entrent comme les autres */
    .facteur, .metier {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }

    /* --- Le filet qui se trace sous les titres de section ----------------- */
    .section__tete > h2 { position: relative; }
    .section__tete > h2::after {
      content: ""; position: absolute; left: 0; bottom: -14px;
      height: 2px; width: 84px; background: var(--sable);
      transform-origin: 0 50%;
      animation: trace linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }

    /* --- Le chiffre des facteurs monte un peu plus tard que son texte ----- */
    .facteur__num {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }

    /* --- L'affiche du héros dérive lentement ------------------------------ */
    .heros__fond { animation: derive-affiche 26s ease-in-out infinite alternate; }
  }
}

@keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes monte {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes derive-affiche {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* --- Survols un peu plus vivants ----------------------------------------- */
.metier { transition: transform .35s var(--ressort); }
.metier:hover { transform: translateY(-3px); }
.metier__ico { transition: transform .35s var(--ressort); }
.metier:hover .metier__ico { transform: translateX(4px); }

.facteur { transition: transform .35s var(--ressort); }
.facteur:hover { transform: translateY(-3px); }
.facteur__num { transition: color .35s var(--ressort); }
.facteur:hover .facteur__num { color: var(--sable-fonce); }

.etape { transition: transform .35s var(--ressort); }
.etape:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .heros__fond, .metier, .facteur, .etape,
  .metier__ico, .facteur__num { animation: none; transition: none; transform: none; }
}

/* --- Galerie de chantiers, triable ------------------------------------------
   Les vignettes sont toutes rendues dans la page. Le filtre masque, il ne
   recharge rien : sans JavaScript la galerie s'affiche entière, ce qui est le
   bon comportement par défaut pour un contenu qui existe déjà. */
.galerie__filtres {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px;
}
.galerie__filtre {
  font-family: var(--titre); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--bord);
  background: var(--blanc); color: var(--marine); cursor: pointer;
  transition: background .2s var(--ressort), border-color .2s var(--ressort);
}
.galerie__filtre span {
  display: inline-block; margin-left: 6px; font-size: .78rem;
  font-weight: 500; color: var(--gris-clair);
}
.galerie__filtre:hover { border-color: var(--marine); }
.galerie__filtre.est-actif {
  background: var(--marine); border-color: var(--marine); color: var(--blanc);
}
.galerie__filtre.est-actif span { color: var(--sable-clair); }

.galerie {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}
.galerie--serree { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.galerie__vue {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--creme);
}
.galerie__vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ressort);
}
.galerie__vue:hover img { transform: scale(1.05); }
.galerie__vue figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 12px 9px;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--blanc);
  background: linear-gradient(to top, rgba(12,46,72,.86), rgba(12,46,72,0));
  opacity: 0; transition: opacity .3s var(--ressort);
  /* La légende est posée par-dessus la photo : sans ceci elle intercepte le
     clic et la vignette ne s'agrandit plus sur son tiers inférieur. */
  pointer-events: none;
}
.galerie__vue:hover figcaption { opacity: 1; }
.galerie__vue[hidden] { display: none; }
.galerie__vide {
  margin-top: 22px; color: var(--gris); font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .galerie__vue img, .galerie__vue figcaption { transition: none; }
  .galerie__vue:hover img { transform: none; }
  .galerie__vue figcaption { opacity: 1; }
}

/* --- La photo agrandie ---------------------------------------------------- */
.galerie__vue a { display: block; }

.agrandi {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(11, 31, 51, .92);
}
.agrandi.est-ouvert { display: grid; }
.agrandi img {
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  width: auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.agrandi__fermer {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  color: var(--sable, #d8c4a4);
  cursor: pointer;
  background: none;
  border: 0;
}
.agrandi__fermer:hover { color: #fff; }

/* --- Un lien qui quitte le site le dit ------------------------------------ */
.nav__lien--sortant span[aria-hidden] {
  margin-left: 5px;
  font-size: .85em;
  opacity: .65;
}
.nav__lien--sortant:hover span[aria-hidden] { opacity: 1; }

/* Texte réservé aux lecteurs d'écran : présent, jamais affiché. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- La fiche d'une résidence : des couples intitulé / détail -------------- */
.fiche-liste {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: 2px 20px;
  margin: 14px 0 26px;
}
.fiche-liste dt {
  padding: 9px 0;
  font-weight: 600;
  color: var(--marine, #0C2E48);
  border-top: 1px solid rgba(12, 46, 72, .12);
}
.fiche-liste dd {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid rgba(12, 46, 72, .12);
}
@media (max-width: 620px) {
  .fiche-liste { grid-template-columns: 1fr; gap: 0; }
  .fiche-liste dt { padding-bottom: 0; border-bottom: 0; }
  .fiche-liste dd { padding-top: 2px; border-top: 0; }
}