/* Structure et mise en forme. AUCUNE couleur littérale ici : tout vient des
   tokens générés (assets/tokens.css). Les nuances intermédiaires sont
   composées avec color-mix() à partir des cinq rôles. */

:root {
  --pas: 8px;
  --largeur-max: 72rem;
  --largeur-texte: 42rem;
  --rayon: 14px;
  --rayon-petit: 8px;
  --respire: clamp(3.25rem, 5.5vw, 5.25rem);
  --ombre: 0 1px 2px color-mix(in srgb, var(--texte) 8%, transparent),
           0 12px 28px -12px color-mix(in srgb, var(--texte) 22%, transparent);
  --ombre-forte: 0 2px 4px color-mix(in srgb, var(--texte) 10%, transparent),
                 0 24px 48px -18px color-mix(in srgb, var(--texte) 32%, transparent);
}

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

body {
  margin: 0;
  background: var(--fond-site);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--largeur-max); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); overflow-wrap: anywhere; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
p, li, figcaption { overflow-wrap: anywhere; }

a { color: var(--soulignage); text-underline-offset: .18em; }
:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--soulignage);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--pas) * 1.6) calc(var(--pas) * 3.2);
  background: var(--soulignage); color: var(--texte-sur-soulignage);
  border: 2px solid var(--soulignage); border-radius: 999px;
  text-decoration: none; font-weight: 650; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton--grand { padding: calc(var(--pas) * 2) calc(var(--pas) * 4); font-size: 1.05rem; }
.bouton--inverse {
  background: var(--fond-site); color: var(--soulignage); border-color: var(--fond-site);
}
button.bouton { cursor: pointer; font-family: inherit; }

/* ---------- en-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond-site) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.barre {
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2);
  align-items: center; justify-content: space-between;
  padding-top: calc(var(--pas) * 1.75); padding-bottom: calc(var(--pas) * 1.75);
}
.marque {
  display: inline-flex; align-items: center; gap: calc(var(--pas) * 1.25);
  font-family: var(--police-titre); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.015em; text-decoration: none; color: var(--texte);
}
.logo { height: 42px; width: auto; border-radius: var(--rayon-petit); }
.initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--rayon-petit);
  background: var(--soulignage); color: var(--texte-sur-soulignage); font-weight: 700;
}
.entete nav { display: flex; gap: calc(var(--pas) * 2.5); flex-wrap: wrap; }
.entete nav a {
  color: var(--texte-doux); text-decoration: none; font-weight: 550; font-size: .97rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.entete nav a:hover { color: var(--texte); border-bottom-color: var(--soulignage); }
/* La page ouverte se reconnaît dans le menu (aria-current, TPL-02) : même
   marque que le survol, tenue. */
.entete nav a[aria-current="page"], .flanc nav a[aria-current="page"] { color: currentColor; border-bottom-color: var(--soulignage); }
.actions { display: flex; gap: calc(var(--pas) * 1.5); align-items: center; }
.tel { font-weight: 650; text-decoration: none; color: var(--texte); white-space: nowrap; }
@media (max-width: 60rem) { .entete nav, .tel { display: none; } }

/* L'EN-TÊTE TIENT SUR UNE LIGNE À 1440 px, MÊME AVEC UN LOGO LONG (TPL-02,
   constat ARC-01 : quinze structures passaient sur deux lignes — téléphone et
   bouton rejetés sous le logo — parce que marque + cinq liens + actions
   dépassaient de quelques dizaines de pixels l'enveloppe de 72 rem).
   Trois gestes, aucun réordonnancement : l'enveloppe de l'en-tête s'élargit
   à 80 rem (elle seule — le contenu garde sa mesure), l'écart entre les liens
   devient fluide, la marque et les actions ne se compressent pas et le nom ne
   se coupe pas. La barre garde le droit de passer à la ligne : les structures
   qui le demandent (onglets sous le logo) le gardent. Au-dessous de 60 rem,
   rien ne change : les liens sont dans le menu. */
@media (min-width: 60rem) {
  .entete .enveloppe { max-width: 80rem; }
  .entete nav { gap: clamp(0.75rem, 1.4vw, 1.25rem); }
  .marque, .actions { flex-shrink: 0; }
  .marque > span { white-space: nowrap; }
}

