/* ============================================================================
   ORIGO — le thème de départ.
   ----------------------------------------------------------------------------
   Parti pris : ne rien imposer. Là où Établi est robuste et Comptoir
   généreux, Origo est NEUTRE — c'est le thème que reçoit tout le monde,
   donc celui qui doit convenir à un menuisier comme à un cabinet.

   Sa souplesse ne vient pas d'options en pagaille mais de cinq variables
   posées dans `layout/theme.liquid` : couleur, arrondi, largeur, échelle
   des titres, densité verticale. Toutes les sections en héritent, donc
   changer l'une d'elles change le site entier sans qu'aucune section ait
   à le savoir.
   ========================================================================= */

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte-police, ui-sans-serif, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre-police); }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

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

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

/* ── Titres ────────────────────────────────────────────────────────────
   `clamp()` multiplié par l'échelle : le titre s'adapte à l'écran ET au
   réglage, sans que l'un annule l'autre. */
.titre {
  margin: 0; font-weight: 700; line-height: 1.1;
  letter-spacing: var(--titre-espace, -0.022em);
  text-transform: var(--titre-casse, none);
}
.titre-geant { font-size: calc(clamp(2.2rem, 5.5vw, 3.5rem) * var(--echelle) / 100); }
.titre-grand { font-size: calc(clamp(1.9rem, 4vw, 2.8rem) * var(--echelle) / 100); }
.titre-section { font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--echelle) / 100); }

.surtitre {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--surtitre-espace, 0.12em);
  text-transform: var(--surtitre-casse);
  color: var(--accent);
}

.chapeau {
  margin: 0.9rem 0 0;
  max-width: 62ch;
  font-size: 1.06rem;
  opacity: 0.78;
}

.mention { margin-top: 1.25rem; font-size: 0.85rem; opacity: 0.6; }

/* ── Boutons ──────────────────────────────────────────────────────── */
.bouton {
  display: inline-block;
  padding: 0.78rem 1.55rem;
  border-radius: var(--bouton-rayon);
  background: var(--accent);
  color: var(--accent-texte);
  border: 1px solid var(--accent);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.bouton:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); }
.bouton:active { transform: scale(0.98); }
/* Sur une bande DÉJÀ peinte en accent, le bouton principal peignait de
   l'accent sur de l'accent : un rectangle invisible, dont seul le libellé
   restait — et l'appel à l'action de la page d'accueil, celui qui compte le
   plus, ressemblait à un lien mal aligné. Il s'inverse donc. */
.section-accent .bouton {
  background: var(--accent-texte);
  border-color: var(--accent-texte);
  color: var(--accent);
}
.section-accent .bouton:hover {
  background: color-mix(in oklab, var(--accent-texte) 88%, var(--accent));
  border-color: color-mix(in oklab, var(--accent-texte) 88%, var(--accent));
}
.section-accent .bouton-secondaire,
.section-accent .bouton-secondaire:hover { background: transparent; color: inherit; }

.bouton-secondaire {
  background: transparent;
  color: inherit;
  border-width: var(--filet, 1px);
  border-color: color-mix(in oklab, currentColor 32%, transparent);
}
.bouton-secondaire:hover {
  background: color-mix(in oklab, currentColor 8%, transparent);
  border-color: currentColor;
}

