/* ============================================================
   COMPOSANTS — Fages Élagage
   Tout est bâti sur les jetons de socle.css. Aucune valeur en dur.
   ============================================================ */

/* ---------- Étiquette ----------
   Sur-titre en machine à écrire, précédé d'un trait. */
.etiquette{
  display:inline-flex;align-items:center;gap:var(--e2);
  font-family:var(--mono);font-weight:500;font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--signal);margin-bottom:var(--e3);
}
/* Le filet prend --accent-chaud-texte, pas --accent-chaud : sur le crème,
   le doré clair ne fait que 2,9:1, sous le seuil de 3:1 des éléments non
   textuels. Mesuré, pas supposé. En thème sombre les deux jetons ont la
   même valeur, le filet ne change donc pas d'aspect là où il était bon. */
.etiquette::before{content:"";width:32px;height:1px;background:var(--accent-chaud-texte);flex:0 0 32px;}
.etiquette.centre{justify-content:center;}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.02em;
  padding:14px 26px;border:0;border-radius:var(--r1);
  text-decoration:none;cursor:pointer;
  transition:transform var(--d-court), background var(--d-court), color var(--d-court), border-color var(--d-court);
}
.bouton-principal{background:var(--accent);color:var(--sur-accent);}
.bouton-principal:hover{background:var(--accent-fort);color:var(--sur-accent);transform:translateY(-2px);}
.bouton-fantome{background:transparent;color:var(--texte);border:1.5px solid var(--ligne);}
.bouton-fantome:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.bouton-clair{background:transparent;color:#F6F2E9;border:1.5px solid rgba(246,242,233,.5);}
.bouton-clair:hover{background:rgba(246,242,233,.12);border-color:#F6F2E9;color:#F6F2E9;transform:translateY(-2px);}
/* Le bouton doré : réservé au devis, et à lui seul.
   Un accent qui sert partout ne désigne plus rien. */
.bouton-chaud{background:var(--accent-chaud);color:var(--sur-accent-chaud);}
.bouton-chaud:hover{background:var(--accent-chaud-texte);color:var(--photo-titre);transform:translateY(-2px);}
.bouton[aria-disabled="true"],.bouton:disabled{opacity:.55;pointer-events:none;}

/* ---------- Lien téléphone ---------- */
.tel{
  display:inline-flex;align-items:center;gap:var(--e2);
  font-family:var(--mono);font-weight:500;font-size:1rem;
  color:var(--texte);text-decoration:none;white-space:nowrap;
  letter-spacing:-.02em;
}
.tel:hover{color:var(--accent);}
.tel svg{flex:0 0 auto;color:var(--signal);}

/* ============================================================
   EN-TÊTE
   Transparente au-dessus de la photographie, opaque au défilement.
   ============================================================ */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:120;
  padding-block:var(--e2);
  transition:background var(--d-moyen), box-shadow var(--d-moyen);
}
.entete .contenu{display:flex;align-items:center;gap:var(--e4);min-height:72px;}

.marque{display:flex;align-items:center;flex:0 0 auto;}
.marque img{height:46px;width:auto;}
.marque .sur-photo{display:block;}
.marque .sur-fond{display:none;}
.entete.pose .marque .sur-photo{display:none;}
.entete.pose .marque .sur-fond{display:block;}

.nav-principale{display:flex;align-items:center;gap:var(--e1);margin-left:auto;}
.nav-principale > a,.declencheur{
  position:relative;display:inline-flex;align-items:center;gap:var(--e1);
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.01em;
  color:rgba(246,242,233,.88);text-decoration:none;
  padding:10px 14px;border-radius:var(--r1);
  transition:color var(--d-court);
}
.nav-principale > a::after,.declencheur::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-court) var(--courbe);
}
.nav-principale > a:hover,.declencheur:hover{color:#FFFDF9;}
.nav-principale > a:hover::after,.declencheur:hover::after,
.nav-principale > a[aria-current="page"]::after,.sous-menu-parent.actif .declencheur::after{transform:scaleX(1);}
.nav-principale > a[aria-current="page"]{color:#FFFDF9;}
.entete.pose .nav-principale > a,.entete.pose .declencheur{color:var(--texte-doux);}
.entete.pose .nav-principale > a:hover,.entete.pose .declencheur:hover,
.entete.pose .nav-principale > a[aria-current="page"]{color:var(--accent);}

/* Sous-menu des prestations */
.sous-menu-parent{position:relative;display:flex;align-items:center;}
.declencheur svg{transition:transform var(--d-court);}
.sous-menu-parent:hover .declencheur svg,
.sous-menu-parent:focus-within .declencheur svg{transform:rotate(180deg);}
.sous-menu{
  position:absolute;top:100%;left:0;min-width:264px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r2);
  box-shadow:var(--ombre-2);padding:var(--e2);margin-top:var(--e2);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--d-court), transform var(--d-court), visibility var(--d-court);
  list-style:none;z-index:130;
}
.sous-menu-parent:hover .sous-menu,
.sous-menu-parent:focus-within .sous-menu{opacity:1;visibility:visible;transform:none;}
.sous-menu a{
  display:block;padding:11px 14px;border-radius:var(--r1);
  font-size:.9375rem;font-weight:500;color:var(--texte-doux);text-decoration:none;
  transition:background var(--d-court), color var(--d-court);
}
.sous-menu a:hover,.sous-menu a[aria-current="page"]{background:var(--fond-2);color:var(--accent);}

.actions-entete{display:flex;align-items:center;gap:var(--e2);flex:0 0 auto;}
/* Le devis en haut à droite, comme sur la version du 24 juillet.
   Il ne disparaît jamais : c'est la seule action qui rapporte. */
.actions-entete .bouton-chaud{padding:11px 18px;font-size:.9375rem;}
@media (max-width:1023px){ .actions-entete .bouton-chaud{display:none;} }
.actions-entete .tel{color:rgba(246,242,233,.92);}
.actions-entete .tel svg{color:rgba(246,242,233,.7);}
.entete.pose .actions-entete .tel{color:var(--texte);}
.entete.pose .actions-entete .tel svg{color:var(--signal);}

/* Deux numéros en en-tête depuis le 11 août 2026, le portable en premier :
   c'est celui qu'on décroche sur le chantier. Ils sont empilés, pas côte à
   côte : à l'horizontale ils poussaient « Nos ventes » sur deux lignes.
   Sous 1024px les deux disparaissent avec .nav-principale, et le menu
   mobile les reprend tous les deux, dans le même ordre. */
.tels-entete{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.tels-entete .tel{font-size:.9375rem;line-height:1.35;}
@media (max-width:1149px){ .tels-entete .tel-fixe{display:none;} }

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  background:transparent;border:1.5px solid rgba(246,242,233,.32);
  border-radius:var(--r1);color:rgba(246,242,233,.92);cursor:pointer;
  transition:border-color var(--d-court), background var(--d-court), color var(--d-court);
}
.burger:hover{border-color:#F6F2E9;background:rgba(246,242,233,.12);}
.entete.pose .burger{border-color:var(--ligne);color:var(--texte);}
.entete.pose .burger:hover{border-color:var(--accent);color:var(--accent);background:transparent;}
.burger{display:none;}

.entete.pose{
  background:var(--fond);
  box-shadow:0 1px 0 var(--ligne), 0 10px 30px rgba(21,41,28,.07);
}

/* Menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:200;
  background:var(--fond);padding:calc(var(--e7) + var(--e2)) var(--gouttiere) var(--e5);
  overflow-y:auto;
  display:none;
}
.menu-mobile[data-ouvert="oui"]{display:block;}
.menu-mobile a{
  display:block;padding:var(--e3) 0;
  border-bottom:1px solid var(--ligne-douce);
  font-family:var(--serif);font-size:1.625rem;color:var(--texte);text-decoration:none;
}
.menu-mobile a:hover{color:var(--accent);}
.menu-mobile .groupe{
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--signal);
  padding-top:var(--e4);padding-bottom:var(--e1);
}
.menu-mobile .secondaire{font-size:1.25rem;padding-left:var(--e3);color:var(--texte-doux);}
.fermer-menu{
  position:absolute;top:var(--e4);right:var(--gouttiere);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--ligne);border-radius:var(--r1);
  color:var(--texte);cursor:pointer;
}
.menu-mobile .rappel{margin-top:var(--e5);display:flex;flex-direction:column;gap:var(--e3);}

/* ============================================================
   PREMIER ÉCRAN
   ============================================================ */
.hero{position:relative;display:flex;align-items:center;min-height:100svh;overflow:hidden;background:var(--photo-fond);}
.hero.court{min-height:62svh;align-items:flex-end;}
.hero.tres-court{min-height:48svh;align-items:flex-end;}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform-origin:center;}
.hero:not(.court):not(.tres-court) .hero-image{
  animation:derive 32s ease-in-out infinite alternate;
}
/* La vidéo de la version du 24 juillet, remise en place.
   Elle n'est PAS dans le HTML : site.js ne lui donne sa source que sur
   grand écran, pointeur fin, mouvement non réduit et connexion non
   économe. Un visiteur au téléphone en 4G ne télécharge jamais les
   4 Mo, il garde la photographie, qui est la première image du film. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity 1.2s var(--courbe);
}
.hero-video.jouee{opacity:1;}

.hero-voile{position:absolute;inset:0;z-index:1;background:var(--voile);}
.hero-voile-lateral{position:absolute;inset:0;z-index:1;background:var(--voile-lateral);}
.hero-corps{position:relative;z-index:3;width:100%;color:#F6F2E9;padding-block:calc(var(--e8) + var(--e4)) var(--e7);}
.hero.court .hero-corps,.hero.tres-court .hero-corps{padding-block:calc(var(--e8) + var(--e3)) var(--e5);}
/* Sur la photographie, l'accent passe du vert clair au doré chaud :
   c'est ce que Tom préférait dans la version du 24 juillet. */
