/* ============================================================
   HABITATE — feuille SOURCE de la coquille. dist/style.css en est une
   copie ecrasee a chaque rendu : ne jamais editer la sortie.

   Ce qui fait l'identite de cette reference, releve en ligne :
   - un bandeau NOIR pleine largeur dont le centre descend en creux, la
     nav logee dans ce creux, raccords concaves de part et d'autre ;
   - le bouton pilule en deux morceaux : le libelle, puis une pastille
     ronde qui porte le double chevron ;
   - trois fonds seulement, en alternance franche : blanc, lavande, noir ;
   - des cartes a grand rayon (25px) et des images a rayon 20px ;
   - un accordeon HORIZONTAL de services : un volet ouvert en image,
     les autres reduits a une colonne etroite au titre vertical ;
   - des cartes de methode a numero fantome, la derniere case de la
     grille pouvant etre un appel noir ;
   - les avis sur un rail qui deborde volontairement le conteneur.

   8 variables de couleur, pas une de plus. --sur-marque est calcule
   dans render.mjs, jamais choisi ici. Aucun hex en dur.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.6 Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: Outfit, Inter, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(32px, 5.2vw, 50px); line-height: 1.14; }
h2 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.12; }
h3 { font-size: clamp(21px, 2.2vw, 30px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.corps { color: var(--texte-doux); font-size: 16px; line-height: 1.7; }
.corps--large { font-size: 17px; }

/* ---------- conteneur : 1400 de cadre, 1272 de contenu ---------- */
.conteneur { width: 100%; max-width: 1272px; margin: 0 auto; padding: 0 24px; }

/* ---------- label : le petit glyphe puis le mot, en Manrope ---------- */
.label {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--texte);
}
.label::before {
  content: ''; width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid var(--marque); border-radius: 50% 50% 50% 2px;
  transform: rotate(-12deg);
}
.bloc--noir .label { color: var(--fond); }
.bloc--noir .label::before { border-color: var(--accent); }

/* ---------- bouton pilule en deux morceaux ---------- */
.pilule {
  display: inline-flex; align-items: center; gap: 14px;
  height: 44px; padding: 2px 2px 2px 26px;
  border: 0; border-radius: 90px; cursor: pointer;
  font: 600 15px/1 Inter, sans-serif;
  background: var(--texte); color: var(--fond);
  max-width: 100%;
}
.pilule__rond {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--fond); color: var(--texte);
  font-size: 15px; letter-spacing: -.12em; padding-right: 2px;
}
.pilule--claire { background: var(--fond); color: var(--texte); }
.pilule--claire .pilule__rond { background: var(--texte); color: var(--fond); }
.pilule--marque { background: var(--marque); color: var(--sur-marque); }
.pilule--marque .pilule__rond { background: var(--sur-marque); color: var(--marque); }
.pilule--nue {
  background: transparent; color: var(--texte);
  border: 1px solid var(--bordure); padding-left: 24px;
}
.pilule--nue .pilule__rond { background: var(--marque); color: var(--sur-marque); }
.bloc--noir .pilule--nue { color: var(--fond); border-color: rgba(255,255,255,.28); }

/* ---------- bandeau : barre noire, creux central, nav dedans ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 60;
  background: var(--texte); color: var(--fond);
  height: 56px;
}
.bandeau__rangee {
  max-width: 1272px; margin: 0 auto; padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bandeau__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Outfit, sans-serif; font-size: 21px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fond); min-width: 0;
}
.bandeau__toit {
  width: 22px; height: 22px; flex: 0 0 auto; background: var(--fond);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.bandeau__logo-img {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 8px; object-fit: contain;
}
/* Nom + descripteur empiles dans le bandeau sombre. Hauteur fixe 56px :
   line-height serre pour tenir sur deux lignes. Descripteur clair attenue,
   hors majuscules/interlettrage du logo. */
