/* Contre-Jour, studio de portrait à Nantes. Gris de studio, papier, plateau sombre et safran.
   Syne (titres, larges et lourds) + Public Sans (texte). Aucune capitale espacée, aucun filet
   décoratif : la structure vient des objets du métier, rouleaux de fond, pellicule, polaroïds,
   planche-contact, viseur, déclencheur. Chaque section a son mécanisme (voir site.js).
   Mobile d'abord, points de rupture 720 / 1000 / 1280. */

@font-face { font-family: "Syne"; src: url("../fonts/syne.06dac3d9f8a5.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/publicsans.45ac3f4b61c1.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/publicsans-italic.c63ef70f797b.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
    --cuivre: #e2ad2c;          /* safran : accent, boutons pleins, marques au crayon gras */
    --cuivre-fonce: #9a6d0f;    /* ambre : texte accent sur fond clair */
    --cuivre-clair: #f6e4ae;
    --creme: #e6e4df;           /* gris de studio : fond du site */
    --sable: #f5f4f1;           /* papier : cartes, polaroïds */
    --nuit: #1b1a18;            /* plateau : sections sombres */
    --encre: #1b1a18;
    --bleu: #2f4a6b;            /* fond de studio bleu */
    --serif: "Syne", "Helvetica Neue", Arial, sans-serif;   /* titres (la clé s'appelle serif pour l'éditeur) */
    --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
    --rayon: 2px;

    --blanc: #fdfdfc;
    --gris: color-mix(in srgb, var(--encre) 58%, var(--creme));
    --ligne: color-mix(in srgb, var(--encre) 14%, transparent);
    --ligne-forte: color-mix(in srgb, var(--encre) 34%, transparent);
    --fond-1: var(--cuivre); --fond-2: var(--bleu); --fond-3: #7d8f6e; --fond-4: #b8593a; --fond-5: #8c8a84; --fond-6: #6b4e7a;
    --marge: clamp(18px, 4.5vw, 72px);
    --largeur: 1360px;
    --entete: 72px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --ombre: 0 24px 50px -24px color-mix(in srgb, var(--encre) 45%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--encre); background: var(--creme); overflow-x: clip; }
body.menu-ouvert { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--cuivre); color: var(--encre); }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: var(--creme); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- typographie ---------- */
.titre-page, .titre-section, .titre-bloc { font-family: var(--serif); font-weight: 800; line-height: 0.96; letter-spacing: -0.025em; text-wrap: balance; }
.titre-page { font-size: clamp(42px, 7.5vw, 104px); }
.titre-section { font-size: clamp(34px, 5vw, 68px); }
.titre-bloc { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.015em; line-height: 1.05; }
.titre-page em, .titre-section em, .titre-bloc em { font-style: normal; font-weight: 400; }
.surtitre { font-size: 14px; font-weight: 600; color: var(--cuivre-fonce); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); flex: none; }
.fond-nuit .surtitre { color: var(--cuivre); }
.texte-grand { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; font-weight: 300; }
.texte-doux { color: var(--gris); }
.petit { font-size: 13px; }
.tabulaire { font-variant-numeric: tabular-nums; }
.lien-souligne { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-souligne:hover { text-decoration-color: var(--cuivre); text-decoration-thickness: 2px; }
.sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.45; margin: 0 10px; vertical-align: middle; }
.prose { max-width: 66ch; display: grid; gap: 16px; }
.prose h2 { font-family: var(--serif); font-weight: 800; font-size: 24px; letter-spacing: -0.015em; margin-top: 18px; }

/* titres mot à mot */
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--sortie); transition-delay: calc(var(--m, 0) * 60ms); }
[data-mots].mots-visibles .mot > span { transform: none; }
[data-ed][data-mots] .mot > span { transform: none; }

/* apparitions */
[data-apparition] { opacity: 0; transition: opacity 900ms ease, transform 1100ms var(--sortie), filter 900ms ease; transition-delay: calc(var(--i, 0) * 70ms); }
[data-apparition="haut"] { transform: translateY(26px); }
[data-apparition="echelle"] { transform: scale(0.94); }
[data-apparition="flou"] { filter: blur(8px); }
[data-apparition].visible { opacity: 1; transform: none; filter: none; }
body.mode-edition [data-apparition] { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-apparition], [data-mots] .mot > span { opacity: 1; transform: none; transition: none; filter: none; }
    *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ---------- boutons : le rectangle net, et le flash qui balaie au survol ---------- */
