/* =========================================================================
   H3PICTURES, VERSION 3
   Base : la premiere V3, inspiree de siena.film (menu en ticket, bandeau
   creme, tableau a filets, galerie en deux rangees, ticket film suivant),
   avec le carrousel de leur page Work et sa reglette.

   Ce qui est a nous :
   - le ticket n'a pas quatre coins poinconnes comme chez Siena : il a UNE
     encoche de chaque cote de la perforation, comme un billet qu'on
     detache, des coins arrondis, et le talon porte le mot MENU ;
   - le violet, discret : un lilas grise pour les accents, un aubergine
     profond pour l'aplat de Contact ;
   - le logo H3 en degrade.

   Trois familles : Big Shoulders Display (titres), Libre Bodoni (petits
   labels espaces, titres d'affiche en minuscules), Geist (texte).
   Libre Bodoni remplace Bodoni Moda le 05/10/2026 : meme esprit, mais des
   traits fins plus epais, lisibles en petit.
   ========================================================================= */

:root{
  --noir:#080808;
  --creme:#FAF7EF;
  /* LE VIOLET. Assez vif pour etre une vraie couleur de marque (le 3 du
     logo, le bouton du lecteur, les etats actifs), assez sourd pour ne pas
     virer au neon : sature a 82 %, pas a 100. */
  --violet:#8452F0;
  --lilas:#BCA4F7;          /* le meme, eclairci, pour du texte sur le noir */
  --aubergine:#1F1433;      /* l'aplat de Contact */
  --creme-doux:rgba(250,247,239,.7);
  --creme-faible:rgba(250,247,239,.45);
  --pointille:rgba(250,247,239,.3);
  --encre-doux:rgba(8,8,8,.62);

  --titre:"Big Shoulders Display","Arial Narrow",sans-serif;
  --serif:"Libre Bodoni","Bodoni Moda",Didot,Georgia,serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;

  --m:clamp(18px,2.4vw,34px);
  --haut:clamp(116px,9.6vw,140px);
  --section:clamp(100px,11vw,170px);
  --sortie:cubic-bezier(.19,1,.22,1);
  /* LE DEGRADE VIOLET GRANULEUX (labo 4, essai 43), choisi le 06/10/2026 :
     il remplace l'aplat violet partout ou un bouton se remplit. */
  --degrade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(110deg,#5a2fc9,#8452F0 45%,#c48fe6);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--noir);}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:clip;}
body{margin:0;background:var(--noir);color:var(--creme);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
h1,h2,h3,p,figure,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--lilas);outline-offset:3px;}

.label{font-family:var(--serif);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;}
.ligne{display:block;}

/* ------------------------------------------------ GRAIN ET VIGNETTAGE */
.grain{
  position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.08;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain .5s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-37px,21px)}50%{transform:translate(18px,-44px)}75%{transform:translate(-12px,31px)}100%{transform:translate(0,0)}}
.vignettage{position:fixed;inset:0;z-index:40;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,0) 14%);}
body[data-page="contact"] .vignettage{background:linear-gradient(180deg,rgba(42,26,61,.9) 0%,rgba(42,26,61,0) 14%);}

/* ---------------------------------------------------------------- LOGO */
.logo{position:fixed;left:var(--m);top:var(--m);height:100px;z-index:120;display:flex;align-items:center;gap:12px;line-height:1;color:var(--creme);filter:drop-shadow(0 1px 8px rgba(0,0,0,.35));transition:color .3s;}
body.sur-creme .logo{color:var(--noir);filter:none;}
.logo-mono,.intro-mono,.pied-mono,.talon-mono{
  display:block;
  -webkit-mask:url("h3-monogramme.png") center/contain no-repeat;mask:url("h3-monogramme.png") center/contain no-repeat;
  background:linear-gradient(160deg,#FFFFFF 10%,#E9E1FB 38%,#BCA4F7 70%,#8452F0 100%);
}
.logo-mono{width:32px;height:36px;background:currentColor;}
.logo-mot{font-family:var(--titre);font-weight:800;font-size:19px;letter-spacing:.1em;line-height:1;padding-top:.12em;}

/* =========================================================================
   LE TICKET DE NAVIGATION
   ========================================================================= */
.ticket-nav{position:fixed;right:var(--m);top:var(--m);z-index:130;width:min(350px,calc(100vw - 2 * var(--m) - 48px));display:grid;color:var(--noir);}
.ticket-nav > *{grid-column:1;}
.ticket{
  grid-row:1;display:flex;height:100px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  /* l'encoche : un demi-cercle en haut et en bas, a l'endroit de la
     perforation. --talon est la largeur du talon. */
  --talon:96px;
  -webkit-mask:radial-gradient(circle 9px at calc(100% - var(--talon)) 0,#0000 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 9px at calc(100% - var(--talon)) 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 9px at calc(100% - var(--talon)) 0,#0000 98%,#000 100%) top/100% 51% no-repeat,
               radial-gradient(circle 9px at calc(100% - var(--talon)) 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
}
.ticket-corps{flex:1;min-width:0;max-width:260px;display:flex;flex-direction:column;background:var(--creme);border-radius:8px 0 0 8px;overflow:hidden;
  transition:max-width .8s var(--sortie),opacity .45s ease;}
/* LE TICKET REPLIE : quand on descend dans une page, le corps s'efface et
   il ne reste que le talon MENU. Il se rouvre en remontant ou au clic. */
.ticket-nav{justify-items:end;transition:width .8s var(--sortie);}
.ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert){width:96px;}
.ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert) .ticket-corps{max-width:0;opacity:0;}
.ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert) .ticket{-webkit-mask:none;mask:none;}
.ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert) .ticket-talon{border-radius:8px;border-left-color:transparent;}
.ticket-nav > *{width:100%;}
.ticket-talon{
  flex:0 0 var(--talon);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--creme);border-radius:0 8px 8px 0;border-left:1.5px dashed rgba(8,8,8,.5);
  transition:background .4s;
}
.ticket-talon:hover{background:#EFEAE0;}
/* un filet tres fin : sur le bandeau creme, le ticket ne se fond plus dans la page */
.ticket-corps,.ticket-talon,.ticket-deroule{box-shadow:inset 0 0 0 1px rgba(8,8,8,.14);}
.ticket-talon{box-shadow:inset -1px 0 0 rgba(8,8,8,.14),inset 0 1px 0 rgba(8,8,8,.14),inset 0 -1px 0 rgba(8,8,8,.14);}
.ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert) .ticket-talon{box-shadow:inset 0 0 0 1px rgba(8,8,8,.14);}
.talon-trait{display:block;width:34px;height:2px;background:var(--noir);transition:transform .7s var(--sortie);}
.talon-mot{margin-top:4px;font-size:9px;font-weight:500;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;}
.ticket-nav.menu-ouvert .talon-trait:nth-child(1){transform:translateY(4px) rotate(-18deg);}
.ticket-nav.menu-ouvert .talon-trait:nth-child(2){transform:translateY(-4px) rotate(18deg);}
.ticket-haut{flex:1;display:flex;align-items:center;gap:12px;padding:0 14px;text-align:left;min-width:0;}
.ticket-vignette{flex:0 0 40px;width:40px;height:40px;object-fit:cover;border-radius:4px;background:#1a1a1a;}
.ticket-logo{background:var(--noir);-webkit-mask:url("h3-monogramme.png") center/80% no-repeat;mask:url("h3-monogramme.png") center/80% no-repeat;border-radius:0;}
.ticket-titre{flex:1;min-width:0;font-family:var(--titre);font-weight:800;font-size:22px;line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px;transition:opacity .3s ease,transform .5s var(--sortie);}
.ticket-chevron{flex:0 0 auto;transition:transform .8s var(--sortie);}
.ticket-nav.films-ouvert .ticket-chevron{transform:rotate(180deg);}
.ticket-cases{display:grid;grid-template-columns:1.3fr 1fr 1fr;height:28px;border-top:1px solid rgba(8,8,8,.8);font-size:8.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;}
.ticket-cases span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;transition:opacity .3s;}
.ticket-cases span + span{border-left:1px solid rgba(8,8,8,.8);}
.ticket-nav.change .ticket-titre,.ticket-nav.change .ticket-cases span{opacity:0;}
.ticket-nav.change .ticket-titre{transform:translateY(6px);}
/* sur les pages sans film, pas de cases : juste le titre de la page */
.ticket-nav.sans-cases .ticket-cases{display:none;}

