/* =========================================================================
   Theme redemarre.fr — repris du theme "artisanal" (dzitstrategy.fr), trie
   aux seuls composants utilises par cette page. Meme papier chaud, meme
   serif, memes filets. En-tete sticky, s'efface au survol (mode "survol",
   comme dzitstrategy.fr) ; la nav se replie en hamburger sous le seuil de largeur via DZNav (vendor/
   dznav.js, charge avant cette feuille pour que les variables ci-dessous
   la surchargent — voir /assets/vendor/dznav.css).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

:root {
  --papier:    #fbf8f3;
  --creme:     #f2ece1;
  --encre:     #221e1a;
  --encre-2:   #574f46;
  --encre-3:   #6f665c;
  --filet:     #ddd4c6;
  --vert:      #1f5a4e;
  --vert-clair:#2d7666;
  --terre:     #a9522f;
  /* Vert du prix apres credit d'impot : volontairement plus franc et plus
     clair que --vert pour se distinguer du prix normal, qui est deja vert.
     Contraste mesure 5,2:1 sur --vert-sap-fond, 5,0:1 en version claire sur
     le fond sombre (seuil texte 4,5). Ne pas rapprocher de --vert. */
  --vert-sap:  #14713f;
  --vert-sap-fond: #e4f1e6;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;

  --cadre: 1140px;
  --entete-h: 4.25rem;
  --entete-bg: var(--papier);

  --esp-haut-desk: 28px;  --esp-haut-mob: 28px;
  --esp-bas-desk:  96px;  --esp-bas-mob:  56px;
  --esp-int-desk:  96px;  --esp-int-mob:  56px;
  --esp-haut: var(--esp-haut-desk);
  --esp-bas:  var(--esp-bas-desk);
  --esp-int:  var(--esp-int-desk);
}
@media (max-width: 860px) {
  :root {
    --esp-haut: var(--esp-haut-mob);
    --esp-bas:  var(--esp-bas-mob);
    --esp-int:  var(--esp-int-mob);
    --entete-h: 3.5rem;
  }
}

body {
  font-family: var(--sans);
  font-size: 1.09rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
.cadre { width: min(100% - 2.5rem, var(--cadre)); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; }
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p + p { margin-top: .85em; }
a { color: var(--vert); }
a:hover { color: var(--vert-clair); }

.saut {
  position: absolute; left: -9999px;
  background: var(--vert); color: var(--papier); padding: .6rem 1rem;
}
.saut:focus { left: 1rem; top: 1rem; z-index: 100; }
:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }

/* ---------- DZNav (variables du composant, voir vendor/dznav.css) ----------
   Charge AVANT cette feuille : meme selecteur, meme specificite, ces valeurs
   gagnent par ordre de source. --dznav-bg doit rester opaque (le panneau
   vertical ouvert s'appuie dessus, cf. .dznav--overlay.dznav--vertical
   .dznav__list dans dznav.css) — transparent le rendrait illisible. */
.dznav, .dznav__brand, .dznav-top, .dznav-progress {
  --dznav-accent: var(--vert);
  --dznav-bg: var(--papier);
  --dznav-text-muted: var(--encre-2);
  --dznav-border: var(--filet);
  --dznav-radius: 6px;
  --dznav-font: var(--sans);
}

/* ---------- En-tete (sticky ; nav repliable en hamburger via DZNav) ----------
   Disparition au survol, mode "survol" (comme dzitstrategy.fr, revient sur le
   choix "au-scroll" du 19/08/2026 matin — demande explicite David) : absent
   des le chargement (fond transparent, nav/menu invisibles), seul le titre
   reste. Revient en fondu au survol ou au focus clavier. Des qu'on defile
   dans la page (`a-defile`, pose par le JS en bas de page), le titre
   s'efface lui aussi. La barre GARDE SA HAUTEUR (seule sa visibilite change)
   sinon le contenu remonterait d'un cran a chaque aller-retour de la souris.
   Sur ecran tactile ou petit ecran (le survol n'existe pas) : l'en-tete reste
   complet, et c'est le SENS du defilement qui le masque/redonne entierement
   (`a-cachee`, translateY). Jamais efface tant que le menu est ouvert. */