.bandeau__id { display: inline-flex; flex-direction: column; line-height: 1.02; min-width: 0; }
.bandeau__nom { overflow: hidden; text-overflow: ellipsis; }
.bandeau__sub {
  font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
  color: color-mix(in srgb, var(--fond) 58%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
@media (max-width: 560px) { .bandeau__sub { display: none; } }
.bandeau__creux {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  background: var(--texte); border-radius: 0 0 36px 36px;
  padding: 0 40px 18px; display: flex; align-items: center; gap: 30px;
  height: 74px; max-width: calc(100% - 460px);
}
/* les deux raccords concaves : un quart de disque soustrait du bandeau */
.bandeau__creux::before,
.bandeau__creux::after {
  content: ''; position: absolute; top: 0; width: 36px; height: 36px;
}
.bandeau__creux::before { left: -36px; border-top-right-radius: 36px; box-shadow: 18px -18px 0 0 var(--texte); }
.bandeau__creux::after { right: -36px; border-top-left-radius: 36px; box-shadow: -18px -18px 0 0 var(--texte); }
.bandeau__nav { display: flex; align-items: center; gap: 26px; min-width: 0; }
.bandeau__nav a, .deroul__tete {
  font: 500 15px/1 Inter, sans-serif; color: var(--fond);
  white-space: nowrap; cursor: pointer;
}
.bandeau__nav a:hover, .deroul:hover .deroul__tete { color: var(--accent); }
.bandeau__cta { flex: 0 0 auto; }

/* sous-menu : panneau clair, colonnes de liens */
/* La tete occupe TOUTE la hauteur de son entree : plus courte, elle laisse
   entre son bas et le haut du volet un vide que la souris traverse en
   descendant, et le volet se referme avant d'y arriver. */
.deroul { position: relative; display: flex; align-items: stretch; }
.deroul__tete { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; }
.deroul__chev { font-size: 10px; }
/* Le decalage sous le lien est le PADDING du panneau, jamais une marge : avec
   une marge, la souris traverse un vide entre le lien et la carte et le volet
   se referme avant d'y arriver. Le fond, le filet et le rayon descendent donc
   sur la grille, qui est la carte. */
.deroul__panneau {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  padding-top: 18px; display: none; color: var(--texte);
}
.deroul:hover .deroul__panneau, .deroul:focus-within .deroul__panneau { display: block; }
.deroul__grille {
  display: flex; align-items: flex-start; gap: 34px;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 25px;
  padding: 26px 30px; box-shadow: 0 26px 60px rgba(0,0,0,.16);
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.deroul__col { display: flex; flex-direction: column; gap: 10px; min-width: 168px; flex: 0 0 auto; }
/* La vitrine : le visuel du volet, sur le cote. `flex: 0 0` et non `0 1` — une
   base compressible la reduirait a un mot par ligne des que les colonnes
   s'allongent. Hauteur FIXE sur le visuel, sinon le cadre etire tout le volet. */
.deroul__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.deroul__vitPh { min-height: 0; height: 128px; width: 100%; border-radius: 18px; overflow: hidden; }
.deroul__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.deroul__vitN { font-size: 16px; line-height: 1.3; }
.deroul__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.deroul__vitZ { font-size: 14px; font-weight: 600; color: var(--marque); text-decoration: none; justify-self: start; }
.deroul__titre { font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px; color: var(--texte-doux); }
/* Le volet est une carte CLAIRE posee sous une barre SOMBRE : `.bandeau__nav a`
   l'emporte en specificite sur `.deroul__lien` et peignait les liens de la
   couleur du fond de la carte — invisibles. La nav est donc rappelee ici. */
.bandeau__nav .deroul__lien { font-size: 15px; white-space: nowrap; color: var(--texte); }
.bandeau__nav .deroul__lien:hover { color: var(--marque); }
.bandeau__nav .deroul__vitZ { color: var(--marque); }

/* ---------- rythme des blocs ---------- */
.bloc { padding: 96px 0; background: var(--fond); }
.bloc--serre { padding: 64px 0; }
.bloc--lavande { background: var(--fond-2); }
.bloc--noir { background: var(--texte); color: var(--fond); }
.bloc--noir h1, .bloc--noir h2, .bloc--noir h3, .bloc--noir h4 { color: var(--fond); }
.bloc--noir .corps { color: rgba(255,255,255,.72); }

/* ---------- chapeaux ---------- */
.chapeau { max-width: 620px; }
.chapeau--centre { margin: 0 auto; text-align: center; }
.chapeau--centre .label { justify-content: center; }
.chapeau h2 { margin-top: 14px; }
.chapeau .corps { margin-top: 16px; }
/* variante releve sur la methode : le label seul a gauche, le titre a droite */
.chapeau--fendu {
  max-width: none; display: flex; flex-wrap: wrap; gap: 24px 60px; align-items: flex-start;
}
.chapeau--fendu > * { min-width: 0; }
.chapeau--fendu .chapeau__g { flex: 0 1 280px; }
.chapeau--fendu .chapeau__d { flex: 1 1 480px; max-width: 640px; }

/* ---------- cadre image ---------- */
.vitre {
  border-radius: 20px; overflow: hidden; background: var(--fond-2);
  /* width explicite : sans elle, une hauteur plancher (min-height) fait
     resoudre la LARGEUR par le ratio et le cadre deborde en etroit. */
  width: 100%; min-height: 120px; display: grid; place-items: center;
  color: var(--texte-doux); font-size: 13px; text-align: center; padding: 8px;
}
.vitre img { width: 100%; height: 100%; object-fit: cover; }
.vitre--haute { aspect-ratio: 4 / 5; }
.vitre--large { aspect-ratio: 16 / 10; }
.vitre--bande { aspect-ratio: 21 / 9; }

/* ---------- hero : noir, titre a gauche, chapo et appel a droite ---------- */
.accueil { background: var(--texte); color: var(--fond); padding: 74px 0 0; }
.accueil__haut { display: flex; flex-wrap: wrap; gap: 32px 60px; align-items: flex-end; }
.accueil__g { flex: 1 1 520px; min-width: 0; }
.accueil__d { flex: 1 1 320px; min-width: 0; max-width: 420px; }
.accueil h1 { color: var(--fond); margin-top: 18px; }
.accueil__sous { color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.7; }
.accueil__actes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.accueil__vue { margin-top: 54px; border-radius: 25px 25px 0 0; overflow: hidden; }
.accueil__vue .vitre { border-radius: 25px 25px 0 0; aspect-ratio: 21 / 9; }
.accueil__marques { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.jeton {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 90px;
  padding: 7px 16px; font-size: 14px; color: var(--fond);
}
.jeton::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bloc .jeton { color: var(--texte); border-color: var(--bordure); }

/* Un atout qui porte un propos n'est plus une etiquette : il devient une
   petite fiche. Compte pilote par les donnees, jamais par la coquille. */
.jeton--fiche {
  flex: 1 1 30%; min-width: min(240px, 100%);
  flex-direction: column; align-items: flex-start; gap: 5px;
  border-radius: 16px; padding: 15px 18px; text-align: left;
}
.jeton--fiche::before { display: none; }
.jeton--fiche b { font-size: 15px; }
.jeton--fiche span { font-size: 13px; opacity: .8; }

/* Les boutons d'une tete de section. */
.chapeau__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* La photo d'une etape du parcours. */
.etape__v { height: 150px; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }

/* La photo de la bande d'appel. */
.appel__v { height: 170px; border-radius: 16px; overflow: hidden; margin-top: 18px; }

/* L'encart de fin de FAQ : une carte a part, jamais une question deguisee. */
.encart {
  margin-top: 22px; padding: 20px 22px;
  border: 1px solid var(--bordure); border-radius: 18px;
  display: grid; gap: 10px; justify-items: flex-start;
}

/* ---------- paire image + colonne ---------- */
.paire { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.paire > * { flex: 1 1 420px; min-width: 0; }
.paire--inv { flex-direction: row-reverse; }
.paire--haut { align-items: flex-start; }

/* ---------- statistiques : mosaique lavande a pastille ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.stat {
  flex: 1 1 46%; min-width: 0;
  background: var(--fond-2); border-radius: 20px; padding: 22px 24px;
  display: flex; align-items: center; gap: 18px;
}
.bloc--noir .stat { background: rgba(255,255,255,.07); }
.stat__rond {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  background: var(--texte); color: var(--fond);
  display: grid; place-items: center; font-size: 16px;
}
.bloc--noir .stat__rond { background: var(--marque); color: var(--sur-marque); }
.stat b { display: block; font-family: Outfit, sans-serif; font-weight: 400; font-size: 27px; line-height: 1.1; }
.stat span { display: block; color: var(--texte-doux); font-size: 15px; margin-top: 2px; }
.bloc--noir .stat span { color: rgba(255,255,255,.7); }

/* ---------- accordeon horizontal de services ---------- */
.accord { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.accord__vol {
  flex: 0 1 96px; min-width: 0;
  background: var(--fond-2); border-radius: 25px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 420px; overflow: hidden;
  transition: flex-basis .35s ease;
}
.accord__vol[data-ouvert] {
  flex: 1 1 520px; align-items: stretch; padding: 20px;
}
.accord__titre {
  font-family: Outfit, sans-serif; font-size: 22px; line-height: 1.15;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 320px;
}
.accord__vol[data-ouvert] .accord__titre {
  writing-mode: horizontal-tb; transform: none; max-height: none; font-size: 26px;
}
.accord__icone {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  border: 1px solid var(--bordure); background: var(--fond);
  display: grid; place-items: center; font-size: 15px;
}
.accord__scene { position: relative; flex: 1 1 auto; border-radius: 16px; overflow: hidden; min-height: 0; }
.accord__scene .vitre { height: 100%; border-radius: 16px; }
.accord__voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62));
}
.accord__mot {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  color: #fff; font-size: 16px; line-height: 1.5;
}
.accord__pied { display: flex; align-items: center; gap: 14px; }
.accord__vol:not([data-ouvert]) .accord__scene,
.accord__vol:not([data-ouvert]) .accord__mot,
/* Le volet replie fait 60px de large : le lien y restait rendu, ecrase
   sous le titre vertical et illisible. Un volet ferme ne montre que son
   titre et sa pastille — le lien revient avec l'ouverture, et en mobile
   ou tous les volets sont deplies. */
.accord__vol:not([data-ouvert]) > .pilule { display: none; }

/* ---------- galerie de realisations : deux colonnes, loupe en coin ------- */
.galerie { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.galerie__c { flex: 1 1 46%; min-width: 0; position: relative; }
.galerie__c .vitre { aspect-ratio: 16 / 11; }
.galerie__loupe {
  position: absolute; right: 16px; bottom: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.galerie__mot { margin-top: 14px; }
.galerie__meta { font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px; color: var(--texte-doux); }
.bloc--noir .galerie__meta { color: rgba(255,255,255,.6); }

/* ---------- methode : cartes a numero fantome ---------- */
.methode { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.etape {
  /* Un plancher, pas un zero : sans lui les trois marches se serrent en
     152px a 360px et leurs titres tombent a un mot par ligne. */
  flex: 1 1 30%; min-width: min(100%, 250px); position: relative; overflow: hidden;
  background: var(--fond); border-radius: 25px; padding: 26px 28px 30px;
  min-height: 240px; display: flex; flex-direction: column;
}
.bloc--lavande .etape { background: var(--fond); }
.etape__no {
  position: absolute; right: 20px; top: 8px;
  font-family: Outfit, sans-serif; font-size: 64px; line-height: 1;
  color: var(--bordure); pointer-events: none;
}
.etape__icone {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bordure);
  display: grid; place-items: center; font-size: 16px;
}
.etape h3 { margin-top: auto; font-size: 22px; }
.etape .corps { margin-top: 10px; font-size: 15px; }
/* la derniere case de la grille peut etre un appel noir : c'est le comportement
   de la reference, il est pilote par les donnees (cta present ou non). */
.etape--appel {
  flex: 1 1 62%; background: var(--texte); color: var(--fond);
  justify-content: center; gap: 16px;
}
.etape--appel h3 { margin-top: 0; font-size: 30px; color: var(--fond); }
.etape--appel .corps { color: rgba(255,255,255,.72); max-width: 420px; }
.etape--appel .pilule { margin-top: 12px; align-self: flex-start; }

/* ---------- rail d'avis : deborde le conteneur, ne scrolle pas la page ---------- */
.rail { margin-top: 44px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.rail__piste { display: flex; gap: 20px; min-width: min-content; }
.temoin {
  flex: 0 0 320px; min-width: 0;
  background: var(--fond-2); border-radius: 20px; padding: 26px 24px;
  display: flex; flex-direction: column;
}
.temoin__etoiles { color: var(--accent); font-size: 14px; letter-spacing: 3px; }
.temoin__mot { margin-top: 16px; font-size: 16px; line-height: 1.65; }
.temoin__filet { height: 1px; background: var(--bordure); margin: 22px 0 16px; }
.temoin__pied { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.temoin__av {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
}
.temoin__nom { font-weight: 600; font-size: 15px; }
.temoin__role { color: var(--texte-doux); font-size: 14px; }

/* ---------- bande d'appel : lavande, titre a gauche, pilule a droite ---------- */
.appel {
  background: var(--fond-2); border-radius: 25px; padding: 44px 48px;
  display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center; justify-content: space-between;
}
.appel > * { min-width: 0; }
.appel__t { flex: 1 1 420px; }
.appel__form { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 12px; }
.appel__form input, .appel__form textarea {
  flex: 1 1 180px; min-width: 0;
  border: 0; border-bottom: 1px solid var(--bordure); background: transparent;
  padding: 12px 2px; font: 400 15px/1.5 Inter, sans-serif; color: var(--texte);
}
.appel__form textarea { flex-basis: 100%; resize: vertical; }
.appel__form input::placeholder, .appel__form textarea::placeholder { color: var(--texte-doux); }
.appel__form .pilule { flex: 0 0 auto; }

/* ---------- questions : image a gauche, depliants a droite ---------- */
.depliants { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.depli {
  background: var(--fond-2); border-radius: 16px; padding: 0 22px;
}
.depli > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; font-size: 17px; font-weight: 500;
}
.depli > summary::-webkit-details-marker { display: none; }
.depli__plus {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 20px; color: var(--texte-doux); line-height: 1;
}
.depli[open] .depli__plus { transform: rotate(45deg); }
.depli > p { padding: 0 0 22px; color: var(--texte-doux); line-height: 1.7; max-width: 62ch; }

/* ---------- fiches (cartes blanches a filet) ---------- */
.fiches { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 44px; }
.fiche {
  flex: 1 1 30%; min-width: 0;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 25px;
  padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px;
}
.bloc--lavande .fiche { border-color: transparent; }
.fiche--large { flex-basis: 46%; }
.fiche--quart { flex-basis: 22%; }
.fiche .vitre { margin-bottom: 6px; }
.fiche__fl { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 15px; color: var(--marque); }
.fiche__rond {
  width: 42px; height: 42px; border-radius: 50%; background: var(--fond-2);
  display: grid; place-items: center; font-size: 17px;
}

/* ---------- listes a puce ---------- */
.puces { display: grid; gap: 10px; }
.puces li { position: relative; padding-left: 24px; color: var(--texte-doux); font-size: 15px; line-height: 1.6; }
.puces li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px; border-radius: 50% 50% 50% 2px;
  border: 2px solid var(--marque); transform: rotate(-12deg);
}
.bloc--noir .puces li { color: rgba(255,255,255,.72); }

/* ---------- blocs SEO : texte et image en alternance ---------- */
.seo { display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: center; margin-bottom: 84px; }
.seo:last-child { margin-bottom: 0; }
.seo > * { flex: 1 1 420px; min-width: 0; }
.seo--inv { flex-direction: row-reverse; }
.seo__textes { display: grid; gap: 16px; margin-top: 20px; }
.seo__b { display: flex; flex-wrap: wrap; gap: 12px; }
.seo .vitre { aspect-ratio: 5 / 4; max-height: clamp(240px, 40vh, 400px); }

/* ---------- secteurs : panneaux alternes ---------- */
.secteur {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 24px;
  border: 1px solid var(--bordure); border-radius: 25px; overflow: hidden;
}
.secteur > * { flex: 1 1 380px; min-width: 0; }
.secteur--inv { flex-direction: row-reverse; }
.secteur .vitre { border-radius: 0; height: 100%; min-height: 260px; }
.secteur__c { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.secteur__jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- communes : vignettes a nom pose dessus ---------- */
.communes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.commune {
  flex: 1 1 15%; min-width: 0; position: relative;
  border-radius: 20px; overflow: hidden; min-height: 132px;
}
.commune .vitre { height: 100%; min-height: 132px; border-radius: 20px; }
.commune__voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.66)); }
.commune__n {
  position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff;
  font-size: 15px; font-weight: 600; overflow-wrap: anywhere;
}
.commune__tag { display: block; font-size: 12px; font-weight: 500; opacity: .8; }

/* ---------- plan : panneau blanc pose sur l'image ---------- */
.plan { position: relative; }
.plan .vitre { aspect-ratio: 21 / 9; min-height: 260px; }
.plan__panneau {
  background: var(--fond); border-radius: 25px; padding: 28px 30px;
  border: 1px solid var(--bordure); max-width: 380px;
}
@media (min-width: 900px) {
  .plan__panneau { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 899px) { .plan__panneau { margin-top: -40px; margin-left: 16px; margin-right: 16px; position: relative; } }
.plan__lignes { display: grid; gap: 6px; margin-top: 14px; }

/* ---------- urgence : bande noire, numero en accent ---------- */
.urgence { display: flex; flex-wrap: wrap; gap: 30px 56px; align-items: center; justify-content: space-between; }
.urgence > * { flex: 1 1 380px; min-width: 0; }
.urgence__tel {
  display: inline-block; font-family: Outfit, sans-serif; font-size: clamp(28px, 4vw, 40px);
  color: var(--accent); letter-spacing: -.02em;
}

/* ---------- prix ---------- */
.prix { font-family: Outfit, sans-serif; font-size: 34px; line-height: 1.1; margin-top: 10px; }
.prix__u { font-size: 15px; color: var(--texte-doux); font-family: Inter, sans-serif; margin-left: 6px; }
.mention { margin-top: 26px; text-align: center; font-size: 15px; color: var(--texte-doux); }
.depuis { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }

/* ---------- references : facettes en URL, lignes de catalogue, fiche ---------- */
.trieur { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; }
.trieur__g { flex: 1 1 280px; min-width: 0; }
.trieur__d { flex: 2 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trieur__l {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--bordure); font-size: 15px; color: var(--texte); text-decoration: none;
}
.trieur__l--ici { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

.piecerie { display: grid; gap: 18px; margin-top: 44px; }
.piece {
  display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center;
  background: var(--fond-2); border-radius: 25px; padding: 22px 26px;
}
.piece__vue { flex: 0 1 260px; min-width: 0; }
.piece__mot { flex: 3 1 320px; min-width: 0; display: grid; gap: 10px; }
.piece__jetons { display: flex; flex-wrap: wrap; gap: 8px; }
.piece__prix { flex: 1 1 200px; min-width: 0; display: grid; gap: 12px; justify-items: start; }
.piece__prix .prix { margin-top: 0; }
.fiche__depuis { margin-top: 22px; }

.carac { display: flex; flex-wrap: wrap; gap: 0; margin: 44px 0 0; }
.carac__l {
  flex: 1 1 46%; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 16px;
  justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--bordure);
}
.carac__l dt { color: var(--texte-doux); font-size: 15px; }
.carac__l dd { margin: 0; font-weight: 600; font-size: 15px; }
@media (max-width: 720px) { .carac__l { flex-basis: 100%; } }

/* ---------- contact : mosaique de cartes + formulaire a filets ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 46px; align-items: flex-start; }
.contact__coord { flex: 1 1 46%; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.coord {
  flex: 1 1 44%; min-width: 0; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: 25px; padding: 24px 26px 28px; min-height: 160px;
  display: flex; flex-direction: column; gap: 10px;
}
.coord__rond { width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; }
.coord h4 { margin-top: auto; }
.coord__v { font-weight: 600; font-size: 15px; color: var(--texte-doux); }
.coord--large { flex-basis: 100%; }
.formulaire {
  flex: 1 1 46%; min-width: 0; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 25px; padding: 30px 32px 34px;
  display: flex; flex-wrap: wrap; gap: 22px 20px;
}
.champ { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.champ--long { flex-basis: 100%; }
.champ > span { font-size: 14px; color: var(--texte-doux); }
.champ input, .champ textarea {
  border: 0; border-bottom: 1px solid var(--bordure); background: transparent;
  padding: 10px 2px; font: 400 15px/1.5 Inter, sans-serif; color: var(--texte); width: 100%;
  resize: vertical;
}
.formulaire .pilule { flex: 1 1 100%; justify-content: center; }
.formulaire .pilule__rond { margin-left: auto; }

/* ---------- avant / apres : deux photos superposees, curseur en surimpression ---------- */
.compare {
  position: relative; border-radius: 25px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--fond-2); touch-action: pan-y;
}
.compare__vue { position: absolute; inset: 0; }
.compare__vue .vitre { height: 100%; border-radius: 0; }
.compare__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__lab {
  position: absolute; top: 16px; z-index: 3;
  background: rgba(0,0,0,.6); color: #fff; border-radius: 90px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
}
.compare__lab--avant { left: 16px; }
.compare__lab--apres { right: 16px; }
.compare__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: #fff; transform: translateX(-1px); z-index: 3; pointer-events: none;
}
.compare__poignee {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111;
  display: grid; place-items: center; font-size: 17px; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.compare__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; }
.compare__range::-moz-range-thumb { width: 48px; height: 240px; border: 0; opacity: 0; }
.compare__range:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.compare__pied { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; margin-top: 20px; }
.compare__pied > * { flex: 1 1 320px; min-width: 0; }

/* ---------- bandeau de supports ---------- */
.defile { background: var(--texte); color: var(--fond); padding: 22px 0; overflow: hidden; }
.defile__piste { display: flex; gap: 56px; width: max-content; animation: glisse 34s linear infinite; }
.defile__item { font-family: Outfit, sans-serif; font-size: 20px; opacity: .82; white-space: nowrap; }
@keyframes glisse { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__piste { animation: none; } }

/* ---------- article ---------- */
.article { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 40px; align-items: flex-start; }
.article__som { flex: 0 1 280px; min-width: 0; }
@media (min-width: 900px) { .article__som { position: sticky; top: 90px; } }
.article__corps { flex: 1 1 560px; min-width: 0; max-width: 760px; }
.article__corps h2 { font-size: 30px; }
.article__corps h3 { font-size: 22px; }
.encadre { background: var(--fond-2); border-radius: 20px; padding: 24px 26px; }

/* ---------- mentions ---------- */
.legal { display: grid; gap: 34px; max-width: 820px; }

/* ---------- fil d'ariane ---------- */
.ariane { padding: 26px 24px 0; font-size: 14px; color: var(--texte-doux); }
.ariane a:hover { color: var(--marque); }

/* ---------- pied noir ---------- */
.pied { background: var(--texte); color: var(--fond); padding: 74px 0 34px; }
.pied__haut { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; }
.pied__marque { flex: 1 1 320px; min-width: 0; }
.pied__logo {
  display: inline-flex; align-items: center; gap: 10px; color: var(--fond);
  font-family: Outfit, sans-serif; font-size: 24px; letter-spacing: .06em; text-transform: uppercase;
}
.pied__marque .corps { color: rgba(255,255,255,.66); margin-top: 16px; max-width: 380px; }
.pied__cols { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 30px 56px; }
.pied__cols h4 { color: var(--fond); margin-bottom: 14px; }
.pied__cols li { margin-bottom: 10px; }
.pied__cols a { color: rgba(255,255,255,.74); font-size: 15px; }
.pied__cols a:hover { color: var(--accent); }
.pied__nap div { display: flex; gap: 10px; margin-bottom: 10px; color: rgba(255,255,255,.74); font-size: 15px; }
.pied__nap i { font-style: normal; color: var(--accent); }
.pied__bas {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  color: rgba(255,255,255,.6); font-size: 14px;
}
.pied__bas a { color: rgba(255,255,255,.6); }
.pied__bas a:hover { color: var(--fond); }

/* ---------- bascule mobile du bandeau ---------- */
.bandeau__bouton {
  display: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fond); color: var(--texte); border: 0; font-size: 17px; cursor: pointer;
}

@media (max-width: 1023px) {
  .bandeau { height: auto; }
  .bandeau__rangee { height: 56px; }
  .bandeau__bouton { display: grid; place-items: center; }
  .bandeau__cta { display: none; }
  .bandeau__creux {
    position: static; transform: none; max-width: none; width: 100%;
    height: auto; padding: 0 24px 18px; border-radius: 0;
    display: none;
  }
  .bandeau__creux::before, .bandeau__creux::after { display: none; }
  .bandeau[data-ouvert] .bandeau__creux { display: block; }
  .bandeau__nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Au doigt, le volet est a plat sous sa tete : l'entree redevient une colonne. */
  .deroul { display: block; }
  .deroul__panneau { position: static; transform: none; display: block; margin-top: 10px; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--fond); }
  .deroul__grille { flex-direction: column; gap: 14px; padding: 0; border: 0; box-shadow: none;
    background: transparent; width: auto; min-width: 0; max-width: none; }
  /* La vitrine est un confort d'ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .deroul__vit { display: none; }
  .deroul__titre, .deroul__lien { color: rgba(255,255,255,.74); }
  .deroul__chev { display: none; }
}

@media (max-width: 899px) {
  .bloc { padding: 68px 0; }
  .accord__vol, .accord__vol[data-ouvert] { flex: 1 1 100%; min-height: 0; align-items: stretch; }
  .accord__titre { writing-mode: horizontal-tb; transform: none; max-height: none; }
  .accord__vol:not([data-ouvert]) .accord__scene { display: block; }
  .accord__vol:not([data-ouvert]) .accord__mot { display: block; }
  .accord__vol:not([data-ouvert]) > .pilule { display: inline-flex; }
  .accord__scene { min-height: 220px; }
  .etape--appel { flex-basis: 100%; }
  .galerie__c { flex-basis: 100%; }
  .commune { flex-basis: 46%; }
  .compare { aspect-ratio: 4 / 3; }
  .paire--inv, .seo--inv, .secteur--inv { flex-direction: row; }
}

@media (max-width: 599px) {
  .conteneur { padding: 0 18px; }
  .bloc { padding: 56px 0; }
  .appel { padding: 30px 24px; }
  .formulaire, .coord, .etape, .fiche { padding: 22px 20px; }
  .stat { flex-basis: 100%; }
  .fiche, .fiche--large, .fiche--quart { flex-basis: 100%; }
  .commune { flex-basis: 100%; }
  .temoin { flex-basis: 268px; }
  .accueil { padding-top: 52px; }
  .accueil__vue { margin-top: 36px; }
  .secteur__c { padding: 24px 20px; }
}