/* ============================================================
   INSTITUT PATATE : Centre d'Excellence en Augmentation Corporelle
   Feuille de style : direction artistique « clinique premium futuriste »
   ============================================================ */

/* Polices hébergées en local (RGPD/CNIL) : voir tools/fetch-fonts.sh.
   Chemin RELATIF, jamais absolu : un chemin partant de la racine du domaine
   sort du dossier dès que le site est servi sous un préfixe (la pré-production
   de tools/deploy.sh --preview, par exemple) et les polices tombent en 404. */
@import url('../../../_shared/fonts/fonts.css');

:root {
    /* Palette validée */
    --primary-dark: #14110f;
    --primary-soft: #1f1b18;
    --gold: #c8a24a;
    --gold-bright: #d4af37;
    --cream: #faf8f3;
    --white: #ffffff;
    --gray-light: #f6f4ef;
    --gray-medium: #6c6862;
    --gray-soft: #747068;        /* 4.93:1 sur blanc, 4.64:1 sur --cream */
    --gray-soft-dark: #9a948c;   /* variante pour fond sombre : 6.26:1 sur --primary-dark */
    --blue-medical: #0066cc;
    --blue-light: #e9f2fb;
    --accent: #0098d6;
    --accent-deep: #006c9e;
    --line: rgba(20, 17, 15, 0.10);
    --field-border: rgba(20, 17, 15, 0.48); /* 3.31:1 : bordure de champ perceptible (WCAG 1.4.11) */
    --line-gold: rgba(200, 162, 74, 0.35);

    /* Typo */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-ui: 'Exo 2', system-ui, sans-serif;
    --font-body: 'Mulish', system-ui, sans-serif;
    --font-mono: 'Barlow Condensed', 'Arial Narrow', sans-serif;

    --maxw: 1280px;
    --gutter: clamp(20px, 5vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--primary-dark);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; }

img { display: block; max-width: 100%; }

/* Une règle d'auteur (.btn { display: inline-flex }) l'emporte sur le [hidden]
   de la feuille du navigateur : on le réaffirme ici une fois pour toutes, le JS
   masquant avec .hidden = true (bouton « Itinéraire » d'une date sans lieu…). */
[hidden] { display: none !important; }
a { color: inherit; }

/* --------- Atomes réutilisables --------- */

/* Étiquette médicale : filet + label condensé + n° de référence */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-deep);
}
.eyebrow::before {
    content: '';
    width: 34px;
    height: 1.5px;
    background: var(--gold);
}
.eyebrow .ref { color: var(--gray-soft); letter-spacing: 0.18em; }
/* Mention de la compagnie dans le hero : lien discret, souligné au survol. */
.eyebrow .cie-link { color: inherit; text-decoration: none; transition: color .25s ease; }
.eyebrow .cie-link:hover, .eyebrow .cie-link:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.eyebrow.on-dark { color: var(--gold-bright); }
.eyebrow.on-dark .ref { color: rgba(255,255,255,0.55); }
.eyebrow.centered { justify-content: center; }

.section { padding: clamp(80px, 11vw, 150px) var(--gutter); position: relative; overflow: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.wrap-narrow { max-width: 840px; margin: 0 auto; position: relative; z-index: 2; }

.section-head { margin-bottom: clamp(48px, 6vw, 80px); }
.section-head h2 { font-size: clamp(34px, 5vw, 60px); margin-top: 22px; letter-spacing: -0.01em; }
.section-head.centered { text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--gray-medium); max-width: 60ch; }

/* Boutons */
.btn {
    --b: var(--primary-dark);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    /* les <button> n'héritent pas du line-height du corps : sans cette ligne les
       CTA convertis en boutons perdent 12 px de hauteur par rapport à la maquette */
    line-height: 1.65;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border: 1.5px solid var(--b);
    background: var(--b);
    color: var(--white);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    border-radius: 2px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,17,15,0.18); }
.btn-gold { --b: var(--gold); border-color: var(--gold); color: var(--primary-dark); }
.btn-gold:hover { box-shadow: 0 14px 32px rgba(200,162,74,0.4); }
.btn-ghost { background: transparent; color: var(--primary-dark); }
.btn-ghost:hover { background: var(--primary-dark); color: var(--white); }
.btn-ghost.on-dark { color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-ghost.on-dark:hover { background: var(--white); color: var(--primary-dark); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(5px); }

.link-more {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s ease, color .25s ease;
}
.link-more:hover { color: var(--gold); gap: 14px; }

/* Décor */
.deco { position: absolute; pointer-events: none; z-index: 1; }
.deco-ring { border: 1.5px solid var(--gold); border-radius: 50%; opacity: 0.18; }
.deco-soft { background: var(--accent); border-radius: 50%; opacity: 0.05; filter: blur(2px); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
@keyframes floatRev { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(22px) rotate(8deg); } }
@keyframes pulse { 0%,100% { opacity: .15; } 50% { opacity: .4; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Croix médicale en filigrane */
.cross-motif {
    position: absolute;
    width: 1px; pointer-events: none; z-index: 1; opacity: .5;
}

/* Apparition au scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .deco { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* --------- Fonds qui dérivent lentement (effet éthéré) --------- */
.aurora {
    position: absolute; border-radius: 50%; filter: blur(80px);
    pointer-events: none; z-index: 0; will-change: transform;
}
.aurora.gold { background: radial-gradient(circle, rgba(200,162,74,0.6), transparent 70%); }
.aurora.blue { background: radial-gradient(circle, rgba(0,152,214,0.52), transparent 70%); }
.aurora.cyan { background: radial-gradient(circle, rgba(0,152,214,0.34), transparent 72%); }
.aurora.warm { background: radial-gradient(circle, rgba(212,175,55,0.46), transparent 72%); }

/* Hero : mouvement doux (calme) */
@keyframes driftCalm1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.14); } }
@keyframes driftCalm2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,46px) scale(1.1); } }
.aurora.dq1 { animation: driftCalm1 34s ease-in-out infinite; }
.aurora.dq2 { animation: driftCalm2 42s ease-in-out infinite; }

