@charset "UTF-8";

/* ==========================================================================
   Accueil — direction « La maison d'observation »
   Validée le 12 août 2026.

   Feuille AUTONOME, chargée par `index.html` seul. `assets/site.css` reste la
   feuille de la galerie des Thangkas et n'est pas modifiée : les deux univers
   n'ont aucun sélecteur en commun, une évolution de l'accueil ne peut donc pas
   atteindre le catalogue, la fiche d'œuvre ni la visionneuse.
   ========================================================================== */

:root {
  /* Palette redistribuée : le bordeaux est la couleur identitaire, l'ivoire
     porte la lecture, le charbon ne reste qu'un moment dense dans la page,
     le safran signale l'action, le rouge est un accent de filet. */
  --bordeaux: #5c1526;
  --bordeaux-deep: #3d0d19;
  --red: #94172a;
  --safran: #d99a2b;
  --safran-soft: #f0c66e;
  --ivory: #f7f2e9;
  --ivory-deep: #efe6d7;
  --charcoal: #1a1518;
  --ink: #191416;
  --ink-soft: #4d4448;

  --line-ink: rgba(25,20,22,.16);
  --line-pale: rgba(247,242,233,.22);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.2,.75,.25,1);

  /* 1 240 px et non 1 440 : au-delà, les lignes de texte s'allongeaient et les
     vides latéraux se creusaient. */
  --content: 1240px;
  --gut: clamp(1.25rem, 4vw, 4rem);

  /* Échelle resserrée : le titre d'accueil plafonne à 56 px, contre 113 px
     dans la version précédente. */
  --fs-h1: clamp(2.15rem, 3.4vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 2.4vw, 2.55rem);
  --fs-h3: clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.25vw, 1.18rem);
  --fs-body: 1.0625rem;
  --fs-meta: .8125rem;
  --fs-badge: .75rem;

  /* Focus à double anneau, repris de la galerie : quel que soit l'aplat —
     ivoire, bordeaux, charbon ou safran — l'un des deux anneaux conserve un
     contraste très supérieur à 3:1. */
  --focus-dark: #0b0a0b;
  --focus-light: #f7f2e9;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: var(--fs-body)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Grain de papier généré en CSS : aucune ressource externe, aucun octet
   supplémentaire à charger. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

/* Le navigateur applique `margin: 1em 40px` à <figure> : sans ce reset, les
   réserves photographiques débordent de 40 px hors de leur colonne. */
figure, blockquote, ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
h4 { font-size: clamp(1.25rem,1.7vw,1.55rem); line-height: 1.15; }
p { margin: 0 0 1rem; }

.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; }
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--gut); }

/* L'en-tête est collant : sans cette marge, la navigation par ancre masque le
   filet de repère et le début du titre visé. */
[id] { scroll-margin-top: 84px; }

:focus-visible {
  outline: 2px solid var(--focus-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-light);
  border-radius: 1px;
}

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1200; padding: .75rem 1rem; background: var(--ink); color: var(--ivory); }
.skip-link:focus { top: 1rem; }

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

.head { position: sticky; top: 0; z-index: 60; background: var(--bordeaux); color: var(--ivory); border-bottom: 1px solid rgba(0,0,0,.25); }
.head__in { max-width: var(--content); margin: 0 auto; padding: 0 var(--gut); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { --brand-panel-size: clamp(124px, 10vw, 152px); position: relative; align-self: stretch; width: var(--brand-panel-size); min-height: 68px; flex: none; text-decoration: none; }
/* Le cartouche fait sa propre hauteur : une marge négative ne l'agrandissait
   pas réellement et pouvait laisser le logo sortir de son cadre sur mobile. */
.brand__logo-panel { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; padding: 9px 10px 12px; display: grid; place-items: center; background: var(--ivory); border: 1px solid rgba(25,20,22,.15); box-shadow: 0 10px 22px rgba(28,8,14,.22); }
.brand__mark { width: 100%; height: 100%; object-fit: contain; }

.nav { display: flex; align-items: center; gap: clamp(.4rem,1.2vw,1.35rem); font-size: var(--fs-meta); font-weight: 600; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; opacity: .88; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--safran); }
.nav .nav__gal { padding: 0 .75rem; border: 1px solid rgba(247,242,233,.35); opacity: 1; }

.burger, .navmob { display: none; }

/* ----------------------------------------------------------------- Boutons */

.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.35rem; border: 1px solid transparent; text-decoration: none; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.btn--safran { background: var(--safran); color: var(--ink); border-color: var(--safran); }
.btn--safran:hover { background: var(--safran-soft); border-color: var(--safran-soft); }
.btn--ghost-dark { border-color: var(--line-ink); color: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--ghost-pale { border-color: rgba(247,242,233,.42); color: var(--ivory); }
.btn--ghost-pale:hover { background: var(--ivory); color: var(--ink); }

.tlink { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; min-height: 44px; text-decoration: none; font-size: var(--fs-meta); font-weight: 700; border-bottom: 1px solid currentColor; }
.tlink::after { content: "→"; transition: transform .25s var(--ease); }
.tlink:hover::after { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* --------------------------------------- Relevé : filet de repère gradué */

/* Motif emprunté au vocabulaire du relevé de plan — mesurer, orienter,
   reporter une échelle. C'est le seul motif graphique ajouté, et il est lié à
   la pratique : aucun symbole traditionnel n'est utilisé comme décor. */
.releve { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.5rem; }
.releve__num { flex: none; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.releve__rule { flex: 1; height: 7px; background-image: linear-gradient(to right, currentColor 1px, transparent 1px); background-size: 9px 7px; background-repeat: repeat-x; background-position: 0 100%; opacity: .32; border-bottom: 1px solid currentColor; }

/* ------------------------------------------------ Réserves photographiques */

/* Emplacement destiné à une photographie qui n'existe pas encore. Traité
   comme une réserve d'atelier : proportions justes, matière sobre, repère de
   point focal. Purement décoratif, donc masqué aux technologies d'assistance
   (`aria-hidden` dans le HTML) : il n'y a rien à y décrire.
   Les prises de vue attendues sont décrites dans
   `claude-design/accueil-2026-08/02-photographies-a-realiser.md`. */
.shot { position: relative; overflow: hidden; background: var(--bordeaux-deep); }
.shot::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, rgba(247,242,233,.055) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 50% 42%, rgba(217,154,43,.16), transparent 62%);
}
.shot::after { content: ""; position: absolute; left: 50%; top: 42%; width: 54px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(240,198,110,.55); border-radius: 50%; }
.shot__focal { position: absolute; left: 50%; top: 42%; width: 5px; aspect-ratio: 1; transform: translate(-50%,-50%); background: var(--safran); border-radius: 50%; }
.shot__corner { position: absolute; width: 20px; height: 20px; border: 1px solid rgba(240,198,110,.7); }
.shot__corner--tl { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.shot__corner--br { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }

/* Photographie réelle : dérivés publics filigranés uniquement. */
.photo { position: relative; overflow: hidden; background: var(--bordeaux-deep); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------- Hero */

.hero { background: var(--ivory); border-bottom: 1px solid var(--line-ink); }
/* Le pourcentage se résout sur la largeur du bloc, donc sur la largeur utile
   de la page : la colonne de texte s'aligne exactement sur `.wrap`, et la
   photographie file jusqu'au bord droit sans provoquer de débordement,
   contrairement à un calcul en `100vw` qui inclut la barre de défilement. */
.hero__in { padding: clamp(2.75rem,5vw,4.5rem) 0 0; padding-left: max(var(--gut), calc(50% - var(--content) / 2 + var(--gut))); display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.hero__text { padding: 0 0 clamp(2.75rem,5vw,4.5rem); }
.hero__eyebrow { margin: 0 0 1.1rem; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hero h1 { max-width: 17ch; margin-bottom: 1.25rem; }
.hero__lead { max-width: 49ch; margin-bottom: 1.9rem; color: var(--ink-soft); font-size: var(--fs-lead); }
.hero__lead p { margin: 0; }
.hero__lead p + p { margin-top: .8rem; }
.hero__aside { margin: 1.9rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-ink); max-width: 46ch; font-size: var(--fs-meta); color: var(--ink-soft); }

/* Pas de `align-self: stretch` : combiné à `aspect-ratio`, il fait déduire la
   largeur de la hauteur de la colonne de texte et la photographie déborde. */
.hero__shot { width: 100%; aspect-ratio: 4/3; margin-bottom: -1px; border-left: 3px solid var(--bordeaux); }
.hero__shot img { object-position: 50% 40%; }

/* Le détail des domaines de vie reste proche du hero sans alourdir son premier
   écran. Le filet safran relie ce bloc de contenu à l'appel à l'action. */
.life-domains { background: var(--ivory-deep); border-bottom: 1px solid var(--line-ink); }
.life-domains__in { max-width: var(--content); margin: 0 auto; padding: clamp(1.5rem,2.5vw,2.2rem) var(--gut); display: grid; grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr); gap: clamp(1.25rem,4vw,4rem); align-items: center; border-left: 3px solid var(--safran); }
.life-domains h2 { max-width: 16ch; font-size: clamp(1.45rem,2.3vw,2.15rem); line-height: 1.1; }
.life-domains p { max-width: 70ch; margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------- Bandeau de positionnement */

.manifest { background: var(--bordeaux); color: var(--ivory); }
.manifest__in { max-width: var(--content); margin: 0 auto; padding: clamp(1.5rem,2.4vw,2rem) var(--gut); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.manifest p { margin: 0; font-family: var(--display); font-size: clamp(1.1rem,1.7vw,1.5rem); line-height: 1.35; max-width: 62ch; }
.manifest em { color: var(--safran-soft); font-style: normal; }
.manifest span { flex: none; font-size: var(--fs-badge); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

/* --------------------------------------------------------------- Sections */

.sec { padding: clamp(3.5rem,5.5vw,5.5rem) 0; }
.sec--ivory { background: var(--ivory); }
.sec--ivory-deep { background: var(--ivory-deep); }
.sec--bordeaux { background: var(--bordeaux); color: var(--ivory); }
.sec--charcoal { background: var(--charcoal); color: var(--ivory); }
.sec--bordeaux .releve__rule, .sec--charcoal .releve__rule { opacity: .4; }
.sec--bordeaux .releve__num, .sec--charcoal .releve__num { color: var(--safran-soft); }

.sec__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.78fr); gap: clamp(1.5rem,3vw,3rem); align-items: end; margin-bottom: clamp(2rem,3.5vw,3rem); }
.sec__head p { margin: 0; max-width: 52ch; color: var(--ink-soft); }
.sec--bordeaux .sec__head p, .sec--charcoal .sec__head p { color: rgba(247,242,233,.8); }

/* ----------------------------------------------------------------- David */

.david { display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
.david__shot { aspect-ratio: 4/5; }
.david__shot img { object-position: 50% 40%; }
.david__body p { max-width: 58ch; color: var(--ink-soft); }
.david__quote { margin: 1.6rem 0 1.75rem; padding: 1.15rem 0 1.15rem 1.5rem; border-left: 3px solid var(--safran); }
.david__quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.08rem,1.45vw,1.3rem); line-height: 1.45; color: var(--ink); }
.david__quote blockquote p { margin: 0; }
.david__quote blockquote p + p { margin-top: .8em; }
.david__quote figcaption { margin-top: .7rem; font-size: var(--fs-badge); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.transmissions { margin-top: clamp(3.25rem,6vw,5.5rem); padding-top: clamp(2.5rem,4vw,3.75rem); border-top: 1px solid var(--line-ink); }
.transmissions__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.72fr); gap: clamp(1.5rem,4vw,4rem); align-items: end; margin-bottom: clamp(1.75rem,3vw,2.5rem); }
.transmissions__head .eyebrow { margin-bottom: .55rem; color: var(--red); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.transmissions__head h3 { max-width: 24ch; font-size: clamp(1.6rem,2.3vw,2.35rem); line-height: 1.12; }
.transmissions__head > p { margin: 0; max-width: 48ch; color: var(--ink-soft); }

.transmissions__moment { margin-bottom: clamp(1.5rem,3vw,2.25rem); }
.transmissions__moment-shot { height: clamp(300px,38vw,500px); }
.transmissions__moment-shot img { object-position: 50% 44%; }
.transmissions__moment figcaption { padding-top: .65rem; font-size: var(--fs-meta); color: var(--ink-soft); }

.teachers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2rem); align-items: start; }
.teacher { min-width: 0; background: var(--ivory-deep); }
.teacher__shot { aspect-ratio: auto; background: transparent; }
.teacher__shot img { width: 100%; height: auto; object-fit: contain; object-position: 50% 50%; background: transparent; }
.teacher__body { padding: clamp(1.25rem,2.5vw,1.8rem); }
.teacher__field { margin: 0 0 .45rem; color: var(--red); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.teacher__body h4 { margin-bottom: .75rem; }
.teacher__body > p { color: var(--ink-soft); }
.teacher__quote { margin: 1.2rem 0; padding: .9rem 1rem; border-left: 3px solid var(--safran); background: rgba(255,255,255,.48); color: var(--ink); }
.teacher__quote p { margin: 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.5; }

/* -------------------------------------------------------------- Démarche */

/* Les textes détaillés réclament deux colonnes lisibles. Deux étapes conservent
   une photographie afin de préserver le rythme asymétrique de la section. */
.path { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line-pale); border-top: 1px solid var(--line-pale); border-bottom: 1px solid var(--line-pale); }
.step { position: relative; padding: clamp(1.6rem,2.5vw,2.2rem); background: var(--bordeaux); display: flex; flex-direction: column; gap: 1rem; }
.step__num { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--safran-soft); }
.step__num::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.step h3 { color: var(--ivory); }
.step p { max-width: 62ch; margin: 0; font-size: 1rem; color: rgba(247,242,233,.84); }
/* `flex: none` : sans cela les deux réserves se compriment inégalement selon
   la longueur du texte de leur étape. */
.step__shot { flex: none; aspect-ratio: 16/9; margin-top: auto; background: var(--bordeaux-deep); }
.step__note { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--line-pale); font-size: var(--fs-badge); letter-spacing: .06em; color: var(--safran-soft); }

/* ------------------------------------------------------ Savoirs & spécialités */

/* Chaque axe suit la grille d'un relevé : le domaine reste dans une colonne
   étroite et les deux chapitres dans la colonne de lecture. Les détails natifs
   gardent tout leur contenu dans le HTML sans créer une FAQ décorative. */
.savoirs { color: var(--ivory); background: linear-gradient(180deg,#1d1719 0%,#171315 55%,#141113 100%); }
.savoirs__head { margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.savoirs__head h2 { position: relative; max-width: 18ch; padding-left: clamp(.85rem,1.5vw,1.25rem); }
.savoirs__head h2::before { position: absolute; top: .1em; bottom: .1em; left: 0; width: 3px; content: ""; background: rgba(169,104,96,.72); }
.savoirs__head > div p { max-width: 56ch; color: rgba(247,242,233,.82); }
.savoirs__head > div p:last-child { margin-bottom: 0; }
.savoirs__axes { border-top: 1px solid rgba(247,242,233,.24); }
.savoir-axis { --axis-accent: #879b7a; --axis-rgb: 135,155,122; display: grid; grid-template-columns: minmax(180px,.34fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4.5rem); padding: clamp(1.6rem,3.2vw,2.9rem) 0; border-bottom: 1px solid rgba(247,242,233,.22); }
.savoir-axis[data-axis="harmoniser"] { --axis-accent: #8f8070; --axis-rgb: 143,128,112; }
.savoir-axis[data-axis="concevoir"] { --axis-accent: #718697; --axis-rgb: 113,134,151; }
.savoir-axis[data-axis="choisir"] { --axis-accent: #8c8191; --axis-rgb: 140,129,145; }
.savoir-axis__meta { position: relative; align-self: start; padding: .55rem .9rem .9rem; background: linear-gradient(90deg,rgba(var(--axis-rgb),.075),transparent 92%); }
.savoir-axis__meta p { margin: 0 0 .55rem; color: var(--axis-accent); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.savoir-axis__meta h3 { max-width: 13ch; color: var(--ivory); font-size: clamp(1.45rem,2.15vw,2rem); }
.savoir-axis__meta::after { display: block; width: 42px; height: 2px; margin-top: .85rem; content: ""; background: var(--axis-accent); }
.savoir-axis__chapters { display: grid; gap: .55rem; }
.savoir-chapter { --specialty-accent: #879b7a; --specialty-rgb: 135,155,122; }
.savoir-chapter[data-tone="nettoyages"] { --specialty-accent: #b47755; --specialty-rgb: 180,119,85; }
.savoir-chapter[data-tone="feng-shui"] { --specialty-accent: #5f9182; --specialty-rgb: 95,145,130; }
.savoir-chapter[data-tone="sa-che"] { --specialty-accent: #ad6d65; --specialty-rgb: 173,109,101; }
.savoir-chapter[data-tone="fontaines"] { --specialty-accent: #5f899b; --specialty-rgb: 95,137,155; }
.savoir-chapter[data-tone="cryptes"] { --specialty-accent: #8a7a96; --specialty-rgb: 138,122,150; }
.savoir-chapter[data-tone="astrologie"] { --specialty-accent: #7480a3; --specialty-rgb: 116,128,163; }
.savoir-chapter[data-tone="dates"] { --specialty-accent: #b9934f; --specialty-rgb: 185,147,79; }
.savoir-chapter > summary { display: grid; grid-template-columns: 3.25rem minmax(0,1fr) 2.5rem; gap: .85rem; align-items: center; min-height: 86px; padding: 1.1rem .95rem 1.1rem 1.05rem; cursor: pointer; list-style: none; border-left: 3px solid var(--specialty-accent); background: linear-gradient(90deg,rgba(var(--specialty-rgb),.09),rgba(var(--specialty-rgb),.025) 55%,transparent 100%); transition: background .2s var(--ease), border-color .2s var(--ease); }
.savoir-chapter > summary::-webkit-details-marker { display: none; }
.savoir-chapter > summary::marker { content: ""; }
.savoir-chapter > summary:hover, .savoir-chapter > summary:focus-visible { background: linear-gradient(90deg,rgba(var(--specialty-rgb),.14),rgba(var(--specialty-rgb),.04) 60%,transparent 100%); }
.savoir-chapter__number { align-self: start; padding-top: .2rem; color: var(--specialty-accent); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .14em; }
.savoir-chapter__heading { display: grid; gap: .35rem; min-width: 0; }
.savoir-chapter__title { color: var(--ivory); font-family: var(--display); font-size: clamp(1.3rem,1.7vw,1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; transition: color .2s var(--ease); }
.savoir-chapter__summary { color: rgba(247,242,233,.73); font-size: .94rem; line-height: 1.5; }
.savoir-chapter__toggle { display: inline-grid; width: 2rem; height: 2rem; place-items: center; justify-self: end; border: 1px solid rgba(247,242,233,.36); color: var(--safran-soft); font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.savoir-chapter > summary .savoir-chapter__toggle { border-color: rgba(var(--specialty-rgb),.8); color: var(--specialty-accent); }
.savoir-chapter > summary:hover .savoir-chapter__toggle, .savoir-chapter > summary:focus-visible .savoir-chapter__toggle { border-color: var(--specialty-accent); background: rgba(var(--specialty-rgb),.16); }
.savoir-chapter[open] > summary { border-bottom: 1px solid rgba(var(--specialty-rgb),.52); background: linear-gradient(90deg,rgba(var(--specialty-rgb),.14),rgba(var(--specialty-rgb),.045) 60%,transparent 100%); }
.savoir-chapter[open] > summary .savoir-chapter__toggle { transform: rotate(45deg); background: rgba(var(--specialty-rgb),.18); }
.savoir-chapter:target > summary { box-shadow: inset 0 0 0 1px rgba(var(--specialty-rgb),.75); }
.savoir-chapter__content { max-width: 76ch; padding: 1.35rem 1.1rem 2rem 4.1rem; border-left: 3px solid var(--specialty-accent); background: linear-gradient(90deg,rgba(var(--specialty-rgb),.085),rgba(var(--specialty-rgb),.025) 62%,transparent 100%); color: rgba(247,242,233,.84); }
.savoir-chapter__content p { margin-bottom: 1rem; }
.savoir-chapter__content p:last-child { margin-bottom: 0; }
.savoir-chapter__note { margin-top: 1.35rem !important; padding: .9rem 1rem; border-left: 2px solid var(--specialty-accent); background: rgba(var(--specialty-rgb),.09); color: var(--ivory) !important; font-size: .95rem; }
.savoir-chapter__source { margin-top: 1.25rem !important; color: rgba(247,242,233,.7); font-size: var(--fs-meta); }
.savoir-chapter__figure { max-width: 820px; margin: 1.6rem 0 .25rem; border: 1px solid rgba(var(--specialty-rgb),.68); background: var(--ivory-deep); }
.savoir-chapter__figure img { width: 100%; }
.savoir-chapter__figure figcaption { padding: .7rem .9rem .8rem; color: var(--ink-soft); font-size: var(--fs-meta); line-height: 1.45; }
.savoir-fountain-diptych { max-width: 760px; margin: 1.6rem 0 1.8rem; }
.savoir-fountain-diptych__label { margin-bottom: .7rem !important; color: var(--specialty-accent); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.savoir-fountain-diptych__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.savoir-fountain-diptych figure { margin: 0; border: 1px solid rgba(var(--specialty-rgb),.8); background: rgba(var(--specialty-rgb),.035); }
.savoir-fountain-diptych img { width: 100%; height: auto; }
.savoir-fountain-diptych figcaption { padding: .65rem .75rem .75rem; color: rgba(247,242,233,.76); font-size: var(--fs-meta); line-height: 1.45; }
.savoirs a:not(.btn) { color: var(--safran-soft); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.savoirs__cta { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: clamp(2.5rem,5vw,4.5rem); padding: clamp(1.5rem,3vw,2.4rem); border: 1px solid rgba(240,198,110,.48); background: linear-gradient(110deg,rgba(240,198,110,.07),rgba(247,242,233,.045) 58%,rgba(247,242,233,.025)); }
.savoirs__cta .cons__kicker { margin-bottom: .45rem; color: var(--safran-soft); }
.savoirs__cta h3 { margin-bottom: .85rem; color: var(--ivory); font-size: clamp(1.5rem,2.4vw,2.15rem); }
.savoirs__cta p:last-child { max-width: 62ch; margin-bottom: 0; color: rgba(247,242,233,.82); }

/* -------------------------------------------------------------- Almanach */

.alm { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.alm__side p { max-width: 46ch; color: var(--ink-soft); }
.alm__lead { font-size: var(--fs-lead); }
.alm__highlights { margin: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--line-ink); }
.alm__highlights li { display: grid; grid-template-columns: minmax(150px,.72fr) minmax(0,1fr); gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--line-ink); font-size: .92rem; color: var(--ink-soft); }
.alm__highlights strong { color: var(--ink); font-weight: 700; }
.alm__highlights span { line-height: 1.5; }
.alm__previews { display: grid; gap: 1.25rem; }

.demo { border: 1px solid var(--line-ink); background: #fffdf8; box-shadow: 0 18px 40px -34px rgba(25,20,22,.7); }
.demo__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.2rem; background: var(--charcoal); color: var(--ivory); }
.demo__top strong { font-size: var(--fs-meta); letter-spacing: .06em; }
.demo__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; background: var(--safran); color: var(--ink); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.demo__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.2rem; border-bottom: 1px solid var(--line-ink); }
.demo__field { display: flex; flex-direction: column; gap: .4rem; }
.demo__field span { font-size: var(--fs-badge); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.demo__field select, .demo__field input { min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line-ink); background: var(--ivory); }
.demo__rows { padding: .3rem 1.2rem 1.2rem; }
.demo__row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line-ink); }
.demo__date { font-family: var(--display); font-size: 1.15rem; }
.demo__why { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.demo__mark { flex: none; padding: .25rem .5rem; border: 1px solid var(--line-ink); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo__mark--a { border-color: var(--safran); background: rgba(217,154,43,.16); }
.demo__facts { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.2rem 1.2rem; }
.demo__facts li { list-style: none; padding: .3rem .6rem; border: 1px solid var(--line-ink); font-size: var(--fs-badge); color: var(--ink-soft); }
.demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line-ink); background: var(--ivory-deep); }
.demo__foot p { margin: 0; max-width: 42ch; font-size: .9rem; color: var(--ink-soft); }

.pro-preview { overflow: hidden; border: 1px solid var(--bordeaux); background: var(--bordeaux); color: var(--ivory); box-shadow: 0 24px 50px -38px rgba(25,20,22,.9); }
.pro-preview__head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem 1.5rem; align-items: end; padding: clamp(1.2rem,2.3vw,1.7rem); }
.pro-preview__eyebrow { margin: 0 0 .35rem; color: var(--safran-soft); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.pro-preview h3 { max-width: 24ch; margin: 0; color: var(--ivory); font-size: clamp(1.45rem,2.2vw,2rem); line-height: 1.08; }
.pro-preview__price { margin: 0; padding: .65rem .8rem; border: 1px solid rgba(247,242,233,.35); font-size: .82rem; line-height: 1.4; white-space: nowrap; }
.pro-preview__price strong { display: inline; color: var(--safran-soft); font-size: 1rem; }
.pro-preview__price span { color: rgba(247,242,233,.68); }
.pro-preview__screen { margin: 0 clamp(1rem,2.3vw,1.7rem); border: 1px solid rgba(25,20,22,.28); background: #fffdf8; color: var(--ink); }
.pro-preview__image-label { margin: 0; padding: .65rem .85rem; border-bottom: 1px solid var(--line-ink); color: var(--bordeaux); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.pro-preview__screen img { display: block; width: 100%; height: auto; background: #fffdf8; }
.pro-preview__screen figcaption { padding: .75rem .85rem .85rem; border-top: 1px solid var(--line-ink); color: var(--ink-soft); font-size: var(--fs-meta); line-height: 1.5; }
.pro-preview__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: clamp(1rem,2.3vw,1.7rem); }
.pro-preview__foot p { flex: 1 1 280px; max-width: 48ch; margin: 0; color: rgba(247,242,233,.8); font-size: .88rem; }
.pro-preview__foot .btn { flex: none; }

/* --------------------------------------------------------- Consultations */

.cons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem,2vw,1.75rem); }
.cons__card { display: flex; flex-direction: column; border: 1px solid var(--line-ink); background: var(--ivory); }
.cons__shot { aspect-ratio: 3/2; }
.cons__media { aspect-ratio: 3/2; overflow: hidden; background: var(--bordeaux-deep); }
.cons__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cons__body { display: flex; flex-direction: column; gap: .85rem; flex: 1; padding: 1.3rem; }
.cons__kicker { margin: 0; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.cons__card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.cons__list { margin: .2rem 0 0; list-style: none; border-top: 1px solid var(--line-ink); }
.cons__list li { padding: .55rem 0; border-bottom: 1px solid var(--line-ink); font-size: .92rem; color: var(--ink-soft); }
.cons__foot { margin-top: auto; padding-top: .4rem; display: flex; flex-direction: column; gap: .7rem; }
.cons__terms { margin: 0; font-size: var(--fs-badge); color: var(--ink-soft); }

.contact { margin-top: clamp(2rem,4vw,3.5rem); display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); border: 1px solid var(--line-ink); background: var(--bordeaux); color: var(--ivory); }
.contact__intro { padding: clamp(1.5rem,3vw,2.4rem); border-right: 1px solid var(--line-pale); }
.contact__intro h3 { margin: .35rem 0 1rem; color: var(--ivory); font-size: clamp(2rem,4vw,3.1rem); }
.contact__intro > p:not(.cons__kicker) { color: rgba(247,242,233,.84); }
.contact__privacy { padding-top: 1rem; border-top: 1px solid var(--line-pale); font-size: .9rem; }
.contact__form { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.2rem; padding: clamp(1.5rem,3vw,2.4rem); }
.contact__form label { display: flex; flex-direction: column; gap: .45rem; color: rgba(247,242,233,.88); font-size: var(--fs-badge); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.contact__form label > span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.contact__form input:not([type="checkbox"]), .contact__form select, .contact__form textarea { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid rgba(247,242,233,.38); border-radius: 0; background: rgba(247,242,233,.07); color: var(--ivory); font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.contact__form select { color-scheme: dark; }
.contact__form textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.contact__form input:focus-visible, .contact__form select:focus-visible, .contact__form textarea:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
.contact__message, .contact__consent, .contact__form > .btn, .contact__note, .contact__privacy-link { grid-column: 1 / -1; }
.contact__form label.contact__consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; text-transform: none; }
.contact__consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--safran); }
.contact__form > .btn { justify-self: start; }
.contact__note { margin: -.25rem 0 0; color: rgba(247,242,233,.62); font-size: var(--fs-badge); }
.contact__privacy-link, .form__privacy-link { margin: -.15rem 0 0; color: rgba(247,242,233,.66); font-size: var(--fs-badge); line-height: 1.5; }
.contact__privacy-link a, .form__privacy-link a { color: var(--safran-soft); text-underline-offset: .18em; }
.contact__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------- Souffle du mois */

.souffle { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.souffle__extract { padding: 1.4rem 1.5rem; border: 1px solid var(--line-pale); background: rgba(247,242,233,.05); }
.souffle__extract p { color: rgba(247,242,233,.86); }
.souffle__extract p:last-child { margin-bottom: 0; }
.souffle__extract .demo__chip { margin-bottom: .9rem; }
.souffle__how { margin: 1.4rem 0 0; font-size: .95rem; color: rgba(247,242,233,.72); max-width: 56ch; }
.form { display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line-pale); background: rgba(0,0,0,.22); }
.form label { display: flex; flex-direction: column; gap: .4rem; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,242,233,.82); }
.form input[type="email"] { min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--line-pale); background: rgba(247,242,233,.06); color: var(--ivory); font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Sélecteur porté à `.form label.form__consent` : `.form label` l'emporte
   sinon en spécificité et remet la phrase de consentement en capitales,
   ce qui la rend pénible à lire. */
.form label.form__consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.55; color: rgba(247,242,233,.82); }
.form__consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; }
.form__note { margin: 0; font-size: var(--fs-badge); color: rgba(247,242,233,.6); }

/* ------------------------------------------------------ Passerelle galerie */

.gate { background: var(--bordeaux-deep); color: var(--ivory); }
.gate__in { max-width: var(--content); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.46fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.gate__text { padding: clamp(3rem,4.5vw,4.5rem) 0; }
.gate__text p { max-width: 52ch; color: rgba(247,242,233,.8); }
/* Les deux vues occupent toute la hauteur de la bande : avec un `aspect-ratio`
   fixe, un aplat sombre vide subsistait sous elles. */
.gate__art { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-pale); min-height: 320px; }
.gate__art .photo { height: 100%; }
.gate__art .photo img { object-fit: contain; background: #23070d; padding: 1.5rem 1rem; }

/* ------------------------------------------------------------------- Pied */

.foot { background: var(--charcoal); color: rgba(247,242,233,.76); }
.foot__in { max-width: var(--content); margin: 0 auto; padding: 2.5rem var(--gut); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem 2.5rem; align-items: start; }
.foot a { text-decoration: none; border-bottom: 1px solid rgba(247,242,233,.3); }
/* Les liens de pied mesuraient 19 px de haut, sous le seuil de 44 px retenu
   pour toutes les cibles tactiles du site. */
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; list-style: none; font-size: var(--fs-meta); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__legal { margin: 1.2rem 0 0; font-size: var(--fs-badge); color: rgba(247,242,233,.55); }

/* ------------------------------------------------------------ Mouvements */

/* L'état de repos est l'état LISIBLE : aucun bloc n'a d'opacité réduite au
   repos. L'apparition est une animation jouée à l'entrée dans le champ, sans
   `fill-mode`.

   Ce choix vient d'un incident constaté pendant la revue : avec une transition
   depuis `opacity: 0`, un onglet passé en arrière-plan a gelé l'animation et
   cinq sections sont restées entièrement invisibles. Si le script ne s'exécute
   pas, si l'animation est bridée ou si le navigateur ne la joue pas, le contenu
   reste désormais affiché. Une animation ne doit jamais pouvoir décider qu'un
   contenu est invisible. */
.js .rise.is-in { animation: harmony-rise .7s var(--ease); }
@keyframes harmony-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================ Adaptations */

@media (max-width: 1180px) {
  .brand { --brand-panel-size: clamp(100px, 13vw, 122px); }
  .nav { display: none; }
  .burger { display: grid; width: 44px; height: 44px; padding: 11px; gap: 5px; border: 1px solid rgba(247,242,233,.35); background: transparent; }
  .burger span:not(.sr-only) { display: block; height: 1px; background: currentColor; }
  .navmob { position: fixed; z-index: 55; inset: 68px 0 0; padding: 1.5rem var(--gut) 2rem; background: var(--bordeaux); overflow-y: auto; }
  .navmob:not([hidden]) { display: block; }
  .navmob a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line-pale); color: var(--ivory); text-decoration: none; font-family: var(--display); font-size: 1.45rem; }

  .souffle { grid-template-columns: 1fr; }
  .cons { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact__intro { border-right: 0; border-bottom: 1px solid var(--line-pale); }
  .cons__card { flex-direction: row; }
  .cons__shot, .cons__media { flex: none; width: 34%; aspect-ratio: auto; }
  .path { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .savoir-axis { grid-template-columns: minmax(150px,.32fr) minmax(0,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
  .gate__in { grid-template-columns: 1fr; }
  .gate__art { max-width: 420px; min-height: 0; margin-bottom: clamp(2rem,4vw,3rem); }
  .gate__art .photo { aspect-ratio: 2/3; height: auto; }
}

/* L'empilement complet n'intervient qu'à 900 px. Déclenché dès 1 100 px, il
   portait le hero à 1 063 px de haut à 1 024 × 768 sans raison : la place
   existait encore pour deux colonnes. */
@media (max-width: 900px) {
  /* Empilé, le texte d'abord repousse la photographie hors du premier écran :
     le hero cesse d'être incarné, ce qui est précisément son objet. La
     photographie passe donc en tête, directement sous l'en-tête.
     `width: auto` : la largeur fixée à 100 % sur ordinateur empêche les marges
     négatives d'élargir la photographie jusqu'aux bords de l'écran. */
  .hero__in { grid-template-columns: 1fr; gap: 0; padding: 0 var(--gut); }
  .hero__text { padding: clamp(1.75rem,4vw,2.5rem) 0 clamp(2rem,4vw,2.75rem); }
  .hero__shot { order: -1; width: auto; aspect-ratio: 16/9; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); border-left: 0; border-bottom: 3px solid var(--bordeaux); }
  .hero__shot img { object-position: 50% 22%; }
  .sec__head, .david, .alm, .transmissions__head, .life-domains__in { grid-template-columns: 1fr; }
  .life-domains h2 { max-width: none; }
  .david__shot { max-width: 380px; }
  .savoir-axis { grid-template-columns: 1fr; gap: 1rem; }
  .savoir-axis__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; }
  .savoir-axis__meta p { margin: 0; }
  .savoir-axis__meta h3 { max-width: none; }
  .savoir-axis__meta::after { align-self: center; margin-top: 0; }
  .savoirs__cta { grid-template-columns: 1fr; }
  .savoirs__cta .btn { justify-self: start; }
}

@media (max-width: 700px) {
  .teachers { grid-template-columns: 1fr; }
  .transmissions__moment-shot { height: auto; aspect-ratio: 3/2; }
  .path { grid-template-columns: 1fr; }
  .step__shot { aspect-ratio: 16/9; }
  .demo__form { grid-template-columns: 1fr; }
  .pro-preview__head { grid-template-columns: 1fr; align-items: start; }
  .pro-preview__price { justify-self: start; }
  .cons__card { flex-direction: column; }
  .cons__shot, .cons__media { width: auto; aspect-ratio: 3/2; }
  .contact__form { grid-template-columns: 1fr; }
  .contact__form > * { grid-column: 1; }
  .foot__in { grid-template-columns: 1fr; }
  .savoir-chapter > summary { grid-template-columns: 2.6rem minmax(0,1fr) 2rem; min-height: 76px; gap: .55rem; padding: 1rem .75rem 1rem .85rem; border-left-width: 2px; }
  .savoir-chapter__content { padding: 1.15rem .85rem 1.5rem 1rem; border-left-width: 2px; }
  .savoir-fountain-diptych__grid { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 560px) {
  :root { --fs-body: 1rem; }
  .brand { --brand-panel-size: clamp(80px, 25vw, 104px); }
  .brand__logo-panel { padding: 7px 8px 10px; }
  .hero__shot { aspect-ratio: 3/2; }
  .hero__shot img { object-position: 50% 40%; }
  .demo__row { grid-template-columns: 1fr auto; }
  .demo__why { grid-column: 1 / -1; }
  .alm__highlights li { grid-template-columns: 1fr; gap: .2rem; }
  .pro-preview__screen { margin-inline: .75rem; }
  .pro-preview__image-label, .pro-preview__screen figcaption { padding-inline: .7rem; }
  .pro-preview__foot .btn { width: 100%; }
  .gate__art { grid-template-columns: 1fr; }
  .gate__art .photo:last-child { display: none; }
  .savoir-axis__meta { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .savoir-chapter__summary { font-size: .9rem; }
  .savoirs__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise.is-in { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}