.ticket-deroule{grid-row:2;display:grid;grid-template-rows:0fr;margin-top:8px;background:var(--creme);border-radius:8px;opacity:0;pointer-events:none;transition:grid-template-rows .9s var(--sortie),opacity .35s ease;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4));}
.ticket-deroule > div{overflow:hidden;min-height:0;}
.ticket-nav.films-ouvert #ticket-liste,.ticket-nav.menu-ouvert #ticket-panneau{grid-template-rows:1fr;opacity:1;pointer-events:auto;}
.ticket-films{padding:6px 16px 10px;}
.ticket-films a,.ticket-pages a{
  display:flex;align-items:baseline;gap:12px;padding:9px 0 7px;border-bottom:1px dashed rgba(8,8,8,.3);
  font-family:var(--titre);font-weight:800;font-size:22px;line-height:1.05;text-transform:uppercase;
  transition:transform .6s var(--sortie);
}
.ticket-films li:last-child a{border-bottom:0;}
.ticket-films a:hover,.ticket-pages a:hover{transform:translateX(6px);color:var(--violet);}
.ticket-films .num,.ticket-pages .num{font-family:var(--sans);font-size:10px;font-weight:500;opacity:.5;}
.ticket-pages{padding:8px 16px 0;}
.ticket-pages a{font-size:40px;padding:10px 0 6px;}
.ticket-pages a[aria-current] .num{opacity:1;}
.ticket-pages a[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet);align-self:center;margin-left:auto;}
.ticket-bas{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 16px;}
.ticket-reseaux{display:flex;gap:18px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.ticket-reseaux a:hover{text-decoration:underline;}
.langues{display:flex;border:1px solid var(--noir);border-radius:100px;overflow:hidden;font-size:11px;font-weight:500;letter-spacing:.1em;}
.langues > *{padding:4px 10px;}
.langues span[aria-current]{background:var(--violet);color:#fff;}
.langues a:hover{background:#E6DFF0;}

/* =========================================================================
   LES BOUTONS-TICKETS
   ========================================================================= */
.bouton-ticket{display:inline-flex;align-items:stretch;height:44px;color:var(--creme);}
.bt-texte,.bt-talon{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;overflow:hidden;isolation:isolate;transition:color .6s var(--sortie);}
.bt-texte{padding:0 22px 0 24px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-radius:100px 0 0 100px;}
.bt-talon{width:48px;border-left:1px dashed currentColor;border-radius:0 100px 100px 0;margin-left:-1px;}
.bt-texte::before,.bt-talon::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--degrade);background-size:160px 160px,100% 100%;transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--sortie);}
.bouton-ticket:hover .bt-texte,.bouton-ticket:hover .bt-talon{color:#fff;border-color:var(--violet);}
.bouton-ticket:hover .bt-texte::before,.bouton-ticket:hover .bt-talon::before{transform:scaleY(1);}
.bouton-ticket:hover .bt-talon::before{transition-delay:.06s;}
.bouton-ticket:active{transform:scale(.98);}
.bouton-creme .bt-texte,.bouton-creme .bt-talon{background:var(--creme);color:var(--noir);border-color:var(--creme);}
.bouton-creme .bt-talon{border-left-color:rgba(8,8,8,.45);}
.bouton-creme .bt-texte::before,.bouton-creme .bt-talon::before{background:var(--degrade);}
.bouton-noir .bt-texte,.bouton-noir .bt-talon{background:var(--noir);color:var(--creme);border-color:var(--noir);}
.bouton-noir .bt-talon{border-left-color:rgba(250,247,239,.4);}
.bouton-noir .bt-texte::before,.bouton-noir .bt-talon::before{background:var(--degrade);}
.bouton-noir:hover .bt-texte,.bouton-noir:hover .bt-talon{color:var(--creme);}

/* le petit ticket-label : « Galerie », « L'equipe »... */
.label-ticket{text-align:center;}
.label-ticket span{display:inline-block;position:relative;padding:9px 40px 9px 20px;border-radius:100px;background:var(--creme);color:var(--noir);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;}
.label-ticket span::after{content:"";position:absolute;right:16px;top:0;bottom:0;border-left:1px dashed rgba(8,8,8,.55);}

/* LE TABLEAU A FILETS */
.tableau{display:block;width:min(380px,100%);}
.tableau div,.tableau .tl{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:24px;padding:4px 0 2px;border-top:1.5px solid currentColor;font-family:var(--titre);font-weight:700;font-size:16px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;}
.tableau div:last-child,.tableau .tl:last-child{border-bottom:1.5px solid currentColor;}
.tableau dt,.tableau dd,.tableau .tl > span{text-align:center;white-space:nowrap;padding-top:.12em;}

/* LE TITRE A FILETS : chaque ligne porte son filet, les accents ont leur place */
.titre-filets{font-family:var(--titre);font-weight:800;text-transform:uppercase;}
.titre-filets .ligne{line-height:.9;padding:.17em var(--m) .1em;border-bottom:1.5px solid currentColor;}
.titre-filets .ligne:first-child{border-top:1.5px solid currentColor;}

/* le texte qui encadre une image */
.cadre-texte{position:absolute;inset:0;z-index:2;pointer-events:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);}
.cadre-texte span{position:absolute;white-space:nowrap;}
.c-haut-g{left:var(--m);top:var(--cadre-haut,var(--m));}
.c-haut{left:50%;top:var(--cadre-haut,var(--m));transform:translateX(-50%);}
.c-haut-d{right:var(--m);top:var(--cadre-haut,var(--m));}
.c-bas-g{left:var(--m);bottom:var(--m);}
.c-bas{left:50%;bottom:var(--m);transform:translateX(-50%);}
.c-bas-d{right:var(--m);bottom:var(--m);}
.c-gauche{left:calc(var(--m) + 6px);top:50%;transform:translate(-50%,-50%) rotate(-90deg) translateY(50%);}
.c-droite{right:calc(var(--m) + 6px);top:50%;transform:translate(50%,-50%) rotate(90deg) translateY(50%);}

/* =========================================================================
   L'INTRO : le showreel flou vu a travers une trame fine et discrete
   ========================================================================= */
.intro{position:fixed;inset:0;z-index:200;background:#050505;overflow:hidden;display:grid;place-items:center;transition:opacity 1.1s var(--sortie),visibility 0s linear 1.1s,transform 1.4s var(--sortie);}
html.deja-entre .intro{display:none;}
.intro-entrer:focus-visible{outline:none;}
.intro.sort{opacity:0;visibility:hidden;transform:scale(1.05);}
.intro-video{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(18px) saturate(.6) brightness(1.2);}
/* la trame : des points de 1px tous les 4px, a 55 % seulement */
.intro-trame{position:absolute;inset:0;opacity:.13;background:radial-gradient(circle at center,transparent 0 .9px,#050505 1.3px) 0 0/4px 4px;}
.intro-trame::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,5,5,.7) 0 18%,rgba(5,5,5,0) 60%);}
.intro-centre{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.intro-mono{width:clamp(70px,6.6vw,98px);aspect-ratio:667/747;}
.intro-nom{margin:22px 0 38px;font-family:var(--titre);font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:.42em;padding-left:.42em;line-height:1;}

/* =========================================================================
   LE CARROUSEL (Projets, et la version A de l'accueil)
   ========================================================================= */
.vues{position:fixed;left:50%;top:calc(var(--m) + 4px);z-index:125;transform:translateX(-50%);display:flex;padding:4px;border:1px solid var(--pointille);border-radius:100px;background:rgba(8,8,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.vue-bouton{height:30px;padding:0 14px;border-radius:100px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-doux);transition:background .3s,color .3s;}
.vue-bouton[aria-pressed="true"]{background:var(--violet);color:#fff;}
.defile{--gap:clamp(22px,3vw,54px);height:100svh;}
.defile-scene{position:relative;height:100svh;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;}
.defile-scene:active{cursor:grabbing;}
/* en vue defilement, la page ne defile pas : c'est le carrousel qui prend la molette */
html:not(.vue-planche) body[data-page="projets"]{overflow:hidden;}
html:not(.vue-planche) body[data-page="projets"] .pied{display:none;}
.defile-phrase{position:absolute;left:var(--m);bottom:clamp(26px,3.6vh,44px);max-width:30ch;font-family:var(--serif);font-size:10.5px;font-weight:500;line-height:1.9;letter-spacing:.26em;text-transform:uppercase;color:var(--creme-doux);}
.defile-piste{--w:clamp(230px,23vw,380px);position:absolute;inset:0;}
.film{--d:0;position:absolute;left:0;top:53%;width:var(--w);display:block;will-change:transform;}
.film > *{transform:scale(calc(1 - min(var(--d),2) * .08));}
.film{filter:blur(calc(min(var(--d),2) * 2.2px + var(--flou,0px))) brightness(calc(1 - min(var(--d),2) * .3));}
.film::before{transform:scale(calc(1 - min(var(--d),2) * .08));}
.film-image{display:block;aspect-ratio:.72;overflow:hidden;background:#151515;-webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;}
.film-image img,.film-image video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sortie);}
.film:hover .film-image img{transform:scale(1.05);}
.film::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.8) 100%);-webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;}
.film-info{position:absolute;left:8%;right:8%;bottom:8%;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}
.film-info .label{font-size:10.5px;margin-bottom:10px;}
.film-titre{font-family:var(--titre);font-weight:800;font-size:clamp(34px,3.3vw,54px);line-height:.9;text-transform:uppercase;}
.film-titre .ligne{padding-top:.1em;}
.film .tableau{margin-top:14px;width:100%;}
.film .tableau .tl{min-height:19px;padding:3px 0 1px;font-size:12.5px;}
.reglette{position:absolute;left:50%;bottom:clamp(22px,3.4vh,40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;}
.reglette-nom{font-family:var(--titre);font-weight:800;font-size:15px;line-height:1;text-transform:uppercase;color:var(--lilas);min-height:15px;}
.reglette-graduations{position:relative;display:flex;align-items:flex-end;gap:5px;height:30px;padding-bottom:12px;}
.grad{display:flex;justify-content:center;align-items:flex-end;width:12px;height:18px;}
.grad i{display:block;width:1.5px;height:14px;background:var(--creme-doux);transition:height .4s var(--sortie),background .3s;}
.grad.actif i{height:20px;background:var(--violet);}
.grad:hover i{background:var(--lilas);}
.grad-petit{display:block;width:1px;height:7px;background:var(--creme-faible);}
.reglette-curseur{position:absolute;left:0;bottom:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--violet);transform:translateX(var(--cx,0px));}
.defile-explorer{position:absolute;right:var(--m);bottom:clamp(22px,3.4vh,40px);}
.planche{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3vw,50px) clamp(14px,1.4vw,20px);padding:var(--haut) var(--m) 0;}
html.vue-planche .defile{display:none;}
html.vue-planche .planche{display:grid;}
.planche-image{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:6px;}
.planche-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--sortie);}
.planche-film:hover img{transform:scale(1.04);}
.planche-ligne{display:flex;align-items:baseline;gap:12px;margin-top:12px;}
.planche-ligne .num{font-size:11px;font-weight:500;color:var(--lilas);}
.planche-nom{font-family:var(--titre);font-weight:800;font-size:26px;line-height:1.05;text-transform:uppercase;transition:color .3s;}
.planche-film:hover .planche-nom{color:var(--lilas);}
.planche-cat{margin-left:auto;font-size:12px;color:var(--creme-doux);white-space:nowrap;}

