@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════════
   Les Jardins d'Alan — feuille unique
   ══════════════════════════════════════════════════════════════════════════

   Le site entier tient dans ce fichier, pages juridiques et formulaire
   compris. Une classe absente d'ici ne rend rien, en silence : c'est pour
   cette raison que GABARIT.md, à la racine du dossier, liste les classes une
   par une avec leur emploi, et qu'aucune page n'en invente.

   QUATRE DÉCISIONS TIENNENT TOUT LE SITE, à relire avant de les défaire :

   1. UNE SEULE FAMILLE DE VERTS, ET RIEN DE CHAUD. Le sapin (#204030) est le
      vert du logo, mesuré sur le monogramme : c'est lui qui remplit les
      boutons et écrit les titres qui ne sont pas en encre. La forêt
      (#16302A) ne sert qu'aux deux blocs sombres, l'appel final et le pied ;
      la mousse (#3F7A5B) est le seul accent, pour les liens, les filets et
      les survols. Il n'y a ni laiton, ni cuivre, ni beige : un accent chaud
      sur un site vert est le réflexe des sites générés, et le client l'a
      refusé en ces termes (« pas d'AI slop », 21 septembre 2026).

   2. LA MOUSSE ÉCRIT EN DEUX TONS. #3F7A5B fait 4,71:1 sur le lin, ce qui
      passe de justesse, et 4,47:1 sur la brume, ce qui ne passe pas pour un
      texte courant. Le texte en mousse (liens, surtitre) prend donc un ton
      plus sombre, --mousse-texte (#2E5E44, 7,0:1 sur lin, 6,6:1 sur brume) ;
      la mousse elle-même ne fait que tracer (filets) et survoler. Les
      intervertir rend un lien limite sur brume, et rien ne l'attraperait.

   3. LES PHOTOS SONT LA PREUVE, ET ELLES SONT VRAIES : prises par l'équipe
      sur ses chantiers. Aucune n'est habillée : ni étiquette par-dessus, ni
      voile, ni dégradé, ni arrondi, ni ombre. Le seuil est divisé, le texte
      à gauche, la photo à droite jusqu'au bord de l'écran ; un titre centré
      sur un aplat ou sur une photo voilée est ce qu'on a écarté.

   4. ANGLES VIFS PARTOUT, PAS D'OMBRE PORTÉE, PAS DE DÉGRADÉ, PAS DE BLANC
      PUR NI DE NOIR PUR. Un seul système d'arrondis (--rayon, à 0) : boutons,
      champs et photos ont les mêmes angles. La hiérarchie se fait à la
      taille du serif, au filet et au fond, jamais à l'ombre ni à la carte.
      Les prestations se lisent en liste, comme une carte de restaurant, pas
      en cartes à icône.

   Les polices sont celles de l'identité : Playfair Display est le serif du
   logotype sur la carte de visite du client, ce n'est pas un choix par
   défaut ; Manrope porte le corps. La sauge (#A9BFAE) n'écrit que sur la
   forêt (7,2:1) : sur le lin elle fait moins de 2:1 et n'y sert qu'aux
   lignes. Le texte secondaire sur fond clair est --encre-douce (6,6:1).
   ══════════════════════════════════════════════════════════════════════════ */

/* ————————————————————————————— Polices ————————————————————————————— */

/* Deux familles : Playfair Display pour tout ce qui titre, avec sa vraie
   italique (le mot en italique d'un titre est le geste du site, et l'oblique
   que synthétise le navigateur se voit) ; Manrope, variable, pour tout ce qui
   se lit. Les sous-ensembles sont découpés par `unicode-range` : latin-ext ne
   se charge que si un caractère l'appelle, ce qui n'arrive pas en français.
   Le fichier est là pour un nom propre, pas pour le corps du site. */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/polices/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/polices/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/polices/playfair-display-italique-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/polices/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ————————————————————————————— Variables ————————————————————————————— */

:root {
  /* La palette, nommée par matière. Les rôles sont en tête de fichier. */
  --foret: #16302a;
  --sapin: #204030; /* le vert du logo */
  --sapin-sombre: #182f24; /* le sapin au survol, en fond */
  --mousse: #3f7a5b;
  --mousse-texte: #2e5e44; /* la mousse qui écrit : décision 2 */
  --sauge: #a9bfae;
  --brume: #edf2ec;
  --lin: #f6f7f4;
  --encre: #14211b;
  --encre-douce: #4a5c52; /* 6,6:1 sur lin — le texte secondaire sur clair */
  --craie: #f4f6f1;
  --champ: #fbfcf9; /* le fond d'un champ de formulaire : clair, pas blanc pur */
  --alerte: #8a2a1e; /* le seul rouge : le message d'erreur du formulaire */
  --alerte-fond: #f9edea;

  /* Les rôles, que les fonds sombres redéfinissent (voir « Fonds sombres »).
     Les composants n'emploient QUE ces quatre-là pour leur texte et leurs
     lignes : c'est ce qui les rend justes sur la forêt sans une règle de
     plus. */
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --lien: var(--mousse-texte);
  --filet: rgba(20, 33, 27, 0.14);
  --filet-fort: rgba(20, 33, 27, 0.3);
  --filet-clair: rgba(244, 246, 241, 0.16);
  --filet-clair-fort: rgba(244, 246, 241, 0.42);
  --filet-opaque: #d6d9d6; /* le filet en valeur opaque, pour ce qui se pose sur une photo */

  /* Typographie. Playfair a un grand œil et du poids : ses corps sont plus
     petits que ne le serait un serif fin, à présence égale. */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --t-corps: 1.0625rem;
  --t-petit: 0.9375rem;
  --t-micro: 0.8125rem;
  --t-h1: clamp(2.25rem, 4.2vw, 3.75rem);
  --t-h2: clamp(1.75rem, 3.1vw, 2.75rem);
  --t-h3: 1.375rem;
  --t-intro: clamp(1.0625rem, 1.4vw, 1.25rem);

  /* Rythme */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;
  --e16: 4rem;
  --section: clamp(3.5rem, 8vw, 7rem);

  /* Largeurs. La gouttière ne descend jamais sous 20 px : à 360 px de large,
     5vw n'en font que 18. */
  --large: 1200px;
  --etroit: 68ch;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --h-entete: 4.5rem;
  --rayon: 0; /* décision 4 : un seul système d'arrondis, ici l'angle vif */
}

/* ————————————————————————————— Socle ————————————————————————————— */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'en-tête est collant : sans ce décalage, une ancre place le titre visé
     sous la barre. */
  scroll-padding-top: calc(var(--h-entete) + 1rem);
}

body {
  margin: 0;
  background: var(--lin);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Aucun défilement horizontal, quoi qu'un bloc déborde : la faute se voit
     alors dans le bloc, pas sur toute la page. */
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  body {
    font-size: 1.125rem;
  }
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

/* Un contour visible au clavier, sur toutes les couleurs de fond. */
:focus-visible {
  outline: 2px solid var(--mousse);
  outline-offset: 3px;
}

/* ————————————————————————————— Titres et texte ————————————————————————————— */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--e4);
  letter-spacing: -0.005em;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
}

h4 {
  font-size: 1.125rem;
  font-family: var(--sans);
  font-weight: 600;
}

/* Le mot en italique d'un titre : le geste typographique du site. Sur fond
   clair il passe en sapin, le vert du logo ; sur la forêt, en sauge. */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--sapin);
}

p {
  margin: 0 0 var(--e4);
}

a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

small {
  font-size: var(--t-micro);
}

address {
  font-style: normal;
}

/* Le surtitre : une petite ligne au-dessus d'un titre, en mousse-texte. Il
   nomme la section quand le titre, lui, parle. AU PLUS UN POUR TROIS
   SECTIONS, jamais numéroté : posé partout, c'est le tic des gabarits. */
.surtitre {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--lien);
  margin: 0 0 var(--e2);
}

/* Le titre d'une section, et la tête qui le porte : surtitre, titre, intro,
   dans cet ordre, bornés pour ne pas courir sur toute la largeur. */
.titre-section {
  font-size: var(--t-h2);
  margin: 0 0 var(--e4);
  max-width: 24ch;
}

.intro {
  font-size: var(--t-intro);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 58ch;
  margin: 0;
}

.tete-section {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.tete-section .intro {
  margin-top: var(--e2);
}

.tete-section--centree {
  margin-inline: auto;
  text-align: center;
}

.tete-section--centree .titre-section,
.tete-section--centree .intro {
  margin-inline: auto;
}

.secondaire {
  color: var(--texte-doux);
}

/* Un lien ordinaire, souligné, qui garde la couleur de son fond : le pied et
   les liens légaux en sont. */
.lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
}

.lien:hover {
  text-decoration-color: currentColor;
}

/* Le lien d'action : précédé d'un filet en mousse qui s'allonge au survol.
   Ni chevron ni flèche ; le trait suffit à dire « on continue par là ». */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-weight: 600;
  font-size: var(--t-petit);
  color: var(--lien);
  text-decoration: none;
}

.lien-suite::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--mousse);
  transition: width 0.25s ease;
}

.lien-suite:hover::before,
.lien-suite:focus-visible::before {
  width: 2.5rem;
}

.lien-suite:hover {
  text-decoration: underline;
}

/* ————————————————————————————— Mise en page ————————————————————————————— */

.enveloppe {
  width: 100%;
  max-width: calc(var(--large) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--etroite {
  max-width: calc(var(--etroit) + 2 * var(--gouttiere));
}

.section {
  padding-block: var(--section);
}

.section--serree {
  padding-block: calc(var(--section) * 0.6);
}

.section--brume {
  background: var(--brume);
}

.section--foret {
  background: var(--foret);
}

.section--sapin {
  background: var(--sapin);
}

/* Deux sections de même fond qui se suivent se séparent d'un filet, sinon
   leurs marges s'additionnent en un vide que rien ne justifie. La feuille ne
   peut pas voir le fond de la section précédente : c'est la page qui pose
   la variante sur la seconde. */
.section--filet {
  border-top: 1px solid var(--filet);
}

.saut {
  margin-top: var(--e8);
}

.saut--grand {
  margin-top: var(--e16);
}

.centre {
  text-align: center;
}

.etroit {
  max-width: var(--etroit);
}

/* Le lien d'évitement : hors écran, jusqu'à ce qu'il ait le focus. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: var(--e2);
  z-index: 100;
  padding: var(--e2) var(--e4);
  background: var(--sapin);
  color: var(--craie);
}

.saut-contenu:focus {
  left: var(--e2);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ————————————————————————————— Fonds sombres ————————————————————————————— */

/* Les contextes sur forêt ou sapin redéfinissent les quatre rôles : le texte
   passe en craie, le secondaire en sauge, les filets en clair, et un lien y
   est en craie souligné. Tout composant écrit avec ces variables tient sans
   une règle de plus ; c'est la raison de leur existence. */
.section--foret,
.section--sapin,
.bandeau-page--foret,
.pied {
  --texte: var(--craie);
  --texte-doux: var(--sauge);
  --lien: var(--craie);
  --filet: var(--filet-clair);
  --filet-fort: var(--filet-clair-fort);
  color: var(--texte);
}

.section--foret .surtitre,
.section--sapin .surtitre,
.bandeau-page--foret .surtitre {
  color: var(--sauge);
}

.section--foret h2 em,
.section--sapin h2 em,
.bandeau-page--foret h1 em {
  color: var(--sauge);
}

.section--foret :focus-visible,
.section--sapin :focus-visible,
.bandeau-page--foret :focus-visible,
.pied :focus-visible {
  outline-color: var(--sauge);
}

.section--foret .lien-suite::before,
.section--sapin .lien-suite::before {
  background: var(--sauge);
}

/* ————————————————————————————— Boutons ————————————————————————————— */

/* Une seule intention de contact sur tout le site, un seul libellé :
   « Demander un devis ». Un second libellé pour la même intention (« Devis
   gratuit », « Nous contacter ») est ce qu'on a écarté. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Le bouton d'action : sapin plein, texte craie (10,5:1). Sur la forêt, où
   le sapin ne se verrait pas, il s'inverse en craie sur sapin. */
.bouton--devis {
  background: var(--sapin);
  border-color: var(--sapin);
  color: var(--craie);
}

.bouton--devis:hover,
.bouton--devis:focus-visible {
  background: var(--sapin-sombre);
  border-color: var(--sapin-sombre);
  color: var(--craie);
}

.section--foret .bouton--devis,
.section--sapin .bouton--devis {
  background: var(--craie);
  border-color: var(--craie);
  color: var(--sapin);
}

.section--foret .bouton--devis:hover,
.section--foret .bouton--devis:focus-visible,
.section--sapin .bouton--devis:hover,
.section--sapin .bouton--devis:focus-visible {
  background: var(--sauge);
  border-color: var(--sauge);
  color: var(--foret);
}

/* Le bouton secondaire, sur fond clair : un cadre en encre, sans fond. */
.bouton--secondaire {
  background: transparent;
  border-color: var(--filet-fort);
  color: var(--encre);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  border-color: var(--encre);
  color: var(--encre);
}

/* Le bouton secondaire, sur fond sombre : un cadre en craie. */
.bouton--clair {
  background: transparent;
  border-color: var(--filet-clair-fort);
  color: var(--craie);
}

.bouton--clair:hover,
.bouton--clair:focus-visible {
  border-color: var(--craie);
  color: var(--craie);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e6);
}

/* ————————————————————————————— En-tête ————————————————————————————— */

/* Sur le lin, collante, un filet dessous : le logo et le bouton restent à
   portée pendant toute la lecture. Le logo est le monogramme vert du
   client, sur fond clair comme sur sa carte de visite ; le pied porte sa
   version en craie. */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lin);
  border-bottom: 1px solid var(--filet);
}

.entete__barre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  min-height: var(--h-entete);
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
  color: var(--encre);
  line-height: 1.1;
  padding-block: var(--e2);
}

.marque__logo {
  width: 3rem;
  height: 3rem;
  flex: none;
}

.marque__texte {
  display: flex;
  flex-direction: column;
}

.marque__nom {
  font-family: var(--serif);
  font-size: 1.375rem;
  white-space: nowrap;
}

.marque__metier {
  margin-top: 0.15rem;
  font-size: var(--t-micro);
  color: var(--texte-doux);
  white-space: nowrap;
}

.entete__tiroir {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex: 1;
}

.nav {
  display: block;
}

.nav__liste {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  position: relative;
  display: inline-block;
  padding: var(--e2) 0;
  color: var(--encre);
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* Le soulignement en mousse qui s'ouvre depuis la gauche ; il reste ouvert
   sur la page courante (`aria-current`, « page » ou « true »). */
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1px;
  background: var(--mousse);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__lien:hover::after,
.nav__lien:focus-visible::after,
.nav__lien[aria-current]::after {
  transform: scaleX(1);
}

/* Le sous-menu des services. Sans un octet de script : il s'ouvre au survol
   et au focus (`:focus-within`, donc au clavier). Le lien « Services » reste
   un vrai lien vers /services, qui liste les quatre métiers : au doigt, sur
   un écran large, on y arrive quand même. */
.nav__groupe {
  position: relative;
}

.nav__sous {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 60;
  min-width: 19rem;
  margin: 0;
  padding: var(--e2) 0;
  list-style: none;
  background: var(--lin);
  border: 1px solid var(--filet-fort);
}

.nav__groupe:hover .nav__sous,
.nav__groupe:focus-within .nav__sous {
  display: block;
}

.nav__sous a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--encre);
  font-size: var(--t-petit);
  text-decoration: none;
}

.nav__sous a:hover,
.nav__sous a:focus-visible,
.nav__sous a[aria-current] {
  background: var(--brume);
  color: var(--mousse-texte);
}

.entete__action {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.entete__tel {
  color: var(--encre);
  font-weight: 600;
  font-size: var(--t-petit);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entete__tel:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.entete__devis {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
}

/* Le bouton du tiroir. Caché par défaut, et révélé par la feuille seulement
   quand le script a posé `data-js` : sans script, le menu se déroule sous la
   barre et le bouton n'aurait rien à ouvrir. */
.bascule {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  color: var(--encre);
  cursor: pointer;
}

.bascule__fermer {
  display: none;
}

:root.menu-ouvert .bascule__ouvrir {
  display: none;
}

:root.menu-ouvert .bascule__fermer {
  display: block;
}

/* Le point de bascule : sous 1024 px la barre ne tient plus les quatre
   entrées, le téléphone et le bouton sur une ligne. 1024 est le JUMEAU du
   `matchMedia('(min-width: 1024px)')` de site.js, et les deux doivent rester
   d'accord : réglé plus bas, le tiroir se refermerait au milieu de la zone
   où il est encore la seule navigation. */
@media (max-width: 1023px) {
  .entete__barre {
    flex-wrap: wrap;
  }

  :root[data-js] .bascule {
    display: inline-flex;
  }

  /* Sans script : le tiroir suit la barre, en flux, sur toute la largeur. */
  .entete__tiroir {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--e6);
  }

  /* Avec script : hors flux, sous la barre, jusqu'à ce que le bouton l'ouvre.
     Le bloc conteneur est la boîte de remplissage de la barre, qui va d'un
     bord de l'écran à l'autre : 0 et 0, pas la gouttière en négatif, qui
     sortirait le panneau de l'écran. */
  :root[data-js] .entete__tiroir {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--h-entete));
    overflow-y: auto;
    padding: var(--e4) var(--gouttiere) var(--e8);
    background: var(--lin);
    border-bottom: 1px solid var(--filet-fort);
  }

  :root[data-js].menu-ouvert .entete__tiroir {
    display: flex;
  }

  .nav__liste {
    flex-direction: column;
    gap: 0;
  }

  .nav__lien {
    display: block;
    padding: 0.65rem 0;
    font-family: var(--serif);
    font-size: 1.625rem;
    font-weight: 400;
  }

  .nav__lien::after {
    display: none;
  }

  .nav__lien[aria-current] {
    color: var(--mousse-texte);
  }

  /* Le sous-menu ne se replie pas dans le tiroir : quatre lignes en retrait,
     toujours visibles, plutôt qu'un second geste à découvrir. */
  .nav__sous {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 var(--e3) var(--e4);
    background: none;
    border: 0;
    border-left: 1px solid var(--filet-fort);
    margin-left: 0.25rem;
  }

  .nav__sous a {
    padding: 0.4rem 0 0.4rem var(--e3);
    font-size: 1rem;
  }

  .nav__sous a:hover,
  .nav__sous a[aria-current] {
    background: none;
    color: var(--mousse-texte);
  }

  .entete__action {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e4);
    margin-top: var(--e4);
    padding-top: var(--e6);
    border-top: 1px solid var(--filet);
  }

  .entete__tel {
    font-size: 1.125rem;
  }

  .entete__devis {
    min-height: 3rem;
    padding: 0.75rem 1.6rem;
  }
}

