/* ==========================================================================
   danielbottlaender.com — design system v2 « Édition heure dorée »
   Éditorial clair : papier lin, encre, or en micro-détails. Le texte ne se
   pose JAMAIS sur une photo. Sombre réservé à la bande CTA et au footer.
   Voir docs/DESIGN.md
   ========================================================================== */

/* ---------- Polices auto-hébergées ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/spectral-v15-latin_latin-ext-300.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/spectral-v15-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/spectral-v15-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/spectral-v15-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --papier: #F9F6EF;        /* fond général, lin très clair */
  --papier-2: #F2EDE0;      /* surfaces discrètes */
  --hairline: #DDD5C2;      /* filets */
  --encre: #21281F;         /* texte principal */
  --encre-douce: #5A6153;   /* texte secondaire */
  --laiton: #8F7431;        /* or discret : détails uniquement */
  --sapin: #1B241D;         /* footer + bande CTA uniquement */
  --sapin-2: #26332A;
  --ivoire: #F4EEDF;
  --ivoire-douce: #B9B4A0;
  --crepuscule: linear-gradient(90deg, #33506099 0%, #8F5F5299 40%, #C08A5A99 70%, #C7A25999 100%);

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-texte: 'Spectral', Georgia, serif;
  --f-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --mesure: 64ch;
  --page: 1200px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --s-1: .5rem; --s0: .75rem; --s1: 1rem; --s2: 1.5rem; --s3: 2.25rem;
  --s4: 3.5rem; --s5: 5.75rem; --s6: 8.5rem;

  --t-h1: clamp(2.3rem, 4.4vw, 3.7rem);
  --t-h2: clamp(1.7rem, 3vw, 2.5rem);
  --t-h3: clamp(1.25rem, 2vw, 1.55rem);
  --t-corps: clamp(1.04rem, 1.1vw, 1.13rem);
  --t-petit: .93rem;
  --t-etiquette: .78rem;   /* nav, boutons — serif caps espacées */
  --t-legende: .74rem;     /* légendes mono */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.7;
  color: var(--encre);
  background: var(--papier);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-decoration-color: color-mix(in srgb, var(--laiton) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .2s ease, color .2s ease; }
a:hover { text-decoration-color: var(--laiton); color: var(--laiton); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
::selection { background: #E9DCB8; color: var(--encre); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.14; margin: 0 0 var(--s2); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--laiton); }
p { margin: 0 0 var(--s2); max-width: var(--mesure); }
ul, ol { max-width: var(--mesure); padding-left: 1.2em; margin: 0 0 var(--s2); }
li { margin-bottom: .55em; }
li::marker { color: var(--laiton); }
strong { font-weight: 500; }
small { font-size: var(--t-petit); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.conteneur { max-width: var(--page); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--s5); }
.section--haute { padding-block: var(--s6); }
.section + .section { padding-top: 0; }

/* Sections sombres — bande CTA et footer uniquement */
.sombre { background: var(--sapin); color: var(--ivoire); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--ivoire); }
.sombre h2 em { color: #CBA85C; }
.sombre p { color: var(--ivoire); }
.sombre a { color: var(--ivoire); text-decoration-color: #CBA85C88; }
.sombre a:hover { color: #CBA85C; }
.sombre .texte-doux { color: var(--ivoire-douce); }
.texte-doux { color: var(--encre-douce); }

/* ---------- Étiquettes éditoriales ---------- */
/* Eyebrow : italique serif or — comme une rubrique de revue */
.eyebrow {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.05rem; letter-spacing: .01em;
  color: var(--laiton); margin: 0 0 var(--s1);
}
.sombre .eyebrow { color: #CBA85C; }
.lede { font-size: calc(var(--t-corps) * 1.2); font-weight: 300; line-height: 1.6; }
.sombre .lede { color: var(--ivoire); }

/* Filet crépuscule : signature, 2px, sous le header uniquement */
.filet-crepuscule { height: 2px; background: var(--crepuscule); border: 0; margin: 0; }

/* Légende horodatée — sous la photo, façon tirage de planche contact */
figure { margin: 0; }
.chip-heure {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--f-mono); font-size: var(--t-legende); letter-spacing: .02em;
  color: var(--encre-douce);
  border-top: 1px solid var(--hairline);
  padding-top: .65rem; margin-top: .8rem;
}
.chip-heure::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--laiton); flex: none; align-self: center; }
.sombre .chip-heure { color: var(--ivoire-douce); border-top-color: var(--sapin-2); }

/* ---------- Header (clair) ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.entete__barre { display: flex; align-items: center; gap: var(--s3); padding-block: 1rem; }
.marque { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); line-height: 1.05; }
.marque:hover { color: var(--encre); }
.marque__nom { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .005em; }
.marque__metier { font-family: var(--f-texte); font-size: .64rem; font-weight: 500; text-transform: uppercase; letter-spacing: .34em; color: var(--laiton); margin-top: .35rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.nav a, .nav__groupe > button {
  font-family: var(--f-texte); font-size: var(--t-etiquette); font-weight: 500;
  text-transform: uppercase; letter-spacing: .17em;
  color: var(--encre); text-decoration: none; padding: .4rem 0; cursor: pointer;
}
.nav__groupe > button { background: none; border: 0; }
.nav a:hover, .nav__groupe > button:hover { color: var(--laiton); }
.nav a.bouton { border: 1px solid var(--encre); padding: .7rem 1.2rem; }
.nav a.bouton:hover { background: var(--encre); color: var(--papier); }
.nav__groupe { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%); min-width: 20rem;
  background: var(--papier); padding: .6rem 0; margin: 0; list-style: none;
  display: none; flex-direction: column;
  border: 1px solid var(--hairline); border-top: 2px solid var(--laiton);
  box-shadow: 0 22px 48px rgb(33 40 31 / .10);
}
.nav__groupe:hover .nav__menu, .nav__groupe:focus-within .nav__menu { display: flex; }
.nav__menu a { display: block; padding: .55rem 1.4rem; text-transform: none; letter-spacing: .02em; font-family: var(--f-texte); font-size: .95rem; font-weight: 400; }
.nav__menu a:hover { background: var(--papier-2); color: var(--encre); }
.langue { font-family: var(--f-texte); font-size: var(--t-etiquette); font-weight: 500; letter-spacing: .12em; color: var(--encre-douce); }
.langue a { color: var(--encre-douce); text-decoration: none; text-transform: uppercase; }
.langue a:hover, .langue [aria-current] { color: var(--laiton); }
.burger { display: none; background: none; border: 0; color: var(--encre); cursor: pointer; padding: .5rem; margin-left: auto; }
.burger svg { display: block; }

/* ---------- Boutons — sobres, caps serif espacées ---------- */
.bouton {
  display: inline-block; font-family: var(--f-texte); font-size: var(--t-etiquette); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; text-decoration: none; text-align: center;
  padding: 1rem 1.9rem; border: 1px solid var(--encre); border-radius: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bouton--plein { background: var(--encre); color: var(--papier); }
.bouton--plein:hover { background: transparent; color: var(--encre); }
.bouton--ligne { background: transparent; color: var(--encre); }
.bouton--ligne:hover { background: var(--encre); color: var(--papier); }
.sombre .bouton { border-color: var(--ivoire); }
.sombre .bouton--plein { background: var(--ivoire); color: var(--sapin); }
.sombre .bouton--plein:hover { background: transparent; color: var(--ivoire); }
.sombre .bouton--ligne { color: var(--ivoire); }
.sombre .bouton--ligne:hover { background: var(--ivoire); color: var(--sapin); }
.nav .bouton { padding: .7rem 1.2rem; }
.boutons { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }

/* ---------- Ouverture (hero éditorial : texte à côté de la photo, jamais dessus) ---------- */
.ouverture { padding-block: var(--s5); }
.ouverture__grille {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.ouverture h1 { margin-bottom: var(--s2); }
.ouverture .lede { max-width: 36rem; }
.ouverture figure img { width: 100%; height: auto; }

/* ---------- La journée (rangées éditoriales) ---------- */
.moment {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center;
  border-top: 1px solid var(--hairline); padding-top: var(--s4);
}
.moment + .moment { margin-top: var(--s4); }
.moment:nth-of-type(even) .moment__texte { order: 2; }
.moment__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.moment__photo--haute { max-width: 27rem; justify-self: center; }
.moment__photo--haute img { aspect-ratio: 3 / 4; }
.moment h3 { margin-bottom: var(--s1); }
.moment--libre { border-top: 0; padding-top: 0; }

/* ---------- Chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s3); }
.stat { border-left: 1px solid var(--hairline); padding-left: var(--s2); }
.stat__chiffre { font-family: var(--f-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; color: var(--encre); margin: 0; }
.sombre .stat__chiffre { color: var(--ivoire); }
.stat__texte { margin-top: var(--s1); max-width: 24ch; font-size: var(--t-petit); }
.stat__source { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--laiton); display: block; margin-top: .55rem; }

/* ---------- Témoignages ---------- */
.temoignage { border-left: 2px solid var(--laiton); padding-left: var(--s3); margin: var(--s3) 0; max-width: 44rem; }
.temoignage p { font-size: calc(var(--t-corps) * 1.16); font-style: italic; font-weight: 300; line-height: 1.55; }
.temoignage footer { font-family: var(--f-mono); font-size: var(--t-legende); letter-spacing: .04em; color: var(--encre-douce); }

/* ---------- Galeries planche contact ---------- */
.planche { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(12, 1fr); }
.planche figure { grid-column: span 6; }
.planche figure img { width: 100%; height: auto; object-fit: cover; }
.planche .l7 { grid-column: span 7; } .planche .l5 { grid-column: span 5; }
.planche .l4 { grid-column: span 4; } .planche .l8 { grid-column: span 8; }
.planche .l6 { grid-column: span 6; } .planche .l12 { grid-column: span 12; }
.planche .l7 img, .planche .l5 img, .planche .l6 img, .planche .l12 img { aspect-ratio: 3 / 2; }
.planche .l4 img { aspect-ratio: 4 / 5; }
.planche .l8 img { aspect-ratio: 16 / 10; }
.planche figure { cursor: zoom-in; }
.planche figure:hover .chip-heure { color: var(--laiton); }

/* ---------- Répertoire (liste éditoriale de services / villes) ---------- */
.repertoire { border-top: 1px solid var(--hairline); max-width: none; }
.repertoire a {
  display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr) auto;
  gap: var(--s2); align-items: baseline;
  padding: 1.15rem .25rem; border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--encre);
  transition: background-color .2s ease;
}
.repertoire a:hover { background: var(--papier-2); }
.repertoire .repertoire__nom { font-family: var(--f-display); font-size: 1.18rem; }
.repertoire .repertoire__detail { font-size: var(--t-petit); color: var(--encre-douce); max-width: none; margin: 0; }
.repertoire .repertoire__fleche { font-family: var(--f-display); color: var(--laiton); }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; padding: var(--s2) .25rem; font-family: var(--f-display); font-size: 1.12rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--f-display); color: var(--laiton); font-size: 1.3rem; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 .25rem var(--s2); }

/* ---------- Bande CTA (seule zone sombre avec le footer) ---------- */
.cta-bande h2 { max-width: 24ch; }
.cta-bande .coordonnees { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-family: var(--f-mono); font-size: .92rem; }
.cta-bande .coordonnees a { text-decoration: none; }
.cta-bande .coordonnees a:hover { color: #CBA85C; }

/* ---------- Prose (pages longues) ---------- */
.prose h2 { margin-top: var(--s4); }
.prose h3 { margin-top: var(--s3); }
.prose figure { margin-block: var(--s3); }

/* ---------- Fil d'Ariane ---------- */
.ariane { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; padding-block: var(--s2) 0; }
.ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; max-width: none; }
.ariane li { margin: 0; }
.ariane li:not(:last-child)::after { content: '›'; margin-left: .55rem; color: var(--hairline); }
.ariane a { text-decoration: none; color: var(--encre-douce); }
.ariane a:hover { color: var(--laiton); }
.ariane [aria-current] { color: var(--encre); }

/* ---------- Footer ---------- */
.pied { padding-block: var(--s5) var(--s3); }
.pied__accroche { font-family: var(--f-display); font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 22ch; line-height: 1.18; margin-bottom: var(--s4); }
.pied__accroche em { color: #CBA85C; font-style: italic; }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.pied__grille h4 { font-family: var(--f-texte); font-size: .7rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #CBA85C; margin-bottom: var(--s2); }
.pied__grille ul { list-style: none; padding: 0; margin: 0; }
.pied__grille li { margin-bottom: .5rem; }
.pied__grille a { color: var(--ivoire-douce); text-decoration: none; font-size: var(--t-petit); }
.pied__grille a:hover { color: var(--ivoire); }
.pied__bas { border-top: 1px solid var(--sapin-2); padding-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .03em; color: var(--ivoire-douce); }
.pied__bas a { color: var(--ivoire-douce); }
.pied__bas a:hover { color: var(--ivoire); }

/* Lien vers une page pas encore publiée : inerte, mais la mise en page tient */
[data-inactif] { color: inherit; text-decoration: none; cursor: default; }
.repertoire a[data-inactif]:hover { background: transparent; }
.carte[data-inactif]:hover { transform: none; border-top-color: transparent; }

/* ---------- Reveal au scroll ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgb(27 36 29 / .95); display: none; align-items: center; justify-content: center; padding: var(--s3); }
.lightbox.ouverte { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; color: var(--ivoire); font-family: var(--f-texte); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; padding: .8rem; }
.lightbox figcaption { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--t-legende); color: var(--ivoire-douce); white-space: nowrap; }

/* ---------- Formulaire ---------- */
.formulaire { max-width: 38rem; display: grid; gap: var(--s2); }
.champ label { display: block; font-family: var(--f-texte); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5rem; color: var(--encre-douce); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: .9rem 1rem; font-family: var(--f-texte); font-size: 1rem; color: var(--encre);
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: 0;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 1px var(--laiton); }
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier); flex-direction: column; align-items: stretch;
    padding: var(--s2) var(--gouttiere) var(--s3); gap: var(--s1);
    border-bottom: 1px solid var(--hairline);
  }
  .nav.ouverte { display: flex; }
  .nav__menu { position: static; transform: none; display: flex; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent; }
  .burger { display: block; }
  .ouverture__grille { grid-template-columns: 1fr; }
  .moment { grid-template-columns: 1fr; }
  .moment:nth-of-type(even) .moment__texte { order: 0; }
  .planche figure, .planche .l7, .planche .l5, .planche .l4, .planche .l8, .planche .l6 { grid-column: span 12; }
  .repertoire a { grid-template-columns: 1fr auto; }
  .repertoire .repertoire__detail { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bouton, .repertoire a, a { transition: none; }
}

@media print {
  .entete, .pied, .boutons, .lightbox { display: none; }
}