/* Autres zones : mouvement lent mais beaucoup plus ample */
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(150px,-95px) scale(1.34); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-130px,105px) scale(1.3); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(95px,85px) scale(1.24); } 66% { transform: translate(-95px,55px) scale(0.86); } }
.aurora.d1 { animation: drift1 32s ease-in-out infinite; }
.aurora.d2 { animation: drift2 40s ease-in-out infinite; }
.aurora.d3 { animation: drift3 46s ease-in-out infinite; }

/* --------- Bulles organiques qui se déforment --------- */
.blob {
    position: absolute; filter: blur(46px); pointer-events: none; z-index: 0;
    will-change: transform, border-radius;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}
.blob.gold { background: radial-gradient(circle at 40% 40%, rgba(200,162,74,0.55), rgba(212,175,55,0.18) 60%, transparent 78%); }
.blob.blue { background: radial-gradient(circle at 45% 40%, rgba(0,152,214,0.5), rgba(0,108,158,0.16) 60%, transparent 78%); }
.blob.cyan { background: radial-gradient(circle at 40% 45%, rgba(0,170,235,0.38), transparent 74%); }
.blob.cream { background: radial-gradient(circle at 45% 40%, rgba(255,255,255,0.5), transparent 72%); }
@keyframes morph {
    0%,100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
    33%     { border-radius: 63% 37% 41% 59% / 58% 63% 37% 42%; }
    66%     { border-radius: 38% 62% 56% 44% / 49% 38% 62% 51%; }
}
@keyframes blobDrift1 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(125px,-85px) rotate(40deg) scale(1.3); } }
@keyframes blobDrift2 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(-115px,95px) rotate(-34deg) scale(1.24); } }
@keyframes blobDrift3 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 33% { transform: translate(100px,75px) rotate(26deg) scale(1.26); } 66% { transform: translate(-85px,55px) rotate(-20deg) scale(0.86); } }
.blob.b1 { animation: blobDrift1 30s ease-in-out infinite, morph 17s ease-in-out infinite; }
.blob.b2 { animation: blobDrift2 36s ease-in-out infinite, morph 21s ease-in-out infinite; }
.blob.b3 { animation: blobDrift3 44s ease-in-out infinite, morph 25s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .aurora, .blob { animation: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
    background: transparent;
}
.header-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 22px var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    transition: padding .4s ease;
}
.header.scrolled { background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(20,17,15,0.06); }
.header.scrolled .header-inner { padding-top: 14px; padding-bottom: 14px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Le bandeau porte deux destinations : la chaise renvoie au site de la compagnie,
   l'enseigne de l'institut au haut de la page. Le rembourrage négatif élargit la
   cible de la chaise sans rien déplacer. */
.logo-link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.cie-mark { display: flex; align-items: center; padding: 8px; margin: -8px; border-radius: 3px; }
.cie-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cie-mark:hover .hex.chair, .cie-mark:focus-visible .hex.chair { background: var(--gold-bright); }
.logo .hex { width: 30px; height: 34px; flex: none; }
.logo .hex path { fill: var(--gold); }
/* Variante chaise Bancale (masque → hérite de la couleur dorée) */
.logo .hex.chair {
    width: 26px; height: 38px; background: var(--gold); transition: background .25s ease;
    -webkit-mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
            mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.logo-text .name span { color: var(--gold); font-weight: 400; font-style: italic; }
.logo-text .sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gray-soft); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a.navlink {
    font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em;
    text-decoration: none; color: var(--primary-dark); position: relative; padding: 4px 0;
    transition: color .25s ease;
}
.nav a.navlink::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px; background: var(--accent); transition: width .3s ease; }
.nav a.navlink:hover { color: var(--accent); }
.nav a.navlink:hover::after { width: 100%; }
.nav .pro {
    font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gray-medium); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding-left: 30px; position: relative;
}
.nav .pro::before { content:''; position:absolute; left:14px; top:50%; transform: translateY(-50%); width:1px; height:18px; background: var(--line); }
.nav .pro:hover { color: var(--primary-dark); }
.nav .pro .lock { width: 12px; height: 12px; }