/* Sous 400 px, le sous-titre de la marque prend la place du bouton ; le
   seuil le redit deux lignes plus bas. */
@media (max-width: 399px) {
  .marque__metier {
    display: none;
  }

  .marque__logo {
    width: 2.75rem;
    height: 2.75rem;
  }

  .marque__nom {
    font-size: 1.25rem;
  }
}

/* ————————————————————————————— Le seuil de l'accueil ————————————————————————————— */

/* Pleine page : la photo prend tout l'écran (`100svh`, jamais `100vh` seul,
   qui compte la barre d'adresse du téléphone et fait déborder d'un cran),
   sous un VOILE UNIFORME en forêt. Uniforme et non dégradé : un dégradé
   laisse le texte sur ce que le photographe a cadré au milieu, et c'est là
   que la photo est la plus claire. La densité (0,62) est réglée pour que la
   craie passe AA sur la pelouse, mesurée sur la capture. Le texte est en bas
   à gauche du cadre, pas centré : quatre éléments et pas un de plus.
   L'en-tête est fixe au-dessus (voir « L'en-tête sur photo »), d'où le
   remplissage haut du contenu, qui l'empêche de passer dessous. */
.seuil {
  --texte: var(--craie);
  --texte-doux: var(--sauge);
  --lien: var(--craie);
  --filet: var(--filet-clair);
  --filet-fort: var(--filet-clair-fort);
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--foret);
  color: var(--texte);
}

.seuil__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La pelouse et le pin occupent le centre et le bas de la photo : c'est ce
     qui reste au recadrage, sur un écran large comme sur un téléphone ; le
     rail de piscine du bord inférieur gauche passe sous le texte. */
  object-position: 50% 62%;
}

.seuil__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(22, 48, 42, 0.55);
}

.seuil__contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--h-entete) + 2rem);
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

.seuil__texte {
  max-width: 38rem;
}

.seuil__titre {
  font-size: var(--t-h1);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 0 var(--e6);
  color: var(--craie);
}

.seuil__titre em {
  color: var(--sauge);
}

.seuil__accroche {
  font-size: var(--t-intro);
  line-height: 1.6;
  color: var(--craie);
  max-width: 44ch;
  margin: 0 0 var(--e8);
}

.seuil .bouton--devis {
  background: var(--craie);
  border-color: var(--craie);
  color: var(--sapin);
}

.seuil .bouton--devis:hover,
.seuil .bouton--devis:focus-visible {
  background: var(--sauge);
  border-color: var(--sauge);
  color: var(--foret);
}

.seuil .lien-suite::before {
  background: var(--sauge);
}

.seuil :focus-visible {
  outline-color: var(--sauge);
}

@media (min-width: 900px) {
  .seuil__contenu {
    padding-bottom: clamp(3rem, 9vh, 6rem);
  }
}

/* ————————————————————————————— L'en-tête sur photo ————————————————————————————— */

/* Sur l'accueil, et là seulement, l'en-tête porte `entete--sur-photo` : posé
   en haut du seuil, sans fond, en craie, il part avec la photo au défilement,
   puis revient, fixe et sur lin, une fois le seuil passé. Même balisage que
   sur les pages intérieures, un modificateur en plus : rien d'autre ne les
   distingue.

   L'ÉTAT PAR DÉFAUT EST L'ÉTAT SÛR : sans script, c'est l'en-tête des pages
   intérieures, sur lin, en encre. Tout ce qui suit est gardé par
   `:root[data-sur-photo]`, que site.js ne pose que s'il dispose d'un
   IntersectionObserver ; l'inverse, transparent par défaut et encré par le
   script, donnerait un en-tête craie sur lin le jour où le script ne prend pas
   la main. */
:root[data-sur-photo] .entete--sur-photo {
  /* ABSOLU, PAS FIXE : tant qu'on est dans le seuil, la barre reste collée
     en haut de la PAGE et s'en va avec la photo. Demandé par Nicolas le
     21 septembre 2026, contre la première version qui la faisait flotter sur
     toute la hauteur du seuil : une barre qui suit le défilement sur une photo
     pleine page tient de la superposition, une barre qui part avec elle
     laisse la photo entière. Elle revient, sur lin, une fois le seuil passé. */
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-width: 0;
}

/* Chaque élément porte SA couleur plutôt qu'une variable héritée : une
   propriété héritée qui échoue reprend celle du parent, et le parent n'a
   plus de fond. Le logo est le monogramme vert, passé en clair par un filtre
   plutôt que remplacé par un second <img> : le balisage de l'en-tête reste
   celui des pages intérieures, à la balise près. */
:root[data-sur-photo] .entete--sur-photo .marque,
:root[data-sur-photo] .entete--sur-photo .nav__lien,
:root[data-sur-photo] .entete--sur-photo .nav__sous a,
:root[data-sur-photo] .entete--sur-photo .entete__tel,
:root[data-sur-photo] .entete--sur-photo .bascule {
  color: var(--craie);
}

