/* Couche commune des deux exemples de Phil Darwin (03/10/2026, nuit) : animations de vivant.js, menu plein écran,
   bouton WhatsApp, pied de page avec plan du site, et blocs des nouvelles pages (Qui est Phil, entreprises,
   scène des élèves, offrir, guide gratuit, conseils). Chargé après le style de l'exemple et cours.css. */
.style-1 { --a: var(--or); --a-clair: var(--or-clair); --texte-2: var(--ivoire-2); --trait: var(--or-trait); --carte: var(--noir-2); --carte-2: var(--noir-3); --sur-a: var(--noir); --fond: var(--noir); --texte: var(--ivoire); }
.style-2 { --a: var(--jaune); --a-clair: var(--encre); --texte-2: var(--gris); --trait: rgba(18,18,18,.14); --carte: #ffffff; --carte-2: #f6f4ec; --sur-a: var(--encre); --fond: #fff; --texte: var(--encre); }

/* ---------- Animations de vivant.js ---------- */
.fil-scene { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; transform: scaleX(0); transform-origin: 0 50%; background: var(--a); pointer-events: none; }
.style-2 .fil-scene { height: 4px; background: var(--encre); }
.mm { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .1em; margin: -.06em -.04em -.1em; }
.mi { display: inline-block; will-change: transform; }
.px { translate: 0 var(--py, 0px); }
.at-photo, .pg-photo { overflow: visible; isolation: isolate; }
.velours { position: absolute; top: -2px; bottom: -2px; width: 51%; z-index: 3; pointer-events: none; border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 25%, transparent 70%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 3%, rgba(0,0,0,0) 8%, rgba(255,214,190,.1) 11%, rgba(0,0,0,0) 14%, rgba(0,0,0,.42) 19%), #6d1019; }
.velours::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--or) 0 2px, transparent 2px 6px); }
.velours.g { left: -1px; transform-origin: 0 0; }
.velours.d { right: -1px; transform-origin: 100% 0; }
.volet-jaune { position: absolute; inset: -3px; z-index: 3; border-radius: 24px; background: var(--jaune); border: 3px solid var(--encre); pointer-events: none; }
.at-photo .pastille-page { left: auto; right: -18px; bottom: -26px; width: 118px; height: 118px; z-index: 4; }
.at-photo .pastille-page b { font-size: 21px; }
.faisceaux { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.faisceaux span { position: absolute; top: -10%; width: 34vw; max-width: 460px; height: 130%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(240,212,138,.13), rgba(240,212,138,.03) 70%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: balaie 9s ease-in-out infinite alternate; }
.faisceaux span:first-child { left: 8%; --a1: -14deg; --a2: 10deg; }
.faisceaux span:last-child { right: 4%; --a1: 12deg; --a2: -9deg; animation-duration: 11s; animation-delay: -3s; }
@keyframes balaie { from { transform: rotate(var(--a1)); } to { transform: rotate(var(--a2)); } }
.at-ouverture, .pg-ouverture { position: relative; overflow: hidden; }
.at-ouverture > .wrap { position: relative; z-index: 1; }
.trait-jaune { position: relative; z-index: 0; }
.trait-jaune::before { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .06em; height: .36em; z-index: -1; background: var(--jaune); transform: scaleX(var(--trace, 1)); transform-origin: 0 50%; border-radius: 3px; }

/* Le bouton principal respire : reflet qui passe (exemple 1), petit coup d'épaule (exemple 2) */
.style-1 .btn.vivant::after, body:not(.style-2) .btn.vivant::after { animation: reflet 5.5s var(--ressort) infinite 2s; }
@keyframes reflet { 0%, 72% { left: -60%; } 92%, 100% { left: 130%; } }
.style-2 .btn.vivant { animation: epaule 6s ease-in-out infinite 3s; }
@keyframes epaule { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -2.5deg; } 92% { rotate: 2deg; } 95% { rotate: -1deg; } }