.bouton { --fond: transparent; --texte: var(--encre); --bord: var(--encre); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 500ms var(--sortie), border-color 300ms, background 300ms, color 300ms; }
.bouton::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-120%); z-index: -1; }
.bouton:hover::after { transition: transform 700ms var(--sortie); transform: translateX(120%); }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton-plein { --fond: var(--cuivre); --bord: var(--cuivre); --texte: var(--encre); }
.bouton-clair { --fond: var(--creme); --bord: var(--creme); --texte: var(--encre); }
.bouton-petit { padding: 10px 16px; font-size: 13px; }
.bouton[disabled] { opacity: 0.4; cursor: default; transform: none; }
.fond-nuit .bouton:not(.bouton-plein):not(.bouton-clair) { --texte: var(--creme); --bord: var(--creme); }
.actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette { display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); }
.pastille { display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: var(--rayon); background: var(--creme); }
.pastille-ok { background: #cfe3c6; color: #1f4a1a; }
.pastille-attente { background: var(--cuivre-clair); color: var(--cuivre-fonce); }
.pastille-non { background: #eed0c9; color: #6b1f1a; }

/* ---------- en-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--entete); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 var(--marge); color: var(--encre); transition: background 400ms, color 400ms, transform 600ms var(--sortie); }
.entete::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cuivre); transform-origin: left; transform: scaleX(var(--defile, 0)); }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 8%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.entete.cachee { transform: translateY(-100%); }
.entete.sur-image:not(.compacte) { color: var(--creme); }
.entete.menu-ouvert { color: var(--creme); background: transparent; backdrop-filter: none; }
.marque { grid-column: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.marque-nom { display: inline-flex; align-items: baseline; white-space: nowrap; }
.marque-point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cuivre); margin-left: 3px; }
.marque-logo { height: 30px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.navigation { display: none; grid-column: 2; justify-content: center; gap: 30px; font-size: 14px; font-weight: 500; }
.navigation a { text-decoration: none; position: relative; padding: 6px 0; }
.navigation a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--cuivre); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--sortie); }
.navigation a:hover::after, .navigation a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete-actions { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.entete-tel { display: none; text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.entete .bouton-reserver { padding: 11px 18px; font-size: 13px; }
.entete .bouton-reserver { --fond: var(--cuivre); --bord: var(--cuivre); --texte: var(--encre); }
.burger { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; position: relative; margin-right: -10px; }
.burger span { position: absolute; width: 22px; height: 2px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* menu plein écran : le plateau, avec un rouleau safran qui descend */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--nuit); color: var(--creme); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--entete) + 20px) var(--marge) 32px; overflow: hidden; }
.menu-mobile::before { content: ""; position: absolute; top: 0; right: 8%; width: min(34vw, 260px); height: 100%; background: var(--cuivre); transform-origin: top; animation: deroule 900ms var(--sortie); }
@keyframes deroule { from { transform: scaleY(0); } }
.menu-mobile nav { position: relative; display: grid; align-content: center; gap: 2px; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(38px, 8.5vw, 92px); line-height: 1.02; display: flex; align-items: baseline; gap: 18px; transition: transform 600ms var(--sortie); mix-blend-mode: difference; }
.menu-mobile nav a:hover { transform: translateX(12px); }
.menu-mobile nav a small { font-family: var(--sans); font-weight: 500; font-size: 13px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.menu-mobile-reserver { margin-top: 18px; color: var(--cuivre); }
.menu-mobile-pied { position: relative; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.menu-mobile-pied a { text-decoration: none; }

/* messages */
.messages { position: fixed; top: calc(var(--entete) + 8px); left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); }
.message { padding: 14px 18px; font-size: 14px; background: var(--encre); color: var(--creme); border-radius: var(--rayon); text-align: center; border-left: 4px solid var(--cuivre); }
.message-error { border-left-color: #c2452e; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 140px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); color: var(--creme); --gris: color-mix(in srgb, var(--creme) 62%, var(--nuit)); --ligne: color-mix(in srgb, var(--creme) 16%, transparent); --ligne-forte: color-mix(in srgb, var(--creme) 36%, transparent); }
.fond-sable { background: var(--sable); }
.fond-blanc { background: var(--blanc); }
.entete-section { display: grid; gap: 8px; margin-bottom: clamp(32px, 5vw, 64px); }
.entete-section-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.entete-section .texte-grand { max-width: 52ch; }
.tete-page { padding: calc(var(--entete) + clamp(44px, 7vw, 110px)) var(--marge) clamp(36px, 5vw, 72px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .texte-grand { max-width: 56ch; }

/* ======================================================================
   ACCUEIL
   ====================================================================== */

/* ---------- le plateau : le studio dans le noir, votre main est la lumière ---------- */
.plateau { position: relative; background: var(--nuit); color: var(--creme); min-height: min(100svh, 1040px); padding: calc(var(--entete) + 28px) var(--marge) 32px; display: grid; align-content: end; gap: 28px; overflow: hidden; --lx: 32%; --ly: 30%; }
.plateau::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60vw 60vw at var(--lx) var(--ly), color-mix(in srgb, var(--cuivre) 16%, transparent), transparent 60%); pointer-events: none; transition: opacity 600ms; }
.plateau-interieur { position: relative; max-width: var(--largeur); margin: 0 auto; width: 100%; display: grid; gap: 30px; }
.plateau-texte { display: grid; gap: 22px; align-content: end; }
.plateau-titre { font-family: var(--serif); font-weight: 800; font-size: clamp(36px, 6.1vw, 86px); line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; }
.plateau-offre { font-size: clamp(17px, 1.5vw, 22px); font-weight: 300; line-height: 1.45; max-width: 46ch; color: color-mix(in srgb, var(--creme) 86%, var(--nuit)); }
.plateau-offre strong { font-weight: 600; color: var(--creme); }
.plateau-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.plateau-prochaine { display: grid; gap: 2px; font-size: 14px; line-height: 1.3; }
.plateau-prochaine strong { font-weight: 600; }
.plateau-prochaine .temoin { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #67c26a; box-shadow: 0 0 0 0 rgba(103,194,106,0.6); animation: temoin 2.4s ease-out infinite; margin-right: 8px; vertical-align: middle; }
@keyframes temoin { 70% { box-shadow: 0 0 0 9px rgba(103,194,106,0); } 100% { box-shadow: 0 0 0 0 rgba(103,194,106,0); } }
.plateau-cadre { position: relative; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; justify-self: center; border-radius: var(--rayon); overflow: hidden; background: #0d0c0b; }
.plateau-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.plateau-cadre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--lx) var(--ly), transparent 0, color-mix(in srgb, var(--nuit) 20%, transparent) 22%, color-mix(in srgb, var(--nuit) 84%, transparent) 58%, var(--nuit) 100%); pointer-events: none; }
.plateau-cadre::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 238, 200, 0.22), transparent 30%); mix-blend-mode: screen; pointer-events: none; }
.plateau-indice { position: absolute; right: 14px; bottom: 14px; z-index: 2; font-size: 12px; padding: 6px 10px; background: color-mix(in srgb, var(--nuit) 70%, transparent); border-radius: var(--rayon); display: none; }
body.mode-edition .plateau-cadre::after, body.mode-edition .plateau-cadre::before { display: none; }
/* les trois pas : une vraie séquence, donc numérotée */
.plateau-pas { position: relative; max-width: var(--largeur); margin: 0 auto; width: 100%; display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--creme) 22%, transparent); }
.pas { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.35; }
.pas b { font-family: var(--serif); font-weight: 800; font-size: 26px; line-height: 1; color: var(--cuivre); }
.pas strong { display: block; font-weight: 600; }
.pas span { color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
@media (min-width: 720px) { .plateau-pas { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1000px) {
    .plateau { padding-bottom: 40px; }
    .plateau-interieur { grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
    .plateau-cadre { max-height: none; height: min(64vh, 620px); aspect-ratio: auto; }
    .plateau-indice { display: block; }
}

/* ---------- les rouleaux : les types de séance, comme des fonds de studio suspendus ---------- */
.rouleaux { padding: clamp(64px, 9vw, 130px) var(--marge) 0; overflow: hidden; }
.rouleaux-interieur { max-width: var(--largeur); margin: 0 auto; }
.rail { position: relative; height: 14px; background: linear-gradient(#5a5751, #2c2a27); border-radius: 3px; margin-top: clamp(28px, 4vw, 48px); box-shadow: 0 6px 12px -6px rgba(0,0,0,0.5); }
.rail::before, .rail::after { content: ""; position: absolute; top: -18px; width: 10px; height: 18px; background: #3a3833; }
.rail::before { left: 6%; } .rail::after { right: 6%; }
.rouleaux-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2.4vw, 32px); padding: 0 3%; }
.rouleau { --fond: var(--fond-1); position: relative; text-decoration: none; color: var(--blanc); display: grid; grid-template-rows: auto 1fr; }
.rouleau:nth-child(2) { --fond: var(--fond-2); } .rouleau:nth-child(3) { --fond: var(--fond-3); } .rouleau:nth-child(4) { --fond: var(--fond-4); } .rouleau:nth-child(5) { --fond: var(--fond-5); } .rouleau:nth-child(6) { --fond: var(--fond-6); }
.rouleau-tube { height: 26px; border-radius: 13px; background: linear-gradient(color-mix(in srgb, var(--fond) 70%, white), var(--fond) 45%, color-mix(in srgb, var(--fond) 55%, black)); box-shadow: 0 4px 8px -4px rgba(0,0,0,0.6); position: relative; z-index: 2; }
.rouleau-papier { position: relative; margin: -8px 6px 0; background: var(--fond); min-height: 300px; padding: 30px 22px 26px; display: grid; align-content: space-between; gap: 22px; border-radius: 0 0 14px 14px; clip-path: inset(0 0 100% 0); transition: clip-path 1300ms var(--sortie), padding-bottom 700ms var(--sortie); box-shadow: inset 0 18px 24px -18px rgba(0,0,0,0.45); }
.rouleau-papier::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, rgba(0,0,0,0.18)); border-radius: 0 0 14px 14px; pointer-events: none; }
.rouleau.visible .rouleau-papier, body.mode-edition .rouleau-papier { clip-path: inset(0 0 0 0); }
.rouleau:nth-child(2) .rouleau-papier { transition-delay: 120ms; } .rouleau:nth-child(3) .rouleau-papier { transition-delay: 240ms; } .rouleau:nth-child(4) .rouleau-papier { transition-delay: 360ms; }
.rouleau:hover .rouleau-papier, .rouleau:focus-visible .rouleau-papier { padding-bottom: 54px; }
.rouleau-nom { font-family: var(--serif); font-weight: 800; font-size: clamp(21px, 1.75vw, 26px); line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rouleau-texte { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--blanc) 88%, var(--fond)); }
.rouleau-bas { display: grid; gap: 6px; font-size: 13px; }
.rouleau-bas strong { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.rouleau-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.rouleau:nth-child(1) { color: var(--encre); } .rouleau:nth-child(1) .rouleau-texte { color: color-mix(in srgb, var(--encre) 80%, var(--fond)); }
.rouleaux-sol { height: clamp(40px, 6vw, 80px); background: linear-gradient(transparent, color-mix(in srgb, var(--encre) 8%, transparent)); }

/* ---------- la pellicule : comment ça se passe, cinq vues qui défilent ---------- */
.pellicule { background: var(--nuit); color: var(--creme); padding: clamp(64px, 9vw, 130px) 0; overflow: hidden; }
.pellicule-tete { max-width: var(--largeur); margin: 0 auto clamp(28px, 4vw, 52px); padding: 0 var(--marge); display: grid; gap: 10px; }
.pellicule-tete .texte-grand { max-width: 50ch; color: color-mix(in srgb, var(--creme) 78%, var(--nuit)); }
.pellicule-scene { position: relative; }
.pellicule-bande { position: relative; display: flex; gap: 0; width: max-content; padding: 22px 0; background: #0c0b0a; will-change: transform; }
.pellicule-bande::before, .pellicule-bande::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--creme) 14px 24px, transparent 24px 34px); opacity: 0.85; }
.pellicule-bande::before { top: 5px; } .pellicule-bande::after { bottom: 5px; }
.vue { flex: none; width: min(78vw, 420px); margin: 0 10px; display: grid; grid-template-rows: auto 1fr; background: #1f1e1b; border-radius: var(--rayon); overflow: hidden; }
.vue figure { aspect-ratio: 3 / 2; overflow: hidden; }
.vue img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.vue-texte { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.vue-num { font-family: var(--serif); font-weight: 800; font-size: 13px; color: var(--cuivre); letter-spacing: 0.02em; }
.vue-titre { font-family: var(--serif); font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; }
.vue-texte p { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--creme) 76%, var(--nuit)); }
.pellicule-scene.libre { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 var(--marge); }
.pellicule-scene.libre::-webkit-scrollbar { display: none; }
.pellicule-scene.libre .vue { scroll-snap-align: center; }
.pellicule-pied { max-width: var(--largeur); margin: 24px auto 0; padding: 0 var(--marge); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 13px; color: color-mix(in srgb, var(--creme) 60%, var(--nuit)); }
.pellicule-compteur { font-family: var(--serif); font-weight: 800; font-size: 18px; color: var(--creme); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
    .pellicule.epinglee { padding-bottom: 0; }
    .pellicule.epinglee .pellicule-scene { height: 220vh; }
    .pellicule.epinglee .pellicule-colle { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; gap: 20px; overflow: hidden; }
    .pellicule.epinglee .pellicule-tete { margin-bottom: 0; }
    .pellicule.epinglee .pellicule-tete .titre-section { font-size: clamp(30px, 3.6vw, 50px); }
    .pellicule.epinglee .vue { width: 380px; }
}