.entete {
  border-bottom: 1px solid var(--filet);
  background: transparent; border-bottom-color: transparent;
  position: sticky; top: 0; z-index: 70;
}
/* Transitions posees SEULEMENT une fois l'etat initial applique (classe
   `entete-pret`, posee par le JS deux frames apres le premier `ajuster()`) :
   sinon, un rechargement qui restaure une page deja defilee (comportement
   par defaut de Chrome au F5, ou une arrivee par ancre) posait `a-defile`
   des le premier calcul de style, et CETTE tout premiere application
   animait sur .75s comme un changement normal — flash visible a chaque
   refresh d'une page qu'on n'a pourtant pas fait defiler soi-meme. */
html.entete-pret .entete { transition: background-color .75s ease, border-color .75s ease; }
.entete .nav-suivie,
.entete .dznav__toggle { opacity: 0; }
html.entete-pret .entete .nav-suivie,
html.entete-pret .entete .dznav__toggle { transition: opacity .75s ease; }
/* Le titre seul reste visible tant qu'on n'a pas defile (cf. commentaire ci-
   dessus) : il ne s'efface qu'une fois `a-defile` pose. */
.entete.a-defile .marque { opacity: 0; }
html.entete-pret .entete.a-defile .marque { transition: opacity .75s ease; }
.entete:hover,
.entete:focus-within { background: var(--entete-bg); border-bottom-color: var(--filet); }
.entete:hover .nav-suivie, .entete:hover .marque, .entete:hover .dznav__toggle,
.entete:focus-within .nav-suivie, .entete:focus-within .marque, .entete:focus-within .dznav__toggle
  { opacity: 1; }
@media (hover: none), (max-width: 860px) {
  .entete { will-change: transform; }
  html.entete-pret .entete { transition: background-color .75s ease, border-color .75s ease, transform .28s ease; }
  .entete.a-cachee { transform: translateY(-100%); }
  /* Jamais efface : navigation au clavier, menu ouvert, ou haut de page. */
  .entete.a-cachee:focus-within,
  .entete.a-menu-ouvert, .entete:has(.dznav--open) { transform: none; }
}
@media (hover: none) and (prefers-reduced-motion: reduce),
       (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .entete { transition: none; }
}
.entete.a-menu-ouvert, .entete:has(.dznav--open) {
  background: var(--entete-bg); border-bottom-color: var(--filet);
}
.entete.a-menu-ouvert .nav-suivie, .entete.a-menu-ouvert .marque, .entete.a-menu-ouvert .dznav__toggle,
.entete:has(.dznav--open) .nav-suivie, .entete:has(.dznav--open) .marque, .entete:has(.dznav--open) .dznav__toggle
  { opacity: 1; }

/* Ecran tactile ou petit ecran : le survol n'existe pas, ou n'est pas le bon
   geste. L'en-tete reste complet, le sens du defilement prend le relais
   (`a-cachee` ci-dessus, pose par le JS). */
@media (hover: none), (max-width: 860px) {
  .entete, .entete.a-defile {
    background: var(--entete-bg); border-bottom-color: var(--filet);
  }
  .entete .nav-suivie, .entete .marque, .entete .dznav__toggle,
  .entete.a-defile .marque { opacity: 1; }
}

/* Hamburger reserve au mobile : au-dessus du seuil de repliage (860px), la
   barre horizontale tient toute seule et le bouton n'apporte rien — classe
   posee par le JS en bas de page (matchMedia sur le meme seuil que DZNav). */
html.nav-sans-bouton .dznav__toggle { display: none; }
.entete .cadre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--entete-h); flex-wrap: wrap; padding-block: .5rem;
}
.marque {
  text-decoration: none; color: var(--vert); flex: 0 0 auto;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
}
.entete nav { display: flex; flex-wrap: wrap; gap: 1.4rem; row-gap: .4rem; }
.entete nav a { text-decoration: none; color: var(--encre-2); font-size: .93rem; }
.entete nav a:hover { color: var(--vert); }
.entete nav .nav-fort { color: var(--vert); border-bottom: 1px solid var(--vert); }

/* Bouton DZNav tout a gauche, comme sur dzitstrategy.fr : premier enfant du
   cadre (avant la marque), la marque juste apres avec une petite marge (pas
   le `gap: 1.5rem` ambiant du cadre, reserve a l'ecart marque/nav) ; la
   marque garde son "margin-right: auto" pour que la nav reste calee a droite
   au lieu de se retrouver au centre a 3 enfants. */