.lien-fleche {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { text-decoration: underline; }

/* ── Sections ─────────────────────────────────────────────────────────
   La densité pilote l'espacement vertical de TOUTES les sections d'un
   seul réglage. Sans elle, chaque section aurait sa marge, et le site
   respirerait de façon inégale dès qu'on en réordonne deux. */
.section { padding-block: calc(4.5rem * var(--densite) / 100); }
.section-papier { background: var(--papier); }
.section-voile { background: var(--voile); }
.section-encre { background: var(--encre); color: var(--papier); }
.section-accent { background: var(--accent); color: var(--accent-texte); }
.section-encre .surtitre,
.section-accent .surtitre { color: currentColor; opacity: 0.75; }

.tete { max-width: 62ch; }
.tete-centre { max-width: 66ch; margin-inline: auto; text-align: center; }
.tete + * { margin-top: 2.75rem; }

/* ── Grilles ──────────────────────────────────────────────────────── */
.grille { display: grid; gap: 1.75rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grille-1 { grid-template-columns: 1fr; max-width: 62ch; margin-inline: auto; }

/* ── En-tête et pied ──────────────────────────────────────────────── */
.annonce {
  background: var(--encre);
  color: var(--papier);
  font-size: 0.88rem;
}
.annonce-corps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem; padding-block: 0.6rem; text-align: center;
}
.annonce-corps a { font-weight: 600; }

.entete { border-bottom: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 14%, transparent); }
.entete-corps {
  display: flex; align-items: center; gap: 2rem;
  padding-block: 1.1rem;
}
.marque { font-size: 1.15rem; font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
.menu { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-inline: auto; font-size: 0.96rem; }
.menu a { text-decoration: none; opacity: 0.82; }
.menu a:hover { opacity: 1; color: var(--accent); }
.entete-actions { display: flex; align-items: center; gap: 1rem; }
.entete-tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
/* 1180 px, et non 860 : entre les deux, la marque, cinq liens, un numéro et
   un bouton ne tiennent plus sur une ligne. Ce n'était pas visible parce que
   rien ne débordait — c'est le MENU qui se repliait tout seul, sur deux
   lignes, laissant la marque flotter au milieu et l'en-tête grandir de
   vingt-cinq pixels (mesuré : 89 px à 1440, 114 px à 992).

   `.menu` a `flex-wrap: wrap`, ce qui empêche le débordement mais fabrique
   ce repli sale. On prend donc les devants : sous 1180, le menu passe en
   rangée à lui, entière, sous la marque et le bouton. Rien ne disparaît —
   ce thème n'a pas de menu à trois barres où ranger le numéro. */
@media (max-width: 1180px) {
  .entete-corps { flex-wrap: wrap; gap: 1rem; }
  .menu { margin-inline: 0; order: 3; width: 100%; }
  /* C'était le `margin-inline: auto` du menu qui poussait le groupe
     téléphone + bouton contre le bord droit. Le menu parti sur sa propre
     rangée, plus rien ne pousse : les trois se serraient à gauche avec un
     demi-écran de vide à droite. */
  .entete-actions { margin-left: auto; }
}

/* ── L'en-tête en PILULE ───────────────────────────────────────────────
   La barre est ancrée aux bords : elle appartient à la page. La pilule
   est détachée des quatre côtés : elle flotte AU-DESSUS. C'est la seule
   différence d'en-tête qui se lise encore sur une vignette, et elle ne
   coûte que ces quelques lignes — pas une section de plus.

   Le filet passe donc du dessous de la barre au tour de la pilule : deux
   fois le même trait, aux deux endroits, ferait un cadre dans un cadre. */
.entete-pilule { border-bottom: 0; padding-block: 1rem; }
.entete-pilule .entete-corps {
  padding: 0.65rem 0.75rem 0.65rem 1.6rem;
  border: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--papier) 94%, var(--encre) 6%);
  box-shadow: 0 16px 38px -26px rgb(0 0 0 / 0.55);
}
@media (max-width: 860px) {
  /* Enroulée sur trois lignes, la pilule devient une gélule difforme : à
     cette largeur elle redevient un bloc aux angles adoucis. */
  .entete-pilule .entete-corps { border-radius: 1.4rem; padding: 1rem 1.1rem; }
}

.pied {
  padding-top: calc(3.5rem * var(--densite) / 100);
  background: var(--voile);
  font-size: 0.95rem;
}
.pied-corps {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem;
}
.pied-nom { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; }
.pied-phrase { margin: 0 0 0.75rem; max-width: 42ch; opacity: 0.75; }
.pied-marque p { margin: 0.25rem 0; opacity: 0.8; }
.pied-liens { display: grid; gap: 0.5rem; }
.pied-liens a { text-decoration: none; opacity: 0.8; }
.pied-liens a:hover { opacity: 1; text-decoration: underline; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-block: 1.25rem;
  border-top: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 14%, transparent);
  font-size: 0.85rem; opacity: 0.7;
}
.pied-bas a { text-decoration: none; }

/* ── Accroches ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  color: var(--papier);
}
.hero-moyen { min-height: 46vh; }
.hero-grand { min-height: 64vh; }
.hero-plein { min-height: 88vh; }
/* Sans image de fond, le voile serait un rectangle noir sur rien : on
   rend alors la section sur le fond du site, en texte normal. */
.hero:not([style]) { color: inherit; background: var(--voile); }
.hero:not([style]) .hero-voile { display: none; }
.hero-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.25));
}
.hero-corps { position: relative; padding-block: 5rem; max-width: 62ch; }
.hero-centre { margin-inline: auto; text-align: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; }
.hero-centre .hero-actions { justify-content: center; }
.hero-arguments {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
  font-size: 0.92rem; opacity: 0.9;
}
.hero-arguments li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.hero-centre .hero-arguments { justify-content: center; }