/* ---------- les polaroïds : les photographes, révélés à l'entrée dans le cadre ---------- */
.polaroids { padding: clamp(64px, 9vw, 130px) var(--marge); }
.polaroids-interieur { max-width: var(--largeur); margin: 0 auto; }
.polaroids-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(22px, 3vw, 44px); align-items: start; }
.polaroid { --a: -2deg; position: relative; text-decoration: none; color: var(--encre); background: var(--blanc); padding: 14px 14px 22px; box-shadow: var(--ombre), 0 1px 0 rgba(255,255,255,0.8) inset; transform: rotate(var(--a)); transition: transform 700ms var(--sortie), box-shadow 700ms; display: grid; gap: 16px; }
.polaroid:nth-child(2) { --a: 1.6deg; } .polaroid:nth-child(3) { --a: -1deg; } .polaroid:nth-child(4) { --a: 2.2deg; } .polaroid:nth-child(5) { --a: -1.8deg; }
.polaroid:hover { transform: rotate(0deg) translateY(-6px); }
.polaroid-cadre { aspect-ratio: 1; overflow: hidden; background: #d9d4c8; }
.polaroid-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: brightness(3) contrast(0.15) saturate(0); transition: filter 2600ms cubic-bezier(0.3, 0.6, 0.2, 1); }
.polaroid.visible .polaroid-cadre img, body.mode-edition .polaroid-cadre img { filter: none; }
.polaroid-legende { display: grid; gap: 8px; padding: 0 4px; }
.polaroid-nom { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
.polaroid-nom em { font-style: normal; font-weight: 400; }
.polaroid-titre { font-size: 13px; color: var(--gris); }
.polaroid-bio { font-size: 14px; line-height: 1.45; }
.polaroid-bas { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: 13px; }
.jours { display: inline-flex; gap: 4px; }
.jours i { width: 18px; height: 18px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; border-radius: 50%; border: 1px solid var(--ligne-forte); color: var(--gris); }
.jours i.present { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.jours i.aujourd-hui { outline: 2px solid var(--cuivre); outline-offset: 1px; }
.prochain strong { font-weight: 600; }
.polaroid-adhesif { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; background: color-mix(in srgb, var(--cuivre) 55%, transparent); transform: translateX(-50%) rotate(calc(var(--a) * -1.5)); }

/* ---------- la retouche : avant, après, et la règle que l'on fait glisser ---------- */
.retouche { padding: clamp(64px, 9vw, 130px) var(--marge); background: var(--sable); }
.retouche-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.comparateur { --x: 50%; position: relative; aspect-ratio: 4 / 3; max-height: 70vh; overflow: hidden; border-radius: var(--rayon); background: #222; user-select: none; }
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.comparateur .brut { filter: contrast(0.82) saturate(0.55) sepia(0.2) brightness(0.88); }
.comparateur .net { clip-path: inset(0 0 0 var(--x)); }
.comparateur-regle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--creme); transform: translateX(-50%); pointer-events: none; }
.comparateur-regle::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--cuivre); color: var(--encre); display: grid; place-items: center; font-weight: 700; font-size: 18px; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6); }
.comparateur-etiquette { position: absolute; bottom: 14px; font-size: 12px; font-weight: 600; padding: 6px 10px; background: color-mix(in srgb, var(--nuit) 70%, transparent); color: var(--creme); border-radius: var(--rayon); pointer-events: none; }
.comparateur-etiquette.avant { left: 14px; } .comparateur-etiquette.apres { right: 14px; }
.comparateur input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.retouche-texte { display: grid; gap: 18px; align-content: center; }
.retouche-liste { display: grid; gap: 12px; }
.retouche-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; }
.retouche-liste li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--cuivre); }
.retouche-liste li.non::before { border-color: var(--ligne-forte); background: linear-gradient(135deg, transparent 44%, var(--ligne-forte) 44% 56%, transparent 56%); }
@media (min-width: 1000px) { .retouche-interieur { grid-template-columns: 1.3fr 0.7fr; align-items: center; } }