/* =========================================================================
   L'ACCUEIL : LA PILE DE CARTES-FILMS
   Le script ecrit trois nombres par carte : --par (parallaxe de l'image),
   --s (echelle, plus petite loin du centre), --flou (flou de mouvement).
   ========================================================================= */
.pile{padding-top:var(--haut);}
.carte{padding:0 var(--m) clamp(18px,2.2vw,32px);}
.carte-cadre{position:relative;height:calc(100svh - var(--haut) - 28px);min-height:520px;overflow:hidden;background:#111;
  -webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;
  transform:scale(var(--s,1));filter:blur(var(--flou,0px));will-change:transform;}
.pile .carte:first-child .carte-cadre{animation:ouverture 1.6s var(--sortie) both;}
@keyframes ouverture{from{clip-path:inset(18% 22% 18% 22% round 24px);}to{clip-path:inset(0 0 0 0 round 0);}}
.carte-media{position:absolute;left:0;top:-7%;width:100%;height:114%;max-width:none;object-fit:cover;transform:translateY(var(--par,0%));}
.carte-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 80%,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 55%),radial-gradient(ellipse at 85% 30%,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 50%),linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.35) 100%);}
.carte-texte{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;padding:clamp(26px,3.6vw,56px) clamp(26px,4.4vw,66px);}
.carte-coin{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;}
.carte-annee{font-family:var(--titre);font-weight:700;font-size:clamp(34px,3vw,46px);line-height:1;}
.carte-coin-sous{margin-top:6px;font-family:var(--titre);font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--lilas);}
.carte-gauche{grid-column:1;grid-row:3;align-self:end;display:flex;flex-direction:column;align-items:flex-start;max-width:min(680px,64%);}
.carte-gauche .label{margin-bottom:14px;}
.carte-gauche .tableau{margin-top:22px;}
.carte-titre{font-family:var(--titre);font-weight:800;font-size:clamp(58px,8.4vw,142px);line-height:.86;text-transform:uppercase;}
.carte-faits{grid-column:2;grid-row:1/3;align-self:start;flex-direction:column;gap:clamp(22px,3vh,40px);width:min(260px,24vw);}
.carte-explorer{grid-column:2;grid-row:3;align-self:end;justify-self:center;}

/* =========================================================================
   VERSION B : L'ACCUEIL COURT
   ========================================================================= */
.ouverture{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;display:grid;place-items:center;}
.ouverture-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ouverture::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.5) 100%);pointer-events:none;}
.ouverture-centre{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--m);}
.ouverture-titre{margin:18px 0 16px;font-family:var(--titre);font-weight:800;font-size:clamp(70px,13vw,220px);line-height:.86;text-transform:uppercase;padding-top:.06em;}
.ouverture-phrase{max-width:34ch;font-size:15px;color:var(--creme-doux);}
.ouverture-actions{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:center;}
.son{height:44px;padding:0 18px;border:1px solid var(--pointille);border-radius:6px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:border-color .3s,color .3s;}
.son:hover,.son[aria-pressed="true"]{border-color:var(--lilas);color:var(--lilas);}
.dernier{padding:var(--section) var(--m) 0;text-align:center;}
.dernier-carte{position:relative;display:block;margin-top:32px;text-align:left;}
.dernier-cadre{display:block;height:min(78svh,820px);overflow:hidden;-webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;}
.dernier-cadre img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--sortie);}
.dernier-carte:hover .dernier-cadre img{transform:scale(1.04);}
.dernier-carte::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7) 100%);-webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;}
.dernier-texte{position:absolute;left:clamp(26px,4.4vw,66px);bottom:clamp(26px,4vw,56px);z-index:2;display:flex;flex-direction:column;}
.dernier-texte .label{margin-bottom:14px;}
.dernier-nom{font-family:var(--titre);font-weight:800;font-size:clamp(70px,11vw,180px);line-height:.84;text-transform:uppercase;}
.dernier-nom .ligne{padding-top:.08em;}
.dernier-date{margin-top:14px;font-family:var(--titre);font-weight:700;font-size:20px;text-transform:uppercase;}
.dernier-liens{display:flex;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap;}

/* =========================================================================
   PAGE FILM
   ========================================================================= */
.affiche{position:relative;height:82svh;min-height:480px;overflow:hidden;background:#000;}
.affiche-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.affiche::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 26%);}
.retour-rond{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--creme);color:var(--noir);transform:scaleX(-1);transition:background .3s,color .3s;}
.retour:hover .retour-rond{background:var(--violet);color:#fff;}
.retour{position:absolute;left:var(--m);top:calc(var(--m) + 96px);z-index:3;display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;}
.bande{position:relative;z-index:50;background:var(--creme);color:var(--noir);padding:clamp(34px,3.6vw,56px) 0 clamp(72px,8vw,120px);text-align:center;}
.bande-titre{margin-top:0;font-size:clamp(58px,9.6vw,158px);}
.rond-bas{position:relative;display:grid;place-items:center;width:34px;height:34px;margin:-6px auto 0;border-radius:50%;background:var(--noir);color:var(--creme);transition:transform .6s var(--sortie);}
.rond-bas:hover{transform:translateY(4px);background:var(--violet);}
.fiche{max-width:1180px;margin:clamp(48px,5vw,80px) auto 0;padding:0 var(--m);display:flex;justify-content:center;align-items:center;gap:clamp(40px,6vw,110px);flex-wrap:wrap;}
.tableau-sombre{justify-self:start;}
.faits{display:flex;gap:clamp(24px,3vw,48px);text-align:center;}
.faits dt{font-family:var(--serif);font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;}
.faits dd{margin-top:8px;font-family:var(--titre);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1;text-transform:uppercase;}
.bande-mot{max-width:860px;margin:clamp(64px,7vw,110px) auto 0;padding:0 var(--m);}
.bande-phrase{font-family:var(--serif);font-size:clamp(28px,3.3vw,48px);line-height:1.16;letter-spacing:-.015em;}
.bande-texte{max-width:60ch;margin:28px auto 0;color:var(--encre-doux);}
.bande-mention{max-width:58ch;margin:48px auto 0;padding:0 var(--m);font-size:12px;line-height:1.6;color:rgba(8,8,8,.55);}
.galerie{padding:clamp(80px,9vw,140px) 0 clamp(60px,7vw,110px);overflow:hidden;}
.gal-rangee{margin-top:clamp(28px,3vw,44px);}
.gal-rangee + .gal-rangee{margin-top:clamp(16px,2vw,26px);}
.gal-piste{display:flex;gap:clamp(16px,2vw,28px);width:max-content;transform:translate3d(var(--x,0px),0,0);will-change:transform;}
.gal-image img{height:clamp(170px,26vw,380px);width:auto;max-width:none;-webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;filter:brightness(.85);transition:filter .6s ease;}
.gal-image img:hover{filter:brightness(1);}
.generique{padding:clamp(30px,4vw,60px) var(--m) clamp(90px,9vw,140px);}
.generique-liste{max-width:560px;margin:34px auto 0;padding:22px 30px;border-radius:8px;background:var(--creme);color:var(--noir);}
.generique-liste div{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px dashed rgba(8,8,8,.35);}
.generique-liste div:last-child{border-bottom:0;}
.generique-liste dt{font-family:var(--serif);font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;}
.generique-liste dd{font-family:var(--titre);font-weight:800;font-size:22px;line-height:1.1;text-transform:uppercase;text-align:right;}
.suite{position:relative;z-index:50;background:var(--creme);color:var(--noir);padding:clamp(64px,7vw,110px) var(--m);display:grid;grid-template-columns:1fr 3fr;gap:20px;}
.suite-tous{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:330px;padding:28px;border:1px dashed var(--noir);border-radius:12px;transition:background .6s var(--sortie);}
.suite-tous:hover{background:#EFEBE0;}
.suite-titre{display:block;margin-top:14px;font-family:var(--titre);font-weight:800;font-size:clamp(40px,4.2vw,64px);line-height:.9;text-transform:uppercase;}
.suite-titre .ligne{padding-top:.06em;}
.suite-lien{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;}
.rond-petit{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--noir);color:var(--creme);transition:transform .6s var(--sortie);}
.rond-petit svg{width:12px;height:12px;}
a:hover .rond-petit{transform:translateX(4px);}
.suite-suivant{display:grid;grid-template-columns:1fr 1.6fr;min-height:330px;overflow:hidden;background:var(--noir);color:var(--creme);border-radius:12px;
  -webkit-mask:radial-gradient(circle 6px at left,#0000 97%,#000) left/51% 31px repeat-y,radial-gradient(circle 6px at right,#0000 97%,#000) right/51% 31px repeat-y;
          mask:radial-gradient(circle 6px at left,#0000 97%,#000) left/51% 31px repeat-y,radial-gradient(circle 6px at right,#0000 97%,#000) right/51% 31px repeat-y;}
.suite-info{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:28px 34px;border-right:1px dashed var(--pointille);}
.suite-suivant .rond-petit{background:var(--violet);color:#fff;}
.suite-image{overflow:hidden;}
.suite-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sortie);}
.suite-suivant:hover .suite-image img{transform:scale(1.05);}

/* LE LECTEUR, DANS LA PAGE
   Le cadre aux bords irreguliers, l'image du film, le rond violet. Au
   clic, le film joue a cet endroit avec nos commandes. */
.fenetre-page{max-width:1480px;margin:clamp(60px,7vw,110px) auto 0;padding:0 var(--m);}
.fenetre-cadre{position:relative;width:100%;aspect-ratio:16/9;background:#000;color:var(--creme);
  -webkit-mask:url("cadre.svg") center/100% 100% no-repeat;mask:url("cadre.svg") center/100% 100% no-repeat;}
.fenetre-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease,transform 1.8s var(--sortie),filter .8s;filter:brightness(.78) saturate(.92);}
.fenetre-cadre::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%);transition:opacity .6s;}
.fenetre.ouverte .fenetre-cadre::before{opacity:0;}

/* LE BOUTON DE LECTURE : un ticket, comme le menu.
   Le corps porte les mots, le talon la fleche ; une encoche de chaque
   cote de la perforation. Au survol, le talon se remplit de violet. */
.fenetre-jouer{position:absolute;inset:0;z-index:3;display:grid;place-items:center;transition:opacity .5s ease;}
.jouer-ticket{display:flex;height:84px;color:var(--noir);filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
  --talon:84px;
  -webkit-mask:radial-gradient(circle 8px at calc(100% - var(--talon)) 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - var(--talon)) 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 8px at calc(100% - var(--talon)) 0,#0000 98%,#000 100%) top/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - var(--talon)) 100%,#0000 98%,#000 100%) bottom/100% 51% no-repeat;
  transform:translateY(0);transition:transform .8s var(--sortie);}
.jouer-corps{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 30px 0 28px;background:var(--creme);border-radius:8px 0 0 8px;text-align:left;}
.jouer-sur{font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;opacity:.55;}
.jouer-titre{font-family:var(--titre);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;white-space:nowrap;}
.jouer-talon{flex:0 0 var(--talon);display:grid;place-items:center;background:var(--creme);border-left:1.5px dashed rgba(8,8,8,.45);border-radius:0 8px 8px 0;transition:background .45s,color .45s;}
.jouer-talon svg{width:16px;height:19px;transform:translateX(2px);transition:transform .6s var(--sortie);}
.fenetre-jouer:hover .jouer-ticket{transform:translateY(-4px);}
.fenetre-jouer:hover .jouer-talon{background:var(--violet);color:#fff;border-left-color:transparent;}
.fenetre-jouer:hover .jouer-talon svg{transform:translateX(5px);}
.fenetre-cadre:hover .fenetre-poster{transform:scale(1.02);filter:brightness(.7) saturate(.92);}
.fenetre.ouverte .fenetre-poster,.fenetre.ouverte .fenetre-jouer{opacity:0;pointer-events:none;}
.fenetre-cadre{overflow:hidden;}
/* on agrandit le cadre YouTube au-dela de l'image : son titre en haut et son logo en bas sortent du champ */
.fenetre-cadre iframe{position:absolute;left:-2%;top:-11%;width:104%;height:122%;border:0;pointer-events:none;}
.fenetre-fermer{position:absolute;top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);z-index:6;display:none;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--creme);color:var(--noir);transition:background .3s,color .3s;}
.fenetre.ouverte .fenetre-fermer{display:grid;}
.fenetre-fermer:hover{background:var(--violet);color:#fff;}
.fenetre-charge{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--creme-doux);}

/* LES COMMANDES : une barre-ticket creme qui flotte en bas de l'image */
.lecteur{position:absolute;left:50%;bottom:clamp(14px,2.4vw,30px);z-index:5;transform:translateX(-50%);
  width:min(760px,calc(100% - 2 * clamp(14px,2.4vw,30px)));height:52px;display:flex;align-items:stretch;
  background:var(--creme);color:var(--noir);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.4);
  transition:opacity .45s ease,transform .6s var(--sortie);}
.fenetre.repos .lecteur{opacity:0;transform:translate(-50%,8px);}
.lecteur > *{display:flex;align-items:center;justify-content:center;}
.lecteur > * + *{border-left:1px dashed rgba(8,8,8,.35);}
.lecteur button{padding:0 18px;gap:8px;transition:background .3s,color .3s;}
.lecteur button:first-child{border-radius:8px 0 0 8px;}
.lecteur button:last-child{border-radius:0 8px 8px 0;}
.lecteur button:hover{background:var(--violet);color:#fff;}
.lecteur-son span{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;}
.lecteur-temps{padding:0 14px;font-family:var(--titre);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;min-width:62px;}
.lecteur-barre{position:relative;flex:1;padding:0 16px;cursor:pointer;}
.lecteur-barre .rail{position:relative;width:100%;height:0;border-top:1.5px dotted rgba(8,8,8,.45);}
.lecteur-barre .fait{position:absolute;left:0;top:-1.5px;height:2px;width:0;background:var(--violet);}
.lecteur-barre .tete{position:absolute;top:-5.5px;left:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--violet);}
.lecteur[hidden],.lecteur svg[hidden],.fenetre-charge[hidden]{display:none;}

/* LE GENERIQUE, EN GRILLE : la realisation a gauche sur une image du film,
   les autres postes en cases a droite, les deux premieres en noir. */
.generique{max-width:1480px;margin:clamp(70px,8vw,120px) auto 0;padding:0 var(--m);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:20px;text-align:left;}
.gen-portrait{position:relative;min-height:420px;border-radius:12px;overflow:hidden;background:#111;color:var(--creme);}
.gen-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6);}
.gen-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0) 35%,rgba(8,8,8,.85) 100%);}
.gen-portrait-texte{z-index:1;}
.gen-portrait .label{color:var(--lilas);}
.gen-portrait-texte{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;}
.gen-portrait-nom{font-family:var(--titre);font-weight:800;font-size:clamp(36px,3.4vw,56px);line-height:.95;text-transform:uppercase;}
/* Les separations : chaque case trace seulement son trait du haut et celui
   de gauche, jamais ceux du bord. Aucun pointille ne depasse ni ne s'arrete
   au mauvais endroit, quel que soit le nombre de postes. */
.gen-grille{display:grid;grid-template-columns:1fr 1fr;align-content:stretch;border:1px dashed rgba(8,8,8,.55);border-radius:12px;overflow:hidden;}
.gen-case{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:136px;padding:24px 18px;text-align:center;border-top:1px dashed rgba(8,8,8,.55);}
.gen-case:nth-child(-n+2){border-top:0;}
.gen-case:nth-child(even){border-left:1px dashed rgba(8,8,8,.55);}
.gen-case:last-child:nth-child(odd){grid-column:1/-1;}
.gen-case .label{color:rgba(8,8,8,.72);}
.gen-nom{font-family:var(--titre);font-weight:800;font-size:clamp(28px,2.6vw,42px);line-height:.95;text-transform:uppercase;}

/* =========================================================================
   SERVICES
   ========================================================================= */
.entete-page{position:relative;height:88svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:clamp(40px,6vh,80px);}
.entete-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);}
.entete-titre{position:relative;z-index:2;width:100%;font-size:clamp(70px,12vw,200px);text-align:center;}
.services{max-width:1240px;margin:0 auto;padding:var(--section) var(--m) 0;}
.presta{display:grid;grid-template-columns:70px minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(18px,2.4vw,40px);align-items:start;padding:30px 0 34px;border-top:1px dashed var(--pointille);}
.presta:last-child{border-bottom:1px dashed var(--pointille);}
.presta-n{font-family:var(--serif);font-size:13px;letter-spacing:.2em;padding-top:8px;}
.presta-titre{font-family:var(--titre);font-weight:800;font-size:clamp(36px,3.6vw,56px);line-height:.9;text-transform:uppercase;padding-top:.06em;}
.presta-texte{color:var(--creme-doux);font-size:15.5px;}
.presta-jalons li{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--creme-faible);padding-bottom:6px;}
.exemples{max-width:1240px;margin:0 auto;padding:var(--section) var(--m) 0;text-align:center;}
.exemples-liste{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;text-align:left;}
.exemple{display:grid;grid-template-columns:1fr 150px;color:var(--noir);filter:drop-shadow(0 20px 36px rgba(0,0,0,.35));}
.exemple-corps{background:var(--creme);padding:28px 30px 26px;border-radius:10px 0 0 10px;}
.label-sombre{color:rgba(8,8,8,.6);}
.exemple-titre{margin-top:10px;font-family:var(--titre);font-weight:800;font-size:clamp(30px,2.6vw,40px);line-height:.92;text-transform:uppercase;}
.exemple-lignes{margin-top:22px;}
.exemple-lignes div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(8,8,8,.3);font-size:14px;}
.exemple-lignes div:last-child{border-bottom:0;}
.exemple-lignes dt{color:var(--encre-doux);}
.exemple-lignes dd{text-align:right;}
.exemple-talon{background:var(--creme);border-left:1.5px dashed rgba(8,8,8,.5);border-radius:0 10px 10px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 10px;text-align:center;}
.exemple-talon span{font-family:var(--serif);font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;}
.exemple-talon strong{font-family:var(--titre);font-weight:800;font-size:clamp(30px,2.8vw,42px);line-height:.95;}
.note-serif{margin-top:44px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,27px);}
.methode{max-width:1240px;margin:0 auto;padding:var(--section) var(--m) 0;text-align:center;}
.methode-duree{margin-top:34px;font-family:var(--titre);font-weight:800;font-size:clamp(46px,6vw,100px);line-height:.88;text-transform:uppercase;}
.methode-duree em{display:block;margin-top:12px;font-family:var(--serif);font-weight:400;font-style:italic;text-transform:none;font-size:.5em;}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;text-align:left;}
.etape{border:1px dashed var(--pointille);border-radius:12px;padding:22px 22px 26px;}
.etape-titre{margin-top:34px;font-family:var(--titre);font-weight:800;font-size:clamp(34px,3vw,46px);line-height:.9;text-transform:uppercase;}
.etape p{margin-top:12px;font-size:15px;color:var(--creme-doux);}

/* =========================================================================
   A PROPOS
   ========================================================================= */
.manifeste{min-height:100svh;padding:var(--haut) var(--m) var(--m);display:grid;grid-template-columns:1fr 2.4fr 1fr;gap:clamp(14px,1.4vw,20px);}
.ogive{position:relative;margin:0;overflow:hidden;}
.ogive img{width:100%;height:100%;object-fit:cover;-webkit-mask:url("ogive.svg") center/100% 100% no-repeat;mask:url("ogive.svg") center/100% 100% no-repeat;}
.ogive-grande{border:1px dashed var(--pointille);border-radius:12px;padding:10px;}
.manifeste-centre{border:1px dashed var(--pointille);border-radius:12px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:40px 0;}
.manifeste-sur,.manifeste-sous{font-family:var(--titre);font-weight:700;font-size:clamp(20px,1.8vw,27px);line-height:1.05;text-transform:uppercase;color:var(--creme-doux);padding:0 16px;}
.manifeste-titre{margin:clamp(32px,4vw,56px) 0;font-size:clamp(52px,6.6vw,114px);}
.qui{max-width:1000px;margin:0 auto;padding:var(--section) var(--m) clamp(40px,4vw,60px);text-align:center;}
.qui-fort{font-family:var(--serif);font-size:clamp(26px,3vw,44px);line-height:1.2;letter-spacing:-.012em;}
.qui-texte{max-width:60ch;margin:32px auto 0;color:var(--creme-doux);}
.equipe{padding:var(--section) var(--m) 0;}
.ogives{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,20px);max-width:1180px;margin:40px auto 0;}
.ogives .ogive img{aspect-ratio:690/968;height:auto;}