.scinde-corps {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.scinde-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--arrondi); }

/* ── Cartes, prestations, colonnes ────────────────────────────────── */
.carte, .colonne {
  display: flex; flex-direction: column;
  border-radius: var(--arrondi);
}
.carte img, .colonne img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--arrondi); margin-bottom: 1.1rem;
}
.carte h3, .colonne h3 { margin: 0 0 0.5rem; font-size: 1.16rem; }
.carte p, .colonne p { margin: 0; opacity: 0.78; }
.carte a { text-decoration: none; }
.carte h3 a:hover { color: var(--accent); }
.prix {
  margin-top: 0.9rem; font-size: 0.9rem; font-weight: 600;
  color: var(--accent);
}
.date { margin-top: 0.8rem; font-size: 0.84rem; opacity: 0.6; }

.liste-coches { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.liste-coches li { padding-left: 1.5rem; position: relative; }
.liste-coches li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}

/* ── Détail / à propos ────────────────────────────────────────────── */
.detail-corps {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.detail-gauche .detail-image { order: -1; }
.detail-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--arrondi); }
.detail-texte p { margin: 0 0 1.25rem; }
.signature { font-style: italic; opacity: 0.7; }

/* ── Tarifs ───────────────────────────────────────────────────────── */
.forfait {
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem;
  border: var(--filet, 1px) solid color-mix(in oklab, currentColor 16%, transparent);
  border-radius: var(--arrondi);
  text-align: center;
}
.forfait-phare {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.forfait-etiquette {
  align-self: center; margin-bottom: 0.9rem;
  padding: 0.25rem 0.8rem; border-radius: var(--pastille, 999px);
  background: var(--accent); color: var(--accent-texte);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.forfait h3 { margin: 0; font-size: 1.1rem; }
.forfait-prix {
  margin: 0.6rem 0 0; font-size: 1.9rem; font-weight: 700;
  letter-spacing: -0.02em;
}
.forfait-precision { font-size: 0.85rem; opacity: 0.65; }
.forfait .liste-coches { text-align: left; flex: 1; margin-block: 1.5rem; }

/* ── Chiffres ─────────────────────────────────────────────────────── */
.chiffres-liste {
  display: grid; gap: 2rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
}
.chiffre dt {
  font-size: calc(clamp(2rem, 4.5vw, 3rem) * var(--echelle) / 100);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
}
.chiffre dd { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.7; }
.section-accent .chiffre dt, .section-encre .chiffre dt { color: currentColor; }

/* ── Témoignages ──────────────────────────────────────────────────── */
.temoignage {
  margin: 0; padding: 1.9rem;
  background: color-mix(in oklab, currentColor 4%, transparent);
  border-radius: var(--arrondi);
}
.etoiles { color: var(--accent); letter-spacing: 0.1em; }
.temoignage blockquote { margin: 0.8rem 0 1.2rem; font-size: 1.04rem; }
.temoignage blockquote::before { content: "« "; }
.temoignage blockquote::after { content: " »"; }
.temoignage figcaption { display: grid; gap: 0.15rem; font-size: 0.9rem; }
.temoignage figcaption span { opacity: 0.6; }

/* ── Réalisations, galerie, avant/après ───────────────────────────── */
.mosaique { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mosaique-asymetrique > :first-child { grid-column: span 2; }
@media (max-width: 700px) { .mosaique-asymetrique > :first-child { grid-column: auto; } }
.realisation { margin: 0; }
.realisation img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--arrondi); }
.mosaique-asymetrique > :first-child img { aspect-ratio: 16/9; }
.realisation figcaption { margin-top: 0.8rem; display: grid; gap: 0.15rem; }
.realisation strong { font-size: 1rem; }
.realisation span { font-size: 0.85rem; opacity: 0.6; }

.galerie-grille { display: grid; gap: 1rem; }
.galerie-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.galerie-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.galerie-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.galerie-grille img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--arrondi); }

.paire { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.paire figure { margin: 0; }
.paire img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--arrondi); }
.paire figcaption {
  margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6;
}
.paire-legende { grid-column: 1 / -1; margin: 0.25rem 0 0; font-weight: 600; }