/* ---------- la planche-contact : la galerie, avec les sélections au crayon gras ---------- */
.planche { background: var(--nuit); color: var(--creme); padding: clamp(64px, 9vw, 130px) var(--marge); }
.planche-interieur { max-width: var(--largeur); margin: 0 auto; }
.planche-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.epreuve { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; display: block; text-decoration: none; color: inherit; }
.epreuve img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.08); transition: transform 900ms var(--sortie), filter 600ms; }
.epreuve:hover img { transform: scale(1.06); filter: none; }
.epreuve:nth-child(6) img { object-position: 15% 50%; }
.epreuve-num { position: absolute; left: 8px; top: 6px; font-family: var(--serif); font-weight: 800; font-size: 11px; color: var(--cuivre); letter-spacing: 0.05em; }
.epreuve-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 12px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); opacity: 0; transform: translateY(6px); transition: opacity 500ms, transform 600ms var(--sortie); }
.epreuve:hover .epreuve-legende { opacity: 1; transform: none; }
.epreuve svg { position: absolute; inset: -4%; width: 108%; height: 108%; pointer-events: none; }
.epreuve svg path { fill: none; stroke: var(--cuivre); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.95; mix-blend-mode: screen; }
.epreuve.retenue.visible svg path, body.mode-edition .epreuve.retenue svg path { animation: crayon 1100ms cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 180ms + 300ms); }
@keyframes crayon { to { stroke-dashoffset: 0; } }
@media (min-width: 720px) { .planche-grille { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .planche-grille { grid-template-columns: repeat(6, 1fr); } }

/* ---------- le viseur : ce que disent ceux qui sont passés devant l'objectif ---------- */
.viseur-section { padding: clamp(64px, 9vw, 130px) var(--marge); }
.viseur-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 48px); }
.viseur { position: relative; min-height: 340px; padding: clamp(28px, 5vw, 64px) clamp(24px, 6vw, 96px); display: grid; align-content: center; background: var(--sable); border-radius: var(--rayon); overflow: hidden; }
.viseur .coin { position: absolute; width: 34px; height: 34px; border: 3px solid var(--encre); }
.viseur .coin:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.viseur .coin:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.viseur .coin:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.viseur .coin:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.viseur-af { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--gris); }
.viseur-af i { width: 10px; height: 10px; border-radius: 50%; background: var(--ligne-forte); transition: background 300ms; }
.viseur.net .viseur-af i { background: #3fae4a; }
.viseur-collimateur { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 2px solid var(--cuivre); opacity: 0.25; pointer-events: none; }
.avis { display: none; grid-template-columns: 1fr; gap: 18px; text-align: center; }
.avis.actif { display: grid; }
.avis-texte { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.015em; max-width: 26ch; margin: 0 auto; filter: blur(0); transition: filter 900ms ease, opacity 600ms; }
.viseur.flou .avis-texte { filter: blur(10px); opacity: 0.6; }
.avis-qui { font-size: 14px; color: var(--gris); }
.avis-qui strong { color: var(--encre); font-weight: 600; }
.viseur-nav { display: flex; justify-content: center; gap: 10px; }
.viseur-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ligne-forte); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gris); }
.viseur-nav button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--creme); }
body.mode-edition .avis { display: grid; padding: 12px 0; border-top: 1px dashed var(--ligne-forte); }

