/* ==========================================================================
   ISLK Automobile - Pont-Évêque (38)
   Mécanismes repris de L'Éclat d'Emma : Lenis, rideau de lames sur le hero,
   section qui remonte, révélations en clip-path, marquee, carrousel.
   Charte prise sur leur atelier : enseigne rouge et noire, éclairage
   hexagonal, damier, béton brut. Fond crème, jamais de site sombre.
   ========================================================================== */

:root{
  --creme:#F6F2EA;
  --creme-2:#EDE6D9;
  --ivoire:#FCFAF6;
  --encre:#141418;
  --encre-2:#26262E;
  --rouge:#C8252C;
  --rouge-fonce:#9C1B21;
  --rouge-clair:#FF6E64;
  --blanc:#FFF;
  --gris:#5F5C56;
  --trait:rgba(20,20,24,.13);

  --container:1200px;
  --gouttiere:clamp(1.25rem,5vw,4rem);
  --gap:clamp(1.5rem,3vw,2.5rem);
  --entete-h:84px;

  --display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --texte:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Yellowtail",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto !important;overflow-x:hidden}
body{
  font-family:var(--texte);font-weight:400;color:var(--encre);background:var(--ivoire);
  overflow-x:hidden;line-height:1.6;font-size:clamp(.98rem,.94rem + .18vw,1.04rem);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.024em}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem);line-height:1.02}
h2{font-size:clamp(1.6rem,1.15rem + 1.8vw,2.4rem)}
h3{font-size:clamp(1.05rem,.98rem + .38vw,1.22rem);margin-bottom:.45rem}
h4{font-size:1rem}
p{margin-bottom:.9em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--ivoire);padding:.6rem 1rem;z-index:999}
.skip:focus{left:0}

.contenant{max-width:var(--container);margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:clamp(2.4rem,2rem + 2.4vw,4.1rem);position:relative;overflow:hidden}
.section > .contenant{position:relative;z-index:1}

/* Le badge du garage en filigrane, pour habiller les grands aplats sans
   ajouter d'élément décoratif inventé. */
.filigrane{position:absolute;pointer-events:none;user-select:none;z-index:0;line-height:0}
.filigrane img{width:100%;height:auto}
.filigrane--droite{right:-7%;top:-16%;width:min(540px,52vw);opacity:.055}
.filigrane--gauche{left:-9%;bottom:-24%;width:min(600px,56vw);opacity:.07}
.filigrane--cta{right:-4%;top:-28%;width:min(520px,50vw);opacity:.13}
.filigrane--pied{right:-3%;bottom:-34%;width:min(420px,40vw);opacity:.05}
@media (max-width:820px){.filigrane{display:none}}
.section--creme{background:var(--creme)}
.section--creme2{background:var(--creme-2)}
.section--encre{background:var(--encre);color:rgba(246,242,234,.76)}
.section--encre h2,.section--encre h3,.section--encre h4,.section--encre strong{color:var(--blanc)}
[id]{scroll-margin-top:calc(var(--entete-h) + 14px)}

.kicker{
  font-family:var(--script);color:var(--rouge);display:block;
  font-size:clamp(1.2rem,1rem + .75vw,1.7rem);line-height:1.15;margin-bottom:.25rem;
}
.section--encre .kicker{color:var(--rouge-clair)}
.intro{font-size:clamp(1rem,.97rem + .25vw,1.12rem);color:var(--gris);max-width:64ch;margin-top:.85rem}
.section--encre .intro{color:rgba(246,242,234,.74)}

/* ===== Boutons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--texte);font-weight:500;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;padding:1rem 2.1rem;border-radius:999px;border:1px solid transparent;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn--plein{background:var(--rouge);color:var(--blanc);border-color:var(--rouge)}
.btn--plein:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.btn--ligne{border-color:var(--rouge);color:var(--rouge)}
.btn--ligne:hover{background:var(--rouge);color:var(--blanc)}
.btn--ivoire{border-color:rgba(255,255,255,.55);color:var(--blanc)}
.btn--ivoire:hover{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.btn--encre{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.btn--encre:hover{background:var(--encre-2);border-color:var(--encre-2)}
.btn--grand{font-size:.9rem;padding:1.2rem 2.8rem}

/* ===== En-tête ===== */
.nav-site{position:fixed;inset:0 0 auto 0;z-index:80;padding-block:1rem;transition:background .35s,box-shadow .35s}
.nav-site.collee{background:rgba(20,20,24,.93);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.marque{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.marque img{height:clamp(50px,4vw,70px);width:auto;flex-shrink:0}
.pied .marque img{height:74px}
.marque b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,1.25rem + .85vw,1.95rem);line-height:1;letter-spacing:.015em;color:var(--blanc)}
.marque s{display:block;text-decoration:none;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.32rem;white-space:nowrap}
.nav-liens{display:flex;align-items:center;gap:clamp(.6rem,.2rem + .95vw,1.2rem)}
.nav-liens a{font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.92);position:relative;padding-block:.35rem;white-space:nowrap}
.nav-liens a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--rouge);transition:right .3s}
.nav-liens a:hover::after{right:0}
/* Bouton de prise de rendez-vous dans l'en-tête : plein rouge, pour qu'il se
   détache des autres liens de navigation. Pas de soulignement au survol. */
.nav-tel{
  font-weight:600 !important;letter-spacing:.1em !important;
  background:var(--rouge);color:var(--blanc) !important;
  padding:.6rem 1.05rem !important;border-radius:999px;
  transition:background .25s ease,transform .25s ease;
}
.nav-tel::after{display:none}
.nav-tel:hover{background:var(--rouge-fonce);transform:translateY(-1px)}

/* ===== Sous-menu des prestations =====
   Le panneau touche la tête du menu : pas d'interstice où la souris se perd,
   et une fermeture retardée pour le trajet en diagonale. */
