/* ==========================================================================
   Menuiserie Tréhant — Pergolas & carports aluminium
   Charte de la marque : gris et orange, relevés sur le logo et sur le site
   existant. Écrit à la main, sans build ni dépendance.
   ========================================================================== */

/* ---------- Polices auto-hébergées ----------
   Aucune police distante : le site ne doit contacter aucun service extérieur,
   ni pour la vitesse, ni pour la vie privée.
   Raleway est la police du site actuel de la menuiserie ; elle est conservée
   pour le texte courant. Playfair Display ne sert qu'au titrage, pour le
   registre haut de gamme demandé. */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-variable.woff2") format("woff2-variations"),
       url("../fonts/raleway-latin-variable.woff2") format("woff2");
  /* fichier variable : une seule requête couvre toutes les graisses */
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Variables ----------
   Un seul orange sur tout le site : #f39200, celui du logo.

   Il ne tient que 2,35:1 sur blanc — trop peu pour porter du texte, et trop
   peu pour qu'on lui pose du texte blanc dessus. La règle qui en découle
   tient en une phrase, et elle est appliquée partout : dès que de l'orange
   doit se lire, on cale du sombre dessous ou dessus.

     · orange sur --encre .......... 7,4:1  → sur-titres, liens, chiffres,
                                              icônes, pastilles, pied de page
     · --encre sur orange .......... 7,4:1  → libellés des boutons pleins
     · orange sur blanc ............ 2,35:1 → jamais pour du texte

   Les trois seuls endroits où l'orange ne peut pas recevoir de fond sombre
   sont des contrôles natifs ou des liens en ligne dans un paragraphe : là,
   le texte reste à l'encre et l'orange passe en soulignement ou en filet,
   qui ne portent aucun texte. */
:root {
  --orange: #f39200;
  /* Survol des aplats orange : la même teinte, d'un cran plus dense. */
  --orange-sombre: #d97f00;
  --sable-pale: #fdf6ec;
  --sable-voile: #f7e6cd;

  /* Bleu, blanc, rouge du liseré « Fabriqué en France ». Décoratifs : ils ne
     portent jamais de texte, aucun seuil de contraste ne s'y applique. */
  --bleu-france: #10285f;
  --rouge-france: #b3222e;

  /* Gris de la charte, relevés sur le site existant. --gris-barre est celui
     des visuels de l'entreprise, sur lequel le nom est composé en noir. */
  --gris-barre: #444444;
  --encre: #1a1a1a;
  --encre-2: #262626;
  --texte: #313131;
  --texte-doux: #616161;
  --ligne: #e3e1de;
  --fond: #ffffff;
  --fond-teinte: #f6f5f3;

  /* Dégradé porteur de texte : il est fait de l'orange de marque, et le texte
     qui s'y pose est à l'encre, comme sur les boutons. */
  --degrade-orange: linear-gradient(120deg, #d97f00 0%, #e88800 55%, #f39200 100%);

  --titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --texte-police: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --transition: .38s cubic-bezier(.25, .8, .25, 1);
  --entete-h: 92px;
  --entete-h-compact: 70px;
  --gouttiere: clamp(1.5rem, 5vw, 4.5rem);
  --largeur: 1240px;
  /* Aucun angle arrondi : la menuiserie aluminium est une affaire
     d'arêtes vives, la mise en page suit. */
  --rayon: 0;
  --rayon-carte: 0;
  --ombre-carte: 0 2px 6px rgba(26, 26, 26, .05), 0 14px 40px rgba(26, 26, 26, .08);
  --ombre-carte-active: 0 4px 12px rgba(243, 146, 0, .12), 0 22px 56px rgba(26, 26, 26, .13);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

body {
  font-family: var(--texte-police);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--orange); color: var(--encre); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 0;
}

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 500; line-height: 1.18; color: var(--encre); }

p + p { margin-top: 1.05rem; }

.conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--etroit { max-width: 820px; }
.centre { text-align: center; }

/* Lien d'évitement */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--orange); color: var(--encre); padding: .85rem 1.4rem;
  font-weight: 600;
}
.evitement:focus { left: 0; }

/* ---------- Ornements communs ---------- */
/* Sur fond clair, le sur-titre porte sa propre pastille sombre — c'est elle
   qui rend l'orange lisible. Sur fond déjà sombre (--clair), la pastille
   n'a plus de raison d'être et le trait retrouve sa longueur.

   Classe doublée à dessein : le sur-titre est un <p>, et des règles comme
   « .duo__texte p » — même spécificité, écrites plus loin — lui reprenaient
   sinon sa couleur, ce qui le laissait gris sur sa pastille noire. */
.surtitre, .surtitre.surtitre {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
  background: var(--encre);
  padding: .42rem .95rem .42rem .75rem;
  border-radius: 0;
  margin-bottom: 1.2rem;
}
.surtitre::before { content: ""; width: 18px; height: 2px; background: currentColor; flex: 0 0 auto; }
/* La pastille est portée par TOUS les sur-titres, y compris au-dessus d'une
   photo où le voile du bandeau ne garantit aucun contraste : mesuré, l'orange
   y tombait à 4,4:1 sur les clichés les plus lumineux. Sur les bandes déjà
   sombres elle se fond dans le fond et ne se voit pas — c'est le prix d'une
   règle unique, qui vaut mieux qu'une exception par contexte. */
.surtitre--clair::before { width: 26px; }
.surtitre--centre { justify-content: center; }

.titre-section {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  letter-spacing: -.015em;
  margin-bottom: 1.1rem;
}

.chapo {
  font-size: 1.22rem; line-height: 1.66;
  color: var(--texte-doux);
  margin-bottom: 2rem;
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  border-radius: var(--rayon);
  font-size: .93rem; font-weight: 700; letter-spacing: .01em;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--orange {
  background: var(--orange); color: var(--encre); border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(243, 146, 0, .30);
}
.btn--orange:hover {
  background: var(--orange-sombre); border-color: var(--orange-sombre);
  box-shadow: 0 10px 26px rgba(243, 146, 0, .40);
}

/* Bouton secondaire : plutôt qu'un libellé orange sur blanc, illisible, il
   est plein encre à libellé orange. Le bouton principal est l'inverse
   exact — orange plein, libellé encre — ce qui distingue les deux niveaux
   sans jouer sur la taille. */
.btn--contour { color: var(--orange); border-color: var(--encre); background: var(--encre); }
.btn--contour:hover { background: var(--orange); color: var(--encre); }

/* Bouton secondaire du bandeau : il est posé sur une photo, dont on ne
   maîtrise ni la clarté ni le contenu. Un voile blanc à 6 % laissait le
   libellé tomber à 2,4:1 sur les clichés lumineux ; c'est donc un voile
   sombre à 80 % qui le porte, mesuré à 8,9:1 même sur un cliché blanc. */
.btn--contour-clair { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(26, 26, 26, .8); }
.btn--contour-clair:hover { background: #fff; color: var(--encre); border-color: #fff; }

/* Lien avec flèche */
/* Même principe que le sur-titre : le libellé orange est porté par une
   pastille sombre. Au survol, la pastille prend l'orange et le texte passe
   à l'encre — l'inversion garde le contraste des deux côtés. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .93rem;
  color: var(--orange);
  background: var(--encre);
  padding: .5rem 1rem;
  border-radius: 0;
  transition: background var(--transition), color var(--transition);
}
.lien-fleche:hover { background: var(--orange); color: var(--encre); }
.lien-fleche::after {
  content: "→"; transition: transform var(--transition); font-size: 1.05em;
}
.lien-fleche:hover::after { transform: translateX(5px); }

/* Révélation au défilement.
   Le décalage est horizontal : un translateY allonge la zone défilable
   pendant l'animation et fait clignoter l'ascenseur. */
.reveler {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.25, .8, .25, 1);
}
.reveler.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveler { opacity: 1; transform: none; }
}

/* ==========================================================================
   EN-TÊTE
   Deux dispositions au choix (Paramètres → Apparence) : le balisage est le
   même, seul l'affichage change.
   ========================================================================== */


/* ---------- Liseré bleu-blanc-rouge ----------
   Il signe la fabrication française en haut de l'écran et au-dessus du pied.
   Purement décoratif : trois bandes peintes en dégradé à arrêts francs, sans
   balisage propre, donc rien à annoncer aux lecteurs d'écran. */
.entete::before,
.pied::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg,
    var(--bleu-france) 0 33.333%,
    #ffffff 33.333% 66.666%,
    var(--rouge-france) 66.666% 100%);
}
.pied { position: relative; }

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--entete-h);
  display: flex; align-items: center;
  /* Fond gris plein en haut de page : c'est le gris des visuels de
     l'entreprise, et c'est lui qui fait ressortir le monogramme orange. */
  background: var(--gris-barre);
  /* Le fondu de la teinte est porté ici, pas en JavaScript : le script se
     contente de poser une couleur, le navigateur fait la transition. */
  transition: height var(--transition), background-color 1.1s ease,
              box-shadow var(--transition), backdrop-filter var(--transition);
}

