/* Travel2World — design system v2 « carnet + cinéma » (12 octobre 2026)
   ---------------------------------------------------------------------------
   Briques réutilisables, toutes préfixées « cine- » (et « cn- » pour le carnet de tampons) :
     1. scènes de cinéma au défilement   .cine-scene  (data-cine="scene")
     2. pellicule horizontale            .cine-pellicule (data-cine="pellicule")
     3. photo vivante (Ken Burns)        .cine-photo  (data-cine="photo")
     4. vidéo de fond                    .cine-video  (data-cine="video")
     5. compteurs à rouleaux             .cine-compteur (data-cine="compteur")
     6. kit tactile                      .cine-presse, .cine-cta, data-cine="aimant", .cine-tampon
     7. carnet de tampons                .cn-bande, .cn-detail, .cn-annonce (carnet-progress.js)
   Mode d'emploi complet : .claude/outils/DESIGN-v2.md
   Règles de perf : on n'anime que transform et opacity ; pas de filter ni de backdrop-filter ;
   l'état par défaut est STATIQUE (sans JS, mouvement réduit) — cine.js pose data-cine-mode="css"
   (animations liées au défilement natives) ou "js" (secours : variables --p/--pc écrites par rAF). */

:root{
  --cine-nuit:#0b131c;--cine-encre:#12202f;--cine-creme:#f3ede2;--cine-saumon:#f6a27a;--cine-or:#f2b33d;
  --cine-tampon:#b4381a;--cine-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --cine-ressort:cubic-bezier(.34,1.56,.64,1);--cine-sortie:cubic-bezier(.16,1,.3,1);--cine-claque:cubic-bezier(.55,0,1,.45);
  --cine-barre:0px;--cine-g:max(20px,calc(50% - 608px))
}
html[data-theme=dark]{--cine-tampon:#f08a5d}
@media (max-width:760px){html.mc-barre-on{--cine-barre:74px}}

/* ======================================================= 1. SCÈNE DE CINÉMA */
.cine-scene{position:relative;isolation:isolate;background:var(--cine-nuit);color:var(--cine-creme)}
.cine-cadre{position:relative;overflow:hidden;min-height:min(88svh,780px);display:flex;flex-direction:column;justify-content:flex-end}
.cine-fond{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--cine-nuit)}
.cine-fond>img,.cine-fond>picture>img,.cine-fond>video{display:block;width:100%;height:100%;object-fit:cover}
.cine-fond>.cine-video{position:absolute;inset:0}
/* voile de lecture : un dégradé fixe (pas une tache décorative) qui assure le contraste du texte */
.cine-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,19,28,.15) 0%,rgba(11,19,28,0) 30%,rgba(11,19,28,.35) 58%,rgba(11,19,28,.88) 100%)}
.cine-voile-g{background:linear-gradient(90deg,rgba(11,19,28,.86) 0%,rgba(11,19,28,.55) 42%,rgba(11,19,28,.08) 75%)}
.cine-plans{list-style:none;margin:0;padding:clamp(90px,14vh,140px) var(--cine-g) calc(clamp(30px,7vh,72px) + var(--cine-barre));display:grid;gap:clamp(22px,4vh,40px)}
.cine-plan{max-width:min(34em,100%)}
.cine-plan h2,.cine-plan h3{color:var(--cine-creme);margin:0 0 .35em;font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.cine-plan h2 em,.cine-plan h3 em{color:var(--cine-saumon)!important}
.cine-plan p{margin:0 0 1em;color:#d5dbe3;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.55;max-width:32em}
.cine-clap{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--cine-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cine-or)}
.cine-clap:before{content:"";width:22px;height:14px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--cine-creme) 0 4px,transparent 4px 8px);opacity:.85}
.cine-main{font-family:var(--f-hand);font-weight:700;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.05;color:var(--cine-saumon);display:inline-block;transform:rotate(-2deg);margin-bottom:6px}
/* objets de premier plan (billet, étiquette…) */
.cine-objet{position:absolute;z-index:1;pointer-events:none;height:auto;max-width:none}
/* bandes de cinémascope et repères de plans : visibles seulement en mode animé */
.cine-bandes,.cine-repere{display:none}
.cine-source{position:absolute;right:14px;bottom:calc(10px + var(--cine-barre));z-index:2;margin:0;font-family:var(--cine-mono);font-size:.62rem;letter-spacing:.06em;color:rgba(243,237,226,.62);max-width:60%;text-align:right}
.cine-source a{color:inherit}