.nav-groupe{position:relative}
.nav-groupe__tete{display:inline-flex;align-items:center;gap:.4rem}
.nav-groupe__tete svg{transition:transform .3s ease}
.nav-groupe.ouvert .nav-groupe__tete svg{transform:rotate(180deg)}
.nav-panneau{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  padding-top:1.1rem;min-width:290px;z-index:85;
  opacity:0;visibility:hidden;transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.nav-groupe.ouvert .nav-panneau{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-panneau__in{
  background:rgba(20,20,24,.97);backdrop-filter:blur(16px);border-radius:4px;
  box-shadow:0 22px 50px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.09);
  padding:.6rem;display:grid;gap:1px;
}
.nav-panneau a{
  display:block;padding:.62rem .9rem;border-radius:3px;font-size:.85rem;letter-spacing:.04em;
  text-transform:none;color:rgba(246,242,234,.82);white-space:nowrap;transition:background .2s,color .2s;
}
.nav-panneau a::after{display:none}
.nav-panneau a:hover,.nav-panneau a[aria-current="page"]{background:rgba(200,37,44,.9);color:#fff}
.nav-panneau__tout{
  margin-top:.35rem;border-top:1px solid rgba(255,255,255,.12);
  color:var(--rouge-clair) !important;font-weight:600;
}
.nav-panneau__tout:hover{background:rgba(255,255,255,.08) !important;color:#fff !important}

/* ===== Sous-menu mobile ===== */
.menu-mobile__groupe summary{
  list-style:none;cursor:pointer;color:var(--creme);font-size:1.1rem;
  letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
}
.menu-mobile__groupe summary::-webkit-details-marker{display:none}
.menu-mobile__groupe summary::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--rouge);border-bottom:2px solid var(--rouge);
  transform:rotate(45deg);transition:transform .3s ease;
}
.menu-mobile__groupe[open] summary::after{transform:rotate(-135deg)}
.menu-mobile__groupe a{
  display:block;padding:.55rem 0 .55rem .9rem;font-size:.92rem;letter-spacing:.04em;
  text-transform:none;color:rgba(246,242,234,.78);border-left:2px solid rgba(255,255,255,.14);
}
.menu-mobile__groupe a:first-of-type{margin-top:.9rem}
.burger{display:none;background:none;border:0;padding:.45rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--blanc);margin:5px 0;transition:.3s}
.menu-mobile{
  /* visibility:hidden quand il est fermé : sinon Safari compte sa largeur
     hors écran dans la page et décentre tout le contenu. */
  visibility:hidden;overflow-y:auto;
  position:fixed;inset:0 0 0 auto;width:min(330px,84vw);background:var(--encre);z-index:90;
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:2rem var(--gouttiere);
  transform:translateX(100%);transition:transform .45s cubic-bezier(.62,.05,.3,1);
}
.menu-mobile.ouvert{transform:translateX(0);visibility:visible}
.menu-mobile a{color:var(--creme);font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase}

/* ===== Hero ===== */
.hero{position:relative;min-height:min(680px,92vh);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(258deg,rgba(10,10,13,.93) 0%,rgba(10,10,13,.8) 32%,rgba(10,10,13,.3) 62%,rgba(10,10,13,.08) 100%),
    linear-gradient(180deg,rgba(10,10,13,.74) 0%,rgba(10,10,13,.1) 20%,rgba(10,10,13,0) 46%,rgba(10,10,13,.62) 100%);
}
.hero-in{
  position:relative;z-index:3;width:100%;display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  padding-top:calc(var(--entete-h) + 2.4rem);padding-bottom:clamp(1.8rem,1.4rem + 1.8vw,3rem);
}
.hero-kicker{color:var(--rouge-clair);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero-title{color:var(--blanc);max-width:14ch;text-shadow:0 2px 38px rgba(0,0,0,.55)}
.hero-sous{color:rgba(255,255,255,.92);max-width:46ch;margin-top:1.1rem;font-size:clamp(1.02rem,.97rem + .32vw,1.18rem);text-shadow:0 1px 22px rgba(0,0,0,.62)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;justify-content:flex-end}
.hero-infos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem 1.9rem;width:100%;margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);font-size:.88rem}
.hero-infos strong{color:var(--blanc)}
/* rideau de lames : un rideau métallique de garage qui se referme au scroll */
.hero-cover{position:absolute;inset:0;z-index:5;pointer-events:none;perspective:1400px;perspective-origin:50% 0%}
/* Lames horizontales : le rideau se referme du haut vers le bas, comme
   une porte de garage, et non en balayage latéral. */
.lame{
  position:absolute;left:0;width:100%;
  background:linear-gradient(180deg,#D8343B 0%,#C8252C 44%,#A81E24 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 4px rgba(0,0,0,.3);
  transform-origin:center top;transform:rotateX(-92deg);backface-visibility:hidden;
}

.hero--page{min-height:min(430px,56vh)}
.fil{font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.72);margin-bottom:.9rem}
.fil a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.fil a:hover{color:#fff;border-bottom-color:#fff}
.fil span{opacity:.6}
.hero--page .hero-title{max-width:18ch}
.duree{
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--trait);
  font-size:.95rem;color:var(--gris);
}
.section--encre .duree,.hero--page .duree{color:rgba(246,242,234,.72);border-top-color:rgba(246,242,234,.2)}
.duo-texte .btn{align-self:flex-start;margin-top:1.4rem}

/* ===== Section qui remonte sur le hero ===== */
/* Le bloc crème remonte sur le hero : le contenu du hero doit donc dégager
   cette hauteur, sinon la ligne d'informations passe dessous. */