/* Barre réduite, une fois la page défilée : le gris s'ouvre sur ce qui passe
   dessous, avec un flou qui empêche le contenu de brouiller le nom.

   L'opacité de 70 % n'est pas choisie à l'œil. Le flou mélange les pixels
   alentour avant que la couche ne se pose : aucune formule ne prédit le
   résultat peint, il faut le mesurer. Relevé au pixel sur onze positions de
   défilement, du blanc des sections aux photos les plus claires : le nom en
   noir tient 1,82:1 (contre 1,94 à 86 %, écart imperceptible) et le numéro
   en blanc 4,97:1 — juste au-dessus du seuil AA, qui est ce qui décide ici.
   À 62 %, ce numéro tombait à 4,21:1.

   Cette valeur est reprise par site.js, qui recalcule la couleur au
   défilement : les deux doivent rester d'accord. */
.entete--pleine {
  height: var(--entete-h-compact);
  background: rgba(68, 68, 68, .7);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(26, 26, 26, .22);
}

/* Sans flou disponible, la transparence laisserait passer le contenu en net
   derrière le nom : la barre reprend alors son gris plein. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete--pleine { background: var(--gris-barre) !important; }
}

/* Le fondu de couleur est un mouvement comme un autre : coupé pour qui
   demande à en être dispensé, la teinte change alors d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .entete { transition: none; }
}
.entete__barre {
  position: relative;
  width: 100%;
  padding-inline: clamp(1rem, 3vw, 2.4rem);
  display: flex; align-items: center; gap: 1.4rem;
}

/* --- la marque de l'en-tête ---
   Reprise de la composition de la signalétique de l'entreprise : le nom en
   capitales, sa baseline dessous, et le monogramme orange isolé. Le nom est
   composé en typographie plutôt qu'en image pour rester net à toute taille
   et se laisser traduire. */
/* Les deux lignes forment un seul bloc : c'est leur interligne, plus que
   l'écart déclaré, qui les éloignait — chaque ligne portait la hauteur de
   ligne du corps de texte. */
.entete__mots {
  display: flex; flex-direction: column; gap: 0;
  margin-right: auto;
  color: #000;
}
.entete__nom {
  font-size: 1rem; font-weight: 800; line-height: 1.05;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.entete__baseline {
  font-size: .62rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}

/* Le monogramme est posé au centre de la barre, indépendamment de ce qui
   l'entoure : il ne bouge pas quand le nom ou les actions changent de
   largeur. */
.entete__logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.entete__embleme {
  display: block; height: 46px; width: auto;
  transition: height var(--transition);
}
.entete--pleine .entete__embleme { height: 36px; }

/* --- disposition latérale : burger et nom à gauche, actions à droite --- */
.entete--lateral .entete__barre { justify-content: flex-start; }

/* --- disposition horizontale : la navigation prend la place du centre,
       le monogramme revient donc dans le flux, à gauche --- */
.entete--horizontal .entete__logo {
  position: static; transform: none; order: -1;
}
.entete--horizontal .entete__mots { margin-right: 1.5rem; }

.navbar { display: none; margin-inline: auto; }
.navbar__liste { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.5rem); }
.navbar__item { position: relative; }
.navbar__lien {
  display: block; padding: .6rem .3rem;
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  color: #fff;
  transition: color var(--transition);
  position: relative;
}
.navbar__lien::after {
  content: ""; position: absolute; left: .3rem; right: .3rem; bottom: .15rem;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.32, .72, .3, 1);
}
.navbar__lien:focus-visible::after { transform: scaleX(1); }
.navbar__item:hover > .navbar__lien::after,
.navbar__lien[aria-current="page"]::after { transform: scaleX(1); }
.navbar__item:hover > .navbar__lien { color: var(--orange); }

/* Sous-menu déroulant : ouvert au survol et au focus clavier, ce qui évite
   d'exiger un clic là où la souris suffit sans piéger la navigation Tab. */