.entete .cadre:has(.bouton-entete) { gap: 0; }
.entete .bouton-entete {
  font: inherit; font-size: .93rem; color: var(--vert);
  background: transparent; border: none; cursor: pointer;
  margin-right: .6rem;
}
.entete .bouton-entete:hover { color: var(--vert-clair); }
.entete .cadre:has(.bouton-entete) .marque { margin-right: auto; }
.entete .cadre:has(.bouton-entete) nav { margin-left: 1.5rem; }

/* ---------- Sections ---------- */
main > section { padding-block: calc(var(--esp-int) / 2); }
main > section:first-of-type { padding-top: var(--esp-haut); }
main > section:last-of-type { padding-bottom: var(--esp-bas); }
section[id] { scroll-margin-top: calc(var(--entete-h) + 1rem); }
.section-creme { background: var(--creme); }

.oeil {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: var(--terre);
  margin-bottom: 1.1rem;
}
.chapo { font-size: 1.1rem; color: var(--encre-2); max-width: 62ch; margin-top: 1rem; }
.mention { margin-top: 2.2rem; font-size: .92rem; color: var(--encre-3); max-width: 70ch; }
.mention-prix { margin-top: 1.5rem; font-size: .85rem; color: var(--encre-3); }
.mention-prix::before { content: "* "; }

/* ---------- Hero ---------- */
.hero { padding-bottom: calc(var(--esp-int) * .3); }
.hero h1 { max-width: 22ch; margin-top: .3rem; }
.maint-velo { color: var(--encre-2); margin-top: 1.2rem; font-size: 1.02rem; }
.maint-velo .icone-eco { margin-right: .35rem; }
.hero-liens { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.bouton {
  display: inline-block; padding: .72rem 1.4rem;
  background: var(--vert); color: var(--papier);
  text-decoration: none; font-size: .95rem; border-radius: 2px;
}
.bouton:hover { background: var(--vert-clair); color: var(--papier); }
.bouton-clair { background: transparent; color: var(--vert); border: 1px solid var(--filet); }
.bouton-clair:hover { background: transparent; border-color: var(--vert); }

/* ---------- Reassurance ---------- */
.bandeau-reassurance { background: var(--creme); padding-block: 2.4rem; }
.reassurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.4rem 2rem; }
/* 6 items : sur large, on force 3 colonnes (2 lignes de 3) au lieu de laisser
   auto-fit produire 4 + 2, qui laisse une ligne orpheline (meme regle que
   dzitstrategy.fr). Pas de carrousel ici : le bandeau reassurance du theme
   artisanal n'en a jamais eu (seule la galerie Realisations en utilise un,
   composant distinct — rien a porter). */
@media (min-width: 860px) { .reassurance { grid-template-columns: repeat(3, 1fr); } }
.reassurance li { border-top: 2px solid var(--vert); padding-top: .6rem; }
.reassurance b { display: block; font-family: var(--serif); font-size: 1.02rem; }
.reassurance span { display: block; font-size: .89rem; color: var(--encre-2); margin-top: .2rem; }

/* ---------- Douleurs (FAQ) ---------- */
.douleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 1.5rem; margin-top: 2.4rem; }
.douleur { border: 1px solid var(--filet); border-radius: 2px; padding: 1.4rem 1.5rem; }
.douleur-accent { background: var(--creme); border-color: var(--terre); }
.douleur-dit { font-family: var(--serif); font-size: 1.05rem; font-style: normal; margin: 0 0 .5rem; }
.douleur-craint { font-size: .84rem; color: var(--encre-3); font-style: italic; margin-bottom: .8rem; }
.douleur-reponse { color: var(--encre-2); font-size: .96rem; }

/* ---------- Forfaits ---------- */
.forfaits { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 2rem; }
.forfait { flex: 1 1 260px; max-width: 360px; border: 1px solid var(--filet); border-radius: 2px; padding: 1.6rem 1.7rem; background: var(--papier); }
.forfait-fort { border-color: var(--vert); border-top: 3px solid var(--vert); }
.forfait h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.forfait-prix { font-family: var(--serif); font-size: 1.75rem; color: var(--vert); line-height: 1.1; margin-top: .2rem; }
.forfait-prix-note { font-size: .82rem; color: var(--encre-3); margin-top: .25rem; }
.forfait-qui { font-size: .93rem; color: var(--encre-2); margin-top: .9rem; font-style: italic; }

