/* ============================================================================
   FORGE — l'atelier.
   ----------------------------------------------------------------------------
   Pour les métiers de la main : charpente, ébénisterie, métal, pose. Ceux
   dont le client veut voir le TRAVAIL avant d'entendre le discours.

   ## Le parti pris, en trois décisions

   1. **La photographie occupe l'écran entier.** Un artisan se juge sur ce
      qu'il produit. Le bandeau fait donc 88 % de la hauteur visible, texte
      ancré en bas comme une affiche de cinéma — pas un rectangle de 400 px
      avec une image décorative à côté.

   2. **La typographie cogne.** Capitales condensées, interlettrage négatif,
      interligne sous 1. Un titre à 9 rem n'est pas de l'esbroufe : c'est ce
      qui distingue une affiche d'un formulaire.

   3. **Le rythme alterne.** Les sections claires et sombres se succèdent au
      lieu de s'empiler toutes en blanc. C'est ce qui donne l'impression de
      descendre dans un lieu plutôt que de faire défiler une liste.

   ## L'arrondi est un RÉGLAGE, pas un dogme

   Le thème naît à zéro — un menuisier n'a pas de coins arrondis, et c'est
   ce qui le distingue du gabarit d'agence. Mais la même charpente sert un
   salon de coiffure et un studio de photographie, qui eux en veulent
   beaucoup. `--r` porte donc l'arrondi des cartes, des images et des
   champs, `--r-bouton` celui des boutons — les deux se règlent séparément,
   parce qu'une pilule sur des images carrées est une allure, pas une
   incohérence. Les séparations, elles, restent des FILETS.
   ========================================================================= */

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

/* ── Ce que la coquille ne pose pas ──────────────────────────────────────
   `--f-systeme` est le repli des deux polices ; il vit ici et non dans la
   coquille pour qu'un thème sans police choisie n'ait rien à interpoler.

   `--trait` et `--filet-contre` se CALCULENT depuis le couple encre/papier
   au lieu de s'écrire. Un filet posé en dur — `rgba(255,255,255,0.16)` —
   ne fonctionne que sur fond sombre : dès qu'une édition inverse le
   couple, la bande renversée devient claire et tous ses filets
   disparaissent. Mélanger l'encre au papier, ou la couleur courante au
   transparent, marche dans les deux sens sans qu'on ait à le savoir.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --f-systeme: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --trait: color-mix(in srgb, var(--encre) 18%, var(--papier));
  --filet-contre: color-mix(in srgb, currentColor 20%, transparent);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte, var(--f-systeme));
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.saut {
  position: absolute;
  left: -9999px;
}
.saut:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--encre);
  color: var(--papier);
  padding: 0.75rem 1rem;
}

.enveloppe {
  width: 92%;
  max-width: var(--largeur);
  margin-inline: auto;
}

/* ── La typographie ──────────────────────────────────────────────────────
   La signature du thème. On la pose une fois, tout en hérite.

   `0.92` d'interligne sur les géants : au-delà de 4 rem, un interligne de
   1.1 creuse un fossé entre les lignes d'un même titre, et le titre cesse
   de se lire comme un bloc. Sous 1, les capitales se serrent et forment une
   masse — c'est exactement l'effet d'affiche recherché.
   ─────────────────────────────────────────────────────────────────────── */

.titre {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  letter-spacing: -0.035em;
  line-height: var(--titre-interligne, 0.92);
  text-transform: var(--titre-casse, uppercase);
  margin: 0;
  text-wrap: balance;
}
/* 11vw : le titre suit la largeur de l'écran, pas des paliers. Sur un
   téléphone il descend à 2.75 rem, sur un grand écran il monte à 8.5 —
   deux tailles qu'aucun jeu de media queries ne relie aussi bien. */
.titre-geant { font-size: clamp(2.75rem, 11vw, 8.5rem); }
.titre-section { font-size: clamp(2rem, 5vw, 3.75rem); }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Le filet qui précède le surtitre : il ancre la ligne à gauche et donne
   au bloc de texte un point de départ visible. */
.surtitre::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  flex: none;
}

.texte-corps {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  max-width: 62ch;
}