.hero--chevauche .hero-in{padding-bottom:calc(9vh + 1.8rem)}
.remonte{
  position:relative;z-index:6;background:var(--creme);margin-top:-9vh;
  border-top-left-radius:0;border-top-right-radius:0;
  padding:clamp(4.5rem,11vh,8rem) var(--gouttiere) clamp(3.5rem,8vh,6rem);
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.remonte h2{max-width:20ch}
.remonte .intro{margin-inline:auto;text-align:center}
.remonte .btn{margin-top:1.8rem}

/* ===== Révélation d'image en clip-path ===== */
.reveal{overflow:hidden;border-radius:3px;position:relative}
.reveal img{width:100%;height:100%;object-fit:cover}
.media-4-3{aspect-ratio:4/3}
.media-3-2{aspect-ratio:3/2}
.media-large{width:min(760px,100%);margin:2.4rem auto 0}

.video-cadre{
  width:100%;border-radius:3px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.video-cadre video{width:100%;height:100%;object-fit:cover;display:block}


/* ===== Barre de progression de lecture ===== */
.progression{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;
  background:var(--rouge);transform:scaleX(0);transform-origin:0 50%;
}

/* ===== Titres : révélation ligne par ligne, masquée ===== */
.ligne{display:block;overflow:hidden;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.ligne-in{display:block;will-change:transform}
.js-lignes .ligne-in{transform:translateY(110%)}

/* ===== Parallaxe : l'image déborde de son cadre pour pouvoir glisser ===== */
.duo > .duo-media img,
.duo > .duo-media video{
  position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;display:block;
}
.reveal{position:relative}
.carte__img img,.presta-carte .reveal img{will-change:transform}

/* ===== Boutons magnétiques ===== */
.btn{will-change:transform}

/* ===== Filigrane animé ===== */
.filigrane img{will-change:transform}

/* ===== Marquee ===== */
.bandeau{background:var(--rouge);color:var(--blanc);overflow:hidden;padding-block:1.05rem}
.bandeau-piste{display:flex;width:max-content;gap:0;will-change:transform}
.bandeau-piste span{
  display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);letter-spacing:-.01em;
}
.bandeau-piste em{font-style:normal;opacity:.5;font-size:.7em}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bandeau:hover .bandeau-piste{animation-play-state:paused}

/* ===== Duo image + texte ===== */
/* RÈGLE : l'image fait exactement la hauteur du bloc texte d'à côté, du haut
   du texte au bas du texte. Donc « stretch », pas « center », et pas de ratio
   figé sur le média : c'est la colonne de texte qui donne la hauteur. */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,1rem + 2.8vw,3.4rem);align-items:stretch;
}
.duo--inverse .duo-media{order:2}
.duo-texte{min-width:0;display:flex;flex-direction:column;justify-content:center}
.duo-texte h2{margin-bottom:1rem}
.duo > .duo-media{
  aspect-ratio:auto !important;height:100%;align-self:stretch;
  overflow:hidden;border-radius:3px;position:relative;
}
/* Pas de seconde déclaration ici : elle écrasait le débord de 114 %
   déclaré plus haut et laissait 46 px de vide en bas de chaque image. */

/* ===== Listes de contrôle ===== */
.inclus{display:grid;gap:.38rem;margin-top:1.05rem}
.inclus li{position:relative;padding-left:1.6rem;font-size:.95rem;line-height:1.5}
.inclus li::before{content:"";position:absolute;left:1px;top:.58em;width:10px;height:5px;border-left:2px solid var(--rouge);border-bottom:2px solid var(--rouge);transform:rotate(-45deg)}
.section--encre .inclus li::before{border-color:var(--rouge-clair)}

/* ===== Carrousel de prestations ===== */
.carrousel{position:relative;margin-top:clamp(2.4rem,2rem + 2vw,3.5rem)}
.carrousel-cadre{overflow:hidden}
.carrousel-piste{display:flex;gap:22px;will-change:transform}
.presta-carte{flex:0 0 calc((100% - 44px)/3);background:var(--ivoire);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.presta-carte .reveal{flex:0 0 auto}
.presta-carte .reveal{aspect-ratio:3/2;border-radius:0}
.presta-corps{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1 1 auto}
/* Le carrousel n'est pas une grille : impossible d'y utiliser subgrid. Les
   titres faisant une ou deux lignes et les textes trois à cinq, les listes
   démarraient à 70 px d'écart d'une carte à l'autre. On réserve la place du
   cas le plus long. La hauteur totale ne change pas : ce vide était déjà là,
   mais rejeté sous la liste, le bouton étant collé en bas. */
.presta-corps h3{margin-bottom:.6rem;min-height:2.12em}
.presta-corps p{font-size:.95rem;color:var(--gris);margin:0;min-height:8em}
/* On ne libère la place réservée qu'une fois le carrousel passé à une seule
   carte par vue : tant que deux cartes sont côte à côte, elles doivent
   s'aligner. */
@media (max-width:820px){
  .presta-corps p{min-height:0}
  .presta-corps h3{min-height:0}
}
.presta-corps .inclus{margin-top:.9rem}
/* Tous les boutons de cartes sur la même ligne, quelle que soit la
   longueur du texte au-dessus. */

/* Le libellé ne doit jamais passer sur deux lignes : une carte sur trois
   avait alors son bouton 21 px plus haut que ses voisines. */
.presta-cta{margin-top:auto !important;padding-top:.85rem;padding-bottom:.85rem;align-self:flex-start;
  margin-block-start:1.3rem;white-space:nowrap}
@media (max-width:1250px){
  .presta-cta{padding-inline:1.1rem;font-size:.7rem;letter-spacing:.1em}
}
.presta-corps .inclus li{font-size:.9rem}
.carrousel-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.4rem}
.carrousel-btn{
  width:46px;height:46px;border-radius:999px;border:1px solid var(--trait);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.3s;color:var(--encre);
}
.carrousel-btn:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}

/* ===== Prestations détaillées (texte SEO) ===== */

/* Deux colonnes de texte : les titres doivent démarrer sur la même ligne,
   donc alignement en haut, pas de centrage vertical comme dans un duo. */
.colonnes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,1rem + 3vw,3.5rem);align-items:start;
}
.colonnes > *{min-width:0}

/* ===== Étapes du déroulé : liste ordonnée, sans numéro affiché ===== */
.etapes{list-style:none;display:grid;gap:1.05rem;margin:1.1rem 0 1.5rem}
.etapes li{position:relative;padding-left:1.5rem}
.etapes li::before{
  content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:2px;
  background:var(--rouge);
}
.etapes h3{margin-bottom:.35rem}
.etapes p{font-size:.94rem;color:var(--gris);line-height:1.5}
.section--encre .etapes p{color:rgba(246,242,234,.72)}


/* ===== Grille de cartes : image, titre, texte, lien =====
   Les règles avaient sauté à la réécriture du CSS : sans elles la grille
   retombait en display:block et l'aspect-ratio était ignoré sur le lien. */
/* Les cartes d'une même rangée doivent s'aligner ligne à ligne : image,
   méta, titre, texte et lien. Le flex ne le permet pas, une méta sur deux
   lignes décalait tout le reste de la carte voisine. Subgrid le fait. */
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  grid-auto-rows:auto}
.carte{display:flex;flex-direction:column;height:100%;transition:transform .35s ease}
@supports (grid-template-rows:subgrid){
  .grille{grid-template-rows:repeat(var(--rangees,2),auto auto auto 1fr auto)}
  /* row-gap:0 obligatoire : un subgrid hérite de la gouttière du parent, ce
     qui ajoutait 40 px entre l'image, la méta, le titre, le texte et le lien,
     soit 160 px d'air dans chaque carte. */
  .carte{display:grid;grid-template-rows:subgrid;grid-row:span 5;height:auto;row-gap:0}
  .carte > *{min-width:0}
}
.carte:hover{transform:translateY(-4px)}
.carte__img{
  display:block;overflow:hidden;border-radius:3px;aspect-ratio:3/2;
  background:var(--creme-2);flex:0 0 auto;
}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.carte:hover .carte__img img{transform:scale(1.045)}
.carte-meta{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris);margin-top:1rem;line-height:1.4}
.section--encre .carte-meta{color:rgba(246,242,234,.55)}
.carte-meta:empty{margin-top:0}
.carte h3{margin-top:.5rem;margin-bottom:.45rem}
.carte > h3:first-of-type{margin-top:1.05rem}
@supports (grid-template-rows:subgrid){
  .carte h3,.carte > h3:first-of-type{margin-top:.5rem}
}
.carte h3 a{text-decoration:none}
.carte p{flex:1 1 auto;margin:0;color:var(--gris);font-size:.95rem}
.carte__lien{margin-top:.95rem;align-self:flex-start}
.section--encre .carte p{color:rgba(246,242,234,.7)}
/* Le lien est collé en bas : tous les boutons de la rangée sur la même ligne. */
.carte__lien{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.95rem;align-self:flex-start;
  font-weight:600;font-size:.9rem;color:var(--rouge);
}
.carte__lien svg{transition:transform .3s ease}
.carte:hover .carte__lien svg{transform:translateX(4px)}

/* ===== Tarifs ===== */
.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2.2rem,1.8rem + 1.6vw,3rem)}
.tarif{border-top:3px solid var(--rouge);padding-top:1.2rem}
.tarif-prix{font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(2.3rem,1.7rem + 2vw,3.2rem)}
.tarif-prix span{font-size:.34em;font-weight:400;letter-spacing:.04em}
.tarif h3{margin-top:.5rem;margin-bottom:.4rem}
.tarif p{margin:0;font-size:.94rem;color:rgba(246,242,234,.72)}
.note{margin-top:clamp(1.9rem,1.5rem + 1vw,2.5rem);padding:1.15rem 1.4rem;border-radius:3px;background:rgba(200,37,44,.16);box-shadow:inset 0 0 0 1px rgba(200,37,44,.45);font-size:.94rem;color:rgba(246,242,234,.92);max-width:74ch}

/* ===== Galerie défilante ===== */
.galerie{padding-block:clamp(3.5rem,3rem + 3vw,6rem);background:var(--creme-2);overflow:hidden}
.galerie-tete{text-align:center;margin-bottom:clamp(2rem,1.6rem + 1.6vw,3rem);padding-inline:var(--gouttiere)}
.galerie-piste{display:flex;gap:18px;width:max-content;padding-inline:2vw;will-change:transform}
.galerie-piste figure{flex:0 0 clamp(250px,27vw,390px);aspect-ratio:3/2;overflow:hidden;border-radius:3px;margin:0}
.galerie-piste img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.galerie-piste figure:hover img{transform:scale(1.06)}

/* ===== Carte du secteur =====
   Tracée depuis les contours officiels des communes, pas d'iframe ni de cookie. */
/* Carte en pleine largeur sous la liste, mais plafonnée en hauteur :
   sans plafond elle sortait à plus de 1000 px de haut. */
/* Classe propre : « .carte » servait aussi aux cartes de contenu, qui
   héritaient donc d'un fond, d'un arrondi et d'une marge haute. */
.carte-zone{
  margin-top:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);border-radius:4px;overflow:hidden;
  background:var(--creme-2);display:flex;justify-content:center;
}
.section--creme .carte-zone{background:var(--ivoire)}
.carte-secteur{display:block;width:100%;height:auto}