/* ---------- Menu plein écran ---------- */
.menu-bouton { display: none; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); background: transparent; color: inherit; font: 600 14px/1 var(--f-texte); cursor: pointer; }
.style-2 .menu-bouton { border: 2px solid var(--encre); border-radius: 12px; background: #fff; }
.menu-traits { display: grid; gap: 5px; width: 18px; }
.menu-traits i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ressort); }
.menu-bouton.ouvert .menu-traits i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-bouton.ouvert .menu-traits i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.ouverture .nav .menu-bouton { margin-left: auto; }
@media (max-width: 900px) { .menu-bouton { display: inline-flex; } .at-barre .at-marque { margin-right: auto; } }
@media (max-width: 420px) { .at-barre .at-essai { display: none; } .ouverture .nav .nav-essai { display: none; } }
.menu-ouvert .menu-bouton { position: relative; z-index: 130; }
.menu-plein { position: fixed; inset: 0; z-index: 125; overflow-y: auto; padding: 84px 22px calc(40px + env(safe-area-inset-bottom)); background: var(--fond); color: var(--texte); }
.style-1 .menu-plein, body:not(.style-2) .menu-plein { background: radial-gradient(ellipse at 50% 0%, #2a0a0d, #070605 65%); }
.style-2 .menu-plein { background: var(--jaune); }
.menu-dedans { max-width: 560px; margin: 0 auto; display: grid; gap: 26px; }
.menu-accueil { font: italic 500 40px/1 var(--f-titre); text-decoration: none; }
.style-2 .menu-accueil { font-style: normal; text-transform: uppercase; }
.menu-groupe p { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--a); }
.style-2 .menu-groupe p { color: var(--encre); opacity: .7; }
.menu-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-groupe a { display: block; padding: 9px 0; font: 500 24px/1.2 var(--f-titre); text-decoration: none; border-bottom: 1px solid var(--trait); }
.style-2 .menu-groupe a { font-weight: 400; text-transform: uppercase; border-bottom: 2px solid rgba(18,18,18,.18); }
.menu-essai { justify-self: start; }
.menu-ouvert .wa, .menu-ouvert .barre-mobile { display: none; }

/* ---------- Bouton WhatsApp ---------- */
.wa { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70; display: grid; justify-items: end; gap: 12px; transform: translateY(140%); opacity: 0; transition: transform .7s cubic-bezier(.3,1.5,.5,1), opacity .4s, bottom .5s var(--ressort); }
.wa.arrive { transform: none; opacity: 1; }
body:has(.barre-mobile.on) .wa { bottom: calc(88px + env(safe-area-inset-bottom)); }
.wa-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: #1fa855; color: #fff; font: 600 14.5px/1 var(--f-texte); cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.wa-bouton svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wa-bouton::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(31,168,85,.55); animation: appel 3.2s ease-out infinite 3s; pointer-events: none; }
.wa-bouton { position: relative; }
@keyframes appel { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(31,168,85,0); } }
.style-2 .wa-bouton { border: 2px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); }
@media (max-width: 520px) { .wa-texte { display: none; } .wa-bouton { width: 56px; padding: 0; justify-content: center; } }
.wa-panneau { width: min(320px, calc(100vw - 32px)); padding: 18px 18px 14px; border-radius: 18px; background: #fff; color: #161616; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.style-2 .wa-panneau { border: 2px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); }
.wa-titre { margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.wa-panneau p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; }
.wa-ecrire { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: #1fa855; color: #fff; font: 700 15px/1 var(--f-texte); cursor: pointer; }
.wa-panneau .wa-note { margin: 10px 0 0; font-size: 12px; color: #6a6a6a; }

/* ---------- Pied de page avec le plan du site ---------- */
.plan-pied { padding: clamp(40px, 6vw, 70px) 0 calc(30px + env(safe-area-inset-bottom)); }
.style-1 .plan-pied { border-top: 1px solid var(--or-trait); background: #050404; }
.style-2 .plan-pied { background: var(--encre); color: #d6d6d0; }
.plan-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.plan-cols > div:first-child p { margin: 10px 0 0; font-size: 14.5px; color: var(--texte-2); max-width: 32ch; }
.style-2 .plan-cols > div:first-child p { color: #b8b8b0; }
.plan-nom { font: italic 500 28px/1 var(--f-titre); text-decoration: none; color: inherit; }
.style-2 .plan-nom { font-style: normal; text-transform: uppercase; color: var(--jaune); }
/* 07/10/2026 : sur le fond noir du pied, les liens des réseaux prenaient l'encre noire (--a-clair) : invisibles */
.style-2 .plan-pied .reseaux a { color: var(--jaune); }
.plan-cols b { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--a); }
.plan-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plan-cols li a { display: inline-block; padding: 6px 0; font-size: 15px; color: inherit; text-decoration: none; opacity: .85; }
.plan-cols li a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.plan-bas { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--texte-2); }
.style-2 .plan-bas { border-color: rgba(255,255,255,.15); color: #9a9a92; }
@media (max-width: 900px) { .plan-cols { grid-template-columns: 1fr 1fr; } .plan-cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .plan-cols { grid-template-columns: 1fr; } }
.pied .plan-cols { margin-top: 10px; }

/* ---------- Blocs des nouvelles pages ---------- */
.pg-h1 { margin: 0; font: 500 clamp(38px, 5.6vw, 76px)/1.02 var(--f-titre); letter-spacing: -.01em; text-wrap: balance; }
.style-2 .pg-h1 { font-weight: 400; text-transform: uppercase; line-height: 1.04; }
.pg-texte p { font-size: 17.5px; line-height: 1.65; color: var(--texte-2); max-width: 62ch; }
.pg-texte p b, .pg-texte p strong { color: var(--texte); }
.pg-note { margin-top: 26px; padding: 14px 16px; border-radius: 12px; border: 1px dashed currentColor; font-size: 13.5px; opacity: .75; max-width: 70ch; }

/* Chiffres */
.pg-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.pg-chiffres div { padding: 26px 20px; text-align: center; }
.style-1 .pg-chiffres { border-block: 1px solid var(--or-trait); }
.style-1 .pg-chiffres div + div { border-left: 1px solid var(--or-trait); }
.style-2 .pg-chiffres { gap: 12px; }
.style-2 .pg-chiffres div { border: 2px solid var(--encre); border-radius: 18px; background: var(--jaune); }
.pg-chiffres dt { order: 2; margin-top: 8px; font-size: 14px; color: var(--texte-2); }
.style-2 .pg-chiffres dt { color: var(--encre); }
.pg-chiffres div { display: flex; flex-direction: column; }
.pg-chiffres dd { margin: 0; font: 500 clamp(40px, 5vw, 64px)/1 var(--f-titre); color: var(--a-clair); font-variant-numeric: tabular-nums; }
.style-2 .pg-chiffres dd { font-weight: 400; color: var(--encre); }
@media (max-width: 760px) { .pg-chiffres { grid-template-columns: 1fr 1fr; } .style-1 .pg-chiffres div:nth-child(3) { border-left: 0; } .style-1 .pg-chiffres div:nth-child(n+3) { border-top: 1px solid var(--or-trait); } }

/* Frise de vie */
.frise { position: relative; list-style: none; margin: 50px 0 0; padding: 0; }
.frise-ligne, .frise-plein { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.frise-ligne { background: var(--trait); }
.frise-plein { background: var(--a); transform-origin: 50% 0; }
.style-2 .frise-ligne { background: rgba(18,18,18,.15); width: 4px; margin-left: -2px; }
.style-2 .frise-plein { background: var(--encre); width: 4px; margin-left: -2px; }
.frise-etape { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; padding: 0 0 46px; }
.frise-etape:nth-child(even) .frise-carte { grid-column: 2; }
.frise-etape:nth-child(odd) .frise-carte { grid-column: 1; text-align: right; }
.frise-point { position: absolute; left: 50%; top: 18px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--fond); box-shadow: inset 0 0 0 2px var(--trait); transition: background .4s, box-shadow .4s, transform .5s var(--ressort); z-index: 1; }
.frise-etape.allume .frise-point { background: var(--a); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a) 22%, transparent); transform: scale(1.15); }
.style-2 .frise-point { box-shadow: inset 0 0 0 3px var(--encre); }
.style-2 .frise-etape.allume .frise-point { background: var(--jaune); box-shadow: inset 0 0 0 3px var(--encre), 0 0 0 5px #fff; }
.frise-carte { padding: 22px 24px; border-radius: 16px; background: var(--carte); }
.style-1 .frise-carte { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .frise-carte { border: 2px solid var(--encre); box-shadow: 6px 6px 0 var(--jaune); }
.frise-annee { display: block; font: 500 clamp(30px, 3.4vw, 44px)/1 var(--f-titre); color: var(--a-clair); }
.style-2 .frise-annee { font-weight: 400; color: var(--encre); }
.frise-carte h3 { margin: 8px 0 6px; font-size: 19px; line-height: 1.3; }
.frise-carte p { margin: 0; color: var(--texte-2); line-height: 1.55; }
.frise-carte .source { display: block; margin-top: 10px; font-size: 12.5px; opacity: .7; }
.frise-photo { margin: 14px 0 0; }
.frise-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
@media (max-width: 760px) {
  .frise-ligne, .frise-plein { left: 9px; }
  .frise-point { left: 9px; }
  .frise-etape { grid-template-columns: 1fr; padding-left: 36px; }
  .frise-etape:nth-child(n) .frise-carte { grid-column: 1; text-align: left; }
}

/* Grande citation */
.pg-citation { margin: 0; font: italic 500 clamp(28px, 3.6vw, 48px)/1.2 var(--f-titre); text-wrap: balance; }
.style-2 .pg-citation { font-style: normal; font-weight: 400; text-transform: uppercase; }
.pg-citation cite { display: block; margin-top: 16px; font: 500 14px/1.4 var(--f-texte); font-style: normal; text-transform: none; color: var(--texte-2); }

/* Cartes de formats (entreprises, offrir) */
.pg-cartes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pg-cartes li { position: relative; padding: 28px 26px; border-radius: 20px; background: var(--carte); display: grid; gap: 10px; align-content: start; }
.style-1 .pg-cartes li { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .pg-cartes li { border: 2px solid var(--encre); }
.style-2 .pg-cartes li:nth-child(odd) { background: var(--jaune); }
.pg-cartes .n { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--a); }
.style-2 .pg-cartes .n { color: var(--encre); }
.pg-cartes h3 { margin: 0; font: 500 26px/1.15 var(--f-titre); }
.style-2 .pg-cartes h3 { font-weight: 400; text-transform: uppercase; }
.pg-cartes p { margin: 0; color: var(--texte-2); }
.style-2 .pg-cartes li:nth-child(odd) p { color: var(--encre-2); }
.pg-cartes .meta { font-size: 14px; font-weight: 600; }
@media (max-width: 760px) { .pg-cartes { grid-template-columns: 1fr; } }

/* Programme en modules (entreprises) */
.modules { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: m; display: grid; gap: 12px; }
.modules li { counter-increment: m; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 20px 22px; border-radius: 16px; background: var(--carte); }
.style-1 .modules li { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .modules li { border: 2px solid var(--encre); }
.modules li::before { content: counter(m, decimal-leading-zero); grid-row: span 2; font: 500 34px/1 var(--f-titre); color: var(--a); }
.style-2 .modules li::before { color: var(--encre); background: var(--jaune); padding: 6px 8px; border-radius: 10px; height: max-content; }
.modules b { font-size: 18px; }
.modules span { color: var(--texte-2); }

/* Formulaire de demande */
.pg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--carte); }
.style-1 .pg-form { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .pg-form { border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--jaune); }
.pg-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.pg-form input, .pg-form select, .pg-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; font: 400 16px/1.3 var(--f-texte); color: inherit; }
.style-1 .pg-form input, .style-1 .pg-form select, .style-1 .pg-form textarea { background: #0b0907; border: 1px solid var(--or-trait); }
.style-2 .pg-form input, .style-2 .pg-form select, .style-2 .pg-form textarea { background: #fff; border: 2px solid var(--encre); }
.pg-form .plein { grid-column: 1 / -1; }
.pg-form .case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; }
.pg-form .case input { width: 22px; min-height: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--a); }
@media (max-width: 620px) { .pg-form { grid-template-columns: 1fr; } }

/* Billetterie : plan de salle (21st.dev « Seat Selection », 7757) et billet (« Admit One Ticket », 22433) */
.billetterie { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); align-items: start; margin-top: 34px; }
@media (max-width: 900px) { .billetterie { grid-template-columns: 1fr; } }
.choix-dates { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.choix-dates button { min-height: 48px; padding: 10px 16px; border-radius: 12px; font: 600 14.5px/1.25 var(--f-texte); text-align: left; cursor: pointer; background: var(--carte); color: inherit; border: 1px solid var(--trait); }
.style-2 .choix-dates button { border: 2px solid var(--encre); }
.choix-dates button[aria-pressed="true"] { background: var(--a); color: var(--sur-a); border-color: var(--a); }
.style-2 .choix-dates button[aria-pressed="true"] { border-color: var(--encre); }
.choix-dates small { display: block; font-weight: 400; opacity: .8; }
.salle { padding: 22px 16px 18px; border-radius: 20px; background: var(--carte); overflow-x: auto; }
.style-1 .salle { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .salle { border: 2px solid var(--encre); }
.salle-scene { margin: 0 auto 22px; width: 82%; padding: 9px 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #6d1019, #3a060b); color: var(--or-clair); }
.style-2 .salle-scene { background: var(--encre); color: var(--jaune); }
.rangs { display: grid; gap: 7px; justify-content: center; min-width: 300px; }
.rang { display: flex; gap: 6px; align-items: center; justify-content: center; }
.rang .lettre { width: 16px; font-size: 11px; font-weight: 700; opacity: .6; text-align: center; }
.rang .allee { width: 12px; }
.siege { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px 7px 4px 4px; cursor: pointer; background: color-mix(in srgb, var(--a) 28%, transparent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); transition: transform .25s var(--ressort), background .2s; }
.style-2 .siege { background: #fff; box-shadow: inset 0 0 0 2px var(--encre); }
.siege:hover:not(:disabled) { transform: translateY(-3px); }
.siege:disabled { cursor: not-allowed; background: rgba(128,128,128,.28); box-shadow: none; }
.style-2 .siege:disabled { background: #cfcfc8; box-shadow: none; }
.siege[aria-pressed="true"] { background: var(--a); transform: scale(1.12); }
.style-2 .siege[aria-pressed="true"] { background: var(--jaune); box-shadow: inset 0 0 0 2px var(--encre), 2px 2px 0 var(--encre); }
@media (max-width: 420px) { .siege { width: 22px; height: 22px; } .rang { gap: 4px; } }
.salle-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--texte-2); }
.salle-legende i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 4px; }
.billet { position: relative; display: grid; grid-template-columns: 1fr auto; border-radius: 18px; overflow: hidden; transform-style: preserve-3d; transform: perspective(900px); will-change: transform; }
.style-1 .billet { background: linear-gradient(135deg, #f3ece0, #e2d4ba); color: #1a120a; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.style-2 .billet { background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); }
.billet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: soft-light; }
.billet-corps { padding: 22px 22px 20px; display: grid; gap: 6px; }
.billet-corps .petit-titre { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.billet-corps h3 { margin: 0; font: 500 30px/1.05 var(--f-titre); }
.style-2 .billet-corps h3 { font-weight: 400; text-transform: uppercase; }
.billet-corps dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 14px; }
.billet-corps dt { opacity: .65; }
.billet-corps dd { margin: 0; font-weight: 700; }
.billet-talon { display: grid; place-items: center; width: 92px; padding: 14px 8px; border-left: 2px dashed currentColor; text-align: center; position: relative; }
.billet-talon::before, .billet-talon::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--fond); }
.billet-talon::before { top: -11px; } .billet-talon::after { bottom: -11px; }
.billet-talon b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.billet-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 0; font-size: 15px; }
.billet-total b { font: 500 34px/1 var(--f-titre); }
.billet-zone .btn { width: 100%; margin-top: 16px; }

/* Carte cadeau qui se retourne (idée 21st.dev « Cards Shader Effect », 18536, refaite en CSS 3D) */
.cadeau-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: 34px; }
@media (max-width: 900px) { .cadeau-zone { grid-template-columns: 1fr; } }
.carte-cadeau { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1.586; margin: 0 auto; perspective: 1200px; cursor: pointer; }
.cc-tour { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, 1.3, .4, 1); }
.carte-cadeau.retournee .cc-tour { transform: rotateY(180deg); }
.cc-face { position: absolute; inset: 0; padding: 22px 24px; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; align-content: space-between; overflow: hidden; }
.cc-dos { transform: rotateY(180deg); }
.style-1 .cc-face { background: radial-gradient(ellipse at 20% 0%, #8a1622, #3a060b 70%); color: var(--ivoire); box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(240,212,138,.5); }
.style-1 .cc-dos { background: linear-gradient(135deg, #f3ece0, #e2d4ba); color: #1a120a; }
.style-2 .cc-face { background: var(--encre); color: #fff; border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--jaune); }
.style-2 .cc-dos { background: var(--jaune); color: var(--encre); }
.cc-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.35), transparent 45%); mix-blend-mode: soft-light; }
.cc-marque { font: italic 500 30px/1 var(--f-titre); }
.style-2 .cc-marque { font-style: normal; text-transform: uppercase; color: var(--jaune); }
.cc-quoi { font: 500 clamp(22px, 2.6vw, 30px)/1.1 var(--f-titre); }
.style-2 .cc-quoi { font-weight: 400; text-transform: uppercase; }
.cc-bas { display: flex; justify-content: space-between; align-items: end; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.cc-montant { font: 500 34px/1 var(--f-titre); letter-spacing: 0; text-transform: none; opacity: 1; }
.cc-pour { font: 500 26px/1.1 var(--f-titre); }
.cc-mot { margin: 0; font-size: 15.5px; line-height: 1.45; font-style: italic; max-height: 6.5em; overflow: hidden; }
.cc-aide { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--texte-2); }
.choix-cadeau { display: grid; gap: 10px; margin: 0 0 18px; }
.choix-cadeau button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; border-radius: 14px; background: var(--carte); color: inherit; font: 600 15.5px/1.3 var(--f-texte); text-align: left; cursor: pointer; border: 1px solid var(--trait); }
.style-2 .choix-cadeau button { border: 2px solid var(--encre); }
.choix-cadeau button[aria-pressed="true"] { border-color: var(--a); box-shadow: inset 0 0 0 2px var(--a); }
.style-2 .choix-cadeau button[aria-pressed="true"] { background: var(--jaune); box-shadow: 4px 4px 0 var(--encre); }
.choix-cadeau b { font: 500 22px/1 var(--f-titre); white-space: nowrap; }
.noel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 20px 24px; border-radius: 18px; margin-top: 26px; }
.style-1 .noel { background: linear-gradient(90deg, #3a060b, #6d1019); box-shadow: inset 0 0 0 1px var(--or); }
.style-2 .noel { background: var(--encre); color: #fff; box-shadow: 6px 6px 0 var(--jaune); }
.noel-compte { display: flex; gap: 10px; }
.noel-compte span { display: grid; justify-items: center; min-width: 62px; padding: 8px 6px; border-radius: 10px; background: rgba(0,0,0,.3); }
.noel-compte b { font: 500 28px/1 var(--f-titre); font-variant-numeric: tabular-nums; }
.noel-compte small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.noel p { margin: 0; flex: 1 1 220px; }

/* Le livre du guide gratuit */
.livre-zone { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 860px) { .livre-zone { grid-template-columns: 1fr; } }
.livre { position: relative; width: min(300px, 70vw); aspect-ratio: 3 / 4.1; margin: 20px auto; perspective: 1400px; }
.livre-objet { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(6deg); transition: transform .9s var(--ressort); animation: flotte 6s ease-in-out infinite; }
.livre:hover .livre-objet { transform: rotateY(-8deg) rotateX(2deg); }
@keyframes flotte { 50% { translate: 0 -10px; } }
.livre-couv { position: absolute; inset: 0; padding: 26px 22px; border-radius: 4px 12px 12px 4px; display: grid; align-content: space-between; transform: translateZ(14px); overflow: hidden; }
.livre-dos { position: absolute; top: 0; bottom: 0; left: 0; width: 28px; transform: rotateY(-90deg) translateZ(0) translateX(-14px); transform-origin: left; }
.livre-pages { position: absolute; top: 6px; bottom: 6px; right: 0; width: 26px; transform: rotateY(90deg) translateZ(-12px); transform-origin: right; background: repeating-linear-gradient(90deg, #f4efe4 0 2px, #ddd4c3 2px 3px); }
.style-1 .livre-couv { background: radial-gradient(ellipse at 30% 0%, #8a1622, #2a0508 75%); color: var(--ivoire); box-shadow: 30px 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(240,212,138,.4); }
.style-1 .livre-dos { background: #2a0508; }
.style-2 .livre-couv { background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); box-shadow: 14px 14px 0 var(--encre); }
.style-2 .livre-dos { background: var(--encre); }
.livre-couv .sur { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.livre-couv h3 { margin: 0; font: 500 30px/1.08 var(--f-titre); }
.style-2 .livre-couv h3 { font-weight: 400; text-transform: uppercase; font-size: 32px; }
.livre-couv .n5 { font: italic 500 92px/1 var(--f-titre); color: var(--or); }
.style-2 .livre-couv .n5 { font-style: normal; font-weight: 400; color: var(--encre); }
.livre-couv .auteur { font-size: 13px; letter-spacing: .1em; }

/* Articles de conseil */
.art-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .art-grille { grid-template-columns: 1fr; } }
.art-sommaire { position: sticky; top: 90px; padding: 20px; border-radius: 16px; background: var(--carte); font-size: 14px; }
.style-1 .art-sommaire { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .art-sommaire { border: 2px solid var(--encre); }
.art-sommaire p { margin: 0 0 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--a); }
.style-2 .art-sommaire p { color: var(--encre); }
.art-sommaire ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.art-sommaire a { display: inline-block; padding: 3px 0; color: var(--texte-2); text-decoration: none; }
.art-sommaire a.ici { color: var(--texte); font-weight: 700; }
@media (max-width: 900px) { .art-sommaire { position: static; } .art-sommaire ol { grid-template-columns: 1fr; } }
.art-corps { max-width: 720px; }
.art-corps > p, .art-corps li { font-size: 18px; line-height: 1.7; color: var(--texte-2); }
.art-corps > p b, .art-corps li b { color: var(--texte); }
.art-chapeau { font-size: 20px !important; color: var(--texte) !important; }
.art-section { scroll-margin-top: 90px; margin-top: 44px; padding-top: 6px; }
.art-h2 { margin: 0 0 12px; font: 500 clamp(26px, 3vw, 36px)/1.15 var(--f-titre); }
.style-2 .art-h2 { font-weight: 400; text-transform: uppercase; }
.art-num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; font: 600 16px/1 var(--f-texte); background: var(--a); color: var(--sur-a); }
.style-2 .art-num { border-radius: 12px; border: 2px solid var(--encre); background: var(--jaune); box-shadow: 3px 3px 0 var(--encre); }
.art-section p { margin: 0 0 12px; font-size: 18px; line-height: 1.7; color: var(--texte-2); }
.art-essai { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 16px !important; background: var(--carte-2); }
.style-1 .art-essai { border-left: 3px solid var(--or); }
.style-2 .art-essai { border: 2px solid var(--encre); background: #fff7cf; }
.art-essai b { color: var(--texte); }
.pg-encadre { margin: 46px 0; padding: clamp(22px, 3vw, 34px); border-radius: 20px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.style-1 .pg-encadre { background: radial-gradient(ellipse at 0% 0%, #3a060b, var(--noir-2) 70%); box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .pg-encadre { background: var(--jaune); border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); }
.pg-encadre img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; }
.pg-encadre h3 { margin: 0 0 6px; font: 500 26px/1.15 var(--f-titre); }
.style-2 .pg-encadre h3 { font-weight: 400; text-transform: uppercase; }
.pg-encadre p { margin: 0 0 14px; color: var(--texte-2); }
.style-2 .pg-encadre p { color: var(--encre-2); }
@media (max-width: 560px) { .pg-encadre { grid-template-columns: 1fr; } .pg-encadre img { width: 84px; height: 84px; } }

/* Petites retouches des accueils */
.lien-plus { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; color: var(--a-clair); text-underline-offset: 5px; }
.style-2 .lien-plus { color: var(--encre); }
.guide-accroche { margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .faisceaux span, .btn.vivant, .btn.vivant::after, .wa-bouton::before, .livre-objet { animation: none !important; }
  .cc-tour, .wa { transition: none; }
}
.frise-liste { list-style: none; margin: 0; padding: 0; }

/* Cibles d'au moins 44 px au doigt (loi UX 2), sur les liens et petits boutons déjà présents */
.lien-or, .lien-plus, .lien, .at-ariane a, .marque { display: inline-flex; align-items: center; min-height: 44px; }
.petit-btn { min-height: 44px; }
.selecteur button { min-height: 44px; }

/* Photos des nouvelles pages hors ouverture : jamais étirées */
.pg-photo { margin: 0; position: relative; }
.pg-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.style-1 .pg-photo img { border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px var(--or-trait); }
.style-2 .pg-photo img { border-radius: 24px; border: 3px solid var(--encre); box-shadow: 10px 10px 0 var(--jaune); }
@media (max-width: 760px) { .pg-photo:not(.at-photo) img { aspect-ratio: 4 / 3; } }

/* Billetterie au téléphone : tout tient dans l'écran */
.billetterie > *, .cadeau-zone > * { min-width: 0; }
.salle-legende .l-libre { background: color-mix(in srgb, var(--a) 28%, transparent); }
.style-2 .salle-legende .l-libre { background: #fff; box-shadow: inset 0 0 0 2px var(--encre); }
.salle-legende .l-choix { background: var(--a); }
.style-2 .salle-legende .l-choix { box-shadow: inset 0 0 0 2px var(--encre); }
.salle-legende .l-pris { background: rgba(128,128,128,.35); }
@media (max-width: 480px) {
  .salle { padding: 18px 8px 14px; }
  .rangs { min-width: 0; }
  .siege { width: 19px; height: 21px; border-radius: 6px 6px 3px 3px; }
  .rang { gap: 3px; }
  .rang .lettre { width: 11px; font-size: 10px; }
  .rang .allee { width: 8px; }
}

/* Corrections du contrôle du 03/10 nuit : titres sans débord latéral, liens au doigt de 44 px */
.mm { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.at-marque, .plan-nom { display: inline-flex; align-items: center; min-height: 44px; }
.art-sommaire a, .plan-cols li a, .menu-groupe a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; }
.art-sommaire ol { gap: 0; }
@media (max-width: 900px) { .cadeau-zone > div:last-child { order: -1; } }
.rideau-photo { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: 6px; }
.rideau-photo .velours { top: 0; bottom: 0; border-radius: 0; }
.menu-fermer { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait); background: transparent; color: inherit; font: 600 14px/1 var(--f-texte); cursor: pointer; }
.menu-fermer span { font-size: 22px; line-height: 1; }
.style-2 .menu-fermer { border: 2px solid var(--encre); border-radius: 12px; background: #fff; }
.menu-plein { clip-path: circle(0% at 92% 4%); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
.menu-plein.ouvert { clip-path: circle(150% at 92% 4%); }
@media (prefers-reduced-motion: reduce) { .menu-plein { transition: none; } }
/* Exemple 1 : siège libre = contour or, siège pris = plein sombre, ton choix = or plein */
.style-1 .siege { background: transparent; box-shadow: inset 0 0 0 1.5px var(--or); }
.style-1 .siege:disabled { background: #2b2622; box-shadow: none; }
.style-1 .siege[aria-pressed="true"] { background: var(--or); box-shadow: 0 0 0 2px rgba(212,166,74,.35); }
.style-1 .salle-legende .l-libre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--or); }
.style-1 .salle-legende .l-pris { background: #2b2622; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* Sommaire repliable : fermé au téléphone, ouvert sur ordinateur (pages.js) */
.art-sommaire summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--a); }
.style-2 .art-sommaire summary { color: var(--encre); }
.art-sommaire summary::-webkit-details-marker { display: none; }
.art-sommaire summary span { letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--texte-2); }
.art-sommaire summary::after { content: "+"; font-size: 20px; line-height: 1; transition: rotate .3s; }
.art-sommaire details[open] summary::after { rotate: 45deg; }
.art-sommaire details[open] summary { margin-bottom: 8px; }
@media (min-width: 761px) { .frise-etape + .frise-etape { margin-top: -70px; } .frise-etape { padding-bottom: 30px; } }
.style-2 .art-essai { color: var(--encre-2); }
@media (max-width: 760px) { .at-photo .pastille-page { right: 6px; bottom: -22px; width: 104px; height: 104px; } .at-photo .pastille-page b { font-size: 19px; } }
/* Cartes cliquables en entier */
.carte-lien { cursor: pointer; }
.pg-cartes li.carte-lien, .pg-encadre.carte-lien { transition: translate .35s var(--ressort), box-shadow .35s; }
.pg-cartes li.carte-lien:hover, .pg-encadre.carte-lien:hover { translate: 0 -4px; }
.pg-cartes .lien-plus { margin-top: 4px; }
/* Petit test : retour à la question précédente, réponse déjà donnée marquée */
.quiz-retour { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0 4px; border: 0; background: none; color: inherit; font: 600 15px/1 var(--f-texte); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; opacity: .85; }
.quiz-retour:hover { opacity: 1; }
.quiz-r button.deja { box-shadow: inset 0 0 0 2px var(--a); }
.style-2 .quiz-r button.deja { box-shadow: inset 0 0 0 3px var(--encre); background: var(--jaune-2); }
/* Bouton « Retour » en haut des pages intérieures */
.pg-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 6px; padding: 0 2px; border: 0; background: none; color: inherit; font: 600 15px/1 var(--f-texte); cursor: pointer; }
.pg-retour:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Plus d'animation sur l'exemple 1 (03/10, 23 h 45) */
.ouverture .pastille-hero { position: absolute; top: auto; right: clamp(16px, 5vw, 70px); bottom: clamp(84px, 13vh, 130px); width: 132px; height: 132px; z-index: 6; text-decoration: none; transition: scale .4s var(--ressort); }
.ouverture .pastille-hero:hover { scale: 1.08; }
.ouverture .pastille-hero svg { animation-duration: 9s; }
.ouverture .pastille-hero b { font-size: 22px; }
@media (max-width: 760px) { .ouverture .pastille-hero { width: 96px; height: 96px; right: 14px; bottom: auto; top: 118px; } .ouverture .pastille-hero b { font-size: 16px; } .ouverture .pastille-hero text { font-size: 15px; } }
.bande-or.bande-inverse { transform: rotate(1.4deg) scaleX(1.04); }
body.style-1 .spectacle .affiche img { animation: flotte 6s ease-in-out infinite; }
body.style-1 .formules, body.style-1 .pros, body.style-1 .agenda { overflow: hidden; }
body.style-1 .formules > .wrap, body.style-1 .pros > .wrap, body.style-1 .agenda > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ouverture .pastille-hero svg, body.style-1 .spectacle .affiche img { animation: none; } }
@media (min-width: 761px) { .ouverture .pastille-hero { bottom: auto; top: clamp(110px, 17vh, 170px); right: clamp(24px, 5vw, 80px); } }

/* Retours du 04/10 : affiche avec titre réécrit, bande d'annonce, entracte */
.spectacle .affiche { background: #000; }
.affiche-titre { display: flex; align-items: baseline; justify-content: center; gap: .32em; padding: 6px 14px 18px; background: #000; color: #fff; font: 800 clamp(46px, 5.6vw, 74px)/.9 var(--f-texte); text-transform: uppercase; letter-spacing: -.02em; }
.affiche-titre i { font-style: normal; font-size: .52em; letter-spacing: .08em; color: var(--or-clair); }
.annonce-defile { display: block; overflow: hidden; text-decoration: none; position: relative; z-index: 7; }
.annonce-defile .piste { display: flex; width: max-content; padding: 9px 0; animation: defile 26s linear infinite; }
.annonce-defile span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font: 600 12.5px/1 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; }
.annonce-defile span::after { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; }
.style-1 .annonce-defile { background: linear-gradient(90deg, #3a060b, #6d1019 50%, #3a060b); color: var(--or-clair); border-bottom: 1px solid var(--or); }
.style-2 .annonce-defile { background: var(--jaune); color: var(--encre); border-bottom: 2px solid var(--encre); }
.entracte { position: relative; overflow: hidden; padding: clamp(46px, 8vw, 100px) 0 clamp(40px, 6vw, 70px); text-align: center; }
.entracte-ligne { margin: 0; white-space: nowrap; display: flex; justify-content: center; gap: .5em; will-change: transform; }
.entracte .l1 { gap: .7em; font: italic 500 clamp(54px, 9vw, 140px)/1 var(--f-titre); }
.entracte .l1 span { white-space: nowrap; }
.entracte .l2 { margin-top: 10px; font: italic 500 clamp(30px, 4.6vw, 64px)/1.1 var(--f-titre); }
.entracte .l2 a { color: inherit; text-decoration: none; }
.entracte-fleche { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 26px; border-radius: 50%; text-decoration: none; font-size: 22px; animation: rebondit 1.8s ease-in-out infinite; }
@keyframes rebondit { 50% { translate: 0 8px; } }
.entracte-p1 { background: radial-gradient(ellipse at 50% 120%, #4a0910, var(--noir) 70%); border-block: 1px solid var(--or-trait); }
.entracte-p1 .l1 { color: transparent; -webkit-text-stroke: 1px rgba(212,166,74,.7); }
.entracte-p1 .l2 { color: var(--ivoire); }
.entracte-p1 .entracte-fleche { color: var(--or-clair); box-shadow: inset 0 0 0 1px var(--or); }
.entracte-p2 { background: var(--encre); color: #fff; }
.entracte-p2 .l1 { font: 400 clamp(58px, 10vw, 150px)/1 var(--f-titre); text-transform: uppercase; color: var(--jaune); }
.entracte-p2 .l2 { font: 400 clamp(32px, 5vw, 70px)/1.05 var(--f-titre); text-transform: uppercase; }
.entracte-p2 .entracte-fleche { background: var(--jaune); color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .entracte-fleche, .annonce-defile .piste { animation: none; } }
.entracte .l1 { justify-content: flex-start; padding-left: 5vw; }
@media (max-width: 759px) { .entracte .l2 { white-space: normal; padding: 0 16px; text-wrap: balance; } }

/* ===== Ajouté le 06/10/2026 (ancien presse.css, fusionné ici pour charger un fichier de moins) ===== */
/* Couche « dossier de presse » des deux exemples de Phil Darwin (06/10/2026).
   Sections nées des vrais documents de Phil : les grands moments, les deux lieux d'ateliers, la tournée, les médias,
   le cinéma, les chiffres, et la page « Dossier de presse » avec sa visionneuse.
   Les photos du dossier sont petites (300 à 800 points de large) : elles restent dans des cadres à leur taille, jamais en plein écran.
   Variables communes (pages.css) : --a, --a-clair, --texte, --texte-2, --trait, --carte, --carte-2, --sur-a, --fond. */

/* La bande dorée penchée de l'exemple 1 dépassait de 5 points à droite (déjà le cas en ligne avant le 06/10) :
   on la coupe au bord de l'écran, sans créer de zone de défilement (les éléments collants continuent de marcher). */
html { overflow-x: clip; }

/* ---------- Petits ajouts aux pages d'ateliers ---------- */
.fiche-liens { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 16px 0 0; }
.fiche-liens .lien-plus { margin-top: 0; min-height: 44px; }
.pg-citation.petite-citation { margin: 24px 0 4px; font-size: clamp(20px, 2.3vw, 27px); }
.affiche-flyer { margin: 0; width: min(100%, 420px); justify-self: center; rotate: 2deg; border-radius: 6px; overflow: hidden; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .6); }
.style-2 .affiche-flyer { border: 3px solid var(--encre); border-radius: 14px; box-shadow: 10px 10px 0 var(--encre); }
.affiche-flyer img { width: 100%; height: auto; }
.reseaux { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 10px 0 0; }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; font-weight: 600; color: var(--a-clair); text-underline-offset: 4px; }

/* ---------- Les grands moments (accueils) ---------- */
.moments { padding: clamp(80px, 10vw, 140px) 0; }
.moments-liste { list-style: none; margin: clamp(30px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(46px, 7vw, 96px); }
.moment { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.moment:nth-child(even) .moment-photo { order: 2; }
.moment-photo { position: relative; margin: 0; justify-self: center; width: min(100%, 380px); overflow: hidden; border-radius: 6px; }
.moment-photo.paysage { width: min(100%, 560px); }
.moment-photo img { display: block; width: 100%; height: auto; }
.style-1 .moment-photo { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--or-trait); }
.style-2 .moment-photo { border: 3px solid var(--encre); border-radius: 18px; box-shadow: 9px 9px 0 var(--encre); }
.moment-date { display: inline-block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--a-clair); }
.style-2 .moment-date { padding: 4px 9px; border-radius: 8px; background: var(--jaune); letter-spacing: .14em; }
.moment h3 { margin: 0 0 12px; font: 500 clamp(30px, 4vw, 52px)/1.05 var(--f-titre); }
.style-2 .moment h3 { font-weight: 400; text-transform: uppercase; }
.moment p { margin: 0; max-width: 46ch; color: var(--texte-2); font-size: 17px; }
.moment .source, .tournee .source, .cinema .source { display: block; margin-top: 14px; font-size: 12.5px; opacity: .7; }
.moment-cache { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.moment-cache .velours { top: 0; bottom: 0; border-radius: 0; }
@media (max-width: 760px) {
  .moment { grid-template-columns: 1fr; }
  .moment:nth-child(even) .moment-photo { order: 0; }
  .moment-photo { justify-self: start; }
}

/* photos qui se dévoilent au défilement (presse.js) : le rideau reste dans le cadre */
[data-revele] { position: relative; overflow: hidden; }
.medias .pg-photo, .distinction .pg-photo { width: min(100%, 400px); justify-self: center; }
.distinction .pg-photo img, .medias .pg-photo img { aspect-ratio: 4 / 5; }
.chiffres-note { margin: 14px 0 0; text-align: center; font-size: 12.5px; opacity: .7; }

/* ---------- Le spectacle (accueil 1) : un paragraphe de plus, tiré du dossier de presse ---------- */
.spectacle-plus { margin: 14px 0 0; max-width: 52ch; color: var(--texte-2); }

/* Espace pros de l'exemple 1 : le format « Atelier en entreprise » est un lien, son titre et sa phrase se collaient (déjà en ligne avant le 06/10) */
.style-1 .formats li > a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.style-1 .formats li > a:hover span { color: var(--or-clair); transform: translateX(8px); font-style: italic; }

/* ---------- Les chiffres (accueils) ---------- */
.chiffres-scene { padding: clamp(40px, 6vw, 70px) 0; }
.chiffres-scene .lien-or { margin-top: 0; min-height: 44px; display: inline-flex; align-items: center; }
.chiffres-scene .chiffres-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin: 18px 0 0; font-size: 13px; color: var(--texte-2); }
.chiffres-scene .lien-plus { margin-top: 0; min-height: 44px; }

/* ---------- Les deux lieux d'ateliers (accueils) ---------- */
.lieux-deux { display: grid; gap: 12px; position: relative; z-index: 1; }
/* l'affiche du bloc « lieu » ne flotte plus au défilement (vivant.js) : en descendant, elle recouvrait la carte du dimanche */
.lieu .affiche { translate: none !important; }
.lieu-carte { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: inherit; transition: translate .3s var(--ressort), border-color .3s; }
.lieu-carte b { font: 500 22px/1.15 var(--f-titre); }
.lieu-carte span:last-child { font-size: 14.5px; color: var(--texte-2); }
.lieu-carte .lieu-quand { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--a-clair); }
.style-1 .lieu-carte { border: 1px solid var(--or-trait); background: rgba(212, 166, 74, .05); }
.style-1 .lieu-carte:hover { border-color: var(--or); translate: 0 -3px; }
.style-2 .lieu-carte { border: 2px solid var(--encre); background: #fff; box-shadow: 5px 5px 0 var(--encre); }
.style-2 .lieu-carte b { font-weight: 400; text-transform: uppercase; }
.style-2 .lieu-carte:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--encre); }
.style-2 .lieu-carte .lieu-quand { display: inline-block; justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--jaune); color: var(--encre); letter-spacing: .12em; }
.lieu-carte .voir { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--a-clair); }
.lieux-deux .coches { margin-top: 6px; }

/* ---------- Qui est Phil : la tournée ---------- */
.pays { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.pays li { padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.style-1 .pays li { border: 1px solid var(--or-trait); color: var(--ivoire); }
.style-2 .pays li { border: 2px solid var(--encre); background: #fff; }
.style-2 .pays li:nth-child(3n+1) { background: var(--jaune); }
.salles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(30px, 4vw, 48px); }
.salles h3 { margin: 0 0 12px; font: 500 24px/1.1 var(--f-titre); }
.style-2 .salles h3 { font-weight: 400; text-transform: uppercase; }
.salles ul { list-style: none; margin: 0; padding: 0; }
.salles li { padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: 15.5px; }
.salles li small { display: block; font-size: 13px; color: var(--texte-2); }
@media (max-width: 860px) { .salles { grid-template-columns: 1fr; } }

/* ---------- Qui est Phil : les médias ---------- */
.medias-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.medias-liste li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.medias-liste b { font: 500 21px/1.2 var(--f-titre); }
.style-2 .medias-liste b { font-weight: 400; text-transform: uppercase; }
.medias-liste span { color: var(--texte-2); font-size: 15.5px; }
.medias .pg-photo, .tournee-photo { width: min(100%, 420px); justify-self: center; }

/* ---------- Qui est Phil : le cinéma ---------- */
.films { list-style: none; margin: clamp(26px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); align-items: start; }
.films figure { margin: 0 0 16px; overflow: hidden; border-radius: 6px; }
.style-1 .films figure { box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px var(--or-trait); }
.style-2 .films figure { border: 3px solid var(--encre); border-radius: 14px; box-shadow: 7px 7px 0 var(--encre); }
.films img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0%; }
.films h3 { margin: 4px 0 8px; font: 500 26px/1.1 var(--f-titre); }
.style-2 .films h3 { font-weight: 400; text-transform: uppercase; }
.films p { margin: 0; color: var(--texte-2); }
.films .films-texte { align-self: center; padding: 22px; border-radius: 14px; border: 1px dashed var(--trait); }
.cannes { margin: clamp(30px, 5vw, 56px) auto 0; max-width: 734px; }
.cannes img { display: block; width: 100%; height: auto; border-radius: 6px; }
.style-2 .cannes img { border: 3px solid var(--encre); border-radius: 14px; }
.cannes figcaption { margin-top: 10px; font-size: 13.5px; color: var(--texte-2); }
@media (max-width: 860px) { .films { grid-template-columns: 1fr 1fr; } .films .films-texte { grid-column: 1 / -1; } }
@media (max-width: 480px) { .films { grid-template-columns: 1fr; } .films figure { max-width: 360px; } }

/* ---------- Page « Dossier de presse » : les pages et la visionneuse ---------- */
.dp-grille { list-style: none; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.dp-grille button { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; }
.dp-grille img { display: block; width: 100%; height: auto; aspect-ratio: 764 / 1080; object-fit: cover; border-radius: 4px; transition: translate .35s var(--ressort), box-shadow .35s; }
.style-1 .dp-grille img { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px var(--or-trait); }
.style-2 .dp-grille img { border: 2px solid var(--encre); border-radius: 10px; }
.dp-grille button:hover img, .dp-grille button:focus-visible img { translate: 0 -6px; }
.style-2 .dp-grille button:hover img { box-shadow: 6px 6px 0 var(--encre); }
.dp-grille span { font-size: 13.5px; font-weight: 600; }
.dp-grille span small { display: block; font-weight: 400; color: var(--texte-2); }
@media (max-width: 1000px) { .dp-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dp-grille { grid-template-columns: 1fr 1fr; } }

.visionneuse { width: min(96vw, 620px); max-height: 96vh; padding: 46px 12px 12px; border: 0; border-radius: 16px; background: #0d0b09; color: #f3ece0; }
.visionneuse::backdrop { background: rgba(0, 0, 0, .82); }
.visionneuse figure { margin: 0; }
.visionneuse img { display: block; width: auto; max-width: 100%; max-height: calc(96vh - 150px); margin: 0 auto; border-radius: 6px; touch-action: pan-y; }
.visionneuse figcaption { margin-top: 10px; text-align: center; font-size: 14px; }
.v-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.v-nav button, .visionneuse .v-fermer { min-width: 48px; min-height: 48px; border: 1px solid rgba(243, 236, 224, .3); border-radius: 999px; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.visionneuse .v-fermer { position: absolute; top: 2px; right: 4px; min-width: 44px; min-height: 44px; border: 0; font-size: 28px; line-height: 1; }
.v-compte { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }

/* ---------- Mouvement réduit : tout reste visible, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .lieu-carte, .dp-grille img { transition: none; }
  .moment-cache { display: none; }
}

/* ----- Finition du 06/10 (détecteur impeccable) ----- */
/* les sources se lisent en minuscules : une ligne longue en capitales espacées se lit mal */
.moment .source, .tournee .source, .cinema .source, .medias .source, .distinction .source { text-transform: none; letter-spacing: .01em; font-weight: 400; }
/* exemple 1 : les deux lieux deviennent des lignes, pas des cadres dans le cadre de l'encart */
.style-1 .lieu .lieu-carte { padding: 14px 0; border: 0; border-top: 1px solid var(--or-trait); border-radius: 0; background: none; }
.style-1 .lieu .lieu-carte:hover { translate: 6px 0; }
/* exemple 2 : la phrase de fin des pages d'ateliers, en noir sur le jaune (le gris s'y lisait mal) */
.style-2 .at-final .chapo { color: var(--encre); }

/* 07/10 : Mayouya sans affiche, carte texte à côté de Lougah sur tablette */
@media (max-width: 860px) { .films .films-mayouya { grid-column: auto; } }
@media (max-width: 480px) { .films .films-mayouya { grid-column: 1 / -1; } }

/* Adresse d'agent dans le bas des pages (08/10/2026) */
.plan-bas a[data-agent], .plan-cols a[data-agent] { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }