/* ============================================================
   RENNOX — feuille SOURCE de la coquille. dist/ est une SORTIE.
   Idiome releve EN LIGNE sur https://rennox.framer.website/ :
   - un display condense (Bebas Neue) en tres grand corps, interlettre
     serree, jamais en graisse : c'est lui qui porte l'identite ;
   - un corps de texte neutre et petit (Geist), gris moyen ;
   - une couleur d'action franche posee sur du charbon, jamais l'inverse ;
   - rayon 10 sur tout ce qui est image ou carte, 6 sur les boutons ;
   - alternance de bandes : blanc, gris tres clair, charbon plein.
   Aucun hex en dur : les 8 variables sont posees par render.mjs.
   ============================================================ */

*, *::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.65 Geist, 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden;
}

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

/* Le display condense : casse haute, interlettre negative, graisse unique.
   Les tailles sont fluides — un titre de 120px en ligne doit tenir a 360. */
h1, h2, h3, .display {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: .96;
  margin: 0;
  color: var(--texte);
  text-transform: uppercase;
}
h1 { font-size: clamp(46px, 8.4vw, 116px); }
h2 { font-size: clamp(34px, 5.2vw, 64px); }
h3 { font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; }
h4 { font-size: 19px; margin: 0; font-weight: 500; letter-spacing: -.01em; }

a { color: inherit; }

.mot {
  margin: 0;
  color: var(--texte-doux);
  font-size: 16px;
  line-height: 1.7;
}
.mot + .mot { margin-top: 14px; }
.mot--fort { font-size: 18px; line-height: 1.6; }

/* Le label : petite capitale espacee, precedee d'un tiret plein. */
.etiq {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marque);
}
.etiq::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--marque);
  flex: none;
}

