/* Marie Ange Studio : portfolio UGC. Noir, blanc, gris ; vidéos et photos en couleur. */
:root {
  --noir: #0e0e0e;
  --noir-2: #181818;
  --noir-3: #232323;
  --blanc: #fafaf8;
  --gris-1: #f0f0ed;
  --gris-2: #dcdcd8;
  --gris-3: #8c8c87;
  --gris-4: #5c5c58;
  --texte: var(--noir);
  --doux: var(--gris-4);
  --trait: var(--gris-2);
  --fond: var(--blanc);
  --cadre: 1320px;
  --marge: clamp(20px, 4.5vw, 64px);
  --entete: 68px;
  --rayon: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
i { font-style: normal; opacity: .55; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.evitement {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 16px; background: var(--blanc); color: var(--noir);
  transform: translateY(-160%); transition: transform .2s;
}
.evitement:focus { transform: none; }

.cadre { width: 100%; max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); }
.sombre { --texte: var(--blanc); --doux: #a9a9a4; --trait: #2e2e2c; --fond: var(--noir); background: var(--noir); color: var(--blanc); }
.section { padding-block: clamp(88px, 11vw, 150px); }
/* les sections commencent sous l'en-tête (marge haute > hauteur de l'en-tête) : l'en-tête prend leur couleur */
section[id] { scroll-margin-top: 0; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--entete);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--marge);
  color: var(--blanc);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.entete.defile { background: rgba(14, 14, 14, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, .08); }
.entete.clair { color: var(--noir); }
.entete.clair.defile { background: rgba(250, 250, 248, .88); border-bottom-color: rgba(0, 0, 0, .07); }
.marque {
  font-weight: 800; font-stretch: 125%; font-size: 15px; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.marque span { font-weight: 400; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 14px; }
.nav a { text-decoration: none; position: relative; padding-block: 6px; white-space: nowrap; }
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav a:not(.nav-cta):hover::after, .nav a.actif::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px !important; transition: background-color .25s, color .25s; }
.nav-cta:hover { background: currentColor; }
.entete .nav-cta:hover { color: var(--noir); }
.entete.clair .nav-cta:hover { color: var(--blanc); }
.burger { display: none; }

@media (max-width: 860px) {
  .burger {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; position: relative; z-index: 2;
  }
  .burger-trait, .burger-trait::before, .burger-trait::after {
    display: block; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s;
  }
  .burger-trait { position: relative; }
  .burger-trait::before, .burger-trait::after { content: ""; position: absolute; left: 0; }
  .burger-trait::before { top: -7px; }
  .burger-trait::after { top: 7px; }
  .menu-ouvert .burger-trait { background: transparent; }
  .menu-ouvert .burger-trait::before { transform: translateY(7px) rotate(45deg); }
  .menu-ouvert .burger-trait::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: var(--entete) var(--marge) 40px;
    background: var(--noir); color: var(--blanc);
    font-size: clamp(30px, 9vw, 44px); font-weight: 700; font-stretch: 110%; letter-spacing: -.01em;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav a::after { display: none; }
  .nav-cta { border: 0; padding: 6px 0 !important; border-radius: 0; }
  .menu-ouvert .nav { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .menu-ouvert.entete { color: var(--blanc); }
  .menu-ouvert .marque { position: relative; z-index: 2; }
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 0 26px;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 16px; letter-spacing: .01em;
  transition: transform .3s var(--ease), background-color .25s, color .25s;
}
.bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.bouton:hover svg { transform: translateY(2px); }
.bouton-clair { background: var(--blanc); color: var(--noir); }
.bouton-clair:hover { background: #fff; transform: translateY(-2px); }
.bouton-grand { min-height: 64px; padding: 0 32px; font-size: 17px; }
.bouton-grand:hover svg { transform: translateX(3px); }

/* ---------- Étiquettes et titres ---------- */
.etiquette {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; font-stretch: 115%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--doux); margin-bottom: 22px;
}
.etiquette span { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: .06em; }
.titre {
  font-size: clamp(38px, 5.6vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em;
  text-wrap: balance;
}
.titre em { font-size: 1.08em; letter-spacing: -.02em; }
.sous-titre { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.intro { font-size: clamp(17px, 1.5vw, 19px); color: var(--doux); max-width: 46ch; margin-top: 22px; }
.tete-section { margin-bottom: clamp(44px, 6vw, 72px); }
.note { margin-top: 22px; font-size: 14px; color: var(--doux); }

/* ---------- 01 · Accueil (30/10/2026) ----------
   Choix de Charlotte après plusieurs séries de maquettes (propositions/hero/, CLAUDE.md du dossier, bloc 🌅) : sa photo
   du chemin ENTIÈRE (visage et beauceron) à droite, sur toute la hauteur, fondue par un dégradé dans le fond olive ; ce
   fond est l'olive de --teinte, à peine animé par la même photo floutée (soft-light) ; le texte en noir sur l'olive.
   Sur téléphone (< 900 px) : la photo en haut, son bas qui se fond dans l'olive, le texte dessous.
   L'accueil d'avant (« PORTFOLIO » vertical, photo face à la mer en noir et blanc) : archivé, voir le CLAUDE.md. */
.pied i, .accroche i { margin-inline: .5em; }

/* Couleur du fond de l'accueil : 5 propositions comparées le 29/10/2026 (?couleurs=1, site.js ; une seule par
   ?teinte=<clé>). David a choisi l'olive (« le vert est superbe ») : c'est le défaut. */
:root { --teinte: #75834F; }
html[data-teinte="olive"] { --teinte: #75834F; }
html[data-teinte="sauge"] { --teinte: #9BA88C; }
html[data-teinte="terracotta"] { --teinte: #B9694B; }
html[data-teinte="calanque"] { --teinte: #5F8A9E; }
html[data-teinte="poudre"] { --teinte: #C79A8F; }

.accueil { position: relative; min-height: max(100vh, 640px); overflow: hidden; background: var(--teinte); color: var(--noir); }
.accueil-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.accueil-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 0 60%; transform: scale(2.6); transform-origin: 0 72%;
  filter: blur(26px) grayscale(1) contrast(1.1); mix-blend-mode: soft-light; opacity: .3; }
.accueil-photo { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 3 / 4;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.accueil-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* un voile en haut de la photo : le menu, écrit clair dessus, reste lisible */
.accueil-photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 16%; background: linear-gradient(180deg, rgba(18, 16, 8, .4), transparent); }
.accueil-voile { display: none; }
.accueil-texte { position: absolute; z-index: 2; left: var(--marge); top: 53%; transform: translateY(-50%); width: min(470px, 35vw); }
.accueil-sur { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; font-stretch: 115%; letter-spacing: .2em; text-transform: uppercase; }
.accueil-sur::after { content: ""; width: 54px; height: 1px; background: currentColor; opacity: .6; }
.accueil-nom { position: relative; margin-top: 10px; width: 100%; font-size: inherit; }
.accueil-nom img { display: block; width: 78%; height: auto; overflow: visible; }
.accueil-nom span { position: absolute; left: 80%; bottom: 22%; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.5vw, 36px); line-height: 1; }
.accueil-phrase { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.accueil-phrase em { letter-spacing: -.01em; }
.accueil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.bouton-sombre { background: var(--noir); color: var(--blanc); }
.bouton-sombre:hover { transform: translateY(-2px); }
.accueil-lien { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.accueil-formats { display: flex; flex-wrap: wrap; gap: 16px clamp(14px, 1.8vw, 28px); margin-top: clamp(24px, 3.6vh, 40px); padding-top: 16px; border-top: 1px solid rgba(14, 14, 14, .3); }
.accueil-formats li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.accueil-formats .croquis { width: 56px; height: 42px; color: var(--noir); }
.accueil-formats p { font-family: "Caveat", var(--serif); font-weight: 500; font-size: 15px; line-height: 1; }
@media (max-width: 899px) {
  .accueil { min-height: 112vh; }
  .accueil-fond { display: none; }
  .accueil-photo { left: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .accueil-photo img { object-position: 46% 0; }
  .accueil-voile { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--teinte), var(--teinte) 25%, transparent 45%); }
  .accueil-texte { top: auto; bottom: 24px; transform: none; left: var(--marge); right: var(--marge); width: auto; }
  .accueil-sur, .accueil-formats { display: none; }
  .accueil-nom { width: 70%; margin-top: 0; }
  .accueil-nom img { width: 100%; }
  .accueil-nom span { position: static; display: block; text-align: right; margin-top: -.2em; font-size: 22px; }
  .accueil-phrase { font-size: 25px; margin-top: 8px; }
  .accueil-actions { margin-top: 16px; gap: 10px 20px; }
  .accueil-actions .bouton { min-height: 46px; padding: 0 20px; }
}
/* l'en-tête en haut de l'accueil (site.js : .sur-accueil) : sur ordinateur, la marque est sur l'olive (noire) et le menu
   sur la photo (clair) ; sur téléphone, tout est sur la photo (clair) */
@media (min-width: 900px) { .entete.sur-accueil:not(.defile):not(.menu-ouvert) .nav { color: var(--blanc); } }
@media (max-width: 899px) { .entete.sur-accueil:not(.defile) { color: var(--blanc); } }

/* Panneau de comparaison des couleurs (?couleurs=1) */
.teintes {
  position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 20px);
  padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(250, 250, 248, .95); color: var(--noir);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13px; line-height: 1.3;
}
.teintes-nom { min-width: 0; font-weight: 700; }
.teintes-nom span { display: block; font-weight: 400; color: var(--gris-4); }
.teintes-liste { display: flex; gap: 8px; flex: none; }
.teintes button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); color: #fff; font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.teintes button[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--noir); }
@media (max-width: 559px) {
  .teintes { flex-direction: column; align-items: stretch; gap: 10px; width: calc(100vw - 20px); padding: 12px 14px; border-radius: 18px; }
  .teintes-liste { justify-content: space-between; }
  .teintes button { width: 44px; height: 44px; }
}

/* Bandeau défilant */
.bandeau { background: var(--noir); color: var(--blanc); overflow: hidden; padding-block: 18px; }
.bandeau-piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.bandeau span {
  display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
  font-size: clamp(18px, 2vw, 24px); font-weight: 700; font-stretch: 120%; letter-spacing: -.01em; text-transform: uppercase;
}
.bandeau span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-piste { animation: none; } }

/* ---------- 02 · À propos ---------- */
.propos-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
/* 4 photos au format Instax mini à cadre olive (29/10/2026, choix de Charlotte parmi 5 époques : « le côté Instax et le
   cadre olive ») : image 46 x 62 aux coins arrondis, tons clairs et frais (outils/medias.py, « instax »), cadre du vert
   de l'accueil, légende au stylo crème (Caveat), chacune tenue par un gros morceau de scotch translucide aux bouts
   déchirés (29/10 après-midi : il remplace les punaises dessinées). Tout en cqw (largeur de la pile) : même pile sur téléphone.
   Places et ordre de superposition contrôlés par outils/controle_polaroids.py : aucun visage ni légende caché. */
.polaroids { position: relative; aspect-ratio: 1 / 1.6; container-type: inline-size; }   /* plus collante : la caméra dessinée est dessous */
.polaroid {
  position: absolute; width: 47%; margin: 0; padding: 5.5% 3.5% 0; border-radius: 1.2cqw;
  background: var(--teinte); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 12px 28px rgba(40, 50, 20, .22);
  transform: rotate(var(--r)); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 46 / 62; object-fit: cover; border-radius: .6cqw; background: rgba(255, 255, 255, .14); }
.polaroid figcaption {
  height: 15cqw; display: flex; align-items: center; justify-content: center; padding: 0 4%;
  font-family: "Caveat", var(--display); font-weight: 500; font-size: 5.2cqw; line-height: 1; color: #f4f1e4; white-space: nowrap;
}
.polaroid::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: -4cqw; width: 27cqw; height: 9cqw;
  transform: translateX(-50%) rotate(var(--sr));
  background:
    linear-gradient(102deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .16) 58%, rgba(255, 255, 255, 0) 82%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 .12cqw, rgba(0, 0, 0, 0) .12cqw 2.6cqw, rgba(255, 255, 255, .05) 2.6cqw 2.8cqw, rgba(0, 0, 0, 0) 2.8cqw 4.1cqw),
    rgba(241, 237, 223, .6);
  box-shadow: inset 0 0 0 .14cqw rgba(255, 255, 255, .22), inset 0 -.3cqw .4cqw rgba(0, 0, 0, .05);
  clip-path: polygon(1.5% 4%, 98.5% 0, 100% 14%, 97.5% 27%, 99.6% 41%, 97% 55%, 99.8% 70%, 97.6% 84%, 99.4% 100%,
                     1% 97%, 0 84%, 2.6% 70%, .2% 56%, 2.8% 42%, .4% 28%, 2.2% 15%);
}
.polaroid.p1 { left: 1%; top: 0; --r: -4deg; z-index: 2; --sr: 6deg; }
.polaroid.p2 { left: 49%; top: 2.5%; --r: 5deg; z-index: 1; --sr: -7deg; }
.polaroid.p3 { left: 3%; top: 48.8%; --r: 3deg; z-index: 4; --sr: -3deg; }
.polaroid.p4 { left: 48%; top: 51%; --r: -5deg; z-index: 3; --sr: 8deg; }
@media (hover: hover) {
  .polaroid:hover { --r: 0deg; z-index: 6; transform: rotate(0) scale(1.04); box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 22px 44px rgba(40, 50, 20, .26); }
}
@media (prefers-reduced-motion: reduce) { .polaroid { transition: none; } }
/* Lettres dessinées dans le chapeau (29/10/2026, Charlotte) : le « o » de sport = un coureur dans un rond, le « a » de
   nature = un sapin, le « o » de création = un appareil photo. La vraie lettre reste dans le texte (transparente, sous
   le dessin) : lecteurs d'écran et copier-coller lisent « sport », « nature », « création ». */
.glyphe { position: relative; display: inline-block; width: var(--gw); height: var(--gh); margin: 0 .025em; vertical-align: var(--gv, 0); }
.glyphe-l { position: absolute; inset: 0; overflow: hidden; color: transparent; text-align: center; line-height: 1; }
.glyphe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-coureur { --gw: .7em; --gh: .7em; --gv: -.015em; }
.g-sapin { --gw: .6em; --gh: .84em; }
.g-camera { --gw: .92em; --gh: .7em; }
.titre-fin { display: block; margin-top: 10px; font-size: .36em; font-weight: 500; letter-spacing: -.01em; color: var(--doux); }
.chapo { margin-top: clamp(28px, 4vw, 44px); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.32; font-weight: 500; letter-spacing: -.02em; text-wrap: pretty; }
.bloc { margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--trait); max-width: 62ch; }
.bloc p + p { margin-top: 16px; }
.bloc p { color: #2b2b29; }
.citation {
  margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--noir);
  font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.01em;
}
@media (max-width: 859px) {
  .propos-grille { grid-template-columns: 1fr; }
  .polaroids { width: 100%; max-width: 480px; margin-bottom: 8px; }
}

/* ---------- Croquis à un trait (29/10/2026, Charlotte : « des croquis en mode one-liner qui se dessinent dans les
   blancs », à poursuivre tout le long du portfolio) ----------
   Dessins FAL nano-banana-pro vectorisés en traits (croquis/, CLAUDE.md du dossier) ; chaque .croquis[data-croquis]
   charge son SVG et le trace quand on le voit (site.js, « Croquis »). Une section suivante = un .croquis de plus,
   posé dans ses blancs. Contrôle : outils/controle_croquis.py (rien ne touche un texte, une photo, une carte). */
.a-propos { --ecart-approche: clamp(64px, 9vw, 120px); }
.croquis { position: relative; pointer-events: none; color: #34342f; }
.croquis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.croquis path { transition: none; }
.croquis.vu path { transition: stroke-dashoffset calc(var(--b) * var(--T, 4s)) linear calc(var(--a) * var(--T, 4s)); }
.croquis.net path { transition: none !important; }
.propos-texte { position: relative; }
/* le bouquet, à droite du nom : sa hauteur suit celle de l'en-tête (étiquette + nom), il ne touche jamais le chapeau */
.propos-entete { position: relative; }
.cq-bouquet { position: absolute; right: 0; bottom: -2px; height: calc(100% + 26px); aspect-ratio: 656 / 1294; }
/* la caméra : au pied des photos, le trépied posé sur la carte « Mon approche · 1 » */
.cq-camera { width: clamp(110px, 14vw, 200px); aspect-ratio: 492 / 1192; justify-self: center; margin: 36px 0 calc(-1 * var(--ecart-approche)); }
@media (min-width: 860px) {
  .polaroids { grid-column: 1; grid-row: 1; align-self: start; }
  .propos-texte { grid-column: 2; grid-row: 1; }
  .cq-camera { grid-column: 1; grid-row: 1; align-self: end; margin-top: 0; }
}
/* le demi-visage : dans la marge du 2e bloc quand elle est assez large, sinon sous les cartes « Mon approche » */
.cq-visage { aspect-ratio: 462 / 1207; }
.bloc { position: relative; }
.cq-marge { display: none; position: absolute; top: -8%; left: calc(100% + clamp(16px, 1.6vw, 40px)); width: clamp(110px, 9.2vw, 160px); }
.cq-daguerre { aspect-ratio: 911 / 713; }
.cq-daguerre.cq-marge { top: auto; bottom: -24px; width: clamp(110px, 9vw, 165px); }   /* sous le demi-visage du bloc d'avant */
.cq-fin {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end;
  margin: calc(-1 * clamp(28px, 3.5vw, 48px)) clamp(4px, 3vw, 40px) 0 clamp(8px, 4vw, 56px);
}
.cq-fin .cq-visage { width: clamp(96px, 13vw, 140px); }
.cq-fin .cq-daguerre { width: clamp(104px, 14vw, 170px); }
@media (min-width: 1400px) { .cq-marge { display: block; } .cq-fin { display: none; } }
/* « Marie-Ange » écrit au pinceau (29/10/2026, choix de Charlotte : l'écriture ronde, « en coup de pinceau ») : image
   Gemini passée par croquis/pinceau.py, la forme du pinceau révélée par les traits du squelette. Le nom reste écrit
   dans le titre pour les lecteurs d'écran et les moteurs, masqué à l'œil. */
.nom-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nom-traits { display: block; width: min(74%, 500px); margin: -.05em 0 -.02em -.06em; }
@media (max-width: 759px) { .nom-traits { width: 64%; } }
.cq-nom { display: block; width: 100%; color: var(--noir); }
/* le relief vert sous l'encre (29/10, demande de Charlotte) est DANS le SVG (filtre de croquis/pinceau.py, teinte
   var(--teinte) de l'accueil) : des drop-shadow CSS ne marchent pas ici, Chromium et WebKit arrondissent leur décalage
   au pixel entier inférieur (0,98 px = rien) et des pas d'1 px rayent les déliés sur téléphone (mesuré le 29/10). */

.approche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: var(--ecart-approche, clamp(64px, 9vw, 120px)); }
.carte-approche { background: var(--gris-1); border-radius: var(--rayon); padding: clamp(28px, 3.5vw, 48px); }
.carte-num { font-size: 12px; font-weight: 700; font-stretch: 115%; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-4); }
.carte-approche h3 { margin: 16px 0 20px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.carte-approche p + p { margin-top: 12px; }
.carte-approche p:not(.carte-num) { color: #2b2b29; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.puces li { padding: 6px 13px; border: 1px solid #c9c9c4; border-radius: 999px; font-size: 13px; font-weight: 500; }
@media (max-width: 759px) { .approche { grid-template-columns: 1fr; } }
/* la main au stylo (29/10, demande de Charlotte : « une grande main en négatif à l'arrière des deux textes, en diagonale,
   en trait d'ivoire derrière les deux blocs, la pointe du stylo qui prolonge une ligne fluide ») : un croquis à un trait
   (Gemini, croquis/prompts/main-stylo.txt) posé sur toute la rangée des deux encadrés, ENTRE leur fond gris et leur texte
   (le fond est peint avant les éléments positionnés, le texte est remonté en z-index 1). Trait ivoire = « en négatif » :
   plus clair que le gris. Sur téléphone (encadrés empilés), le dessin tourne d'un quart de tour pour courir sur la hauteur.
   ⚠️ Pendant leur apparition (.revele : transform et opacité), les encadrés passent au-dessus de la main : elle est
   avant eux dans le code, elle se trace après. */
.approche { position: relative; isolation: isolate; }
.carte-approche > * { position: relative; z-index: 1; }
.carte-approche:nth-of-type(1) { grid-area: 1 / 1; }
.carte-approche:nth-of-type(2) { grid-area: 1 / 2; }
.cq-main { grid-area: 1 / 1 / 2 / -1; z-index: 0; color: #fffdf2; container-type: size; }
@media (max-width: 759px) {
  .carte-approche:nth-of-type(2) { grid-area: 2 / 1; }
  .cq-main { grid-area: 1 / 1 / 3 / 2; }
  .cq-main svg { inset: auto; left: 50%; top: 50%; width: 100cqh; height: 100cqw; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
}

/* ---------- 03 · Réalisations ---------- */
.realisations .tete-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: end; gap: 24px 60px; }
.realisations .tete-section .etiquette { grid-column: 1 / -1; margin-bottom: 0; }
.realisations .intro { margin-top: 0; }
@media (max-width: 859px) { .realisations .tete-section { grid-template-columns: 1fr; } }

.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.video-carte { min-width: 0; }
.video-legende { margin-top: 14px; font-size: 14px; color: var(--doux); line-height: 1.45; }
.video-legende b { display: block; color: var(--texte); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.glisser { display: none; }

.lecteur {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--rayon); overflow: hidden;
  background: var(--noir-2); isolation: isolate;
}
.lecteur video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.lecteur-affiche {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  width: 100%; padding: 0; border: 0; background: var(--noir-2); cursor: pointer; text-align: left;
}
.lecteur-affiche img { flex: 1 1 0%; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .7s var(--ease); }
.lecteur-affiche:hover img { transform: scale(1.035); }
.affiche-bas {
  position: relative; flex: none; display: flex; flex-direction: column;
  padding: clamp(14px, 1.4vw, 20px); background: var(--noir-2); color: var(--blanc);
}
.affiche-bas::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 38%; background: linear-gradient(to top, var(--noir-2), transparent); pointer-events: none; }
.affiche-cat { font-size: 11px; font-weight: 600; font-stretch: 115%; letter-spacing: .14em; text-transform: uppercase; color: #a9a9a4; }
.affiche-titre { margin-top: 4px; font-size: clamp(20px, 1.75vw, 26px); font-weight: 800; font-stretch: 112%; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.affiche-pied { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.lire {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blanc); color: var(--noir); transition: transform .3s var(--ease);
}
.lire svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.lecteur-affiche:hover .lire { transform: scale(1.08); }
.duree { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #cfcfca; }

/* commandes pendant la lecture */
.lecteur-commandes { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .25s; }
.lecteur.lit .lecteur-commandes, .lecteur.pause .lecteur-commandes { opacity: 1; }
@media (hover: hover) { .lecteur.lit:not(:hover):not(:focus-within) .lecteur-commandes { opacity: 0; } }
.lecteur.lit .lecteur-affiche, .lecteur.pause .lecteur-affiche { opacity: 0; visibility: hidden; pointer-events: none; }
.lecteur.demarre .lire { animation: attente 1s var(--ease) infinite alternate; }
@keyframes attente { to { transform: scale(.86); opacity: .7; } }
.lecteur-toucher { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; }
.lecteur-btn {
  position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(14, 14, 14, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lecteur-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lecteur-btn.son { top: 12px; right: 12px; }
.lecteur-btn.plein { top: 12px; left: 12px; }
.lecteur-btn.etat { left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.lecteur-btn.etat svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 3px; }
.lecteur.pause .lecteur-btn.etat { opacity: 1; }
.lecteur-barre { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.lecteur.lit .lecteur-barre, .lecteur.pause .lecteur-barre { opacity: 1; }
.lecteur-barre span { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.lecteur .icone-muet, .lecteur.muet .icone-son { display: none; }
.lecteur.muet .icone-muet { display: block; }

@media (max-width: 1023px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@media (max-width: 719px) {
  .videos {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); scroll-padding-inline: var(--marge);
    scrollbar-width: none;
  }
  .videos::-webkit-scrollbar { display: none; }
  .video-carte { flex: 0 0 min(76vw, 340px); scroll-snap-align: start; }
  .glisser { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--doux); }
  .glisser svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- Réalisations : un cahier ouvert sur le vert de l'accueil (29/10/2026, 2e version) ----------
   Modèle de Charlotte (planche ChatGPT « Des vidéos, autrement », n° 3 « Carnet créatif ») : vidéos en photos aux bords
   de papier déchiré, chutes de papier sauge, kraft et beige, scotch, marguerite et feuillage au trait, notes à la main
   avec flèche, bouton lecture rond au centre ; ici dans un cahier ouvert (deux pages lignées, couverture vert sombre,
   spirale au milieu), la section passe du noir au vert olive (--teinte). Toute la décoration laisse passer le pointeur :
   lecteur, son, pause et plein écran inchangés (site.js). Contrôle : outils/controle_carnet.py. */
/* contours de papier déchiré (polygones tirés au hasard une fois, voir CLAUDE.md) */
:root {
  --dechire-a: polygon(0.0% 0.2%, 4.1% 0.3%, 8.5% 0.4%, 11.1% 0.0%, 16.2% 0.2%, 19.3% 0.7%, 23.2% 0.6%, 27.1% 0.4%, 30.0% 0.4%, 35.2% 0.4%, 40.0% 0.5%, 42.6% 0.5%, 46.9% 0.2%, 49.4% 0.6%, 53.3% 0.5%, 58.5% 0.5%, 63.8% 0.3%, 68.8% 0.3%, 74.2% 0.6%, 76.9% 0.1%, 80.0% 0.7%, 83.8% 0.4%, 87.2% 0.4%, 90.8% 0.2%, 95.1% 0.4%, 99.1% 0.0%, 98.9% 3.5%, 99.1% 7.0%, 98.9% 9.0%, 98.8% 12.5%, 99.1% 15.2%, 98.9% 17.3%, 99.6% 20.0%, 98.9% 21.7%, 99.9% 25.3%, 99.5% 28.5%, 99.6% 30.4%, 98.9% 33.5%, 99.2% 35.2%, 99.1% 36.9%, 98.9% 39.2%, 99.3% 42.8%, 99.6% 46.3%, 99.2% 48.1%, 99.7% 49.8%, 99.2% 52.2%, 99.9% 54.1%, 99.6% 57.4%, 98.8% 60.9%, 99.4% 63.3%, 99.2% 65.9%, 99.3% 68.7%, 98.8% 71.6%, 99.4% 74.2%, 99.7% 77.2%, 98.7% 79.4%, 99.3% 82.1%, 99.5% 83.7%, 100.0% 86.5%, 99.2% 89.3%, 99.2% 91.0%, 99.1% 93.5%, 99.1% 95.8%, 100.0% 98.9%, 100.0% 99.5%, 94.5% 99.8%, 90.7% 99.6%, 87.2% 99.7%, 83.8% 99.7%, 79.5% 99.8%, 75.9% 99.5%, 73.4% 99.6%, 68.7% 99.8%, 65.6% 99.4%, 62.4% 99.9%, 58.6% 99.5%, 55.9% 99.8%, 52.4% 99.4%, 48.6% 99.4%, 45.7% 99.8%, 41.2% 99.4%, 37.3% 99.8%, 34.6% 99.6%, 31.6% 99.4%, 26.5% 99.9%, 23.2% 99.4%, 18.7% 99.4%, 15.2% 99.9%, 11.9% 99.4%, 8.6% 99.8%, 4.9% 99.7%, 1.2% 99.4%, 0.0% 100.0%, 1.1% 96.5%, 0.6% 92.9%, 1.2% 89.4%, 1.0% 87.4%, 0.9% 84.1%, 0.4% 81.5%, 0.3% 79.2%, 0.8% 77.5%, 1.1% 75.3%, 1.2% 73.6%, 1.2% 70.6%, 1.2% 67.2%, 0.0% 64.5%, 0.2% 61.4%, 0.9% 59.2%, 0.5% 56.5%, 0.8% 53.0%, 0.3% 50.8%, 0.6% 47.4%, 0.5% 44.3%, 0.7% 42.3%, 0.2% 39.0%, 1.2% 35.9%, 1.1% 32.7%, 0.8% 31.0%, 0.1% 27.7%, 0.3% 25.6%, 0.5% 22.9%, 1.0% 20.4%, 0.1% 18.8%, 0.2% 16.9%, 1.3% 15.2%, 0.1% 11.9%, 0.4% 9.3%, 0.5% 7.0%, 0.8% 4.1%, 0.2% 1.8%);
  --dechire-b: polygon(0.0% 0.3%, 4.2% 0.6%, 8.1% 0.4%, 12.4% 0.1%, 16.4% 0.4%, 21.3% 0.1%, 24.7% 0.1%, 29.7% 0.5%, 32.2% 0.7%, 37.7% 0.5%, 42.1% 0.1%, 44.5% 0.4%, 47.1% 0.1%, 50.3% 0.0%, 54.2% 0.3%, 59.3% 0.4%, 63.7% 0.3%, 68.3% 0.3%, 71.5% 0.7%, 77.1% 0.6%, 81.8% 0.2%, 84.9% 0.2%, 87.6% 0.5%, 91.2% 0.6%, 94.9% 0.7%, 100.0% 0.0%, 98.8% 0.0%, 98.7% 2.5%, 99.9% 4.9%, 99.0% 7.8%, 99.9% 9.9%, 98.7% 12.2%, 99.8% 15.3%, 99.9% 17.4%, 99.0% 19.1%, 99.3% 21.1%, 99.8% 23.6%, 99.8% 26.6%, 99.8% 29.5%, 99.7% 32.0%, 98.7% 34.1%, 99.6% 37.3%, 99.7% 40.7%, 98.9% 43.1%, 99.9% 46.0%, 99.7% 49.5%, 99.0% 51.7%, 99.6% 53.9%, 99.9% 55.7%, 99.7% 58.4%, 99.5% 61.2%, 98.8% 63.7%, 99.3% 66.3%, 99.8% 69.6%, 98.8% 71.5%, 99.7% 74.8%, 99.0% 76.8%, 99.7% 80.2%, 98.9% 83.7%, 99.5% 86.5%, 99.9% 88.4%, 99.7% 91.9%, 99.7% 94.9%, 99.2% 98.1%, 100.0% 99.9%, 95.3% 100.0%, 92.2% 99.6%, 87.0% 99.6%, 83.7% 99.4%, 80.7% 100.0%, 77.4% 99.7%, 74.8% 99.9%, 71.3% 99.6%, 68.4% 99.7%, 63.2% 99.3%, 58.7% 99.5%, 54.4% 99.9%, 51.9% 100.0%, 46.6% 99.5%, 41.1% 100.0%, 36.7% 99.7%, 31.9% 99.8%, 26.3% 99.9%, 22.2% 99.5%, 16.9% 99.5%, 12.3% 99.4%, 6.9% 99.8%, 2.3% 99.4%, 0.5% 100.0%, 1.1% 96.8%, 0.8% 94.1%, 0.8% 91.7%, 0.1% 88.9%, 1.3% 86.0%, 0.9% 82.7%, 1.0% 80.3%, 0.6% 77.5%, 0.1% 74.2%, 0.0% 71.1%, 0.6% 68.3%, 0.9% 66.3%, 0.8% 63.7%, 0.3% 60.2%, 0.4% 58.6%, 0.3% 55.7%, 1.2% 53.7%, 0.6% 50.8%, 0.4% 47.4%, 0.3% 44.5%, 1.0% 42.0%, 1.1% 38.6%, 0.8% 36.2%, 0.2% 34.0%, 1.1% 31.4%, 0.9% 28.1%, 0.4% 24.6%, 0.6% 22.7%, 0.3% 20.5%, 0.8% 18.1%, 0.4% 15.5%, 1.3% 12.2%, 0.1% 9.7%, 1.1% 8.1%, 0.9% 6.4%, 0.4% 3.6%, 0.0% 0.4%);
  --dechire-c: polygon(0.0% 1.6%, 6.1% 2.5%, 12.0% 1.5%, 18.1% 1.2%, 27.7% 0.3%, 34.4% 0.7%, 40.6% 3.0%, 46.6% 1.8%, 53.2% 2.2%, 59.9% 0.5%, 66.5% 1.2%, 75.1% 1.7%, 80.4% 2.0%, 86.3% 1.5%, 91.7% 1.2%, 98.5% 0.0%, 97.7% 5.4%, 98.1% 10.3%, 98.1% 14.5%, 99.7% 20.0%, 98.9% 26.1%, 99.5% 29.4%, 99.8% 33.4%, 98.8% 37.6%, 98.6% 42.6%, 98.0% 48.7%, 97.4% 52.6%, 97.1% 57.9%, 97.1% 63.3%, 99.2% 66.8%, 99.9% 73.0%, 97.3% 79.0%, 99.5% 82.3%, 97.1% 88.3%, 97.8% 94.1%, 99.1% 99.6%, 100.0% 98.1%, 90.9% 97.2%, 83.8% 100.0%, 78.6% 98.7%, 73.1% 99.9%, 67.8% 98.5%, 62.9% 99.7%, 57.8% 99.9%, 49.2% 97.4%, 43.9% 98.1%, 34.8% 99.3%, 28.7% 97.4%, 20.2% 98.1%, 11.6% 98.3%, 5.6% 97.9%, 0.2% 100.0%, 0.9% 96.1%, 0.9% 90.2%, 1.3% 85.0%, 1.5% 80.9%, 2.0% 75.0%, 0.5% 70.8%, 1.4% 66.8%, 3.0% 61.7%, 2.8% 57.8%, 1.3% 51.8%, 0.7% 48.2%, 0.5% 42.2%, 2.0% 37.1%, 0.1% 33.7%, 0.2% 28.7%, 2.9% 24.0%, 0.9% 19.6%, 0.9% 16.4%, 0.4% 12.5%, 1.8% 7.2%, 0.3% 1.9%);
}
.vert { --texte: var(--noir); --doux: #262a1d; --trait: rgba(14, 14, 14, .2); background: var(--teinte); color: var(--noir); }
/* la forme du cahier (29/10 au soir, Charlotte : « exactement comme sur la page Awwwards de Decibel Architecture ») : un
   carnet de poche ouvert façon Moleskine, deux pages hautes à petits points, papier blanc cassé, pli du milieu ombré et
   creusé, épaisseur des pages sur les bords (ombres décalées alternées), coins extérieurs arrondis, liseré de couverture
   noire qui dépasse, ombre douce ; plus de spirale ni de couverture verte. Le contenu (collage) ne change pas. */
.cahier {
  --encre: #2d3322; --creme: #f6f5f0; --pad: clamp(20px, 2.8vw, 44px); --points: radial-gradient(circle, rgba(60, 60, 55, .24) .9px, transparent 1.25px);
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px);
}
.cahier-page {
  position: relative; isolation: isolate; padding: clamp(26px, 3vw, 44px) var(--pad) clamp(44px, 4.4vw, 60px);
  background-color: var(--creme); background-image: var(--points); background-size: 17px 17px; background-position: 8px 8px;
}
.page-gauche {
  padding-bottom: clamp(120px, 11vw, 150px); border-radius: 14px 3px 3px 16px;
  background-image: linear-gradient(to left, rgba(35, 30, 20, .28), rgba(35, 30, 20, .1) 14px, rgba(35, 30, 20, .035) 48px, transparent 96px),
    linear-gradient(to right, rgba(0, 0, 0, .05), transparent 12px), var(--points);
  background-size: auto, auto, 17px 17px;
  box-shadow: -1px 1px 0 #e3e2dc, -2px 2px 0 #f2f1ec, -3px 3px 0 #dbdad4, -4px 4px 0 #efeee9, -5px 5px 0 #d5d4ce,
    -6px 6px 0 #ebeae5, -7px 7px 0 #cecdc7, -9px 8px 0 #1d1d1b, 0 34px 46px -20px rgba(20, 24, 10, .48);
}
.page-droite {
  border-radius: 3px 14px 16px 3px;
  background-image: linear-gradient(to right, rgba(35, 30, 20, .28), rgba(35, 30, 20, .1) 14px, rgba(35, 30, 20, .035) 48px, transparent 96px),
    linear-gradient(to left, rgba(0, 0, 0, .05), transparent 12px), var(--points);
  background-size: auto, auto, 17px 17px;
  box-shadow: 1px 1px 0 #e3e2dc, 2px 2px 0 #f2f1ec, 3px 3px 0 #dbdad4, 4px 4px 0 #efeee9, 5px 5px 0 #d5d4ce,
    6px 6px 0 #ebeae5, 7px 7px 0 #cecdc7, 9px 8px 0 #1d1d1b, 0 34px 46px -20px rgba(20, 24, 10, .48);
}
.cahier::after {   /* le pli du milieu */
  content: ""; position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 18, 12, .1), rgba(20, 18, 12, .32) 50%, rgba(20, 18, 12, .1));
}
.page-etiquette {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(14px, 1.6vw, 20px); text-align: center; pointer-events: none;
  font-size: 11px; letter-spacing: .04em; color: #a3a29a;
}
.cahier-mot {
  position: absolute; z-index: 4; top: clamp(34px, 3.6vw, 52px); right: calc(50% + 26px); display: flex; align-items: center; gap: 8px;
  font-family: "Caveat", var(--display); font-weight: 500; font-size: clamp(18px, 1.6vw, 23px); line-height: 1;
  color: var(--encre); transform: rotate(-2deg); pointer-events: none;
}
.cahier-mot svg { width: 1.5em; height: 1em; }
.page-titre {
  position: relative; display: inline-block; margin: 0 0 clamp(22px, 2.4vw, 34px) .1em; font-family: var(--serif);
  font-size: clamp(32px, 3vw, 46px); line-height: 1; color: var(--encre);
}
.page-titre .tache {
  position: absolute; z-index: -1; left: -.22em; top: .02em; width: 1.5em; height: 1.05em; background: rgba(155, 168, 140, .55);
  border-radius: 52% 44% 56% 46% / 58% 50% 46% 52%; transform: rotate(-7deg);
}
/* les deux vidéos d'une page, en collage : la 2e plus bas */
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 30px); align-items: start; }
.collage .video-carte { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.collage .video-carte:nth-child(2) { margin-top: clamp(50px, 6vw, 92px); }
.note-carnet {
  position: relative; align-self: flex-start; margin: 0 0 30px 4px; padding-right: 28px;
  font-family: "Caveat", var(--display); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.05;
  color: var(--encre); white-space: nowrap; transform: rotate(-3deg); pointer-events: none;
}
.note-carnet .fleche { position: absolute; right: -4px; top: .25em; width: 30px; height: 22px; color: var(--encre); }
.collage .video-carte:nth-child(2) .note-carnet { transform: rotate(2.5deg); }
/* la photo déchirée : papier blanc aux bords irréguliers, ombre décalée, scotch */
.photo { position: relative; isolation: isolate; transform: rotate(var(--r, 0deg)); }
.papier { position: relative; padding: clamp(8px, .75vw, 11px) clamp(8px, .75vw, 11px) clamp(11px, 1vw, 15px); background: #fffdf7; clip-path: var(--dechire, var(--dechire-a)); }
.photo::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: rgba(48, 38, 16, .2);
  clip-path: var(--dechire, var(--dechire-a)); transform: translate(3px, 5px);
}
.photo::before {
  content: ""; position: absolute; z-index: 2; left: var(--tx, 50%); top: -13px; width: 44%; height: 26px; pointer-events: none;
  background: var(--ruban); transform: translateX(-50%) rotate(var(--sr, -4deg));
  clip-path: polygon(2% 5%, 98% 0, 100% 16%, 97.5% 32%, 99.5% 48%, 97% 64%, 99.6% 80%, 98% 100%, 1% 96%, 0 80%, 2.4% 64%, .3% 48%, 2.8% 32%, .4% 16%);
}
.papier .lecteur { border-radius: 2px; }
.page-gauche .video-carte:nth-child(1) { --r: -2.6deg; --sr: -5deg; --tx: 34%; --ruban: rgba(214, 196, 158, .9); }
.page-gauche .video-carte:nth-child(2) { --r: 2deg; --sr: 4deg; --tx: 62%; --ruban: rgba(160, 175, 138, .85); --dechire: var(--dechire-b); }
.page-droite .video-carte:nth-child(1) { --r: 1.8deg; --sr: 6deg; --tx: 58%; --ruban: rgba(160, 175, 138, .85); --dechire: var(--dechire-b); }
.page-droite .video-carte:nth-child(2) { --r: -2.2deg; --sr: -4deg; --tx: 40%; --ruban: rgba(214, 196, 158, .9); }
/* l'affiche, comme une photo : l'image plein cadre, bouton lecture rond au centre, durée en petit */
.cahier .lecteur-affiche img { position: absolute; inset: 0; height: 100%; object-position: 50% 35%; }
.cahier .affiche-bas { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; background: none; }
.cahier .affiche-bas::before { display: none; }
.cahier .affiche-cat, .cahier .affiche-titre { display: none; }
.cahier .affiche-pied { margin: 0; }
.cahier .lire {
  width: clamp(48px, 4vw, 58px); height: clamp(48px, 4vw, 58px); color: #fff; background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.cahier .duree { position: absolute; right: 10px; bottom: 9px; font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.cahier .video-legende { margin-top: 16px; padding-inline: 4px; font-size: 13px; color: #4b4c40; }
.cahier .video-legende b { color: var(--encre); font-size: 14px; }
/* chutes de papier (sous les photos) et dessins au trait */
.chute { position: absolute; z-index: 0; pointer-events: none; clip-path: var(--dechire-c); }
.chute-sauge { top: 30%; left: 41%; width: 26%; height: 30%; background: #b6bfa4; transform: rotate(5deg); }
.chute-kraft { bottom: 5%; left: 6%; width: 34%; height: 15%; background: #d9c7a3; transform: rotate(-4deg); }
.chute-beige { top: 19%; right: 5%; width: 30%; height: 26%; transform: rotate(-3deg);
  background: repeating-linear-gradient(to bottom, transparent 0 15px, rgba(120, 100, 60, .2) 15px 16px), #ece1c9; }
.chute-sauge-2 { bottom: 12%; left: 46%; width: 20%; height: 15%; background: #aab597; transform: rotate(6deg); }
.dessin { position: absolute; z-index: 2; pointer-events: none; color: var(--encre); }
.marguerite { left: 2%; bottom: 3%; width: clamp(60px, 5.4vw, 78px); height: clamp(100px, 9vw, 130px); transform: rotate(-8deg); }
.feuillage { top: clamp(22px, 2.6vw, 36px); right: var(--pad); width: clamp(90px, 8vw, 120px); height: clamp(52px, 4.7vw, 70px); }
.page-droite .coeur { right: 7%; bottom: 3%; width: 26px; height: 24px; transform: rotate(10deg); }
/* tablette : les deux pages l'une sous l'autre (pli horizontal) ; téléphone : les vidéos en zigzag */
@media (max-width: 1023px) {
  .cahier { grid-template-columns: minmax(0, 1fr); }
  /* une page sous l'autre : pli horizontal, épaisseur et liseré de couverture à gauche et en bas */
  .page-gauche { border-radius: 14px 14px 3px 3px;
    background-image: linear-gradient(to top, rgba(35, 30, 20, .24), rgba(35, 30, 20, .08) 14px, transparent 70px), var(--points); background-size: auto, 17px 17px;
    box-shadow: -1px 0 0 #e3e2dc, -2px 0 0 #f2f1ec, -3px 0 0 #dbdad4, -4px 0 0 #efeee9, -5px 0 0 #d5d4ce, -7px 0 0 #1d1d1b; }
  .page-droite { border-radius: 3px 3px 14px 16px;
    background-image: linear-gradient(to bottom, rgba(35, 30, 20, .24), rgba(35, 30, 20, .08) 14px, transparent 70px), var(--points); background-size: auto, 17px 17px;
    box-shadow: -1px 1px 0 #e3e2dc, -2px 2px 0 #f2f1ec, -3px 3px 0 #dbdad4, -4px 4px 0 #efeee9, -5px 5px 0 #d5d4ce, -7px 6px 0 #1d1d1b, 0 30px 40px -20px rgba(20, 24, 10, .45); }
  .cahier::after { display: none; }
  .cahier-mot { right: calc(var(--pad) + 13px); }
  .page-droite .coeur { right: auto; left: 6%; }   /* sous la vidéo la plus courte, loin de la dernière légende */
}
@media (max-width: 719px) {
  .cahier { --pad: 18px; }
  .cahier-mot { display: none; }
  .collage { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .collage .video-carte { width: 82%; }
  .collage .video-carte:nth-child(2) { margin: 0 0 0 auto; }
  .collage .video-carte:nth-child(2) .note-carnet { align-self: flex-end; }
  .page-gauche { padding-bottom: 130px; }
  .feuillage { width: 76px; height: 44px; }
  .marguerite { width: 46px; height: 78px; bottom: 2%; }
  /* chutes recalées sur la colonne : derrière le bord de la 2e vidéo, sous la 1re */
  .chute-sauge { top: 47%; left: 3%; width: 26%; height: 16%; }
  .chute-beige { top: 7%; right: 2%; width: 30%; height: 14%; }
  .chute-sauge-2 { bottom: 9%; left: 4%; width: 24%; height: 12%; }
}

/* ---------- Galerie « En images » : une histoire de courant d'air (30/10/2026) ----------
   Charlotte : « un seul cahier, un peu en désordre, posé sur un bureau rudimentaire où je peux tout juste poser mon
   cahier ; une fenêtre ouverte, un courant d'air, on voit la mer, le port et Notre-Dame, toujours en one-liner ; le coup
   de vent décolle un peu les photos qui tiennent grâce au scotch ». Fenêtre et bureau : dessins à un trait du Gemini de
   David (croquis/prompts/fenetre-bureau.txt), tracés au défilement. Le cahier repose sur la planche (la planche dépasse
   à peine), les 13 photos sont collées en désordre (grille de deux colonnes, chacune penchée, décalée et chevauchant sa
   voisine du dessus). Le vent (site.js, « Courant d'air ») : trois rafales partent de la fenêtre et les photos se
   soulèvent depuis leur scotch, la plus proche de la fenêtre d'abord ; seulement quand le cahier est à l'écran, jamais
   en mouvement réduit ni en ?flat=1. La visionneuse parcourt les photos dans l'ordre du code. Contrôle :
   outils/controle_galerie.py (+ controle_carnet.py pour les notes). */
.galerie-zone { margin-top: clamp(80px, 10vw, 140px); }
/* 30/10 après-midi, Charlotte : « la fenêtre 3 fois plus grande ». Avant : un tiers de la scène à droite du titre
   (clamp(250px, 33%, 430px)) ; maintenant 3 fois cette largeur, plafonnée à la scène : la fenêtre passe sous le titre,
   au mur, et le bureau est devant elle (le cahier couvre le bas de l'ouverture, --recouvre = part de sa hauteur). */
.scene-vent {
  --lf: min(100%, 3 * clamp(250px, 33%, 430px));
  --recouvre: .16;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "fenetre" "bureau";
  align-items: start;
}
.scene-vent .tete-galerie { grid-area: tete; display: block; margin: 0; padding-top: clamp(8px, 2vw, 30px); }
.scene-vent .tete-galerie .intro { margin-top: 14px; max-width: 30ch; }
/* la fenêtre ouverte (.fenetre-mer : .fenetre est le cadre photo de l'accueil), au mur (le vert de la section) : le jour entre par l'ouverture, ciel clair et mer pâle */
.fenetre-mer { grid-area: fenetre; position: relative; z-index: 1; aspect-ratio: 1526 / 1296; width: var(--lf); justify-self: center; margin-top: clamp(18px, 3vw, 44px); }
.fenetre-jour {
  position: absolute; left: 26.6%; top: 14.4%; width: 49%; height: 73.6%; pointer-events: none;   /* ouverture mesurée sur le dessin */
  background: linear-gradient(to bottom, #f8f1dc, #f3ead2 50%, #dfe8e1 57%, #d2e1db);
  box-shadow: 0 0 46px 14px rgba(248, 241, 220, .28);
}
.cq-fenetre { position: absolute; inset: 0; color: #262b1c; }
/* les rafales : trois traits clairs qui partent de l'ouverture vers le cahier */
.vent {
  position: absolute; z-index: 6; right: 47%; top: 58%; width: 52%; aspect-ratio: 600 / 220; overflow: visible; pointer-events: none;
  fill: none; stroke: #fffdf2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.vent path { stroke-dasharray: 100 0; opacity: .5; vector-effect: non-scaling-stroke; }
.scene-vent.souffle .vent path { stroke-dasharray: 30 130; stroke-dashoffset: 130; opacity: 0;
  animation: rafale 7s linear infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes rafale {
  0% { stroke-dashoffset: 130; opacity: 0; }
  3% { opacity: .95; }
  21% { opacity: .95; }
  25%, 100% { stroke-dashoffset: -30; opacity: 0; }
}
/* le bureau : une planche brute sur deux tréteaux (dessin), coloriée en bois clair sous le trait, à peine plus large que
   le cahier ; le cahier est posé dessus (son bas couvre le plateau, jusqu'à 10 % de la hauteur du dessin) */
.bureau { grid-area: bureau; position: relative; margin-top: calc(var(--lf) * -1296 / 1526 * var(--recouvre)); }   /* devant le bas de la fenêtre */
.scene-vent .cahier-photos { z-index: 2; margin: 0 3%; }
.bureau-pieds { position: relative; z-index: 1; aspect-ratio: 1357 / 625; margin-top: -4.6%; pointer-events: none; }
.planche {
  position: absolute; inset: 0; clip-path: polygon(8.8% 2.8%, 92.6% 2.8%, 98.6% 13.4%, 98.8% 17.8%, 1.2% 17.8%, 1.4% 13.4%);
  background:
    repeating-linear-gradient(178.6deg, transparent 0 7px, rgba(120, 82, 40, .1) 7px 8px, transparent 8px 17px),
    linear-gradient(to bottom, #e0c597 0 14%, #b98f58 14.4% 100%);
}
.cq-bureau { position: absolute; inset: 0; color: #262b1c; }
/* le cahier : un seul, deux pages, les photos collées un peu en désordre */
.cahier-photos .page-gauche, .cahier-photos .page-droite { padding-bottom: clamp(64px, 6vw, 86px); }
.desordre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 2.2vw, 30px); align-items: start; }
.carte-photo {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0;
  margin-bottom: calc(-1 * clamp(14px, 2vw, 30px)); transform: translate(var(--dx, 0), var(--dy, 0));
}
.carte-photo:nth-child(even) { --dy: clamp(34px, 4.4vw, 66px); }
.carte-seule { grid-column: 1 / -1; width: 52%; justify-self: center; margin-top: clamp(26px, 3vw, 44px); --dy: 0px; }
.carte-photo .note-carnet { margin-bottom: 36px; margin-left: 8px; }
.carte-photo:nth-child(even) .note-carnet { transform: rotate(2.5deg); }
.note-dessous { order: 2; margin: 22px 0 0 10px !important; }
.note-dessous .fleche { top: -.85em; transform: scaleY(-1); }
.carte-haute .vignette img { aspect-ratio: 2 / 3; }
.cahier-photos .papier .vignette { display: block; border-radius: 2px; background: #d9d4c6; }
.cahier-photos .soleil { left: 8%; bottom: clamp(12px, 1.4vw, 18px); width: clamp(32px, 2.8vw, 42px); height: clamp(32px, 2.8vw, 42px); }
.cahier-photos .page-droite .coeur { left: auto; right: 7%; bottom: clamp(14px, 1.6vw, 20px); }
/* le coup de vent : la photo se soulève depuis son scotch (qui, lui, ne bouge pas), son ombre s'écarte */
.carte-photo .papier { transform-origin: var(--tx, 50%) 0; }
.scene-vent.souffle .carte-photo .papier { animation: decolle 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.scene-vent.souffle .carte-photo .photo::after { animation: ombre-decolle 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes decolle {
  0%, 8%, 44%, 100% { transform: none; }
  14% { transform: perspective(900px) rotateX(24deg) rotateY(-6deg) rotate(-1.6deg); }
  20% { transform: perspective(900px) rotateX(10deg) rotateY(-2deg) rotate(-.5deg); }
  26% { transform: perspective(900px) rotateX(18deg) rotateY(-4deg) rotate(-1.1deg); }
  34% { transform: perspective(900px) rotateX(4deg) rotateY(-1deg); }
}
@keyframes ombre-decolle {
  0%, 8%, 44%, 100% { transform: translate(3px, 5px); opacity: 1; }
  14% { transform: translate(12px, 21px); opacity: .65; }
  20% { transform: translate(6px, 10px); opacity: .85; }
  26% { transform: translate(9px, 15px); opacity: .75; }
  34% { transform: translate(4px, 7px); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-vent.souffle .carte-photo .papier, .scene-vent.souffle .carte-photo .photo::after, .scene-vent.souffle .vent path { animation: none; }
}
@media (max-width: 1023px) {
  .cahier-photos .page-droite .coeur { right: 7%; }
}
@media (max-width: 719px) {
  .scene-vent { --lf: 100%; --recouvre: .1; }   /* sur téléphone la fenêtre faisait 74 % : elle prend toute la largeur */
  .fenetre-mer { margin-top: 18px; }
  .vent { right: 44%; top: 56%; width: 60%; }
  .scene-vent .cahier-photos { margin: 0 2.5%; }
  .bureau-pieds { margin-top: -4.6%; }
  .desordre { column-gap: 12px; }
  .carte-photo { margin-bottom: -12px; }
  .carte-photo:nth-child(even) { --dy: 26px; }
  .carte-photo .note-carnet { font-size: 16px; margin-bottom: 30px; padding-right: 22px; }
  .note-carnet .fleche { width: 22px; height: 16px; }
  .carte-seule { width: 60%; }
}
.vignette { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; }
.vignette img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s var(--ease); }
.vignette:hover img { transform: scale(1.04); }

.visionneuse {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px 16px 64px;
  border: 0; background: rgba(8, 8, 8, .96); color: #fff;
}
.visionneuse[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.visionneuse::backdrop { background: rgba(8, 8, 8, .9); }
.visionneuse img { max-width: min(100%, 900px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.visionneuse p { margin-top: 14px; font-size: 14px; color: #cfcfca; text-align: center; }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.visionneuse button:hover { background: rgba(255, 255, 255, .2); }
.visionneuse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vis-fermer { top: 14px; right: 14px; }
.vis-prec { left: 14px; top: 50%; transform: translateY(-50%); }
.vis-suiv { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 719px) { .vis-nav { top: auto !important; bottom: 12px; transform: none !important; } .vis-prec { left: calc(50% - 60px); } .vis-suiv { right: calc(50% - 60px); } }

/* ---------- 04 · Prestations : l'atelier du peintre, v2 (30/10/2026) ----------
   Charlotte : « les œuvres en fond, les tarifs hors des carrés, définis mais visibles ». Plus de cartes ni d'aplats :
   trois colonnes sur le vert sombre ; derrière chacune, son œuvre à un trait en grand (Tournesols et autoportrait de
   Van Gogh, Nymphéas de Monet ; croquis/out/), dans une teinte claire de sa couleur de nuancier ; devant, une touche de
   peinture, le nom de la famille, puis les prix en liste à points de conduite, filets fins, comme un tarif d'atelier.
   Prix et textes : ceux du brief, inchangés. Contrôle : outils/controle_atelier.py. */
.atelier { --texte: #f4f0e3; --doux: #d5dac2; --trait: rgba(244, 240, 227, .26); --filet: rgba(244, 240, 227, .3); --halo: #4f5a2c;
  background: #4f5a2c; color: var(--texte); }
.tarifs-atelier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.famille {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-start;
  min-height: clamp(520px, 46vw, 660px); padding-top: clamp(220px, 23vw, 330px);   /* en-têtes alignés d'une colonne à l'autre */
}
.famille-olive { --c: #75834F; --oeuvre: #c6d0a2; }
.famille-sauge { --c: #9BA88C; --oeuvre: #d9e0cc; }
.famille-terracotta { --c: #B9694B; --oeuvre: #eeb79c; }
.famille > .croquis { position: absolute; z-index: -1; left: -7%; right: -7%; top: 0; height: 80%; color: var(--oeuvre); opacity: .6; }
.famille-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; text-shadow: 0 0 12px var(--halo), 0 0 3px var(--halo); }
.touche {
  flex: none; width: 48px; height: 36px; background: var(--c); transform: rotate(-8deg);
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; box-shadow: inset 0 0 0 1.5px rgba(244, 240, 227, .4), 2px 3px 0 rgba(0, 0, 0, .14);
}
.nuance-nom { font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.nuance-nom span { margin-left: 6px; font-weight: 500; }
.famille-nom { margin-top: 4px; font-family: var(--serif); font-size: clamp(30px, 2.9vw, 42px); font-weight: 400; line-height: 1; }
.tarifs { list-style: none; margin: 0; padding: 0; }
.tarif {
  display: grid; grid-template-columns: auto minmax(14px, 1fr) auto; align-items: baseline; column-gap: 10px;
  padding: 14px 0 13px; border-top: 1px solid var(--filet); text-shadow: 0 0 12px var(--halo), 0 0 3px var(--halo);
}
.tarif:last-child { border-bottom: 1px solid var(--filet); }
.tarif-titre { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 700; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; }
.points { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .45em; border-bottom: 2px dotted var(--filet); }
.tarif .prix { grid-column: 3; grid-row: 1; text-align: right; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.tarif .prix .avant { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--doux); }
.tarif-detail { grid-column: 1 / 3; grid-row: 2; margin-top: 5px; font-size: 14px; color: var(--doux); }
.tarif-soit { grid-column: 3; grid-row: 2; margin-top: 5px; text-align: right; font-size: 11px; font-weight: 600; color: var(--doux); white-space: nowrap; }
.famille-terracotta .tarif .prix { font-size: clamp(46px, 4.6vw, 66px); letter-spacing: -.05em; }
.famille-terracotta .tarif { align-items: end; }
.famille-terracotta .tarif-titre { align-self: end; margin-bottom: .5em; }
.famille-terracotta .bouton { margin-top: 20px; justify-content: center; }
.bouton-creme { background: #f4f0e3; color: #1f2418; }
.bouton-creme:hover { background: #fffdf5; transform: translateY(-2px); }
.atelier .note, .atelier .accordeon-corps { color: var(--doux); }
@media (max-width: 859px) {
  .tarifs-atelier { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 20px; }
  .famille { min-height: 0; padding-top: clamp(250px, 62vw, 330px); }
  .famille > .croquis { height: clamp(270px, 66vw, 360px); left: 0; right: 0; }
}

.conditions { margin-top: clamp(64px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 0 60px; align-items: start; }
.conditions .sous-titre { grid-row: span 4; position: sticky; top: calc(var(--entete) + 32px); }
.accordeon { border-top: 1px solid var(--trait); }
.accordeon:last-child { border-bottom: 1px solid var(--trait); }
.accordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.015em;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.accordeon[open] summary::after { transform: rotate(45deg); }
.accordeon-corps { padding: 0 0 26px; max-width: 64ch; color: #2b2b29; }
.accordeon-corps p + p { margin-top: 12px; }
@media (max-width: 859px) {
  .conditions { grid-template-columns: 1fr; }
  .conditions .sous-titre { position: static; margin-bottom: 20px; }
}

/* ---------- 05 · Méthode ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--trait); counter-reset: etape; }
.etape { padding: 34px 28px 10px 0; position: relative; }
.etape + .etape { padding-left: 28px; border-left: 1px solid var(--trait); }
.etape-num { display: block; font-size: clamp(56px, 6.4vw, 96px); font-weight: 800; font-stretch: 112%; letter-spacing: -.05em; line-height: .9; color: transparent; -webkit-text-stroke: 1.2px var(--blanc); }
.etape h3 { margin-top: 30px; font-size: 14px; font-weight: 700; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; }
.etape p { margin-top: 12px; color: var(--doux); max-width: 30ch; }
.souplesse { margin-top: clamp(48px, 6vw, 72px); padding: 24px 28px; border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--doux); display: flex; gap: 8px 24px; flex-wrap: wrap; }
.souplesse b { color: var(--blanc); font-weight: 700; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; padding-top: 3px; }
@media (max-width: 959px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etape:nth-child(3) { padding-left: 0; border-left: 0; }
  .etape:nth-child(n+3) { border-top: 1px solid var(--trait); margin-top: 24px; }
}
@media (max-width: 559px) {
  .etapes { grid-template-columns: 1fr; }
  .etape, .etape + .etape { padding: 26px 0 22px; border-left: 0; }
  .etape + .etape { border-top: 1px solid var(--trait); }
  .etape:nth-child(n+3) { margin-top: 0; }
  .etape { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; }
  .etape-num { grid-row: span 2; font-size: 56px; }
  .etape h3 { margin-top: 2px; }
  .etape p { margin-top: 8px; }
}

/* ---------- 05 · Méthode : une seule ligne (30/10/2026, piste 1 retenue par Charlotte) ----------
   Un seul trait (dessin à un trait du Gemini de David, croquis/svg/methode-ligne.svg) traverse la section et dessine en
   passant les quatre étapes : deux tasses (échange), un carnet et son crayon (script), un téléphone sur trépied et sa
   ring light (tournage), un colis noué (livraison). Il se trace AU DÉFILEMENT (site.js, « Trait au défilement ») ;
   l'ordre des traits a été recalculé de gauche à droite. Sur téléphone, chaque étape porte son morceau du même dessin
   (data-vue = fenêtre, data-plage = sa part du tracé). Contrôle : outils/controle_methode.py. */
.une-ligne { margin-top: clamp(8px, 2vw, 28px); }
.cq-ligne { width: 100%; aspect-ratio: 2761 / 457; color: #fffdf2; }
.cq-ligne-seg { display: none; color: #fffdf2; }
.une-ligne .etapes { grid-template-columns: minmax(0, 29fr) minmax(0, 24.5fr) minmax(0, 24fr) minmax(0, 22.5fr); border-top: 0; margin-top: clamp(14px, 2vw, 26px); }
.une-ligne .etape { padding-top: 6px; }
.une-ligne .etape + .etape { border-left: 1px solid rgba(255, 253, 242, .16); }
@media (max-width: 959px) {
  .une-ligne .etape:nth-child(3) { padding-left: 28px; border-left: 1px solid rgba(255, 253, 242, .16); }
  .une-ligne .etape:nth-child(n+3) { border-top: 0; margin-top: 0; }
  .une-ligne .etape-num { font-size: clamp(44px, 6vw, 64px); }
  .une-ligne .etape { padding-right: 12px; }
  .une-ligne .etape + .etape { padding-left: 12px; }
  .une-ligne .etapes { grid-template-columns: minmax(0, 29fr) minmax(0, 24.5fr) minmax(0, 24fr) minmax(0, 22.5fr); }
  .une-ligne .etape h3 { font-size: 13px; letter-spacing: .06em; }   /* « AJUSTEMENTS » tient dans sa colonne */
}
@media (max-width: 759px) {
  .cq-ligne { display: none; }
  .cq-ligne-seg { display: block; width: min(86%, 360px); margin: 0 0 6px; }
  .une-ligne .etapes { grid-template-columns: minmax(0, 1fr); }
  .une-ligne .etape, .une-ligne .etape + .etape { display: block; padding: 26px 0 26px; border-left: 0; }
  .une-ligne .etape + .etape { border-top: 1px solid rgba(255, 253, 242, .16); }
  .une-ligne .etape-num { display: inline-block; font-size: 48px; margin-right: 12px; vertical-align: baseline; }
  .une-ligne .etape h3 { display: inline; margin: 0; }
  .une-ligne .etape p { margin-top: 10px; }
}

/* ---------- 06 · Atouts : le sac de tournage étalé (30/10/2026, piste 1 retenue par Charlotte) ----------
   Sur la table (lin crème) : le sac dessiné à un trait (croquis/svg/sac.svg), et tout le matériel sorti du sac et posé à
   plat, en PHOTOS RÉALISTES détourées (« pas des dessins réalistes mais des images réalistes » : Gemini de David, puis
   rembg, outils/materiel.py), chaque pièce avec son nom écrit à la main ; les décors en étiquettes de bagage nouées au
   sac ; les participants en tirages scotchés. Dès 980 px : composition fixe (positions en % dans .etale, textes en
   unités de conteneur, rien ne bouge d'une largeur à l'autre) ; en dessous : une grille (à 900 px, les tailles minimales
   de l'écriture serraient trop la table). Les trois groupes du brief
   restent dans le code (titres pour lecteurs d'écran). Contrôle : outils/controle_atouts.py. */
.atouts { background: #efe7d4; }
.atouts-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.atout-texte h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 18px; text-wrap: balance; }
.atout-texte p + p { margin-top: 12px; }
.atout-texte p { color: #2b2b29; }
@media (max-width: 759px) { .atouts-grille { grid-template-columns: 1fr; } }
.etale { position: relative; container-type: inline-size; aspect-ratio: 16 / 11; margin-top: clamp(40px, 5vw, 70px); }
.etale ul { list-style: none; margin: 0; padding: 0; }
.materiel, .materiel-groupe, .materiel-groupe > ul { display: contents; }
.objet, .pola { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); }
.objet img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .45cqw .6cqw rgba(60, 45, 20, .3)); }
.objet-nom {
  position: absolute; left: 50%; top: calc(100% + .7cqw); transform: translateX(-50%) rotate(-2deg); text-align: center;
  font-family: "Caveat", var(--display); font-weight: 500; font-size: max(12px, 1.4cqw); line-height: 1.05; color: #2d3322; white-space: nowrap;
}
.objet-nom b { display: block; font-weight: 600; font-size: 1.12em; }
.objet-nom span { color: #5b5a48; }
.lab-gauche .objet-nom { left: auto; right: calc(100% + 1.2cqw); top: 46%; transform: rotate(-2deg); text-align: right; }
.o-capcut .objet-nom { left: 0; top: 0; transform: rotate(-3deg); text-align: left; }
.o-capcut .objet-nom::before {   /* une flèche dessinée vers l'écran du MacBook */
  content: ""; position: absolute; left: -3.2cqw; top: -1.6cqw; width: 2.8cqw; height: 2.4cqw; border-left: 1.5px solid #2d3322; border-top: 1.5px solid #2d3322;
  border-radius: 60% 0 0 0; transform: rotate(-8deg);
}
.etale-sac { position: absolute; left: 40%; top: 6%; width: 20%; }
.cq-sac { width: 100%; aspect-ratio: 529 / 820; color: #262b1c; }
.decors { position: absolute; left: 31%; top: 13%; width: 8.2%; display: flex; flex-direction: column; align-items: flex-end; gap: .7cqw; }
.decors li {
  position: relative; padding: .5cqw 1.9cqw .5cqw 1cqw; background: #d6bb88; color: #3a2e18; transform: rotate(var(--r));
  font-size: max(11px, 1.05cqw); font-weight: 600; letter-spacing: .02em; white-space: nowrap; border-radius: .3cqw 0 0 .3cqw;
  clip-path: polygon(0 0, 82% 0, 100% 30%, 100% 70%, 82% 100%, 0 100%);
  background-image: radial-gradient(circle at 88% 50%, #efe7d4 0 .3cqw, transparent .34cqw);
  box-shadow: inset 0 0 0 1px rgba(90, 65, 25, .18);
}
.decors li::after { content: ""; position: absolute; left: calc(100% - .9cqw); top: 50%; width: 2.4cqw; height: 1px; background: #7a6440; transform-origin: 0 0; transform: rotate(calc(var(--r) * -2)); }
.pola { padding: .55cqw .55cqw .7cqw; background: #fffdf7; transform: rotate(var(--r)); box-shadow: 0 .4cqw .9cqw rgba(60, 45, 20, .22); }
.pola::before {
  content: ""; position: absolute; left: 50%; top: -.8cqw; width: 42%; height: 1.6cqw; transform: translateX(-50%) rotate(-3deg);
  background: rgba(214, 196, 158, .85); clip-path: polygon(2% 5%, 98% 0, 100% 50%, 98% 100%, 1% 96%, 0 50%);
}
.pola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* la légende écrite sous la photo, sur la bande blanche (30/10 : les phrases de Charlotte sur Tao et Baloo, sur 2 ou 3 lignes) */
.pola span { display: block; padding-top: .5cqw; text-align: center; font-family: "Caveat", var(--display); font-weight: 500; font-size: 1.32cqw; line-height: 1.02; color: #2d3322; text-wrap: balance; }

/* Chaque photo du matériel entourée de plusieurs tours de crayon (30/10, demande de Charlotte) : la boucle est calculée
   par site.js (« Tours de crayon ») sur la boîte de la photo agrandie de --tour % (+ .5cqw) ; le nom passe dessous. */
.objet { --tour: 10; }
/* taille nulle tant que site.js ne l'a pas posée (photo pas chargée) : sinon 300 × 150 px par défaut, la page débordait ;
   max-width: none, car la règle générale svg { max-width: 100% } l'écrasait */
.tour { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; overflow: visible; pointer-events: none; max-width: none; max-height: none; }
.tour path { fill: none; stroke: #2d3322; stroke-width: max(1.3px, .13cqw); stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.objet .objet-nom { top: calc(100% + var(--tour) * 1% + 1cqw); }
.lab-gauche .objet-nom { top: 46%; right: calc(100% + var(--tour) * 1% + 1.5cqw); }
.o-capcut .objet-nom { top: 0; }
@media (max-width: 979px) {
  .etale { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; align-items: end; }
  .objet, .pola, .etale-sac, .decors { position: relative; left: auto; top: auto; width: auto; }
  .etale-sac { grid-column: 1 / -1; width: min(46%, 220px); justify-self: center; }
  .decors { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: -10px; }
  .decors li { font-size: 13px; padding: 5px 20px 5px 10px; background-image: radial-gradient(circle at 88% 50%, #efe7d4 0 3px, transparent 3.5px); }
  .decors li::after { display: none; }
  .etale .participants { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 10px 0 22px; }   /* dessous : la place des tours de crayon (.etale ul remettait la marge à 0) */
  .pola { padding: 6px 6px 8px; }
  .pola::before { top: -9px; height: 18px; }
  .pola span { font-size: 15px; padding-top: 6px; }
  .objet { display: flex; flex-direction: column; align-items: center; }
  /* largeur fixée d'avance (--ar = largeur / hauteur, posé sur chaque photo avec ses dimensions) : la place est réservée
     avant le chargement, la page ne bouge plus quand les photos arrivent (un lien vers #contact tombait à côté) */
  .objet img { width: min(74%, calc(150px * var(--ar, 1))); height: auto; filter: drop-shadow(0 5px 7px rgba(60, 45, 20, .3)); }
  .o-trepied img, .o-snap img, .o-x3 img, .o-iphone img { width: min(74%, calc(190px * var(--ar, 1))); }
  .objet-nom, .lab-gauche .objet-nom, .o-capcut .objet-nom { position: static; transform: rotate(-2deg); margin-top: 36px; text-align: center; font-size: 17px; }
  .o-capcut .objet-nom { margin-top: 10px; }
  .o-capcut { align-self: center; }
  .o-capcut .objet-nom::before { display: none; }
}

/* ---------- 07 · Contact « la conversation » (30/10/2026, piste 4 choisie par Charlotte) ----------
   Sur le vert de l'accueil (.vert) : le téléphone dessiné à un trait (croquis/svg/telephone.svg, Gemini de David), une
   feuille crème glissée derrière, la marque qui écrit et elle qui répond (bulles en Caveat, précédées des trois points
   « en train d'écrire » quand le téléphone arrive : classe .joue posée par site.js ; tout affiché d'emblée en ?flat=1 ou
   en mouvement réduit : .fini) ; à côté, les textes du brief. Tout le texte en noir : sur l'olive, seul un noir franc
   passe 4,5 de contraste. Contrôle : outils/controle_contact.py. */
.contact { padding-bottom: 0; }
.contact.vert { --doux: var(--noir); --trait: rgba(14, 14, 14, .28); }
.contact-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "tel tete" "tel bas";
  column-gap: clamp(40px, 7vw, 120px); row-gap: 34px; align-items: center; }
.contact-tete { grid-area: tete; align-self: end; }
.contact-bas { grid-area: bas; align-self: start; }
.contact-titre { font-size: clamp(44px, 6.2vw, 100px); line-height: .96; font-weight: 800; letter-spacing: -.05em; text-wrap: balance; }
.contact-titre em { font-size: 1.08em; letter-spacing: -.02em; }
.contact-texte { margin-top: 26px; font-size: clamp(17px, 1.5vw, 20px); color: var(--doux); max-width: 44ch; }
.contact .bouton { margin-top: 34px; }
.contact-liens { border-top: 1px solid var(--trait); }
.contact-liens li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.contact-liens .picto { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-liens span { display: block; font-size: 12px; font-weight: 700; font-stretch: 115%; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.contact-liens a { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.contact-liens a:hover { background-size: 100% 1px; }
.contact-liens p { font-size: 16px; }

/* le téléphone : feuille crème derrière (::before), fond olive du téléphone qui la cache (::after), trait, écran */
.tel { grid-area: tel; position: relative; isolation: isolate; width: min(100%, 360px); justify-self: center; }
.tel::before { content: ""; position: absolute; left: 24%; top: 6%; width: 84%; height: 88%; z-index: -2; background: #efe7d4;
  transform: rotate(7deg); box-shadow: 0 10px 24px rgba(30, 34, 20, .22); }
.tel::after { content: ""; position: absolute; inset: 1.4% 1.6% 1.2% 1.4%; z-index: -1; background: var(--fond-tel, var(--teinte)); border-radius: 13% / 6.6%; }
.cq-tel { width: 100%; aspect-ratio: 764 / 1482; color: #0e100b; }
.tel-ecran { position: absolute; left: 12.5%; right: 12.5%; top: 13%; bottom: 9%; display: flex; flex-direction: column; justify-content: center; gap: 1.1em;
  font-size: clamp(18px, 1.6vw, 24px); }
.message { display: grid; justify-items: start; align-items: end; }
.message.envoye { justify-items: end; }
.message > * { grid-area: 1 / 1; }
.bulle { position: relative; max-width: 90%; padding: .5em .8em .55em; border-radius: 1.05em; font-family: "Caveat", var(--display); font-weight: 500; font-size: 1em; line-height: 1.1;
  box-shadow: 0 3px 8px rgba(20, 24, 12, .18); }
.recu .bulle { background: #fbf7ea; color: #14160f; border-bottom-left-radius: .25em; }
.envoye .bulle { background: #1d2216; color: #f6f1e3; border-bottom-right-radius: .25em; }
.points { display: inline-flex; gap: .28em; padding: .62em .85em; border-radius: 1.05em; opacity: 0; }
.recu .points { background: #fbf7ea; color: #14160f; border-bottom-left-radius: .25em; }
.envoye .points { background: #1d2216; color: #f6f1e3; border-bottom-right-radius: .25em; }
.points i { width: .36em; height: .36em; border-radius: 50%; background: currentColor; opacity: .35; animation: tape 1s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s; }
@keyframes tape { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-.14em); } }
@keyframes ecrit { 0% { opacity: 0; transform: scale(.8); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
@keyframes arrive { from { opacity: 0; transform: translateY(.5em) scale(.96); } to { opacity: 1; transform: none; } }
.js .tel .bulle { opacity: 0; }
.tel.joue .recu .points { animation: ecrit 1.1s .4s both; }
.tel.joue .recu .bulle { animation: arrive .45s cubic-bezier(.2, .7, .2, 1) 1.45s both; }
.tel.joue .envoye .points { animation: ecrit 1.1s 2.3s both; }
.tel.joue .envoye .bulle { animation: arrive .45s cubic-bezier(.2, .7, .2, 1) 3.35s both; }
.tel.fini .bulle { opacity: 1; animation: none; }
.tel.fini .points { display: none; }
@media (prefers-reduced-motion: reduce) { .js .tel .bulle { opacity: 1; animation: none; } .tel .points { display: none; } }
@media (max-width: 859px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "tel" "bas"; }
  .tel { width: min(74%, 300px); }
  .tel-ecran { font-size: 17px; }
}
.contact.vert .pied-marque { color: var(--noir); }
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: clamp(80px, 10vw, 140px); padding-block: 28px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); font-size: 13px; color: var(--doux); }
.pied-marque { color: var(--blanc); font-weight: 800; font-stretch: 125%; letter-spacing: .06em; }
.pied-marque span { font-weight: 400; }

/* ---------- Apparition au défilement ---------- */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .revele.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revele { opacity: 1; transform: none; transition: none; } }