/* Double affichage de prix. Le second n'existe dans le HTML que si
   SAP_ACTIF vaut true dans index.php : rien a masquer en CSS. */
.prix-sap {
  display: inline-block; margin-top: .4rem; padding: .1rem .5rem;
  background: var(--vert-sap-fond); color: var(--vert-sap);
  font-family: var(--sans); font-size: .78rem; line-height: 1.6; white-space: nowrap;
}
.prix-sap b { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.sap-bandeau { margin-top: 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--vert-sap); background: var(--vert-sap-fond); }
.sap-bandeau { display: flex; align-items: center; gap: 1.4rem; }
.sap-logo { flex: none; width: 7rem; height: auto; aspect-ratio: 240 / 203; }
.sap-texte { min-width: 0; }
.sap-logo-mention { float: left; width: 5rem; height: auto; aspect-ratio: 240 / 203; margin: 0 1rem .4rem 0; }
@media (max-width: 640px) {
  .sap-bandeau { flex-direction: column; text-align: left; }
  .sap-logo { width: 6rem; }
}
.sap-bandeau h3 { font-size: 1.05rem; color: var(--vert-sap); }
.sap-bandeau p { font-size: .9rem; color: var(--encre-2); margin-top: .35rem; }
.forfait-contenu { margin-top: 1.1rem; border-top: 1px solid var(--filet); padding-top: 1rem; }
.forfait-contenu li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--encre-2); margin-bottom: .45rem; }
.forfait-contenu li::before { content: "\2013"; position: absolute; left: 0; color: var(--vert); }

/* Plafond d'intervention : promesse commerciale, doit se voir sans crier. */
.plafond { margin-top: 1.8rem; padding: 1.3rem 1.6rem; border: 1px solid var(--vert); border-left-width: 3px; background: var(--papier); }
.plafond h3 { font-size: 1.12rem; color: var(--vert); }
.plafond > p { font-size: .96rem; color: var(--encre-2); margin-top: .4rem; }
.plafond ul { margin-top: .8rem; }
.plafond li { position: relative; padding-left: 1.1rem; font-size: .88rem; color: var(--encre-3); margin-bottom: .3rem; }
.plafond li::before { content: "\2013"; position: absolute; left: 0; }


/* ---------- Listes de prix (prestations) ---------- */
.prix { margin-top: 2.2rem; border-top: 1px solid var(--filet); }
.prix-ligne { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--filet); }
.prix-ligne dt { color: var(--encre); font-weight: 400; }
.prix-detail { display: block; font-size: .85rem; color: var(--encre-3); margin-top: .15rem; max-width: 56ch; }
.prix-ligne dd { font-family: var(--serif); font-size: 1.14rem; color: var(--vert); white-space: nowrap; text-align: right; }
.prix-ligne dd .prix-sap { display: block; margin-top: .3rem; }
.prix-accent dd { color: var(--terre); }

/* ---------- Caroussel mobile (grilles de 3 cartes ou plus) ----------
   Sous 860px, les grilles a 3+ items deviennent une bande a defilement
   horizontal avec accroche (scroll-snap), swipe natif — un seul reglage pour
   les 3 grilles concernees (reassurance 5, douleurs 6, forfaits 3). PAS la FAQ (#questions, accordeon <details>,
   pas une grille) — exclue explicitement par David. Bulles + chevrons
   (position + navigation, demande explicite) : `.carrousel-nav` injectee
   par JS APRES chaque piste (fin de index.php), visible seulement ici —
   voir plus bas dans ce meme bloc media. Carte a 100% (pas d'amorce de la
   suivante) : une fois les bulles/chevrons en place, l'aperçu partiel de la
   carte suivante ne sert plus a rien — demande explicite de David. */