.cadre { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------- tranches : blanc / gris / charbon ---------- */
.tranche { padding: 104px 0; }
.tranche--mince { padding: 68px 0; }
.tranche--grise { background: var(--fond-2); }
.tranche--nuit { background: var(--texte); }
.tranche--nuit h1, .tranche--nuit h2, .tranche--nuit h3, .tranche--nuit h4 { color: var(--fond); }
.tranche--nuit .mot { color: color-mix(in srgb, var(--fond) 72%, transparent); }
.tranche--nuit .etiq { color: var(--fond); }
.tranche--nuit .etiq::before { background: var(--marque); }

/* ---------- boutons : bloc franc, rayon court, deux graisses ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 26px 15px;
  border-radius: 6px;
  background: var(--marque);
  color: var(--sur-marque);
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--marque);
  transition: background .18s, color .18s, border-color .18s;
}
/* Un libelle long ne doit jamais pousser le bouton hors de sa colonne :
   il se replie et coupe le mot plutot que de deborder. */
.bouton { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
.bouton__fl { font-size: 15px; line-height: 1; transform: translateY(-1px); }
.bouton:hover { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.bouton--vide {
  background: transparent;
  color: var(--texte);
  border-color: var(--bordure);
}
.bouton--vide:hover { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.tranche--nuit .bouton--vide { color: var(--fond); border-color: color-mix(in srgb, var(--fond) 34%, transparent); }
.tranche--nuit .bouton--vide:hover { background: var(--fond); color: var(--texte); border-color: var(--fond); }

/* ---------- cadres d'image : rayon 10, jamais de photo dans la coquille ---------- */
.vue {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vue img { width: 100%; height: 100%; object-fit: cover; }
.vue > span {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--texte-doux);
  font-family: Geist, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.vue--haute { min-height: 440px; height: 100%; }
.vue--bande { min-height: 340px; }
.vue--basse { min-height: 190px; }

/* ---------- bandeau ---------- */
.enseigne {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--texte);
  border-bottom: 1px solid color-mix(in srgb, var(--fond) 12%, transparent);
}
.enseigne__rang {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 78px;
}
.enseigne__nom {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  letter-spacing: .01em;
  color: var(--fond);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  flex: none;
}
.enseigne__pave {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: var(--marque);
  flex: none;
}
.enseigne__logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex: none;
}
/* Nom + descripteur empiles. Entete sombre => descripteur clair attenue.
   On sort le descripteur de la police Bebas/majuscules du nom. */
.enseigne__id { display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.enseigne__nomtxt { overflow: hidden; text-overflow: ellipsis; }
.enseigne__sub {
  font-family: Geist, sans-serif; font-weight: 500; font-size: 11.5px;
  letter-spacing: .01em; text-transform: none;
  color: color-mix(in srgb, var(--fond) 60%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 460px) { .enseigne__sub { display: none; } }
.enseigne__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-width: 0;
  flex-wrap: wrap;
}
.enseigne__nav > a, .deroul__tete {
  padding: 9px 13px;
  border-radius: 6px;
  color: color-mix(in srgb, var(--fond) 82%, transparent);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.enseigne__nav > a:hover, .deroul__tete:hover { color: var(--fond); background: color-mix(in srgb, var(--fond) 10%, transparent); }
.enseigne__act { flex: none; }

.deroul { position: relative; }
.deroul__chev { font-size: 10px; opacity: .7; }
.deroul__panneau {
  /* Le panneau est CENTRE sous sa tete : cale a gauche, une carte large sort de
     la fenetre des que l'entree est du cote droit de la barre. Le decalage sous
     le lien est le PADDING du panneau, jamais une marge — la souris doit passer
     du lien a la carte sans traverser de vide. */
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 5;
}
.deroul:hover .deroul__panneau,
.deroul:focus-within .deroul__panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.deroul__grille {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .16);
  /* `width: max-content` : en position absolue, la largeur est un shrink-to-fit
     calcule sur la place restante A DROITE de `left: 50%` — soit la moitie de la
     tete, quelques dizaines de pixels. Sans lui, la carte retombe a son
     `min-width` et la vitrine sort du cadre. */
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.deroul__col { flex: 0 0 auto; min-width: 0; }
/* 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: 10px; overflow: hidden; }
.deroul__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.deroul__vitN { font-size: 16px; line-height: 1.3; color: var(--texte); }
.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 {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marque);
  margin-bottom: 10px;
}
.deroul__lien {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.deroul__lien:hover { color: var(--marque); }

.enseigne__bouton {
  display: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fond) 30%, transparent);
  color: var(--fond);
  border-radius: 6px;
  width: 42px;
  height: 42px;
  font-size: 18px;
  cursor: pointer;
  flex: none;
}

/* ---------- fil d'ariane ---------- */
.fil {
  background: var(--fond-2);
  border-bottom: 1px solid var(--bordure);
  padding: 15px 0;
  font-size: 13px;
  color: var(--texte-doux);
}
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--marque); }
.fil span[aria-hidden] { opacity: .45; margin: 0 4px; }

/* ---------- ouverture : charbon plein, titre a gauche, appui a droite ---------- */
.ouverture { background: var(--texte); padding: 74px 0 0; }
.ouverture__rang {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-end;
}
.ouverture__g { flex: 1 1 560px; min-width: 0; }
.ouverture__d { flex: 1 1 320px; min-width: 0; padding-bottom: 8px; }
.ouverture h1 { color: var(--fond); margin-top: 22px; }
.ouverture__sous {
  color: color-mix(in srgb, var(--fond) 74%, transparent);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.ouverture__actes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.ouverture__atouts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
/* La scene : une image large qui deborde sous la tranche suivante,
   avec un pave de couleur en angle — la signature de la reference. */
.ouverture__scene { position: relative; margin-top: 56px; }
.ouverture__scene .vue { min-height: 460px; border: 0; border-radius: 10px 10px 0 0; }
.ouverture__pave {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 22%, 260px);
  height: 92px;
  background: var(--marque);
  border-radius: 10px 0 0 0;
}

/* ---------- jetons ---------- */
.jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jeton {
  display: inline-block;
  padding: 8px 14px 6px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.tranche--nuit .jeton,
.ouverture .jeton {
  background: transparent;
  border-color: color-mix(in srgb, var(--fond) 26%, transparent);
  color: color-mix(in srgb, var(--fond) 80%, transparent);
}
/* Un atout qui porte un propos n'est plus une etiquette : il devient une
   petite fiche. Le compte vient des donnees, jamais de la coquille. */
.jeton--fiche {
  flex: 1 1 30%;
  min-width: min(240px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 15px 18px;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
}
.jeton--fiche > * { min-width: 0; }
.jeton--fiche b { font-size: 15px; color: inherit; }
.jeton--fiche span { font-size: 13px; opacity: .82; }

/* ---------- chapeaux ---------- */
.chapo { max-width: 780px; }
.chapo h2 { margin-top: 18px; }
.chapo .mot { margin-top: 18px; }
.chapo--centre { max-width: 780px; margin-inline: auto; text-align: center; }
.chapo--centre .etiq { justify-content: center; }
/* Variante relevee : titre a gauche, chapo pousse a droite sur la meme ligne. */
.chapo--partage {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
}
.chapo--partage > div:first-child { flex: 1 1 480px; min-width: 0; }
.chapo--partage > div:last-child { flex: 1 1 320px; min-width: 0; }
.chapo--partage .mot { margin-top: 0; }

/* ---------- duo image / texte ---------- */
.duo { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; }
.duo > * { flex: 1 1 48%; min-width: min(100%, 380px); }
.duo--haut { align-items: flex-start; }
.duo--inv > *:first-child { order: 2; }

/* ---------- listes a puces ---------- */
.puces { list-style: none; margin: 18px 0 0; padding: 0; }
.puces li {
  position: relative;
  padding-left: 26px;
  margin-top: 10px;
  color: var(--texte-doux);
  font-size: 15px;
}
.puces li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--marque);
}
.puces a { color: inherit; text-decoration: none; }
.puces a:hover { color: var(--marque); }
.tranche--nuit .puces li { color: color-mix(in srgb, var(--fond) 74%, transparent); }

/* ---------- grille de fiches : le compte vient des DONNEES ---------- */
.fiches { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.fiche {
  flex: 1 1 23%;
  /* Un seul `min-width` : une seconde declaration a zero annulait le
     plancher et laissait quatre fiches de 95px a 360px, un mot par
     ligne. Le plancher passe la main a flex-wrap, qui replie. */
  min-width: min(100%, 240px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
}
.tranche--grise .fiche { background: var(--fond); }
.fiche--large { flex: 1 1 32%; min-width: min(100%, 300px); }
.fiche--quart { flex: 1 1 23%; min-width: min(100%, 200px); }
.fiche__rond {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--marque);
  color: var(--sur-marque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex: none;
}
.fiche__fl {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marque);
}
.fiche:hover { border-color: var(--marque); }
.meta {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---------- offre : rangees numerotees a filet, pas des cartes ---------- */
.offre { margin-top: 46px; border-top: 1px solid var(--bordure); }
.offre__l {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
  transition: padding-left .2s;
}
.offre__l:hover { padding-left: 12px; }
.offre__no {
  flex: none;
  width: 62px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  color: var(--marque);
}
.offre__vue { flex: 0 0 132px; min-width: 0; }
.offre__vue .vue { min-height: 92px; }
.offre__c { flex: 1 1 320px; min-width: 0; }
.offre__c h3 { font-size: clamp(22px, 2.2vw, 32px); }
.offre__c .mot { margin-top: 8px; }
.offre__fl {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--marque);
  font-size: 17px;
}
.offre__l:hover .offre__fl { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }

/* ---------- chiffres : rangee a filets verticaux ---------- */
.compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  overflow: hidden;
}
.compteur {
  flex: 1 1 24%;
  min-width: min(100%, 200px);
  padding: 32px 28px;
  border-right: 1px solid var(--bordure);
}
.compteur:last-child { border-right: 0; }
.compteur b {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  color: var(--texte);
  letter-spacing: -.02em;
}
.compteur span { display: block; margin-top: 10px; font-size: 14px; color: var(--texte-doux); }
.tranche--nuit .compteurs { border-color: color-mix(in srgb, var(--fond) 20%, transparent); }
.tranche--nuit .compteur { border-right-color: color-mix(in srgb, var(--fond) 20%, transparent); }
.tranche--nuit .compteur b { color: var(--fond); }

/* ---------- blocs SEO : texte et image, alternes par la coquille ---------- */
.seo { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; }
.seo > * { flex: 1 1 48%; min-width: min(100%, 380px); }
.seo + .seo { margin-top: 86px; }
.seo--inv > *:first-child { order: 2; }
.seo h2 { margin-top: 16px; }
.seo__mots { margin-top: 20px; }
.seo .vue { min-height: clamp(240px, 40vh, 400px); }

/* ---------- methode : colonnes a numero geant en filigrane ---------- */
.methode { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.pas {
  flex: 1 1 23%;
  min-width: min(100%, 230px);
  position: relative;
  padding: 34px 26px 30px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  overflow: hidden;
}
.pas__no {
  position: absolute;
  right: 14px;
  top: 2px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 84px;
  line-height: 1;
  color: var(--fond-2);
  pointer-events: none;
}
.pas h3 { font-size: 24px; position: relative; }
.pas .mot { margin-top: 10px; position: relative; }
.pas--appel { background: var(--texte); border-color: var(--texte); }
.pas--appel h3 { color: var(--fond); }
.pas--appel .mot { color: color-mix(in srgb, var(--fond) 74%, transparent); }
.pas--appel .pas__no { color: color-mix(in srgb, var(--fond) 10%, transparent); }
.pas--appel .bouton { margin-top: 20px; }

/* ---------- avis : rail horizontal ---------- */
.rail { margin-top: 44px; overflow-x: auto; padding-bottom: 12px; }
.rail__piste { display: flex; gap: 22px; min-width: min-content; }
.temoin {
  flex: 0 0 clamp(268px, 33vw, 380px);
  min-width: 0;
  padding: 30px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
}
.temoin__et { color: var(--marque); letter-spacing: 3px; font-size: 14px; }
.temoin__mot { margin-top: 14px; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }
.temoin__pied { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }
.temoin__av {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--marque);
  color: var(--sur-marque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 22px;
  flex: none;
}
.temoin__nom { font-weight: 500; font-size: 15px; }
.temoin__role { font-size: 13px; color: var(--texte-doux); }

/* ---------- realisations : mosaique, legende en bas d'image ---------- */
.mosaique { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 46px; }
.piece { flex: 1 1 32%; min-width: min(100%, 290px); position: relative; border-radius: 10px; overflow: hidden; }
.piece .vue { min-height: 340px; border: 0; border-radius: 10px; }
.piece__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .12) 46%, transparent 72%);
  pointer-events: none;
}
.piece__mot { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.piece__mot h3 { color: #FFFFFF; font-size: 26px; }
.piece__mot .meta { color: rgba(255, 255, 255, .8); }
.piece__mot .mot { color: rgba(255, 255, 255, .82); margin-top: 8px; font-size: 14px; }

/* ---------- communes ---------- */
.communes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.commune {
  flex: 1 1 23%;
  min-width: min(100%, 215px);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.commune .vue { min-height: 190px; border: 0; border-radius: 10px; }
.commune__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .06) 62%);
}
.commune__n {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: #FFFFFF;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 24px;
  letter-spacing: .01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.commune__tag {
  font-family: Geist, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--marque);
  color: var(--sur-marque);
}
.commune:hover .vue img { transform: scale(1.05); }
.commune .vue img { transition: transform .4s; }

/* ---------- plan ---------- */
.plan { display: flex; flex-wrap: wrap; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--bordure); }
.plan > *:first-child { flex: 1 1 440px; min-width: 0; }
.plan .vue { min-height: 380px; height: 100%; border: 0; border-radius: 0; }
.plan__panneau { flex: 1 1 320px; min-width: 0; padding: 40px; background: var(--fond); }
.plan__lignes { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.plan__lignes .mot { margin-top: 0; font-size: 15px; }

/* ---------- urgence ---------- */
.urgence { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.urgence > * { flex: 1 1 48%; min-width: min(100%, 330px); }
.urgence__tel {
  display: inline-block;
  margin-top: 24px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  letter-spacing: -.01em;
  color: var(--marque);
  text-decoration: none;
}

/* ---------- avant / apres : deux photos superposees, un curseur reel ---------- */
.compare {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fond-2);
  aspect-ratio: 16 / 9;
  min-height: 260px;
  touch-action: pan-y;
}
.compare__vue { position: absolute; inset: 0; }
.compare__vue .vue { height: 100%; min-height: 0; border: 0; border-radius: 0; }
/* La decoupe est pilotee par --pos, ecrite par app.js sur l'element. */
.compare__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__lab {
  position: absolute;
  top: 16px;
  padding: 7px 13px 5px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .62);
  color: #FFFFFF;
  z-index: 3;
}
.compare__lab--avant { left: 16px; }
.compare__lab--apres { right: 16px; }
.compare__barre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--marque);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.compare__poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--marque);
  color: var(--sur-marque);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