/* ---------- le déclic : le bouton du déclencheur ---------- */
.declic { position: relative; background: var(--nuit); color: var(--creme); padding: clamp(72px, 10vw, 150px) var(--marge); overflow: hidden; }
.declic-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; justify-items: center; text-align: center; }
.declic .titre-section { max-width: 16ch; }
.declic-texte { max-width: 44ch; color: color-mix(in srgb, var(--creme) 76%, var(--nuit)); font-size: 17px; }
.declencheur { position: relative; width: 168px; height: 168px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; text-decoration: none; color: var(--encre); }
.declencheur::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--creme) 40%, transparent); transition: transform 700ms var(--sortie), border-color 400ms; }
.declencheur::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cuivre) 80%, white), var(--cuivre) 40%, var(--cuivre-fonce)); box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--cuivre) 70%, transparent); transition: transform 500ms var(--sortie); }
.declencheur span { position: relative; z-index: 1; font-family: var(--serif); font-weight: 800; font-size: 16px; line-height: 1.05; text-align: center; width: 110px; letter-spacing: -0.01em; }
.declencheur:hover::before { transform: scale(1.08); border-color: var(--cuivre); }
.declencheur:hover::after { transform: scale(1.04); }
.declencheur:active::after, .declencheur.presse::after { transform: scale(0.94); }
.flash { position: fixed; inset: 0; z-index: 200; background: white; opacity: 0; pointer-events: none; }
.flash.actif { animation: flash 520ms ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.declic-prochaine { font-size: 15px; display: grid; gap: 4px; }
.declic-prochaine strong { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.1; }

/* ======================================================================
   LES SÉANCES
   ====================================================================== */
.pourqui { display: flex; flex-wrap: wrap; gap: 8px; }
.pourqui a { text-decoration: none; padding: 10px 16px; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon); font-size: 14px; font-weight: 500; transition: background 300ms, color 300ms, border-color 300ms; }
.pourqui a.actif, .pourqui a:hover { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.familles { display: grid; gap: clamp(48px, 7vw, 96px); }
.famille { display: grid; gap: 24px; scroll-margin-top: calc(var(--entete) + 24px); }
.famille-tete { display: grid; gap: 8px; max-width: 60ch; }
.seances { display: grid; border-top: 1px solid var(--ligne-forte); }
.seance { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--ligne); cursor: pointer; position: relative; }
.seance:focus-visible { outline-offset: -2px; }
.diaph { --o: 0.5; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--encre); display: grid; place-items: center; position: relative; overflow: hidden; background: var(--sable); }
.diaph i { display: block; width: calc(18% + var(--o) * 74%); aspect-ratio: 1; background: var(--encre); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: width 700ms var(--sortie); }
.seance:hover .diaph i { width: 92%; }
.seance-nom { font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; letter-spacing: -0.02em; }
.seance-meta { grid-column: 2; font-size: 13px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.seance-meta b { font-weight: 600; color: var(--encre); }
.seance-prix { grid-column: 3; grid-row: 1 / span 2; font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.seance-prix small { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--gris); letter-spacing: 0; }
.seance-detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--sortie); }
.seance-detail > div { overflow: hidden; display: grid; gap: 12px; }
.seance.ouverte .seance-detail { grid-template-rows: 1fr; }
.seance.ouverte .seance-detail > div { padding-top: 10px; }
.seance-description { max-width: 62ch; font-size: 15px; }
.seance-qui { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.avatars { display: inline-flex; margin-left: 4px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--creme); margin-left: -8px; background: var(--ligne-forte); display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; }
.seance-options { font-size: 13px; color: var(--gris); display: grid; gap: 4px; }
.seance-reserver { justify-self: start; }
body.mode-edition .seance-detail { grid-template-rows: 1fr; }
.grille-tarifs-note { font-size: 14px; color: var(--gris); max-width: 60ch; }
.appel { display: grid; gap: 22px; justify-items: start; }
.appel .titre-section { max-width: 18ch; }