.navbar__item--parent > .navbar__lien { padding-right: 1.1rem; }
.navbar__item--parent > .navbar__lien::before {
  content: ""; position: absolute; right: .1rem; top: 50%;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.navbar__item--parent:hover > .navbar__lien::before { transform: rotate(225deg); margin-top: -1px; }

.navbar__sous {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 0;
  box-shadow: var(--ombre-carte);
  padding: .5rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Pont invisible entre le lien et le panneau : sans lui, traverser les 12 px
   de vide referme le menu avant que la souris n'y arrive. */
.navbar__item--parent::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}
.navbar__item--parent:hover .navbar__sous,
.navbar__item--parent:focus-within .navbar__sous {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.navbar__sous a {
  display: block; padding: .68rem .95rem;
  border-radius: 0;
  font-size: .9rem; font-weight: 600; color: var(--texte);
  transition: background var(--transition), color var(--transition);
}
.navbar__sous a:hover { background: var(--encre); color: var(--orange); }

/* --- actions à droite --- */
.entete__droite { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.5rem); margin-left: auto; }
.entete__tel {
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  color: #fff;
  transition: color var(--transition);
  white-space: nowrap;
}
.entete__tel:hover { color: var(--orange); }
.entete--pleine .entete__tel:hover { color: var(--orange); }
.entete__cta { padding: .7rem 1.35rem; font-size: .86rem; white-space: nowrap; }

/* ---------- Burger ---------- */
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 10px;
  flex: 0 0 auto;
  z-index: 210;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: #fff;
  border-radius: 0;
  transition: transform var(--transition), opacity var(--transition),
              width var(--transition), background var(--transition);
  transform-origin: left center;
}
.burger span:nth-child(2) { width: 68%; }
.burger:hover span:nth-child(2) { width: 100%; }
body.menu-ouvert .burger span { background: #fff; }
body.menu-ouvert .burger span:nth-child(1) { transform: rotate(45deg) translateY(-2px); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; width: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: rotate(-45deg) translateY(2px); }

/* ---------- Panneau de navigation (glisse depuis la gauche) ----------
   Utilisé tel quel en disposition latérale, et comme menu du téléphone en
   disposition horizontale. */
.voile {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(15, 8, 18, .62);
  backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden;
  transition:
    opacity .8s cubic-bezier(.32, .72, .3, 1),
    visibility .8s,
    backdrop-filter .8s cubic-bezier(.32, .72, .3, 1);
}
body.menu-ouvert .voile { opacity: 1; visibility: visible; backdrop-filter: blur(6px); }

/* Le panneau ne glisse plus de toute sa largeur, il vient de la gauche sur
   une course courte mais lisible, en même temps qu'il se révèle. Deux
   réglages font la douceur : la course dure près d'une seconde, et la courbe
   ne freine qu'après les deux tiers du trajet — un mouvement qui décélère
   tôt paraît s'arrêter avant d'être arrivé.
   L'opacité met moins de temps que la course : le panneau finit d'entrer
   alors qu'il est déjà pleinement visible, ce qui donne le glissé plutôt que
   l'apparition.
   « visibility » accompagne l'opacité : sans elle le panneau resterait
   cliquable et atteignable au clavier une fois refermé. */
.panneau {
  position: fixed; inset: 0 auto 0 0; z-index: 200;
  width: min(420px, 88vw);
  background: var(--encre);
  display: flex; flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-110px, 0, 0);
  transition:
    opacity .78s cubic-bezier(.45, .05, .2, 1),
    transform .88s cubic-bezier(.45, .05, .2, 1),
    box-shadow .88s ease,
    visibility 0s linear .88s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-ouvert .panneau {
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: 0 0 0 1px rgba(243, 146, 0, .22), 24px 0 60px rgba(0, 0, 0, .45);
  transition-delay: 0s, 0s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
  .panneau { transform: none; transition-duration: .01ms, .01ms, .01ms, 0s; }
}
.panneau::-webkit-scrollbar { width: 5px; }
.panneau::-webkit-scrollbar-track { background: transparent; }
.panneau::-webkit-scrollbar-thumb { background: rgba(243, 146, 0, .3); border-radius: 0; }
.panneau:hover::-webkit-scrollbar-thumb { background: rgba(243, 146, 0, .55); }

.panneau__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem clamp(1.4rem, 5vw, 2.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.panneau__embleme { height: 44px; width: auto; display: block; }
.panneau__logo:hover { opacity: .85; }
.panneau__fermer {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  transition: color var(--transition);
}
.panneau__fermer::before { content: "✕"; font-size: .95rem; }
.panneau__fermer:hover { color: var(--orange); }

.panneau__corps { flex: 1; padding: clamp(1.4rem, 4vh, 2.4rem) clamp(1.4rem, 5vw, 2.4rem); }

.panneau__lien, .panneau__accordeon > button {
  display: flex; align-items: baseline; gap: .9rem;
  width: 100%; text-align: left;
  padding: .78rem 0;
  font-family: var(--titre);
  font-size: 1.42rem; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: color var(--transition), padding-left var(--transition);
}
.panneau__num {
  font-family: var(--texte-police);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: var(--orange);
}
.panneau__lien:hover, .panneau__accordeon > button:hover { color: var(--orange); padding-left: .6rem; }
.panneau__lien[aria-current="page"] { color: var(--orange); }

.panneau__accordeon { position: relative; }
.panneau__accordeon > button::after {
  content: ""; position: absolute; right: .3rem; top: 1.5rem;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.panneau__accordeon[data-ouvert] > button::after { transform: rotate(225deg); }
.panneau__sous { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.25, .8, .25, 1); }
.panneau__accordeon[data-ouvert] .panneau__sous { max-height: 420px; }
.panneau__sous a {
  display: block; padding: .6rem 0 .6rem 1.9rem;
  font-size: .93rem; font-weight: 600;
  color: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: color var(--transition), padding-left var(--transition);
}
.panneau__sous a:hover { color: var(--orange); padding-left: 2.3rem; }

/* Les liens montent un à un, en décalage horizontal pour ne pas toucher à
   la hauteur défilable du panneau. */
.panneau__corps > * {
  opacity: 0; transform: translateX(-22px);
  transition: opacity .62s ease, transform .72s cubic-bezier(.32, .72, .3, 1);
}
body.menu-ouvert .panneau__corps > * { opacity: 1; transform: none; }
body.menu-ouvert .panneau__corps > :nth-child(1) { transition-delay: .26s; }
body.menu-ouvert .panneau__corps > :nth-child(2) { transition-delay: .34s; }
body.menu-ouvert .panneau__corps > :nth-child(3) { transition-delay: .42s; }
body.menu-ouvert .panneau__corps > :nth-child(4) { transition-delay: .50s; }
body.menu-ouvert .panneau__corps > :nth-child(5) { transition-delay: .58s; }
body.menu-ouvert .panneau__corps > :nth-child(6) { transition-delay: .66s; }
body.menu-ouvert .panneau__corps > :nth-child(7) { transition-delay: .74s; }

.panneau__pied {
  padding: clamp(1.2rem, 3vh, 2rem) clamp(1.4rem, 5vw, 2.4rem) 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: grid; gap: .8rem;
}
.panneau__pied .btn { display: flex; }
.panneau__coordonnees {
  font-size: .88rem; line-height: 1.7;
  color: rgba(255, 255, 255, .68);
  margin-top: .6rem;
}
.panneau__coordonnees a { color: var(--orange); font-weight: 600; }

/* ==========================================================================
   BANDEAUX
   ========================================================================== */

.heros {
  position: relative;
  display: flex; align-items: center;
  min-height: 620px;
  padding: calc(var(--entete-h) + 4rem) 0 5rem;
  overflow: hidden;
  isolation: isolate;
}
.heros--page { min-height: 460px; padding: calc(var(--entete-h) + 3.5rem) 0 4rem; }

/* La jauge du diaporama doit toucher le bas de l'écran : le bandeau occupe
   donc la hauteur visible. « svh » plutôt que « vh » — sur mobile, vh compte
   la barre d'adresse rétractée et pousse le trait hors du champ. */
.heros--accueil { min-height: min(100svh, 940px); }

.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.heros__photo--anime { animation: approche 18s ease-out forwards; }
@keyframes approche { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heros__photo--anime { animation: none; } }

/* --------------------------------------------------------------- diaporama

   Le fondu et le mouvement sont portés par deux propriétés séparées —
   opacité et transformation — que le navigateur compose sans repasser par la
   mise en page : c'est ce qui évite l'à-coup au changement de vue. La vue
   sortante garde son mouvement pendant tout le fondu ; elle n'est remise à
   zéro qu'une fois devenue invisible, sinon le retour à l'échelle 1 se
   verrait par transparence.

   Le mouvement dure plus longtemps que la pause : une animation qui s'achève
   avant le changement donnerait l'impression que l'image s'immobilise.

   Une vue sur deux se rapproche, l'autre s'éloigne. Pendant le fondu les
   deux dérivent donc en sens contraire, ce qui donne la profondeur ; toutes
   dans le même sens, le changement se lisait comme un retour en arrière. */
.heros__fond--diaporama .heros__photo {
  opacity: 0;
  transform: scale(1.005);
  transition: opacity var(--fondu, 1.8s) cubic-bezier(.45, 0, .3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.heros__fond--diaporama .heros__photo.est-visible { opacity: 1; }
.heros__fond--diaporama .heros__photo.se-rapproche {
  animation: derive-avant calc(var(--pause, 6s) + var(--fondu, 1.8s) + 1.4s) linear forwards;
}
.heros__fond--diaporama .heros__photo:nth-child(even).se-rapproche {
  animation-name: derive-arriere;
}
@keyframes derive-avant {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.1%, -.7%, 0); }
}
@keyframes derive-arriere {
  from { transform: scale(1.09) translate3d(1.1%, .7%, 0); }
  to   { transform: scale(1.005) translate3d(0, 0, 0); }
}

/* Un trait qui s'ouvre du centre vers les deux bords : il dit qu'une vue
   suivante arrive, et à quel moment, sans le chapelet de pastilles. */
.heros__jauge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 2px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.heros__jauge-trait {
  display: block; height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
}
/* La durée couvre la pause ET le fondu qui suit : sinon le trait arrive au
   bout puis attend, et l'attente se lit comme un blocage. */
.heros__jauge-trait.court {
  transition: transform calc(var(--pause, 6s) + var(--fondu, 1.8s)) linear;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .heros__fond--diaporama .heros__photo { transition-duration: .01ms; }
  .heros__fond--diaporama .heros__photo.se-rapproche { animation: none; }
  .heros__jauge-trait.court { transition-duration: .01ms; }
}

/* Voile sombre teinté gris chaud : c'est lui qui garantit la lisibilité du texte
   blanc quelle que soit la photo posée derrière, y compris l'image d'attente
   lorsqu'une photo manque encore. Son intensité se règle depuis le back-office
   pour la page d'accueil, dont les photos changent. */
.heros__fond::after {
  content: ""; position: absolute; inset: 0;
  opacity: var(--voile, 1);
  background:
    linear-gradient(105deg, rgba(21, 20, 19, .84) 0%, rgba(21, 20, 19, .62) 46%, rgba(21, 20, 19, .38) 100%),
    linear-gradient(rgba(21, 20, 19, .3), rgba(21, 20, 19, .55));
}

.heros__contenu { position: relative; max-width: 780px; }
.heros--page .heros__contenu { max-width: 860px; }
.heros__titre {
  font-size: clamp(2.3rem, 5.6vw, 4.15rem);
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 1.3rem;
}
.heros__texte {
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, .9);
  max-width: 640px;
}
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section { padding: clamp(3.6rem, 8vw, 6.6rem) 0; }
.section--teinte { background: var(--fond-teinte); }
.section--sombre { background: var(--encre); color: rgba(255, 255, 255, .82); }
.section--sombre h2, .section--sombre h3 { color: #fff; }

.section__tete { max-width: 760px; margin-bottom: 3rem; }
.section__chapo { font-size: 1.1rem; color: var(--texte-doux); }
.section__pied { margin-top: 3rem; }

.bloc-texte { margin-bottom: 2.4rem; }
.bloc-texte:last-child { margin-bottom: 0; }
.bloc-texte h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-bottom: .9rem;
}
.bloc-texte p { color: var(--texte-doux); }

.encadre {
  margin-top: 2.6rem;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--sable-pale);
  border: 1px solid var(--sable-voile);
  border-radius: var(--rayon-carte);
}
.encadre h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.encadre p { color: var(--texte-doux); margin-bottom: 1.3rem; }

/* Liste à puces cochées */
.liste-cochee { display: grid; gap: .75rem; margin-top: 1.3rem; }
.liste-cochee li {
  position: relative; padding-left: 2rem;
  color: var(--texte-doux);
}
.liste-cochee li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ---------- Indicateurs chiffrés ---------- */
.indicateurs {
  position: relative; z-index: 2;
  margin-top: -3.5rem;
}
/* Fond sombre : les chiffres sont à l'orange de marque, qui ne se lirait pas
   sur blanc. Posée à cheval sur le bandeau, la bande sombre le prolonge. */
.indicateurs__liste {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--encre);
  border: 1px solid var(--encre);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.indicateurs__item {
  padding: clamp(1.6rem, 3vw, 2.4rem) 1.2rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.indicateurs__item:last-child { border-right: 0; }
.indicateurs__valeur {
  font-family: var(--titre);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--orange);
  margin-bottom: .5rem;
}
.indicateurs__unite { font-size: .55em; margin-left: .1em; }
.indicateurs__libelle {
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* ---------- Cartes ---------- */
.cartes { display: grid; gap: 1.5rem; }
.cartes--services { grid-template-columns: repeat(4, 1fr); }
.cartes--services-large { grid-template-columns: repeat(2, 1fr); }
.cartes--clients { grid-template-columns: repeat(5, 1fr); }

.carte-service {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service > a {
  display: flex; flex-direction: column; height: 100%;
}
/* La photo occupe le haut de la carte ; l'icône de gamme se pose à cheval
   sur son bord bas, ce qui identifie la gamme sans reprendre de la hauteur. */
.carte-service__media { position: relative; margin-bottom: 2.4rem; }
.carte-service__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--transition);
}
.carte-service:hover .carte-service__media img { transform: scale(1.035); }
/* Marge plutôt que rembourrage : le lien en pastille a son propre fond, qui
   déborderait sur un rembourrage. La marge, elle, reste hors de sa boîte. */