/* =========================================================================
   CONTACT : aplat aubergine, profond et discret
   ========================================================================= */
body[data-page="contact"]{background:var(--aubergine);}
.contact-ecran{min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:var(--haut) 0 var(--m);}
.contact-ecran .label{margin-bottom:20px;color:var(--lilas);}
body[data-page="contact"]{background:radial-gradient(ellipse at 50% 30%,#2E1B55 0%,var(--aubergine) 60%) fixed;}
.contact-titre{font-size:clamp(64px,11vw,190px);}
.contact-lignes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,30px);margin:clamp(40px,6vh,70px) auto 0;width:min(1100px,calc(100% - 2 * var(--m)));}
.contact-ligne{display:flex;align-items:baseline;justify-content:center;gap:16px;padding:6px 0 4px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:color .3s;}
.contact-ligne .label{font-size:9px;}
.contact-val{font-family:var(--titre);font-weight:800;font-size:clamp(24px,2.8vw,44px);line-height:1.05;text-transform:uppercase;}
.contact-ligne:hover{color:var(--lilas);}
.contact-zone{padding:0 var(--m) var(--section);}
.contact-intro{max-width:52ch;margin:0 auto;text-align:center;font-size:17px;color:var(--creme-doux);}
.contact-ticket{display:grid;grid-template-columns:minmax(0,1fr) 150px;max-width:900px;margin:40px auto 0;color:var(--noir);filter:drop-shadow(0 24px 44px rgba(0,0,0,.4));}
.contact-form{background:var(--creme);padding:clamp(26px,3vw,40px);border-radius:10px 0 0 10px;}
.contact-talon{background:var(--creme);border-left:1.5px dashed rgba(8,8,8,.5);border-radius:0 10px 10px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--titre);font-weight:800;font-size:18px;text-transform:uppercase;}
.talon-mono{width:40px;aspect-ratio:667/747;background:var(--noir);margin-bottom:10px;}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.champ{margin-bottom:22px;}
.champ label{display:block;margin-bottom:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;}
.champ input,.champ select,.champ textarea{display:block;width:100%;padding:8px 0 10px;background:transparent;border:0;border-bottom:1.5px solid var(--noir);border-radius:0;color:var(--noir);font:inherit;font-size:17px;}
.champ select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--noir) 50%) right 6px center/7px 7px no-repeat;}
.champ textarea{resize:vertical;min-height:120px;}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-bottom-width:3px;padding-bottom:8.5px;}
.champ-aide{margin-top:6px;font-size:12.5px;color:var(--encre-doux);}
.form-piege{position:absolute;left:-9999px;opacity:0;}
.form-merci-titre{font-family:var(--titre);font-weight:800;font-size:40px;text-transform:uppercase;line-height:.95;margin-bottom:14px;}

/* ---------------------------------------------------------------- PIED */
.pied{position:relative;z-index:50;padding:var(--section) var(--m) 34px;text-align:center;background:var(--noir);display:flex;flex-direction:column;align-items:center;}
body[data-page="contact"] .pied{background:var(--aubergine);}
.pied-mono{width:54px;aspect-ratio:667/747;}
.pied-titre{margin:30px 0 36px;font-family:var(--titre);font-weight:800;font-size:clamp(60px,9vw,150px);line-height:.9;text-transform:uppercase;}
.pied-titre .ligne{padding-top:.06em;}
.pied-ligne{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:70px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-doux);}
.pied-ligne a:hover{color:var(--creme);}
.pied-copy{margin-top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-faible);}

/* ------------------------------------------------------------ LE GRAIN D'IMAGE
   Un grain de pellicule doux (facon 65 mm / 400 ISO) : un bruit tres fin,
   sans couleur, en « soft-light » a faible opacite, qui change de tirage
   24 fois par seconde. Seulement sur les images. */
.grain-image{position:absolute;inset:-60px;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;mix-blend-mode:soft-light;opacity:.34;
  animation:grain-image .34s steps(1) infinite;}
@keyframes grain-image{
  0%{transform:translate(0,0)}12%{transform:translate(-23px,17px)}25%{transform:translate(31px,-9px)}37%{transform:translate(-12px,-28px)}
  50%{transform:translate(19px,24px)}62%{transform:translate(-35px,6px)}75%{transform:translate(8px,-33px)}87%{transform:translate(27px,13px)}100%{transform:translate(0,0)}}
.film-image,.planche-image,.suite-image,.affiche{position:relative;overflow:hidden;}
.carte-texte{z-index:3;}
@media(prefers-reduced-motion:reduce){.grain-image{animation:none;}}

/* =========================================================================
   LES VOLETS : la galerie et l'equipe
   Ils s'ouvrent en iris depuis le bouton clique (--ox, --oy), comme
   l'ouverture d'un diaphragme. Le contenu arrive ensuite, en cascade.
   ========================================================================= */
