/* =====================================================================
   Createamweb — page Identité visuelle (ex-Charte graphique, 2026) « une identité, déclinée partout »
   Animations : js/caw-charte.js · contenu : tools/charte_page.py
   Héros (table de travail) · intro + pipette · charte qui se feuillette · supports 3D · carrousel · processus
   ===================================================================== */
.ch{--navy:#0d1b2a;--panel:#10233a;--card:#fff;--tq:#22a6b3;--tq2:#7ed6df;--ice:#eafbfc;--light:#dff9fb;--paper:#f4fbfb;--blue:#3c6382;--mute:#3a7690;
  --fh:"Francois One",futura-pt-condensed,"Arial Narrow",sans-serif;--fb:futura-pt,Jost,Helvetica,Arial,sans-serif;
  --fm:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--ease:cubic-bezier(.16,1,.3,1);
  --ftk:#111;--ftb:#2598cf;--ftr:#aa4c59;--cream:#f6f1e7;
  display:block;position:relative;font-family:var(--fb);color:var(--blue)}
.ch *,.ch *::before,.ch *::after{box-sizing:border-box}
:where(.ch) button{font:inherit}
.ch a,.ch button{-webkit-tap-highlight-color:transparent}
.ch-wrap{width:calc(100% - 80px);max-width:1240px;margin:0 auto}
.ch-h1{margin:0;font:400 65px/.92 futura-pt-condensed,"Francois One","Arial Narrow",sans-serif;text-transform:uppercase;color:#fff;text-wrap:balance}
.ch-h2{margin:0;font:400 clamp(40px,5vw,80px)/.94 var(--fh);text-transform:uppercase;letter-spacing:.005em;color:var(--blue);text-wrap:balance}
.ch-h3{margin:0;font:400 clamp(21px,1.7vw,26px)/1.05 var(--fh);text-transform:uppercase;letter-spacing:.01em;color:var(--blue)}
.ch-h3--big{font-size:clamp(30px,3vw,44px)}
.ch-p{margin:20px 0 0;max-width:60ch;font:400 16.5px/1.7 var(--fb);color:var(--blue)}
.ch-p--big{font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--navy)}
.ch .caw-eyebrow-line{font:500 13px/1.3 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ch-sec-head{margin-bottom:clamp(36px,4.5vw,64px)}
.ch-sec-head--c{text-align:center}
.ch-sec-head--c .caw-eyebrow-line{justify-content:center}
.ch-sec-head--c .ch-p{margin-left:auto;margin-right:auto}
.ch-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ch .caw-btn:active{transform:scale(.97)}
.ch-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.ch-rv.is-in{opacity:1;transform:none}
/* logo du festival (calques partagés, couleurs par variables) */
/* logos du Carnaval de Dunkerque (images détourées) + versions blanche et noire */
.ch-cl{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.ch-white{filter:brightness(0) invert(1)}
.ch-black{filter:brightness(0)}
/* fond à pois du dépliant d'origine */
.ch-dots{background:#fbf8ee radial-gradient(circle,rgba(190,203,92,.32) 0 30%,transparent 32%) 0 0/16px 16px}
.ch-l{display:block;width:var(--w);height:5px;margin-top:6px;border-radius:3px;background:rgba(17,17,17,.16)}
.ch-l--w{background:rgba(255,255,255,.55)}

/* ---------------------------------------------------------------- 1. héros : la table de travail */
html.ch-wait .ch-plane{visibility:hidden;animation:ch-show 0s 3.5s forwards}
@keyframes ch-show{to{visibility:visible}}
.ch-hero-text > *{animation:ch-rise .9s cubic-bezier(.16,1,.3,1) both}
.ch-hero-text > :nth-child(2){animation-delay:.07s}.ch-hero-text > :nth-child(3){animation-delay:.14s}.ch-hero-text > :nth-child(4){animation-delay:.21s}
@keyframes ch-rise{from{transform:translateY(22px)}to{transform:none}}
.ch-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(100svh,1000px);
  padding:clamp(130px,14vh,170px) 0 clamp(80px,10vh,120px);background:var(--navy);color:var(--ice)}
.ch-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(rgba(126,214,223,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(126,214,223,.06) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 66% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 66% 50%,#000 30%,transparent 80%)}
.ch-hero::after{content:"";position:absolute;width:60vw;height:60vw;right:-12vw;top:50%;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(170,76,89,.16),rgba(37,152,207,.10) 40%,transparent 64%)}
.ch-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,60px);align-items:center}
.ch-hero .caw-eyebrow-line{color:var(--tq2)}
.ch-lead{margin:24px 0 0;max-width:44ch;font:400 clamp(16px,1.25vw,18.5px)/1.6 var(--fb);color:rgba(234,251,252,.86)}
.ch-hero .caw-btn--ghost{color:var(--ice)!important}
.ch-desk{--k:.86;position:relative;margin:0;height:calc(500px * var(--k));display:flex;flex-direction:column;align-items:center}
.ch-desk-in{position:relative;flex:none;width:600px;height:500px;transform:scale(var(--k));transform-origin:50% 0;perspective:2000px;perspective-origin:50% 20%}
.ch-plane{position:absolute;left:0;top:40px;width:600px;height:440px;transform-style:preserve-3d;transform:rotateX(calc(52deg + var(--px,0) * 1deg)) rotateZ(calc(-34deg + var(--pz,0) * 1deg))}
/* tapis de découpe sous les supports */
.ch-plane::before{content:"";position:absolute;inset:-26px;border-radius:22px;background:#10283b;
  background-image:linear-gradient(rgba(126,214,223,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(126,214,223,.13) 1px,transparent 1px);background-size:22px 22px;
  box-shadow:0 0 0 2px rgba(126,214,223,.16),0 60px 80px -30px rgba(0,0,0,.6)}
.ch-item{position:absolute;transform-style:preserve-3d;transform:translateZ(var(--z,0)) rotate(var(--r,0deg));cursor:default;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 22px 26px -14px rgba(0,0,0,.6)}
.ch-poster{width:170px;height:240px;display:flex;flex-direction:column;background:#fff;padding:7px;box-shadow:inset 0 0 0 4px #ee8a2e,0 1px 0 rgba(0,0,0,.08),0 22px 26px -14px rgba(0,0,0,.6)}
.ch-poster-in{flex:1;display:grid;place-items:center;padding:10px;background:#fbf8ee radial-gradient(circle,rgba(190,203,92,.35) 0 30%,transparent 32%) 0 0/12px 12px}
.ch-poster-in .ch-cl{width:100%}
.ch-poster-band{padding:8px 10px 10px;background:linear-gradient(90deg,#ed1c24 0 20%,#f68712 20% 40%,#4ac2b4 40% 60%,#59c134 60% 80%,#b95ab4 80%)}
.ch-flyer{width:124px;height:176px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;background:#f68712}
.ch-flyer .ch-cl{width:100%;margin-bottom:14px}
.ch-flyer .ch-l{align-self:stretch}
.ch-card{width:112px;height:66px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:3px;background:#fbf8ee radial-gradient(circle,rgba(190,203,92,.35) 0 30%,transparent 32%) 0 0/9px 9px}
.ch-card .ch-cl{height:46px;width:auto;flex:none}
.ch-card-l{flex:1}
.ch-card--back{justify-content:center;background:#ed1c24}
.ch-card--back .ch-cl{width:92%;height:auto}
.ch-ticket{width:140px;height:52px;display:flex;border-radius:7px;overflow:hidden;background:#231f20}
.ch-ticket-stub{display:grid;place-items:center;width:48px;background:#4ac2b4;border-right:2px dashed #231f20}
.ch-ticket-stub .ch-cl{height:34px;width:auto}
.ch-ticket-main{flex:1;padding:8px 10px}
.ch-ticket-main .ch-l{height:4px;margin-top:5px}
/* tote bag et téléphone : de l'épaisseur (tranches empilées) et des anses dressées */
.ch-tote,.ch-phone{background:none;box-shadow:none}
.ch-tote{width:152px;height:184px}
.ch-tote-s{position:absolute;inset:0;border-radius:6px 6px 16px 16px;background:#cdbd9c;transform:translateZ(calc(var(--d) * 1px))}
.ch-tote-s:first-child{box-shadow:0 26px 30px -14px rgba(0,0,0,.6)}
.ch-tote-top{position:absolute;inset:0;display:grid;place-items:center;padding:30px 14px 18px;border-radius:6px 6px 16px 16px;transform:translateZ(12px);
  background:radial-gradient(ellipse 70% 60% at 50% 42%,#f6eedd,#e6d8bb 72%,#d6c5a3);box-shadow:inset 0 -12px 18px rgba(90,70,40,.18);outline:1.5px dashed rgba(120,96,60,.35);outline-offset:-7px}
.ch-tote-top .ch-cl{width:100%}
/* anses : deux sangles en arceau posées sur la table, cousues sur le haut du sac (celle de devant redescend du sac vers la table) */
.ch-strap{position:absolute;left:50%;bottom:100%;width:64px;height:62px;border:8px solid #cdb88e;border-bottom:0;border-radius:32px 32px 4px 4px / 46px 46px 4px 4px;transform-origin:50% 100%}
.ch-strap--b{margin-left:-42px;margin-bottom:-6px;border-color:#b29c72;transform:translateZ(1px) rotate(-5deg)}
.ch-strap--a{margin-left:-22px;margin-bottom:-12px;border-color:#dcc89f;transform:translateZ(12.5px) rotateX(11deg) rotate(4deg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.ch-strap--a::before,.ch-strap--a::after{content:"";position:absolute;bottom:-1px;width:10px;height:13px;border:1.5px solid rgba(110,88,52,.6);
  background:linear-gradient(45deg,transparent 44%,rgba(110,88,52,.55) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,rgba(110,88,52,.55) 44% 56%,transparent 56%)}
.ch-strap--a::before{left:-9px}.ch-strap--a::after{right:-9px}
.ch-phone{width:84px;height:170px}
.ch-phone-s{position:absolute;inset:0;border-radius:16px;background:#091420;transform:translateZ(calc(var(--d) * 1px))}
.ch-phone-s:first-child{box-shadow:0 26px 30px -14px rgba(0,0,0,.7)}
.ch-phone-s:nth-child(5){background:#3b5068}
.ch-phone-top{position:absolute;inset:0;padding:22px 7px 10px;border-radius:16px;transform:translateZ(9px);background:#0d1b2a;box-shadow:inset 0 0 0 2px #2c4a66}
.ch-phone-post{display:block;height:74px;margin-bottom:6px;overflow:hidden;border-radius:6px}
.ch-phone-post img{display:block;width:100%;height:100%;object-fit:cover}
.ch-phone-logo{width:100%;margin:2px 0 4px;filter:brightness(0) invert(1)}
.ch-phone .ch-l{background:rgba(234,251,252,.3)}
.ch-swatch{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 16px 20px -10px rgba(0,0,0,.6)}
.ch-sw--1{background:#ed1c24}.ch-sw--2{background:#f68712}.ch-sw--3{background:#4ac2b4}.ch-sw--4{background:#b95ab4}
.ch-desk-cap{position:absolute;left:0;right:0;bottom:calc(-26px / var(--k));text-align:center;font:500 12px/1.4 var(--fb);letter-spacing:.06em;color:rgba(234,251,252,.62)}
.ch-desk-cap b{font-weight:600;color:var(--tq2)}
.ch-scroll{position:absolute;left:50%;bottom:26px;z-index:2;width:26px;height:42px;margin-left:-13px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(234,251,252,.45)}
.ch-scroll span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--tq2);animation:ch-wheel 1.8s var(--ease) infinite}
@keyframes ch-wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ---------------------------------------------------------------- 2. intro + pipette */
.ch-intro{position:relative;overflow:hidden;background:var(--light);padding:clamp(80px,10vw,150px) 0}
.ch-intro-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,6vw,90px);align-items:center}
.ch-pick{margin:0}
.ch-pick-img{position:relative;overflow:hidden;border-radius:22px;cursor:crosshair;box-shadow:0 40px 70px -40px rgba(13,27,42,.55);touch-action:pan-y}
.ch-pick-img img{display:block;width:100%;height:auto}
.ch-loupe{position:absolute;left:0;top:0;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;pointer-events:none;
  background:var(--lc,#c39588);box-shadow:0 0 0 4px #fff,0 14px 30px rgba(0,0,0,.4);opacity:0;scale:.5;transition:opacity .25s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.ch-pick-img.is-on .ch-loupe{opacity:1;scale:1}
.ch-loupe i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px rgba(0,0,0,.25)}
.ch-loupe b{position:absolute;left:50%;top:calc(100% + 10px);padding:5px 8px;border-radius:6px;background:#0d1b2a;color:#fff;font:600 11px/1 var(--fm);white-space:nowrap;translate:-50% 0}
.ch-pick-cap{display:grid;gap:14px;margin-top:18px}
.ch-pick-hint{font:500 13px/1.4 var(--fb);letter-spacing:.04em;color:var(--mute)}
.ch-picked{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.ch-picked li{position:relative;flex:1;display:flex;align-items:flex-end;height:58px;padding:7px 8px;border-radius:12px;background:var(--c);box-shadow:0 12px 22px -14px rgba(13,27,42,.5)}
.ch-picked span{padding:3px 5px;border-radius:5px;background:rgba(13,27,42,.84);font:600 10px/1 var(--fm);color:#fff}

/* ---------------------------------------------------------------- 3. la charte qui se feuillette */
.ch-book-sec{position:relative;overflow:hidden;background:var(--navy);color:var(--ice);padding:clamp(80px,8vw,120px) 0}
.ch-book-sec::before{content:"";position:absolute;left:50%;top:60%;width:70vw;height:70vw;max-width:1000px;max-height:1000px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(34,166,179,.16),transparent 62%)}
.ch-book-sec .ch-h2{color:#fff}
.ch-book-sec .caw-eyebrow-line{color:var(--tq2)}
.ch-book-sec .ch-p{color:rgba(234,251,252,.8)}
.ch-book-sec .ch-sec-head{margin-bottom:clamp(26px,3vw,44px)}
.ch-book-stage{position:relative;display:flex;justify-content:center;perspective:2600px}
/* par défaut (téléphone, tablette, écran bas, sans script, mouvement réduit) : les pages défilent au doigt, une à une */
.ch-book-sec:not(.is-3d) .ch-book-stage{margin:0 calc(50% - 50vw)}
.ch-book{position:relative;display:flex;gap:16px;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:6px max(16px,calc(50% - 170px)) 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ch-book::-webkit-scrollbar{display:none}
.ch-book:focus-visible{outline:2px solid var(--tq2);outline-offset:-2px}
.ch-leaf{display:contents}
.ch-face{position:relative;flex:none;width:min(340px,76vw);aspect-ratio:1/1.32;overflow:hidden;container-type:inline-size;border-radius:6px;background:#fbf8f2;color:#1b2430;
  scroll-snap-align:center;box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.ch-book-sec:not(.is-3d) .ch-face{content-visibility:auto;contain-intrinsic-size:auto 340px auto 449px}
.ch-book-hint{margin:0;text-align:center;font:500 12px/1.4 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:rgba(234,251,252,.55)}
.ch-book-hint::before,.ch-book-hint::after{content:"\2190";margin:0 10px;color:var(--tq2)}
.ch-book-hint::after{content:"\2192"}
.ch-book-sec.is-3d .ch-book-hint{display:none}
/* 3D : le livre ouvert, pages tournées par js/caw-charte.js ; sa taille suit la largeur ET la hauteur de l'écran */
.ch-book.is-3d{--pw:min(360px,33vw,calc(var(--bk-h,520px) / 1.32));display:block;position:relative;overflow:visible;padding:0;scroll-snap-type:none;
  width:calc(var(--pw) * 2);height:calc(var(--pw) * 1.32);transform-style:preserve-3d}
.ch-book.is-3d::after{content:"";position:absolute;left:4%;right:4%;bottom:-34px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none}
.ch-book.is-3d .ch-leaf{display:block;position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.ch-book.is-3d .ch-face{position:absolute;inset:0;width:auto;aspect-ratio:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:0 6px 6px 0;
  box-shadow:inset 14px 0 20px -16px rgba(0,0,0,.45),0 30px 50px -34px rgba(0,0,0,.8)}
.ch-book.is-3d .ch-face--back{transform:rotateY(180deg);border-radius:6px 0 0 6px;box-shadow:inset -14px 0 20px -16px rgba(0,0,0,.45),0 30px 50px -34px rgba(0,0,0,.8)}
.ch-book.is-3d .ch-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 70%);opacity:var(--sh,0)}
.ch-book-sec.is-3d{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:clamp(70px,9vh,110px) 0 clamp(26px,4vh,50px)}
.ch-book-sec.is-3d .ch-sec-head .ch-p{margin-top:12px}
/* téléphone : section épinglée, les pages défilent seules au défilement (js/caw-charte.js) */
.ch-book-sec.is-hs{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:76px 0 20px}
.ch-book-sec.is-hs .ch-sec-head{margin-bottom:14px}
.ch-book-sec.is-hs .ch-sec-head .ch-p,.ch-book-sec.is-hs .ch-book-hint{display:none}
.ch-book-sec.is-hs .ch-book{overflow:visible;scroll-snap-type:none;padding:8px calc(50% - var(--fw,300px) / 2) 24px;will-change:transform}
.ch-book-sec.is-hs .ch-face{width:var(--fw,300px);content-visibility:visible}
.ch-book-sec.is-hs .ch-book-nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:10px 0 0;padding:2px 16px;scrollbar-width:none}
.ch-book-sec.is-hs .ch-book-nav::-webkit-scrollbar{display:none}
.ch-book-sec.is-hs .ch-chip-nav{flex:none}
.ch-pn{position:absolute;right:7cqw;bottom:5cqw;font:600 2.8cqw/1 var(--fm);color:rgba(27,36,48,.45)}
.ch-face--back .ch-pn{right:auto;left:7cqw}
/* contenu des pages */
.ch-chap{display:flex;flex-direction:column;justify-content:center;height:100%;padding:12cqw 12cqw}
.ch-chap-n{font:400 30cqw/.8 var(--fh);color:transparent;-webkit-text-stroke:.5cqw #aa4c59}
.ch-chap-t{margin:5cqw 0 0;font:400 10cqw/1 var(--fh);text-transform:uppercase;color:#1b2430}
.ch-chap-p{margin:5cqw 0 6cqw;font:400 4cqw/1.6 var(--fb);color:#4a5563}
.ch-l--s{height:1.2cqw;margin-top:2cqw;background:rgba(27,36,48,.12)}
.ch-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:12cqw 10cqw 18cqw;text-align:center;
  box-shadow:inset 0 0 0 3.6cqw #ee8a2e;background-size:6cqw 6cqw}
.ch-cover .ch-cl{width:84%}
.ch-cover-t{margin:8cqw 0 0;font:400 8cqw/1 var(--fh);text-transform:uppercase;color:#1b2430;letter-spacing:.02em}
.ch-cover-s{margin:2.5cqw 0 0;font:500 3.2cqw/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:#c52f12}
.ch-cover-band{position:absolute;left:3.6cqw;right:3.6cqw;bottom:3.6cqw;height:5cqw;background:linear-gradient(90deg,#231f20 0 11%,#ed1c24 11% 22%,#f68712 22% 33%,#f1511b 33% 44%,#4ac2b4 44% 55%,#59c134 55% 66%,#b95ab4 66% 77%,#e05c8b 77% 88%,#bab942 88%)}
.ch-pg-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:9cqw}
.ch-zone{position:relative;padding:8cqw;outline:.4cqw dashed #4ac2b4;outline-offset:0}
.ch-zone .ch-cl{width:58cqw}
.ch-x{position:absolute;display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:50%;background:#ed1c24;color:#fff;font:600 3cqw/1 var(--fm);font-style:normal}
.ch-x--t{left:50%;top:1cqw;margin-left:-3cqw}.ch-x--b{left:50%;bottom:1cqw;margin-left:-3cqw}
.ch-x--l{left:1cqw;top:50%;margin-top:-3cqw}.ch-x--r{right:1cqw;top:50%;margin-top:-3cqw}
.ch-cap{margin:4cqw 0 0;font:500 3.3cqw/1.4 var(--fb);color:#4a5563;text-align:center}
.ch-hz{width:100%;margin-top:9cqw;padding-top:6cqw;border-top:.3cqw solid rgba(27,36,48,.1)}
.ch-hz .ch-cl{width:100%}
.ch-pg-vars{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:5cqw 4cqw;height:100%;margin:0;padding:9cqw 8cqw;list-style:none}
.ch-var{display:grid;gap:2.4cqw}
.ch-var-box{display:grid;place-items:center;height:30cqw;padding:3cqw;overflow:hidden;border-radius:3cqw;background:#fff;box-shadow:0 0 0 .3cqw rgba(27,36,48,.1)}
.ch-var-box .ch-cl{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.ch-var--trait .ch-cl,.ch-var--black .ch-cl,.ch-var--white .ch-cl{width:100%;height:auto}
.ch-var--white .ch-var-box{background:#231f20}
.ch-var--sym .ch-var-box{background:#fbf8ee}
.ch-var--umb .ch-cl{height:25cqw;width:auto;max-width:none}
.ch-var--sym .ch-cl{height:17cqw;width:auto;max-width:none}
.ch-var b{font:600 3.2cqw/1.3 var(--fb);color:#1b2430}
.ch-pg-colors{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:6cqw 4cqw;height:100%;margin:0;padding:10cqw 9cqw;list-style:none}
.ch-pg-colors li{display:grid;gap:1.6cqw}
.ch-chip{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.4)}
.ch-pg-colors b{font:600 3.2cqw/1.1 var(--fm);color:#1b2430}
.ch-pg-colors span:not(.ch-chip){font:500 2.5cqw/1.3 var(--fm);color:#4a5563}
.ch-pg-fonts{display:flex;flex-direction:column;justify-content:center;gap:7cqw;height:100%;padding:9cqw 10cqw}
.ch-letter .ch-cl{width:100%}
.ch-letter .ch-cap{text-align:left;margin-top:3cqw}
.ch-font{display:grid;grid-template-columns:auto 1fr;column-gap:5cqw;align-items:center}
.ch-aa{grid-row:span 2;font-size:17cqw;line-height:.9;color:#f1511b}
.ch-font--h .ch-aa{font-family:futura-pt-condensed,"Francois One",var(--fh);font-weight:500}
.ch-font--b .ch-aa{font-family:futura-pt,Jost,sans-serif;font-weight:500;color:#4ac2b4}
.ch-font b{font:600 4.6cqw/1.2 var(--fb);color:#1b2430}
.ch-font span:not(.ch-aa){font:400 3.4cqw/1.4 var(--fb);color:#4a5563}
.ch-abc{grid-column:1 / -1;margin-top:3cqw;padding-top:3cqw;border-top:.3cqw solid rgba(27,36,48,.12);letter-spacing:.08em;word-break:break-all}
.ch-font--h .ch-abc{font-family:futura-pt-condensed,"Francois One",var(--fh)!important;font-weight:500!important;font-size:4.4cqw!important;color:#1b2430!important}
.ch-font--b .ch-abc{font-family:futura-pt,Jost,sans-serif!important;font-size:4cqw!important;color:#1b2430!important}
.ch-pg-rules{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:6cqw 5cqw;height:100%;margin:0;padding:10cqw 9cqw;list-style:none}
.ch-rule{display:grid;gap:3cqw}
.ch-rule-box{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border-radius:3cqw;background:#fff;box-shadow:0 0 0 .3cqw rgba(27,36,48,.1)}
.ch-rule-box .ch-cl{width:82%}
.ch-rule--stretch .ch-cl{transform:scale(1.35,.7)}
.ch-rule--color .ch-cl{filter:hue-rotate(160deg) saturate(.55)}
.ch-rule--busy .ch-rule-box{background:repeating-linear-gradient(45deg,#ed1c24 0 3cqw,#f68712 3cqw 6cqw)}
.ch-rule:not(.ch-rule--ok) .ch-rule-box::after{content:"";position:absolute;inset:8%;pointer-events:none;
  background:linear-gradient(45deg,transparent calc(50% - .5cqw),rgba(224,52,74,.85) calc(50% - .5cqw) calc(50% + .5cqw),transparent calc(50% + .5cqw))}
.ch-rule-t{display:flex;align-items:center;gap:2cqw;font:600 3.2cqw/1.25 var(--fb);color:#1b2430}
.ch-rule-t::before{content:"✕";flex:none;display:grid;place-items:center;width:5.4cqw;height:5.4cqw;border-radius:50%;background:#e0344a;color:#fff;font-size:3cqw}
.ch-rule--ok .ch-rule-t::before{content:"✓";background:#2fb37a}
.ch-backcover{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:#0d1b2a;color:#eafbfc;text-align:center}
.ch-backcover .ch-cl{height:20cqw;width:auto;margin-bottom:5cqw}
.ch-backcover p{margin:0;font:400 8cqw/1 var(--fh);text-transform:uppercase}
.ch-backcover span{margin-top:3cqw;font:500 3.4cqw/1 var(--fm);color:var(--tq2)}
.ch-book-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.ch-book-sec.is-3d .ch-book-nav{margin-top:clamp(34px,5vh,56px)}
.ch-chip-nav{min-height:38px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;background:rgba(234,251,252,.07);box-shadow:inset 0 0 0 1px rgba(126,214,223,.2);
  color:rgba(234,251,252,.8);font:600 11px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;transition:background-color .3s,color .3s,transform .15s}
.ch-chip-nav:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--tq2)}
.ch-chip-nav.is-on{background:#eafbfc;color:#0d1b2a;box-shadow:none}
.ch-chip-nav:active{transform:scale(.96)}
.ch-chip-nav:focus-visible{outline:2px solid var(--tq2);outline-offset:3px}

/* ---------------------------------------------------------------- 4. supports */
.ch-sup{background:var(--paper);padding:clamp(80px,9vw,140px) 0}
.ch-sup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ch-sup-card{--c:#22a6b3;position:relative;isolation:isolate;overflow:hidden;padding:28px 26px;border-radius:22px;background:var(--card);box-shadow:0 26px 50px -36px rgba(13,27,42,.45);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* au survol : un filet de la couleur du carnaval de la carte se trace en haut, un voile très léger de la même couleur,
   l'icône prend la couleur ; tout en douceur (pas de remplissage) */
.ch-sup-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;pointer-events:none;background:var(--c);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.ch-sup-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%)}
.ch-sup-card:hover,.ch-sup-card:focus-within{transform:translateY(-4px);box-shadow:0 34px 56px -36px color-mix(in srgb,var(--c) 55%,#0d1b2a)}
.ch-sup-card:hover::after,.ch-sup-card:focus-within::after{transform:scaleX(1)}
.ch-sup-card:hover::before,.ch-sup-card:focus-within::before{opacity:1}
.ch-sup-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:16px;background:#e3f5f6;transition:background-color .5s var(--ease)}
.ch-sup-ico svg{width:30px;height:30px;fill:none;stroke:#17808a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .5s var(--ease)}
.ch-sup-card:hover .ch-sup-ico,.ch-sup-card:focus-within .ch-sup-ico{background:var(--c)}
.ch-sup-card:hover .ch-sup-ico svg,.ch-sup-card:focus-within .ch-sup-ico svg{stroke:#fff}
.ch-sup-card .ch-h3{transition:color .5s var(--ease)}
.ch-sup-card:hover .ch-h3,.ch-sup-card:focus-within .ch-h3{color:color-mix(in srgb,var(--c) 82%,#0d1b2a)}
.ch-sup-card p{margin:10px 0 0;font:400 15px/1.6 var(--fb);color:var(--mute)}
.ch-show{margin-top:clamp(60px,7vw,100px)}
.ch-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ch-tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 8px;border:0;border-radius:99px;cursor:pointer;background:#fff;color:var(--blue);
  box-shadow:inset 0 0 0 1.5px rgba(60,99,130,.16);font:600 12.5px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;transition:background-color .3s,color .3s,box-shadow .3s,transform .15s}
.ch-tab-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(60,99,130,.08);font:600 11px/1 var(--fm);letter-spacing:0}
.ch-tab:hover{box-shadow:inset 0 0 0 1.5px var(--tq)}
.ch-tab.is-on{background:#17808a;color:#fff;box-shadow:0 14px 26px -16px rgba(23,128,138,.9)}
.ch-tab.is-on .ch-tab-n{background:rgba(6,18,28,.28)}
.ch-tab:active{transform:scale(.97)}
.ch-tab:focus-visible{outline:2px solid var(--tq);outline-offset:3px}
.ch-pan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--card);
  box-shadow:0 40px 70px -46px rgba(13,27,42,.5)}
.ch-pan[hidden]{display:none}
.ch-pan .ch-p{font-size:15.5px;max-width:none}
.ch-list{margin:14px 0 0;padding:0;list-style:none}
.ch-list li{position:relative;margin-top:10px;padding-left:24px;font:400 15.5px/1.6 var(--fb);color:var(--blue)}
.ch-list li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--tq);rotate:45deg}
.ch-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:24px 0 0;font:600 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ch-contact a{font:500 15px/1.3 var(--fb);letter-spacing:0;text-transform:none;color:#17808a;text-decoration:underline;text-decoration-color:rgba(23,128,138,.35);text-underline-offset:4px}
.ch-contact a:hover{text-decoration-color:currentColor}
.ch-pan-stage{position:relative;display:grid;place-items:center;height:440px;border-radius:22px;perspective:1400px;
  background:radial-gradient(circle at 40% 40%,#eaf7f8,#d4ecef 70%)}
.ch-polaroid{position:absolute;right:-10px;bottom:-22px;z-index:3;width:150px;margin:0;padding:8px 8px 28px;background:#fff;rotate:6deg;box-shadow:0 20px 34px -18px rgba(13,27,42,.6)}
.ch-polaroid--wide{width:176px}
.ch-pan-stage > .ch-o--fold{left:47%;top:47%}
.ch-polaroid img{display:block;width:100%;height:auto}
.ch-polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:400 15px/1 "Carta Marina",var(--fb);color:#3a4652}
.ch-o{position:absolute;left:50%;top:50%;translate:-50% -50%;transform-style:preserve-3d;transform-origin:50% 50%}
/* carte du Festival Temps Images : trois calques transparents + la carte blanche */
.ch-tilt{transform-style:preserve-3d}
.ch-fti3{position:relative;width:300px;height:167px;transform-style:preserve-3d;cursor:grab;touch-action:pan-y}
.ch-fti3:active{cursor:grabbing}
.ch-fl{position:absolute;inset:0;display:grid;place-items:center;border-radius:8px;transform-style:preserve-3d}
.ch-fl img{display:block;width:84%;height:auto;user-select:none;-webkit-user-drag:none}
.ch-fl--base{background:#fff;box-shadow:0 30px 40px -24px rgba(13,27,42,.6),inset 0 0 0 1px rgba(13,27,42,.06)}
.ch-fl:not(.ch-fl--base){background:linear-gradient(125deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 45%,rgba(255,255,255,.2));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 10px 22px -16px rgba(13,27,42,.35)}
/* dépliant carré trois volets */
.ch-fold{display:flex;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-14deg)}
.ch-fp{position:relative;width:156px;height:156px;transform-style:preserve-3d}
.ch-fp--l{transform-origin:100% 50%}
.ch-fp--r{transform-origin:0 50%}
.ch-fs{position:absolute;inset:0;padding:12px 12px;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(13,27,42,.06)}
.ch-fs .ch-l{margin-top:7px;height:4px}
.ch-fs--out,.ch-fs--cover{transform:rotateY(180deg)}
.ch-fs--out{background:#f68712}
.ch-fs--out .ch-l{background:rgba(255,255,255,.5)}
.ch-fs--cover{display:grid;place-items:center;padding:14px;background-size:11px 11px;box-shadow:inset 0 0 0 5px #ee8a2e}
.ch-fs--cover .ch-cl{width:100%}
.ch-fp--m .ch-fs{background:#fbf8ee radial-gradient(circle,rgba(190,203,92,.3) 0 30%,transparent 32%) 0 0/11px 11px;box-shadow:inset 1px 0 0 rgba(13,27,42,.08),inset -1px 0 0 rgba(13,27,42,.08)}
.ch-fs-k{display:block;font:400 15px/1 var(--fh);text-transform:uppercase;color:#e3262e}
.ch-ph{display:block;width:100%;height:66px;margin:6px 0 2px;border-radius:4px;object-fit:cover}
/* plaquette : couverture, puis une double page mise en page autour des deux photos */
.ch-bro{position:relative;width:420px;height:280px;transform-style:preserve-3d;transform:rotateX(18deg)}
.ch-bp{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d}
.ch-bp--r{display:flex;flex-direction:column;padding:16px 16px 14px;background:#fff;border-radius:0 6px 6px 0;box-shadow:inset 10px 0 14px -12px rgba(0,0,0,.35),0 26px 30px -20px rgba(13,27,42,.6)}
.ch-bp--l{transform-origin:0 50%}
.ch-bs{position:absolute;inset:0;padding:16px 14px;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:0 6px 6px 0}
.ch-bs--cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 14px;background-size:12px 12px;box-shadow:inset 0 0 0 5px #ee8a2e,0 26px 30px -20px rgba(13,27,42,.6)}
.ch-bs--cover .ch-cl{width:100%}
.ch-bro-t{width:70%}
.ch-bs--in{display:flex;flex-direction:column;padding:0 0 14px;overflow:hidden;transform:rotateY(180deg);background:#fff;border-radius:6px 0 0 6px;box-shadow:inset -10px 0 14px -12px rgba(0,0,0,.35)}
.ch-bro-hero{position:relative;display:block;height:52%;overflow:hidden}
.ch-bro-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#ed1c24 0 20%,#f68712 20% 40%,#4ac2b4 40% 60%,#59c134 60% 80%,#b95ab4 80%)}
.ch-bro-ph{display:block;width:100%;height:100%;object-fit:cover}
.ch-bro-h{margin:12px 16px 4px;font:400 17px/1 var(--fh);text-transform:uppercase;color:#1b2430}
.ch-bs--in .ch-l{width:calc(var(--w) - 32px);margin-left:16px}
.ch-bro-pg{position:absolute;left:14px;bottom:8px;font:600 8px/1 var(--fm);color:rgba(27,36,48,.4)}
.ch-bro-k{margin:0 0 8px;font:400 13px/1 var(--fh);text-transform:uppercase;letter-spacing:.04em;color:#e3262e}
.ch-bro-fig{height:46%;margin:0 0 10px;overflow:hidden;border-radius:4px;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(27,36,48,.12)}
.ch-bro-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.ch-bro-cols .ch-l{height:4px;margin-top:6px}
.ch-bro-sw{display:flex;gap:5px}
.ch-bro-sw i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.ch-bp .ch-l,.ch-bs .ch-l{margin-top:7px}

/* ---------------------------------------------------------------- 5. réalisations : la photo + la pièce en 3D qui s'anime */
.ch-works{position:relative;overflow:hidden;background:var(--navy);color:var(--ice);padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,140px)}
.ch-works .ch-h2{color:#fff}
.ch-works .caw-eyebrow-line{color:var(--tq2)}
.ch-works .ch-p{color:rgba(234,251,252,.8);max-width:70ch}
.ch-wk-list{display:grid;gap:clamp(70px,9vw,130px)}
.ch-wk{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);grid-template-areas:"media stage" "txt stage";column-gap:clamp(28px,4vw,64px);row-gap:24px;align-items:start}
.ch-wk--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);grid-template-areas:"stage media" "stage txt"}
.ch-wk-media{grid-area:media;align-self:end}
.ch-wk-stage{grid-area:stage;align-self:center}
.ch-wk-txt{grid-area:txt}
.ch-wk-photo{position:relative;display:block;width:100%;aspect-ratio:2000/1188;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:#14273b;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(126,214,223,.1)}
.ch-wk-photo img{display:block;width:100%;height:100%;object-fit:contain;transition:transform 1.4s var(--ease)}
.ch-wk-photo:hover img{transform:scale(1.035)}
.ch-wk-photo:focus-visible{outline:3px solid var(--tq2);outline-offset:4px}
.ch-zoom{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(13,27,42,.72);opacity:0;scale:.8;
  transition:opacity .3s,scale .3s cubic-bezier(.34,1.56,.64,1)}
.ch-zoom svg{width:22px;height:22px;fill:none;stroke:#eafbfc;stroke-width:2;stroke-linecap:round}
.ch-wk-photo:hover .ch-zoom,.ch-wk-photo:focus-visible .ch-zoom{opacity:1;scale:1}
.ch-wk-n{display:block;font:400 44px/1 var(--fh);color:transparent;-webkit-text-stroke:1.2px var(--tq2)}
.ch-wk-t{margin:10px 0 0;font:400 clamp(22px,2vw,30px)/1.05 var(--fh);text-transform:uppercase;color:#fff;text-wrap:balance}
.ch-wk-txt p{margin:12px 0 0;max-width:56ch;font:400 15.5px/1.65 var(--fb);color:rgba(234,251,252,.78)}
/* la scène : un plateau sombre en perspective ; tout se mesure en cqmin (la scène est carrée) */
.ch-wk-stage{position:relative;width:100%;aspect-ratio:1;border-radius:26px;overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 560px;
  background:radial-gradient(circle at 50% 40%,#1c3954,#10243a 60%,#0a1828);box-shadow:inset 0 0 0 1px rgba(126,214,223,.13),0 40px 80px -50px rgba(0,0,0,.9)}
.ch-wk-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(126,214,223,.07) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,rgba(126,214,223,.07) 1px,transparent 1px) 0 0/34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%)}
.ch-wk-3d{position:absolute;inset:0;container-type:size;perspective:260cqmin;perspective-origin:50% 38%}
.fx-floor{position:absolute;left:20%;right:20%;bottom:10%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none}
.ch-wk-steps{position:absolute;left:14px;right:62px;bottom:14px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ch-wk-steps li{padding:7px 11px;border-radius:99px;background:rgba(234,251,252,.07);color:rgba(234,251,252,.6);font:600 10.5px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .4s,color .4s}
.ch-wk-steps li.is-on{background:var(--tq2);color:#0d1b2a}
.ch-wk-pp{position:absolute;right:14px;bottom:12px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(234,251,252,.1);box-shadow:inset 0 0 0 1px rgba(126,214,223,.25);transition:background-color .3s}
.ch-wk-pp:hover{background:rgba(234,251,252,.2)}
.fx-static .ch-wk-pp,.fx-static .ch-wk-steps{display:none}
.ch-wk-pp:focus-visible{outline:2px solid var(--tq2);outline-offset:3px}
.ch-wk-pp i{width:12px;height:12px;border-left:4px solid #eafbfc;border-right:4px solid #eafbfc}
.ch-wk-pp[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid #eafbfc;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
/* faces texturées (images chargées par js/caw-charte-fx.js) */
.fx{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.fx-f{position:absolute;inset:0;display:block;background:no-repeat center/100% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fx-b{transform:rotateY(180deg)}
/* 01 · origami Studio Nendo : un carré 2 × 2, deux quarts pliés en triangle sur le troisième */
.fx--ori{--q:30cqmin;width:calc(var(--q) * 2);height:calc(var(--q) * 2);margin:calc(var(--q) * -1) 0 0 calc(var(--q) * -1);transform:rotateX(16deg)}
.ori-rot,.ori-sheet{position:absolute;inset:0;transform-style:preserve-3d}
.ori-rot{transform-origin:75% 75%}
.ori-base{inset:50% 0 0 50%}
.ori-sq{position:absolute;width:50%;height:50%;transform-style:preserve-3d}
.ori-sq--t{left:50%;top:0;transform-origin:50% 100%}
.ori-sq--l{left:0;top:50%;transform-origin:100% 50%}
.ori-h{position:absolute;inset:0;transform-style:preserve-3d}
.ori-b{transform:translateZ(.5px) rotate3d(1,-1,0,calc(var(--a,0) * 1deg))}
.ori-lr{clip-path:polygon(100% -1%,100% 100%,-1% 100%)}
.ori-ul{clip-path:polygon(0 0,101% 0,0 101%)}
.ori-ur{clip-path:polygon(0 0,100% 0,100% 100%)}
.ori-ll{clip-path:polygon(0 0,0 100%,100% 100%)}
.ori-cov--t{transform:rotateX(180deg)}
.ori-cov--l{transform:rotateY(180deg)}
.ori-bk{transform:rotate3d(1,-1,0,180deg)}
.ori-tl{position:absolute;left:0;top:0;width:50%;height:50%;transform-origin:100% 100%;transform-style:preserve-3d;transform:translateZ(.3px) rotate3d(1,-1,0,calc(var(--a,0) * 1deg))}
.ori-ext{transform:translateZ(-.5px) rotateY(180deg)}
.fx--ori .fx-f{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
/* 02 · pochette orange Studio Nendo : deux volets percés et le calque de couleurs entre les deux */
.fx--poc{--h:56cqmin;width:calc(var(--h) / 1.929);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--h) / -3.858)}
.poc,.poc-p{position:absolute;inset:0;transform-style:preserve-3d}
.poc-front{transform-origin:0 50%}
.poc-p .fx-f{filter:drop-shadow(0 1.5cqmin 2cqmin rgba(0,0,0,.35))}
/* la fente du côté droit (les deux volets ne sont pas collés de ce côté) */
.poc-slit{position:absolute;right:-.2cqmin;top:1.5%;bottom:1.5%;width:.9cqmin;border-radius:.4cqmin;transform:translateZ(3px);
  background:linear-gradient(90deg,#7a3208,#2a1205 55%,#b4520f);box-shadow:0 0 0 .2cqmin rgba(0,0,0,.18)}
.poc-cal{position:absolute;left:1%;top:.4%;width:98%;height:99.2%;display:block;background:no-repeat center/100% 100%;opacity:.9;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
/* 03 · planning en rapporteur : cinq demi-disques sur une règle */
.fx--ver{--R:42cqmin;width:calc(var(--R) * 2);height:var(--R);margin:calc(var(--R) * -.62) 0 0 calc(var(--R) * -1)}
.ver{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%}
.ver-l{position:absolute;bottom:0;left:calc((1 - var(--r)) * 50%);width:calc(var(--r) * 100%);height:calc(var(--r) * 100%);transform-origin:50% 100%;transform-style:preserve-3d}
.ver-l .fx-f{filter:drop-shadow(0 -.4cqmin .6cqmin rgba(0,0,0,.25))}
.ver-photo{transform:rotateX(180deg);visibility:hidden}
.ver-rule{position:absolute;left:-.35%;width:100.7%;height:12%;bottom:-12%;display:block;background:no-repeat center/100% 100%;transform:translateZ(5.6px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 1.2cqmin 1.6cqmin -1cqmin rgba(0,0,0,.6)}
.ver-verso{inset:auto 0 -5.9% 0;height:105.9%;transform:translateZ(-1px) rotateY(180deg)}
/* 04 · livret « Révéler » : couverture, double page tramée et calque rayé */
.fx--rev{--p:40cqmin;width:calc(var(--p) * 2);height:calc(var(--p) / 1.583);margin:calc(var(--p) / -3.166) 0 0 calc(var(--p) * -1)}
.rev-cam,.rev-book{position:absolute;inset:0;transform-style:preserve-3d}
.rev-pg,.rev-cover{position:absolute;left:50%;top:0;width:50%;height:100%}
.rev-pg{box-shadow:0 2cqmin 4cqmin -1.5cqmin rgba(0,0,0,.6)}
.rev-pg .fx-f{-webkit-backface-visibility:visible;backface-visibility:visible}
.rev-cover{transform-origin:0 50%;transform-style:preserve-3d}
.rev-spine{position:absolute;left:48.6%;top:-1.2%;width:2.8%;height:102.4%;background:#151515;border-radius:3px;transform:translateZ(-.5px)}
.rev-calque{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d;pointer-events:none}
.rev-cal{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1cqmin 1.4cqmin rgba(0,0,0,.45))}
.rev-sheet{fill:rgba(255,255,255,.08);stroke:rgba(234,251,252,.6);stroke-width:5}
/* 05 · dépliant « Explore » : 2 colonnes × 5 fiches, l'affiche au verso */
.fx--exp{--w:31cqmin;width:calc(var(--w) * 2);height:calc(var(--w) / 2.406 * 5);margin:calc(var(--w) / -2.406 * 2.5) 0 0 calc(var(--w) * -1)}
.exp{position:absolute;inset:0;transform-style:preserve-3d}
.exp-col{position:absolute;top:0;width:50%;height:20%;transform-style:preserve-3d}
.exp-col--r{left:50%}
.exp-col--l{left:0;transform-origin:100% 50%}
.exp-row{position:absolute;left:0;top:100%;width:100%;height:100%;transform-origin:50% 0;transform-style:preserve-3d}
.exp-col > .exp-row{top:0}
.exp-f{background-size:200% 500%;background-position:calc(var(--c) * 100%) calc(var(--r) * 25%);box-shadow:inset 0 0 0 .3px rgba(0,0,0,.2)}
.exp-f--b{background-position:calc((1 - var(--c)) * 100%) calc(var(--r) * 25%)}
/* 06–08 · cartes recto verso */
.c3{position:absolute;inset:0;transform-style:preserve-3d}
.c3 .fx-f{border-radius:1cqmin;box-shadow:0 2.4cqmin 4cqmin -1.6cqmin rgba(0,0,0,.6)}
.c3-sheen{position:absolute;inset:0;border-radius:1cqmin;pointer-events:none;transform:translateZ(.6px);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:calc(var(--sx,1.3) * 100%) 0}
.fx--moto{--w:68cqmin;width:var(--w);height:calc(var(--w) / 1.412);margin:calc(var(--w) / -2.824) 0 0 calc(var(--w) / -2)}
.c3--fti .c3-b{transform:rotateX(180deg)}
/* le carton du festival dans son enveloppe : doublure bleue rayée, dos crème avec liseré rouge et bleu, rabat et pastille */
.fx--fti{--w:60cqmin;--h:34cqmin;left:50%;top:58%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2)}
.fx--fti .c3{left:4cqmin;right:4cqmin;top:3cqmin;bottom:auto;height:26cqmin;inset:3cqmin 4cqmin auto 4cqmin}
.env-back,.env-pocket{position:absolute;inset:0;display:block;border-radius:.8cqmin}
.env-back,.env-f--in{background:#2f86c9 repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 .45cqmin,transparent .45cqmin 1.5cqmin)}
.env-back{box-shadow:0 2.4cqmin 4cqmin -1.2cqmin rgba(0,0,0,.6)}
.env-pocket{transform:translateZ(2.5px);clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 50 60 100 100' fill='none' stroke='%23000' stroke-opacity='.09' stroke-width='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100%,
    linear-gradient(180deg,#f3ede0,#fbf8f1 40%,#f1ebde)}
.env-pocket::after{content:"";position:absolute;inset:0;padding:1.2cqmin;border-radius:inherit;
  background:repeating-linear-gradient(45deg,#e2373f 0 2cqmin,#fbf8f1 2cqmin 3cqmin,#2f86c9 3cqmin 5cqmin,#fbf8f1 5cqmin 6cqmin);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.env-flap{position:absolute;left:0;bottom:100%;width:100%;height:62%;transform-origin:50% 100%;transform-style:preserve-3d}
.env-f{position:absolute;inset:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.env-f--in{clip-path:polygon(0 100%,50% 3%,100% 100%)}
.env-f--out{transform:rotateX(180deg);clip-path:polygon(0 0,100% 0,50% 97%);background:linear-gradient(180deg,#ece5d6,#fbf8f1 70%)}
.env-seal{position:absolute;left:50%;top:66%;width:8cqmin;height:8cqmin;margin:-4cqmin 0 0 -4cqmin;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff27a,#f5d400 55%,#dcb600);box-shadow:inset 0 0 0 .6cqmin #e2373f,inset 0 0 0 1.2cqmin #fbf8f1,inset 0 0 0 1.8cqmin #2f86c9,0 .4cqmin .8cqmin rgba(0,0,0,.25)}
.fx--nx{--w:60cqmin;width:var(--w);height:calc(var(--w) / 1.414);margin:calc(var(--w) / -2.6) 0 0 calc(var(--w) / -2)}
.nx-table{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(48deg) rotateZ(-12deg)}
.nx-low{border-radius:1cqmin;box-shadow:0 .15cqmin 0 #e4dfd6,0 .3cqmin 0 #d8d2c8,0 .45cqmin 0 #cbc5bb,0 .6cqmin 0 #bdb7ad,0 1.4cqmin 2cqmin rgba(0,0,0,.45)}
.nx-low--1{transform:translate(-4cqmin,3cqmin) rotate(-8deg)}
.nx-low--2{transform:translate(2.5cqmin,-1.5cqmin) rotate(4deg) translateZ(.8cqmin)}
.nx-low--3{transform:translate(-1cqmin,1cqmin) rotate(-2deg) translateZ(1.6cqmin)}
.c3--nx{--t:.9cqmin;transform:translateZ(2.5cqmin)}
.nx-front{transform:translateZ(calc(var(--t) / 2))}
.nx-back{transform:rotateY(180deg) translateZ(calc(var(--t) / 2))}
.nx-sl{position:absolute;inset:0;border-radius:1cqmin;background:#e2ddd3;transform:translateZ(calc((var(--k) / 6 - .5) * var(--t)))}

/* ---------------------------------------------------------------- 6. processus + chiffres */
.ch-process{background:var(--paper);padding:clamp(80px,9vw,140px) 0}
.ch-steps-wrap{position:relative}
.ch-brush{position:absolute;left:0;right:0;top:44px;width:100%;height:60px;overflow:visible;pointer-events:none}
.ch-brush path{fill:none;stroke:#22a6b3;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.45}
.ch-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.ch-step-n{display:block;margin-bottom:22px;font:400 110px/.9 var(--fh);color:transparent;-webkit-text-stroke:1.5px rgba(60,99,130,.35);
  background:linear-gradient(90deg,#17808a,#22a6b3) 0 0/var(--fill,0%) 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.ch-step p{margin:12px 0 0;font:400 15.5px/1.6 var(--fb);color:var(--mute)}
.ch + .faq-section .title2{color:#3c6382}
.ch + .faq-section .eyebrow{color:#3a7690;letter-spacing:.2em}

/* ---------------------------------------------------------------- mode nuit */
html.dark-mode .ch{--paper:#0f2133;--card:#162535;--light:#0d1b2a;--blue:#c7ecee;--mute:#8fc3d3}
html.dark-mode .ch-p--big{color:#eafbfc}
html.dark-mode .ch-intro{background:#0b1724}
html.dark-mode .ch-sup-ico{background:#11344a}
html.dark-mode .ch-sup-ico svg{stroke:#7ed6df}
html.dark-mode .ch-tab{background:#162535;color:#c7ecee;box-shadow:inset 0 0 0 1.5px rgba(126,214,223,.16)}
html.dark-mode .ch-tab.is-on{background:#17808a;color:#fff}
html.dark-mode .ch-pan-stage{background:radial-gradient(circle at 40% 40%,#173149,#0f2133 70%)}
html.dark-mode .ch-contact a{color:#7ed6df}
html.dark-mode .ch-step-n{-webkit-text-stroke-color:rgba(126,214,223,.3)}
html.dark-mode .ch + .faq-section .title2{color:#eafbfc}
html.dark-mode .ch + .faq-section .eyebrow{color:#8fc3d3}

/* ---------------------------------------------------------------- tailles d'écran */
@media (max-width:1200px){.ch-h1{font-size:60px}.ch-desk{--k:.7}}
@media (max-width:899px){
  .ch-zoom{opacity:1;scale:1;width:38px;height:38px;right:10px;top:10px}
}
@media (max-width:1023px){
  .ch-scroll{display:none}
  .ch-wrap{width:calc(100% - 56px)}
  .ch-hero{min-height:0}
  .ch-hero-in,.ch-intro-in{grid-template-columns:minmax(0,1fr)}
  .ch-hero-in{gap:30px}
  .ch-desk{--k:.86}
  .ch-sup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-pan{grid-template-columns:minmax(0,1fr)}
  .ch-wk,.ch-wk--rev{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "stage" "txt";row-gap:18px}
  .ch-wk-stage{max-width:620px;justify-self:center}
  .ch-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-brush{display:none}
}
@media (max-width:767px){
  .ch-wrap{width:calc(100% - 32px)}
  .ch-h1{font-size:50px}
  .ch-hero{padding:120px 0 90px}
  .ch-ctas .caw-btn{flex:1 1 100%;justify-content:space-between}
  .ch-desk{--k:.46}
  .ch-sup-grid{grid-template-columns:minmax(0,1fr)}
  .ch-tabs{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .ch-tab{flex:none}
  .ch-pan{padding:22px 18px}
  .ch-pan-stage{height:340px;margin:0 -4px}
  .ch-polaroid{width:112px;right:-6px;bottom:-16px;padding:6px 6px 22px}
  .ch-polaroid--wide{width:144px}
  .ch-polaroid figcaption{font-size:13px;bottom:4px}
  .ch-steps{grid-template-columns:minmax(0,1fr)}
  .ch-step-n{font-size:84px;margin-bottom:12px}
  .ch-wk-stage{border-radius:20px}
  .ch-wk-steps li{padding:6px 9px;font-size:9.5px;letter-spacing:.08em}
  .ch-wk-n{font-size:36px}
}
@media (max-width:380px){.ch-desk{--k:.42}}
@media (prefers-reduced-motion:reduce){.ch-hero-text > *,.ch-scroll span{animation:none}}