/* L'input EST le controle : souris, tactile et clavier passent par lui. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; }
.compare__range::-moz-range-thumb { width: 54px; height: 100%; border: 0; background: transparent; }
.compare__range:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.compare__pied { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; justify-content: space-between; margin-top: 20px; }
.compare__pied > * { flex: 1 1 48%; min-width: min(100%, 270px); }
.compare__pied .jetons { margin-top: 0; }

/* ---------- questions ---------- */
.depliants { margin-top: 28px; }
.depli { border-bottom: 1px solid var(--bordure); padding: 4px 0; }
.depli summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 23px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--texte);
}
.depli summary::-webkit-details-marker { display: none; }
.depli__plus {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: Geist, sans-serif;
  font-size: 22px;
  color: var(--marque);
}
.depli[open] .depli__plus { transform: translateY(-50%) rotate(45deg); }
.depli p { margin: 0 0 20px; color: var(--texte-doux); font-size: 15px; max-width: 74ch; }

/* ---------- appel encadre ---------- */
.appel {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  background: var(--texte);
  border-radius: 10px;
  padding: 54px;
}
.appel > * { flex: 1 1 48%; min-width: min(100%, 360px); }
.appel h2 { color: var(--fond); }
.appel .etiq { color: var(--fond); }
.appel .mot { color: color-mix(in srgb, var(--fond) 74%, transparent); }
.appel__form { display: flex; flex-wrap: wrap; gap: 12px; }
.appel__form input, .appel__form textarea {
  flex: 1 1 200px;
  min-width: 0;
  padding: 15px 16px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--fond) 24%, transparent);
  background: transparent;
  color: var(--fond);
  font: 400 15px Geist, sans-serif;
  resize: vertical;
}
.appel__form textarea { flex: 1 1 100%; }
.appel__form input::placeholder, .appel__form textarea::placeholder { color: color-mix(in srgb, var(--fond) 52%, transparent); }
.appel__form .bouton { flex: none; }