.hero-corps .etiquette{color:var(--photo-etiquette);}
.hero-corps .etiquette::before{background:var(--photo-filet);}
.hero-corps .geant,.hero-corps .titre{color:var(--photo-titre);text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero-corps .italique{color:var(--photo-accent);}
.hero-corps .chapeau{color:rgba(246,242,233,.92);text-shadow:0 1px 14px rgba(0,0,0,.4);margin-bottom:var(--e5);max-width:52ch;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4);}
.hero-actions .tel{color:#F6F2E9;}
.hero-actions .tel svg{color:var(--photo-accent);}

/* Cartouche flottant « depuis 1963 » */
.cartouche{
  position:absolute;right:var(--e5);bottom:var(--e6);z-index:3;
  display:none;
  background:rgba(246,242,233,.94);color:#15291C;
  padding:var(--e3) var(--e4);border-radius:var(--r1);
  box-shadow:var(--ombre-2);
  animation:flottement 7s ease-in-out infinite;
}
.cartouche b{display:block;font-family:var(--mono);font-size:1.75rem;line-height:1;letter-spacing:-.04em;}
.cartouche span{font-family:var(--mono);font-size:var(--t-etiquette);text-transform:uppercase;letter-spacing:.14em;color:#3D6B2B;}

/* Bandeau de preuves, juste sous le premier écran.
   Volontairement hors du hero : il ne se bat pas avec la photo,
   il se lit, et il tient à toutes les largeurs sans exception. */
.preuves{background:var(--fond-2);border-bottom:1px solid var(--ligne);}
.preuves ul{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);padding-block:var(--e3);}
.preuves li{
  display:inline-flex;align-items:center;gap:var(--e2);list-style:none;
  font-family:var(--mono);font-size:var(--t-petit);font-weight:400;
  color:var(--texte-doux);letter-spacing:-.01em;
}
.preuves li svg{color:var(--signal);flex:0 0 auto;}

/* ============================================================
   BLOCS DE CONTENU
   ============================================================ */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e6);align-items:center;}
.duo.inversee > .media{order:-1;}
.media{position:relative;border-radius:var(--r2);overflow:hidden;box-shadow:var(--ombre-2);}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--courbe);}
.media:hover img{transform:scale(1.05);}

.signature{
  font-family:var(--serif);font-style:italic;font-size:1.375rem;
  color:var(--signal);margin-top:var(--e3);
}

/* Relevé de faits — le composant signature du site.
   Les étiquettes n'ont pas toutes la même longueur : la grille
   interne garantit que les chiffres restent alignés sur la même
   ligne de base, quel que soit le nombre de lignes de l'étiquette. */
.releve{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:var(--e5);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
}
.releve > div{
  display:grid;grid-template-rows:auto 1fr;align-items:start;
  padding:var(--e4) var(--e3);border-right:1px solid var(--ligne-douce);
}
.releve > div:last-child{border-right:0;}
.releve dt{
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--texte-faible);
  margin-bottom:var(--e2);
  min-height:calc(2 * 1.4em);
}
.releve dd{
  margin:0;font-family:var(--mono);font-size:1.75rem;line-height:1.1;
  letter-spacing:-.04em;color:var(--texte);font-variant-numeric:tabular-nums;
}
.releve dd .unite{color:var(--signal);}

/* Cartes de prestation, photographiques */
.grille-prestations{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);margin-top:var(--e5);}
/* Cinq prestations, depuis l'ajout du traitement du palmier.
   Grille de 6 colonnes, chaque carte en occupe 2 : trois par rangée.
   La quatrième démarre en colonne 2, ce qui centre les deux dernières.
   Dans une grille de 4, la cinquième carte resterait orpheline en bout
   de deuxième rangée, et ça se voit immédiatement. */
.grille-prestations.cinq{grid-template-columns:repeat(6,1fr);}
.grille-prestations.cinq > *{grid-column:span 2;}
.grille-prestations.cinq > *:nth-child(4){grid-column:2 / span 2;}
/* Six prestations depuis l'ajout de l'échenillage, le 11 août 2026.
   Deux rangées de trois, pleines : plus besoin de recentrer une carte
   orpheline comme le faisait la règle du dessus. */
.grille-prestations.six{grid-template-columns:repeat(3,1fr);}
.carte-presta{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r2);background:#0B160F;box-shadow:var(--ombre-1);
  text-decoration:none;
  transition:transform var(--d-moyen), box-shadow var(--d-moyen);
}
.carte-presta:hover{transform:translateY(-4px);box-shadow:var(--ombre-2);}
.carte-presta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--courbe);}
.carte-presta:hover img{transform:scale(1.06);}
/* Le voile de carte est fort à dessein : le texte s'y pose sur des
   photographies parfois très claires (feuillage en plein soleil,
   allée de gravier). Un dégradé léger passe l'inspection sur une
   image sombre et devient illisible sur la suivante. */
.carte-presta .voile{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,22,15,.15) 0%,
    rgba(11,22,15,.34) 34%,
    rgba(11,22,15,.78) 62%,
    rgba(11,22,15,.94) 100%);
}
.carte-presta .texte{position:absolute;inset:auto 0 0 0;padding:var(--e4);color:#F6F2E9;}
.carte-presta .texte h3{font-family:var(--serif);font-size:1.5rem;line-height:1.15;margin-bottom:var(--e1);}
.carte-presta .texte p{font-size:var(--t-petit);color:rgba(246,242,233,.86);margin-bottom:var(--e2);}
/* Le bouton « Découvrir » en pastille, avec sa flèche dans un rond
   doré. La flèche est en biais au repos et se redresse au survol :
   c'est le détail qui donne l'impression que la carte répond. */
.carte-presta .fleche{
  display:inline-flex;align-items:center;gap:var(--e3);
  margin-top:var(--e3);padding:6px 6px 6px var(--e3);
  background:rgba(246,242,233,.14);
  border:1px solid rgba(246,242,233,.22);
  border-radius:var(--r3);
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--photo-titre);
  transition:background var(--d-moyen), border-color var(--d-moyen);
}
.carte-presta .rond{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;border-radius:var(--r3);
  background:var(--accent-chaud);color:var(--sur-accent-chaud);
  transition:background var(--d-moyen);
}
.carte-presta .rond svg{
  transform:rotate(-45deg);
  transition:transform var(--d-moyen) var(--courbe);
}
.carte-presta:hover .fleche{background:rgba(246,242,233,.22);border-color:rgba(246,242,233,.4);}
.carte-presta:hover .rond{background:var(--accent-chaud-vif);}
.carte-presta:hover .rond svg{transform:none;}

/* Le grand chiffre fantôme, derrière la photographie. */
.carte-presta .fantome{
  position:absolute;top:-10px;right:var(--e3);z-index:1;
  font-family:var(--mono);font-size:4.5rem;line-height:1;letter-spacing:-.06em;
  color:var(--photo-titre);opacity:.12;pointer-events:none;
  transition:opacity var(--d-moyen), color var(--d-moyen);
}
.carte-presta:hover .fantome{opacity:.3;color:var(--accent-chaud-vif);}
@media (prefers-reduced-motion: reduce){
  .carte-presta:hover{transform:none;}
  .carte-presta:hover img{transform:none;}
}

/* Cartes simples */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);margin-top:var(--e5);}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);margin-top:var(--e5);}
.carte{
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:var(--e4);box-shadow:var(--ombre-1);
}
.carte h3{font-family:var(--serif);font-size:1.375rem;line-height:1.2;margin-bottom:var(--e2);}
.carte p{font-size:1rem;color:var(--texte-doux);margin:0;}
.carte .pictogramme{
  width:52px;height:52px;border-radius:var(--r3);margin-bottom:var(--e3);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
}

/* Étapes numérotées */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);margin-top:var(--e5);counter-reset:etape;}
.etape{background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);padding:var(--e4);box-shadow:var(--ombre-1);}
.etape .numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r3);margin-bottom:var(--e3);
  background:var(--accent);color:var(--sur-accent);
  font-family:var(--mono);font-size:1.125rem;font-weight:500;
}
.etape h3{font-family:var(--serif);font-size:1.1875rem;margin-bottom:var(--e2);}
.etape p{font-size:1rem;color:var(--texte-doux);margin:0;}

/* Liste de matériel */
/* Cartes de matériel, refaites le 12 août 2026.

   Le défaut : la grille était figée à 3 colonnes. Dans la colonne étroite
   de « L'entreprise », chaque carte tombait sous 200 px, et le titre en
   chasse fixe se coupait mot par mot, « Tronçonneuses & débroussailleuses
   Stihl » débordant de son cadre. Trois corrections, dans cet ordre
   d'importance : des colonnes qui ne descendent jamais sous 215 px, un
   `min-width:0` sur l'enfant de flex sans lequel un mot long refuse de se
   plier, et des rangées de hauteur identique.

   Pas de direction futuriste ici : elle se battrait avec une maison de
   1963, avec le bois et le doré. La sophistication passe par le filet
   d'accent qui se remplit au survol, pas par du néon. */
.materiel{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  grid-auto-rows:1fr;                 /* toutes les cartes de la même hauteur */
  gap:var(--e3);margin-top:var(--e4);
}
.materiel.quatre{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
.materiel li{
  position:relative;overflow:hidden;
  display:flex;gap:var(--e3);align-items:flex-start;list-style:none;
  background:var(--fond-carte);
  border:1px solid var(--ligne);border-radius:var(--r2);
  padding:var(--e4) var(--e3) var(--e4) var(--e4);
  box-shadow:var(--ombre-1);
  transition:transform var(--d-court) var(--courbe),
             box-shadow var(--d-court) var(--courbe),
             border-color var(--d-court) var(--courbe);
}
/* Le filet d'accent, à gauche, qui se remplit de haut en bas au survol. */
.materiel li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--accent-chaud), var(--accent));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--d-moyen) var(--courbe);
}
.materiel li:hover{
  transform:translateY(-3px);
  box-shadow:var(--ombre-2);
  border-color:rgba(198,150,80,.5);
}
.materiel li:hover::before{transform:scaleY(1);}
.materiel svg{
  color:var(--signal);flex:0 0 auto;width:20px;height:20px;margin-top:1px;
  transition:transform var(--d-court) var(--courbe);
}
.materiel li:hover svg{transform:scale(1.14);}
/* Sans ceci, un mot long ne se plie pas et sort de la carte. */
.materiel li > div{min-width:0;}
.materiel b{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:.9375rem;line-height:1.35;letter-spacing:-.03em;
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;
  margin-bottom:5px;
}
.materiel span{
  display:block;font-size:var(--t-petit);color:var(--texte-doux);line-height:1.5;
  overflow-wrap:break-word;
}
@media (prefers-reduced-motion: reduce){
  .materiel li:hover{transform:none;}
  .materiel li:hover svg{transform:none;}
  .materiel li::before{transition:none;}
}