/* hamburger */
.burger { display: none; background: none; border: none; cursor: pointer; width: 42px; height: 42px; position: relative; }
.burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--primary-dark); transition: transform .3s ease, opacity .2s ease; }
.burger span:nth-child(1){ top: 14px; } .burger span:nth-child(2){ top: 20px; } .burger span:nth-child(3){ top: 26px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* mobile sheet */
.mobile-nav {
    position: fixed; inset: 0; z-index: 999; background: var(--cream);
    display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--gutter);
    transform: translateY(-100%); transition: transform .45s cubic-bezier(.16,1,.3,1); visibility: hidden;
}
body.menu-open .mobile-nav { transform: none; visibility: visible; }
.mobile-nav a, .mobile-nav button { font-family: var(--font-display); font-size: 30px; text-decoration: none; color: var(--primary-dark); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobile-nav button { background: none; border-left: none; border-right: none; border-top: none; text-align: left; cursor: pointer; }
.mobile-nav a:last-child, .mobile-nav button:last-child { border: none; }
.mobile-nav .pro { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-medium); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    background:
        radial-gradient(120% 90% at 80% 10%, var(--blue-light) 0%, transparent 55%),
        radial-gradient(100% 80% at 5% 95%, rgba(200,162,74,0.10) 0%, transparent 55%),
        linear-gradient(160deg, var(--cream) 0%, #fdfdfd 60%, var(--blue-light) 130%);
    text-align: center; padding: clamp(110px, 14vh, 150px) var(--gutter) 70px;
    overflow: hidden;
}
.hero .deco-ring.r1 { top: 12%; right: 6%; width: 320px; height: 320px; animation: float 9s ease-in-out infinite; }
.hero .deco-ring.r2 { bottom: 14%; left: 4%; width: 180px; height: 180px; opacity: .12; animation: floatRev 11s ease-in-out infinite; }
.hero .deco-soft.s1 { top: 22%; left: 12%; width: 200px; height: 200px; }
.hero-grid {
    position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
            mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
}
.hero-content { max-width: 980px; position: relative; z-index: 3; }
.hero-content .eyebrow { margin-bottom: 22px; }
.hero-show {
    font-family: var(--font-mono); font-weight: 700; font-size: clamp(28px, 5vw, 56px);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-dark); line-height: 1; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(40px, 6.4vw, 86px); letter-spacing: -0.025em; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-sub { font-family: var(--font-ui); font-weight: 300; font-size: clamp(18px, 2.2vw, 24px); color: var(--gray-medium); margin: 22px auto 36px; max-width: 56ch; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Hero : image IA fondue dans le fond (mask-image) */
.hero-image { position: relative; z-index: 3; width: 100%; max-width: 1100px; margin: clamp(30px, 4vw, 52px) auto 0; }
.hero-image::before {
    content: ''; position: absolute; inset: -12% -10% -6% -10%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 68% at 50% 28%, rgba(0,152,214,0.28), transparent 72%),
                radial-gradient(70% 60% at 50% 96%, rgba(95,160,90,0.24), transparent 74%);
    filter: blur(44px);
}
.hero-image img {
    width: 100%; height: auto; display: block;
    -webkit-mask-image: radial-gradient(122% 116% at 50% 42%, #000 28%, rgba(0,0,0,0.55) 58%, rgba(0,0,0,0.16) 80%, transparent 93%);
            mask-image: radial-gradient(122% 116% at 50% 42%, #000 28%, rgba(0,0,0,0.55) 58%, rgba(0,0,0,0.16) 80%, transparent 93%);
}
.hero-agrement { position: relative; z-index: 3; margin-top: 26px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-soft); }

/* ============================================================
   VISION : bande sombre + image troupe
   ============================================================ */
.vision { background: var(--primary-dark); color: var(--white); }
.vision .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.vision-text .eyebrow { margin-bottom: 26px; }
.vision-text h2 { font-size: clamp(34px, 5vw, 62px); color: var(--white); }
.vision-text h2 em { color: var(--gold-bright); font-style: italic; }
.vision-text .manifesto { font-size: clamp(17px, 1.7vw, 21px); color: rgba(255,255,255,0.72); margin-top: 28px; line-height: 1.75; }
.vision-text .sign { margin-top: 34px; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--gold-bright); }
.vision-text .sign small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-soft-dark); margin-top: 6px; }
.vision-media { position: relative; }
.vision-media .slot { width: 100%; height: 540px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.vision-media .tag {
    position: absolute; bottom: -18px; left: -18px; background: var(--gold); color: var(--primary-dark);
    font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 12px 20px; border-radius: 2px; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.vision .deco-ring.r1 { top: -60px; right: 10%; width: 220px; height: 220px; border-color: rgba(255,255,255,0.12); animation: float 10s ease-in-out infinite; }

/* ============================================================
   PROTOCOLES
   ============================================================ */
.protocoles { background: var(--gray-light); }
.protocoles .deco-ring.r1 { top: 6%; right: -60px; width: 260px; height: 260px; animation: pulse 6s ease-in-out infinite; }
.proto-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.proto-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 5px;
    position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    display: flex; flex-direction: column;
}
.proto-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(20,17,15,0.10); border-color: var(--line-gold); }

/* mini-galerie en tête de carte */
.proto-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--gray-light); overflow: hidden; }
.proto-media.gallery-carousel { margin-top: 0; }
.proto-media .gallery-stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: none; border-radius: 0; box-shadow: none; background: transparent; }
.proto-media .gallery-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease; }
.proto-media .gallery-slide.active { opacity: 1; visibility: visible; }
.proto-media .gallery-slide .slot { width: 100%; height: 100%; display: block; }
.proto-media .gallery-slide .slot[data-filled] { cursor: zoom-in; }
.proto-media .gallery-arrow { width: 40px; height: 40px; opacity: 0; }
.proto-card:hover .proto-media .gallery-arrow,
.proto-media:focus-within .gallery-arrow { opacity: 1; }
.proto-media .gallery-arrow.prev { left: 12px; } .proto-media .gallery-arrow.next { right: 12px; }
.proto-media .gallery-arrow svg { width: 18px; height: 18px; }
.proto-media .mini-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; gap: 6px; }
.proto-media .mini-dots button { position: relative; width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.55); transition: background .25s ease, transform .25s ease; }
.proto-media .mini-dots button.active { background: var(--gold-bright); transform: scale(1.4); }
/* zone de clic de 25 px autour d'une puce de 7 px, invisible */
.proto-media .mini-dots button::after { content: ''; position: absolute; inset: -9px; }
.proto-num {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--white); line-height: 1;
    width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
    background: rgba(20,17,15,0.55); backdrop-filter: blur(4px); border-radius: 3px;
}
.proto-body { padding: 34px 36px 38px; position: relative; }
.proto-body::before { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.proto-card:hover .proto-body::before { transform: scaleX(1); }
.proto-disc { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; }
.proto-card h3 { font-size: 26px; margin-bottom: 13px; }
.proto-card p { color: var(--gray-medium); font-size: 15.5px; margin-bottom: 22px; }
.proto-tech { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-soft); display: flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.proto-tech b { color: var(--primary-dark); font-weight: 600; }
.proto-icon { width: 22px; height: 22px; flex: none; color: var(--gold); }
.gallery-note { margin-top: 26px; text-align: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-soft); }

/* ============================================================
   MÉDECINS (artistes)
   ============================================================ */
.medecins { background: var(--white); }
.medecins .deco-soft.s1 { bottom: 5%; right: 8%; width: 240px; height: 240px; opacity: .04; }
.med-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.med-card { position: relative; }
.med-card .slot { width: 100%; height: 290px; }
.med-photo-wrap { position: relative; }
.med-ordre { position: absolute; top: 12px; left: 12px; background: rgba(20,17,15,0.78); color: var(--white); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; padding: 5px 10px; border-radius: 2px; }
/* display:block : ce sont des <span> (seul contenu valide dans un <button>),
   ils doivent s'empiler comme les <h3>/<p> de la maquette. */
.med-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 18px 0 4px; }
.med-spec { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.med-diploma { font-size: 14px; color: var(--gray-medium); font-style: italic; margin-top: 10px; line-height: 1.5; }

/* ============================================================
   PARCOURS
   ============================================================ */
.parcours { background: var(--cream); }
.parcours .deco-ring.r1 { top: 18%; left: -70px; width: 200px; height: 200px; transform: rotate(45deg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }
.steps::before { content:''; position:absolute; top: 38px; left: 11%; right: 11%; height: 1.5px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px); opacity: .6; }
.step {
    text-align: center; position: relative; z-index: 1;
}
.step-badge {
    width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 50%; background: var(--white);
    border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--gold);
    box-shadow: 0 10px 26px rgba(20,17,15,0.08); transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.step:hover .step-badge, .step:focus-within .step-badge { background: var(--gold); color: var(--white); transform: translateY(-6px); box-shadow: 0 14px 30px rgba(200,162,74,0.4); }
.step h3 { font-size: 21px; margin-bottom: 6px; transition: color .25s ease; }
.step:hover h3 { color: var(--accent-deep); }
.step .step-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 10px; }
.step .step-caret { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.step:hover .step-caret, .step:focus-within .step-caret { opacity: 1; transform: none; }
/* Le titre reste un vrai h3 ; le bouton porte l'intitulé et étend sa zone de
   clic à toute la carte via ::after (le titre resterait invisible des AT s'il
   était DANS le bouton : enfants présentationnels). */
.step-trigger {
    background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.step-trigger::after { content: ''; position: absolute; inset: -14px; border-radius: 6px; }
.step-trigger:focus-visible { outline: none; }
.step-trigger:focus-visible::after { outline: 2px solid var(--accent); }

/* panneau de détail */
.step-details { margin-top: 50px; position: relative; }
.step-panel { display: none; }
.step-panel.active {
    display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: stretch;
    background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(20,17,15,0.10); animation: panelIn .45s cubic-bezier(.16,1,.3,1);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.step-photo { position: relative; min-height: 320px; }
.step-photo .slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.step-photo .step-photo-num { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-display); font-style: italic; font-size: 26px; color: #fff; background: rgba(20,17,15,0.55); backdrop-filter: blur(4px); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.step-body { padding: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.step-body .step-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 10px; }
.step-body h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; }
.step-body p { color: var(--gray-medium); font-size: 16px; line-height: 1.75; margin-bottom: 26px; }
.step-practical {
    display: flex; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark);
}
.step-practical svg { color: var(--gold); flex: none; margin-top: 1px; }
.step-practical b { display: block; color: var(--gray-soft); font-weight: 600; letter-spacing: 0.16em; margin-bottom: 4px; }

/* parcours en popin */
.modal.modal-parcours { max-width: 880px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Voir « Défilement des modales à en-tête pleine largeur », plus bas. */
.modal-parcours .pc-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-parcours .pc-nav { flex: none; }
.modal-parcours .close { top: 16px; right: 16px; background: rgba(255,255,255,0.9); z-index: 6; }
.modal-parcours .step-panel { display: none; }
.modal-parcours .step-panel.active { display: grid; grid-template-columns: 1fr 1fr; background: transparent; border: none; border-radius: 0; box-shadow: none; animation: panelIn .4s cubic-bezier(.16,1,.3,1); }
.modal-parcours .step-photo { min-height: 320px; }
.modal-parcours .step-body { padding: clamp(28px, 3.5vw, 46px); }
.pc-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--cream); }
.pc-nav button {
    font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
    background: none; border: none; cursor: pointer; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 6px; border-radius: 4px; transition: color .25s ease;
}
.pc-nav button:hover { color: var(--accent); }
.pc-nav button:disabled { color: var(--gray-soft); opacity: .5; cursor: default; }
.pc-nav button svg { width: 18px; height: 18px; }
.pc-count { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em; color: var(--gray-medium); }
.pc-count b { color: var(--primary-dark); }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.temoignages { background: var(--white); }
.temoignages .deco-soft.s1 { top: 8%; left: 6%; width: 220px; height: 220px; opacity: .05; }
.tem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tem-card { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 38px 34px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; position: relative; }
.tem-card::before { content:'“'; position:absolute; top: 8px; right: 24px; font-family: var(--font-display); font-size: 90px; color: var(--gold); opacity: .22; line-height: 1; }
.tem-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(20,17,15,0.10); border-color: var(--line-gold); }
.tem-stars { color: var(--gold); letter-spacing: 4px; font-size: 16px; margin-bottom: 20px; }
.tem-text { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--primary-dark); margin-bottom: 26px; }
.tem-author { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
.tem-author small { display:block; font-weight: 400; color: var(--gray-soft); letter-spacing: 0.1em; margin-top: 3px; }
.tem-disclaimer { margin-top: 40px; text-align: center; font-size: 12.5px; font-style: italic; color: var(--gray-soft); max-width: 70ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   ZONE SOMBRE BAS DE PAGE : calendrier + crédits + contact + pro
   ============================================================ */
.darkzone { background: var(--primary-dark); color: var(--white); }
.darkzone .eyebrow { color: var(--gold-bright); }
.darkzone .eyebrow::before { background: var(--gold-bright); }
.darkzone .eyebrow .ref { color: rgba(255,255,255,0.55); }

/* calendrier */
.calendrier { padding-bottom: clamp(60px, 8vw, 100px); }
.calendrier h2 { color: var(--white); }
.cal-list { border-top: 1px solid rgba(255,255,255,0.14); }
.cal-row {
    display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center;
    padding: 26px 8px; border-bottom: 1px solid rgba(255,255,255,0.14);
    transition: background .25s ease, padding-left .25s ease;
}
.cal-items { list-style: none; }
.cal-row:hover { background: rgba(255,255,255,0.04); padding-left: 18px; }
.cal-date { font-family: var(--font-mono); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); }
.cal-date small { display: block; color: rgba(255,255,255,0.5); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; }
.cal-place .city { font-family: var(--font-display); font-size: 22px; }
.cal-place .venue { font-size: 14px; color: rgba(255,255,255,0.6); }
/* Valeur que l'agenda ne donne pas encore (lieu, horaire) : annoncée plutôt que
   laissée en blanc. Playfair est hébergée en italique, Barlow Condensed non :
   sur la ligne de date, la mention se distingue par la casse, pas par le style. */
.cal-place .city.is-tbd { font-size: 19px; font-style: italic; color: rgba(255,255,255,0.72); }
.cal-date small.is-tbd { text-transform: none; letter-spacing: 0.06em; }
.date-body h3.is-tbd { font-style: italic; color: var(--gray-medium); }   /* fiche = fond blanc */
/* Lieu cliquable → Google Maps */
.cal-map { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; }
.cal-map .pin { flex: 0 0 auto; transform: translateY(1px); color: var(--gold-bright); opacity: .8; transition: opacity .2s ease; }
.cal-map .cal-map-txt { display: block; }
.cal-map:hover .city, .cal-map:focus-visible .city { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.cal-map:hover .pin, .cal-map:focus-visible .pin { opacity: 1; }
.cal-map:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; }
/* Description de l'événement */
.cal-desc { margin-top: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.66); }
/* Description = URL → lien "Plus d'informations" */
.cal-info { display: inline-block; margin-top: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--gold-bright); text-decoration: none; }
.cal-info:hover, .cal-info:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Mise en forme conservée depuis la description Google Agenda (HTML assaini
   par site/lib/html-sanitize.php : a, b, strong, i, em, u, br, p, ul, ol, li) */
.cal-desc p { margin: 0 0 6px; }
.cal-desc p:last-child { margin-bottom: 0; }
.cal-desc ul, .cal-desc ol { margin: 6px 0; padding-left: 18px; }
.cal-desc li { margin: 2px 0; }
.cal-desc b, .cal-desc strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.cal-desc a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cal-desc a:hover, .cal-desc a:focus-visible { color: var(--cream); }
.cal-desc .cal-info { margin-top: 4px; text-decoration: none; }
.cal-desc .cal-info:hover, .cal-desc .cal-info:focus-visible { text-decoration: underline; }
.cal-foot { margin-top: 26px; font-size: 15px; color: rgba(255,255,255,0.6); }
.cal-foot a, .cal-foot .linkbtn { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-ui); font-weight: 600; }
.cal-foot a:hover { text-decoration: underline; }

/* bloc inférieur 3 colonnes */
.bottom { padding-top: clamp(40px, 6vw, 70px); border-top: 1px solid rgba(255,255,255,0.14); }
.bottom-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(36px, 5vw, 70px); }
.bottom h4 { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 22px; }
/* Rôle au-dessus du nom, à toutes les largeurs : en deux colonnes, le libellé
   le plus long (« Administration de production & diffusion ») imposait sa
   largeur max-content à la colonne de gauche, qui prenait alors les deux tiers
   de la place pendant que les noms s'empilaient lettre à lettre à droite. */
.credits dl { font-size: 14px; }
.credits dt { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 15px; }
.credits dt:first-of-type { margin-top: 0; }
.credits dd { color: rgba(255,255,255,0.85); margin-top: 3px; }
.contact-block p { color: rgba(255,255,255,0.78); font-size: 15px; margin-bottom: 16px; line-height: 1.6; }
.contact-block a.cline { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); font-size: 15px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: color .25s ease; }
.contact-block a.cline:hover { color: var(--gold-bright); }
.contact-block .cl-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); min-width: 78px; }

/* espace pro */
.pro-block { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 30px; }
.pro-block .lock-badge { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold-bright); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--gold-bright); }
.pro-block p { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; line-height: 1.6; }
.pro-block .btn { width: 100%; justify-content: center; }

/* Signature compagnie : seul élément du pied qui sort de la fiction Institut Patate,
   il renvoie au site de la compagnie. Volontairement sans .reveal : un lien de
   navigation ne doit pas dépendre du JS pour être visible. */
.cie-sign {
    margin-top: clamp(50px, 7vw, 80px);
    display: inline-flex; align-items: center; gap: 14px;
    text-decoration: none;
}
.cie-sign .chair {
    width: 26px; height: 38px; flex: none; background: var(--gold);
    -webkit-mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
            mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
    transition: background .25s ease;
}
.cie-sign-text { display: flex; flex-direction: column; line-height: 1.15; }
.cie-sign .cie-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: rgba(255,255,255,0.9); transition: color .25s ease; }
.cie-sign .cie-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 6px; transition: color .25s ease; }
.cie-sign:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.cie-sign:hover .chair, .cie-sign:focus-visible .chair { background: var(--gold-bright); }
.cie-sign:hover .cie-name, .cie-sign:focus-visible .cie-name { color: var(--gold-bright); }
.cie-sign:hover .cie-sub, .cie-sign:focus-visible .cie-sub { color: rgba(255,255,255,0.75); }
/* la signature porte déjà la marge haute, le bloc légal se contente de sa règle */
.cie-sign + .legal { margin-top: 34px; }