.carte-service > a > :not(.carte-service__media) {
  margin-inline: clamp(1.6rem, 3vw, 2.2rem);
}
.carte-service > a > :last-child { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.carte-service:hover {
  transform: translateY(-4px);
  border-color: var(--sable-voile);
  box-shadow: var(--ombre-carte-active);
}
.carte-service__icone {
  position: absolute; left: clamp(1.6rem, 3vw, 2.2rem); bottom: -26px;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 0;
  background: var(--encre); border: 1px solid var(--encre);
  color: var(--orange);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.carte-service__icone svg { width: 28px; height: 28px; }
.carte-service:hover .carte-service__icone { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.carte-service__titre { font-size: 1.32rem; margin-bottom: .7rem; }
.carte-service__texte { color: var(--texte-doux); font-size: .96rem; flex: 1; }
.carte-service__lien { margin-top: 1.4rem; }
/* Enfant d'une colonne flex, la pastille s'étirerait sinon sur toute la largeur. */
.lien-fleche { align-self: flex-start; }

.carte-client {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-client:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-active); }
.carte-client__icone {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 1.1rem;
  border-radius: 0;
  background: var(--encre); color: var(--orange);
}
.carte-client__icone svg { width: 30px; height: 30px; }
.carte-client__titre { font-size: 1.12rem; margin-bottom: .5rem; }
.carte-client__texte { font-size: .9rem; color: var(--texte-doux); line-height: 1.6; }

/* ---------- Bloc image + texte ---------- */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo__media { position: relative; }
.duo__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--rayon-carte);
}
.duo__media::after {
  content: ""; position: absolute; inset: auto -18px -18px auto;
  width: 55%; height: 55%;
  border: 2px solid var(--sable-voile);
  border-radius: var(--rayon-carte);
  z-index: -1;
}
.duo__texte p { color: var(--texte-doux); }

.points { display: grid; gap: 1.6rem; margin: 2.2rem 0; }
.points__item { display: flex; gap: 1.2rem; }
/* Les grands chiffres portent l'ordre : ce sont des textes, pas des
   ornements. Sur fond clair ils reçoivent donc leur pastille sombre, comme
   les sur-titres. */
.points__numero {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 0;
  background: var(--encre);
  font-family: var(--titre); font-size: 1.15rem;
  color: var(--orange);
  line-height: 1;
}
.points__titre { font-size: 1.16rem; margin-bottom: .35rem; }
.points__item p { color: var(--texte-doux); font-size: .96rem; }

/* ---------- Piliers (page société) ---------- */
.piliers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3.5vw, 2.6rem); }
.pilier {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pilier__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pilier__corps { padding: clamp(1.6rem, 3vw, 2.2rem); }
/* Numéro et libellé partagent une seule pastille sombre plutôt que deux :
   ils forment une même étiquette. */
.pilier__entete {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
  background: var(--encre); border-radius: 0;
  padding: .38rem .95rem .38rem .8rem;
}
.pilier__numero { font-family: var(--titre); font-size: 1.05rem; color: var(--orange); line-height: 1; }
.pilier__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange);
}
.pilier__titre { font-size: 1.4rem; margin-bottom: .7rem; }
.pilier__corps p { color: var(--texte-doux); }

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.4rem); counter-reset: etape; }
.etape { position: relative; padding-top: 2.6rem; }
.etape::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.05rem;
  height: 1px; background: var(--ligne);
}
.etape__numero {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 0;
  background: var(--orange); color: var(--encre);
  font-size: .78rem; font-weight: 700;
}
.etape__titre { font-size: 1.2rem; margin-bottom: .5rem; }
.etape p { color: var(--texte-doux); font-size: .96rem; }

/* ---------- Aperçu des valeurs (accueil) ---------- */
.valeurs-apercu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.3rem; }
.valeurs-apercu__item {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.valeurs-apercu__item:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-active); }
.valeurs-apercu__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.valeurs-apercu__titre { font-size: 1.15rem; padding: 1.2rem 1.2rem .4rem; }
.valeurs-apercu__texte {
  padding: 0 1.2rem 1.5rem;
  font-size: .89rem; line-height: 1.62; color: var(--texte-doux);
  /* trois lignes : au-delà, les cartes se déséquilibrent selon la longueur
     du texte saisi dans le back-office */
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Valeurs (page dédiée) ---------- */
.valeur {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-bottom: 1px solid var(--ligne);
}
.valeur:last-child { border-bottom: 0; }
.valeur--inversee .valeur__media { order: 2; }
.valeur__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--rayon-carte);
}
/* Sélecteur doublé : la règle « .valeur__texte p » qui suit porte la couleur
   du corps de texte et l'emporterait sinon sur celle-ci. */
.valeur__texte .valeur__numero {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 0;
  background: var(--encre);
  font-family: var(--titre); font-size: 1.35rem;
  color: var(--orange);
  line-height: 1; margin-bottom: .8rem;
}
.valeur__titre { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .9rem; }
.valeur__texte p { color: var(--texte-doux); }

/* ---------- Sérénité ---------- */
.serenite {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.serenite__media { position: relative; }
.serenite__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--rayon-carte);
}
.serenite__chiffre {
  position: absolute; left: -12px; bottom: 26px;
  max-width: 78%;
  padding: 1.1rem 1.6rem;
  background: var(--orange); color: var(--encre);
  font-family: var(--titre); font-size: clamp(1.15rem, 2vw, 1.5rem);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(243, 146, 0, .3);
}
.serenite__texte p { color: var(--texte-doux); }
.serenite__legende {
  margin-top: 1.8rem; padding: 1.1rem 1.4rem;
  background: var(--sable-pale);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  font-size: .95rem; font-style: italic;
}

/* ==========================================================================
   AVIS GOOGLE
   ========================================================================== */

/* Dernier bloc de chaque page, juste au-dessus du pied.
   Le filet supérieur est là pour le seul cas où la section qui précède est
   elle aussi teintée — la page Contact finit sur ses questions fréquentes.
   Ailleurs, la bande d'appel sombre le précède et le filet ne se voit pas. */
.avis {
  background: var(--fond-teinte);
  border-top: 1px solid var(--ligne);
}

.avis__tete { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
.avis__tete .surtitre { justify-content: center; }
.avis__note {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .8rem;
  margin-top: .8rem;
}
.avis__chiffre {
  font-family: var(--titre); font-size: 2.4rem; line-height: 1;
  color: var(--encre);
}
.avis__etoiles { display: inline-flex; gap: 2px; }
.avis__etoile { display: block; width: 20px; height: 20px; color: var(--ligne); }
.avis__etoile svg { width: 100%; height: 100%; }
.avis__etoile--pleine { color: #f5a623; }
.avis__total { font-size: .93rem; color: var(--texte-doux); }

/* ---------- Carrousel ----------
   La piste défile nativement : sans JavaScript elle reste parcourable au
   doigt, à la molette et au clavier, et le script ne fait que piloter ce
   même défilement. Une transformation CSS aurait rendu les avis suivants
   inaccessibles dès que le script ne se charge pas. */
.avis__carrousel { position: relative; }

.avis__piste {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* la marge intérieure laisse respirer l'ombre des cartes, que le
     débordement masqué couperait net */
  padding: 6px 2px 1.4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.avis__piste::-webkit-scrollbar { display: none; }
.avis__piste:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 0; }

.avis__carte {
  display: flex; flex-direction: column;
  /* trois cartes visibles, les gouttières déduites */
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--ombre-carte);
}

/* ---------- Commandes du carrousel ---------- */
.avis__commandes {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem;
  margin-top: .6rem;
}
.avis__commandes[hidden] { display: none; }

.avis__fleche {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--ligne);
  border-radius: 0;
  background: var(--encre); border-color: var(--encre);
  color: var(--orange);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), opacity var(--transition);
}
.avis__fleche::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}
.avis__fleche--suiv::before { transform: rotate(225deg) translate(1px, -1px); }
.avis__fleche:hover:not(:disabled) { background: var(--orange); color: var(--encre); border-color: var(--orange); }
/* Désactivée plutôt que masquée : une commande qui disparaît déplace les
   autres, et la cible du clic se dérobe sous le curseur. */
.avis__fleche:disabled { opacity: .35; cursor: default; }

.avis__points { display: flex; align-items: center; gap: .5rem; }
/* Le script masque les pastilles sans position atteignable ; sans cette
   règle, le display:flex du parent l'emporterait sur l'attribut hidden. */
.avis__point[hidden] { display: none; }
/* La pastille se voit à 9 px mais ne se vise pas : la marge intérieure
   agrandit la cible, « content-box » gardant la peinture sur le seul
   rectangle visible. */
.avis__point {
  width: 9px; height: 9px;
  padding: 15px 0;
  box-sizing: content-box; background-clip: content-box;
  border-radius: 0;
  background-color: var(--sable-voile);
  border: 0;
  transition: background-color var(--transition), width var(--transition);
}
.avis__point:hover { background-color: var(--orange); }
.avis__point[aria-current="true"] { background-color: var(--orange); width: 26px; border-radius: 0; }
.avis__entete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
/* Médaillon d'initiales : la photo de profil Google est volontairement
   écartée, elle relancerait une requête vers un domaine tiers. */
.avis__pastille {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 0;
  background: var(--degrade-orange); color: var(--encre);
  font-size: .95rem; font-weight: 700;
}
.avis__auteur { font-weight: 700; font-size: 1rem; color: var(--encre); }
.avis__date { font-size: .82rem; color: var(--texte-doux); }
.avis__etoiles--carte { margin-bottom: .9rem; }
/* Un avis long imposait sa hauteur à toute la rangée. La carte est bornée,
   et c'est le témoignage qui défile à l'intérieur — la barre reste discrète
   et n'apparaît que lorsqu'il y a vraiment à lire plus bas. */