.label-ticket .ouvre{display:inline-block;cursor:pointer;}
.label-ticket .ouvre span{transition:background .4s,color .4s;}
.label-ticket .ouvre b{position:absolute;right:0;top:0;bottom:0;width:16px;display:grid;place-items:center;font-weight:500;font-size:14px;transition:transform .6s var(--sortie);}
.label-ticket .ouvre:hover span{background:var(--degrade);color:#fff;}
.label-ticket .ouvre:hover span::after{border-left-color:rgba(255,255,255,.6);}
.label-ticket .ouvre:hover b{transform:rotate(90deg);}
.ogives.ouvre{cursor:pointer;background:none;border:0;padding:0;color:inherit;width:100%;}
.ogives.ouvre .ogive img{transition:transform 1.2s var(--sortie),filter .6s;}
.ogives.ouvre:hover .ogive img{transform:scale(1.03);}

.volet{position:fixed;inset:0;z-index:250;background:#0B0911;color:var(--creme);overflow:hidden;
  /* LE TICKET QUI GRANDIT : le volet part exactement du bouton clique
     (--vt, --vr, --vb, --vl), creme comme lui, s'etend a tout l'ecran puis
     bascule au sombre. La fermeture refait le chemin a l'envers et rentre
     dans le bouton. Fluide et rapide : un peu plus d'une demi-seconde. */
  clip-path:inset(var(--vt,50%) var(--vr,50%) var(--vb,50%) var(--vl,50%) round 20px);
  background:var(--creme);}
.volet.ouvert{animation:volet-ouvre .56s cubic-bezier(.7,0,.25,1) forwards;}
.volet.ferme{animation:volet-ferme .46s cubic-bezier(.7,0,.25,1) forwards;}
@keyframes volet-ouvre{
  0%{clip-path:inset(var(--vt) var(--vr) var(--vb) var(--vl) round 20px);background:var(--creme);}
  78%{clip-path:inset(0 0 0 0 round 0);background:var(--creme);}
  79%,100%{clip-path:inset(0 0 0 0 round 0);background:#0B0911;}}
@keyframes volet-ferme{
  0%,20%{clip-path:inset(0 0 0 0 round 0);background:#0B0911;}
  21%{clip-path:inset(0 0 0 0 round 0);background:var(--creme);}
  100%{clip-path:inset(var(--vt) var(--vr) var(--vb) var(--vl) round 20px);background:var(--creme);}}
.volet-defile{opacity:0;}
.volet.ouvert .volet-defile{animation:volet-contenu .3s ease .44s both;}
@keyframes volet-contenu{from{opacity:0}to{opacity:1}}
.volet[hidden]{display:block;visibility:hidden;}
.volet-defile{position:relative;z-index:1;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:clamp(90px,10vh,130px) var(--m) clamp(60px,8vh,110px);}
.volet-tete{text-align:center;margin-bottom:clamp(40px,6vh,80px);}
.volet-tete .label{color:var(--lilas);margin-bottom:22px;}
.volet-titre{font-size:clamp(56px,9vw,150px);}
.volet-fermer{position:fixed;right:var(--m);top:var(--m);z-index:3;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 16px;border-radius:100px;background:var(--creme);color:var(--noir);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(-10px);transition:background .3s,color .3s;}
.volet.ouvert .volet-fermer{animation:volet-contenu .3s ease .48s both;transform:none;}
.volet.ouvert .volet-fermer{opacity:1;transform:none;}
.volet-fermer:hover{background:var(--violet);color:#fff;}
/* la cascade : chaque piece arrive quand l'iris est deja grand ouvert */
.volet .mosaique-case,.volet .fiche-membre{opacity:0;transform:translateY(40px) scale(.97);filter:blur(8px);
  transition:opacity .6s var(--sortie),transform .8s var(--sortie),filter .6s var(--sortie);transition-delay:calc(.42s + var(--i,0) * 45ms);}
.volet.ouvert .mosaique-case,.volet.ouvert .fiche-membre{opacity:1;transform:none;filter:none;}

/* LA MOSAIQUE : des colonnes, chaque image a son vrai format */
.mosaique{columns:3 300px;column-gap:14px;max-width:1500px;margin:0 auto;}
.mosaique-case{break-inside:avoid;margin:0 0 14px;}
.mosaique-bouton{display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in;overflow:hidden;border-radius:8px;}
.mosaique-bouton img{width:100%;height:auto;transition:transform 1.2s var(--sortie),filter .5s;filter:brightness(.88);}
.mosaique-bouton:hover img{transform:scale(1.04);filter:brightness(1);}
.loupe{position:fixed;inset:0;z-index:4;display:grid;place-items:center;background:rgba(8,8,8,.94);padding:clamp(20px,5vw,80px);
  opacity:0;transition:opacity .4s ease;cursor:zoom-out;}
.loupe[hidden]{display:grid;visibility:hidden;pointer-events:none;}
.loupe.vue{opacity:1;}
.loupe-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;transform:scale(.94);transition:transform .7s var(--sortie);}
.loupe.vue .loupe-image{transform:none;}
.loupe-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;background:var(--creme);color:var(--noir);cursor:pointer;transition:background .3s,color .3s;}
.loupe-nav:hover{background:var(--violet);color:#fff;}
.loupe-prec{left:var(--m);}
.loupe-prec svg{transform:scaleX(-1);}
.loupe-suiv{right:var(--m);}
.loupe-compte{position:absolute;bottom:var(--m);left:0;right:0;text-align:center;font-size:11px;letter-spacing:.24em;color:var(--creme-doux);}

/* L'EQUIPE : trois fiches */
.fiches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);max-width:1400px;margin:0 auto;}
.fiche-membre .ogive{margin-bottom:22px;}
.fiche-membre .ogive img{aspect-ratio:690/968;height:auto;}
.fiche-membre > .label{color:var(--lilas);}
.fiche-nom{margin-top:10px;font-family:var(--titre);font-weight:800;font-size:clamp(40px,3.8vw,62px);line-height:.9;text-transform:uppercase;}
.fiche-nom .ligne{padding-top:.1em;}
.fiche-bio{margin-top:18px;color:var(--creme-doux);max-width:44ch;}
.fiche-sous{margin-top:28px;margin-bottom:10px;}
.fiche-films a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px dashed var(--pointille);transition:color .3s,padding .6s var(--sortie);}
.fiche-films li:last-child a{border-bottom:1px dashed var(--pointille);}
.fiche-films a:hover{color:var(--lilas);padding-left:8px;}
.fiche-film{font-family:var(--titre);font-weight:800;font-size:22px;line-height:1.05;text-transform:uppercase;}
.fiche-postes{font-size:12px;color:var(--creme-doux);text-align:right;}
@media(max-width:860px){.fiches{grid-template-columns:1fr;gap:56px;max-width:460px;}}
@media(prefers-reduced-motion:reduce){
  .volet.ouvert,.volet.ferme,.volet.ouvert .volet-defile{animation-duration:.01ms;animation-delay:0s;}
  .volet .mosaique-case,.volet .fiche-membre{transition:none;opacity:1;transform:none;filter:none;}
}

/* ------------------------------------------------------------ LES LETTRES
   Chaque titre est decoupe en lettres par le script. Elles montent une par
   une, par a-coups : steps() donne le rendu d'une animation a 12 images
   par seconde, comme chez Siena. La ligne masque ce qui depasse ; elle a
   assez de marge en haut pour que les accents ne soient pas coupes. */
.decoupe .ligne{overflow:hidden;}
/* marge haute : l'accent d'un É depasse de la capitale, le masque ne doit pas le couper */
.decoupe:not(.titre-filets) .ligne{padding-top:.2em;}
.decoupe:not(.titre-filets) .ligne:first-child{margin-top:-.2em;}
.car{display:inline-block;white-space:pre;transform:translateY(110%);transition:transform .5s steps(6,end);transition-delay:calc(var(--c,0) * 42ms);}
.decoupe.lu .car{transform:none;}

/* ------------------------------------------------------------ APPARITION */
.apparait{opacity:0;transform:translateY(24px);transition:opacity 1s var(--sortie),transform 1.2s var(--sortie);transition-delay:calc(var(--i,0) * 90ms);}
.apparait.vu{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .grain{animation:none;}
  .intro{display:none;}
  .apparait{opacity:1;transform:none;transition:none;}
  .film{filter:none;transform:none;}
  .car{transform:none;transition:none;}
  .carte-cadre{transform:none;filter:none;animation:none !important;}
}

/* ---------------------------------------------------------------- MOBILE */
@media(max-width:1100px){.defile-phrase{max-width:22ch;}}
@media(max-width:980px){
  .fiche{grid-template-columns:1fr;justify-items:center;}
  .tableau-sombre,.fiche-film{justify-self:center;}
  .presta{grid-template-columns:50px 1fr;}
  .presta-texte,.presta-jalons{grid-column:2;}
  .etapes{grid-template-columns:1fr 1fr;}
  .manifeste{grid-template-columns:1fr 1.6fr 1fr;}
  .planche{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  :root{--haut:120px;}
  .logo-mot{display:none;}
  .ticket{height:84px;--talon:66px;}
  .logo{height:84px;}
  .ticket-nav.replie:not(.menu-ouvert):not(.films-ouvert){width:66px;}
  .talon-trait{width:26px;}
  .ticket-haut{padding:0 10px;gap:9px;}
  .ticket-vignette{flex-basis:30px;width:30px;height:30px;}
  .ticket-titre{font-size:17px;}
  .ticket-cases{height:24px;font-size:7.5px;letter-spacing:.1em;}
  .ticket-pages a{font-size:32px;}
  .vues{top:calc(var(--m) + 96px);}
  .defile-piste{--w:62vw;}
  .film{top:54%;}
  .defile-phrase{display:none;}
  .defile-explorer{right:50%;transform:translateX(50%);bottom:118px;}
  .reglette-graduations{gap:3px;}
  .grad{width:8px;}
  .planche{grid-template-columns:1fr;}
  .cadre-texte .c-gauche,.cadre-texte .c-droite,.cadre-texte .c-haut-g,.cadre-texte .c-haut-d,.cadre-texte .c-bas-g,.cadre-texte .c-bas-d{display:none;}
  .affiche-titre{bottom:20%;}
  .retour{left:var(--m);bottom:calc(var(--m) + 34px);}
  .faits{flex-wrap:wrap;justify-content:center;}
  .suite{grid-template-columns:1fr;}
  .suite-tous{min-height:0;}
  .suite-suivant{grid-template-columns:1fr;}
  .suite-image{order:-1;height:200px;}
  .suite-info{border-right:0;}
  .manifeste{grid-template-columns:1fr;min-height:0;}
  .manifeste > .ogive{display:none;}
  .ogives{gap:8px;}
  .presta{grid-template-columns:1fr;gap:12px;}
  .presta-texte,.presta-jalons{grid-column:1;}
  .exemples-liste{grid-template-columns:1fr;}
  .exemple{grid-template-columns:1fr 110px;}
  .etapes{grid-template-columns:1fr;}
  .contact-lignes{grid-template-columns:1fr;}
  .contact-ligne{flex-direction:column;align-items:center;gap:4px;}
  .contact-ticket{grid-template-columns:1fr;}
  .contact-form{border-radius:10px 10px 0 0;}
  .contact-talon{border-left:0;border-top:1.5px dashed rgba(8,8,8,.5);border-radius:0 0 10px 10px;padding:18px;flex-direction:row;}
  .talon-mono{margin:0 6px 0 0;width:24px;}
  .champs-2{grid-template-columns:1fr;gap:0;}
  .lecteur{gap:12px;padding:14px 16px 18px;}
  .lecteur-son span{display:none;}
  .dernier-cadre{height:60svh;}
  .carte-cadre{min-height:480px;height:calc(100svh - var(--haut) - 20px);}
  .carte-texte{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;padding:24px 22px 26px;}
  .carte-gauche{grid-row:3;max-width:100%;}
  .carte-faits{grid-column:1;grid-row:2;align-self:center;width:auto;flex-direction:row;flex-wrap:wrap;gap:14px 22px;text-align:left;}
  .carte-faits dd{font-size:21px;}
  .carte-explorer{grid-column:1;grid-row:4;justify-self:start;margin-top:22px;}
  .carte-titre{font-size:clamp(50px,15vw,76px);}
  .retour{top:calc(var(--m) + 76px);}
  .generique{grid-template-columns:1fr;}
  .gen-portrait{min-height:300px;}
  .gen-case{min-height:110px;padding:16px;}
  .jouer-titre{font-size:22px;}
  .jouer-ticket{height:70px;--talon:66px;}
  .jouer-corps{padding:0 18px;}
  .lecteur{height:46px;}
  .lecteur-temps{min-width:0;padding:0 8px;font-size:13px;}
  .lecteur button{padding:0 12px;}
  .lecteur-son span,#film-plein{display:none;}
}


/* =========================================================================
   AJOUTS DU 05/10/2026
   ========================================================================= */
/* L'equipe : les photos portent l'ancien role incruste en bas, on les
   recadre sur le visage et on ecrit le nom et le role dessous. */
.ogive.membre img{aspect-ratio:690/700 !important;object-position:50% 0;}
.membre figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;text-align:center;}
.membre-nom{font-family:var(--titre);font-weight:800;font-size:clamp(24px,2.2vw,34px);line-height:1;text-transform:uppercase;}
.membre .label{color:var(--lilas);}
.fiche-membre > .label{margin-top:4px;}
.qui-texte + .qui-texte{margin-top:18px;}

/* Services sans prix */
.sv-intro{max-width:1000px;margin:0 auto;padding:var(--section) var(--m) 0;text-align:center;}
.savoirs{padding:var(--section) var(--m) 0;max-width:1480px;margin:0 auto;}
.savoirs-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,56px);}
.savoir{border:1px dashed var(--pointille);border-radius:12px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:12px;}
.savoir .label{color:var(--lilas);}
.savoir-titre{margin:0;font-family:var(--titre);font-weight:800;font-size:clamp(34px,3.6vw,56px);line-height:.95;text-transform:uppercase;}
.savoir-texte{margin:0;color:var(--creme-doux);max-width:52ch;}
.savoir-large{grid-column:1/-1;}
.avap{position:relative;margin:14px 0 0;aspect-ratio:16/9;max-width:100%;border-radius:10px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;}
.avap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
/* image d'exemple : un LOG simule (plat, peu sature) en attendant les vrais fichiers */
.avap-avant{filter:contrast(.58) saturate(.42) brightness(1.18) sepia(.08);clip-path:inset(0 calc(100% - var(--x)) 0 0);}
.avap-ligne{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--creme);pointer-events:none;}
.avap-poignee{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--creme);box-shadow:0 4px 18px rgba(0,0,0,.35);}
.avap-poignee::before,.avap-poignee::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent;}
.avap-poignee::before{left:9px;border-right-color:var(--noir);}
.avap-poignee::after{right:9px;border-left-color:var(--noir);}
.avap-tag{position:absolute;top:14px;padding:6px 12px;border-radius:100px;background:rgba(8,8,8,.6);font-size:11px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;}
.avap-tag-g{left:14px;}.avap-tag-d{right:14px;}
.avap-curseur{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}
.avap-note{position:absolute;left:14px;bottom:12px;font-size:11px;color:var(--creme-doux);background:rgba(8,8,8,.55);padding:5px 10px;border-radius:6px;pointer-events:none;}
.sv-cta{max-width:1100px;margin:var(--section) auto 0;padding:0 var(--m) var(--section);text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;}
.sv-cta .label{color:var(--lilas);}
.sv-cta-titre{font-size:clamp(46px,6.4vw,110px);}
.sv-cta-texte{max-width:52ch;color:var(--creme-doux);margin:0;}