.legal { margin-top: clamp(50px, 7vw, 80px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.legal p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.legal .joke { font-style: italic; font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.55); }

/* --- Bandeau de soutiens défilant --- */
.partners { margin-bottom: clamp(40px, 6vw, 64px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255,255,255,0.14); }
.partners-head { margin-bottom: 30px; }
.partners-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); color: var(--white); margin-top: 14px; }
.marquee {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
/* trop peu de logos pour remplir la bande : on centre, sans défilement */
.marquee-track.is-static { width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 22px; animation: none; }
.marquee-track.is-static .logo-tile:last-child { margin-right: 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-tile { width: 170px; flex: none; margin-right: 26px; }
.logo-card {
    width: 170px; height: 92px; background: var(--white); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; padding: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.logo-card .slot { width: 100%; height: 100%; }
.logo-card .logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-card.is-tight { padding: 5px; }
.logo-card.is-wordmark { padding: 12px; font-family: var(--font-display); font-size: 13.5px; line-height: 1.3; text-align: center; color: var(--primary-dark); }
.logo-name { text-align: center; margin-top: 10px; min-height: 33px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.88); }
.logo-cap { text-align: center; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

.partners-thanks { margin-top: 30px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; } }

/* ============================================================
   GALERIE / CARROUSEL navigable (réutilisable)
   ============================================================ */
.gallery-carousel { position: relative; margin-top: 10px; }
.gallery-stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--gray-light);
    border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(20,17,15,0.10);
}
.gallery-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease; }
.gallery-slide.active { opacity: 1; visibility: visible; }
.gallery-slide .slot { width: 100%; height: 100%; display: block; }
.gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--primary-dark); box-shadow: 0 8px 24px rgba(20,17,15,0.18);
    display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease;
}
.gallery-arrow:hover { background: var(--gold); color: var(--primary-dark); }
.gallery-arrow.prev { left: 16px; } .gallery-arrow.next { right: 16px; }
.gallery-pause {
    position: absolute; right: 10px; bottom: 10px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(20,17,15,0.18); transition: background .25s ease;
}
.gallery-pause:hover { background: var(--gold); }
.gallery-pause svg { width: 12px; height: 12px; }
/* Ouverture de la visionneuse : équivalent clavier du clic sur la photo */
.gallery-zoom {
    position: absolute; right: 10px; top: 10px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(20,17,15,0.18); transition: background .25s ease, opacity .25s ease;
}
.gallery-zoom:hover { background: var(--gold); }
.gallery-zoom svg { width: 14px; height: 14px; }
/* dans les cartes protocoles, révélée comme les flèches : au survol ET au focus */
.proto-media .gallery-zoom { opacity: 0; }
.proto-card:hover .proto-media .gallery-zoom,
.proto-media:focus-within .gallery-zoom { opacity: 1; }
.gallery-arrow svg { width: 22px; height: 22px; }
.gallery-bar { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; }
.gallery-slide .slot[data-filled] { cursor: zoom-in; }
.gallery-counter { font-family: var(--font-mono); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; color: var(--gray-medium); }
.gallery-counter b { color: var(--primary-dark); font-size: 19px; }
.gallery-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.gallery-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--line); cursor: pointer; transition: background .25s ease, transform .25s ease; }
.gallery-dots button.active { background: var(--gold); transform: scale(1.35); }
.darkzone .gallery-counter { color: rgba(255,255,255,0.6); }
.darkzone .gallery-counter b { color: #fff; }

/* déclencheur visionneuse sur le panneau vision */
.vision-media { position: relative; }
.view-more-btn {
    position: absolute; top: 14px; right: 14px; z-index: 4; cursor: pointer;
    font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff; background: rgba(20,17,15,0.62); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.35);
    padding: 9px 16px; border-radius: 2px; display: inline-flex; align-items: center; gap: 9px;
    transition: background .25s ease, transform .25s ease;
}
.view-more-btn:hover { background: var(--gold); color: var(--primary-dark); transform: translateY(-2px); }

/* ============================================================
   MODALES
   ============================================================ */
.modal-scrim { position: fixed; inset: 0; z-index: 2000; background: rgba(20,17,15,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; --scrim-pad: 24px; padding: var(--scrim-pad); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.modal-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal { background: var(--white); border-radius: 6px; max-width: 480px; width: 100%; padding: 44px; position: relative; transform: translateY(20px) scale(.98); transition: transform .35s cubic-bezier(.16,1,.3,1); box-shadow: 0 40px 90px rgba(0,0,0,0.4); max-height: 92vh; max-height: min(92dvh, calc(100dvh - 2 * var(--scrim-pad, 24px))); overflow-y: auto; overscroll-behavior: contain; }
.modal.wide { max-width: 920px; padding: 38px; }
.modal-scrim.open .modal { transform: none; }
.modal .close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: none; background: var(--gray-light); border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--gray-medium); transition: background .25s ease, transform .25s ease; display: flex; align-items: center; justify-content: center; }
.modal .close:hover { background: var(--line); transform: rotate(90deg); }
.modal .eyebrow { margin-bottom: 14px; }
.modal h3 { font-size: 30px; margin-bottom: 8px; }
.modal .modal-sub { color: var(--gray-medium); font-size: 15px; margin-bottom: 26px; }
.modal-req { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-soft); margin: -18px 0 22px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-medium); margin-bottom: 7px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 15px; border: 1.5px solid var(--field-border); border-radius: 3px; font-family: var(--font-body); font-size: 15px; color: var(--primary-dark); background: var(--white); transition: border-color .25s ease, box-shadow .25s ease;
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,152,214,0.12); }
.modal .btn { width: 100%; justify-content: center; margin-top: 8px; }
.modal-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--gray-soft); font-style: italic; }
.pro-hint { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gray-soft); }