.zone-c{fill:#E2DCCF;stroke:#CFC7B6;stroke-width:1.4;transition:fill .3s ease}
.section--creme .zone-c{fill:#EBE5D9;stroke:#D8D0BF}
.zone-c:hover{fill:#D6CEBB}
.zone-ici{fill:rgba(200,37,44,.14);stroke:var(--rouge);stroke-width:2.6}
.etiq{
  font-family:var(--texte);font-size:15px;font-weight:500;fill:#6B675F;
  text-anchor:middle;dominant-baseline:middle;paint-order:stroke;
  stroke:var(--ivoire);stroke-width:3.5px;stroke-linejoin:round;
}
.etiq-ici{fill:var(--encre);font-weight:600;font-size:16px}
.rayon{fill:none;stroke:var(--rouge);stroke-width:2;stroke-dasharray:7 6;opacity:.5}
.rayon-txt{font-family:var(--texte);font-size:14px;font-weight:600;fill:var(--rouge);text-anchor:middle;paint-order:stroke;stroke:var(--ivoire);stroke-width:4px;stroke-linejoin:round;opacity:.9}
.pin{fill:var(--rouge)}
.pin-centre{fill:#fff}
.carte-garage-nom{
  font-family:var(--display);font-size:16px;font-weight:700;fill:var(--encre);
  text-anchor:middle;paint-order:stroke;stroke:var(--ivoire);stroke-width:4px;stroke-linejoin:round;
}
@media (max-width:700px){.etiq{font-size:22px}.etiq-ici{font-size:24px}.carte-garage-nom{font-size:24px}}

/* ===== Zone ===== */
.zone{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.5rem}
.zone li{font-size:.9rem;font-weight:500;padding:.42rem .95rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--trait)}

/* ===== FAQ ===== */
.faq{margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem);border-top:1px solid var(--trait);max-width:900px}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 0;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;font-family:var(--display);font-weight:600;font-size:clamp(1rem,.96rem + .3vw,1.14rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.42em;border-right:2px solid var(--rouge);border-bottom:2px solid var(--rouge);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:1.1rem;color:var(--gris);max-width:74ch}

/* ===== CTA final (prend la place de la section avis de la référence) ===== */
.cta{background:var(--rouge);color:rgba(255,255,255,.9);text-align:center;position:relative;overflow:hidden}
.cta h2{color:var(--blanc);max-width:20ch;margin-inline:auto}
.cta .kicker{color:rgba(255,255,255,.82)}
.cta .intro{color:rgba(255,255,255,.88);margin-inline:auto}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}

/* ===== Contact ===== */
.contact-liste{display:grid;gap:1.2rem;margin-top:1.6rem}
.contact-liste dt{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gris);margin-bottom:.25rem}
.contact-liste dd{font-size:1.05rem;font-weight:500}

/* ===== Pied ===== */
.pied{position:relative;overflow:hidden;background:var(--encre);color:rgba(246,242,234,.7);padding-block:clamp(3rem,2.4rem + 2vw,4.25rem) 1.9rem;font-size:.92rem}

.pied > .contenant{position:relative;z-index:1}
.pied-haut{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(2rem,1rem + 3vw,3.75rem)}
.pied h4{font-family:var(--display);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(246,242,234,.46);margin-bottom:.95rem}
.pied ul{display:grid;gap:.5rem}
.pied a:hover{color:var(--blanc)}
.pied .marque{margin-bottom:1rem}
.pied .marque b{color:var(--blanc)}
.pied .marque s{color:rgba(246,242,234,.46)}
.bandes{display:flex;gap:6px;align-items:center;margin-top:1.2rem}
.bandes i{display:block;height:3px;width:44px;background:var(--rouge);border-radius:2px}
.bandes i:nth-child(2){width:24px;opacity:.55}
.bandes i:nth-child(3){width:11px;opacity:.28}
.pied-bas{margin-top:2.75rem;padding-top:1.4rem;border-top:1px solid rgba(246,242,234,.14);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.84rem;color:rgba(246,242,234,.5)}

/* ===== Damier ===== */
.damier{height:13px;background-color:var(--creme);background-image:linear-gradient(45deg,var(--encre) 25%,transparent 25%,transparent 75%,var(--encre) 75%),linear-gradient(45deg,var(--encre) 25%,transparent 25%,transparent 75%,var(--encre) 75%);background-size:13px 13px;background-position:0 0,6.5px 6.5px}