.avis__texte {
  font-size: .97rem; line-height: 1.68; color: var(--texte-doux);
  font-style: normal;
  max-height: 8.4em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Le navigateur dessine des barres flottantes, invisibles tant qu'on ne
   défile pas : rien n'annoncerait qu'il reste à lire. La barre est donc
   dessinée à la main, sur les seuls témoignages qui débordent — repérés par
   le script, une feuille de style ne sachant pas mesurer un débordement. */
.avis__carte--long .avis__texte {
  padding-right: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(#000 78%, rgba(0, 0, 0, .25));
  -webkit-mask-image: linear-gradient(#000 78%, rgba(0, 0, 0, .25));
}
.avis__carte--long .avis__texte::-webkit-scrollbar { display: none; }

.avis__carte--long { position: relative; }
.avis__piste-texte {
  position: absolute; right: clamp(1.5rem, 3vw, 2rem);
  width: 3px; background: var(--ligne);
}
.avis__piste-texte span {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--orange);
  transition: transform .12s linear;
}
.avis__texte::before { content: "« "; }
.avis__texte::after { content: " »"; }
.avis__source { text-align: center; margin-top: 2.4rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.coordonnees { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
.coordonnees__item { display: flex; gap: 1.1rem; }
.coordonnees__icone {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 50px; height: 50px;
  border-radius: 0;
  background: var(--encre); color: var(--orange);
}
.coordonnees__icone svg { width: 26px; height: 26px; }
.coordonnees__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux);
  margin-bottom: .25rem;
}
.coordonnees__valeur { font-size: 1.06rem; font-weight: 600; font-style: normal; color: var(--encre); line-height: 1.55; }
a.coordonnees__valeur { transition: color var(--transition); }
a.coordonnees__valeur:hover {
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.coordonnees__note { font-size: .88rem; color: var(--texte-doux); margin-top: .3rem; }

/* --- formulaire --- */
.contact__formulaire {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--ombre-carte);
}
.formulaire__titre { font-size: 1.55rem; margin-bottom: .6rem; }
.formulaire__intro { color: var(--texte-doux); font-size: .96rem; margin-bottom: 1.8rem; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.champ { display: flex; flex-direction: column; gap: .42rem; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: .84rem; font-weight: 700; color: var(--encre); }
.champ__requis {
  color: var(--orange); background: var(--encre);
  display: inline-grid; place-items: center;
  width: 1.1em; height: 1.1em; border-radius: 0;
  font-size: .72em; line-height: 1; vertical-align: .15em;
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit; font-size: .96rem;
  color: var(--texte);
  background: var(--fond-teinte);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 146, 0, .12);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: #c0392b; }
.champ__erreur { font-size: .84rem; color: #c0392b; font-weight: 600; }

.champ--case { flex-direction: row; align-items: flex-start; gap: .7rem; flex-wrap: wrap; }
/* accent-color peint la case ; le navigateur y dessine une coche blanche,
   illisible sur l'orange. La case est donc à l'encre et l'orange marque le
   focus, où il n'a pas de texte à porter. */
.champ--case input { width: auto; margin-top: .28rem; accent-color: var(--encre); flex: 0 0 auto; }
.champ--case input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.champ--case label { font-weight: 500; font-size: .9rem; line-height: 1.55; color: var(--texte-doux); flex: 1; }
.champ--case .champ__erreur { flex-basis: 100%; }

.formulaire__mention {
  grid-column: 1 / -1;
  font-size: .82rem; color: var(--texte-doux); line-height: 1.6;
}
.formulaire > .btn { grid-column: 1 / -1; justify-self: start; }

/* Piège à robots : retiré du flux sans display:none, que certains robots
   savent détecter. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alerte { padding: .95rem 1.2rem; border-radius: var(--rayon); font-size: .93rem; margin-bottom: 1.4rem; }
.alerte--erreur { background: #fdecea; color: #97231a; border: 1px solid #f5c6c2; }

.msg-succes {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--sable-pale);
  border: 1px solid var(--sable-voile);
  border-radius: var(--rayon-carte);
  font-size: 1.08rem;
}
/* Lien au fil du texte : impossible de lui caler un fond sombre sans casser
   la ligne. Le mot reste donc à l'encre et c'est le soulignement, qui ne
   porte aucun texte, qui prend l'orange. */
.msg-succes a {
  color: var(--encre); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* --- FAQ --- */
.faq { display: grid; gap: .8rem; }
.faq__item {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.7rem);
  font-family: var(--titre); font-size: 1.12rem; color: var(--encre);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(225deg) translateY(-2px); }
/* Le chevron seul réagit : un libellé orange sur le fond clair de la
   question ne se lirait pas. */
.faq__question:hover::after { border-color: var(--orange-sombre); transform: rotate(45deg) translateY(-2px) scale(1.2); }
.faq__reponse {
  padding: 0 clamp(1.1rem, 2.5vw, 1.7rem) 1.4rem;
  color: var(--texte-doux); font-size: .97rem;
}

/* ==========================================================================
   BANDE D'APPEL À L'ACTION
   ========================================================================== */

/* Aplat gris uni, sans dégradé : la bande précède immédiatement le pied de
   page, plus sombre encore. Les deux gris se distinguent d'eux-mêmes, et un
   filet orange marque le haut de la bande sans rien réchauffer d'autre. */
.bande-cta {
  position: relative;
  padding: clamp(3.4rem, 7vw, 5.4rem) 0;
  background: var(--encre-2);
  text-align: center;
}
.bande-cta::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--orange);
}
.bande-cta .surtitre { justify-content: center; }
.bande-cta__titre {
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  color: #fff;
  margin-bottom: 1.1rem;
}
.bande-cta__texte {
  max-width: 660px; margin: 0 auto;
  color: rgba(255, 255, 255, .82);
  font-size: 1.06rem;
}
.bande-cta__actions {
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  margin-top: 2.2rem;
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, .72);
  padding: clamp(3rem, 6vw, 4.6rem) 0 2rem;
  font-size: .94rem;
}
.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pied h2 {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange);
  font-family: var(--texte-police);
  margin-bottom: 1.2rem;
}
.pied__embleme { height: 56px; width: auto; display: block; }
.pied__accroche { margin-top: 1.2rem; color: rgba(255, 255, 255, .7); }
.pied__tel {
  display: inline-block; margin-top: .7rem;
  font-family: var(--titre); font-size: 1.5rem; color: #fff;
  transition: color var(--transition);
}
.pied__tel:hover { color: var(--orange); }

.pied__liens { display: grid; gap: .6rem; }
/* Le lien reste en ligne pour que le trait s'arrête au mot et non au bord
   de la colonne : souligner du vide ne désigne rien. */
.pied__liens a {
  position: relative; display: inline-block;
  transition: color var(--transition), padding-left var(--transition);
}
.pied__liens a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.32, .72, .3, 1);
}
.pied__liens a:hover, .pied__liens a:focus-visible { color: var(--orange); padding-left: .3rem; }
.pied__liens a:hover::after, .pied__liens a:focus-visible::after { transform: scaleX(1); }

.pied address { font-style: normal; display: grid; gap: 1rem; }
.pied__ligne { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.6; }
.pied__ligne + .pied__ligne { margin-top: 0; }
.pied__icone {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 0;
  background: rgba(255, 255, 255, .07);
  color: var(--orange);
}
.pied__icone svg { width: 19px; height: 19px; }
.pied__contact a { transition: color var(--transition); }
.pied__contact a:hover { color: var(--orange); }

.pied__seo {
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem; line-height: 1.7;
  color: rgba(255, 255, 255, .5);
}
.pied__seo p + p { margin-top: .5rem; }

/* « space-between » centrait le bloc du milieu entre ses voisins, et non
   dans la page : les deux extrémités n'ayant pas la même largeur, il
   penchait toujours d'un côté. Trois colonnes dont les deux extérieures
   partagent le reste le placent sur l'axe. */
.pied__bas {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .8rem 1.4rem;
  padding-top: 1.6rem;
  font-size: .84rem; color: rgba(255, 255, 255, .55);
}
.pied__bas > :last-child { justify-self: end; text-align: right; }
.pied__bas > :first-child { justify-self: start; }
.pied__legal a { transition: color var(--transition); }
.pied__legal a:hover { color: var(--orange); }

/* ==========================================================================
   PAGE D'ERREUR
   ========================================================================== */

.erreur-page {
  display: grid; place-items: center; text-align: center;
  min-height: 76vh;
  padding: calc(var(--entete-h) + 3rem) var(--gouttiere) 4rem;
}
.erreur-page__code {
  font-family: var(--titre); font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1; color: var(--sable-voile);
}
.erreur-page__titre { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: .6rem 0 .9rem; }
.erreur-page__texte { color: var(--texte-doux); max-width: 460px; margin: 0 auto; }
.erreur-page__actions {
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  margin-top: 2.2rem;
}

/* ==========================================================================
   SÉLECTEUR DE LANGUES
   ========================================================================== */

.langues { display: flex; align-items: center; gap: .5rem; }
/* Le mot « Langue » n'est là que pour nommer la liste aux lecteurs d'écran :
   les codes ISO suffisent à l'œil. */