/* --- mode animé (posé par cine.js si le mouvement est autorisé) --- */
.cine-scene[data-cine-mode]{height:calc(var(--cine-len,3) * 100svh)}
.cine-scene[data-cine-mode] .cine-cadre{position:sticky;top:0;height:100svh;min-height:0}
.cine-scene[data-cine-mode] .cine-plans{position:absolute;inset:0;padding:0;display:block;pointer-events:none}
.cine-scene[data-cine-mode] .cine-plan{position:absolute;left:var(--cine-g);right:var(--cine-g);pointer-events:none;bottom:calc(clamp(34px,8vh,84px) + var(--cine-barre));opacity:0;will-change:transform,opacity}
.cine-scene[data-cine-mode] .cine-plan.is-haut{bottom:auto;top:clamp(96px,16vh,150px)}
.cine-scene[data-cine-mode] .cine-fond{will-change:transform}
.cine-scene[data-cine-mode] .cine-bandes{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.cine-scene[data-cine-mode] .cine-bandes:before,.cine-scene[data-cine-mode] .cine-bandes:after{content:"";position:absolute;left:0;right:0;height:clamp(22px,8.5vh,92px);background:var(--cine-nuit);transform:scaleY(0)}
.cine-scene[data-cine-mode] .cine-bandes:before{top:0;transform-origin:50% 0}
.cine-scene[data-cine-mode] .cine-bandes:after{bottom:0;transform-origin:50% 100%}
@media (max-width:760px){.cine-scene[data-cine-mode] .cine-bandes:before,.cine-scene[data-cine-mode] .cine-bandes:after{height:5svh}.cine-source{font-size:.56rem;max-width:80%}}
.cine-scene[data-cine-mode] .cine-repere{display:flex;gap:6px;position:absolute;left:var(--cine-g);top:clamp(92px,13vh,128px);z-index:2;pointer-events:none}
.cine-repere i{position:relative;display:block;width:30px;height:3px;border-radius:2px;background:rgba(243,237,226,.25);overflow:hidden}
.cine-repere i:after{content:"";position:absolute;inset:0;background:var(--cine-or);transform:scaleX(0);transform-origin:0 50%}
.cine-objet{will-change:transform}

/* animations natives liées au défilement */
@supports (animation-timeline:view()){
  .cine-scene[data-cine-mode=css]{view-timeline:--cine-sc block}
  .cine-scene[data-cine-mode=css] .cine-fond{animation:cine-dolly linear both;animation-timeline:--cine-sc;animation-range:cover 0% cover 100%}
  .cine-scene[data-cine-mode=css][data-cine-fond=travelling] .cine-fond{animation-name:cine-travelling}
  .cine-scene[data-cine-mode=css][data-cine-fond=plongee] .cine-fond{animation-name:cine-plongee}
  .cine-scene[data-cine-mode=css][data-cine-fond=fixe] .cine-fond{animation:none}
  .cine-scene[data-cine-mode=css] .cine-plan{animation:cine-plan linear both;animation-timeline:--cine-sc;animation-range:contain calc(var(--i,0) / var(--n,1) * 100%) contain calc((var(--i,0) + 1) / var(--n,1) * 100%)}
  .cine-scene[data-cine-mode=css] .cine-plan:first-child{animation-name:cine-plan-premier;animation-range:cover 0% contain calc(1 / var(--n,1) * 100%)}
  .cine-scene[data-cine-mode=css] .cine-plan:last-child{animation-name:cine-plan-dernier;animation-range:contain calc(var(--i,0) / var(--n,1) * 100%) cover 100%}
  .cine-scene[data-cine-mode=css] .cine-plan:only-child{animation-name:cine-plan-seul;animation-range:cover 0% cover 100%}
  .cine-scene[data-cine-mode=css] .cine-bandes:before,.cine-scene[data-cine-mode=css] .cine-bandes:after{animation:cine-bande linear both;animation-timeline:--cine-sc;animation-range:entry 70% contain 14%}
  .cine-scene[data-cine-mode=css] .cine-repere i:after{animation:cine-trait linear both;animation-timeline:--cine-sc;animation-range:contain calc(var(--i,0) / var(--n,1) * 100%) contain calc((var(--i,0) + 1) / var(--n,1) * 100%)}
  .cine-scene[data-cine-mode=css] .cine-objet{animation:cine-objet linear both;animation-timeline:--cine-sc;animation-range:cover 0% cover 100%}
}
@keyframes cine-dolly{from{transform:scale(1.16)}to{transform:scale(1.01)}}
@keyframes cine-travelling{from{transform:scale(1.12) translate3d(3.5%,0,0)}to{transform:scale(1.12) translate3d(-3.5%,0,0)}}
@keyframes cine-plongee{from{transform:scale(1.14) translate3d(0,-4%,0)}to{transform:scale(1.06) translate3d(0,3%,0)}}
@keyframes cine-plan{0%{opacity:0;transform:translate3d(2.6vw,0,0);pointer-events:none}1%{pointer-events:none}1.5%{opacity:1}2%{pointer-events:auto}32%{transform:translate3d(0,0,0)}98%{pointer-events:auto}98.5%{opacity:1}99%{pointer-events:none}100%{opacity:0;transform:translate3d(-.9vw,0,0);pointer-events:none}}
@keyframes cine-plan-premier{0%{opacity:1;transform:translate3d(0,0,0);pointer-events:auto}98%{pointer-events:auto}98.5%{opacity:1}99%{pointer-events:none}100%{opacity:0;transform:translate3d(-.9vw,0,0);pointer-events:none}}
@keyframes cine-plan-dernier{0%{opacity:0;transform:translate3d(2.6vw,0,0);pointer-events:none}1%{pointer-events:none}1.5%{opacity:1}2%{pointer-events:auto}32%,100%{opacity:1;transform:translate3d(0,0,0)}100%{pointer-events:auto}}
@keyframes cine-plan-seul{from,to{opacity:1;transform:none;pointer-events:auto}}
@keyframes cine-bande{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cine-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cine-objet{from{transform:translate3d(calc(var(--cine-x,0) * 1vw),calc(var(--cine-v,1) * 22svh),0) rotate(var(--cine-r,0deg))}to{transform:translate3d(calc(var(--cine-x,0) * -1vw),calc(var(--cine-v,1) * -22svh),0) rotate(calc(var(--cine-r,0deg) * -1))}}

/* secours JS (Safari < 26, Firefox) : cine.js écrit --p (phase collée, 0→1), --pc (traversée complète) et .is-on */
.cine-scene[data-cine-mode=js] .cine-fond{transform:scale(calc(1.16 - var(--pc,0) * .15))}
.cine-scene[data-cine-mode=js][data-cine-fond=travelling] .cine-fond{transform:scale(1.12) translate3d(calc(3.5% - var(--pc,0) * 7%),0,0)}
.cine-scene[data-cine-mode=js][data-cine-fond=plongee] .cine-fond{transform:scale(calc(1.14 - var(--pc,0) * .08)) translate3d(0,calc(-4% + var(--pc,0) * 7%),0)}
.cine-scene[data-cine-mode=js][data-cine-fond=fixe] .cine-fond{transform:none}
.cine-scene[data-cine-mode=js] .cine-plan{transform:translate3d(2.6vw,0,0);transition:opacity .14s linear,transform .5s var(--cine-sortie)}
.cine-scene[data-cine-mode=js] .cine-plan.is-on{opacity:1;transform:none;pointer-events:auto}
.cine-scene[data-cine-mode=js] .cine-plan.is-passe{transform:translate3d(-.9vw,0,0)}
.cine-scene[data-cine-mode=js] .cine-bandes:before,.cine-scene[data-cine-mode=js] .cine-bandes:after{transform:scaleY(clamp(0,calc((var(--pc,0) - .12) * 8),1))}
.cine-scene[data-cine-mode=js] .cine-repere i:after{transform:scaleX(clamp(0,calc(var(--p,0) * var(--n,1) - var(--i,0)),1))}
.cine-scene[data-cine-mode=js] .cine-objet{transform:translate3d(calc((.5 - var(--pc,0)) * var(--cine-x,0) * 2vw),calc((.5 - var(--pc,0)) * var(--cine-v,1) * 44svh),0) rotate(calc((.5 - var(--pc,0)) * 2 * var(--cine-r,0deg)))}

/* ============================================================ 2. PELLICULE */
.cine-pellicule{position:relative;background:var(--cine-nuit);color:var(--cine-creme);padding:clamp(48px,7vw,90px) 0}
.cine-pellicule-tete{width:100%;max-width:1280px;margin:0 auto clamp(18px,3vh,30px);padding:0 32px;box-sizing:border-box}
.cine-pellicule-tete h2{color:var(--cine-creme);margin:0 0 .3em;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.06}
.cine-pellicule-tete h2 em{color:var(--cine-saumon)!important}
.cine-pellicule-tete p{margin:0;color:#c9d0da;max-width:36em}
.cine-pellicule-bande{--perfo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Crect x='7' y='2' width='12' height='8' rx='2' fill='%23f3ede2' fill-opacity='.78'/%3E%3C/svg%3E");position:relative;list-style:none;margin:0;display:flex;gap:14px;padding:40px 32px 34px;background:#05090e;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;box-sizing:border-box}
.cine-pellicule-bande::-webkit-scrollbar{display:none}
.cine-pellicule-bande:before,.cine-pellicule-bande:after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--perfo) repeat-x 0 0;pointer-events:none}
.cine-pellicule-bande:before{top:7px}
.cine-pellicule-bande:after{bottom:9px}
.cine-image{position:relative;flex:none;width:min(68vw,460px);margin:0;scroll-snap-align:center}
.cine-image img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:3px;background:#1a2533}
.cine-image figcaption,.cine-legende{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:8px 0 0;font-size:.9rem;color:#d5dbe3}
.cine-legende>span,.cine-image figcaption>span{font-family:var(--cine-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6b4}
.cine-image figcaption b,.cine-legende b{font-family:var(--f-hand);font-weight:700;font-size:1.3rem;line-height:1;color:var(--cine-saumon)}
.cine-image[data-code]:after{content:attr(data-code);position:absolute;left:4px;top:-19px;line-height:1;font-family:var(--cine-mono);font-size:.56rem;letter-spacing:.2em;color:var(--cine-or);opacity:.8}
.cine-image a{color:inherit}
@media (max-width:760px){.cine-pellicule-tete{padding:0 20px}.cine-pellicule-bande{padding:40px 20px 34px;gap:10px}}

.cine-pellicule[data-cine-mode]{height:calc(100svh + var(--cine-course,0px));padding:0}
.cine-pellicule[data-cine-mode] .cine-pellicule-cadre{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--cine-barre);box-sizing:border-box}
.cine-pellicule[data-cine-mode] .cine-pellicule-bande{overflow:visible;width:max-content;scroll-snap-type:none;will-change:transform}
@supports (animation-timeline:view()){
  .cine-pellicule[data-cine-mode=css]{view-timeline:--cine-pel block}
  .cine-pellicule[data-cine-mode=css] .cine-pellicule-bande{animation:cine-bande-x linear both;animation-timeline:--cine-pel;animation-range:contain 0% contain 100%}
}
@keyframes cine-bande-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--cine-course,0px) * -1),0,0)}}
.cine-pellicule[data-cine-mode=js] .cine-pellicule-bande{transform:translate3d(calc(var(--p,0) * var(--cine-course,0px) * -1),0,0)}