/* ===== Loader ===== */
.porte{position:fixed;inset:0;z-index:999;background:#101014;overflow:hidden}
/* La porte ne s'ouvre qu'à l'arrivée sur le site, pas à chaque page. */
.porte-vue .porte{display:none}

/* ==========================================================================
   Pages intérieures : tableau de durées, mosaïque, engagements, formulaires,
   articles de blog, pages réglementaires.
   ========================================================================== */

/* ===== Tableau des durées ===== */
.tableau{margin-top:clamp(2.2rem,1.8rem + 1.6vw,3rem);overflow-x:auto;
  border-top:3px solid var(--rouge);-webkit-overflow-scrolling:touch}
.tableau table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.tableau caption{position:absolute;left:-9999px}
.tableau th,.tableau td{padding:1rem 1.2rem 1rem 0;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau thead th{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gris);padding-top:1.1rem;padding-bottom:.7rem}
.tableau tbody th{font-family:var(--display);font-weight:600;font-size:1.02rem;width:24%;
  letter-spacing:-.02em;padding-right:1.4rem}
.tableau tbody td:nth-child(2){width:14%;white-space:nowrap}
.tableau tbody td:nth-child(3){width:9%;font-weight:500;color:var(--rouge)}
.tableau tbody td:last-child{font-size:.95rem;color:var(--gris)}
.tableau tbody tr:hover{background:rgba(200,37,44,.035)}

/* ===== Légende sous une image ===== */
.legende{margin-top:.85rem;font-size:.88rem;line-height:1.5;color:var(--gris);max-width:58ch}
.section--encre .legende{color:rgba(246,242,234,.62)}
figure.duo-media{display:flex;flex-direction:column}
figure.duo-media img{flex:1 1 auto;min-height:0;object-fit:cover}

/* Deux colonnes de texte : on repasse en une seule dès que la place manque,
   sinon on obtient des colonnes de 153 px (défaut présent aussi sur l'accueil). */
@media (max-width:760px){
  .colonnes{grid-template-columns:minmax(0,1fr) !important}
  .duo.colonnes{grid-template-columns:minmax(0,1fr) !important}
}

/* ===== Blog : article en vedette, sommaire, essentiel, navigation ===== */
.une{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:stretch;
  margin-top:clamp(1.8rem,1.5rem + 1.2vw,2.6rem)}
.une-img{position:relative;overflow:hidden;border-radius:3px;display:block}
.une-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.une-img:hover img{transform:scale(1.04)}
.une-texte{display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.une-texte .carte-meta{margin-top:0;margin-bottom:.7rem}
.une-texte .inclus{margin-block:1.1rem 1.6rem}
.une-texte .btn{align-self:flex-start}

/* L'essentiel : ce qu'un lecteur pressé doit retenir avant de lire. */
.essentiel{background:var(--creme-2);border-top:3px solid var(--rouge);border-radius:3px;
  padding:clamp(1.3rem,1.1rem + .8vw,1.8rem) clamp(1.4rem,1.2rem + .8vw,1.9rem);
  margin-bottom:clamp(1.6rem,1.4rem + .9vw,2.1rem)}
.essentiel h2{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);margin:0 0 .9rem}
.essentiel ul{display:grid;gap:.7rem}
.essentiel li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.6;color:#36342F}
.essentiel li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  background:var(--rouge);border-radius:1px}

.article-corps{min-width:0}
.colonne-cote{display:grid;gap:1.3rem;align-content:start;
  position:sticky;top:calc(var(--entete-h) + 1.4rem)}
.sommaire-art{background:var(--ivoire);box-shadow:inset 0 0 0 1px var(--trait);border-radius:3px;
  padding:1.3rem 1.4rem}
.sommaire-art h2{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.85rem}
.sommaire-art ol{list-style:none;counter-reset:sa;display:grid;gap:.55rem}
.sommaire-art li{counter-increment:sa;font-size:.9rem;line-height:1.4}
.sommaire-art li a{display:flex;gap:.55rem;color:var(--gris);transition:color .2s ease}
.sommaire-art li a::before{content:counter(sa);color:var(--rouge);font-weight:600;
  font-family:var(--display);flex:0 0 auto;font-size:.8rem;padding-top:.08em}
.sommaire-art li a:hover,.sommaire-art li a.actif{color:var(--encre)}
.encart--sobre{background:var(--ivoire);box-shadow:inset 0 0 0 1px var(--trait);border-top-color:var(--encre)}
.article h2{scroll-margin-top:calc(var(--entete-h) + 1.4rem)}
.article-pied{margin-top:clamp(1.6rem,1.4rem + .9vw,2.1rem);padding-top:1.2rem;
  border-top:1px solid var(--trait);font-size:.9rem;color:var(--gris);line-height:1.6}
.article-pied a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px}

.art-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(1.5rem,1.3rem + .8vw,2rem)}
.art-nav__lien{display:grid;gap:.3rem;padding-top:1rem;border-top:1px solid var(--trait);
  transition:border-color .25s ease}