/* ---------- bandeau d'accueil ---------- */

.hero { position: relative; padding: var(--respire) 0; overflow: hidden; }
.hero__corps { position: relative; z-index: 2; max-width: 54rem; }
.hero__sur {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 650; color: var(--soulignage); margin: 0 0 calc(var(--pas) * 2);
}
.hero .chapeau {
  font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--texte-doux);
  max-width: var(--largeur-texte); margin: calc(var(--pas) * 2.5) 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); margin-top: calc(var(--pas) * 4.5); }

/* Bandeau avec photo : le texte passe en clair sur un voile sombre,
   dont l'opacité est calculée pour rester lisible sur n'importe quelle image. */
.hero--image { padding: calc(var(--respire) * 1.5) 0; min-height: 32rem; display: flex; align-items: center; }
.hero--image .hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero--image .hero__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--image .hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--texte) 78%, transparent) 0%,
    color-mix(in srgb, var(--texte) 52%, transparent) 42%,
    color-mix(in srgb, var(--texte) 18%, transparent) 100%);
}
.hero--image .hero__corps, .hero--image h1 { color: var(--fond-site); }
.hero--image .hero__sur { color: color-mix(in srgb, var(--fond-site) 82%, var(--soulignage)); }
.hero--image .chapeau { color: color-mix(in srgb, var(--fond-site) 88%, transparent); }

/* ---------- sections ---------- */

section { padding: var(--respire) 0; }
.section__titre { margin-bottom: calc(var(--pas) * 4); }
.section__titre--clair { color: var(--texte-sur-soulignage); }
.section__intro { color: var(--texte-doux); max-width: var(--largeur-texte); margin: calc(var(--pas) * -3) 0 calc(var(--pas) * 4); }
.services { background: var(--fond-bloc); }

.grille { display: grid; gap: calc(var(--pas) * 3); }
.grille--services { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.carte {
  background: var(--fond-site); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: calc(var(--pas) * 4); margin: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.carte--service:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--soulignage) 40%, var(--filet)); }
.carte h3 { margin-bottom: calc(var(--pas) * 1.5); }
.carte p { color: var(--texte-doux); margin: 0; }
.carte__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--soulignage) 12%, var(--fond-site));
  color: var(--soulignage); margin-bottom: calc(var(--pas) * 2.5);
}

/* ---------- chiffres ---------- */

.bandeau-chiffres { background: var(--soulignage); color: var(--texte-sur-soulignage); padding: calc(var(--respire) * .8) 0; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: calc(var(--pas) * 4); }
.chiffre { display: flex; flex-direction: column; gap: calc(var(--pas) * .5); }
.valeur {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.libelle { color: color-mix(in srgb, var(--texte-sur-soulignage) 78%, transparent); font-size: .98rem; }

/* ---------- réalisations ---------- */

.grille--galerie { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.realisation {
  margin: 0; border-radius: var(--rayon); overflow: hidden;
  background: var(--fond-bloc); border: 1px solid var(--filet);
}
.realisation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.realisation figcaption { display: block; padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3); }
.realisation figcaption strong { display: block; font-family: var(--police-titre); font-size: 1.1rem; }
.realisation figcaption span { display: block; color: var(--texte-doux); font-size: .95rem; margin-top: calc(var(--pas) * .75); }
@media (min-width: 60rem) {
  .grille--galerie { grid-template-columns: repeat(3, 1fr); }
  .realisation--large { grid-column: span 2; grid-row: span 2; }
  .realisation--large img { aspect-ratio: 16 / 11; height: auto; }
}

/* ---------- zone d'intervention ---------- */

.zone { background: var(--fond-bloc); }
.villes, .labels { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.25); }
.villes li {
  background: var(--fond-site); border: 1px solid var(--filet); border-radius: 999px;
  padding: calc(var(--pas) * .9) calc(var(--pas) * 2.25); font-weight: 550;
}
.labels li { display: flex; align-items: center; gap: var(--pas); background: var(--fond-bloc); border: 1px solid var(--filet); border-radius: 999px; padding: calc(var(--pas)) calc(var(--pas) * 2.25); }
.labels img { max-height: 44px; width: auto; }

/* ---------- relance ---------- */