/* ======================================================================
   LES PHOTOGRAPHES, LA FICHE
   ====================================================================== */
.galerie-polaroids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(26px, 4vw, 56px); align-items: start; }
.galerie-polaroids .polaroid { padding-bottom: 26px; }
.galerie-polaroids .polaroid-cadre { aspect-ratio: 4 / 5; }
.photographe-tete { display: grid; gap: clamp(28px, 4vw, 56px); align-items: end; }
.photographe-tete .polaroid { max-width: 380px; justify-self: center; --a: -2.5deg; }
.photographe-infos { display: grid; gap: 20px; }
.semaine-pellicule { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 16px 8px; background: #0c0b0a; position: relative; border-radius: var(--rayon); }
.semaine-pellicule::before, .semaine-pellicule::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--creme) 10px 17px, transparent 17px 24px); opacity: 0.7; }
.semaine-pellicule::before { top: 4px; } .semaine-pellicule::after { bottom: 4px; }
.semaine-jour { display: grid; gap: 6px; padding: 10px 6px 8px; background: #1f1e1b; color: var(--creme); border-radius: 1px; text-align: center; font-size: 12px; min-height: 96px; align-content: space-between; }
.semaine-jour.absent { color: color-mix(in srgb, var(--creme) 35%, transparent); }
.semaine-jour.aujourd-hui { outline: 2px solid var(--cuivre); outline-offset: -2px; }
.semaine-jour .barre { position: relative; height: 40px; background: #2c2b27; }
.semaine-jour .barre i { position: absolute; left: 0; right: 0; top: var(--de); height: var(--a); background: var(--cuivre); }
.semaine-jour b { font-family: var(--serif); font-weight: 800; font-size: 13px; }
.tarifs-photographe { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tarifs-categorie h3 { font-family: var(--serif); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 12px; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.tarifs-categorie li .prix { font-family: var(--serif); font-weight: 800; white-space: nowrap; }
.autres-polaroids { display: flex; flex-wrap: wrap; gap: 22px; }
.autres-polaroids .polaroid { width: 180px; padding: 8px 8px 12px; gap: 8px; }
.autres-polaroids .polaroid-nom { font-size: 17px; }
@media (min-width: 1000px) { .photographe-tete { grid-template-columns: 380px 1fr; } }

/* ======================================================================
   LE STUDIO
   ====================================================================== */
.eclairage { background: var(--nuit); color: var(--creme); padding: clamp(64px, 9vw, 130px) var(--marge); }
.eclairage-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.scene { position: relative; aspect-ratio: 3 / 2; max-height: 70vh; overflow: hidden; border-radius: var(--rayon); background: #050505; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(0.35) contrast(1.1); transition: filter 700ms; }
.scene.cle img { filter: brightness(0.7) contrast(1.1); }
.scene.cle.douce img { filter: brightness(0.95) contrast(1); }
.scene.douce:not(.cle) img { filter: brightness(0.55) contrast(0.9); }
.scene .lampe { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 700ms; mix-blend-mode: screen; }
.scene .lampe.cle { background: radial-gradient(60% 70% at 18% 20%, rgba(255, 236, 200, 0.55), transparent 65%); }
.scene .lampe.douce { background: radial-gradient(90% 90% at 85% 55%, rgba(220, 230, 255, 0.28), transparent 70%); }
.scene .lampe.contre { background: linear-gradient(265deg, rgba(255, 210, 120, 0.7), transparent 28%); }
.scene .lampe.fond { background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--bleu) 80%, transparent), transparent 75%); mix-blend-mode: lighten; }
.scene.cle .lampe.cle, .scene.douce .lampe.douce, .scene.contre .lampe.contre, .scene.fond .lampe.fond { opacity: 1; }
.pupitre { display: grid; gap: 14px; align-content: center; }
.pupitre-titre { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.lampe-bouton { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: border-color 300ms, background 300ms; }
.lampe-bouton i { width: 44px; height: 24px; border-radius: 12px; background: #3a3833; position: relative; transition: background 300ms; }
.lampe-bouton i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--creme); transition: transform 400ms var(--sortie); }
.lampe-bouton[aria-pressed="true"] i { background: var(--cuivre); }
.lampe-bouton[aria-pressed="true"] i::after { transform: translateX(20px); }
.lampe-bouton strong { display: block; font-weight: 600; font-size: 15px; }
.lampe-bouton span { font-size: 13px; color: color-mix(in srgb, var(--creme) 62%, var(--nuit)); }
.pupitre-note { font-size: 13px; color: color-mix(in srgb, var(--creme) 62%, var(--nuit)); }
@media (min-width: 1000px) { .eclairage-interieur { grid-template-columns: 1.4fr 0.6fr; align-items: center; } }

.visite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.visite figure { position: relative; overflow: hidden; background: var(--sable); }
.visite figure > figure { aspect-ratio: 4 / 3; }
.visite img { width: 100%; height: 100%; object-fit: cover; }
.visite figcaption { padding: 10px 2px 0; font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.visite figcaption span:first-child { font-family: var(--serif); font-weight: 800; color: var(--cuivre-fonce); }
.visite figure:first-child { grid-column: 1 / -1; }
.visite figure:first-child > figure { aspect-ratio: 16 / 8; }
@media (min-width: 720px) { .visite { grid-template-columns: repeat(4, 1fr); } .visite figure:first-child { grid-column: span 2; grid-row: span 2; } .visite figure:first-child > figure { aspect-ratio: auto; height: 100%; } }
.video-salon { margin-top: 24px; }
.horaires { display: grid; gap: 0; max-width: 420px; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.horaires li.aujourd-hui { font-weight: 600; }
.horaires li.aujourd-hui span:first-child::after { content: "aujourd'hui"; font-weight: 500; font-size: 11px; color: var(--cuivre-fonce); margin-left: 8px; }
.ouvert-maintenant { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.ouvert-maintenant .texte-doux { grid-column: 2; font-weight: 400; font-size: 13px; }
.ouvert-maintenant i { width: 10px; height: 10px; border-radius: 50%; background: #3fae4a; }
.ouvert-maintenant.ferme i { background: #c2452e; }
.infos { display: grid; gap: clamp(28px, 4vw, 56px); }
.infos-bloc { display: grid; gap: 14px; align-content: start; }
.infos-bloc .texte-doux { max-width: 46ch; }
@media (min-width: 720px) { .infos { grid-template-columns: repeat(3, 1fr); } }
.contact { max-width: 720px; }

/* formulaire de contact de l'éditeur */
.formulaire-bloc { display: grid; gap: 18px; padding: clamp(24px, 4vw, 48px); background: var(--sable); border-radius: var(--rayon); }
.formulaire-titre { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1; }
.formulaire-intro { color: var(--gris); max-width: 56ch; }
.formulaire { display: grid; gap: 18px; }
.formulaire-champ { display: grid; gap: 6px; }
.formulaire-champ label, .champ label { font-size: 13px; font-weight: 600; }
.formulaire input:not([type=checkbox]), .formulaire select, .formulaire textarea, .champ input, .champ textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); transition: border-color 300ms; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus, .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--encre); }
.formulaire textarea, .champ textarea { min-height: 120px; resize: vertical; }
.formulaire-case, .champ-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.formulaire-case input, .champ-case input { margin-top: 4px; accent-color: var(--cuivre); }
.formulaire-piege, .champ-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 12px; color: var(--gris); }
.formulaire-erreur, .erreur-formulaire { font-size: 13px; color: #a3311d; }
.formulaire-merci { padding: 18px; background: var(--cuivre-clair); border-radius: var(--rayon); }
.formulaire-actions { display: flex; }

/* ======================================================================
   GESTION D'UNE SÉANCE, DÉPLACEMENT : le bon de commande du labo
   ====================================================================== */
.billet { max-width: 720px; margin: 0 auto; display: grid; background: var(--sable); border-radius: var(--rayon); box-shadow: var(--ombre); }
.billet-partie { padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; position: relative; }
.billet-partie + .billet-partie { border-top: 2px dashed var(--ligne-forte); }
.dent { display: none; }
.recap-date { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; line-height: 1; }
.recap-date em { font-style: normal; font-weight: 400; }
.recap-lignes { display: grid; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.recap-lignes .recap-total { font-weight: 700; border-bottom: 0; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux h3 { font-family: var(--serif); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 10px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 9px 14px; border: 1.5px solid var(--ligne-forte); border-radius: var(--rayon); background: transparent; cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums; transition: background 250ms, color 250ms, border-color 250ms; }
.heure:hover { border-color: var(--encre); }
.heure.choisie { background: var(--cuivre); border-color: var(--cuivre); color: var(--encre); font-weight: 600; }

/* ======================================================================
   PIED : la carte du studio
   ====================================================================== */
.pied { background: var(--nuit); color: var(--creme); padding: clamp(56px, 8vw, 110px) var(--marge) 28px; }
.pied-carte { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); }
.pied-nom { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 8vw, 120px); line-height: 0.9; letter-spacing: -0.04em; }
.pied-baseline { max-width: 40ch; color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
.pied-lignes { display: grid; gap: 8px; font-size: 14px; }
.pied-lignes a { text-decoration: none; }
.pied-lignes a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-horaires { display: grid; gap: 4px; font-size: 13px; max-width: 320px; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
.pied-horaires li.aujourd-hui { color: var(--cuivre); font-weight: 600; }
.pied-bas { max-width: var(--largeur); margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; color: color-mix(in srgb, var(--creme) 55%, var(--nuit)); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--creme); }
@media (min-width: 720px) { .pied-carte { grid-template-columns: 1fr 1fr; } .pied-nom { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .pied-carte { grid-template-columns: 2fr 1fr 1fr auto; align-items: start; } .pied-nom { grid-column: 1 / -1; } }

/* ---------- points de rupture communs ---------- */
@media (min-width: 1000px) { .navigation { display: flex; } .burger { display: none; } .entete-tel { display: inline; } }
@media (max-width: 719px) {
    .entete { gap: 12px; }
    .entete .bouton-reserver { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
    .seance { grid-template-columns: 48px 1fr; }
    .diaph { width: 48px; height: 48px; }
    .seance-prix { grid-column: 2; grid-row: auto; text-align: left; }
    .seance-meta { grid-column: 2; }
    .seance-detail { grid-column: 1 / -1; }
}