/* Liste à coches */
.coches{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e3);}
.coches li{display:flex;gap:var(--e3);align-items:flex-start;list-style:none;font-size:1.0625rem;}
.coches .coche{
  flex:0 0 24px;width:24px;height:24px;border-radius:var(--r3);margin-top:3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--sur-accent);
}

/* ---------- Bloc réglementaire ----------
   Le droit est un argument de vente, pas une note de bas de page.
   Réservé aux textes de loi, toujours daté. */
.reglementaire{
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-left:3px solid var(--reglementaire);
  border-radius:var(--r1);
  padding:var(--e4) var(--e5);
  margin-top:var(--e4);
}
.reglementaire .source{
  display:block;font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--reglementaire);
  margin-bottom:var(--e2);
}
.reglementaire h3,.reglementaire .titre-encadre{font-family:var(--serif);font-size:1.375rem;margin-bottom:var(--e2);}
.reglementaire p:last-child{margin-bottom:0;}
.reglementaire .chiffres{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin-top:var(--e3);
  padding-top:var(--e3);border-top:1px solid var(--ligne);
}
.reglementaire .chiffres li{list-style:none;font-family:var(--mono);font-size:var(--t-petit);color:var(--texte-doux);}
.reglementaire .chiffres b{color:var(--reglementaire);font-weight:500;}

/* ---------- Mosaïque ----------
   Formats mixtes voulus : une grille régulière ressemble à un
   catalogue, une mosaïque à un magazine. */
/* Passée des colonnes CSS à une grille le 12 août 2026, et c'est une
   correction de fond, pas un choix de goût.

   `columns:3` laisse le moteur répartir les photos lui-même pour équilibrer
   les hauteurs. Or les trois moteurs n'appliquent pas le même algorithme :
   au test de parité, Chrome et Safari plaçaient les sept photos dans un
   ordre différent, 10 % de l'écran d'écart. Le même mécanisme avait déjà
   produit un défaut visible chez Fages le 11 août, des photos qui
   clignotaient au défilement sur WebKit.

   La grille ci-dessous ne laisse rien décider au moteur : chaque photo a sa
   colonne et sa hauteur, écrites. Le rendu est identique partout, par
   construction, et le rythme de magazine est conservé par des hauteurs
   volontairement inégales. */
.mosaique{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:118px;gap:var(--e3);margin-top:var(--e5);
}
@media (max-width:900px){ .mosaique{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .mosaique{grid-template-columns:1fr;grid-auto-rows:150px;} }
.mosaique .reveal,.mosaique .reveal.vu{transform:none;}
.mosaique figure{
  margin:0;position:relative;grid-row:span 2;
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--ombre-1);
}
.mosaique figure:nth-child(3n+1){grid-row:span 3;}
.mosaique img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--courbe);}
@media (hover: hover) and (pointer: fine){
  .mosaique figure:hover img{transform:scale(1.06);}
}
/* Les légendes portent les communes d'intervention : Montpellier, Murles,
   Grabels, Saint-Clément-de-Rivière, Lattes, Saint-Gély-du-Fesc, Pic
   Saint-Loup. C'est une information, et c'est même la preuve de couverture
   que le client voulait montrer. Ce n'est donc pas une décoration.

   Le défaut corrigé ici, relevé le 31 juillet 2026 : elles étaient en
   opacity 0 et ne se révélaient qu'au survol. Or aucun élément de la
   <figure> n'est focusable, donc le repli :focus-within ne pouvait jamais
   se déclencher au doigt. Sur téléphone, ces communes étaient invisibles
   pour toujours, alors que le téléphone est l'écran majoritaire ici.

   La règle est inversée : la légende est visible par défaut, et elle ne
   se cache que là où un vrai survol existe. */
.mosaique figcaption{
  position:absolute;inset:auto 0 0 0;padding:var(--e6) var(--e3) var(--e3);
  font-family:var(--mono);font-size:var(--t-petit);color:#F6F2E9;
  background:linear-gradient(to top, rgba(11,22,15,.86), transparent);
  opacity:1;transform:none;
  transition:opacity var(--d-moyen), transform var(--d-moyen);
}
@media (hover: hover) and (pointer: fine){
  .mosaique figcaption{opacity:0;transform:translateY(8px);}
  .mosaique figure:hover figcaption,
  .mosaique figure:focus-within figcaption{opacity:1;transform:none;}
}

/* ---------- Ruban des communes ----------
   Bannière verte en mouvement continu. C'est la seule zone du site
   où la couleur de marque occupe toute la largeur : elle sépare le
   premier écran du reste et annonce la zone couverte d'un coup d'œil. */
.ruban{
  overflow:hidden;padding-block:var(--e3);
  background:var(--accent);color:var(--sur-accent);
  border-block:1px solid var(--accent-fort);
}
.ruban-piste{display:flex;width:max-content;animation:ruban 55s linear infinite;}
.ruban:hover .ruban-piste,.ruban:focus-within .ruban-piste{animation-play-state:paused;}
.ruban-piste span{
  display:inline-flex;align-items:center;gap:var(--e4);padding-inline:var(--e4);
  font-family:var(--mono);font-size:var(--t-petit);
  text-transform:uppercase;letter-spacing:.14em;color:var(--sur-accent);
  white-space:nowrap;
}
.ruban-piste span::after{content:"·";color:var(--accent-chaud-vif);}
@media (prefers-reduced-motion: reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto;}
  .ruban-piste > div:nth-child(2){display:none;}
}

/* ---------- Avis ---------- */
.avis{
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:var(--e4);box-shadow:var(--ombre-1);
  display:flex;flex-direction:column;gap:var(--e3);
}
.avis blockquote{margin:0;font-family:var(--serif);font-size:1.1875rem;line-height:1.55;font-style:italic;}
.avis .signataire{display:flex;align-items:center;gap:var(--e3);margin-top:auto;margin-bottom:0;}
.avis .initiale{
  flex:0 0 44px;width:44px;height:44px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--sur-accent);
  font-family:var(--serif);font-size:1.25rem;
}
.avis .nom{font-weight:700;font-size:1rem;line-height:1.3;}
.avis .source{font-family:var(--mono);font-size:var(--t-etiquette);color:var(--texte-faible);letter-spacing:.06em;}
.etoiles{color:var(--etoile);letter-spacing:2px;font-size:1.0625rem;}

/* ---------- Avis en déroulé ----------
   Reprise de la version du 24 juillet : la note en grand à gauche,
   les avis qui défilent à droite.

   Règle de construction : SANS JavaScript, les trois avis sont
   simplement empilés et tous lisibles. Le mode carrousel n'existe
   qu'une fois la classe .pret posée par site.js. Un carrousel qui
   cache deux témoignages sur trois quand le script ne charge pas,
   c'est deux tiers de la preuve sociale perdus en silence. */
.avis-vitrine{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--e6);align-items:center;margin-top:var(--e5);
}
.avis-note{text-align:center;}
.avis-note .valeur{
  display:block;font-family:var(--mono);font-size:clamp(3.5rem,7vw,5.5rem);
  line-height:.9;letter-spacing:-.06em;color:var(--texte);font-variant-numeric:tabular-nums;
}
.avis-note .etoiles{display:block;font-size:1.5rem;letter-spacing:3px;margin-top:var(--e2);}
.avis-note .detail{
  display:block;font-family:var(--mono);font-size:var(--t-petit);
  color:var(--texte-doux);margin-top:var(--e3);line-height:1.5;
}
.avis-note .lien-google{
  display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e4);
  font-family:var(--sans);font-size:var(--t-petit);font-weight:700;
  color:var(--texte);text-decoration:none;
  background:rgba(246,242,233,.08);border:1px solid var(--ligne);
  padding:10px 16px;border-radius:var(--r1);
  transition:background var(--d-court), border-color var(--d-court);
}
.avis-note .lien-google:hover{background:rgba(246,242,233,.16);border-color:var(--accent-chaud);color:var(--texte);}
.avis-note .lien-google svg{color:var(--accent-chaud);flex:0 0 auto;}

.carrousel-piste{display:flex;flex-direction:column;gap:var(--e4);}
.carrousel-avis > .etoiles{display:block;margin:0 0 var(--e3);}
.carrousel-avis blockquote{
  margin:0 0 var(--e4);font-family:var(--serif);
  font-size:clamp(1.25rem,2.3vw,1.6875rem);line-height:1.42;
  font-style:italic;color:var(--texte);
}
.carrousel-avis .signataire{display:flex;align-items:center;gap:var(--e3);margin:0;}
.carrousel-avis .initiale{
  flex:0 0 46px;width:46px;height:46px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-chaud);color:var(--sur-accent-chaud);
  font-family:var(--serif);font-size:1.1875rem;
}
.carrousel-avis .nom{font-weight:700;font-size:.9375rem;line-height:1.3;}
.carrousel-avis .source{
  font-family:var(--mono);font-size:var(--t-etiquette);
  color:var(--texte-faible);letter-spacing:.06em;
}