/* ====================================================== 3. PHOTO VIVANTE */
.cine-photo{position:relative;overflow:hidden;background:var(--soft,#e9e0cf)}
.cine-photo>img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.cine-photo.is-vivante>img{animation:cine-kb-entre 24s cubic-bezier(.45,.05,.55,.95) infinite alternate both;animation-play-state:paused;will-change:transform}
.cine-photo.is-vivante[data-kb=sort]>img{animation-name:cine-kb-sort}
.cine-photo.is-vivante[data-kb=gauche]>img{animation-name:cine-kb-gauche}
.cine-photo.is-vivante[data-kb=droite]>img{animation-name:cine-kb-droite}
.cine-photo.is-vivante.is-vue>img{animation-play-state:running}
@keyframes cine-kb-entre{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}}
@keyframes cine-kb-sort{from{transform:scale(1.14) translate3d(1.2%,1%,0)}to{transform:scale(1.03) translate3d(0,0,0)}}
@keyframes cine-kb-gauche{from{transform:scale(1.1) translate3d(2.4%,0,0)}to{transform:scale(1.1) translate3d(-2.4%,0,0)}}
@keyframes cine-kb-droite{from{transform:scale(1.1) translate3d(-2.4%,0,0)}to{transform:scale(1.1) translate3d(2.4%,0,0)}}

/* ======================================================= 4. VIDÉO DE FOND */
.cine-video{position:relative;overflow:hidden;background:var(--cine-nuit)}
.cine-video>img,.cine-video>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cine-video>video{opacity:0;transition:opacity .35s linear}
.cine-video.is-lecture>video{opacity:1}
.cine-video-pause{position:absolute;right:var(--cine-pause-d,12px);bottom:var(--cine-pause-d,12px);z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid rgba(243,237,226,.55);border-radius:50%;background:rgba(11,19,28,.62);color:var(--cine-creme);cursor:pointer;transition:background-color .2s,border-color .2s}
.cine-video-pause svg{width:16px;height:16px;fill:currentColor}
.cine-video-pause:hover{background:var(--cine-nuit);border-color:var(--cine-creme)}
.cine-video-pause:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.cine-video-pause[hidden]{display:none}
.cine-scene .cine-video-pause{z-index:4;top:clamp(80px,12vh,116px);bottom:auto;right:var(--cine-g)}

/* ===================================================== 5. COMPTEURS À ROULEAUX */
.cine-compteur{position:relative;display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums}
.cine-compteur.is-roule>.cine-compteur-fin{color:transparent}
.cine-compteur-roues{position:absolute;inset:0;display:flex;pointer-events:none}
.cine-roue{position:relative;display:block;height:100%;overflow:hidden}
.cine-roue>span{display:block;will-change:transform}
.cine-roue>span>i,.cine-roue-fixe{display:block;height:1.2em;height:1lh;font-style:normal;text-align:center;white-space:pre}

/* ========================================================== 6. KIT TACTILE */
.cine-presse{--cine-ombre:var(--ink);box-shadow:3px 3px 0 var(--cine-ombre);transition:transform .14s ease,box-shadow .14s ease}
.cine-presse-chaud{--cine-ombre:var(--orange)}
@media (hover:hover) and (pointer:fine){.cine-presse:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--cine-ombre)}}
.cine-presse:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cine-ombre);transition-duration:.06s}
.cine-presse:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.cine-cta{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:6px 6px 6px 22px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:700 1rem/1.15 var(--f-body);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--orange);transition:transform .14s ease,box-shadow .14s ease,background-color .2s}
.cine-cta>b{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-size:1.08rem;transition:transform .32s var(--cine-ressort)}
.cine-cta-prix{font-family:var(--f-poster);font-weight:400;font-size:1.3rem;letter-spacing:.02em;color:var(--cine-or)}
@media (hover:hover) and (pointer:fine){.cine-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--orange)}.cine-cta:hover>b{transform:translateX(4px)}}
.cine-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--orange);transition-duration:.06s}
.cine-cta:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.cine-cta-clair{background:var(--cine-creme);color:#1b2433}
.cine-cta-clair .cine-cta-prix{color:#a83b17}
.cine-cta.in-cart>b,.cine-cta.in-cart{background-color:#2d7a4f}
html[data-theme=dark] .cine-cta:not(.cine-cta-clair){color:#1b2433}
html[data-theme=dark] .cine-cta:not(.cine-cta-clair) .cine-cta-prix{color:#a83b17}
html[data-theme=dark] .cine-cta>b{color:#1b2433}
[data-cine=aimant]{transition:translate .6s var(--cine-ressort)}
[data-cine=aimant].is-aimante{transition:translate .12s linear}

.cine-tampon{position:absolute;width:var(--cine-tampon-t,96px);height:var(--cine-tampon-t,96px);color:var(--cine-tampon);pointer-events:none;mix-blend-mode:multiply;opacity:.92;z-index:3}
.cine-tampon text{font-family:var(--f-poster);font-weight:400}
.cine-scene .cine-tampon,.cine-tampon.sur-sombre{mix-blend-mode:normal;color:#f08a5d}
html[data-theme=dark] .cine-tampon{mix-blend-mode:normal;opacity:.86}

/* ================================================= 7. CARNET DE TAMPONS (cn-) */
.cn-bande{--cn-t:26px;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px 6px 14px;border-radius:12px;background:#1b2433;color:var(--cine-creme);text-decoration:none;font-size:.8rem;line-height:1.1;box-shadow:0 0 0 1px rgba(243,237,226,.08),2px 2px 0 var(--orange);transition:transform .14s ease,box-shadow .14s ease;max-width:100%;box-sizing:border-box}
.cn-bande:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.cn-bande:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 1px rgba(243,237,226,.08),3px 3px 0 var(--orange)}}
.cn-bande:active{transform:translate(1px,1px);box-shadow:0 0 0 1px rgba(243,237,226,.08),1px 1px 0 var(--orange)}
.cn-tete{display:grid;gap:2px;flex:none}
.cn-tete b{font-family:var(--cine-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cine-or);font-weight:700}
.cn-compte{font-weight:600;white-space:nowrap}
.cn-n{font-family:var(--f-poster);font-weight:400;font-size:1.05rem;letter-spacing:.02em}
.cn-cases{display:flex;gap:4px;min-width:0}
.cn-case{position:relative;display:block;flex:none;width:var(--cn-t);height:var(--cn-t);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(243,237,226,.28);background:repeating-conic-gradient(rgba(243,237,226,.05) 0 10deg,transparent 10deg 20deg)}
.cn-case svg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);color:var(--cn-papier,#b4381a);opacity:0}
.cn-bande .cn-case svg,html[data-theme=dark] .cn-case svg{color:var(--cn-nuit,#f08a5d)}
.cn-case.on{background:none;box-shadow:none}
.cn-case.on svg{opacity:.95}
.cn-case text{font-family:var(--f-poster);font-weight:400}
.cn-plus{font-size:.72rem;color:#c9d0da;white-space:nowrap}
.cn-bande.is-thud{animation:cn-thud .22s ease-out}
@keyframes cn-thud{40%{transform:translateY(2px) rotate(-.4deg)}}
@media (max-width:420px){.cn-bande{--cn-t:21px;gap:9px;padding:5px 9px 5px 11px}.cn-cases{gap:2px}.cn-plus{display:none}}

/* variante détaillée (page profil, plan) */
.cn-detail{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:clamp(18px,2.4vw,28px)}
.cn-detail-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;margin-bottom:16px}
.cn-detail-tete h2,.cn-detail-tete h3{margin:0;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}
.cn-detail-tete p{margin:0;font-family:var(--cine-mono);font-size:.8rem;color:var(--muted)}
.cn-jauge{height:6px;border-radius:3px;background:var(--soft);overflow:hidden;margin-bottom:18px}
.cn-jauge i{display:block;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--cn-p,0));transition:transform .7s var(--cine-sortie)}
.cn-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.cn-liste li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1.5px dashed var(--line);border-radius:14px;min-height:72px}
.cn-liste li.on{border-style:solid;border-color:var(--ink);background:var(--bg)}
.cn-liste .cn-case{--cn-t:56px;box-shadow:inset 0 0 0 1.5px var(--line);background:none}
.cn-liste li.on .cn-case{box-shadow:none}
.cn-liste b{display:block;font-size:.95rem;line-height:1.2}
.cn-liste small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35;margin-top:2px}
.cn-liste a{display:inline-block;margin-top:4px;white-space:nowrap;color:var(--ink);font-weight:700;text-decoration-color:var(--orange);text-underline-offset:3px;font-size:.84rem}
.cn-liste a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.cn-liste li.cn-suivant{border-color:var(--orange);border-style:solid}
.cn-liste li.cn-suivant:after{content:"prochain";position:absolute;right:10px;top:-11px;font-family:var(--f-hand);font-size:1.05rem;color:#fff;background:var(--orange);padding:0 .45em;border-radius:6px;transform:rotate(-3deg)}
html[data-theme=dark] .cn-liste li.cn-suivant:after{color:#1b2433}
.cn-badges{margin:16px 0 0;font-size:.88rem;color:var(--muted)}
.cn-badges a{color:var(--ink);font-weight:700;text-decoration-color:var(--orange);text-underline-offset:3px}

/* annonce d'un nouveau tampon : courte (2,6 s), près de l'entrée du carnet (sous la puce de l'en-tête, au-dessus de
   l'onglet Carnet du téléphone), × pour fermer ; carnet-progress.js choisit la place (jamais sur un bouton, un lien,
   un champ, une barre fixe ni une fenêtre ouverte) et la retire si la page défile. */
.cn-annonce{position:fixed;z-index:10003;display:flex;align-items:stretch;width:max-content;max-width:min(300px,calc(100vw - 16px));box-sizing:border-box;background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--orange);opacity:0;transform:translate3d(0,8px,0)}
.cn-annonce-haut{transform:translate3d(0,-8px,0)}
.cn-annonce.cn-mesure{pointer-events:none}
.cn-annonce.is-la{opacity:1;transform:none;transition:opacity .16s ease-out,transform .42s var(--cine-ressort)}
.cn-annonce.is-part{opacity:0;transition:opacity .2s ease-in}
.cn-annonce:after{content:"";position:absolute;left:calc(var(--cn-fleche,50%) - 6px);width:11px;height:11px;background:var(--surface);border:1.5px solid var(--ink);transform:rotate(45deg)}
.cn-annonce-bas:after{bottom:-7px;border-top:0;border-left:0}
.cn-annonce-haut:after{top:-7px;border-bottom:0;border-right:0}
.cn-annonce-sans-fleche:after{display:none}
.cn-annonce-lien{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:7px 4px 7px 9px;color:inherit;text-decoration:none;border-radius:12px 0 0 12px}
.cn-annonce .cn-case{--cn-t:42px;box-shadow:inset 0 0 0 1.5px var(--line);background:none}
.cn-annonce .cn-case.on{box-shadow:none}
.cn-annonce small{display:block;font-family:var(--f-hand);font-weight:700;font-size:1.02rem;line-height:1;color:var(--orange-ink)}
.cn-annonce b{display:block;font-size:.84rem;line-height:1.2;margin-top:2px}
.cn-annonce em{font-style:normal;font-family:var(--cine-mono);font-size:.7rem;color:var(--muted);white-space:nowrap}
.cn-annonce-x{flex:none;width:44px;min-height:44px;margin:0;padding:0;border:0;border-left:1.5px dashed var(--line);background:none;color:var(--muted);font:400 1.3rem/1 var(--f-body);cursor:pointer;border-radius:0 12px 12px 0}
@media (hover:hover){.cn-annonce-x:hover{color:var(--ink)}}

/* puce du carnet dans l'en-tête (ordinateur) : le bouton passeport porte « 3/8 » au-dessus de 8 petites cases */
.hd-cn{display:none}
@media (min-width:761px){
  #app>header .t2w-pass-nav.hd-carnet,.t2w-pass-nav.hd-carnet{display:inline-flex!important;align-items:center;gap:7px;width:auto!important;height:42px;padding:0 10px 0 8px;background:#1b2433!important;color:var(--cine-creme,#f3ede2)!important;border:1px solid #1b2433!important}
  .t2w-pass-nav.hd-carnet:hover{border-color:var(--orange)!important}
  .t2w-pass-nav.hd-carnet:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  .t2w-pass-nav.hd-carnet>svg{width:19px;height:19px;flex:none}
  .t2w-pass-nav.hd-carnet>em{display:none}
  .hd-carnet .hd-cn{display:grid;gap:3px;justify-items:start}
  .hd-cn-n{font-family:var(--f-poster);font-weight:400;font-size:.84rem;line-height:1;letter-spacing:.04em;color:var(--cine-or,#f5c35f)}
  .hd-cn-cases{display:flex;gap:2px}
  .hd-cn-c{display:block;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(243,237,226,.38)}
  .hd-cn-c.on{background:var(--cn-nuit,#f08a5d);box-shadow:none}
  /* la ligne d'en-tête garde sa place : un peu moins d'air entre les boutons, conteneur à peine plus large */
  #app>header .nav-end{gap:4px}
}
@media (min-width:1366px){#app>header>.container.nav{max-width:1320px}}
html[data-theme=dark] .t2w-pass-nav.hd-carnet{background:#0f1622!important;border-color:rgba(243,237,226,.18)!important}

/* le carnet en tête du passeport (globi-plus.js) */
.gp-carnet{margin:0 0 20px;box-shadow:3px 3px 0 var(--ink);padding:16px}
.gp-carnet .cn-liste{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px}
.gp-carnet .cn-liste li{min-height:60px;padding:8px 10px;grid-template-columns:44px minmax(0,1fr)}
.gp-carnet .cn-liste .cn-case{--cn-t:44px}
.gp-carnet-lien{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.gp-h{margin:4px 0 6px;font-size:1.05rem;line-height:1.2}

/* compteur de l'onglet « Carnet » (barre du bas du téléphone) et le tampon qui tombe dessus */
.mc-barre .mc-cn{position:absolute;top:3px;left:calc(50% + 4px);z-index:3;min-width:24px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--orange);color:#fff;font:400 .62rem/15px var(--f-poster);letter-spacing:.04em;text-align:center;box-shadow:0 0 0 2px var(--papier,var(--surface));pointer-events:none}
.mc-barre .mc-cn[hidden]{display:none}
.mc-barre a.on .mc-cn{background:#fff;color:var(--orange-ink,#b4381a);box-shadow:0 0 0 2px var(--orange)}
.mc-barre .mc-cn-tampon{position:absolute;top:2px;left:50%;z-index:2;width:34px;height:34px;margin-left:-17px;color:var(--cn-papier,#b4381a);pointer-events:none}
html[data-theme=dark] .mc-barre .mc-cn-tampon{color:var(--cn-nuit,#f08a5d)}
.mc-barre .mc-cn-tampon svg{display:block;width:100%;height:100%}
.mc-barre .mc-cn-tampon text{font-family:var(--f-poster);font-weight:400}

/* ================================================ figer pendant le pré-rendu */
/* site.min.css met animation-duration:0s sur tout #app tant que html[data-pre] est là :
   on rend leur durée aux animations liées au défilement (elles ne dépendent pas du temps)
   et à la photo vivante (sinon elle saute de la fin au début quand data-pre s'en va). */
html[data-pre] #app [data-cine-mode=css] .cine-fond,html[data-pre] #app [data-cine-mode=css] .cine-plan,html[data-pre] #app [data-cine-mode=css] .cine-objet,html[data-pre] #app [data-cine-mode=css] .cine-repere i:after,html[data-pre] #app [data-cine-mode=css] .cine-bandes:before,html[data-pre] #app [data-cine-mode=css] .cine-bandes:after,html[data-pre] #app [data-cine-mode=css] .cine-pellicule-bande{animation-duration:auto!important}
html[data-pre] #app .cine-photo.is-vivante>img{animation-duration:24s!important}

/* ==================================================== mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .cine-scene[data-cine-mode],.cine-pellicule[data-cine-mode]{height:auto}
  .cine-scene[data-cine-mode] .cine-cadre,.cine-pellicule[data-cine-mode] .cine-pellicule-cadre{position:relative;height:auto}
  .cine-scene[data-cine-mode] .cine-cadre{min-height:min(88svh,780px)}
  .cine-scene[data-cine-mode] .cine-plans{position:static;padding:clamp(90px,14vh,140px) var(--cine-g) calc(clamp(30px,7vh,72px) + var(--cine-barre));display:grid}
  .cine-scene[data-cine-mode] .cine-plan{position:static;opacity:1;transform:none;animation:none}
  .cine-scene .cine-fond,.cine-scene .cine-objet,.cine-pellicule-bande,.cine-photo>img{animation:none!important;transform:none!important}
  .cine-scene .cine-bandes,.cine-scene .cine-repere{display:none!important}
  .cine-pellicule[data-cine-mode] .cine-pellicule-bande{overflow-x:auto;width:auto;scroll-snap-type:x mandatory}
  .cine-video>video{display:none}
  .cine-presse,.cine-cta,.cine-cta>b,[data-cine=aimant],.cn-bande,.cn-jauge i{transition:none}
  .cn-annonce,.cn-annonce.is-la,.cn-annonce.is-part{transition:none}
}
@media print{.cine-video>video,.cine-video-pause,.cn-annonce{display:none!important}.cine-scene[data-cine-mode]{height:auto}}