/* ── Les boutons ─────────────────────────────────────────────────────── */

.bouton {
  display: inline-block;
  padding: 1.05rem 2rem;
  background: var(--accent);
  /* Jamais `#fff` en dur : sur un accent lime ou cyan, du blanc tombe
     sous 2:1. La couleur du texte sur l'aplat est un RÉGLAGE, et le
     panneau dit à quoi il sert. */
  color: var(--sur-accent, #fff);
  border: var(--trait-epaisseur) solid var(--accent);
  border-radius: var(--r-bouton, 0);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.bouton:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); }
/* La pilule a besoin de plus de flanc que le rectangle : à padding égal,
   ses arrondis grignotent la première et la dernière lettre. Le `min`
   n'est pas décoratif — sans lui, `999px / 2` donnerait un bouton de
   mille pixels de large. */
.bouton {
  padding-inline: clamp(2rem, calc(1.1rem + var(--r-bouton, 0px) / 2), 3rem);
}

.bouton-fantome {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.bouton-fantome:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* ── L'annonce et l'en-tête ──────────────────────────────────────────── */

.annonce {
  background: var(--encre);
  color: var(--papier);
  text-align: center;
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ── L'en-tête, et ses deux allures ──────────────────────────────────────
   BARRE : une bande pleine largeur, soulignée d'un filet. C'est l'allure
   d'origine, celle de l'artisan et du cabinet — elle dit « voici l'adresse
   et le téléphone », pas « voici une marque ».

   PILULE : une capsule qui se pose SUR la photographie. C'est la
   différence d'en-tête qui se voit le plus vite — avant la couleur, avant
   la typographie — sur une vignette de trois cents pixels.
   ─────────────────────────────────────────────────────────────────────── */

.entete {
  position: relative;
  z-index: 3;
  background: var(--papier);
  border-bottom: var(--trait-epaisseur) solid var(--encre);
}
.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
}

.entete--pilule {
  background: transparent;
  border-bottom: none;
  padding-block: 0.9rem;
}
.entete--pilule .entete-inner {
  padding: 0.7rem 1.6rem;
  background: var(--papier);
  border: var(--trait-epaisseur) solid var(--encre);
  border-radius: 999px;
}

/* Sur l'ACCUEIL seulement, la pilule ne prend aucune place dans le flux :
   le bandeau commence en haut de page et la capsule s'y pose. `height: 0`
   plutôt qu'une marge négative — une marge négative doit connaître la
   hauteur de l'en-tête, laquelle dépend de la police et de la densité, et
   se retrouve fausse dès qu'on touche à l'une des deux.

   Le décalage se fait en `position: relative`, pas en `margin-top` : une
   marge sur l'enfant d'une boîte sans bordure ni rembourrage FUSIONNE avec
   celle du parent et redescend toute la page d'un cran.

   Ailleurs que sur l'accueil, la pilule reste dans le flux : les autres
   gabarits ne commencent pas par une photographie pleine hauteur, et elle
   recouvrirait le titre de la page. */
.entete--flottante {
  height: 0;
  padding-block: 0;
  z-index: 5;
}
.entete--flottante .entete-inner { position: relative; top: 1rem; }

.marque {
  font-family: var(--f-titre, var(--f-systeme));
  font-weight: var(--titre-graisse, 800);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: var(--titre-casse, uppercase);
  text-decoration: none;
}
.nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--accent); }