.carrousel-commandes{display:none;align-items:center;gap:var(--e3);margin-top:var(--e5);}
.carrousel.pret .carrousel-commandes{display:flex;}
.carrousel-commandes button{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r3);
  border:1px solid var(--ligne);background:transparent;color:var(--texte);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--d-court), border-color var(--d-court);
}
.carrousel-commandes button:hover{background:rgba(246,242,233,.12);border-color:var(--accent-chaud);}
.carrousel-points{display:flex;gap:var(--e2);margin-left:var(--e1);}
.carrousel-points button{
  width:8px;height:8px;flex:0 0 auto;padding:0;border:0;border-radius:var(--r3);
  background:var(--ligne);cursor:pointer;
  transition:background var(--d-court), width var(--d-court);
}
.carrousel-points button[aria-current="true"]{background:var(--accent-chaud);width:22px;border-radius:5px;}

/* Corrigé le 12 août 2026, défaut signalé par Tom.

   Avant : une seule fiche était dans le flux (`display:none` sur les
   autres), donc la hauteur du bloc suivait la longueur de l'avis affiché.
   Les trois avis font 308, 156 et 96 caractères : toutes les 5,5 secondes
   le cadre changeait de hauteur et poussait la galerie de photographies
   plus bas. Tom voyait « les photos bouger », et il avait raison, sauf
   que ça ne venait pas des photos.

   Après : les trois fiches occupent la MÊME cellule de grille, donc elles
   restent toutes dans le flux et la hauteur du bloc est celle du plus long
   avis, une fois pour toutes. On ne masque plus en `display`, qui retire
   du flux, mais en `visibility`, qui garde la place et sort quand même
   l'élément du clavier et des lecteurs d'écran. */
.carrousel.pret .carrousel-piste{display:grid;}
.carrousel.pret .carrousel-avis{
  grid-area:1 / 1;
  visibility:hidden;opacity:0;pointer-events:none;
}
/* L'animation ne joue QUE sur l'opacité. Une animation qui déplace
   (translateY) place le bloc sur une couche composée le temps du
   mouvement : le texte y est re-tramé et paraît flou, toutes les
   5,5 secondes, à chaque changement d'avis. Cause identifiée au
   navigateur le 30 juillet. Le fondu seul ne compose rien. */
.carrousel.pret .carrousel-avis.on{
  visibility:visible;opacity:1;pointer-events:auto;
  animation:entre-droite .42s var(--courbe);
}
.carrousel.pret .carrousel-avis.on.depuis-gauche{animation-name:entre-gauche;}
/* Le glissement est court et se termine à transform:none : le texte
   n'est sur une couche composée que pendant 0,42 s, ce qui ne se lit
   pas comme du flou. C'est un déplacement d'une demi-seconde en boucle
   qui posait problème, pas le principe du mouvement. */
@keyframes entre-droite{from{opacity:0;transform:translate3d(28px,0,0);}to{opacity:1;transform:none;}}
@keyframes entre-gauche{from{opacity:0;transform:translate3d(-28px,0,0);}to{opacity:1;transform:none;}}

@media (max-width:899px){
  .avis-vitrine{grid-template-columns:1fr;gap:var(--e5);}
  .avis-note{text-align:left;}
}

.entete-section{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:var(--e4) var(--e6);
}
.entete-section > :first-child{flex:1 1 34ch;}
.entete-section .chapeau{margin-bottom:0;}

.note-globale{
  flex:0 0 auto;text-align:center;
  padding:var(--e3) var(--e5);
  border-left:1px solid var(--ligne);
}
.note-globale > *{display:block;}
.note-globale .valeur{
  font-family:var(--mono);font-size:3.75rem;line-height:.95;letter-spacing:-.06em;
  color:var(--texte);font-variant-numeric:tabular-nums;
}
.note-globale .etoiles{margin-top:var(--e2);}
.note-globale .detail{font-family:var(--mono);font-size:var(--t-petit);color:var(--texte-doux);margin-top:var(--e2);line-height:1.5;}
@media (max-width:639px){ .note-globale{border-left:0;padding-inline:0;text-align:left;} }

/* ---------- Questions fréquentes ---------- */
.faq{margin-top:var(--e5);border-top:1px solid var(--ligne);}
.faq details{border-bottom:1px solid var(--ligne);}
.faq summary{
  position:relative;cursor:pointer;list-style:none;
  padding:var(--e4) var(--e6) var(--e4) 0;
  font-family:var(--serif);font-size:1.25rem;line-height:1.35;color:var(--texte);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;top:50%;background:var(--signal);
}
.faq summary::after{right:var(--e3);width:14px;height:2px;margin-top:-1px;}
.faq summary::before{
  right:calc(var(--e3) + 6px);width:2px;height:14px;margin-top:-7px;
  transition:transform var(--d-court) var(--courbe);
}
.faq details[open] summary::before{transform:scaleY(0);}
.faq details > div{padding-bottom:var(--e4);max-width:var(--mesure);}
.faq details > div > p:last-child{margin-bottom:0;}

/* ---------- Bandeau d'appel à l'action ---------- */
.bandeau-cta{
  position:relative;overflow:hidden;border-radius:var(--r2);
  padding:var(--e7) var(--e5);text-align:center;color:#F6F2E9;
  box-shadow:var(--ombre-3);
}
.bandeau-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.bandeau-cta .voile{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(21,41,28,.76), rgba(11,22,15,.9));}
.bandeau-cta > div{position:relative;z-index:2;}
.bandeau-cta h2{font-family:var(--serif);font-size:var(--t-titre);line-height:1.1;margin:0 auto var(--e3);max-width:20ch;color:#FFFDF9;}
.bandeau-cta p{color:rgba(246,242,233,.9);max-width:56ch;margin:0 auto var(--e4);}
.bandeau-cta .actions{display:flex;flex-wrap:wrap;gap:var(--e3);justify-content:center;align-items:center;}
.bandeau-cta .tel{color:#F6F2E9;}
.bandeau-cta .tel svg{color:#D9E8C4;}

/* ---------- Formulaire ---------- */
.formulaire{
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r2);
  padding:var(--e5);box-shadow:var(--ombre-2);
}
.formulaire h2{font-family:var(--serif);font-size:1.75rem;margin-bottom:var(--e1);}
.formulaire .intro{font-size:1rem;color:var(--texte-doux);margin-bottom:var(--e4);}
.champ{margin-bottom:var(--e3);}
.champ label{
  display:block;margin-bottom:var(--e2);
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--texte-doux);
}
.champ .obligatoire{color:var(--reglementaire);}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 15px;
  font-family:var(--sans);font-size:1rem;
  background:var(--fond);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--r1);
  transition:border-color var(--d-court), box-shadow var(--d-court);
}
.champ textarea{min-height:120px;resize:vertical;}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:var(--reglementaire);}
.champ .aide{display:block;margin-top:var(--e1);font-size:var(--t-petit);color:var(--texte-faible);text-transform:none;letter-spacing:0;font-family:var(--sans);}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);}
.groupe-conditionnel{display:none;}
.groupe-conditionnel[data-actif="oui"]{display:block;}

.depot{
  display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  padding:var(--e4);text-align:center;cursor:pointer;
  border:1.5px dashed var(--ligne);border-radius:var(--r1);
  font-size:var(--t-petit);color:var(--texte-faible);
  font-family:var(--sans);text-transform:none;letter-spacing:0;
  transition:border-color var(--d-court), color var(--d-court);
}
.depot:hover{border-color:var(--accent);color:var(--accent);}
.depot input{position:absolute;width:1px;height:1px;opacity:0;}

.consentement{display:flex;gap:var(--e3);align-items:flex-start;margin-bottom:var(--e4);}
.consentement input{flex:0 0 20px;width:20px;height:20px;margin-top:3px;accent-color:var(--accent);}
.consentement label{
  font-family:var(--sans);font-size:var(--t-petit);text-transform:none;
  letter-spacing:0;color:var(--texte-doux);margin:0;line-height:1.55;
}
.formulaire .bouton-principal{width:100%;}
.message-formulaire{
  margin-top:var(--e3);font-size:var(--t-petit);text-align:center;
  color:var(--texte-faible);min-height:1.5em;
}
.message-formulaire[data-etat="erreur"]{color:var(--reglementaire);font-weight:700;}
.message-formulaire[data-etat="succes"]{color:var(--signal);font-weight:700;}

/* Fiches de contact */
.fiches{display:flex;flex-direction:column;gap:var(--e3);}
.fiche{
  display:flex;align-items:center;gap:var(--e3);
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:var(--e3) var(--e4);box-shadow:var(--ombre-1);
}
.fiche .pictogramme{
  flex:0 0 44px;width:44px;height:44px;border-radius:var(--r3);margin:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
}
.fiche .cle{
  margin:0;
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--texte-faible);
}
.fiche .valeur{margin:0;font-family:var(--mono);font-size:1.0625rem;letter-spacing:-.02em;color:var(--texte);}
.fiche .valeur a{color:var(--texte);text-decoration:none;}
.fiche .valeur a:hover{color:var(--accent);text-decoration:underline;}

/* Indicateur d'ouverture, en temps réel */
.indicateur{display:inline-flex;align-items:center;gap:var(--e2);font-family:var(--mono);font-size:var(--t-petit);}
.indicateur .etat{color:inherit;}
.indicateur .point{
  width:9px;height:9px;border-radius:var(--r3);flex:0 0 9px;
  background:var(--texte-faible);
  animation:pulsation 3.2s ease-in-out infinite;
}
.indicateur[data-ouvert="oui"] .point{background:var(--signal);}
.indicateur[data-ouvert="non"] .point{background:var(--reglementaire);}

/* Marqueur des informations juridiques non confirmées.
   Volontairement visible : une mention légale fausse publiée par
   inadvertance coûte plus cher qu'un marqueur laid. */
mark.a-confirmer{
  background:color-mix(in srgb, var(--reglementaire) 16%, transparent);
  color:var(--reglementaire);
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  letter-spacing:.08em;padding:2px 8px;border-radius:var(--r1);
}