.relance { background: var(--soulignage); color: var(--texte-sur-soulignage); text-align: center; }
.relance__corps { display: flex; flex-direction: column; align-items: center; }
.relance h2 { color: var(--texte-sur-soulignage); max-width: 28ch; }
.relance .hero__actions { justify-content: center; margin-top: calc(var(--pas) * 4); }

/* ---------- prose et formulaire ---------- */

.prose { max-width: var(--largeur-texte); }
.prose p { color: var(--texte-doux); font-size: 1.1rem; }
.prose img { width: 100%; border-radius: var(--rayon); margin-top: calc(var(--pas) * 4); }

label { display: block; margin-bottom: calc(var(--pas) * .75); font-weight: 600; font-size: .95rem; }
input, textarea {
  width: 100%; max-width: 36rem; padding: calc(var(--pas) * 1.75);
  border: 1px solid var(--filet); border-radius: var(--rayon-petit);
  font: inherit; margin-bottom: calc(var(--pas) * 2.5);
  background: var(--fond-site); color: var(--texte);
}
input:focus, textarea:focus { border-color: var(--soulignage); }
.pot-de-miel { position: absolute; left: -9999px; }

/* ---------- pied ---------- */

.pied {
  background: color-mix(in srgb, var(--texte) 96%, var(--soulignage));
  color: color-mix(in srgb, var(--fond-site) 86%, transparent);
  font-size: .95rem;
}
.pied a { color: var(--fond-site); }
.pied strong { color: var(--fond-site); }

/* Carte de service illustrée : la photo prend le haut, le texte respire en
   dessous. Sans photo, la carte garde son icône — elle ne reste jamais vide. */
.carte--illustree { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carte--illustree .carte__corps { padding: calc(var(--pas) * 3.5); }
.carte:not(.carte--illustree) .carte__corps { display: contents; }

/* ---------- pied de page ---------- */

/* LA MAQUETTE DU COMMANDITAIRE (validée le 17/08) : une grille de colonnes —
   identité, adresse et horaires, contact, navigation — séparée du contenu par
   un filet, puis une barre basse sous un second filet.

   UNE SEULE RÈGLE DE COULEUR ICI : tout se compose avec `currentColor`, jamais
   avec un rôle de palette. Ce n'est pas un goût, c'est la seule forme qui
   tienne : trois structures sur dix-huit repeignent le pied avec leur propre
   palette — `artisan-chantier-v1` et `tertiaire-meridien-v1` ont un pied CLAIR
   (`--fond-bloc` / `--texte-doux`), `tertiaire-orbite-v1` un pied sombre en
   variables locales (`--nuit` / `--clair-doux`). Une nuance écrite en
   `--fond-site` y devient blanc sur blanc. Le défaut existait déjà : les
   horaires de `tertiaire-meridien-v1` étaient peints en `--fond-site` 62 % sur
   un fond clair — invisibles. `currentColor` suit le pied de chaque structure
   et de chaque palette, en clair comme en sombre. */

.pied__corps {
  padding-top: calc(var(--pas) * 2);
  padding-bottom: calc(var(--pas) * 3);
}

/* Le filet qui sépare la grille du contenu de la page. Il vit à l'INTÉRIEUR de
   l'enveloppe, avec de l'air au-dessus : posé sur le bord du pied, il
   doublerait la bordure que trois structures y ont déjà. */
.pied__grille {
  padding-top: calc(var(--pas) * 4);
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  display: grid;
  gap: calc(var(--pas) * 4) calc(var(--pas) * 4);
  /* UNE, DEUX OU QUATRE COLONNES — JAMAIS TROIS. Quatre blocs dans trois
     colonnes laissent un orphelin en seconde ligne, et une ligne de grille se
     règle sur son bloc le plus haut : à 480 px, trois colonnes rendent un pied
     de 746 px là où deux en rendent 687. Mesuré, pas supposé.

     Le premier effondrement — deux colonnes, puis une — se fait sans
     média-requête : c'est la place disponible qui décide, pas un seuil écrit à
     la main, et les dix-huit typographies n'ont pas la même chasse. */
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
/* Au-delà, `auto-fit` ne suffit plus : il ne sait faire que des colonnes
   ÉGALES et passerait par trois. On reprend la main, et seulement là. */
@media (min-width: 30rem) {
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48rem) {
  .pied__grille { grid-template-columns: repeat(4, 1fr); }
}
/* La colonne d'identité reste la plus large tant qu'il y a la place. */
@media (min-width: 64rem) {
  .pied__grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ── micro-titres de colonne ── */
/* Un `h2` : les quatre colonnes du pied sont des sections, un lecteur d'écran
   doit pouvoir les parcourir. Le dessin, lui, n'a rien d'un titre — d'où la
   reprise complète des propriétés héritées de `h1, h2, h3`. */
.pied__titre {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 calc(var(--pas) * 1.5);
  color: color-mix(in srgb, currentColor 80%, transparent);
}
/* Un second intitulé dans la même colonne (Horaires sous Adresse) reprend son
   souffle ; le premier reste collé au filet. */
.pied__titre--suite { margin-top: calc(var(--pas) * 3.5); }

/* ── colonne d'identité ── */

.pied__nom {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Bornée en CARACTÈRES et non en pixels : la mesure suit la fonte de chaque
   structure, dont la chasse varie du simple au tiers. */
.pied__description {
  max-width: 30ch;
  margin: calc(var(--pas) * 1.5) 0 0;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

/* ── réseaux sociaux : pictogrammes encadrés ── */

.pied__reseaux {
  list-style: none;
  margin: calc(var(--pas) * 3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 1.5);
}
.pied__reseaux a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--rayon-petit, 8px);
  color: color-mix(in srgb, currentColor 88%, transparent);
}
/* LE CARRÉ FAIT 36 px, LA CIBLE 44 px. La maquette veut un carré de 36 px ;
   une cible de 36 px est en dessous de ce qu'on tient depuis le lot précédent.
   Le pseudo-élément étend la zone cliquable de 4 px sur chaque bord sans
   toucher au dessin. L'écart de 12 px entre deux icônes reste supérieur au
   débordement : les cibles ne se chevauchent pas. */
.pied__reseaux a::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.pied__reseaux a:hover {
  color: currentColor;
  border-color: color-mix(in srgb, currentColor 70%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.pied__reseaux svg { width: 18px; height: 18px; display: block; }

/* ── adresse et horaires ── */

.pied__adresse { font-style: normal; margin: 0; line-height: 1.55; }
.pied__horaires { list-style: none; margin: 0; padding: 0; }
.pied__horaires li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--pas) * 1);
  line-height: 1.5;
}
/* Les chiffres d'horaires s'alignent en colonne : fonte tabulaire. */
.pied__heures {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

/* ── coordonnées et appel à l'action ── */

.pied__coordonnees { list-style: none; margin: 0; padding: 0; }
/* L'étiquette « Fixe » / « Mobile » d'un numéro (TEL-01) : discrète, jamais
   bloquante, dans le ton du pied. */
/* L'étiquette précède le numéro et reste sur sa ligne : le lien est un
   `display: block`, la ligne les tient donc ensemble par un flex aligné sur la
   ligne de base (TPL-03, constat du commanditaire). `flex: none` empêche
   l'étiquette de se comprimer dans une colonne étroite ; le numéro, lui, garde
   le droit de passer à la ligne. */
.pied__coordonnees li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--pas) * 1); }
/* UN NUMÉRO NE SE COUPE PAS. Dans la colonne du pied à 390 px (≈ 160 px de
   large), « +33 4 94 00 00 00 » précédé de son étiquette dépasse : sans cette
   règle, ce sont les chiffres qui se cassaient en deux lignes. Le numéro reste
   d'un bloc ; c'est l'étiquette qui cède la ligne quand la place manque. */
.pied__coordonnees a[href^="tel:"] { white-space: nowrap; }
.pied__type {
  flex: none;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.pied__zone {
  margin: calc(var(--pas) * 2) 0 0;
  font-size: .9rem;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.pied__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: calc(var(--pas) * 2.5);
  padding: calc(var(--pas) * 1) calc(var(--pas) * 2.5);
  border: 1px solid color-mix(in srgb, currentColor 62%, transparent);
  border-radius: var(--rayon-petit, 8px);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
}
.pied__cta:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── navigation ── */

.pied__nav ul { list-style: none; margin: 0; padding: 0; }

/* ── liens du pied ── */
/* Pas de soulignement : dans une colonne où tout est lien, le trait n'apprend
   rien et alourdit. L'état survolé se marque par le contraste. */
.pied a { text-decoration: none; }

/* L'ÉCART SE PORTE PAR LE REMBOURRAGE DU LIEN, jamais par une marge : c'est
   lui qui fait la cible tactile. Au doigt, ~40 px de haut par lien. */
.pied__nav a,
.pied__coordonnees a,
.pied__carte,
.pied__legal a {
  display: block;
  line-height: 1.35;
  padding: calc(var(--pas) * 1.25) 0;
  color: color-mix(in srgb, currentColor 86%, transparent);
}
.pied__nav a:hover,
.pied__coordonnees a:hover,
.pied__carte:hover,
.pied__legal a:hover { color: currentColor; }
@media (min-width: 48rem) {
  /* À la souris, la cible n'a plus à faire 40 px : on resserre à quelques
     pixels d'écart, ce que le commanditaire appelle « condensé ». */
  .pied__nav a,
  .pied__coordonnees a,
  .pied__carte,
  .pied__legal a { padding: calc(var(--pas) / 4) 0; }
}
.pied__carte { font-size: .9rem; }

/* ── barre basse ── */

.pied__bas {
  margin-top: calc(var(--pas) * 4);
  padding-top: calc(var(--pas) * 2);
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 calc(var(--pas) * 3);
  font-size: .8rem;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.pied__mentions { margin: 0; }
/* La mention Weblory est un LIEN (DEM-82). PAS DE SOULIGNEMENT : le
   commanditaire a tranché que rien ne se souligne dans le pied, et
   `pied-reseaux.test.mjs` garde cette décision — ce lot ne la contourne pas.
   Le lien prend donc l'aspect de ses voisins immédiats, les liens
   réglementaires de la même barre, et se distingue comme eux : par le
   contraste au survol. La nuance est mesurée sur les vingt-quatre palettes
   comme les autres textes du pied (seuil 4,5:1).
   Deux classes au sélecteur : `.pied a` nomme un rôle de palette et
   l'emporterait sur une classe seule. */
.pied__bas .pied__weblory { color: color-mix(in srgb, currentColor 86%, transparent); }
.pied__bas .pied__weblory:hover { color: currentColor; }
/* Le point de séparation porte ses propres marges : écrit collé dans le
   gabarit, il ne dépend pas d'une espace insécable qu'un éditeur pourrait
   manger. */
.pied__point { padding: 0 calc(var(--pas) * 1); }
.pied__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--pas) * 3);
}

/* ═══ STRUCTURE « COMPACTE » ═══
   Tout se voit en peu de défilement : sections courtes, interlignes serrés,
   pas de grands vides. Pensée pour les très petites entreprises qui ont peu à
   dire et veulent qu'on trouve l'essentiel sans chercher. */

:root { --respire: clamp(2rem, 3.2vw, 3rem); --largeur-max: 62rem; }
body { font-size: 1rem; line-height: 1.55; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
h3 { font-size: 1.05rem; }
.section__titre { margin-bottom: calc(var(--pas) * 2.5); }
.hero--image { min-height: 20rem; }
.hero .chapeau { font-size: 1.02rem; margin-top: calc(var(--pas) * 1.5); }
.hero__actions { margin-top: calc(var(--pas) * 2.5); }
.grille { gap: calc(var(--pas) * 2); }
.carte { padding: calc(var(--pas) * 2.25); }
.carte--illustree .carte__corps { padding: calc(var(--pas) * 2.25); }
.carte__photo { aspect-ratio: 16 / 9; }
.carte p { font-size: .93rem; }
.bandeau-chiffres { padding: calc(var(--respire) * .7) 0; }
.valeur { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.realisation img { aspect-ratio: 3 / 2; }
.realisation figcaption { padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2); }
.realisation figcaption span { font-size: .88rem; }
.pied__corps { padding-top: calc(var(--pas) * 4); padding-bottom: calc(var(--pas) * 4); }

/* Turnstile : le widget garde sa place même avant chargement, pour que le
   formulaire ne saute pas sous le curseur du visiteur. */
.cf-turnstile { min-height: 65px; margin-bottom: calc(var(--pas) * 2); }

/* ---------- carte (restauration) ---------- */
/* `.carte-menu*` et non `.carte*` : `.carte` est déjà l'encadré générique. */

.carte-menu__section + .carte-menu__section { margin-top: calc(var(--pas) * 6); }
.carte-menu__section-titre {
  padding-bottom: calc(var(--pas) * 1.5);
  border-bottom: 2px solid color-mix(in srgb, var(--soulignage) 45%, var(--filet));
  margin-bottom: calc(var(--pas) * 3);
}
.carte-menu__plats { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--pas) * 3.5); }
@media (min-width: 60rem) { .carte-menu__plats { grid-template-columns: repeat(2, 1fr); gap: calc(var(--pas) * 3.5) calc(var(--pas) * 6); } }
.plat__ligne { display: flex; align-items: baseline; gap: calc(var(--pas) * 1.5); }
.plat__nom { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.15rem; }
.plat__filet { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--texte) 35%, transparent); }
.plat__prix { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.plat__description { color: var(--texte-doux); margin: calc(var(--pas) * .75) 0 0; }
.plat__allergenes { font-size: .875rem; color: var(--texte-doux); margin: calc(var(--pas) * .75) 0 0; }
.plat__allergenes-intitule { font-weight: 600; color: var(--texte); }

/* ---------- formules ---------- */

.formules { background: var(--fond-bloc); }
.grille--formules { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.formule {
  background: var(--fond-site); border: 1px solid var(--filet);
  border-radius: var(--rayon, 0); padding: calc(var(--pas) * 4);
  display: flex; flex-direction: column; gap: calc(var(--pas) * 1.25);
}
.formule__prix {
  font-family: var(--police-titre); font-size: 2rem; line-height: 1;
  color: var(--soulignage); font-variant-numeric: tabular-nums; margin: 0;
}
.formule__composition { color: var(--texte-doux); margin: 0; }

/* ---------- documents ---------- */

.documents__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--pas) * 1.5); max-width: var(--largeur-texte); }
.document__lien {
  display: flex; align-items: center; gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 2.25) calc(var(--pas) * 3);
  background: var(--fond-bloc); border: 1px solid var(--filet);
  border-radius: var(--rayon-petit, 0); color: var(--texte); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.document__lien:hover { border-color: var(--soulignage); transform: translateX(3px); }
.document__icone { display: inline-flex; color: var(--soulignage); flex: none; }
.document__nom { font-weight: 600; }
.document__format { color: var(--texte-doux); font-weight: 400; font-size: .9rem; }

/* ---------- accès ---------- */

.acces { background: var(--fond-bloc); }
.acces__corps { display: grid; gap: calc(var(--pas) * 4); align-items: start; }
@media (min-width: 60rem) { .acces__corps { grid-template-columns: 1fr 1fr; gap: calc(var(--pas) * 6); } }
.acces__texte p { color: var(--texte-doux); margin: 0; }
.acces__details { margin: calc(var(--pas) * 3) 0 0; display: grid; gap: calc(var(--pas) * 1.5); }
.acces__details dt { font-weight: 650; font-size: .95rem; }
.acces__details dd { margin: 0; color: var(--texte-doux); }
.acces__adresse { margin-top: calc(var(--pas) * 3) !important; font-weight: 600; color: var(--texte) !important; }
.acces__plan { margin: 0; }
.acces__plan img { width: 100%; border-radius: var(--rayon, 0); display: block; }

/* ---------- questions fréquentes ---------- */

.faq__liste { max-width: var(--largeur-texte); display: grid; gap: calc(var(--pas) * 1.25); }
.faq__item { border: 1px solid var(--filet); border-radius: var(--rayon-petit, 0); background: var(--fond-bloc); }
.faq__question {
  cursor: pointer; list-style: none; padding: calc(var(--pas) * 2.25) calc(var(--pas) * 3);
  font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.08rem;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pas) * 2);
}
.faq__question::-webkit-details-marker { display: none; }
/* Le chevron est en CSS : le dépli reste natif, aucun script n'y touche. */
.faq__question::after {
  content: ""; flex: none; width: .6em; height: .6em;
  border-right: 2px solid var(--soulignage); border-bottom: 2px solid var(--soulignage);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] .faq__question::after { transform: rotate(-135deg); }
.faq__reponse { padding: 0 calc(var(--pas) * 3) calc(var(--pas) * 2.5); }
.faq__reponse p { margin: 0; color: var(--texte-doux); }