/* ---------- contact ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 46px; }
.contact__coord { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px; align-content: flex-start; }
.coord {
  flex: 1 1 48%;
  min-width: min(100%, 200px);
  padding: 24px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coord--large { flex: 1 1 100%; }
.coord__rond {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--marque);
  color: var(--sur-marque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.coord__v { font-size: 15px; color: var(--texte-doux); text-decoration: none; }
a.coord__v:hover { color: var(--marque); }
.formulaire {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 34px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  align-content: flex-start;
}
.champ { flex: 1 1 48%; min-width: min(100%, 210px); display: flex; flex-direction: column; gap: 7px; }
.champ--long { flex: 1 1 100%; }
.champ > span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux); }
.champ input, .champ textarea {
  padding: 14px 15px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  font: 400 15px Geist, sans-serif;
  color: var(--texte);
  resize: vertical;
}
.champ input:focus, .champ textarea:focus, .appel__form input:focus, .appel__form textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }
.formulaire .bouton { flex: none; }

/* ---------- prix ---------- */
.prix {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 42px;
  line-height: 1;
  color: var(--marque);
  letter-spacing: -.02em;
}
.prix__u { font-family: Geist, sans-serif; font-size: 13px; letter-spacing: .04em; color: var(--texte-doux); margin-left: 7px; }
.mention { margin-top: 26px; font-size: 13px; color: var(--texte-doux); text-align: center; }