/* Mentions legales et 404 */
.legal{max-width:900px;margin:0 auto;padding:calc(var(--haut) + 40px) var(--m) var(--section);}
.legal-titre{font-size:clamp(48px,7vw,110px);margin:0 0 clamp(30px,4vw,60px);}
.legal-bloc{padding:22px 0;border-top:1px dashed var(--pointille);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;}
.legal-bloc h2{margin:0;color:var(--lilas);}
.legal-bloc p{margin:0;color:var(--creme-doux);line-height:1.6;}
.legal-bloc a{color:var(--creme);}
.page-404{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:80svh;justify-content:center;}
.legal-404-texte{color:var(--creme-doux);max-width:44ch;}
.pied-copy a{color:inherit;text-decoration:underline;text-underline-offset:3px;}

@media (max-width:760px){
  .ogives{grid-template-columns:1fr;max-width:300px;gap:34px;}
  .savoirs-grille{grid-template-columns:1fr;}
  .legal-bloc{grid-template-columns:1fr;gap:8px;}
  .gen-grille{grid-template-columns:1fr;}
  .gen-case:nth-child(2){border-top:1px dashed rgba(8,8,8,.55);}
  .gen-case:nth-child(even){border-left:0;}
}


/* =========================================================================
   LES ANIMATIONS CHOISIES DANS LES LABOS (06/10/2026), voir effets.js
   ========================================================================= */
/* 22 chargement en mosaique */
.chargement{position:fixed;inset:0;z-index:400;background:var(--noir);display:grid;place-items:center;transition:opacity .6s ease;}
.chargement.fin{opacity:0;pointer-events:none;}
.chargement-grille{position:relative;}
.chargement .tuile{position:absolute;width:calc(var(--t) - 4px);height:calc(var(--t) - 4px);margin:2px;border-radius:2px;transform:scale(0) rotate(-45deg);transition:transform .45s cubic-bezier(.34,1.6,.5,1) var(--d);}
.chargement.pose .tuile{transform:none;}
.chargement.part .tuile{transform:scale(0) rotate(45deg);transition:transform .3s steps(3) calc(var(--d) * .6);}
.tuile.p1{background:var(--violet);}
.tuile.p2{background:repeating-linear-gradient(90deg,var(--lilas) 0 2px,transparent 2px 5px),#0d0c10;}
.tuile.p3{background:radial-gradient(circle,var(--creme) 0 1.3px,transparent 1.6px) 0 0/6px 6px,var(--aubergine);}
.tuile.p4{background:repeating-linear-gradient(0deg,var(--creme) 0 2px,var(--violet) 2px 5px);}
.tuile.p5{background:conic-gradient(var(--creme) 25%,#0d0c10 0 50%,var(--creme) 0 75%,#0d0c10 0) 0 0/8px 8px;}
.tuile.p6{background:var(--degrade);background-size:160px 160px,100% 100%;}

/* 27 + 43 boutons gelee */
.gelee-prete{position:relative;isolation:isolate;}
.gelee-fond{position:absolute;inset:-16px;z-index:-1;pointer-events:none;background:var(--creme);}
.bouton-noir .gelee-fond{background:var(--noir);}
.gelee-degrade{position:absolute;inset:0;background:var(--degrade);background-size:160px 160px,100% 100%;opacity:0;transition:opacity .5s var(--sortie);}
.gelee-prete:hover .gelee-degrade{opacity:1;}
.gelee-prete .bt-texte,.gelee-prete .bt-talon{background:transparent !important;border-color:transparent !important;}
.gelee-prete .bt-talon{border-left:1px dashed rgba(8,8,8,.4) !important;}
.bouton-noir.gelee-prete .bt-talon{border-left-color:rgba(250,247,239,.4) !important;}
.gelee-prete .bt-texte::before,.gelee-prete .bt-talon::before{display:none;}
.gelee-prete:hover .bt-talon{border-left-color:rgba(255,255,255,.5) !important;}

/* 20 le trait */
.trait{position:relative;margin:var(--section) var(--m) 0;background:var(--creme);color:var(--noir);overflow:hidden;border-radius:14px;padding:clamp(40px,6vw,90px) clamp(20px,4vw,60px);}
.trait-texte p{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(30px,7.2vw,120px);line-height:1;letter-spacing:-.04em;white-space:nowrap;}
.trait-dessus{position:absolute;inset:0;padding:inherit;pointer-events:none;}
.trait-dessus p.cache{visibility:hidden;}
.trait svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;}

/* 13 texte liquide */
.liquide{position:relative;height:min(78svh,720px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;margin-top:var(--section);}
.liquide-bloc{filter:url(#f-liquide);}
.liquide-ligne{font-family:var(--titre);font-weight:800;text-transform:uppercase;white-space:nowrap;font-size:clamp(80px,16vw,280px);line-height:.86;color:#E4DAFB;will-change:transform;}

/* 31 rubans */
.rubans{position:relative;height:clamp(300px,48vh,520px);overflow:hidden;margin-top:var(--section);}
.rubans svg{position:absolute;inset:0;width:100%;height:100%;}

/* 10 eventail */
.eventail{position:relative;margin:var(--section) var(--m) 0;height:min(84svh,780px);min-height:520px;overflow:hidden;background:var(--creme);color:var(--noir);border-radius:14px;touch-action:pan-y;cursor:grab;user-select:none;}
.eventail:active{cursor:grabbing;}
.ev-coin{position:absolute;top:clamp(14px,2vw,24px);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(8,8,8,.55);}
.ev-g{left:clamp(14px,2vw,26px);}.ev-d{right:clamp(14px,2vw,26px);}
.ev-titre{position:absolute;left:0;right:0;top:clamp(30px,5vw,64px);margin:0;text-align:center;font-family:var(--titre);font-weight:800;text-transform:uppercase;font-size:clamp(50px,8.5vw,140px);line-height:.84;pointer-events:none;}
.ev-roue{position:absolute;left:50%;top:0;width:0;height:0;}
.ev-carte{position:absolute;left:0;top:0;width:var(--cw);aspect-ratio:3/4;margin-left:calc(var(--cw) / -2);border-radius:16px;overflow:hidden;background:#111;box-shadow:0 24px 50px rgba(8,8,8,.28),0 2px 6px rgba(8,8,8,.2);}
.ev-carte img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.ev-carte span{position:absolute;left:12px;right:12px;bottom:10px;font-family:var(--titre);font-weight:800;font-size:clamp(18px,1.7vw,24px);line-height:.95;color:var(--creme);text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.5);}
.ev-carte i{position:absolute;right:12px;top:10px;font-style:normal;font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--creme);}
.ev-moyeu{position:absolute;left:50%;width:var(--hub);height:var(--hub);margin-left:calc(var(--hub) / -2);pointer-events:none;}
.ev-moyeu svg{width:100%;height:100%;overflow:visible;}
.ev-actif{position:absolute;left:50%;z-index:250;transform:translateX(-50%);font-family:var(--titre);font-weight:800;font-size:clamp(20px,2vw,28px);text-transform:uppercase;white-space:nowrap;pointer-events:none;}
.ev-actif::before{content:"";display:block;margin:0 auto 6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--violet);}

/* 8 mise au point */
[data-mise-au-point] .mot{display:inline-block;will-change:filter;}

/* 6 talon a detacher (easter egg) */
.contact-talon[data-talon]{cursor:grab;touch-action:none;transform-origin:0 100%;user-select:none;position:relative;z-index:3;}
.contact-talon.tire{cursor:grabbing;}
.contact-ticket{position:relative;}
.talon-merci{position:absolute;right:0;bottom:-46px;margin:0;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--lilas);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;}
.talon-merci.vu{opacity:1;transform:none;}

/* 24 graisse au curseur */
[data-graisse] .gr-mot{display:inline-block;white-space:nowrap;}
[data-graisse].gr-fige{white-space:nowrap;}
[data-graisse] .gr{display:inline-block;}

/* 16 prisme (easter egg : le 3 du logo) */

.prisme-ee{position:fixed;inset:0;z-index:300;background:var(--noir);perspective:1000px;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s;cursor:pointer;}
.prisme-ee.ouvert{opacity:1;visibility:visible;transition:opacity .5s;}
.prisme-ee .pr-texte{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;}
.prisme-ee .pr-texte b{font-family:var(--titre);font-weight:800;text-transform:uppercase;font-size:clamp(100px,22vw,380px);line-height:.8;color:var(--creme);white-space:nowrap;}
.prisme-ee .verre{position:absolute;left:0;top:0;width:var(--vw);height:var(--vw);transform-style:preserve-3d;pointer-events:none;}
.prisme-ee .v-dos,.prisme-ee .v-face{position:absolute;inset:0;border-radius:calc(var(--vw) * .14);}
.prisme-ee .v-dos{transform:translateZ(calc(var(--vw) * -.16));box-shadow:inset 0 0 0 1px rgba(250,247,239,.22);background:rgba(188,164,247,.035);}
.prisme-ee .v-face{overflow:hidden;background:#0a090d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 7px rgba(255,255,255,.035),inset 10px 12px 34px rgba(255,255,255,.09),inset -14px -18px 40px rgba(0,0,0,.65),0 50px 90px rgba(0,0,0,.6);}
.prisme-ee .v-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(128deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(188,164,247,.16));}
.prisme-ee .lentille{position:absolute;inset:0;filter:url(#f-lentille);}
.prisme-ee .lentille .pr-texte{right:auto;bottom:auto;}
.prisme-ee .lentille .pr-texte b{color:#F1ECFF;}
.prisme-indice{position:absolute;right:var(--m);bottom:var(--m);font-size:11px;letter-spacing:.16em;color:var(--creme-faible);}

/* 26 goutte-loupe (easter egg : appuyer longtemps sur un portrait) */
.goutte-loupe{position:fixed;left:0;top:0;z-index:260;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 0 24px rgba(255,255,255,.12),0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35);}
.goutte-loupe.vue{opacity:1;}
.goutte-loupe canvas{width:100%;height:100%;display:block;}
.goutte-loupe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);}

/* 25 la vue Projets en verre */
.vues{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.3);}
.vue-bouton{position:relative;z-index:2;}
.vue-bouton[aria-pressed="true"]{background:transparent;}
.vues-goutte{position:absolute;top:4px;bottom:4px;left:4px;width:0;z-index:1;border-radius:100px;background:var(--degrade);background-size:160px 160px,100% 100%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 2px rgba(255,255,255,.2);transition:left .7s cubic-bezier(.34,1.45,.5,1),width .7s cubic-bezier(.34,1.45,.5,1);}
.vues-goutte.etire{animation:goutte-etire .6s cubic-bezier(.3,0,.2,1);}
@keyframes goutte-etire{0%{transform:scale(1)}30%{transform:scale(1.18,.8)}60%{transform:scale(.95,1.06)}100%{transform:scale(1)}}

/* 4 la vue Liste */
.liste-projets{display:none;padding:var(--haut) var(--m) var(--section);position:relative;z-index:2;}
html.vue-liste .planche{display:none;}
html.vue-liste .liste-projets{display:block;}
.rang{display:grid;grid-template-columns:clamp(40px,6vw,90px) 1fr auto;gap:16px;align-items:baseline;padding:clamp(12px,1.4vw,20px) 0;border-bottom:1px solid var(--pointille);transition:opacity .45s;}
.rang:first-child{border-top:1px solid var(--pointille);}
.rang .label{color:var(--lilas);}
.rang-nom{font-family:var(--titre);font-weight:800;text-transform:uppercase;font-size:clamp(30px,5vw,80px);line-height:1.12;display:flex;flex-wrap:wrap;}
.rang-info{display:flex;gap:clamp(16px,3vw,48px);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-doux);white-space:nowrap;}
.rang-vignette{display:none;}
.rang .c{display:inline-block;overflow:hidden;height:1.12em;vertical-align:top;}
.rang .c>span{display:block;position:relative;transition:transform .55s cubic-bezier(.7,0,.2,1);}
.rang .c>span::after{content:attr(data-c);position:absolute;left:0;top:calc(100% + .2em);color:var(--lilas);}
.rang:hover .c>span{transform:translateY(calc(-100% - .2em));}
@media (hover:hover){.liste-projets.survol .rang{opacity:.4;}.liste-projets.survol .rang.actif{opacity:1;}}
.liste-apercu{position:fixed;left:0;top:0;z-index:1;width:clamp(220px,25vw,420px);aspect-ratio:16/10;pointer-events:none;overflow:hidden;border-radius:4px;opacity:0;}
.liste-apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);}
.liste-apercu img.entre{animation:apercu-entre .6s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes apercu-entre{from{clip-path:inset(100% 0 0 0);transform:scale(1.18)}to{clip-path:inset(0 0 0 0);transform:none}}
html:not(.vue-liste) .liste-apercu{display:none;}
@media (hover:none),(max-width:760px){
  .rang{grid-template-columns:72px minmax(0,1fr);align-items:center;column-gap:14px;}
  .rang-info{flex-wrap:wrap;gap:4px 14px;font-size:10px;}
  .liste-projets{padding-top:calc(var(--haut) + 60px);}
  .rang .label{display:none;}
  .rang-vignette{display:block;grid-row:1 / span 2;width:72px;aspect-ratio:1;object-fit:cover;border-radius:6px;}
  .rang-info{grid-column:2;}
  .rang-nom{font-size:clamp(26px,8vw,44px);}
}

/* 28 fiche liquide (pages film) */
.fiche-bouton{position:absolute;right:var(--m);bottom:var(--m);z-index:6;height:46px;padding:0 22px;border-radius:100px;color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 10px 30px rgba(0,0,0,.3);transition:background .4s;}
.fiche-bouton:hover{background:var(--degrade);background-size:160px 160px,100% 100%;}
.fiche-liquide{position:absolute;left:0;right:0;bottom:0;height:min(70%,560px);z-index:5;transform:translateY(105%);transition:transform .8s cubic-bezier(.19,1,.22,1);
  background:rgba(8,8,8,.32);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);color:var(--creme);}