/* ---------- témoignages ---------- */

.grille--temoignages { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.temoignage {
  margin: 0; padding: calc(var(--pas) * 4);
  background: var(--fond-bloc); border: 1px solid var(--filet); border-radius: var(--rayon, 0);
  display: flex; flex-direction: column; gap: calc(var(--pas) * 2.5);
}
.temoignage__texte { margin: 0; }
.temoignage__texte p { margin: 0; font-size: 1.05rem; }
.temoignage__texte p::before { content: "« "; color: var(--soulignage); }
.temoignage__texte p::after { content: " »"; color: var(--soulignage); }
.temoignage__auteur { display: flex; flex-direction: column; gap: calc(var(--pas) * .35); }
.temoignage__auteur cite { font-style: normal; font-weight: 650; }
.temoignage__fonction { color: var(--texte-doux); font-size: .92rem; }

/* ---------- honoraires ---------- */

.honoraires__liste { list-style: none; padding: 0; margin: 0; max-width: var(--largeur-texte); display: grid; gap: calc(var(--pas) * 3); }
.honoraire { padding-bottom: calc(var(--pas) * 3); border-bottom: 1px solid var(--filet); }
.honoraire:last-child { border-bottom: none; padding-bottom: 0; }
.honoraire__ligne { display: flex; align-items: baseline; gap: calc(var(--pas) * 1.5); }
.honoraire__intitule { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.1rem; }
.honoraire__filet { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--texte) 35%, transparent); }
.honoraire__montant { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.honoraire__unite { font-weight: 400; color: var(--texte-doux); font-size: .9rem; }
.honoraire__note { margin: calc(var(--pas) * .75) 0 0; color: var(--texte-doux); font-size: .92rem; }

/* ---------- étapes ---------- */

.etapes { background: var(--fond-bloc); }
.etapes__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--pas) * 3); counter-reset: etape; }
@media (min-width: 60rem) { .etapes__liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(var(--pas) * 4); } }
.etape { display: flex; gap: calc(var(--pas) * 2.5); align-items: flex-start; }
.etape__rang {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--soulignage); color: var(--texte-sur-soulignage);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.etape__titre { margin-bottom: calc(var(--pas) * 1); }
.etape__description { margin: 0; color: var(--texte-doux); }

/* ---------- vitrine ---------- */

.grille--vitrine { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.produit {
  background: var(--fond-bloc); border: 1px solid var(--filet);
  border-radius: var(--rayon, 0); overflow: hidden; display: flex; flex-direction: column;
}
.produit__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.produit__corps { padding: calc(var(--pas) * 3); display: flex; flex-direction: column; gap: calc(var(--pas) * 1); }
.produit__description { color: var(--texte-doux); margin: 0; font-size: .96rem; }
.produit__prix {
  margin: calc(var(--pas) * .5) 0 0; font-family: var(--police-titre);
  font-size: 1.35rem; color: var(--soulignage); font-variant-numeric: tabular-nums;
}

/* ---------- références clients ---------- */
/* Porté depuis les structures tertiaires, réécrit sur les jetons communs :
   l'original s'appuyait sur --filet-nuit / --clair-doux, propres à ces deux
   structures. Ici, --filet et --texte-doux, présents partout. */

.references { padding: calc(var(--respire) * .55) 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.references__titre {
  text-align: center; margin: 0 0 calc(var(--pas) * 2.5);
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--texte-doux);
}
.references__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2) calc(var(--pas) * 6);
  align-items: center; justify-content: center;
}
.references__liste span {
  font-family: var(--police-titre); font-weight: var(--graisse-titre);
  font-size: 1.15rem; letter-spacing: .01em; color: var(--texte-doux);
}
.references__liste img { max-height: 40px; width: auto; opacity: .65; }

/* ---------- équipe ---------- */

.grille--equipe { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.carte--membre { text-align: center; }
.membre__photo {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  margin: 0 auto calc(var(--pas) * 2.5); display: block;
  border: 2px solid color-mix(in srgb, var(--soulignage) 45%, var(--filet));
}
.membre__role {
  color: var(--soulignage); font-size: .92rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 calc(var(--pas) * 1.5);
}
.membre__bio { color: var(--texte-doux); font-size: .97rem; margin: 0; }