.langues__nom {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.langues ul { display: flex; align-items: center; gap: .2rem; }
.langues a {
  display: block; padding: .3rem .55rem;
  border-radius: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255, 255, 255, .85);
  transition: background var(--transition), color var(--transition);
}
.langues a:hover { color: var(--orange); }
.langues a:hover { background: var(--encre); color: var(--orange); }
.langues a[aria-current="true"] { background: var(--orange); color: var(--encre); }

.langues--panneau { margin-top: .8rem; }
.langues--panneau a { color: rgba(255, 255, 255, .8); }
.langues--panneau a[aria-current="true"] { background: var(--orange); color: var(--encre); }

/* ==========================================================================
   BANDEAU COOKIES
   ========================================================================== */

/* --- bandeau --- */
/* Barre pleine largeur, et non carte posée dans un angle : sur le bandeau
   d'accueil, toute carte d'angle recouvre soit les boutons d'appel, soit la
   bulle de l'assistant. La barre ne mange que la bande basse — la jauge du
   diaporama, qu'elle masque, réapparaît dès le choix fait.
   Refuser et accepter gardent le même poids visuel, ce que la CNIL exige. */
.cookies__bandeau {
  position: fixed; inset: auto 0 0 0; z-index: 250;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.6vw, 1.7rem) var(--gouttiere);
  background: #fff;
  border-top: 2px solid var(--orange);
  box-shadow: 0 -8px 40px rgba(26, 26, 26, .16);
  animation: cookies-entree .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cookies-entree {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cookies__bandeau { animation: none; } }

.cookies__corps { flex: 1 1 380px; }
.cookies__titre { font-size: 1.15rem; margin-bottom: .35rem; }
.cookies__texte { font-size: .9rem; line-height: 1.62; color: var(--texte-doux); max-width: 760px; }
.cookies__texte a {
  color: var(--encre); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.cookies__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.cookies__actions .btn { padding: .7rem 1.4rem; font-size: .85rem; }
.cookies__reglages {
  background: none; border: 0; padding: .7rem .5rem;
  color: var(--texte-doux); font-size: .85rem; font-weight: 700;
  text-decoration: underline;
  transition: color var(--transition);
}
.cookies__reglages:hover { color: var(--encre); text-decoration-color: var(--orange); }

/* --- panneau de réglage --- */
/* Ces blocs portent l'attribut hidden tant qu'ils ne servent pas. Une règle
   d'affichage explicite l'emporterait sur le display:none du navigateur :
   il faut donc le rétablir soi-même, sans quoi le panneau s'ouvre d'emblée
   sur toutes les pages. */
.cookies [hidden] { display: none !important; }

.cookies__voile {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(15, 8, 18, .6);
  backdrop-filter: blur(3px);
}
.cookies__panneau {
  position: fixed; z-index: 270;
  inset: auto 0 0 0;
  margin-inline: auto;
  max-width: 640px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 -12px 60px rgba(26, 26, 26, .3);
}
@media (min-width: 700px) {
  .cookies__panneau {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    border-radius: 0;
  }
}
.cookies__panneau-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem clamp(1.2rem, 3vw, 1.9rem);
  border-bottom: 1px solid var(--ligne);
}
.cookies__panneau-tete h2 { font-size: 1.3rem; }
.cookies__fermer {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 0;
  font-size: 1.5rem; line-height: 1; color: var(--texte-doux);
  transition: background var(--transition), color var(--transition);
}
.cookies__fermer:hover { background: var(--encre); color: var(--orange); }

.cookies__panneau-corps {
  flex: 1; overflow-y: auto;
  padding: clamp(1.2rem, 3vw, 1.9rem);
  display: grid; gap: 1rem;
}
.cookies__categorie {
  padding: 1.1rem 1.3rem;
  background: var(--fond-teinte);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}
.cookies__categorie-tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .5rem;
}
.cookies__categorie h3 { font-size: 1.02rem; font-family: var(--texte-police); font-weight: 700; }
.cookies__categorie p { font-size: .87rem; color: var(--texte-doux); line-height: 1.62; }
.cookies__toujours {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  background: var(--encre);
  padding: .3rem .7rem; border-radius: 0;
}

/* Interrupteur : la case native reste seule cible du clavier, le curseur
   n'est qu'un décor — d'où le pointer-events implicite sur le label. */