.art-nav__lien:hover{border-top-color:var(--rouge)}
.art-nav__lien span{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.art-nav__lien b{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.3;
  letter-spacing:-.015em}
.art-nav__s{text-align:right}

@media (max-width:1000px){
  .colonne-cote{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sommaire-art{grid-column:1 / -1}
  .une{grid-template-columns:minmax(0,1fr)}
  .une-img{aspect-ratio:3/2}
}
@media (max-width:720px){
  .colonne-cote{grid-template-columns:minmax(0,1fr)}
  .art-nav{grid-template-columns:minmax(0,1fr)}
  .art-nav__s{text-align:left}
}

/* ===== Maillage interne : liens posés dans le corps du texte ===== */
.lien-texte{color:inherit;text-decoration:underline;text-decoration-color:rgba(200,37,44,.45);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color .22s ease,text-decoration-color .22s ease}
.lien-texte:hover{color:var(--rouge);text-decoration-color:var(--rouge)}
.section--encre .lien-texte,.cta .lien-texte{text-decoration-color:rgba(255,110,100,.6)}
.section--encre .lien-texte:hover,.cta .lien-texte:hover{color:var(--rouge-clair);
  text-decoration-color:var(--rouge-clair)}

/* ===== Avis Google réels ===== */
.avis-resume{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.8rem,1rem + 3vw,3.5rem);
  align-items:center;margin-top:clamp(2rem,1.6rem + 1.4vw,2.8rem);padding:clamp(1.5rem,1.2rem + 1vw,2rem);
  border-top:3px solid var(--rouge);background:var(--creme-2);border-radius:3px}
.avis-note{display:grid;justify-items:center;gap:.35rem;padding-right:clamp(1rem,3vw,2.2rem);
  border-right:1px solid var(--trait)}
.avis-note strong{font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(2.8rem,2rem + 3vw,4.2rem);letter-spacing:-.03em}
.avis-note span{font-size:.86rem;color:var(--gris);text-align:center}
.etoiles{display:inline-flex;gap:2px;color:#E8A33D;line-height:0}
.etoiles .vide{color:#C9C2B4}
.repartition{display:grid;gap:.45rem}
.repart-ligne{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:.6rem;align-items:center;
  font-size:.86rem;color:var(--gris)}
.repart-barre{height:7px;border-radius:999px;background:rgba(20,20,24,.1);overflow:hidden}
.repart-barre i{display:block;height:100%;background:var(--rouge);border-radius:999px}
.repart-n{min-width:2ch;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}

.avis-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(2.2rem,1.8rem + 2vw,3.2rem)}
.avis{display:flex;flex-direction:column;gap:.9rem;padding-top:1.1rem;border-top:1px solid var(--trait)}
.avis blockquote{flex:1 1 auto;margin:0}
.avis blockquote p{margin:0;font-size:.96rem;line-height:1.62;color:#36342F}
.avis-suite{color:var(--gris)}
.avis figcaption{display:grid;gap:.1rem}
.avis figcaption b{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.01em}
.avis figcaption span{font-size:.8rem;color:var(--gris)}
/* Pas de palier à deux colonnes : les lots d'avis vont par trois, et deux
   colonnes laisseraient une rangée trouée. Trois, puis une. */
@media (max-width:860px){
  .avis-grille{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .avis-resume{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .avis-note{border-right:0;border-bottom:1px solid var(--trait);padding:0 0 1.2rem}
}

/* ===== Avant / après : deux figures côte à côte, légende sous l'image ===== */
.comparaison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(2rem,1.6rem + 1.4vw,2.8rem)}
.compare{display:flex;flex-direction:column}
.compare-etiq{align-self:flex-start;font-family:var(--display);font-size:.68rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rouge);margin-bottom:.7rem}
.compare > .reveal{border-radius:3px;overflow:hidden}
.compare img{width:100%;aspect-ratio:3/2;object-fit:cover}
.compare .legende{margin-top:.85rem}
.contact-liste--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.cta-actions--gauche{justify-content:flex-start;margin-top:clamp(1.8rem,1.5rem + 1vw,2.4rem)}
@media (max-width:760px){
  .comparaison{grid-template-columns:minmax(0,1fr)}
  .contact-liste--2{grid-template-columns:minmax(0,1fr)}
}

/* ===== Mosaïque de photos : colonnes fixes, jamais de rangée trouée ===== */
.mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.vignette{overflow:hidden;border-radius:3px;background:var(--creme-2)}
.vignette img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.vignette:hover img{transform:scale(1.045)}

/* ===== Engagements ===== */
.engagements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.engagement{border-top:3px solid var(--rouge);padding-top:1.15rem}
.engagement h3{margin-bottom:.5rem}
.engagement p{margin:0;font-size:.95rem;color:var(--gris)}
.section--encre .engagement p{color:rgba(246,242,234,.72)}

/* ===== Formulaire (socle Simply On) ===== */
.form{margin-top:1.8rem;display:grid;gap:1.05rem}
.leurre{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none}
.champ{display:grid;gap:.4rem;margin:0}
.champ label{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.champ label abbr{color:var(--rouge);text-decoration:none;border:0}
.champ small{font-size:.84rem;color:var(--gris);line-height:1.45}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--texte);font-size:1rem;color:var(--encre);
  background:var(--blanc);border:0;box-shadow:inset 0 0 0 1px var(--trait);
  border-radius:3px;padding:.8rem .95rem;transition:box-shadow .25s ease;
}
.form input,.form textarea{cursor:text}
.form select{appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none'><path d='M1 1l3.5 3.5L8 1' stroke='%235F5C56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center}
.form textarea{resize:vertical;min-height:7.5rem;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;
  box-shadow:inset 0 0 0 2px var(--rouge)}
.form input:user-invalid,.form textarea:user-invalid{box-shadow:inset 0 0 0 2px var(--rouge-fonce)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;
  color:var(--gris);cursor:pointer}
.check input{width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.18rem;accent-color:var(--rouge);
  cursor:pointer;box-shadow:none}
.check a{text-decoration:underline;text-underline-offset:3px}
.form button{justify-self:start;margin-top:.3rem}
.form-note{font-size:.86rem;color:var(--gris);line-height:1.5;margin:0;max-width:56ch}
.form-note a{color:var(--rouge);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ===== Article de blog ===== */
.contenant--article{max-width:1180px;margin-inline:auto;padding-inline:var(--gouttiere);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,310px);
  gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
.article{max-width:72ch}
.article h2{margin-top:clamp(1.7rem,1.4rem + 1vw,2.15rem);margin-bottom:.75rem}
.article h2:first-child{margin-top:0}
.article p{font-size:clamp(1rem,.96rem + .22vw,1.08rem);line-height:1.68;
  margin-bottom:.95em;color:#36342F;max-width:68ch}
.article p strong{color:var(--encre);font-weight:600}
.article-fig{margin-block:clamp(1.4rem,1.2rem + .9vw,1.9rem)}
.article-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.encart{position:sticky;top:calc(var(--entete-h) + 1.6rem);background:var(--creme-2);
  border-top:3px solid var(--rouge);border-radius:3px;padding:1.6rem 1.5rem 1.7rem}
.encart h2{font-size:clamp(1.15rem,1.05rem + .45vw,1.38rem);margin-bottom:.7rem;margin-top:.3rem}
.encart p{font-size:.93rem;color:var(--gris);margin-bottom:1.3rem}
.encart .hero-cta{flex-direction:column;align-items:stretch;gap:.65rem;margin:0}
.encart .btn{justify-content:center;text-align:center}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ===== Pages réglementaires ===== */
.sommaire{background:var(--creme-2);border-top:3px solid var(--rouge);border-radius:3px;
  padding:1.5rem 1.6rem 1.7rem;max-width:760px}
.sommaire h2{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.9rem}
.sommaire ol{list-style:none;counter-reset:som;columns:2;column-gap:2.2rem}
.sommaire li{counter-increment:som;margin-bottom:.5rem;font-size:.94rem;break-inside:avoid}
.sommaire li a{display:flex;gap:.6rem}
.sommaire li a::before{content:counter(som) ".";color:var(--rouge);font-weight:600;
  font-family:var(--display);flex:0 0 auto}
.sommaire li a:hover{color:var(--rouge)}
.legal{margin-top:clamp(2.4rem,2rem + 1.6vw,3.4rem);max-width:78ch}
.legal-bloc{padding-top:clamp(1.8rem,1.5rem + 1vw,2.4rem);border-top:1px solid var(--trait);
  margin-top:clamp(1.8rem,1.5rem + 1vw,2.4rem);scroll-margin-top:calc(var(--entete-h) + 1.5rem)}
.legal-bloc:first-child{padding-top:0;border-top:0;margin-top:0}
.legal-bloc h2{font-size:clamp(1.22rem,1.1rem + .6vw,1.52rem);margin-bottom:.9rem}
.legal-bloc p{font-size:.98rem;line-height:1.7;margin-bottom:.95em;color:#36342F}
.legal-bloc a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px}
.legal-bloc strong{color:var(--encre)}

/* ===== Adaptations ===== */
@media (max-width:1000px){
  .contenant--article{grid-template-columns:minmax(0,1fr)}
  .encart{position:static;max-width:520px}
  /* La mosaïque compte neuf photos : deux colonnes laisseraient une rangée
     trouée. Trois, puis une. Les engagements vont par six, deux convient. */
  .mosaique{grid-template-columns:minmax(0,1fr)}
  .engagements{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .engagements,.grille--2{grid-template-columns:minmax(0,1fr)}
  .sommaire ol{columns:1}
  .tableau{margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere)}
}

/* ===== Curseur jante ===== */
.jante{
  position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;
  z-index:200;pointer-events:none;opacity:0;will-change:transform;
  transition:opacity .25s ease;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.jante.visible{opacity:1}
/* La roue tourne d'un seul bloc, origine au centre de la boîte :
   un groupe interne aurait son propre centre de boîte englobante. */
.jante svg{display:block;width:100%;height:100%;transform-box:fill-box;transform-origin:50% 50%}
/* Safari n'hérite pas cursor:none de façon fiable : on le force partout,
   sauf sur les champs de saisie où le curseur texte reste utile. */
.curseur-jante,.curseur-jante *{cursor:none !important}
.curseur-jante input,.curseur-jante textarea,.curseur-jante [contenteditable]{cursor:auto !important}
.curseur-jante select,.curseur-jante .check,.curseur-jante .check *,
.curseur-jante .form button{cursor:pointer !important}
.porte-tablier{position:absolute;inset:0;will-change:transform}
.porte-lames{position:absolute;inset:0;display:flex;flex-direction:column}
/* Lames de rideau métallique : dégradé + liseré clair en haut, ombre en bas. */
.porte-lame{
  flex:1 0 auto;
  background:linear-gradient(180deg,#30303a 0%,#23232b 38%,#191920 78%,#141419 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),inset 0 -2px 3px rgba(0,0,0,.55);
}
.porte::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 32%,rgba(0,0,0,.55) 100%)}
.porte-logo{position:absolute;inset:0;display:grid;place-items:center;z-index:3;padding-inline:8vw;padding-bottom:4vh}
.porte-logo img{width:min(420px,60vw);filter:drop-shadow(0 14px 34px rgba(0,0,0,.6))}
.porte-barre{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:min(190px,40vw);height:2px;background:rgba(255,255,255,.16);z-index:4;overflow:hidden}
.porte-barre i{display:block;height:100%;width:0;background:var(--rouge)}
.porte-sol{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rouge);z-index:5;transform-origin:center}

.appel-mobile{display:none}

/* ===== Responsive ===== */

@media (max-width:1100px){
  .presta-carte{flex:0 0 calc((100% - 22px)/2)}
}
@media (max-width:1000px){
  /* Les cartes vont toujours par trois, six ou neuf : un palier à deux
     colonnes laisse forcément une rangée trouée. Trois, puis une. */
  .tarifs{grid-template-columns:1fr}
  .tarif{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
  .tarif-prix{flex:0 0 auto}
  .tarif h3{margin-top:0}
  .tarif p{flex:1 1 100%;margin-top:.3rem}
  .pied-haut{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .nav-liens{display:none}
  .burger{display:block;position:relative;z-index:95}
}
@media (max-width:820px){
  :root{--entete-h:72px}
  .nav-liens{display:none}
  .burger{display:block;position:relative;z-index:95}
  .duo{grid-template-columns:1fr;gap:1.9rem}
  .duo > .duo-media{aspect-ratio:4/3 !important;height:auto}
  .duo > .video-cadre{aspect-ratio:464/832 !important;width:min(340px,78vw);margin-inline:auto}
  .duo--inverse .duo-media{order:0}
  .grille,.grille--2{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .presta-carte{flex:0 0 100%}
  .pied-haut{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero-in{padding-top:calc(var(--entete-h) + 2.2rem);padding-bottom:2rem}
  .hero-title{font-size:clamp(2rem,1.3rem + 3.2vw,2.6rem);max-width:none}
  .hero-sous{margin-top:.85rem}
  .hero-cta{margin-top:1.4rem}
  .hero-infos{margin-top:1.6rem;padding-top:1rem;gap:.4rem 1.3rem;font-size:.84rem}
  .remonte{margin-top:-5vh}
  .appel-mobile{display:flex;position:fixed;left:var(--gouttiere);right:var(--gouttiere);bottom:.9rem;z-index:70;gap:.55rem}
  .appel-mobile .btn{flex:1;padding:.9rem .6rem;font-size:.74rem;box-shadow:0 8px 26px rgba(0,0,0,.25)}
  body{padding-bottom:4.3rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .lame{display:none}
}
.sommaire li a.actif{color:var(--rouge);font-weight:500}