/* Pastilles de communes */
.pastilles{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3);}
.pastilles li{
  list-style:none;padding:7px 14px;border-radius:var(--r3);
  background:var(--fond-2);border:1px solid var(--ligne);
  font-family:var(--mono);font-size:var(--t-petit);color:var(--texte-doux);
}
.pastilles li.siege{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  color:var(--accent);
}

/* Carte de zone */
.carte-zone{border:1px solid var(--ligne);border-radius:var(--r1);overflow:hidden;box-shadow:var(--ombre-1);background:var(--fond-2);}
.carte-zone svg{width:100%;height:auto;}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{background:var(--fond-2);border-top:1px solid var(--ligne);padding-block:var(--e6) var(--e4);}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--e5);}
.pied img{height:56px;width:auto;}
.pied .a-propos{margin-top:var(--e3);font-size:1rem;color:var(--texte-doux);max-width:36ch;}
.pied h2{
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--signal);margin-bottom:var(--e3);
}
.pied ul{list-style:none;}
.pied li{margin-bottom:var(--e2);}
.pied a{color:var(--texte-doux);text-decoration:none;font-size:1rem;}
.pied a:hover{color:var(--accent);}
.pied .coordonnee{font-family:var(--mono);font-size:var(--t-petit);color:var(--texte-doux);letter-spacing:-.01em;}
.pied-bas{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e3);
  margin-top:var(--e6);padding-top:var(--e4);border-top:1px solid var(--ligne);
  font-family:var(--mono);font-size:var(--t-etiquette);color:var(--texte-faible);letter-spacing:.02em;
}
.pied-bas ul{display:flex;flex-wrap:wrap;gap:var(--e3);}
.pied-bas a{font-family:var(--mono);font-size:var(--t-etiquette);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1100px){
  :root{--gouttiere:40px;}
  .cartouche{display:block;}
}

@media (max-width:1023px){
  .nav-principale,.actions-entete .tel{display:none;}
  .burger{display:inline-flex;}
  .duo,.duo.inversee{grid-template-columns:1fr;gap:var(--e5);}
  .duo.inversee > .media{order:0;}
  .grille-prestations{grid-template-columns:repeat(2,1fr);}
  .grille-prestations.cinq,.grille-prestations.six{grid-template-columns:repeat(2,1fr);}
  .grille-prestations.cinq > *,.grille-prestations.cinq > *:nth-child(4){grid-column:auto;}
  .grille-3,.materiel,.materiel.quatre{grid-template-columns:1fr;}
  .etapes{grid-template-columns:1fr 1fr;}
  .releve{grid-template-columns:1fr 1fr;}
  .releve > div:nth-child(2){border-right:0;}
  .releve > div:nth-child(1),.releve > div:nth-child(2){border-bottom:1px solid var(--ligne-douce);}
  .mosaique{columns:2;}
  .pied-grille{grid-template-columns:1fr 1fr;}
}

@media (max-width:639px){
  .bande{padding-block:var(--e6);}
  .bande.serree{padding-block:var(--e5);}
  .grille-prestations,.grille-2,.etapes{grid-template-columns:1fr;}
  .grille-prestations.cinq,.grille-prestations.six{grid-template-columns:1fr;}
  .mosaique{columns:1;}
  .duo-champs{grid-template-columns:1fr;}
  .pied-grille{grid-template-columns:1fr;}
  .bandeau-cta{padding:var(--e6) var(--e4);}
  .formulaire{padding:var(--e4);}
  .reglementaire{padding:var(--e4);}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .bouton,.hero-actions .tel{width:100%;justify-content:center;}
  .bandeau-cta .actions .bouton,.bandeau-cta .actions .tel{width:100%;justify-content:center;}
  .preuves ul{flex-direction:column;gap:var(--e2);}
  .hero{min-height:88svh;}
  .hero-corps{padding-block:calc(var(--e8) + var(--e2)) var(--e6);}
}

/* ============================================================
   PAGE « NOS VENTES »  (30 juillet 2026)
   ============================================================ */
.grille-produits{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e4);margin-top:var(--e5);
}
.produit{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  box-shadow:var(--ombre-1);overflow:hidden;
}
.produit-corps{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2);}
.produit-corps .h4{margin-bottom:var(--e1);}
.produit-detail{color:var(--texte-doux);font-size:var(--t-petit);margin:0;}
.produit-format{
  font-size:var(--t-petit);color:var(--texte-faible);margin:0;
  padding-top:var(--e2);border-top:1px solid var(--ligne-douce);
}
.produit-prix{margin:auto 0 0;line-height:1.3;}
.produit-prix .montant{
  font-size:2rem;letter-spacing:-.04em;color:var(--texte);
  font-variant-numeric:tabular-nums;
}
.produit-prix .montant.sur-demande{font-family:var(--sans);font-size:1.125rem;font-weight:700;letter-spacing:0;}
.produit-prix .ttc{
  font-family:var(--mono);font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent-chaud-texte);
}
.produit-prix .ht{font-size:var(--t-etiquette);color:var(--texte-faible);letter-spacing:.04em;}

/* Le fanion doré, réservé à UN produit. Deux mises en avant, ce n'est
   plus une mise en avant. */
.fanion{
  align-self:flex-start;margin:0;
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  background:var(--accent-chaud);color:var(--sur-accent-chaud);
  padding:3px 10px;border-radius:var(--r1);
}

/* Emplacement de photographie, volontairement visible.
   Même parti pris que les mentions légales : un manque annoncé vaut
   mieux qu'une image d'illustration qui ferait passer le sac d'un
   autre pour le leur. Ces blocs disparaissent dès que Fages fournit
   ses photos. */
.produit-visuel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--e2);padding:var(--e4) var(--e3);min-height:200px;
  background:var(--fond-2);color:var(--texte-faible);
  border-right:1px dashed var(--ligne);
}
.produit-visuel svg{opacity:.55;}
.produit-visuel-note{
  font-family:var(--mono);font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.12em;text-align:center;line-height:1.5;
}

/* Les offres */
.offre{
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:var(--e4);box-shadow:var(--ombre-1);
}
.offre-titre{
  font-size:2.5rem;line-height:1;letter-spacing:-.05em;
  color:var(--accent-chaud-texte);margin:0 0 var(--e2);
}
.offre .h4{margin-bottom:var(--e2);}

@media (max-width:899px){
  .grille-produits{grid-template-columns:1fr;}
}
@media (max-width:479px){
  .produit{grid-template-columns:1fr;}
  .produit-visuel{min-height:150px;border-right:0;border-bottom:1px dashed var(--ligne);}
}

/* Signature du pied de page */
.pied-bas .signature{color:var(--texte-faible);}
.pied-bas .signature b{color:var(--texte-doux);font-weight:700;}

/* ============================================================
   ANIMATIONS DES BLOCS D'INFORMATION  (30 juillet 2026)
   Le mouvement se déclenche au survol et au focus, jamais tout
   seul : une carte qui bouge sans qu'on la touche fatigue, et un
   texte animé en permanence se relit mal.
   ============================================================ */
.materiel li,.etape,.coches li,.avis,.offre,.produit,.fiche{
  transition:transform var(--d-court) var(--courbe),
             box-shadow var(--d-court) var(--courbe),
             border-color var(--d-court) var(--courbe);
}
.materiel li:hover,.etape:hover,.offre:hover,.produit:hover{
  transform:translateY(-4px);
  box-shadow:var(--ombre-2);
  border-color:var(--accent-chaud);
}
.materiel li:focus-within,.etape:focus-within,.offre:focus-within,.produit:focus-within{
  border-color:var(--accent-chaud);
}
/* Le numéro d'étape se colore au survol de sa carte. */
.etape .numero{transition:background var(--d-court), color var(--d-court);}
.etape:hover .numero{background:var(--accent-chaud);color:var(--sur-accent-chaud);}
/* La coche part de la gauche à la révélation, puis ne bouge plus. */
.coches li:hover .coche{background:var(--accent-chaud);color:var(--sur-accent-chaud);}
.coches .coche{transition:background var(--d-court), color var(--d-court);}

@media (prefers-reduced-motion: reduce){
  .materiel li:hover,.etape:hover,.offre:hover,.produit:hover{transform:none;}
}

/* ============================================================
   SCHÉMAS DE PRESTATION  (30 juillet 2026)
   Dessins vectoriels, tracés à la main dans le HTML pour qu'ils
   héritent des jetons de la bande où ils se trouvent. Aucun
   fichier image, aucune licence, environ 2 Ko chacun.
   ============================================================ */
.schemas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);margin-top:var(--e5);}
.schema{
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:var(--e4);box-shadow:var(--ombre-1);
  transition:transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe), border-color var(--d-court);
}
.schema:hover{transform:translateY(-4px);box-shadow:var(--ombre-2);border-color:var(--accent-chaud);}
.schema svg{width:100%;height:auto;display:block;}
.schema figcaption{margin-top:var(--e3);}
.schema figcaption b{
  display:block;font-family:var(--mono);font-weight:500;font-size:1rem;
  letter-spacing:-.02em;margin-bottom:var(--e1);
}
.schema figcaption span{display:block;font-size:var(--t-petit);color:var(--texte-doux);line-height:1.55;}
/* Le trait qui se dessine à l'apparition du schéma. */
.schema .trace{stroke-dasharray:var(--long,300);stroke-dashoffset:var(--long,300);}
.reveal.vu .schema .trace,.schema.vu .trace{animation:tracer 1.4s var(--courbe) forwards;}
@keyframes tracer{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .schema .trace{stroke-dashoffset:0;animation:none;}
}
@media (max-width:767px){ .schemas{grid-template-columns:1fr;} }

/* ============================================================
   FORMULAIRE DE COMMANDE  (30 juillet 2026)
   ============================================================ */
.formulaire.compacte .duo-champs{gap:var(--e3);}
.formulaire.compacte .champ{margin-bottom:var(--e3);}
.formulaire .aide.sans-marge-bas{margin-top:calc(-1 * var(--e2));margin-bottom:var(--e3);}