.cookies__bascule { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.cookies__bascule input {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.cookies__curseur {
  position: relative; display: block;
  width: 46px; height: 26px; flex: 0 0 auto;
  background: #cfc7d3; border-radius: 0;
  transition: background var(--transition);
}
.cookies__curseur::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 0;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform var(--transition);
}
.cookies__bascule input:checked + .cookies__curseur { background: var(--orange); }
.cookies__bascule input:checked + .cookies__curseur::after { transform: translateX(20px); }
.cookies__bascule input:focus-visible + .cookies__curseur {
  outline: 2px solid var(--orange); outline-offset: 3px;
}
.cookies__bascule-nom {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.cookies__panneau-pied {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end;
  padding: 1.2rem clamp(1.2rem, 3vw, 1.9rem);
  border-top: 1px solid var(--ligne);
}
.cookies__panneau-pied .btn { padding: .7rem 1.3rem; font-size: .85rem; }

/* ==========================================================================
   ADAPTATIF
   ========================================================================== */

/* La barre horizontale n'apparaît qu'à partir de la largeur où cinq entrées,
   un numéro de téléphone et un bouton tiennent sans se chevaucher. En deçà,
   les deux dispositions se rejoignent sur le panneau glissant. */
@media (min-width: 1080px) {
  .entete--horizontal .navbar { display: block; }
  .entete--horizontal .burger { display: none; }
}

@media (max-width: 1180px) {
  .cartes--clients { grid-template-columns: repeat(3, 1fr); }
  .valeurs-apercu { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1079px) {
  .entete--horizontal .entete__barre { justify-content: space-between; }
  /* Sans la navigation centrale, le logo reprend la place qu'il occupe en
     disposition latérale : les deux en-têtes redeviennent identiques. */
  .entete--horizontal .entete__logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .entete--horizontal .entete__logo img { height: 60px; }
}

@media (max-width: 1024px) {
  .cartes--services { grid-template-columns: repeat(2, 1fr); }
  .avis__carte { flex-basis: calc((100% - 1.5rem) / 2); }
  .contact { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --entete-h: 78px; --entete-h-compact: 64px; }

  .entete__tel { display: none; }
  .indicateurs { margin-top: -2.4rem; }
  .indicateurs__liste { grid-template-columns: repeat(2, 1fr); }
  .indicateurs__item:nth-child(2n) { border-right: 0; }
  .indicateurs__item:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); }

  .duo, .serenite, .valeur, .piliers, .cartes--services-large {
    grid-template-columns: 1fr;
  }
  /* L'alternance gauche/droite n'a plus de sens sur une colonne : l'image
     repasse systématiquement au-dessus du texte. */
  .valeur--inversee .valeur__media { order: 0; }
  .duo__media::after { display: none; }
  .duo__media img, .serenite__media img { aspect-ratio: 16 / 11; }
  .serenite__chiffre { left: 0; bottom: 16px; font-size: 1.1rem; padding: .9rem 1.2rem; }

  .etapes { grid-template-columns: 1fr; gap: 1.8rem; }
  .etape::before { display: none; }

  .valeurs-apercu { grid-template-columns: repeat(2, 1fr); }
  .cartes--clients { grid-template-columns: repeat(2, 1fr); }
  .avis__carte { flex-basis: 100%; }

  .formulaire { grid-template-columns: 1fr; }
  .heros { min-height: 540px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .entete__cta { display: none; }
  .cartes--services, .valeurs-apercu, .cartes--clients { grid-template-columns: 1fr; }
  .indicateurs__liste { grid-template-columns: 1fr; }
  .indicateurs__item { border-right: 0; border-bottom: 1px solid var(--ligne); }
  .indicateurs__item:last-child { border-bottom: 0; }
  .pied__haut { grid-template-columns: 1fr; }
  /* Une seule colonne : les trois blocs s'empilent, alignés à gauche comme
     le reste du pied. */
  .pied__bas { grid-template-columns: 1fr; justify-items: start; }
  .pied__bas > :last-child { justify-self: start; text-align: left; }
  .btn { width: 100%; }
  .heros__actions .btn, .bande-cta__actions .btn, .erreur-page__actions .btn { width: auto; flex: 1 1 auto; }
}

@media print {
  .entete, .panneau, .voile, .cookies, .bande-cta, .burger { display: none !important; }
  body { color: #000; background: #fff; }
  .heros { min-height: auto; padding: 1rem 0; }
  .heros__fond { display: none; }
  .heros__titre, .heros__texte { color: #000; }
}

/* ---------- Bande « Fabriqué en France » ----------
   Fond sombre pour trancher avec les sections claires qui l'encadrent ;
   le liseré tricolore y est repris en petit format, au-dessus du surtitre. */
.france {
  position: relative;
  background: var(--encre);
  color: rgba(255, 255, 255, .78);
  padding: clamp(3.2rem, 6vw, 5.2rem) 0;
}
.france::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--bleu-france) 0 33.333%,
    #ffffff 33.333% 66.666%,
    var(--rouge-france) 66.666% 100%);
}
.france__grille {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
}
.france__drapeau { display: flex; width: 66px; margin-bottom: 1.1rem; }
.france__bande { height: 5px; flex: 1 1 0; border-radius: 0; }
.france__bande--bleu  { background: #3d5fa8; }
.france__bande--blanc { background: #ffffff; margin-inline: 3px; }
.france__bande--rouge { background: #d4545e; }
.france__titre {
  font-family: var(--titre); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.22;
  color: #fff; margin: .35rem 0 .9rem;
}
.france__chapo { max-width: 60ch; }
.france__points { list-style: none; display: grid; gap: .75rem; }
.france__points li {
  position: relative; padding-left: 1.9rem;
  color: rgba(255, 255, 255, .86);
}
/* Coche dessinée en CSS : deux traits d'une même bordure, pivotés. Aucune
   image, aucune police d'icônes à charger. */
.france__points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .france__grille { grid-template-columns: 1fr; }
}

/* ---------- Ajouts Tréhant ---------- */

/* Le visuel « Fabriqué en France / RGE » de l'entreprise, posé sur le fond
   sombre du pied : un cartouche blanc l'isole, sinon son propre fond blanc
   découperait un rectangle brut dans le pied. */
.pied__france {
  display: block; width: 128px; height: auto; margin-top: 1.7rem;
  background: #fff; border-radius: 0; padding: .55rem .7rem;
}

/* Trois ateliers dans le même bloc d'adresse : un filet les sépare sans
   ajouter de hauteur, là où une ligne vide en aurait ajouté. */
.pied__separateur {
  display: block; width: 26px; height: 1px;
  background: rgba(255, 255, 255, .22);
  margin: .55rem 0;
}

/* Les marques prennent la couleur du texte : un seul aplat orange, aucune
   image à charger, et le même alignement optique que les autres icônes. */
.pied__reseaux { display: flex; align-items: center; gap: .6rem; margin: 0; }
.pied__reseaux a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--orange);
  transition: color var(--transition), background var(--transition);
}
.pied__reseaux a svg { display: block; width: 20px; height: 20px; }
.pied__reseaux a:hover, .pied__reseaux a:focus-visible {
  color: var(--encre); background: var(--orange);
}

/* ---------- Frise de l'histoire ----------
   Le filet vertical est peint par le ::before de la liste, et non par chaque
   étape : il court ainsi d'un bout à l'autre sans interruption entre les
   puces, et une étape ajoutée ou retirée depuis le back-office ne laisse ni
   trou ni dépassement. */
.frise { list-style: none; position: relative; padding-left: 5.6rem; }
.frise::before {
  content: ""; position: absolute; left: 4.05rem; top: .7em; bottom: .7em;
  width: 1px; background: var(--ligne);
}
.frise__etape { position: relative; padding-bottom: 1.9rem; }
.frise__etape:last-child { padding-bottom: 0; }
.frise__annee {
  /* Le millésime s'arrête avant le filet : sa largeur est calculée pour
     laisser passer la puce, qui est centrée sur le trait. */
  position: absolute; left: -5.6rem; top: -.35em; width: calc(4.05rem - 18px);
  text-align: center;
  background: var(--encre); border-radius: 0; padding: .25rem 0;
  font-family: var(--titre); font-size: 1.05rem; color: var(--orange);
}
/* La puce recouvre le filet : elle est peinte en couleur de fond, cerclée
   d'orange, pour que le trait paraisse s'interrompre sous elle. */
.frise__etape:not(.frise__etape--sans-date)::before {
  content: ""; position: absolute; left: calc(-1.55rem - 6.5px); top: .48em;
  width: 9px; height: 9px; border-radius: 0;
  background: var(--fond); border: 2px solid var(--orange);
}
.frise__texte { color: var(--texte-doux); }
@media (max-width: 640px) {
  .frise { padding-left: 1.6rem; }
  .frise::before { left: 1px; }
  .frise__annee { position: static; width: auto; text-align: left; margin-bottom: .2rem; }
  .frise__etape:not(.frise__etape--sans-date)::before { left: calc(-1.6rem - 4px); top: .6em; }
}

/* ==========================================================================
   RÉALISATIONS — filtres et galerie
   ========================================================================== */

.filtres {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 2.2rem 0 2.4rem;
}
.filtres[hidden] { display: none; }
/* Même langage que les sur-titres et les liens : pastille sombre, libellé
   orange une fois choisie. */
.filtres__bouton {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--ligne); border-radius: 0;
  background: #fff; color: var(--texte);
  font-size: .9rem; font-weight: 700;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtres__bouton:hover { border-color: var(--encre); }
.filtres__bouton[aria-pressed="true"] {
  background: var(--encre); border-color: var(--encre); color: var(--orange);
}
.filtres__compte {
  font-size: .74rem; font-weight: 700;
  color: var(--texte-doux);
  background: var(--fond-teinte);
  padding: .1rem .45rem; border-radius: 0;
}
.filtres__bouton[aria-pressed="true"] .filtres__compte {
  background: rgba(255, 255, 255, .14); color: #fff;
}

.galerie {
  list-style: none;
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(4, 1fr);
}
.galerie__item[hidden] { display: none; }
.galerie__vignette {
  display: block; width: 100%; position: relative;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--fond-teinte);
  cursor: zoom-in;
}
.galerie__vignette img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--transition);
}
.galerie__vignette:hover img { transform: scale(1.05); }
.galerie__etiquette {
  position: absolute; left: .6rem; bottom: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange); background: var(--encre);
  padding: .3rem .65rem; border-radius: 0;
}
.galerie__vide { margin-top: 2rem; color: var(--texte-doux); }
.galerie__vide[hidden] { display: none; }

@media (max-width: 900px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .galerie { grid-template-columns: repeat(2, 1fr); } }

/* --- visionneuse --- */
body.visionneuse-ouverte { overflow: hidden; }
/* Les flèches étaient posées de part et d'autre de la photo, dans le même
   flux qu'elle : une photo verticale les rapprochait, une panoramique les
   écartait, et l'œil devait les rechercher à chaque changement. Ancrées aux
   bords de l'écran, elles ne bougent plus d'une image à l'autre — la marge
   intérieure leur réserve la place pour que la photo ne passe jamais
   dessous. */
.visionneuse {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-inline: clamp(4.6rem, 9vw, 8rem);
  background: rgba(10, 10, 10, .93);
}
/* Une règle d'affichage explicite l'emporterait sur l'attribut hidden : il
   faut le rétablir soi-même dans la portée concernée. */
.visionneuse[hidden] { display: none; }
.visionneuse__cadre {
  max-width: min(1200px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
}
.visionneuse__cadre img {
  max-width: 100%; max-height: calc(100vh - 9rem);
  object-fit: contain; border-radius: var(--rayon);
}
.visionneuse__cadre figcaption {
  color: rgba(255, 255, 255, .82); font-size: .92rem; text-align: center;
}
.visionneuse__fermer,
.visionneuse__nav {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.visionneuse__fermer:hover,
.visionneuse__nav:hover { background: var(--orange); border-color: var(--orange); }
.visionneuse__fermer { position: absolute; top: 1.2rem; right: 1.2rem; }
.visionneuse__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
}
.visionneuse__nav--avant { left: clamp(1rem, 2.5vw, 2.2rem); }
.visionneuse__nav--apres { right: clamp(1rem, 2.5vw, 2.2rem); }
/* Croix et chevrons dessinés en CSS : ni image ni police d'icônes. */
.visionneuse__fermer::before,
.visionneuse__fermer::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 2px; margin: -1px 0 0 -8px;
  background: #fff;
}
.visionneuse__fermer::before { transform: rotate(45deg); }
.visionneuse__fermer::after { transform: rotate(-45deg); }
.visionneuse__fermer:hover::before,
.visionneuse__fermer:hover::after { background: var(--encre); }
.visionneuse__nav::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -6px 0 0 -4px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.visionneuse__nav--avant::before { transform: rotate(-135deg); margin-left: -7px; }
.visionneuse__nav--apres::before { transform: rotate(45deg); }
.visionneuse__nav:hover::before { border-color: var(--encre); }

@media (max-width: 720px) {
  /* Au pouce, les flèches passent en bas, mais toujours à une place fixe. */
  .visionneuse { padding-inline: clamp(1rem, 4vw, 3rem); }
  .visionneuse__nav { top: auto; bottom: 1.4rem; transform: none; }
  .visionneuse__nav--avant { left: 25%; }
  .visionneuse__nav--apres { right: 25%; }
  .visionneuse__cadre img { max-height: calc(100vh - 13rem); }
}

/* ==========================================================================
   ASSISTANT DE DISCUSSION
   ========================================================================== */

.assistant {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 250;
  display: flex; flex-direction: column; align-items: flex-end; gap: .8rem;
}

.assistant__bulle {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .85rem 1.3rem .85rem 1.1rem;
  border-radius: 0;
  background: var(--orange); color: var(--encre);
  font-weight: 700; font-size: .93rem;
  box-shadow: 0 6px 18px rgba(243, 146, 0, .3), 0 14px 40px rgba(26, 26, 26, .18);
  transition: transform var(--transition), box-shadow var(--transition);
}
.assistant__bulle:hover { transform: translateY(-2px); }
/* Bulle de dialogue dessinée en CSS : ni image ni police d'icônes. */
.assistant__bulle-icone {
  position: relative; width: 20px; height: 16px; flex: 0 0 auto;
  border: 2px solid currentColor; border-radius: 0;
}
.assistant__bulle-icone::after {
  content: ""; position: absolute; left: 3px; bottom: -6px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.assistant--ouvert .assistant__bulle { display: none; }

.assistant__panneau {
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 6rem));
  display: flex; flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--ligne); border-radius: var(--rayon-carte);
  box-shadow: 0 24px 70px rgba(26, 26, 26, .28);
  overflow: hidden;
}
/* Une règle d'affichage explicite l'emporterait sur l'attribut hidden. */
.assistant__panneau[hidden] { display: none; }