/* ── Logos, labels ────────────────────────────────────────────────── */
.logos-liste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2.5rem; margin: 0; padding: 0; list-style: none;
}
.logos-liste img { max-height: 44px; width: auto; opacity: 0.65; }
.logos-liste img:hover { opacity: 1; }
.logos-liste span { font-weight: 600; opacity: 0.5; }

.labels-liste {
  display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.labels-liste li {
  display: grid; gap: 0.35rem; align-content: start;
  padding: 1.4rem;
  border: var(--filet, 1px) solid color-mix(in oklab, currentColor 16%, transparent);
  border-radius: var(--arrondi);
}
.labels-liste img { max-height: 40px; width: auto; margin-bottom: 0.4rem; }
.labels-liste strong { font-size: 1rem; }
.labels-liste span { font-size: 0.85rem; opacity: 0.65; }

/* ── Étapes ───────────────────────────────────────────────────────── */
.etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.etapes-horizontal { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.etapes-liste li { display: flex; gap: 1.25rem; }
.etapes-horizontal li { flex-direction: column; }
.etape-rang {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: var(--pastille, 999px);
  background: var(--accent); color: var(--accent-texte);
  font-weight: 700;
}
.etapes-liste h3 { margin: 0.35rem 0 0.4rem; font-size: 1.1rem; }
.etapes-liste p { margin: 0; opacity: 0.78; }

/* ── Valeurs ──────────────────────────────────────────────────────── */
.valeur { text-align: center; }
.valeur-symbole { display: block; font-size: 1.7rem; color: var(--accent); margin-bottom: 0.6rem; }
.valeur h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.valeur p { margin: 0; opacity: 0.78; }

/* ── Équipe ───────────────────────────────────────────────────────── */
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--arrondi); }
.portrait figcaption { margin-top: 1rem; display: grid; gap: 0.2rem; }
.portrait strong { font-size: 1.05rem; }
.portrait span { font-size: 0.83rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.portrait p { margin: 0.4rem 0 0; font-size: 0.94rem; opacity: 0.75; }

/* ── Horaires, accès, zone ────────────────────────────────────────── */
.horaires-liste { margin: 0; display: grid; gap: 0.6rem; max-width: 30rem; margin-inline: auto; }
.horaire-ligne { display: flex; justify-content: space-between; gap: 1rem; }
.horaire-ligne dt { font-weight: 600; }
.horaire-ligne dd { margin: 0; opacity: 0.78; }
.horaire-ferme { opacity: 0.45; }

.acces-grille { display: grid; gap: 2rem; justify-items: start; }
.acces-infos { display: grid; gap: 1.1rem; margin: 0; }
.acces-infos dt { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.acces-infos dd { margin: 0.2rem 0 0; }

.jetons { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.jetons li {
  padding: 0.42rem 1rem;
  border: var(--filet, 1px) solid color-mix(in oklab, currentColor 20%, transparent);
  border-radius: var(--pastille, 999px);
  font-size: 0.92rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-liste { display: grid; max-width: 68ch; }
.faq-liste details {
  border-bottom: var(--filet, 1px) solid color-mix(in oklab, currentColor 14%, transparent);
}
.faq-liste summary {
  padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 600; cursor: pointer; list-style: none;
  position: relative;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 1rem;
  font-size: 1.3rem; font-weight: 400; color: var(--accent);
}
.faq-liste details[open] summary::after { content: "−"; }
.faq-reponse { padding-bottom: 1.3rem; opacity: 0.8; max-width: 62ch; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact-grille {
  display: grid; gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.contact-infos { display: grid; gap: 1.25rem; margin: 0; align-content: start; }
.contact-infos dt { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.contact-infos dd { margin: 0.2rem 0 0; }
.contact-infos a { text-decoration: none; }

.formulaire { display: grid; gap: 1rem; }
.champ { display: grid; gap: 0.35rem; }
.champ > span { font-size: 0.88rem; font-weight: 600; }
.champ input, .champ textarea {
  font: inherit; font-size: 0.97rem;
  padding: 0.72rem 0.9rem;
  border: var(--filet, 1px) solid color-mix(in oklab, currentColor 24%, transparent);
  border-radius: var(--arrondi);
  background: var(--papier);
  color: inherit;
}
.champ input:focus, .champ textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.formulaire .bouton { justify-self: start; border: 0; }
/* Le piège à robots : hors flux, invisible, et jamais atteint au clavier. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.message {
  margin: 0 0 1.75rem; padding: 0.95rem 1.15rem;
  border-radius: var(--arrondi); font-size: 0.96rem;
}
.message-ok { background: color-mix(in oklab, #16a34a 14%, transparent); }
.message-ko { background: color-mix(in oklab, #dc2626 14%, transparent); }

.newsletter-form {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  max-width: 30rem; margin-inline: auto;
}
.newsletter-form .champ { flex: 1 1 15rem; }

/* ── Citation, vidéo, séparateur, bandeau ─────────────────────────── */
.citation { margin: 0; max-width: 44ch; margin-inline: auto; text-align: center; }
.citation p {
  margin: 0; font-family: var(--titre-police);
  font-size: calc(clamp(1.3rem, 2.6vw, 1.8rem) * var(--echelle) / 100);
  line-height: 1.4;
}
.citation p::before { content: "« "; }
.citation p::after { content: " »"; }
.citation cite { display: block; margin-top: 1.1rem; font-size: 0.9rem; font-style: normal; opacity: 0.65; }

.video-cadre {
  aspect-ratio: 16/9; border-radius: var(--arrondi); overflow: hidden;
  background: color-mix(in oklab, currentColor 8%, transparent);
}
.video-cadre iframe { width: 100%; height: 100%; border: 0; }

.separateur { height: var(--espace, 56px); }
.separateur-filet {
  display: flex; align-items: center;
}
.separateur-filet::before {
  content: ""; width: min(92%, var(--largeur)); margin-inline: auto;
  border-top: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 16%, transparent);
}

.bandeau-image {
  position: relative; display: flex; align-items: center;
  min-height: var(--hauteur, 320px);
  background-size: cover; background-position: center;
  color: var(--papier);
}
.bandeau-voile { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); }
.bandeau-texte { position: relative; text-align: center; padding-block: 3rem; }
.bandeau-texte p { margin: 0.75rem auto 0; max-width: 56ch; }

/* ── Journal ──────────────────────────────────────────────────────── */
.journal .carte img { aspect-ratio: 3/2; }

/* ============================================================================
   LES ÉDITIONS
   ----------------------------------------------------------------------------
   Tout ce qui précède se règle avec un nombre ou une couleur, et sept
   habillages du thème n'ont besoin de rien d'autre pour changer de teinte,
   d'angle et de forme de bouton.

   Ce qui suit est ce qu'un nombre ne sait PAS dire : une barre d'accent
   devant les titres, un filet doublé, un cadre autour des cartes, une
   ombre portée, un interlettrage de trois crans. Ce sont des règles
   entières, elles vivent donc ici, derrière `data-edition` — posé sur
   `<html>` par la coquille.

   Règle du jeu : une signature par édition, PAS trois. Une édition se
   reconnaît à sa teinte, à son angle et à son en-tête ; ce qui suit ne
   fait qu'ajouter la preuve qu'on a affaire à un dessin et non à un
   nuancier. Une édition qui empile cinq effets cesse d'être le thème.
   ========================================================================= */

/* ── CHANTIER — la barre d'accent ─────────────────────────────────────
   Un trait épais posé devant chaque titre, comme un trait de crayon de
   charpentier. Il reprend l'épaisseur des filets : à 3 px, c'est le même
   geste que la séparation de l'en-tête. */
[data-edition="chantier"] .titre::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: calc(var(--filet, 1px) * 2);
  margin-bottom: 1.1rem;
  background: var(--accent);
}
[data-edition="chantier"] .tete-centre .titre::before,
[data-edition="chantier"] .hero-centre .titre::before { margin-inline: auto; }
[data-edition="chantier"] .section-accent .titre::before,
[data-edition="chantier"] .section-encre .titre::before,
[data-edition="chantier"] .hero .titre::before { background: currentColor; }
/* Les titres de carte et de forfait ne sont pas des titres de section :
   une barre devant chacun ferait une page en peigne. */
[data-edition="chantier"] .carte h3::before,
[data-edition="chantier"] .colonne h3::before,
[data-edition="chantier"] .forfait h3::before { content: none; }
/* Le filet doublé sous l'en-tête : un trait plein, un trait pâle. */
[data-edition="chantier"] .entete {
  box-shadow: 0 calc(var(--filet, 1px) * 2) 0 color-mix(in oklab, var(--encre) 7%, transparent);
}

/* ── ATELIER — le cadre au trait ──────────────────────────────────────
   Chaque image est cernée d'un filet, comme une planche montée sur son
   carton. Rien d'autre : l'atelier est sobre. */
[data-edition="atelier"] .carte img,
[data-edition="atelier"] .colonne img,
[data-edition="atelier"] .realisation img,
[data-edition="atelier"] .portrait img,
[data-edition="atelier"] .scinde-image,
[data-edition="atelier"] .detail-image,
[data-edition="atelier"] .galerie-grille img {
  box-shadow: 0 0 0 var(--filet, 1px) color-mix(in oklab, var(--encre) 16%, transparent);
}
[data-edition="atelier"] .surtitre::before { content: "— "; }

/* ── SALON — l'ombre douce ────────────────────────────────────────────
   Rien n'a d'arête : les blocs se posent sur la page au lieu d'y être
   découpés. C'est ce qui fait la différence avec CABINET, qui a le même
   arrondi de principe mais aucune ombre. */
[data-edition="salon"] .carte img,
[data-edition="salon"] .colonne img,
[data-edition="salon"] .realisation img,
[data-edition="salon"] .portrait img,
[data-edition="salon"] .scinde-image,
[data-edition="salon"] .detail-image,
[data-edition="salon"] .temoignage,
[data-edition="salon"] .forfait {
  box-shadow: 0 22px 44px -30px rgb(0 0 0 / 0.5);
}
[data-edition="salon"] .bouton { box-shadow: 0 12px 24px -16px var(--accent); }
[data-edition="salon"] .forfait { border-color: transparent; background: var(--papier); }

/* ── CABINET — le cadre net ───────────────────────────────────────────
   Un métier réglementé n'a droit ni au superlatif ni à l'effet. Sa
   signature est donc la plus discrète du lot : les cartes sont posées
   dans un cadre au trait, alignées, sans ombre ni relief. */
[data-edition="cabinet"] .carte,
[data-edition="cabinet"] .colonne {
  padding: 1.5rem;
  border: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 13%, transparent);
  background: var(--papier);
}
[data-edition="cabinet"] .section-voile .carte,
[data-edition="cabinet"] .section-voile .colonne { background: var(--papier); }
[data-edition="cabinet"] .temoignage {
  background: var(--papier);
  border-left: calc(var(--filet, 1px) * 3) solid var(--accent);
}

/* ── RING — l'étiquette d'accent ──────────────────────────────────────
   Le surtitre cesse d'être un mot coloré : il devient une étiquette
   pleine, la seule tache vive d'une page nocturne. */
[data-edition="ring"] .surtitre {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  background: var(--accent);
  color: var(--accent-texte);
  opacity: 1;
}
/* Sur un fond DÉJÀ peint en accent, l'étiquette disparaîtrait dans son
   propre fond. On la rend alors au texte nu. */
[data-edition="ring"] .section-accent .surtitre {
  background: transparent;
  color: currentColor;
  padding: 0;
}
[data-edition="ring"] .entete {
  border-bottom-color: color-mix(in oklab, var(--encre) 34%, transparent);
}

/* ── TABLE — le surtitre à l'italienne ────────────────────────────────
   Une carte de restaurant n'écrit pas ses intitulés en petites capitales
   espacées : elle les écrit à la main, en italique, dans la police des
   titres. Le trait sous le chapeau tient lieu de filet de menu. */
[data-edition="table"] .surtitre {
  font-family: var(--titre-police);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
}
[data-edition="table"] .tete,
[data-edition="table"] .tete-centre {
  padding-bottom: 1.6rem;
  border-bottom: var(--filet, 1px) solid color-mix(in oklab, var(--encre) 18%, transparent);
}
[data-edition="table"] .section-encre .tete,
[data-edition="table"] .section-accent .tete,
[data-edition="table"] .section-encre .tete-centre,
[data-edition="table"] .section-accent .tete-centre {
  border-bottom-color: color-mix(in oklab, currentColor 30%, transparent);
}

/* ── STUDIO — l'interlettrage ─────────────────────────────────────────
   Le vocabulaire du book : un surtitre étiré sur toute sa largeur, des
   boutons plus larges que hauts, des grilles qui laissent respirer. Aucun
   trait, aucune ombre — le noir fait le cadre. */
[data-edition="studio"] .surtitre {
  letter-spacing: 0.3em;
  font-size: 0.74rem;
}
[data-edition="studio"] .bouton { padding: 0.85rem 2.1rem; }
[data-edition="studio"] .grille { gap: 2.5rem; }
[data-edition="studio"] .mosaique,
[data-edition="studio"] .galerie-grille { gap: 2rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}