@media (max-width: 860px) {
  .reassurance, .douleurs, .forfaits {
    display: flex;
    flex-wrap: nowrap;
    /* .forfaits est en `flex-wrap: wrap` sur desktop
       (regle plus haut) : sans ce reset, le wrap restait actif ici et
       chaque carte (deja a `flex:0 0 100%` ci-dessous) partait sur sa
       propre ligne au lieu de rester sur une piste qui deborde — plus
       aucun scroll horizontal, bulles/chevrons injectes mais inertes.
       `.reassurance`/`.douleurs` (grid sur desktop) n'avaient pas ce
       piege, d'ou l'incoherence entre les 5 grilles. */
    justify-content: flex-start;
    /* Meme famille de piege que flex-wrap ci-dessus : .forfaits herite `justify-content: center` du desktop. Sur une piste
       qui deborde, centrer les cartes decale la position de repos
       (scrollLeft:0) vers le MILIEU du contenu au lieu du debut — la
       premiere carte se retrouve dans la zone de scroll NEGATIVE, donc
       hors d'atteinte (scrollLeft ne descend jamais sous 0) : impossible
       de naviguer vers la gauche jusqu'a elle. Verifie : sans ce reset,
       une grille a 3 cartes affichait la carte 2/3 au repos et la fleche "Precedent"
       n'avait nulle part ou aller (constate sur une ancienne grille). */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .3rem;
  }
  .reassurance::-webkit-scrollbar, .douleurs::-webkit-scrollbar,
  .forfaits::-webkit-scrollbar { display: none; }

  .reassurance > li, .douleurs > article, .forfaits > article {
    flex: 0 0 100%;
    max-width: none;
    scroll-snap-align: start;
  }
}

/* La nav est injectee dans le DOM sur toutes les tailles (pas de resize a
   suivre en JS) : cachee par defaut, ⚠️ la regle DOIT preceder le bloc media
   ci-dessous en source (meme specificite -> l'ordre tranche, et le media
   query doit gagner sous 860px, pas l'inverse). */
.carrousel-nav { display: none; }
@media (max-width: 860px) {
  .carrousel-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
}
.carrousel-fleche {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--filet); border-radius: 999px;
  color: var(--vert); cursor: pointer;
}
.carrousel-fleche svg { width: 1rem; height: 1rem; }
.carrousel-fleche:hover { border-color: var(--vert); }
/* Plus de `:disabled` : les pistes bouclent (voir index.php), les fleches
   ne s'eteignent donc jamais — regle retiree, elle ne s'appliquait plus. */
.carrousel-points { display: flex; gap: .5rem; }
.carrousel-point { width: .5rem; height: .5rem; padding: 0; border: none; border-radius: 50%; background: var(--filet); cursor: pointer; }
.carrousel-point.est-actif { background: var(--vert); }

/* ---------- Zone ---------- */
.zone { max-width: 78ch; }
.zone-velo { color: var(--encre-2); margin-top: 1rem; }
.zone-liste { font-family: var(--serif); font-size: 1.12rem; color: var(--encre); margin-top: 1.4rem; line-height: 1.7; }

/* ---------- Questions ---------- */
.questions { margin-top: 2.2rem; border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  cursor: pointer; padding-block: 1.1rem; font-family: var(--serif); font-size: 1.03rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; color: var(--vert); font-size: 1.3rem; line-height: 1; }
.question[open] summary::after { content: "\2013"; }
.question summary:hover { color: var(--vert); }
.question p { padding-bottom: 1.2rem; color: var(--encre-2); max-width: 78ch; }

/* ---------- Contact ---------- */
.coordonnees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 2rem; margin-top: 2.2rem; }
.coordonnees span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--encre-3); margin-bottom: .4rem; }
.coordonnees b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.coordonnees a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.coordonnees a:hover { border-bottom-color: var(--vert); }
.coord-brut { font-style: italic; }

/* ---------- Pied ---------- */
.pied { border-top: 1px solid var(--filet); padding-block: 2.2rem; font-size: .9rem; color: var(--encre-3); }
.pied-marque { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-marque:hover { color: var(--vert); border-bottom-color: var(--vert); }
.pied-legal { margin-top: 1.1rem; font-size: .92rem; }
.pied-legal a { color: var(--encre-3); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-legal a:hover { color: var(--vert); border-bottom-color: var(--vert); }

/* ---------- Page mentions legales ---------- */
.mentions main { padding-block: 3rem; max-width: 78ch; }
.mentions table { width: 100%; border-collapse: collapse; margin-bottom: 1.8rem; }
.mentions table td { padding: .5rem .6rem; border-bottom: 1px solid var(--filet); font-size: .95rem; }
.mentions table td:first-child { color: var(--encre-3); width: 12rem; }
.mentions h2 { font-size: 1.2rem; margin-top: 2.4rem; margin-bottom: .8rem; }