.entete-tel {
  font-weight: 800;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ── LE BANDEAU ──────────────────────────────────────────────────────────
   La pièce maîtresse. Pleine hauteur, texte en bas, image qui respire.
   ─────────────────────────────────────────────────────────────────────── */

.bandeau {
  position: relative;
  border-bottom: var(--trait-epaisseur) solid var(--encre);
  background: var(--papier);
  overflow: hidden;
}

/* L'image est portée par un pseudo-élément et non par `background` sur la
   section : c'est ce qui permet de l'animer sans animer le texte. */
.bandeau-sombre {
  color: #fff;
  /* 88vh, pas 100 : on laisse voir qu'il y a quelque chose dessous. Un
     bandeau qui remplit exactement l'écran donne l'impression d'une page
     sans suite, et le visiteur ne fait pas défiler. */
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
}
.bandeau-sombre::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fond-bandeau);
  background-size: cover;
  background-position: center;
  /* Un zoom très lent : vingt secondes pour 6 %. Assez pour que l'image
     paraisse vivante, trop lent pour qu'on la voie bouger — ce qui
     détournerait du texte. */
  animation: forge-respire 24s ease-out forwards;
  z-index: 0;
}
.bandeau-sombre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Le dégradé monte DU BAS, là où le texte est posé, au lieu de traverser
     l'image de gauche à droite. Le haut de la photographie reste donc
     lisible, et le texte garde son contraste là où il en a besoin. */
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.62) 34%,
      rgba(0, 0, 0, 0.18) 68%,
      rgba(0, 0, 0, 0.32) 100%
    );
}

@keyframes forge-respire {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.bandeau-inner {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding: calc(5rem * var(--k-densite, 1)) 0 calc(4rem * var(--k-densite, 1));
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
/* Sans image, le bandeau redevient un bloc de texte ordinaire : ni pleine
   hauteur, ni dégradé. Un thème doit rester correct quand le client n'a
   pas encore mis sa photo. */
.bandeau:not(.bandeau-sombre) .bandeau-inner {
  padding-block: calc(5.5rem * var(--k-densite, 1));
}

.bandeau p {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  max-width: 46ch;
  margin: 0;
  opacity: 0.92;
}
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.bandeau-sombre .surtitre { color: #fff; opacity: 0.85; }
.bandeau-sombre .bouton-fantome { color: #fff; border-color: #fff; }
.bandeau-sombre .bouton-fantome:hover { background: #fff; color: var(--encre); }

/* Les arguments sous le bandeau : une bande, pas des pastilles.

   Elle est ENVELOPPÉE comme le reste. Sans cela, la liste partait du bord
   absolu de la fenêtre pendant que tout le reste de la page s'alignait à
   4 % — un décalage qu'on lit comme un défaut d'affichage, pas comme un
   parti pris. */
.arguments-bande {
  border-bottom: var(--trait-epaisseur) solid var(--encre);
}
.arguments {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  list-style: none;
  margin-block: 0;
  padding: 0.9rem 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.arguments li { display: flex; align-items: center; gap: 0.55rem; padding-block: 0.35rem; }
/* La puce suit l'arrondi général : carrée à zéro, ronde au maximum. C'est
   un détail de huit pixels, et c'est pourtant l'un des rares signes qui
   restent lisibles sur une vignette. */
.arguments li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: min(var(--r, 0px), 50%);
  background: var(--accent);
  flex: none;
}

/* ── Les sections, et leur alternance ────────────────────────────────────
   C'est le second levier du rythme, après la pleine hauteur du bandeau.
   Une page qui empile huit blocs blancs se lit comme un document ; une
   page qui alterne clair et sombre se parcourt comme un lieu.
   ─────────────────────────────────────────────────────────────────────── */

.section {
  padding: calc(clamp(4.5rem, 9vw, 8rem) * var(--k-densite, 1)) 0;
  border-bottom: 1px solid var(--trait);
}

/* Les sections sombres : prestations et réalisations, c'est-à-dire les
   deux qu'on vient voir. Elles se détachent du reste.

   Le fond est posé sur la SECTION et non sur le bloc interne, via `:has()`.
   Sur le bloc, il s'arrêtait à la largeur de l'enveloppe et donnait une
   carte sombre flottant dans du blanc — l'inverse du rythme cherché, qui
   veut des bandes pleine largeur. Les sections ne portent pas de classe
   propre à leur type, d'où le sélecteur par contenu. */
.section:has(.prestations),
.section:has(.realisations) {
  background: var(--encre);
  color: var(--papier);
  border-bottom-color: var(--encre);
}
/* L'accent CHANGE de valeur en passant sur l'encre, il ne s'éclaircit pas
   par opacité. Un vert à 5,5:1 sur du crème donne 2,8:1 sur du presque
   noir, et le surtitre d'une bande renversée est le même texte de 12 px
   que celui d'une bande claire : il lui faut les mêmes 4,5:1. */
.section:has(.prestations) .surtitre,
.section:has(.realisations) .surtitre { color: var(--accent-contre); }

.section-tete {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: calc(clamp(2.5rem, 5vw, 4rem) * var(--k-densite, 1));
  max-width: 46ch;
}

/* ── Les prestations, numérotées ─────────────────────────────────────────
   Le numéro est GÉANT et en filigrane : il structure la lecture sans
   entrer en concurrence avec le titre de la prestation.
   ─────────────────────────────────────────────────────────────────────── */

.prestation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2rem;
  align-items: baseline;
  padding: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--k-densite, 1)) 0;
  border-top: 1px solid var(--filet-contre);
  /* Sans ce minimum, une prestation au nom long comprime la colonne du
     prix jusqu'à faire sortir « SUR DEVIS » du cadre : `auto` cède
     toujours avant `1fr`. */
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.prestation:last-child { border-bottom: 1px solid var(--filet-contre); }

/* Le numéro est un FILIGRANE, mais c'est du texte : à 0,55 d'opacité il
   tombait sous les 3:1 exigés d'un grand caractère. 0,75 le laisse en
   retrait du titre sans le rendre illisible. */
.prestation-numero {
  font-family: var(--f-titre, var(--f-systeme));
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--titre-graisse, 800);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--accent-contre);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.prestation h3 {
  margin: 0 0 0.5rem;
  font-family: var(--f-titre, var(--f-systeme));
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: var(--titre-graisse, 800);
  letter-spacing: -0.02em;
  text-transform: var(--titre-casse, uppercase);
}
.prestation p { margin: 0; opacity: 0.78; max-width: 58ch; }
.prestation-prix {
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-contre);
  white-space: nowrap;
}

/* ── Les réalisations, en grille asymétrique ─────────────────────────────
   La première image occupe deux colonnes et deux rangées. C'est ce qui
   évite l'effet « planche de vignettes » : un artisan a UNE réalisation
   dont il est le plus fier, et la grille doit le dire.
   ─────────────────────────────────────────────────────────────────────── */

/* Le CARRÉ, et non le 4/3.

   Dans la grille, la pièce maîtresse occupe deux colonnes sur deux
   rangées. La hauteur d'une rangée vaut donc exactement une colonne — et
   une vignette en 4/3 y est plus BASSE que sa rangée. Elle ne s'étire pas
   pour autant : un élément de grille qui porte un `aspect-ratio` garde son
   rapport au lieu de suivre l'alignement `stretch`. Résultat, un bandeau
   du fond de grille dépassait sous chaque petite vignette, qu'on lisait
   comme un trou. Au carré, l'ajustement est exact sans rien contraindre.
   En colonne unique, la question ne se pose plus : le 4/3 revient. */
.realisation {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--r, 0);
  margin: 0;
}
.realisation img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.1, 1);
}
.realisation:hover img { transform: scale(1.05); }
.realisation figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* TROIS colonnes, et non `auto-fit`.

   Avec `auto-fit`, un écran large en donnait cinq : la première
   réalisation occupait deux colonnes sur deux rangées, les deux suivantes
   se posaient en haut à droite, et la moitié droite de la grille restait
   VIDE — un grand rectangle gris, la couleur de fond de la grille vue à
   travers les cases inoccupées. La grille asymétrique n'a de sens qu'avec
   un nombre de colonnes qui referme la rangée : trois, dont deux prises
   par la pièce maîtresse.

   L'écart entre les vignettes suit l'arrondi : deux pixels quand les
   angles sont droits — la mosaïque — davantage quand ils sont ronds, sinon
   les coins arrondis se font face de si près qu'on ne voit plus qu'un
   liseré tordu entre deux images. C'est la BANDE qu'on aperçoit dans
   l'écart, pas une couleur de grille : une couleur de grille se voit
   partout où une case manque, et l'on prend le trou pour une image qui
   n'aurait pas chargé. */