.quantites,.choix{border:0;padding:0;margin:0 0 var(--e4);}
.quantites legend,.choix legend{
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent-chaud-texte);
  padding:0;margin-bottom:var(--e3);
}
.quantites ul{display:flex;flex-direction:column;gap:var(--e2);}
.quantites li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e3);border:1px solid var(--ligne);border-radius:var(--r1);
  background:var(--fond-carte);
  transition:border-color var(--d-court);
}
.quantites li:focus-within{border-color:var(--accent-chaud);}
.q-nom{display:block;font-weight:700;font-size:1rem;line-height:1.3;}
.q-detail{display:block;font-size:var(--t-etiquette);color:var(--texte-faible);letter-spacing:.04em;}
.quantites .champ{display:flex;align-items:center;gap:var(--e2);margin:0;flex:0 0 auto;}
.quantites input[type="number"]{width:84px;text-align:center;}
.q-unite{font-family:var(--mono);font-size:var(--t-petit);color:var(--texte-faible);}

.choix .options{display:flex;flex-wrap:wrap;gap:var(--e4);margin-bottom:var(--e2);}
.choix .options span{display:inline-flex;align-items:center;gap:var(--e2);}
.choix .options label{font-size:1rem;cursor:pointer;}
.choix .options input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;}

@media (max-width:519px){
  .quantites li{flex-direction:column;align-items:flex-start;}
}
/* Longueurs de tracé, en classes plutôt qu'en style= : la CSP
   interdit les attributs style inline, et un schéma ne doit pas
   être la seule chose qui casse en production. */
.l200{--long:200;} .l400{--long:400;} .l700{--long:700;} .l1200{--long:1200;}
.produit-alias{
  margin:0;font-family:var(--mono);font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.14em;color:var(--texte-faible);
}


/* ============================================================
   CADRE ÉPAIS À OMBRE PORTÉE
   Repris des références envoyées par Tom le 30 juillet : un trait
   franc, une ombre décalée et pleine, sans flou. C'est le contraire
   de l'ombre diffuse du reste du site, et c'est justement pour ça
   que ça attire l'œil sur un formulaire.
   ============================================================ */
.cadre{
  position:relative;
  background:var(--fond-carte);
  border:2px solid var(--texte);
  border-radius:var(--r2);
  box-shadow:10px 10px 0 var(--accent);
  transition:transform var(--d-moyen) var(--courbe), box-shadow var(--d-moyen) var(--courbe);
}
.cadre:focus-within{transform:translate(-2px,-2px);box-shadow:14px 14px 0 var(--accent);}
.cadre > .cadre-corps{padding:var(--e5);}
@media (max-width:767px){
  .cadre{box-shadow:6px 6px 0 var(--accent);}
  .cadre > .cadre-corps{padding:var(--e4);}
}

/* ============================================================
   CARTES NUMÉROTÉES  « piliers »
   Chiffre fantôme en fond, bordure et titre qui passent au doré
   au survol, petite marque qui apparaît en pied de carte.
   ============================================================ */
.piliers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e3);margin-top:var(--e5);}
.pilier{
  position:relative;overflow:hidden;
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r2);
  padding:var(--e4);
  transition:border-color var(--d-moyen), transform var(--d-moyen) var(--courbe), box-shadow var(--d-moyen);
}
.pilier .fantome{
  position:absolute;top:-14px;right:6px;
  font-family:var(--mono);font-size:5.5rem;line-height:1;letter-spacing:-.06em;
  color:var(--texte);opacity:.05;pointer-events:none;
  transition:opacity var(--d-moyen), color var(--d-moyen);
}
.pilier .rang{
  font-family:var(--mono);font-size:1.25rem;color:var(--accent-chaud-texte);
  margin-right:var(--e2);transition:color var(--d-moyen);
}
.pilier h3{display:inline;font-family:var(--sans);font-size:var(--t-h4);font-weight:700;transition:color var(--d-moyen);}
.pilier ul{display:flex;flex-direction:column;gap:var(--e3);margin-top:var(--e4);}
.pilier li{display:flex;gap:var(--e2);align-items:flex-start;font-size:var(--t-petit);line-height:1.55;color:var(--texte-doux);}
.pilier li svg{flex:0 0 auto;margin-top:3px;color:var(--accent-chaud-texte);transition:color var(--d-moyen);}
.pilier .pied{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--ligne-douce);
  font-family:var(--mono);font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.16em;color:var(--texte-faible);
  transition:color var(--d-moyen), border-color var(--d-moyen);
}
.pilier .marque{opacity:0;transform:translateX(-6px);transition:opacity var(--d-moyen), transform var(--d-moyen) var(--courbe);}
.pilier:hover,.pilier:focus-within{
  border-color:var(--accent-chaud);transform:translateY(-5px);box-shadow:var(--ombre-2);
}
.pilier:hover .fantome,.pilier:focus-within .fantome{opacity:.16;color:var(--accent-chaud);}
.pilier:hover h3,.pilier:focus-within h3{color:var(--accent-chaud-texte);}
.pilier:hover .pied,.pilier:focus-within .pied{color:var(--accent-chaud-texte);border-color:var(--accent-chaud);}
.pilier:hover .marque,.pilier:focus-within .marque{opacity:1;transform:none;}
@media (max-width:1023px){ .piliers{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:599px){ .piliers{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .pilier:hover{transform:none;} }

/* ============================================================
   TIRAGE PHOTOGRAPHIQUE
   Cadre franc, image aux angles arrondis, pastille flottante et
   bande de légende en machine à écrire.
   ============================================================ */
.tirages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5);margin-top:var(--e5);}
.tirage{
  position:relative;margin:0;padding:var(--e3) var(--e3) 0;
  background:var(--fond-carte);border:2px solid var(--texte);border-radius:var(--r2);
  box-shadow:10px 10px 0 var(--accent);
  transition:transform var(--d-moyen) var(--courbe), box-shadow var(--d-moyen) var(--courbe);
}
.tirage:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--accent);}
.tirage .cliche{position:relative;overflow:hidden;border-radius:var(--r2);}
.tirage img{width:100%;height:auto;display:block;transition:transform 1.1s var(--courbe);}
.tirage:hover img{transform:scale(1.04);}
.tirage .pastille{
  position:absolute;top:var(--e3);left:var(--e3);z-index:2;
  background:var(--fond);color:var(--accent);
  font-family:var(--sans);font-weight:700;font-size:var(--t-petit);
  padding:7px 16px;border-radius:var(--r3);box-shadow:var(--ombre-1);
}
.tirage figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e2);
  padding:var(--e3) var(--e1) var(--e3);
  font-family:var(--mono);font-size:var(--t-petit);
  text-transform:uppercase;letter-spacing:.1em;line-height:1.5;
}
.tirage figcaption b{font-weight:400;color:var(--texte);}
.tirage figcaption em{font-style:normal;color:var(--reglementaire);text-align:right;}
@media (max-width:767px){
  .tirages{grid-template-columns:1fr;gap:var(--e4);}
  .tirage{box-shadow:6px 6px 0 var(--accent);}
}
@media (prefers-reduced-motion: reduce){ .tirage:hover{transform:none;} .tirage:hover img{transform:none;} }

/* ============================================================
   BANDE PHOTOGRAPHIQUE PLEINE LARGEUR
   Photographie en fond, texte encadré par-dessus, et une rangée
   de repères en bas. Repris de la référence « La nuit au fournil ».
   ============================================================ */
.bande-photo{position:relative;overflow:hidden;background:var(--photo-fond);}
.bande-photo > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:derive 38s ease-in-out infinite alternate;
}
.bande-photo .voile{position:absolute;inset:0;z-index:1;background:var(--voile);}
.bande-photo .voile-lateral{position:absolute;inset:0;z-index:1;background:var(--voile-lateral);}
.bande-photo .contenu{position:relative;z-index:2;padding-block:var(--e8) var(--e6);}
.bande-photo .etiquette{color:var(--photo-etiquette);}
.bande-photo .etiquette::before{background:var(--photo-filet);}
.bande-photo .geant,.bande-photo .titre{color:var(--photo-titre);text-shadow:0 2px 30px rgba(0,0,0,.4);}
.bande-photo .italique{color:var(--photo-accent);}
.bande-photo blockquote{
  margin:var(--e5) 0 var(--e2);padding-left:var(--e4);
  border-left:3px solid var(--photo-filet);
  font-family:var(--sans);font-size:var(--t-chapeau);color:var(--photo-titre);
  max-width:44ch;
}
.bande-photo .attribution{
  font-family:var(--mono);font-size:var(--t-etiquette);
  text-transform:uppercase;letter-spacing:.16em;color:var(--photo-accent);
}
/* La rangée de repères, en bas de la bande */
.reperes{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(246,242,233,.18);
}
.repere{
  padding:var(--e4);border-right:1px solid rgba(246,242,233,.18);
  background:rgba(9,17,11,.34);
  transition:background var(--d-moyen);
}
.repere:last-child{border-right:0;}
.repere:hover{background:rgba(9,17,11,.6);}
.repere .haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--e3);}
.repere .haut svg{color:var(--photo-filet);}
.repere .haut .n{font-family:var(--mono);font-size:var(--t-etiquette);color:rgba(246,242,233,.5);}
.repere h3{font-family:var(--sans);font-size:1.0625rem;font-weight:700;color:var(--photo-titre);margin-bottom:var(--e2);}
.repere p{font-size:var(--t-petit);color:rgba(246,242,233,.82);margin:0;line-height:1.55;}
@media (max-width:899px){
  .reperes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .repere:nth-child(2){border-right:0;}
  .repere:nth-child(-n+2){border-bottom:1px solid rgba(246,242,233,.18);}
}
@media (max-width:519px){
  .reperes{grid-template-columns:1fr;}
  .repere{border-right:0;border-bottom:1px solid rgba(246,242,233,.18);}
}

/* ============================================================
   CONTACT : les deux formulaires côte à côte
   ============================================================ */