.fiche-liquide.ouverte{transform:none;}
.fiche-liquide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%);pointer-events:none;}
.fiche-liquide-corps{position:relative;max-width:1100px;margin:0 auto;padding:clamp(60px,7vw,90px) var(--m) 30px;display:grid;gap:16px;}
.fiche-liquide .label{color:var(--lilas);}
.fiche-liquide-titre{margin:0;font-family:var(--titre);font-weight:800;text-transform:uppercase;font-size:clamp(46px,7vw,110px);line-height:.86;}
.fiche-liquide-phrase{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,26px);line-height:1.3;max-width:34ch;}
.fiche-liquide .tableau{max-width:520px;}
.fiche-fermer{justify-self:start;margin-top:8px;background:none;border:0;padding:0;color:var(--creme-doux);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}

/* 3 generique a volets dans le ticket */
.volets .vl{display:inline-block;}
.volets .vl.tourne{animation:volet-tourne .055s linear;}
@keyframes volet-tourne{0%{transform:rotateX(0)}50%{transform:rotateX(80deg);opacity:.6}100%{transform:rotateX(0)}}
.ticket-nav.generique-actif .ticket-titre{color:var(--violet);font-size:.82em;}
.ticket-cases .bascule{animation:case-bascule .22s ease;}
@keyframes case-bascule{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

/* 39 numero en points (pages film) */
.points-num{position:relative;height:min(42vh,380px);margin-top:clamp(40px,5vw,80px);}
.points-num canvas{position:absolute;inset:0;width:100%;height:100%;}

/* 42 lettre vivante (pied de page) */
.pied-vivant{display:flex;align-items:center;gap:.04em;margin-top:56px;font-family:var(--titre);font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:.02em;}
.vivant-slot{position:relative;display:inline-block;width:.52em;height:.74em;}
.vivant-slot .vv{position:absolute;inset:0;display:grid;place-items:center;animation:vv-entre .45s cubic-bezier(.34,1.8,.5,1);}
.vivant-slot .vv.sort{animation:vv-sort .22s ease-in forwards;}
.vivant-slot svg{width:100%;height:100%;overflow:visible;}
.vv-3{font-size:1em;line-height:1;}
.vv-diaph g{transform-origin:0 0;animation:vv-tourne 1.4s ease-in-out infinite alternate;}
.vv-anneau{transform-origin:0 0;animation:vv-pulse 1s ease-out infinite;}
.vv-bande{animation:vv-defile .6s linear infinite;}
.vv-play{animation:vv-tourne 2.4s linear infinite;}
@keyframes vv-entre{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes vv-sort{to{transform:scale(0)}}
@keyframes vv-tourne{to{transform:rotate(60deg)}}
@keyframes vv-pulse{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes vv-defile{to{transform:translateY(32px)}}

@media (prefers-reduced-motion:reduce){
  .vv-diaph g,.vv-anneau,.vv-bande,.vv-play{animation:none;}
}

/* 16 prisme sur place (accueil) */
.prisme-local{position:fixed;left:0;top:0;z-index:90;width:var(--vw);height:var(--vw);transform-style:preserve-3d;pointer-events:none;opacity:0;transition:opacity .45s ease;}
.prisme-local.vu{opacity:1;}
.prisme-local .v-dos,.prisme-local .v-face{position:absolute;inset:0;border-radius:calc(var(--vw) * .14);}
.prisme-local .v-dos{transform:translateZ(calc(var(--vw) * -.16));box-shadow:inset 0 0 0 1px rgba(250,247,239,.22);}
.prisme-local .v-face{overflow:hidden;background:rgba(10,9,13,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 10px 12px 34px rgba(255,255,255,.1),inset -14px -18px 40px rgba(0,0,0,.55),0 40px 80px rgba(0,0,0,.5);}
.prisme-local .v-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(128deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(188,164,247,.16));}
.prisme-local .lentille{position:absolute;inset:0;filter:url(#f-lentille);}
.prisme-copie{position:absolute;white-space:nowrap;text-transform:uppercase;color:#F1ECFF;}
.goutte-loupe.vide{-webkit-backdrop-filter:blur(3px) saturate(1.4) brightness(1.15);backdrop-filter:blur(3px) saturate(1.4) brightness(1.15);}
/* le 3 vivant : meme ligne et meme hauteur que les autres lettres */
.pied-vivant{align-items:stretch;line-height:.8;}
.pied-vivant>span{display:block;line-height:.8;padding-top:.06em;}
.vivant-slot{height:auto;width:.62em;}
.vivant-slot .vv{inset:.06em 0 0;}
.vv-3{font-size:1em;line-height:.8;display:block;}
.vivant-slot svg{height:.74em;width:.74em;max-width:none;margin:0 -.06em;}