.assistant__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem;
  background: var(--encre);
}
.assistant__titre {
  font-weight: 700; font-size: .95rem; color: var(--orange);
  letter-spacing: .04em;
}
.assistant__fermer {
  position: relative; width: 30px; height: 30px; border-radius: 0; flex: 0 0 auto;
  background: rgba(255, 255, 255, .1);
  transition: background var(--transition);
}
.assistant__fermer:hover { background: var(--orange); }
.assistant__fermer::before, .assistant__fermer::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #fff;
}
.assistant__fermer::before { transform: rotate(45deg); }
.assistant__fermer::after { transform: rotate(-45deg); }
.assistant__fermer:hover::before, .assistant__fermer:hover::after { background: var(--encre); }

.assistant__fil {
  flex: 1; overflow-y: auto;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--fond-teinte);
}
.assistant__message {
  max-width: 86%; padding: .7rem .95rem; border-radius: 0;
  font-size: .92rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.assistant__message--robot {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--ligne); color: var(--texte);
  
}
.assistant__message--visiteur {
  align-self: flex-end;
  background: var(--encre); color: #fff;
  
}
.assistant__message--erreur {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--orange); color: var(--texte);
}
.assistant__message--attente { color: var(--texte-doux); letter-spacing: .2em; }

.assistant__saisie {
  display: flex; align-items: flex-end; gap: .6rem;
  padding: .8rem; border-top: 1px solid var(--ligne);
  background: var(--fond);
}
.assistant__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.assistant__saisie textarea {
  flex: 1; resize: none; max-height: 120px;
  padding: .65rem .8rem;
  border: 1px solid var(--ligne); border-radius: 0;
  font: inherit; font-size: .93rem; color: var(--texte);
  background: var(--fond-teinte);
}
.assistant__saisie textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.assistant__envoyer {
  position: relative; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 0;
  background: var(--orange);
  transition: background var(--transition), opacity var(--transition);
}
.assistant__envoyer:disabled { opacity: .5; }
/* Flèche vers le haut, deux traits d'une même bordure pivotés. */
.assistant__envoyer::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -3px 0 0 -5px;
  border-top: 2px solid var(--encre); border-left: 2px solid var(--encre);
  transform: rotate(45deg);
}
.assistant__envoyer::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 14px; margin: -7px 0 0 -1px;
  background: var(--encre);
}

/* --- passage à l'action --- */
.assistant__action {
  padding: .7rem .8rem 0;
  background: var(--fond);
}
.assistant__rappel {
  display: block; width: 100%;
  padding: .7rem 1rem;
  background: var(--encre); color: var(--orange);
  font-weight: 700; font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.assistant__rappel:hover { background: var(--orange); color: var(--encre); }

.assistant__contact {
  padding: .9rem .8rem .2rem;
  background: var(--fond);
  display: grid; gap: .35rem;
}
/* Une règle d'affichage explicite l'emporterait sur l'attribut hidden. */
.assistant__contact[hidden] { display: none; }
.assistant__contact-titre { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.assistant__contact label {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-doux);
}
.assistant__contact input {
  padding: .55rem .7rem;
  border: 1px solid var(--ligne); background: var(--fond-teinte);
  font: inherit; font-size: .92rem; color: var(--texte);
}
.assistant__contact input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.assistant__contact-aide { font-size: .76rem; color: var(--texte-doux); }
.assistant__contact-actions {
  display: flex; align-items: center; gap: .8rem; margin-top: .5rem;
}
.assistant__contact-actions .btn { padding: .6rem 1.2rem; font-size: .86rem; }
.assistant__contact-annuler { font-size: .84rem; color: var(--texte-doux); text-decoration: underline; }

/* Pastille orange sur la bulle : une discussion est en cours, reprise d'une
   page précédente. */
.assistant--repris .assistant__bulle::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px;
  background: var(--encre); border: 2px solid var(--orange);
}
.assistant__bulle { position: relative; }

.assistant__mention {
  padding: 0 1.1rem .9rem;
  font-size: .74rem; line-height: 1.5; color: var(--texte-doux);
  background: var(--fond);
}

@media (max-width: 520px) {
  .assistant { right: .8rem; bottom: .8rem; left: .8rem; align-items: stretch; }
  .assistant__bulle { align-self: flex-end; }
  .assistant__panneau { width: 100%; height: min(72vh, 560px); }
}
@media print { .assistant { display: none !important; } }

/* ==========================================================================
   TÉLÉPHONE — corrections mesurées sur iPhone SE (320) et iPhone 12 (390)
   ========================================================================== */

/* Le monogramme est posé au centre absolu de la barre, le nom part de la
   gauche : sous 780 px les deux se rencontrent, et le monogramme passait
   par-dessus le mot « TRÉHANT ».

   Le monogramme quitte donc le centre absolu pour rejoindre le nom dans le
   flux : les deux forment un bloc, et c'est ce bloc qui est centré. Le
   burger passe en position absolue à gauche, sinon il pousserait le bloc
   hors de l'axe. Rien ne disparaît, rien ne se superpose. */
@media (max-width: 780px) {
  .entete__barre { justify-content: center; gap: .8rem; }
  .entete--lateral .entete__barre { justify-content: center; }

  .burger {
    position: absolute; left: clamp(1rem, 3vw, 2.4rem); top: 50%;
    transform: translateY(-50%);
  }

  .entete__logo {
    position: static; transform: none;
    order: -1;
  }
  .entete__embleme { height: 38px; }

  /* Le nom se resserre pour laisser sa place au monogramme : c'est
     l'interlettrage, très large sur grand écran, qui coûte le plus. */
  .entete__nom { font-size: .78rem; letter-spacing: .1em; }
  .entete__baseline { font-size: .54rem; letter-spacing: .12em; }
  .entete__mots { margin-right: 0; }

  /* La droite de la barre est vide à cette largeur : la garder dans le flux
     décalerait le bloc central d'autant. */
  .entete__droite { display: none; }
}

/* Sous 380 px, le burger et le bloc se touchaient encore. */
@media (max-width: 380px) {
  .entete__nom { font-size: .68rem; letter-spacing: .07em; }
  .entete__baseline { font-size: .48rem; letter-spacing: .1em; }
  .entete__embleme { height: 32px; }
}

@media (max-width: 640px) {
  /* Le libellé de la bulle occupait 55 % de la largeur d'un iPhone SE et
     recouvrait le bouton d'appel du bandeau. Le picto seul suffit : la
     forme et la place en bas à droite sont devenues une convention. */
  .assistant__bulle {
    width: 54px; height: 54px;
    padding: 0; gap: 0;
    justify-content: center;
  }
  .assistant__bulle-texte {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  .assistant__bulle-icone { width: 24px; height: 19px; }

  /* Ouvert, le panneau prend l'écran : à 380 px de large dans 390 px de
     fenêtre, il n'y a rien à gagner à le garder flottant. */
  .assistant__panneau {
    width: calc(100vw - 1.4rem);
    height: min(78vh, calc(100dvh - 5.5rem));
  }

  /* Deux colonnes de réalisations tenaient dans la largeur, mais leur
     étiquette repassait sur deux lignes et mangeait la photo. */
  .galerie { grid-template-columns: 1fr; }
  .galerie__etiquette { left: 0; bottom: 0; font-size: .7rem; padding: .45rem .8rem; }

  /* L'astérisque tenait dans une pastille d'une dizaine de pixels : à
     l'écran, un point sombre indéchiffrable. */
  .champ__requis {
    width: 1.35em; height: 1.35em; font-size: .8em;
  }

  /* Un sur-titre de trois lignes n'est plus un sur-titre : l'interlettrage
     large, qui fait sa tenue sur grand écran, le fait déborder ici. */
  .surtitre, .surtitre.surtitre {
    font-size: .66rem; letter-spacing: .14em;
    padding: .38rem .7rem .38rem .6rem;
  }
  .surtitre::before { width: 12px; }

  /* Les liens du pied faisaient 18 px de haut : sous le doigt, on vise à
     côté. Le pouce demande 40 px, la marge intérieure les donne sans
     toucher à la taille du texte. */
  .pied__liens a { display: inline-block; padding-block: .55rem; }

  /* Même raison pour les autres cibles du pied et de la barre : le pouce
     demande une quarantaine de pixels, que la marge intérieure donne sans
     changer une seule taille de texte. */
  .pied__legal a,
  .pied__tel,
  .pied__contact a { display: inline-block; padding-block: .6rem; }
  .pied__reseaux a { width: 42px; height: 42px; }
  .coordonnees__valeur { display: inline-block; padding-block: .6rem; }
  .entete__mots { padding-block: .55rem; }

  /* La case de consentement se visait au pixel près. */
  .champ--case input[type="checkbox"],
  input[type="checkbox"] { width: 22px; height: 22px; }
}