/* ---------- produits : facettes, etals, fiche, caracteristiques ----------
   Rendus seulement quand la niche porte des produits. Le compte de colonnes
   vient des donnees : flex-wrap + base en pourcent, min-width:0 partout. */
.tri { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; }
.tri__g { flex: 1 1 300px; min-width: 0; }
.tri__d { flex: 2 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tri__l {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 6px;
  border: 1px solid var(--bordure); background: var(--fond);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte); text-decoration: none;
}
.tri__l:hover { border-color: var(--marque); color: var(--marque); }
.tri__l--ici { background: var(--texte); border-color: var(--texte); color: var(--fond); }

.etals { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 46px; }
.etal {
  flex: 1 1 30%; min-width: min(100%, 290px);
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--bordure); border-radius: 10px; padding: 22px;
  background: var(--fond);
}
.etal:hover { border-color: var(--marque); }
.etal__vue .vue { border: 0; }
.etal h3 { font-size: 26px; }
.etal .jetons { margin-top: 0; }
.etal__bas {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between;
}
.etal__bas > * { min-width: 0; }
.etal__dep, .fp__dep .etal__dep {
  display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: 4px;
}
.fp__dep { margin-top: 26px; }

.carto { display: flex; flex-wrap: wrap; gap: 0; margin-top: 46px; border-top: 1px solid var(--bordure); }
.carto__c {
  flex: 1 1 24%; min-width: min(100%, 190px);
  padding: 24px 22px 24px 0; border-bottom: 1px solid var(--bordure);
}
.carto__c b {
  display: block; margin-top: 10px;
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px;
  letter-spacing: -.01em; color: var(--texte);
}