:root[data-sur-photo] .entete--sur-photo .marque__metier {
  color: var(--sauge);
}

:root[data-sur-photo] .entete--sur-photo .marque__logo {
  filter: brightness(0) invert(0.95);
}

:root[data-sur-photo] .entete--sur-photo .nav__lien::after {
  background: var(--sauge);
}

:root[data-sur-photo] .entete--sur-photo .bascule {
  border-color: var(--filet-clair-fort);
}

:root[data-sur-photo] .entete--sur-photo .entete__devis {
  background: var(--craie);
  border-color: var(--craie);
  color: var(--sapin);
}

:root[data-sur-photo] .entete--sur-photo .entete__devis:hover,
:root[data-sur-photo] .entete--sur-photo .entete__devis:focus-visible {
  background: var(--sauge);
  border-color: var(--sauge);
  color: var(--foret);
}

:root[data-sur-photo] .entete--sur-photo :focus-visible {
  outline-color: var(--sauge);
}

/* Le sous-menu des services garde son fond de lin et son encre dans les deux
   états : il est posé sur la photo, il doit se lire dessus. */
:root[data-sur-photo] .entete--sur-photo .nav__sous a {
  color: var(--encre);
}

/* POSÉ : le seuil est passé (site.js pose `data-pose` sur <html>, par un
   IntersectionObserver sur le seuil, la hauteur de barre retranchée). La
   barre redevient fixe, sur lin, avec son filet, et DESCEND dans l'écran :
   elle n'était plus là, elle arrive. L'ANIMATION EST SUR L'ÉTAT POSÉ ET NON
   SUR L'ÉTAT DE DÉPART, donc elle ne joue qu'à l'aller : en remontant dans le
   seuil, la barre reprend d'un coup sa place absolue en haut de la page, là
   où elle était, sans repasser par une glissade. Le tiroir ouvert vaut
   « posé » pour les couleurs, quoi qu'il arrive : la barre doit se lire
   au-dessus de son panneau de lin. */
:root[data-sur-photo][data-pose] .entete--sur-photo {
  position: fixed;
  background: var(--lin);
  border-bottom-width: 1px;
  animation: entete-descend 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-sur-photo].menu-ouvert .entete--sur-photo {
  background: var(--lin);
  border-bottom-width: 1px;
}

@keyframes entete-descend {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

:root[data-sur-photo][data-pose] .entete--sur-photo .marque,
:root[data-sur-photo][data-pose] .entete--sur-photo .nav__lien,
:root[data-sur-photo][data-pose] .entete--sur-photo .entete__tel,
:root[data-sur-photo][data-pose] .entete--sur-photo .bascule,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .marque,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .nav__lien,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .entete__tel,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .bascule {
  color: var(--encre);
  transition: color 300ms ease;
}

:root[data-sur-photo][data-pose] .entete--sur-photo .marque__metier,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .marque__metier {
  color: var(--encre-douce);
  transition: color 300ms ease;
}

:root[data-sur-photo][data-pose] .entete--sur-photo .marque__logo,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .marque__logo {
  filter: none;
  transition: filter 300ms ease;
}

:root[data-sur-photo][data-pose] .entete--sur-photo .nav__lien::after,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .nav__lien::after {
  background: var(--mousse);
}

:root[data-sur-photo][data-pose] .entete--sur-photo .bascule,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .bascule {
  border-color: var(--filet-fort);
}

:root[data-sur-photo][data-pose] .entete--sur-photo .entete__devis,
:root[data-sur-photo].menu-ouvert .entete--sur-photo .entete__devis {
  background: var(--sapin);
  border-color: var(--sapin);
  color: var(--craie);
}

:root[data-sur-photo][data-pose] .entete--sur-photo .entete__devis:hover,
:root[data-sur-photo][data-pose] .entete--sur-photo .entete__devis:focus-visible {
  background: var(--sapin-sombre);
  border-color: var(--sapin-sombre);
}

:root[data-sur-photo][data-pose] .entete--sur-photo :focus-visible {
  outline-color: var(--mousse);
}

/* Tout reste, le mouvement s'en va : la barre est là ou n'y est pas. */
@media (prefers-reduced-motion: reduce) {
  :root[data-sur-photo][data-pose] .entete--sur-photo {
    animation: none;
  }

  :root[data-sur-photo][data-pose] .entete--sur-photo .marque,
  :root[data-sur-photo][data-pose] .entete--sur-photo .nav__lien,
  :root[data-sur-photo][data-pose] .entete--sur-photo .entete__tel,
  :root[data-sur-photo][data-pose] .entete--sur-photo .marque__logo {
    transition: none;
  }
}

/* ————————————————————————— Bandeau des pages intérieures ————————————————————————— */

/* Plus bas que le seuil : sur une page de service, le visiteur sait déjà où
   il est. Fil d'Ariane, titre, chapeau, sur la brume ; la variante forêt
   existe pour une page qu'on veut ouvrir sombre. */
.bandeau-page {
  background: var(--brume);
  border-bottom: 1px solid var(--filet);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.bandeau-page--foret {
  background: var(--foret);
  border-bottom: 0;
}

.bandeau-page__titre {
  font-size: var(--t-h1);
  line-height: 1.1;
  max-width: 22ch;
  margin: var(--e3) 0 var(--e4);
}

.bandeau-page__chapeau {
  font-size: var(--t-intro);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 58ch;
  margin: 0;
}

.bandeau-page .boutons {
  margin-top: var(--e8);
}

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-micro);
  color: var(--texte-doux);
}

.fil-ariane li + li::before {
  content: '/';
  margin-right: var(--e2);
  opacity: 0.5;
}

.fil-ariane a {
  color: inherit;
  text-decoration: none;
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible {
  color: var(--lien);
  text-decoration: underline;
}

.fil-ariane [aria-current] {
  color: var(--texte);
}

/* ————————————————————————— Liste illustrée (les métiers) ————————————————————————— */

/* Les métiers ne sont pas quatre cartes : c'est une liste de rangées, un
   filet entre chaque, le nom en serif à gauche, le détail au milieu, une
   vraie photo du chantier à droite. La rangée entière est un lien ; c'est
   le filet qui passe en mousse au survol, jamais un fond. Sur téléphone la
   photo passe au-dessus du texte. */
.metiers {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-fort);
}