.deux-formulaires{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e5);align-items:stretch;margin-top:var(--e5);
}
.deux-formulaires > .cadre{display:flex;align-self:stretch;}
.deux-formulaires > .cadre > .cadre-corps{flex:1 1 auto;width:100%;display:flex;}
/* Les deux cartes font la même hauteur : c'est la colonne qui commande,
   pas la longueur du formulaire. Le bouton d'envoi est poussé en bas,
   sinon la carte la plus courte laisse un vide au mauvais endroit. */
.deux-formulaires .formulaire{
  width:100%;background:transparent;border:0;box-shadow:none;padding:0;
  display:flex;flex-direction:column;
}
.deux-formulaires .formulaire > button[type="submit"]{margin-top:auto;}
.deux-formulaires .formulaire > .message-formulaire{margin-bottom:0;}
@media (max-width:959px){ .deux-formulaires{grid-template-columns:1fr;gap:var(--e6);} }

.bloc-coordonnees{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6);align-items:start;}
@media (max-width:899px){ .bloc-coordonnees{grid-template-columns:1fr;gap:var(--e5);} }
/* Le visuel produit accueille désormais une vraie photographie.
   Tant que Fages n'a pas fourni les siennes, le fichier en place est
   un gabarit aux bonnes dimensions : le jour où la photo arrive, elle
   prend le même nom et rien d'autre ne bouge. */
.produit-visuel{padding:0;border-right:1px solid var(--ligne);overflow:hidden;}
.produit-visuel img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--courbe);}
.produit:hover .produit-visuel img{transform:scale(1.05);}
@media (max-width:479px){ .produit-visuel{border-right:0;border-bottom:1px solid var(--ligne);} }
@media (prefers-reduced-motion: reduce){ .produit:hover .produit-visuel img{transform:none;} }

/* ============================================================
   JETONS D'INFORMATION  (30 juillet 2026)
   Petites pastilles à pictogramme, sous un chapeau de section.
   Reprises de la référence « Le journal du pain bio et du terroir ».
   ============================================================ */
.jetons{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4);}
.jeton{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:8px 16px 8px 12px;
  background:var(--fond-carte);border:1px solid var(--ligne);border-radius:var(--r3);
  font-size:var(--t-petit);color:var(--texte-doux);
  transition:border-color var(--d-court), color var(--d-court), transform var(--d-court) var(--courbe);
}
.jeton svg{flex:0 0 auto;color:var(--accent-chaud-texte);}
.jeton:hover{border-color:var(--accent-chaud);color:var(--texte);transform:translateY(-2px);}
.inverse .jeton{background:transparent;}
@media (prefers-reduced-motion: reduce){ .jeton:hover{transform:none;} }

/* En-tête de section avec une action alignée à droite. */
.entete-action{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e4) var(--e6);margin-bottom:var(--e4);
}
.entete-action > :first-child{flex:1 1 34ch;}
.entete-action > :first-child > :last-child{margin-bottom:0;}

/* ============================================================
   BLOC PROMOTION  (30 juillet 2026)
   Le vert de marque en aplat, parce qu'une offre en gris sous un
   formulaire n'est pas une offre, c'est une note de bas de page.
   ============================================================ */
.promo{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e3);
  margin:0 0 var(--e4);padding:var(--e3) var(--e4);
  background:var(--accent);color:var(--sur-accent);
  border-radius:var(--r1);
  border-left:4px solid var(--accent-chaud);
}
.promo .promo-titre{
  flex:0 0 auto;
  font-family:var(--mono);font-size:var(--t-etiquette);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent-chaud-vif);
}
.promo .promo-texte{flex:1 1 20ch;font-size:var(--t-petit);line-height:1.55;}
.promo .promo-texte b{font-weight:700;}
.promo .fait{color:var(--accent-chaud-vif);}

/* ============================================================
   BANDEAU D'OFFRE  (30 juillet 2026)
   Placé juste sous le premier écran de la page Nos ventes. Une
   promotion reléguée en bas de page n'est pas vue, donc n'existe pas.
   ============================================================ */
/* Refait le 12 août 2026. La bande verte pleine était plate et coupait la
   page en deux. Le motif de fond reprend les cernes d'un tronc coupé, le
   seul dessin que cette entreprise puisse légitimement porter. Tout est en
   dégradés : zéro image ajoutée, zéro octet, rien à mettre en cache. */
.bandeau-offre{
  position:relative;overflow:hidden;isolation:isolate;
  color:var(--sur-accent);
  background:
    radial-gradient(130% 190% at 10% 50%, rgba(198,150,80,.22), transparent 62%),
    linear-gradient(102deg, #122C1C 0%, var(--accent) 52%, #16341F 100%);
  border-top:1px solid rgba(198,150,80,.34);
  border-bottom:3px solid var(--accent-chaud);
}
/* Les cernes, centrés sur le coin où se pose le « 2 + 1 ». */
.bandeau-offre::before{
  content:"";position:absolute;inset:-60% -12%;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 7% 50%,
    rgba(246,242,233,.062) 0 1.5px, transparent 1.5px 24px);
}
/* Un fil doré qui file sous le texte, comme un trait de scie. */
.bandeau-offre::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(198,150,80,.55) 28%,
             rgba(198,150,80,.55) 72%, transparent);
}
.bandeau-offre .contenu{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e3) var(--e5);padding-block:var(--e5);
}
.bandeau-offre p{margin:0;}
.offre-phrase{font-size:var(--t-chapeau);line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);}
.offre-phrase b{font-weight:700;color:var(--accent-chaud-vif);}
.offre-cle{
  flex:0 0 auto;
  font-family:var(--serif);font-size:2rem;line-height:1;letter-spacing:-.03em;
  color:#22150A;
  background:linear-gradient(158deg, #E9C48B 0%, var(--accent-chaud) 48%, #A9762F 100%);
  padding:10px 20px;border-radius:var(--r2);
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset, 0 10px 22px rgba(0,0,0,.28);
  transition:transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe);
}
.offre-phrase:hover .offre-cle{
  transform:translateY(-2px) rotate(-1.2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset, 0 14px 28px rgba(0,0,0,.34);
}
@media (prefers-reduced-motion: reduce){
  .offre-phrase:hover .offre-cle{transform:none;}
}
.offre-second{
  font-family:var(--mono);font-size:var(--t-petit);
  color:rgba(246,242,233,.78);letter-spacing:.02em;
}
.offre-second .fait{color:var(--accent-chaud-vif);}

/* La pastille d'offre sur la carte produit */
.fanion-offre{background:var(--signal);color:var(--sur-accent);}
.produit .fanion-offre sup{font-size:.7em;}

/* ============================================================
   PASSE D'EFFETS GÉNÉRALE  (30 juillet 2026)
   Repris des enregistrements envoyés par Tom. Trois règles tenues
   partout : rien ne bouge tout seul en boucle, tout mouvement dure
   moins d'une demi-seconde, et rien ne se déclenche sans une action
   du visiteur, sauf la révélation au premier passage.
   ============================================================ */

/* --- Le filet des étiquettes se trace à l'apparition --- */
.etiquette::before{transform-origin:left;transition:transform var(--d-reveal) var(--courbe) .1s;}
.reveal .etiquette::before,.reveal.etiquette::before{transform:scaleX(0);}
.reveal.vu .etiquette::before,.reveal.vu.etiquette::before{transform:scaleX(1);}

/* --- Les photographies de la mosaïque respirent au survol ---
   Purement décoratif, donc sans équivalent tactile : la loi de parité
   l'autorise explicitement pour un effet qui ne porte aucune information.
   Enfermé quand même sous (hover: hover) pour éviter l'état collant
   au premier appui sur iOS. */
.mosaique figure{overflow:hidden;transition:box-shadow var(--d-moyen), transform var(--d-moyen) var(--courbe);}
.mosaique figure img{transition:transform 1.1s var(--courbe);}
@media (hover: hover) and (pointer: fine){
  .mosaique figure:hover{transform:translateY(-4px);box-shadow:var(--ombre-2);}
  .mosaique figure:hover img{transform:scale(1.06);}
}
.mosaique figcaption{transition:opacity var(--d-court), transform var(--d-court) var(--courbe);}

/* --- Les fiches de contact et les pastilles de commune --- */
.fiche{transition:transform var(--d-court) var(--courbe), border-color var(--d-court);}
.fiche:hover{transform:translateX(4px);}
.fiche .pictogramme{transition:background var(--d-court), color var(--d-court), transform var(--d-court) var(--courbe);}
.fiche:hover .pictogramme{background:var(--accent-chaud);color:var(--sur-accent-chaud);transform:scale(1.08);}
.pastilles li{transition:border-color var(--d-court), color var(--d-court), transform var(--d-court) var(--courbe);}
.pastilles li:hover{border-color:var(--accent-chaud);color:var(--texte);transform:translateY(-2px);}

/* --- Les questions fréquentes : la croix pivote, la réponse glisse --- */
.faq summary{transition:color var(--d-court), padding-left var(--d-court) var(--courbe);}
.faq summary:hover{color:var(--accent-chaud-texte);padding-left:var(--e2);}
.faq summary::before,.faq summary::after{transition:transform var(--d-moyen) var(--courbe), background var(--d-court);}
.faq details[open] summary::after{transform:rotate(180deg);}
.faq details[open] > div{animation:deplie .38s var(--courbe);}
@keyframes deplie{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* --- Les chiffres du relevé : le trait sous la valeur se remplit --- */
.releve dd{position:relative;}
.releve dd::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;
  background:var(--accent-chaud);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-reveal) var(--courbe);
}
.reveal.vu .releve dd::after{transform:scaleX(1);}

/* --- Les listes à coche : la coche se pose l'une après l'autre --- */
.coches li{transition:transform var(--d-court) var(--courbe);}
.coches li:hover{transform:translateX(4px);}

/* --- Le bloc réglementaire : sa barre latérale s'épaissit au survol --- */
.reglementaire{transition:border-color var(--d-moyen), box-shadow var(--d-moyen);}
.reglementaire:hover{box-shadow:var(--ombre-1);}