/* ---------- bandeau defilant de references ---------- */
.defile { overflow: hidden; padding: 30px 0; background: var(--texte); }
.defile__piste { display: flex; gap: 56px; width: max-content; animation: glisse 32s linear infinite; }
.defile__item {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fond) 46%, transparent);
  white-space: nowrap;
  flex: none;
}
@keyframes glisse { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__piste { animation: none; } }

/* ---------- appoints ----------
   Les classes que reclament les champs du socle : rien d'ornemental, chacune
   loge un texte ou une photo qui serait autrement perdu au rendu. */

/* Les boutons d'une tete de section. */
.chapo__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* Un paragraphe qui suit un chapeau, avant la grille. */
.mot--large { max-width: 780px; margin-top: 18px; }
.chapo--centre + .mot--large { margin-inline: auto; text-align: center; }
/* Le libelle du lien d'une rangee de l'offre. */
.offre__lib {
  flex: none; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-doux);
}
/* La photo d'une etape du parcours. */
.pas__vue { position: relative; margin-bottom: 16px; }
.pas__vue .vue { min-height: 140px; }
/* La photo de la bande d'appel. */
.appel__vue { margin-top: 22px; }
.appel__vue .vue { min-height: 160px; }
/* L'encart de fin de FAQ : une carte a part, jamais une question deguisee. */
.encart {
  margin-top: 24px; padding: 22px 24px;
  border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--fond);
  display: grid; gap: 10px; justify-items: flex-start;
}
.encart .chapo__b { margin-top: 6px; }