.metier {
  display: grid;
  gap: var(--e4) var(--e8);
  padding-block: var(--e8);
  border-bottom: 1px solid var(--filet-fort);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease;
}

a.metier:hover,
a.metier:focus-visible {
  border-bottom-color: var(--mousse);
}

.metier__titre {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

.metier__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.metier__texte p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
}

.metier__suite {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e1);
  font-weight: 600;
  font-size: var(--t-petit);
  color: var(--lien);
}

.metier__suite::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--mousse);
  transition: width 0.25s ease;
}

a.metier:hover .metier__suite::before,
a.metier:focus-visible .metier__suite::before {
  width: 2.5rem;
}

.metier__figure {
  margin: 0;
  order: -1;
}

.metier__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 720px) {
  .metier {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .metier__titre {
    grid-column: 1 / -1;
  }

  .metier__figure {
    order: 0;
  }
}

@media (min-width: 1024px) {
  .metier {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr) minmax(0, 6fr);
    gap: var(--e8) clamp(2rem, 4vw, 4rem);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .metier__titre {
    grid-column: auto;
    padding-right: var(--e4);
  }
}

/* ————————————————————————— Colonnes typographiques ————————————————————————— */

/* Des colonnes de texte séparées d'un filet, sans photo ni icône : un titre
   serif, un paragraphe, un lien. Pour un renvoi vers les quatre métiers
   quand la page n'a pas de place pour la liste illustrée (404, page des
   services). La colonne entière est un lien quand elle mène quelque part. */
.colonnes {
  display: grid;
  gap: var(--e8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.colonne {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding-top: var(--e6);
  border-top: 1px solid var(--filet-fort);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease;
}

a.colonne:hover,
a.colonne:focus-visible {
  border-top-color: var(--mousse);
}

.colonne h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0;
}

.colonne p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
}

.colonne__suite {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  margin-top: auto;
  padding-top: var(--e2);
  font-weight: 600;
  font-size: var(--t-petit);
  color: var(--lien);
}

.colonne__suite::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--mousse);
  transition: width 0.25s ease;
}

a.colonne:hover .colonne__suite::before,
a.colonne:focus-visible .colonne__suite::before {
  width: 2.5rem;
}

@media (min-width: 600px) {
  .colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .colonnes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e8) var(--e6);
  }

  .colonnes--deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e8) var(--e12);
  }

  .colonnes--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Deux grilles à la suite forment une seule liste coupée pour que chaque
   rangée soit pleine (sept ouvrages en quatre puis trois) : l'écart entre
   elles est celui des rangées, pas celui des sections. */
.colonnes + .colonnes {
  margin-top: var(--e8);
}

/* ————————————————————————————— Bande de chantiers ————————————————————————————— */

/* Trois photos de même hauteur et de largeurs inégales : le rythme vient de
   la colonne étroite, qui recadre une photo en portrait entre deux
   paysages. Une légende sous chacune dit ce qu'on voit, rien de plus. Sur
   téléphone, les trois s'empilent à leur format. */
.bande {
  display: grid;
  gap: var(--e6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bande figure {
  margin: 0;
}

.bande img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bande__portrait img {
  aspect-ratio: 3 / 4;
}

.bande figcaption {
  margin-top: var(--e3);
  font-size: var(--t-micro);
  color: var(--texte-doux);
}

@media (min-width: 720px) {
  .bande {
    grid-template-columns: 1.3fr 0.8fr 1.1fr;
    gap: var(--e4);
    align-items: start;
  }

  .bande img,
  .bande__portrait img {
    aspect-ratio: auto;
    height: clamp(16rem, 30vw, 26rem);
  }
}

/* ————————————————————————————— Liste de prestations ————————————————————————————— */

/* Une carte, pas une grille d'icônes : chaque prestation sur sa ligne, en
   serif, séparée d'un filet. Trois colonnes sur grand écran, une seule sur
   téléphone. Pas de numéro : la liste ne compte rien. */
.prestations {
  display: grid;
  gap: 0 var(--e8);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-fort);
}

.prestations li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.25;
}

@media (min-width: 640px) {
  .prestations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .prestations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Le bloc « énoncé + liste » : un titre serif à gauche qui tient sa colonne,
   la liste à droite. C'est une famille de mise en page à part entière, pour
   ne pas enchaîner deux listes de même dessin. */
.enonce {
  display: grid;
  gap: var(--e8);
  align-items: start;
}

.enonce .titre-section {
  max-width: 14ch;
}

@media (min-width: 900px) {
  .enonce {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 6vw, 6rem);
  }
}

/* ————————————————————————————— Étapes ————————————————————————————— */

/* La démarche en trois temps, sans « 01 » ni « Étape 1 » : le nom de
   l'étape suffit, en serif, sous un filet. Seules, elles se rangent sur
   trois colonnes ; dans un .duo, elles s'empilent à côté de la photo. */
.etapes {
  display: grid;
  gap: var(--e6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etape {
  padding-top: var(--e4);
  border-top: 1px solid var(--filet-fort);
}

.etape h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 var(--e2);
}

.etape p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 720px) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e8) var(--e6);
  }

  .duo .etapes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
    margin-top: var(--e8);
  }
}

/* ————————————————————————————— Arguments ————————————————————————————— */

/* « Pourquoi nous choisir » : quatre arguments courts, en deux colonnes, un
   filet court en mousse au-dessus de chacun. Pas de cadre, pas d'icône. */
.arguments {
  display: grid;
  gap: var(--e8) var(--e12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.argument::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--e4);
  background: var(--mousse);
}

.argument h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 var(--e2);
}

.argument p {
  margin: 0;
  color: var(--texte-doux);
}

@media (min-width: 720px) {
  .arguments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ————————————————————————————— Citation ————————————————————————————— */

/* Les mots du gérant, repris du site : trois lignes au plus, en serif
   italique, l'attribution en dessous, « Prénom Nom, fonction ». Les
   guillemets sont dans le texte, pas générés : c'est l'outil de typographie
   qui les traite. */
.citation {
  max-width: 56ch;
  margin: 0;
  padding-left: var(--e6);
  border-left: 2px solid var(--mousse);
}

.citation__texte {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.4;
  margin: 0 0 var(--e4);
}

.citation__auteur {
  font-style: normal;
  font-size: var(--t-petit);
  color: var(--texte-doux);
}

/* ————————————————————————— Blocs texte + image ————————————————————————— */

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.duo > div > :first-child {
  margin-top: 0;
}

.duo__figure {
  margin: 0;
}

.duo__figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .duo--inverse > :first-child {
    order: 2;
  }

  .duo--haut {
    align-items: start;
  }

  /* Une photo en portrait à côté d'un texte : la colonne de la photo se
     resserre pour qu'elle ne domine pas. */
  .duo--portrait {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

/* Une photo seule, avec sa légende. La légende dit ce qu'on voit sur le
   chantier ; ce n'est jamais un crédit ni un ornement. */
.figure {
  margin: 0;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure--large {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.figure__legende,
.duo__legende {
  margin-top: var(--e3);
  font-size: var(--t-micro);
  color: var(--texte-doux);
}

/* ————————————————————————————— Aparté ————————————————————————————— */

/* Un encadré discret : un filet à gauche en mousse, un fond en brume. Sur une
   section déjà en brume, il passe en lin. Pour une précision, une mise en
   garde, une note pratique ; pas pour une promesse. */
.aparte {
  max-width: var(--etroit);
  padding: var(--e6) var(--e6) var(--e6) calc(var(--e6) + 2px);
  background: var(--brume);
  border-left: 2px solid var(--mousse);
}

.section--brume .aparte {
  background: var(--lin);
}

.aparte > :first-child {
  margin-top: 0;
}

.aparte > :last-child {
  margin-bottom: 0;
}

.aparte h3 {
  font-size: 1.25rem;
  margin-bottom: var(--e2);
}

/* ————————————————————————————— Questions ————————————————————————————— */

/* <details> natif : un accordéon sans une ligne de script, dont le contenu
   est dans le HTML servi et se retrouve à la recherche de la page. Le signe
   « plus » est dessiné en deux traits, et tourne à l'ouverture. */
.questions {
  max-width: var(--etroit);
  border-top: 1px solid var(--filet-fort);
}

.question {
  border-bottom: 1px solid var(--filet);
}

.question summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.75rem 1.1rem 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary::before,
.question summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: var(--mousse);
  transition: transform 0.25s ease;
}

.question summary::after {
  transform: rotate(90deg);
}

.question[open] summary::after {
  transform: rotate(0deg);
}

.question summary:hover {
  color: var(--lien);
}

.question__corps {
  padding: 0 2.75rem var(--e6) 0;
  color: var(--texte-doux);
}

.question__corps > :last-child {
  margin-bottom: 0;
}

/* ————————————————————————————— Tableau ————————————————————————————— */

/* Un tableau simple, aux filets seuls : les mentions légales et la liste
   des données traitées. Sur téléphone il défile dans son conteneur plutôt
   que d'élargir la page. */
.tableau-defilant {
  overflow-x: auto;
  margin-bottom: var(--e6);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-petit);
  line-height: 1.5;
}

.tableau th,
.tableau td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}

.tableau th {
  font-weight: 600;
  border-bottom-color: var(--filet-fort);
}

.tableau tbody th {
  border-bottom-color: var(--filet);
  white-space: nowrap;
}

/* ————————————————————————————— Prose ————————————————————————————— */

/* Les pages juridiques et les longs textes : un bloc de lecture à 68ch, où
   les titres, listes et définitions sont stylés sans classe. Un lien y est
   souligné, comme partout. */
.prose {
  max-width: var(--etroit);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: var(--e12) 0 var(--e4);
}

.prose h3 {
  font-size: 1.25rem;
  margin: var(--e8) 0 var(--e3);
}

.prose h4 {
  margin: var(--e6) 0 var(--e2);
}

.prose p,
.prose ul,
.prose ol,
.prose dl {
  margin: 0 0 var(--e6);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: var(--e2);
}

.prose li::marker {
  color: var(--mousse);
}

.prose dt {
  font-weight: 600;
  margin-top: var(--e4);
}

.prose dd {
  margin: var(--e1) 0 0;
}

.prose blockquote {
  margin: var(--e6) 0;
  padding-left: var(--e6);
  border-left: 2px solid var(--mousse);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: var(--e12) 0;
}

.prose .aparte,
.prose .tableau-defilant,
.prose .questions {
  margin-block: var(--e8);
}

/* ————————————————————————————— Formulaire ————————————————————————————— */

/* Le formulaire poste en HTML classique sur /api/contact et marche sans
   script : rien ici ne dépend de site.js, qui ne fait que charger le widget
   anti-robot au premier geste. */
.formulaire {
  display: grid;
  gap: var(--e6);
  max-width: 36rem;
}

.champ {
  display: grid;
  gap: var(--e2);
}

.champ > label {
  font-weight: 600;
  font-size: var(--t-petit);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.4;
  color: var(--encre);
  background: var(--champ);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ textarea {
  min-height: 10rem;
  resize: vertical;
}

/* Le chevron du <select>, dessiné en SVG embarqué : ni image de bibliothèque
   ni requête, et le même dans tous les navigateurs. */
.champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232e5e44' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--mousse);
  box-shadow: 0 0 0 3px rgba(63, 122, 91, 0.22);
}

.champ__aide {
  font-size: var(--t-micro);
  color: var(--texte-doux);
}

.obligatoire {
  color: var(--mousse-texte);
}

.mention-rgpd {
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: 60ch;
  margin: 0;
}

/* Le message d'erreur : le seul rouge du site. Il porte `role="alert"` dans
   le HTML que la Function renvoie ; ici il n'a qu'à se voir. */
.formulaire__erreur {
  padding: var(--e4) var(--e6);
  background: var(--alerte-fond);
  border-left: 2px solid var(--alerte);
  color: var(--alerte);
  font-weight: 500;
}

.formulaire__erreur > :last-child {
  margin-bottom: 0;
}

/* Le piège à robots : un champ que personne ne voit et qu'aucun clavier
   n'atteint. `display:none` le ferait ignorer de certains robots ; on le
   sort du cadre. Il ne remplace pas le filtre de la Pages Function. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Le conteneur du widget anti-robot. Il ne se montre que le temps où
   Cloudflare a besoin d'un clic : c'est site.js qui pose et retire
   `est-visible`, prévenu par le widget lui-même. Le reste du temps il est
   hors de la grille : un conteneur en flux mais vide coûte une rangée de
   `gap`, et décalait le bouton au premier clic dans un champ. Le contenu du
   widget vit dans un shadow DOM fermé : aucun sélecteur ne peut voir de
   l'extérieur s'il y a quelque chose à afficher. */
.verification:not(.est-visible) {
  display: none;
}

/* ————————————————————————————— Coordonnées ————————————————————————————— */

/* La colonne de la page contact : téléphone, e-mail, adresse, en libellés
   discrets et valeurs franches. Le téléphone en serif, comme un titre : c'est
   la chose qu'un visiteur pressé cherche. */
.coordonnees {
  margin: 0;
  display: grid;
  gap: var(--e6);
}

.coordonnees dt {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: var(--e1);
}

.coordonnees dd {
  margin: 0;
  font-size: 1.125rem;
}

.coordonnees a {
  color: var(--lien);
}

.coordonnees__numero {
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1.15;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.coordonnees__numero:hover,
.coordonnees__numero:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ————————————————————————————— Appel final ————————————————————————————— */

/* Sur la forêt, avant le pied : le titre et le bouton à gauche, le numéro à
   droite, en grand serif. Le numéro est un objet typographique, pas un
   bouton : sur une page qu'on vient de lire, c'est lui qu'on cherche. */
.appel {
  display: grid;
  gap: var(--e8);
  align-items: center;
}

.appel .titre-section {
  max-width: 20ch;
}

.appel .intro {
  margin-bottom: var(--e8);
}

.appel__coordonnees {
  display: grid;
  gap: var(--e2);
  align-content: start;
}

.appel__mention {
  margin: 0;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--sauge);
}

.appel__coordonnees .lien + .appel__mention,
.appel__numero + .appel__mention {
  margin-top: var(--e4);
}

.appel__numero {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: var(--craie);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.appel__numero:hover,
.appel__numero:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sauge);
}