/* Tuiles de téléchargement (espace pro) */
.dl-grid { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; text-align: left; list-style: none; }
.dl-grid > li { display: flex; }
.dl-grid > li > * { flex: 1; }
.dl-tile { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--primary-dark); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.dl-tile:hover { border-color: var(--line-gold); background: var(--cream); transform: translateX(3px); }
.dl-type { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--white); background: var(--accent-deep); border-radius: 3px; padding: 7px 0; min-width: 46px; text-align: center; flex: none; }
.dl-type.pdf { background: var(--blue-medical); }
.dl-type.zip { background: var(--gold); color: var(--primary-dark); }
.dl-type.img { background: var(--blue-medical); }
.dl-info { flex: 1; display: flex; flex-direction: column; }
.dl-title { font-family: var(--font-ui); font-weight: 600; font-size: 15px; line-height: 1.3; }
.dl-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-soft); margin-top: 2px; }
.dl-dl { color: var(--gray-soft); flex: none; transition: color .25s ease, transform .25s ease; }
.dl-tile:hover .dl-dl { color: var(--gold); transform: translateY(2px); }
.modal-success { text-align: center; }
.modal-success .check { width: 70px; height: 70px; margin: 0 auto 22px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--accent-deep); }
.modal-error { color: #c0392b; font-size: 13px; margin-top: 10px; display: none; }

/* ============================================================
   VISIONNEUSE PLEIN ÉCRAN (lightbox)
   ============================================================ */
.lightbox {
    position: fixed; inset: 0; z-index: 3000; background: rgba(16,13,11,0.94);
    backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
    padding: 40px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lb-img {
    max-width: 86vw; max-height: 84vh; object-fit: contain; border-radius: 4px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.65); transform: scale(.96); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.lightbox.open .lb-img { transform: scale(1); }
.lb-empty { color: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.lb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.lb-arrow:hover { background: var(--gold); color: var(--primary-dark); border-color: var(--gold); }
.lb-arrow svg { width: 26px; height: 26px; }
.lb-arrow.prev { left: 28px; } .lb-arrow.next { right: 28px; }
.lb-close {
    position: absolute; top: 24px; right: 26px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); color: #fff; cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease;
}
.lb-close:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); }
@media (max-width: 560px) {
    .lb-arrow { width: 46px; height: 46px; }
    .lb-arrow.prev { left: 10px; } .lb-arrow.next { right: 10px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .nav { display: none; }
    .burger { display: block; }
    .vision .wrap { grid-template-columns: 1fr; }
    .vision-media .slot { height: 380px; }
    .proto-grid { grid-template-columns: 1fr; }
    .med-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
    .steps::before { display: none; }
    .step-panel.active, .modal-parcours .step-panel.active { grid-template-columns: 1fr; }
    .step-photo { min-height: 240px; }
    .modal-parcours .step-photo { min-height: 220px; }
    .tem-grid { grid-template-columns: 1fr; }
    .bottom-grid { grid-template-columns: 1fr; }
    .proto-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .proto-gallery .slot:nth-child(1) { grid-row: auto; height: 200px; }
}
@media (max-width: 560px) {
    .med-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .cal-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
    .cal-action { text-align: left; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .proto-gallery { grid-template-columns: 1fr; }
    .modal-scrim { --scrim-pad: 14px; }
    .modal { padding: 32px 24px; }
    /* Le pied des modales reste affiché en permanence : à cette largeur « Praticien
       précédent » passait sur deux lignes et mangeait 35 px de lecture. Le mot est
       retiré de l'affichage mais reste dans le nom accessible du bouton. */
    .fiche-nav .fn-long {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}

/* ============================================================
   IMAGES DE PRODUCTION : remplacent le composant <image-slot> du proto.
   .slot = conteneur (dimensionné par les règles ci-dessus, ex .vision-media .slot),
   .slot-img = la vraie <img> qui remplit ce conteneur.
   ============================================================ */
.slot { display: block; overflow: hidden; }
.slot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-slide .slot { cursor: zoom-in; }            /* clic → lightbox */
.logo-card .slot-img { object-fit: contain; padding: 6px; }
/* Praticiens : recadrage vers le haut (garde les visages) */
.med-card .slot-img { object-position: top center; }

/* Cartes praticiens = boutons « Consulter la fiche » (design v2) */
.med-open { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0; font: inherit; color: inherit; }
.med-open .med-cta {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-soft);
    transition: color .25s ease, gap .25s ease;
}
.med-open:hover .med-cta, .med-open:focus-visible .med-cta { color: var(--gold); gap: 13px; }
.med-open:hover .med-name { color: var(--accent-deep); }
/* Toute la carte est cliquable, pas seulement « Consulter la fiche » : le bouton
   s'étire sur l'article entier via son ::after. Il reste le seul élément
   focusable, donc un seul arrêt au clavier et un seul nom accessible. */
.med-open::after { content: ''; position: absolute; inset: 0; border-radius: 4px; }
.med-card:hover .med-name { color: var(--accent-deep); }
.med-card:hover .med-cta { color: var(--gold); gap: 13px; }
.med-card .slot-img { transition: transform .4s ease; }
.med-card:hover .slot-img { transform: scale(1.04); }
/* Le halo de focus entoure la carte entière, pas le seul bloc de texte. */
.med-open:focus-visible { outline: none; }
.med-open:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .med-card .slot-img { transition: none; } .med-card:hover .slot-img { transform: none; } }

/* Section vision : poster vidéo cliquable (design v2) */
.video-poster {
    position: relative; display: block; width: 100%; padding: 0; border: none; cursor: pointer;
    background: #0d0b0a; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.video-poster img { width: 100%; height: 540px; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease; filter: grayscale(0.1) contrast(1.02); }
.video-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,11,10,0) 40%, rgba(13,11,10,0.55) 100%); transition: opacity .4s ease; }
.video-poster:hover img { transform: scale(1.04); }
.video-poster .play-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3;
    width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.16); backdrop-filter: blur(3px);
    border: 1.5px solid rgba(255,255,255,0.65); display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.video-poster .play-badge svg { width: 34px; height: 34px; margin-left: 4px; }
.video-poster:hover .play-badge, .video-poster:focus-visible .play-badge { background: var(--gold); color: var(--primary-dark); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.08); }
.video-poster .play-badge::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); animation: pulseRing 2.6s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.video-poster .video-label {
    position: absolute; left: 18px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.video-poster .video-dur { font-weight: 400; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; }
.video-poster:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .video-poster .play-badge::before { animation: none; } }

/* Modale vidéo (16/9) */
.video-scrim { background: rgba(10,8,7,0.9); }
.video-box { position: relative; width: min(1100px, 92vw, 153vh); aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.6); transform: scale(.97); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.video-scrim.open .video-box { transform: none; }
.video-box video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.video-box .close { position: absolute; top: 14px; right: 14px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; font-size: 19px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease; }
.video-box .close:hover { background: var(--gold); color: var(--primary-dark); transform: rotate(90deg); }
.video-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: linear-gradient(rgba(13,11,10,0.55), rgba(13,11,10,0.78)); }
.video-fallback[hidden] { display: none; }   /* l'attribut hidden doit primer sur display:flex */
.video-fallback p { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 3vw, 28px); color: #fff; }
.video-fallback span { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.video-fallback b { color: var(--gold-bright); }

/* Modale fiche praticien (design v2) */
/* Défilement des modales à en-tête pleine largeur.
   « padding: 0 » impose « overflow: hidden » pour que le visuel soit rogné par les
   coins arrondis, mais cela écrasait aussi le « overflow-y: auto » de .modal : dès
   que la fiche dépassait la hauteur de l'écran, elle était tronquée sans aucun moyen
   de la faire défiler. La modale devient donc une colonne flex dont seul le corps
   défile ; le bouton de fermeture et la navigation entre fiches restent à portée. */
.modal.modal-medecin { max-width: 840px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal-medecin .fiche-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-medecin .fiche-nav { flex: none; }
.modal-medecin .close { background: rgba(255,255,255,0.85); z-index: 6; }
.fiche-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.fiche-photo { position: relative; min-height: 380px; background: var(--gray-light); display: flex; align-items: center; justify-content: center; }
.fiche-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fiche-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gray-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.fiche-ordre { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(20,17,15,0.78); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; padding: 5px 10px; border-radius: 2px; }
.fiche-cv { padding: clamp(28px, 3.5vw, 44px); }
.fiche-cv .eyebrow { margin-bottom: 12px; }
.fiche-cv h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 4px; }
.fiche-role { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-soft); margin-bottom: 18px; }
.fiche-bio { font-size: 15.5px; color: var(--gray-medium); line-height: 1.7; margin-bottom: 22px; }
.fiche-bio p + p { margin-top: 0.85em; }
.fiche-block { padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 22px; }
.fiche-block h4 { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px; }
.fiche-block ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fiche-block li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--primary-dark); line-height: 1.45; }
.fiche-block li::before { content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.fiche-cite { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--accent-deep); line-height: 1.5; }
.fiche-cite[hidden] { display: none; }
.fiche-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--cream); }
.fiche-nav button { font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; background: none; border: none; cursor: pointer; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 4px; transition: color .25s ease; }
.fiche-nav button:hover { color: var(--accent); }
.fiche-nav button svg { width: 18px; height: 18px; }
.fiche-count { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em; color: var(--gray-medium); }
.fiche-count b { color: var(--primary-dark); }
@media (max-width: 680px) {
    .video-poster img { height: 300px; }
    .fiche-grid { grid-template-columns: 1fr; }
    .fiche-photo { min-height: 260px; }
}