/* ---------- article ---------- */
.article { display: flex; flex-wrap: wrap; gap: 46px; margin-top: 44px; align-items: flex-start; }
.article__som {
  flex: 1 1 250px;
  min-width: 0;
  position: sticky;
  top: 100px;
  padding: 26px;
  border-radius: 10px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
}
.article__corps { flex: 1 1 520px; min-width: 0; max-width: 74ch; }
.encadre { padding: 26px; border-radius: 10px; background: var(--fond-2); border-left: 4px solid var(--marque); }

/* ---------- mentions ---------- */
.legal { display: flex; flex-wrap: wrap; gap: 40px; }
.legal > div { flex: 1 1 48%; min-width: min(100%, 380px); }

/* ---------- pied ---------- */
.socle { background: var(--texte); color: var(--fond); padding: 82px 0 30px; }
.socle h4 { color: var(--fond); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.socle__haut { display: flex; flex-wrap: wrap; gap: 46px; }
.socle__marque { flex: 1 1 300px; min-width: 0; }
.socle__nom {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 34px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fond);
}
.socle__marque .mot { color: color-mix(in srgb, var(--fond) 68%, transparent); margin-top: 16px; max-width: 42ch; }
.socle__cols { flex: 2 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.socle__cols > div { flex: 1 1 23%; min-width: min(100%, 185px); }
.socle ul { list-style: none; margin: 0; padding: 0; }
.socle li { margin-bottom: 10px; }
.socle a { color: color-mix(in srgb, var(--fond) 70%, transparent); text-decoration: none; font-size: 14px; }
.socle a:hover { color: var(--marque); }
.socle__nap { display: flex; flex-direction: column; gap: 10px; }
.socle__nap > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: color-mix(in srgb, var(--fond) 70%, transparent); }
.socle__nap i { color: var(--marque); font-style: normal; flex: none; }
.socle__bas {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--fond) 15%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
  color: color-mix(in srgb, var(--fond) 58%, transparent);
}
.socle__bas a { margin-left: 18px; font-size: 13px; }

/* ---------- largeurs ---------- */
@media (max-width: 1000px) {
  .tranche { padding: 78px 0; }
  .enseigne__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--texte);
    border-bottom: 1px solid color-mix(in srgb, var(--fond) 14%, transparent);
    flex-direction: column;
    align-items: stretch;
    padding: 14px 24px 22px;
    gap: 2px;
  }
  .enseigne[data-ouvert] .enseigne__nav { display: flex; }
  .enseigne__rang { position: relative; flex-wrap: nowrap; }
  .enseigne__bouton { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .enseigne__act { display: none; }
  .deroul__panneau { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 4px; }
  .deroul__grille { background: transparent; border: 0; box-shadow: none; padding: 4px 0 10px 12px;
    flex-direction: column; width: auto; min-width: 0; max-width: none; gap: 12px; }
  /* 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__lien { color: color-mix(in srgb, var(--fond) 74%, transparent); white-space: normal; }
  .deroul__titre { color: var(--marque); }
  .article__som { position: static; }
  .appel { padding: 40px; }
}

@media (max-width: 700px) {
  .cadre, .enseigne__rang { width: min(1240px, 100% - 32px); }
  .tranche { padding: 62px 0; }
  .tranche--mince { padding: 46px 0; }
  .ouverture { padding-top: 52px; }
  .ouverture__scene { margin-top: 40px; }
  .ouverture__scene .vue { min-height: 300px; }
  .duo, .seo { gap: 34px; }
  .seo + .seo { margin-top: 58px; }
  .seo .vue, .vue--haute { min-height: 300px; }
  .offre__no { width: 46px; font-size: 24px; }
  .offre__vue { flex: 1 1 100%; }
  .offre__vue .vue { min-height: 150px; }
  .compteur { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--bordure); padding: 24px; }
  .compteur:last-child { border-bottom: 0; }
  .tranche--nuit .compteur { border-bottom-color: color-mix(in srgb, var(--fond) 20%, transparent); }
  .appel { padding: 30px; }
  .plan__panneau { padding: 28px; }
  .formulaire { padding: 24px; }
  .compare { aspect-ratio: 4 / 3; }
  .socle { padding: 58px 0 26px; }
}