.realisations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(2px, calc(var(--r, 0px) / 3));
}
/* La pièce maîtresse ne prend ses deux colonnes QUE s'il y a de quoi
   refermer la rangée. À une ou deux réalisations, elle laisserait à côté
   d'elle une case vide grande comme un quart de la section. */
.realisations:has(.realisation:nth-child(3)) .realisation:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 900px) {
  .realisations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .realisations { grid-template-columns: 1fr; }
  .realisations .realisation { aspect-ratio: 4 / 3; }
  .realisations:has(.realisation:nth-child(3)) .realisation:first-child {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── Les chiffres ────────────────────────────────────────────────────── */

.chiffres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* `.chiffre` est le CONTENEUR d'un couple — la section rend une liste de
   définitions, `<dt>` pour la valeur et `<dd>` pour le libellé. Poser la
   taille géante sur le conteneur la donnait aux deux : « 25 » et « ans de
   métier » sortaient à la même échelle, en vert, et la section devenait
   illisible. Le nombre seul est géant ; le libellé le nomme. */
.chiffre dt {
  font-family: var(--f-titre, var(--f-systeme));
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--titre-graisse, 800);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chiffre dd {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  max-width: 18ch;
}

/* ── Les étapes ──────────────────────────────────────────────────────── */

.etapes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etapes-liste li { border-top: var(--trait-epaisseur) solid var(--encre); padding-top: 1.25rem; }
.etape-rang {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.etapes-liste h3 {
  margin: 0 0 0.5rem;
  font-family: var(--f-titre, var(--f-systeme));
  font-size: 1.1875rem;
  font-weight: var(--titre-graisse, 800);
  text-transform: var(--titre-casse, uppercase);
  letter-spacing: -0.01em;
}
.etapes-liste p { margin: 0; opacity: 0.78; }

/* ── Les avis ────────────────────────────────────────────────────────── */

.avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.avis blockquote {
  margin: 0;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.45;
  font-weight: 600;
}
.avis blockquote::before { content: "« "; color: var(--accent); }
.avis blockquote::after { content: " »"; color: var(--accent); }
.avis figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ── Les labels ──────────────────────────────────────────────────────── */

.labels-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.label-nom {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.label-detail { display: block; margin-top: 0.35rem; opacity: 0.7; font-size: 0.9375rem; }

/* ── La zone d'intervention ──────────────────────────────────────────── */

.zone-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.zone-liste li {
  border: 1px solid var(--trait);
  border-radius: var(--r-bouton, 0);
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.zone-mention { opacity: 0.7; font-size: 0.9375rem; }

/* ── Le journal ──────────────────────────────────────────────────────── */

.journal-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.journal-carte { display: block; text-decoration: none; }
.journal-carte img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  border-radius: var(--r, 0);
}
.journal-date {
  display: block;
  margin: 1rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.journal-carte h3 {
  margin: 0 0 0.5rem;
  font-family: var(--f-titre, var(--f-systeme));
  font-size: 1.25rem;
  font-weight: var(--titre-graisse, 800);
  letter-spacing: -0.015em;
}
.journal-carte p { margin: 0; opacity: 0.75; }

/* ── Le contact ──────────────────────────────────────────────────────── */

.contact-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.coordonnees a { text-decoration: none; font-weight: 700; }

.champ { display: block; margin-bottom: 1.1rem; }
.champ span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.champ input,
.champ textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r, 0);
  background: var(--papier);
  color: inherit;
  font: inherit;
}
.champ input:focus,
.champ textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ── L'appel final ───────────────────────────────────────────────────── */

.appel {
  background: var(--accent);
  color: var(--sur-accent, #fff);
  border-bottom: none;
}
.appel-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.appel .titre-section { max-width: 20ch; }
/* Le papier, pas `#fff` : sur une édition sombre, un bouton blanc sur une
   bande d'accent est le seul élément vraiment blanc de la page, et il se
   voit comme une pièce rapportée. */
.appel .bouton { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.appel .bouton:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* ── Le pied ─────────────────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: var(--papier);
  padding: calc(clamp(3rem, 6vw, 5rem) * var(--k-densite, 1)) 0 2rem;
}
.pied-haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--filet-contre);
}
.pied-liens { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.pied-liens a { text-decoration: none; opacity: 0.8; }
.pied-liens a:hover { opacity: 1; }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  opacity: 0.65;
}

/* ── Étroit ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .nav { display: none; }
  .prestation { grid-template-columns: auto 1fr; }
  .prestation-prix { grid-column: 2; }
  .bandeau-sombre { min-height: 76vh; }
}

/* ── LES SIGNATURES D'ÉDITION ────────────────────────────────────────────
   Ce que `data-edition` porte et qu'aucune variable ne saurait dire.

   Une variable exprime une valeur : un rayon, une densité, une couleur.
   Elle ne sait pas dire « ici le filet de section est doublé », « ici la
   barre d'annonce passe en accent », « ici le surtitre perd sa barre
   d'appel ». Ces règles-là ne valent que pour une édition, et les
   transformer en réglages aurait ajouté sept interrupteurs au panneau du
   client pour des choses qu'il ne combinera jamais.

   Chacune tient en deux ou trois déclarations, et chacune se voit sur une
   capture de trois cents pixels — c'est le seul critère.
   ─────────────────────────────────────────────────────────────────────── */

/* CHANTIER — le filet de bas de section devient un trait de chantier, et
   le numéro de prestation cesse d'être un filigrane : sur un devis, les
   repères se lisent. */
[data-edition="chantier"] .section { border-bottom: var(--trait-epaisseur) solid var(--encre); }
[data-edition="chantier"] .surtitre::before { width: 4rem; height: var(--trait-epaisseur); }
[data-edition="chantier"] .prestation-numero { opacity: 1; }

/* ATELIER — tout s'affine. Le trait d'appel du surtitre passe au cheveu,
   le numéro recule d'un cran. L'établi, pas le chantier. */
[data-edition="atelier"] .surtitre::before { width: 3.25rem; height: 1px; }
[data-edition="atelier"] .prestation-numero { opacity: 0.55; }

/* SALON — la pilule ne se contente pas d'être ronde, elle DÉCOLLE. C'est
   la seule ombre portée du thème, et elle n'existe que pour cette
   édition-là : ailleurs, l'ombre est le marqueur du gabarit d'agence. */
[data-edition="salon"] .entete--pilule .entete-inner {
  box-shadow: 0 14px 38px rgb(0 0 0 / 0.12);
}
[data-edition="salon"] .surtitre::before { width: 1.5rem; height: 2px; }

/* CABINET — rien ne dépasse. Le trait d'appel se réduit à une amorce, le
   filet de section reste au cheveu. Un métier réglementé décrit, il ne
   vante pas. */
[data-edition="cabinet"] .surtitre::before { width: 1.5rem; height: 1px; }

/* RING — la barre d'annonce passe en accent et le filet de section aussi :
   deux lignes acides qui traversent la page de part en part. C'est le seul
   endroit du thème où l'accent sert de surface pleine largeur. */
[data-edition="ring"] .annonce {
  background: var(--accent);
  color: var(--sur-accent);
}
[data-edition="ring"] .section { border-bottom: var(--trait-epaisseur) solid var(--accent); }
[data-edition="ring"] .prestation-numero { opacity: 1; }

/* TABLE — le surtitre abandonne sa barre pour une capitale très espacée,
   comme sur une carte de restaurant. */
[data-edition="table"] .surtitre::before { display: none; }
[data-edition="table"] .surtitre { letter-spacing: 0.3em; }

/* STUDIO — les filets disparaissent. Ce qui sépare deux sections, c'est
   l'air, pas un trait ; une galerie n'encadre pas ses murs. */
[data-edition="studio"] .section { border-bottom-color: transparent; }
[data-edition="studio"] .arguments-bande { border-bottom-color: var(--trait); }
[data-edition="studio"] .surtitre::before { width: 1.25rem; height: 1px; }

/* ── Mouvement réduit ────────────────────────────────────────────────────
   Le zoom du bandeau est un confort ; pour qui a demandé moins de
   mouvement, il n'a aucune raison d'exister.
   ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bandeau-sombre::after { animation: none; }
  .realisation img { transition: none; }
  .realisation:hover img { transform: none; }
}