/* Parcours : montages portrait affichés ENTIERS (contain) sur fond sombre */
.modal-parcours .step-photo { background: var(--primary-dark); }
.modal-parcours .step-photo .slot-img { object-fit: contain; }
.slot .credit {                                       /* crédit photo discret */
    position: absolute; bottom: 6px; right: 8px; z-index: 2;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
    color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none;
}

/* Accessibilité : texte réservé aux technologies d'assistance */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Accessibilité : bouton présenté comme un lien, au fil du texte */
.linkbtn {
    background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

/* Accessibilité : lien d'évitement */
.skip-link {
    position: absolute; left: 8px; top: -48px; z-index: 200;
    background: var(--primary-dark); color: #fff; padding: 10px 16px; border-radius: 4px;
    font-family: var(--font-ui); font-weight: 600; text-decoration: none; transition: top .2s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--gold-bright); }

/* État de chargement du bouton d'envoi (contact.js) */
.btn.is-loading { opacity: .65; pointer-events: none; }

/* Honeypot anti-bot : hors écran (et pas display:none, que certains bots ignorent) */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Case de consentement RGPD */
.field-consent {
    display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px;
    font-family: var(--font-body); font-size: 13.5px; color: var(--gray-medium); line-height: 1.5; cursor: pointer;
}
.field-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.field-consent label { cursor: pointer; }
.field-consent a { color: var(--accent-deep); }

/* État « pas encore de date » du calendrier (avant rendu Google Calendar) */
.cal-empty { padding: 28px 4px; color: rgba(255,255,255,0.72); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.cal-empty a, .cal-empty .linkbtn { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

/* Liens légaux (bas de page) */
.legal-links { margin-top: 6px; }
.legal-links a { color: var(--gray-soft-dark); text-decoration: underline; }
.legal-links a:hover { color: var(--gold-bright); }

/* ============================================================
   CALENDRIER : ligne cliquable + fiche détaillée d'une date
   (lignes construites par assets/js/calendar.js)
   ============================================================ */

/* La ligne entière ouvre la fiche, sauf le lieu et les liens de la
   description, qui gardent leur propre destination. */
.cal-row.is-clickable { cursor: pointer; }

.cal-action { text-align: right; }
.cal-fiche {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 9px 14px;
    font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.58);
    background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.cal-row:hover .cal-fiche, .cal-fiche:hover, .cal-fiche:focus-visible {
    color: var(--gold-bright); border-color: rgba(212,175,55,0.55); background: rgba(212,175,55,0.08);
}
.cal-fiche:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.cal-fiche svg { transition: transform .25s ease; }
.cal-row:hover .cal-fiche svg { transform: translateX(3px); }

/* Description longue : hauteur bornée et fondue vers le bas. Le fondu est un
   masque, donc indépendant du fond (qui s'éclaircit au survol de la ligne).
   Le texte entier reste lisible dans la fiche. */
.cal-desc.is-clamped {
    max-height: calc(1.55em * 3);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* ---- Modale : fiche d'une date ---- */
.modal.modal-date { max-width: 620px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Même raison que la fiche praticien : l'en-tête sombre reste, le corps défile. */
.modal-date .date-head { flex: none; }
.modal-date .date-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-date .close { background: rgba(255,255,255,0.9); z-index: 6; }
.date-head {
    background: var(--primary-dark); color: var(--white);
    border-bottom: 3px solid var(--gold);
    padding: clamp(26px, 3.4vw, 38px) clamp(26px, 3.4vw, 44px) clamp(22px, 3vw, 30px);
}
.date-head .eyebrow { margin-bottom: 14px; padding-right: 44px; }
.date-when { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; }
.date-slot {
    margin-top: 10px; font-family: var(--font-mono); font-size: 15px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
}
.date-body { padding: clamp(26px, 3.4vw, 38px) clamp(26px, 3.4vw, 44px); }
.date-body h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 5px; }
.date-venue {
    font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gray-soft);
}
.date-block { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.date-block h4 {
    font-family: var(--font-mono); font-weight: 600; font-size: 12px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px;
}
/* Reprend la mise en forme de .cal-desc (p, ul, li, strong), en version fond clair */
.date-notes { margin-top: 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-medium); }
.date-notes b, .date-notes strong { color: var(--primary-dark); }
.date-notes a, .date-notes .cal-info { color: var(--accent-deep); }
.date-notes a:hover, .date-notes a:focus-visible { color: var(--primary-dark); }
.date-meta { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; font-size: 14.5px; }
.date-meta dt {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gray-soft); padding-top: 3px;
}
.date-meta dd { color: var(--primary-dark); line-height: 1.5; }
.date-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.date-actions .btn { width: auto; margin-top: 0; padding: 14px 24px; font-size: 13px; }

@media (max-width: 560px) {
    .cal-action { text-align: left; }
    .date-actions .btn { width: 100%; justify-content: center; }
}