.appel__coordonnees .lien {
  justify-self: start;
  font-size: 1.125rem;
}

@media (min-width: 900px) {
  .appel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--e12);
  }

  .appel__coordonnees {
    padding-left: var(--e12);
    border-left: 1px solid var(--filet-clair);
  }
}

/* ————————————————————————————— Pied de page ————————————————————————————— */

.pied {
  background: var(--foret);
  padding-block: clamp(3rem, 6vw, 5rem) var(--e8);
  font-size: var(--t-petit);
}

.pied__grille {
  display: grid;
  gap: var(--e8) var(--e8);
}

.pied__marque {
  max-width: 34ch;
}

.pied__identite {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.pied__logo {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}

.pied__nom {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0;
}

.pied__metier {
  color: var(--sauge);
  margin: 0 0 var(--e6);
}

.pied__adresse {
  line-height: 1.7;
}

.pied__adresse a,
.pied__liste a {
  color: var(--craie);
  text-decoration: none;
}

.pied__adresse a:hover,
.pied__liste a:hover,
.pied__adresse a:focus-visible,
.pied__liste a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--sauge);
  text-underline-offset: 0.2em;
}

.pied__titre {
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--sauge);
  margin: 0 0 var(--e4);
}

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

.pied__liste li {
  margin-bottom: var(--e2);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e6);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--e6);
  border-top: 1px solid var(--filet-clair);
  font-size: var(--t-micro);
  color: var(--sauge);
}

.pied__bas .lien {
  color: var(--sauge);
  text-decoration-color: var(--filet-clair-fort);
}

.pied__bas .lien:hover {
  color: var(--craie);
  text-decoration-color: var(--craie);
}

/* La signature de l'atelier, au registre des liens légaux et pas plus :
   c'est la forme que le contrôle du dépôt reconnaît (`a.lien.signature`). */
.signature {
  margin-left: auto;
}

@media (min-width: 600px) {
  .pied__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pied__grille {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--e8) var(--e12);
  }
}

/* ————————————————————————————— Apparition ————————————————————————————— */

/* La seule animation du site : un bloc marqué `.apparition` monte de 12 px
   et s'opacifie quand il entre dans la fenêtre. Tout est gardé par
   `:root[data-js]`, posé par site.js : sans script, rien n'est jamais caché.
   site.js rend d'ailleurs tout visible au bout de deux secondes, quoi qu'il
   arrive : une animation n'est jamais la condition d'affichage du contenu.
   Ne pas la poser sur le seuil : le script est différé, et le premier écran
   ne doit pas clignoter. */
:root[data-js] .apparition {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

:root[data-js] .apparition.est-visible {
  opacity: 1;
  transform: none;
}

/* ————————————————————————————— Confort ————————————————————————————— */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :root[data-js] .apparition {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .entete,
  .pied,
  .bascule,
  .boutons,
  .saut-contenu,
  .verification {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .section--foret,
  .section--sapin,
  .bandeau-page--foret {
    --texte: #000;
    --texte-doux: #333;
    background: none;
    color: #000;
  }

  .seuil {
    display: block;
    min-height: 0;
    --texte: #000;
    background: none;
    color: #000;
  }

  .seuil__photo,
  .seuil__voile {
    display: none;
  }

  .seuil__titre,
  .seuil__accroche {
    color: #000;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }

  .question__corps {
    display: block !important;
  }

  :root[data-js] .apparition {
    opacity: 1;
    transform: none;
  }
}