/* --- Les liens du pied de page --- */
.pied a{transition:color var(--d-court), padding-left var(--d-court) var(--courbe);}
.pied-grille ul a:hover{padding-left:var(--e2);color:var(--accent-chaud-texte);}

/* --- Les boutons : la flèche interne avance --- */
.bouton svg{transition:transform var(--d-court) var(--courbe);}
.bouton:hover svg{transform:translateX(3px);}

/* --- Le bandeau d'appel à l'action : sa photographie dérive lentement --- */
.bandeau-cta{overflow:hidden;}
.bandeau-cta img{transition:transform 1.4s var(--courbe);}
.bandeau-cta:hover img{transform:scale(1.05);}

/* --- Les champs de formulaire : le cadre se colore et se soulève --- */
.champ input,.champ select,.champ textarea{
  transition:border-color var(--d-court), box-shadow var(--d-court), background var(--d-court);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--accent-chaud);
  box-shadow:0 0 0 3px rgba(179,135,60,.18);
}

/* Rien de tout cela ne s'applique si le visiteur a demandé le calme. */
@media (prefers-reduced-motion: reduce){
  .mosaique figure:hover,.fiche:hover,.pastilles li:hover,.coches li:hover{transform:none;}
  .mosaique figure:hover img,.bandeau-cta:hover img{transform:none;}
  .faq summary:hover{padding-left:0;}
  .pied-grille ul a:hover{padding-left:0;}
  .bouton:hover svg{transform:none;}
  .faq details[open] > div{animation:none;}
  .etiquette::before,.releve dd::after{transform:none !important;transition:none;}
}

/* ============================================================
   BOUTON D'AJOUT SUR LA CARTE PRODUIT  (30 juillet 2026)
   Un « + » qui mène droit à la fiche de commande. Ce n'est pas un
   panier : le site ne vend pas en ligne, il prend des réservations.
   ============================================================ */
.produit-corps{position:relative;}
.ajout{
  position:absolute;top:var(--e4);right:var(--e4);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r3);
  background:var(--accent-chaud);color:var(--sur-accent-chaud);
  font-family:var(--mono);font-size:1.375rem;line-height:1;
  text-decoration:none;
  transition:transform var(--d-court) var(--courbe), background var(--d-court);
}
.ajout:hover{background:var(--accent-chaud-vif);color:var(--sur-accent-chaud);transform:rotate(90deg) scale(1.08);}
.ajout span{margin-top:-2px;}
.produit-corps > .h4{padding-right:var(--e6);}
@media (prefers-reduced-motion: reduce){ .ajout:hover{transform:none;} }

/* ============================================================
   EFFETS MANQUANTS  — audit du 30 juillet 2026
   `.carte` est utilisée sur 7 pages et n'avait aucun effet de
   survol. Corrigé ici, avec les deux autres blocs oubliés.
   ============================================================ */
.carte,.carte-zone,.avis{
  transition:transform var(--d-moyen) var(--courbe),
             box-shadow var(--d-moyen) var(--courbe),
             border-color var(--d-moyen);
}
.carte:hover,.carte-zone:hover,.avis:hover{
  transform:translateY(-5px);
  box-shadow:var(--ombre-2);
  border-color:var(--accent-chaud);
}
.carte .pictogramme{
  transition:background var(--d-moyen), color var(--d-moyen), transform var(--d-moyen) var(--courbe);
}
.carte:hover .pictogramme{
  background:var(--accent-chaud);color:var(--sur-accent-chaud);transform:scale(1.1) rotate(-6deg);
}
.carte h3{transition:color var(--d-moyen);}
.carte:hover h3{color:var(--accent-chaud-texte);}
.carte-zone{overflow:hidden;}
.carte-zone svg{transition:transform var(--d-reveal) var(--courbe);}
.carte-zone:hover svg{transform:scale(1.04);}
@media (prefers-reduced-motion: reduce){
  .carte:hover,.carte-zone:hover,.avis:hover{transform:none;}
  .carte:hover .pictogramme,.carte-zone:hover svg{transform:none;}
}

/* ============================================================
   CARTE D'ACCÈS AVEC CONSENTEMENT (11 août 2026)

   Le plan Google n'est PAS chargé au chargement de la page. Tant
   que le visiteur n'a pas cliqué, aucune requête ne part vers
   Google, aucun cookie n'est déposé et son adresse IP n'est pas
   transmise. C'est la seule façon de garder la promesse faite en
   page de confidentialité tout en offrant un plan d'accès.

   L'habillage d'attente est entièrement en CSS : pas d'image de
   remplacement à charger, donc zéro octet ajouté au premier écran.
   ============================================================ */
.carte-acces{
  position:relative;
  border:1px solid var(--ligne);
  border-radius:var(--r1);
  overflow:hidden;
  background:var(--fond-2);
  box-shadow:var(--ombre-1);
}
/* Corrigé le 12 août 2026, défaut vu sur la capture iPhone de l'audit.
   Le cadre était figé à 16/9, et l'invitation était posée en absolu par
   dessus. Sur un écran étroit, le texte de consentement dépassait de la
   boîte et l'`overflow:hidden` le coupait : le pictogramme et surtout le
   lien « ouvrir directement dans Google Maps », qui est l'échappatoire
   sans cookie, devenaient invisibles au téléphone.
   Le ratio ne s'applique donc qu'une fois la carte chargée. Avant, c'est
   le texte qui commande la hauteur. */
.carte-acces[data-charge="oui"]{aspect-ratio:16/9;}
@media (max-width:700px){ .carte-acces[data-charge="oui"]{aspect-ratio:4/3;} }

/* Le quadrillage reprend celui de la carte schématique de la zone
   d'intervention, pour que l'attente ait déjà l'air d'un plan. */
.carte-acces::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right, var(--ligne) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--ligne) 0 1px, transparent 1px 88px);
  opacity:.45;
}

/* Dans le flux, pas en absolu : c'est ce qui empêche le texte d'être
   coupé sur un écran étroit. La hauteur minimale garde l'allure d'un
   cadre de carte quand le texte est court. */
.carte-acces-invite{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--e3);
  min-height:clamp(270px, 32vw, 400px);
  padding:var(--e5) var(--e4);
  text-align:center;
}
.carte-acces[data-charge="oui"] .carte-acces-invite{display:none;}
.carte-acces-invite .pictogramme{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:var(--r3);
  background:var(--fond-carte);border:1px solid var(--ligne);
  color:var(--accent);
}
.carte-acces-invite h3{
  font-family:var(--serif);font-size:var(--t-sous-titre);
  margin:0;max-width:24ch;
}
.carte-acces-invite p{
  margin:0;max-width:56ch;
  font-size:var(--t-petit);color:var(--texte-doux);
}
.carte-acces-invite .lien-direct{
  font-family:var(--mono);font-size:var(--t-etiquette);
  color:var(--texte-faible);
}

/* Le plan, une fois demandé. */
.carte-acces iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.carte-acces[data-charge="oui"]::before{display:none;}

/* Le retrait du consentement. Il doit être aussi simple que
   l'acceptation, sinon le consentement n'en est pas un. */
.carte-acces-retrait{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);
  margin-top:var(--e3);
  font-size:var(--t-petit);color:var(--texte-doux);
}
/* Piège classique, vu sur la capture iPhone de l'audit : l'attribut
   `hidden` du HTML ne vaut que `display:none` dans la feuille du
   navigateur, et n'importe quel `display` de notre feuille le bat.
   Résultat : la phrase « la carte est affichée » s'affichait alors
   qu'aucune carte ne l'était. */
.carte-acces-retrait[hidden]{display:none;}
.carte-acces-retrait button{
  font:inherit;color:var(--accent);
  background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.carte-acces-retrait button:hover{color:var(--accent-fort);}
.sans-js .carte-acces-retrait{display:none;}

/* Petite utilité : afficher un identifiant technique (clé de stockage,
   nom de fichier) dans le texte courant, sans le faire passer pour un
   lien ni pour un mot souligné. */
.mono{
  font-family:var(--mono);font-size:.9em;
  color:var(--texte-doux);
  background:var(--fond-2);border:1px solid var(--ligne);border-radius:var(--r1);
  padding:.1em .4em;
  overflow-wrap:break-word;overflow-wrap:anywhere;
}

/* ============================================================
   FILETS DE COMPATIBILITÉ (audit du 12 août 2026)
   ============================================================ */

/* aspect-ratio n'existe qu'à partir de Safari 15. Sur un iPhone plus
   ancien, le cadre de la carte d'accès n'aurait aucune hauteur et le
   bouton « Afficher la carte » serait invisible. Repli par le vieux
   procédé du padding, qui marche partout. */
@supports not (aspect-ratio: 16 / 9){
  .carte-acces[data-charge="oui"]{height:0;padding-bottom:56.25%;}
  @media (max-width:700px){ .carte-acces[data-charge="oui"]{padding-bottom:75%;} }
}

/* Le rectangle bleu translucide qu'iOS pose sur chaque élément touché.
   On le neutralise, les états :focus-visible du site font déjà le
   travail et le font mieux. */
html{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* Les deux boutons ajoutés le 11 août doivent rester attrapables au
   doigt : 44 px est le minimum recommandé par Apple comme par Google. */
[data-carte-accepter],[data-carte-retirer]{min-height:44px;}
[data-carte-retirer]{padding-block:6px;}

/* Le bloc média du récit accueille désormais une VRAIE photographie de
   Fages, celle de leur nacelle dans un pin, avec leur banderole visible.
   Elle est horizontale (3:2) là où l'emplacement était vertical (4:5).
   Plutôt que de la recadrer de moitié ou de l'étirer, c'est l'emplacement
   qui s'adapte : la colonne passe pleine largeur sous 1100 px, et la
   photo garde ses proportions natives. Ajouté le 15 août 2026. */
.duo .media-large{align-self:center;}
.duo .media-large img{width:100%;height:auto;display:block;border-radius:var(--r1);}
@media (min-width:900px){
  .contenu.duo:has(.media-large){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
}