/* ═══ L'ACCUEIL CLAIR (13/09/2026) ═══
   Page seule, sans le menu du site. Blanc, police systeme, encre #151515 et ses transparences.
   Le degrade finit sur le jaune Koulisse. */

:root{
  --encre:#151515;
  --encre-64:rgba(21,21,21,.64);
  --encre-36:rgba(21,21,21,.36);
  --encre-08:rgba(21,21,21,.08);
  --encre-04:rgba(21,21,21,.04);
  --fond:#ffffff;
  --degrade:linear-gradient(90deg,#ab46dd 0%,#f31a7c 38%,#f8712b 64%,#f6c744 100%);
  --police:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ressort:cubic-bezier(.2,.9,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.acc{margin:0;background:var(--fond);color:var(--encre);font:16px/1.5 var(--police);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.acc a{color:inherit;text-decoration:none}
.acc img{display:block;max-width:100%}

/* ─── en-tete : le symbole a gauche, une pilule a droite ─── */
.acc-top{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:14px 16px}
.acc-sym{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--encre-36);
  transition:color .2s,background .2s}
.acc-sym svg{width:17px;height:17px}
.acc-sym:hover{color:var(--encre);background:var(--encre-04)}
.acc-pil{font-size:14px;font-weight:500;line-height:21px;padding:7px 11px;border-radius:15px;
  background:var(--encre-04);color:var(--encre-64);transition:background .2s,color .2s}
.acc-pil:hover{background:var(--encre-08);color:var(--encre)}

/* ─── premier ecran ─── */
.acc-hero{position:relative;min-height:max(760px,100vh);display:flex;align-items:center;
  justify-content:center;padding:120px 24px 160px;overflow:hidden}
.acc-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;max-width:680px}

.acc-titre{margin:0;font-size:80px;font-weight:500;line-height:.92;letter-spacing:-.01em;
  display:flex;flex-direction:column;align-items:center}
.acc-mot{display:block;color:var(--encre-36);margin-bottom:26px;
  opacity:0;transform:translateY(8px);animation:acc-monte .8s var(--ressort) .05s forwards}
.acc-mot svg{display:block;width:118px;height:auto}
.acc-ligne{display:block;overflow:hidden;padding:0 20px 14px;margin-bottom:-14px}
.acc-ligne>span{display:inline-block;transform:translateY(105%);
  animation:acc-leve .9s var(--ressort) forwards}
.acc-ligne:nth-child(2)>span{animation-delay:.12s}
.acc-ligne:nth-child(3)>span{animation-delay:.2s}
.acc-ligne:nth-child(4)>span{animation-delay:.28s}
.acc-degrade{background:var(--degrade);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

.acc-phrase{margin:30px 0 0;max-width:440px;font-size:20px;line-height:30px;color:var(--encre-36);
  text-wrap:pretty;opacity:0;animation:acc-monte .8s var(--ressort) .42s forwards}
.acc-phrase a{color:inherit;transition:color .2s}
.acc-phrase a:hover,.acc-phrase a:focus-visible{color:var(--encre);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ─── la bande d'activite, au pied du premier ecran ───
   Un ruban jaune qui ferme l'ecran : les metiers de la maison, en anglais, qui defilent
   lentement avec leur picto. Les deux bouts s'estompent, le survol arrete le defile. */
.acc-bande{position:absolute;z-index:4;left:0;right:0;bottom:0;overflow:hidden;
  background:linear-gradient(180deg,#ffd75e,#f6c744 55%,#f0b93c);
  border-top:1px solid rgba(21,21,21,.10);
  box-shadow:0 -10px 30px rgba(21,21,21,.10),inset 0 1px 0 rgba(255,255,255,.45);
  opacity:0;animation:acc-monte .9s var(--ressort) .7s forwards}
.acc-bande::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.5) 75%,rgba(255,255,255,0) 90%);
  transform:translateX(-100%);animation:acc-lueur 7s ease-in-out 1.6s infinite}
.acc-bande-piste{display:flex;width:max-content;animation:acc-defile 52s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.acc-bande:hover .acc-bande-piste{animation-play-state:paused}
.acc-bande-jeu{display:flex;align-items:center;flex:none}
.acc-bande-item{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;
  font-size:15.5px;font-weight:600;line-height:1.2;letter-spacing:-.005em;color:var(--encre);
  white-space:nowrap}
.acc-bande-item + .acc-bande-item{border-left:1px solid rgba(21,21,21,.13)}
.acc-bande-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.72);color:var(--encre);
  box-shadow:0 1px 2px rgba(21,21,21,.10),inset 0 1px 0 rgba(255,255,255,.9);
  animation:acc-flotte 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.55s)}
.acc-bande-ic svg{width:16px;height:16px}
@keyframes acc-defile{to{transform:translateX(-50%)}}
@keyframes acc-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes acc-lueur{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

.acc-noir{margin-top:32px;display:inline-flex;align-items:center;height:46px;padding:0 18px;
  border-radius:100px;background:var(--encre);color:#fff !important;font-size:18px;font-weight:500;
  box-shadow:0 3px 3px rgba(0,0,0,.03),0 8px 7px rgba(0,0,0,.04),0 17px 14px rgba(0,0,0,.05),
    0 35px 29px rgba(0,0,0,.06),0 96px 80px rgba(0,0,0,.07);
  transition:transform .25s var(--ressort),background .2s;
  opacity:0;animation:acc-monte .8s var(--ressort) .52s forwards}
.acc-noir:hover{background:#000;transform:translateY(-1px)}
.acc-noir:active{transform:scale(.97)}

.acc-lien{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;
  color:var(--encre-36) !important;transition:color .2s;
  opacity:0;animation:acc-monte .8s var(--ressort) .6s forwards}
/* ON NE SAVAIT PAS QU'IL FALLAIT DESCENDRE (Tony, 13/09 22 h 55 : « on ne sait pas qu'on doit descendre, on a
   envie de cliquer ») : le chevron pointe vers le bas et respire, et les affiches se cliquent. */
.acc-lien svg{width:16px;height:16px;transition:transform .2s}
.acc-lien:hover{color:var(--encre-64) !important}
.acc-chevron{animation:acc-respire 1.8s ease-in-out infinite}
@keyframes acc-respire{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.acc-lien:hover .acc-chevron{animation-play-state:paused;transform:translateY(4px)}

/* les affiches qui flottent autour : placees par leur centre, bougees par le script */
/* le fondu du bas est court : les affiches se rassemblent EN BAS (sur le logo cible), la pile doit rester
   nette ; seul le tout dernier bord s'efface */
.acc-affiches{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* les affiches, elles, se cliquent : un clic les rassemble (defilement doux jusqu'au mot) */
  -webkit-mask-image:linear-gradient(to bottom,#000 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 96%,transparent 100%)}
/* la cible du rassemblement : le mot-marque en bas du premier ecran, invisible au repos */
.acc-cible{position:absolute;z-index:3;left:50%;bottom:44px;width:150px;margin-left:-75px;opacity:0;
  transform:scale(.9);pointer-events:none;will-change:opacity,transform}
.acc-cible svg{display:block;width:100%;height:auto}
/* les affiches sont en PORTRAIT (3:4) depuis la planche du 13/09 : la largeur est reglee, la hauteur suit */
.acc-aff{--t:calc(var(--s) * var(--k,1));position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:var(--t);height:calc(var(--t) * 4 / 3);margin:calc(var(--t) * -2 / 3) 0 0 calc(var(--t) / -2);will-change:transform}
.acc-aff{pointer-events:auto;cursor:pointer}
/* la colonne de texte est AU-DESSUS des affiches (z 2) : sa boite invisible (le h1 fait toute la largeur)
   avalait les clics sur « Éclat » ou « Riviera ». Elle laisse passer le pointeur ; seuls ses liens et
   boutons (essai, « voir comment ça marche », les genres qui allument les affiches) le retiennent. */
.acc-hero-in{pointer-events:none}
.acc-hero-in a,.acc-hero-in button{pointer-events:auto}
.acc-aff img{width:100%;height:100%;object-fit:cover;border-radius:10px;
  border:4px solid #fff;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08),0 22px 40px rgba(0,0,0,.10);
  opacity:0;transform:scale(.86);
  transition:opacity .9s var(--ressort),transform .9s var(--ressort),filter .35s}
.acc-aff.vu img{opacity:1;transform:scale(1)}
body.genre-actif .acc-aff.vu img{opacity:.28;filter:saturate(.4)}
body.genre-actif .acc-aff.allume img{opacity:1;filter:none;transform:scale(1.12)}

/* ─── les grilles de cartes ─── */
.acc-sec{max-width:1008px;margin:0 auto;padding:12px 24px 44px}
.acc-sec h2{margin:0 0 16px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.acc-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* la carte a filet : un bord d'1 px qui s'allume sous le pointeur */
.acc-carte{position:relative;display:block;padding:1px;border-radius:12px;background:var(--encre-08);
  overflow:hidden;isolation:isolate;transition:transform .25s var(--ressort)}
.acc-carte::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(180px circle at var(--px,50%) var(--py,50%),#f31a7c 0%,#f8712b 35%,transparent 70%)}
.acc-carte:hover::before{opacity:.7}
.acc-carte:active{transform:scale(.985)}
.acc-carte-in{position:relative;display:flex;flex-direction:column;height:100%;padding:16px;
  border-radius:11px;background:#fff}
.acc-carte-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(248,113,43,.06),transparent 70%)}
.acc-carte:hover .acc-carte-in::after{opacity:1}
.acc-tuile{display:grid;place-items:center;width:48px;height:48px;border-radius:10px}
.acc-ico-t{width:26px;height:26px}
.acc-nom{margin-top:12px;font-size:16px;font-weight:500;line-height:1.3}
.acc-desc{margin-top:4px;font-size:14px;line-height:1.48;color:var(--encre-36);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acc-brique .acc-carte-in{min-height:108px;justify-content:space-between}
.acc-ico{width:24px;height:24px}
.acc-brique .acc-nom{margin-top:18px}

/* ─── le bandeau final sur sa trame de points ─── */
.acc-final{position:relative;margin-top:60px;padding:120px 24px 90px;overflow:hidden}
.acc-trame{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 70%,transparent)}
.acc-final-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.acc-final h3{margin:0;max-width:600px;font-size:40px;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  text-wrap:balance}
.acc-final-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.acc-contour,.acc-gris{display:inline-flex;align-items:center;height:37px;padding:0 13px;border-radius:100px;
  font-size:14px;font-weight:500;transition:background .2s,color .2s,transform .2s var(--ressort)}
.acc-contour{border:1px solid var(--encre);background:#fff}
.acc-contour:hover{background:var(--encre);color:#fff !important}
.acc-gris{background:var(--encre-04);color:var(--encre-64) !important}
.acc-gris:hover{background:var(--encre-08);color:var(--encre) !important}
.acc-contour:active,.acc-gris:active{transform:scale(.97)}

/* ─── pied ─── */
.acc-pied{position:relative;z-index:1;max-width:1008px;margin:0 auto;padding:0 24px 28px;border:0;background:none}
.acc-pied-l1{display:flex;align-items:center;gap:20px;padding-top:18px;border-top:1px solid var(--encre-08)}
.acc-pied-mot{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--encre-64) !important}
.acc-pied-mot span{color:#e0a526}
.acc-pied-l1 nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.acc-pied-l1 nav a,.acc-pied-l2 a{font-size:14px;color:var(--encre-64);transition:color .2s}
.acc-pied-l1 nav a:hover,.acc-pied-l2 a:hover{color:var(--encre)}
.acc-pied-ico{margin-left:auto;display:flex;gap:4px}
.acc-pied-ico a{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--encre-36);
  transition:color .2s,background .2s}
.acc-pied-ico a:hover{color:var(--encre);background:var(--encre-04)}
.acc-pied-ico svg{width:17px;height:17px}
.acc-pied-l2{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.acc-pied-l2 a{font-size:13px;color:var(--encre-36)}

.acc a:focus-visible{outline:2px solid #f8712b;outline-offset:3px;border-radius:8px}

@keyframes acc-leve{to{transform:translateY(0)}}
@keyframes acc-monte{to{opacity:1;transform:none}}

/* ─── tablette ─── */
@media (max-width:1180px){ .acc-affiches{--k:.8} }
@media (max-width:1000px){
  .acc-affiches{--k:.68}
  .acc-titre{font-size:64px}
  .acc-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acc-grille-metiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ─── telephone : les affiches quittent les cotes, elles tiennent le haut et le bas ─── */
@media (max-width:700px){
  .acc-hero{min-height:auto;padding:190px 20px 210px}
  .acc-titre{font-size:48px;line-height:.96}
  .acc-mot svg{width:92px}
  .acc-phrase{font-size:18px;line-height:27px}
  .acc-bande-item{padding:12px 20px;font-size:14px;gap:9px}
  .acc-bande-ic{width:26px;height:26px}
  .acc-bande-ic svg{width:14px;height:14px}
  .acc-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .acc-grille-metiers{grid-template-columns:1fr}
  .acc-final{padding:90px 20px 70px}
  .acc-final h3{font-size:30px}
  .acc-pied-l1{flex-wrap:wrap;gap:12px 18px}
  .acc-affiches{--k:1}
  .acc-aff{--s:84px !important}
  .acc-aff[data-mob="0"]{display:none}
  .acc-affiches{-webkit-mask-image:none;mask-image:none}
  .acc-cible{width:118px;margin-left:-59px;bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .acc-chevron{animation:none}
  .acc-mot,.acc-ligne>span,.acc-phrase,.acc-noir,.acc-lien{animation:none;opacity:1;transform:none}
  .acc-bande{animation:none;opacity:1}
  .acc-bande-piste,.acc-bande-ic,.acc-bande::after{animation:none}
  .acc-aff img{transition:none}
}

/* ═══ NOS ANIMATIONS, REPEINTES EN CLAIR ═══════════════════════════════════
   Le HTML et le script sont ceux de toujours (fragments `_bouts/`, `site.js`) ; ici on ne change
   que la peau. `site.css` est charge AVANT cette feuille : tout ce qui suit l'emporte sur la
   version sombre, et rien ne sort de `body.acc` (les autres pages ne bougent pas). */
body.acc{
  --texte:#151515; --texte-2:rgba(21,21,21,.64); --texte-3:rgba(21,21,21,.45);
  --bord:rgba(21,21,21,.08); --bord-fort:rgba(21,21,21,.12); --verre:#fff; --jaune-fonce:#a67c00;
  --ombre-douce:0 1px 2px rgba(0,0,0,.04),0 10px 26px -12px rgba(0,0,0,.12),0 34px 70px -28px rgba(0,0,0,.14);
  font-family:var(--police);line-height:1.5}
body.acc ::selection{background:#ffe9a3;color:#151515}

/* un chapitre : etiquette, titre en deux temps, phrase grise, puis l'animation centree */
.acc-chap{max-width:1008px;margin:0 auto;padding:120px 24px 0;scroll-margin-top:20px}
.acc-chap-tete{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:680px;margin:0 auto 48px}
.acc-etiq{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:100px;
  background:var(--encre-04);font-size:14px;font-weight:500;color:var(--encre-64)}
.acc-etiq-t{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#fff}
.acc-etiq-t[style*="#f6c744"]{color:#1a1405}
/* l'etiquette « Koulisse Intelligence » = l'avatar en petit : disque encre, anneau aura, etincelle jaune */
.acc-etiq-t{position:relative;isolation:isolate}
.acc-etiq-t[style*="#141109"]{color:#f6c744}
.acc-etiq-t[style*="#141109"]::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:10px;
  background:linear-gradient(100deg,#f6c744 0%,#67e8f9 45%,#a5b4fc 80%,#f6c744 100%)}
/* la pilule « Compris » / « Date creee » : le meme anneau (jaune -> cyan -> lavande) et l'etincelle jaune,
   comme le badge in-app du kit fige, et non le cyan-violet seul de site.css */
body.acc .k-intel{background:linear-gradient(var(--k-intel-angle) in oklab,#f6c744 0%,#67e8f9 45%,#a5b4fc 80%,#f6c744 100%)}
body.acc .k-intel-etincelle{color:#f6c744}
.acc-etiq-t svg{width:13px;height:13px}
.acc-h2{margin:20px 0 0;font-size:52px;font-weight:500;line-height:1.04;letter-spacing:-.015em}
.acc-h2 .acc-degrade{display:block;padding-bottom:.06em}
.acc-p{margin:20px 0 0;max-width:520px;font-size:20px;line-height:30px;color:var(--encre-36);text-wrap:pretty}
.acc-chap-vis{max-width:600px;margin:0 auto}
.acc-chap-large .acc-chap-vis{max-width:960px}
.acc-chap + .acc-sec{margin-top:110px}

/* ─── le socle commun : du blanc, des ombres douces, jamais de cadre gris autour ─── */
body.acc .mini,body.acc .ecran{box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05)}
body.acc .mail-tete .qui{height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}

/* ═══ 1. LA DATE, ET TOUT CE QUI S'Y ACCROCHE ═══
   Une carte d'evenement au centre (l'affiche, le titre, la jauge en degrade), sept bulles d'une
   ligne, et une goutte de couleur qui voyage le long du fil jusqu'a la date. */
body.acc .constellation{height:620px}
body.acc .fils path{stroke:rgba(21,21,21,.1);stroke-width:1.5}
body.acc .fils path.actif{stroke:var(--fil,#f8712b);stroke-width:2;filter:none}
body.acc .fils .goutte{filter:drop-shadow(0 0 5px rgba(0,0,0,.18))}

body.acc .noyau{width:318px;padding:12px;border-radius:24px;display:flex;gap:14px;align-items:stretch;
  box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05),0 0 120px -20px rgba(246,199,68,.55)}
body.acc .noyau::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
body.acc .noyau.recoit::after{animation:acc-recoit .75s ease-out}
@keyframes acc-recoit{from{box-shadow:0 0 0 0 rgba(248,113,43,.32)}to{box-shadow:0 0 0 22px rgba(248,113,43,0)}}
.noy-aff{flex:none;width:76px;border-radius:12px;overflow:hidden;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.noy-aff img{width:100%;height:100%;object-fit:cover}
.noy-corps{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 4px 2px 0}
body.acc .noyau .et{font-size:10.5px;letter-spacing:.12em;margin-bottom:5px;color:#b8860b}
body.acc .noyau .nom{font-size:19px;letter-spacing:-.02em}
body.acc .noyau .quand{font-size:12.5px;line-height:1.4;white-space:normal;color:var(--encre-64);margin-top:3px}
body.acc .noyau .jauge{margin-top:12px;height:8px;background:rgba(21,21,21,.07)}
body.acc .noyau .jauge i{background:var(--degrade)}
body.acc .noyau .chiffre{position:relative;font-size:12px;color:var(--encre-64)}
.plus-un{position:absolute;right:2px;top:-2px;font-size:12px;font-weight:700;color:#10a34a;pointer-events:none;
  animation:acc-plus-un 1.1s var(--ressort) forwards}
@keyframes acc-plus-un{0%{opacity:0;transform:translateY(6px)}25%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

body.acc .sat{gap:10px;padding:7px 16px 7px 7px;border-radius:18px;background:#fff;color:#151515;
  border:1px solid rgba(21,21,21,.06);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -16px rgba(0,0,0,.18);
  transition:transform .45s var(--ressort),box-shadow .45s ease,border-color .45s ease}
body.acc .sat .ico{width:36px;height:36px;border-radius:12px;background:var(--m);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px var(--m)}
body.acc .sat[style*="#f6c744"] .ico{color:#1a1405}
body.acc .sat .ico svg{width:17px;height:17px}
body.acc .sat .ico.nu{width:auto;height:36px;padding:0 9px;gap:5px;background:#f3f3f5;box-shadow:none}
body.acc .sat .ico.nu img{height:18px;width:auto}
body.acc .sat .txt b{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
body.acc .sat .txt em{font-size:12px;white-space:nowrap;max-width:none;color:var(--encre-36);margin-top:1px}
body.acc .sat .mini-jauge{width:100%;height:4px;margin-top:6px;background:rgba(21,21,21,.07)}
body.acc .sat.actif{transform:translateY(-3px) scale(1.035);border-color:color-mix(in srgb,var(--m) 35%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--m) 12%,transparent),0 18px 36px -16px color-mix(in srgb,var(--m) 55%,transparent)}

/* ═══ 2. LE MAIL QUI DEVIENT UNE DATE : trois cartes, trois gestes ═══ */
body.acc .mini.crm3{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;
  padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.crm-carte{position:relative;display:flex;flex-direction:column;padding:16px;border-radius:22px;background:#fff;
  box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05)}
.crm-pas{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--encre-64)}
.crm-pas i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#151515;color:#fff;
  font-style:normal;font-size:11.5px;font-weight:700}

/* le mail : les mots importants se surlignent quand Koulisse le lit */
body.acc .crm3 .mail-d{padding:14px;border-radius:16px;background:#f6f6f7;border:0}
body.acc .crm3 .mail-tete .av{width:32px;height:32px;font-size:11.5px}
body.acc .crm3 .mail-tete .qui em{margin-top:1px}
body.acc .crm3 .mail-objet{margin-top:10px;font-size:14.5px}
body.acc .crm3 .mail-corps{font-size:13.5px;line-height:1.6;color:var(--encre-64)}
body.acc .crm3 .mail-sign{border:0;padding-top:0;margin-top:8px}
.crm3 mark{color:#151515;font-weight:600;padding:0 1px;border-radius:3px;
  background:linear-gradient(90deg,rgba(246,199,68,.7),rgba(248,113,43,.45)) no-repeat 0 88%/0% 38%;
  transition:background-size .7s var(--ressort)}
.crm3:has(#range.anim-ia) mark{background-size:100% 38%}
.crm3:has(#range.anim-ia) mark:nth-of-type(2){transition-delay:.25s}
.crm3:has(#range.anim-ia) mark:nth-of-type(3){transition-delay:.5s}

/* les liens entre les cartes : une pastille qui s'allume quand l'information passe */
.crm-lien{display:flex;align-items:center;justify-content:center;position:relative}
body.acc .crm3 .mail-fait{margin:0;opacity:1;transform:none}
.crm-lien::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(21,21,21,.14) 0 4px,transparent 4px 8px)}
.crm-lien .fl{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#fff;color:var(--encre-36);box-shadow:0 0 0 1px rgba(21,21,21,.08),0 6px 14px -8px rgba(0,0,0,.2);
  transition:background .5s ease,color .5s ease,transform .5s var(--ressort),box-shadow .5s ease}
.crm-lien .fl svg{width:15px;height:15px}
.crm3 .mail-fait.la .fl,.crm3:has(.rail-e li.ok) .crm-lien-2 .fl{background:#151515;color:#fff;transform:scale(1.08);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}

/* ce que Koulisse a compris : quatre champs, chacun avec son icone */
body.acc .crm3 .range{margin:0;padding:0;background:none;border:0}
body.acc .crm3 .range-t{margin-bottom:12px}
body.acc .crm3 .range-g{display:flex;flex-direction:column;gap:8px}
body.acc .crm3 .range-l{flex-direction:row;align-items:center;gap:11px;margin:0;padding:9px 11px;border:0;
  border-radius:14px;background:#f6f6f7;font-size:13.5px}
.crm3 .ri{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c);color:#fff}
.crm3 .rl{display:flex;flex-direction:column;min-width:0;line-height:1.25}
body.acc .crm3 .range-l .q{width:auto;font-size:11px;color:var(--encre-36)}
body.acc .crm3 .range-l b{font-size:14px}

/* la date avance : une frise verticale qui se remplit en degrade */
body.acc .crm3 .rail-e{display:flex;flex-direction:column;margin:0;position:relative}
body.acc .crm3 .rail-e::before{top:16px;bottom:16px;left:14px;right:auto;width:2px;height:auto;background:rgba(21,21,21,.08)}
.crm3 .rail-e::after{content:"";position:absolute;left:14px;top:16px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(#10a34a,#f6c744);transition:height .9s var(--ressort)}
.crm3 .rail-e:has(li:nth-child(2).ok)::after{height:calc((100% - 32px) * .25)}
.crm3 .rail-e:has(li:nth-child(3).ok)::after{height:calc((100% - 32px) * .5)}
.crm3 .rail-e:has(li:nth-child(4).ok)::after{height:calc((100% - 32px) * .75)}
.crm3 .rail-e:has(li:nth-child(5).ok)::after{height:calc(100% - 32px)}
body.acc .crm3 .rail-e li{flex-direction:row;align-items:center;gap:12px;padding:6px 0;text-align:left;color:var(--encre-36)}
body.acc .crm3 .rail-e li .rond{width:30px;height:30px}
body.acc .crm3 .rail-e li .rond svg{width:13px;height:13px}
body.acc .crm3 .rail-e li .lab{flex:1;flex-direction:row;justify-content:space-between;align-items:baseline;font-size:14px}
body.acc .crm3 .rail-e li .lab em{font-size:14px}
body.acc .crm3 .rail-e li.ok{color:#151515;font-weight:500}
.crm-gain{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;
  border-radius:14px;background:rgba(16,163,74,.1);color:#0f7a39;font-size:13.5px;font-weight:600;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s ease,transform .6s var(--ressort)}
.crm3:has(.rail-e li:last-child.ok) .crm-gain{opacity:1;transform:none}
.crm3 .rail-e{margin-bottom:12px !important}

/* ═══ 3. LE POINTAGE : le telephone de la salle, la fenetre du producteur ═══ */
body.acc .demo .tag{background:var(--encre-04);color:var(--encre-64);padding:5px 14px 5px 5px;font-weight:600}
body.acc .demo .tag .p{background:var(--pointage);color:#fff}
body.acc .demo .mien .tag .p{background:#f6c744;color:#1a1405}
/* LE TELEPHONE EN 3D : le cadre genere (`assets/tel-cadre.webp`, 624x1386, ecran transparent) est pose
   par-dessus l'ecran HTML, qui reste vivant. Le trou de l'ecran, mesure sur l'image : x 56..566, y 123..1138,
   soit left 9 %, width 81.7 %, top 8.9 %, height 73.2 % du cadre. L'ecran deborde d'un rien (le bezel opaque
   masque ses angles), et l'ensemble est legerement incline : c'est le cadre ET l'ecran qui tournent. */
.tel3d{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:624/1386;
  transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);transform-style:preserve-3d;
  transition:transform .8s var(--ressort)}
.tel3d:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.tel3d-cadre{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 30px 40px rgba(21,21,21,.22))}
body.acc .demo .salle .ecran{position:absolute;z-index:1;left:8.4%;top:8.4%;width:83%;height:74.2%;
  border:0;border-radius:26px;padding:60px 16px 24px;min-height:0;box-shadow:none;background:#fff}
body.acc .demo .salle .ecran::before{content:none}
body.acc .demo .mien .ecran{padding-top:48px;border-radius:18px;overflow:hidden}
body.acc .demo .mien .ecran::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;
  border-bottom:1px solid rgba(21,21,21,.06);background:#fafafa}
body.acc .demo .mien .ecran::after{content:"";position:absolute;top:12px;left:16px;width:52px;height:10px;
  background:radial-gradient(circle at 5px 5px,#ff5f57 4.5px,transparent 5px),
    radial-gradient(circle at 23px 5px,#febc2e 4.5px,transparent 5px),
    radial-gradient(circle at 41px 5px,#28c840 4.5px,transparent 5px)}
body.acc .flux{background:repeating-linear-gradient(90deg,rgba(21,21,21,.16) 0 5px,transparent 5px 10px)}
body.acc .flux .bille{background:var(--degrade);box-shadow:0 0 16px 4px rgba(248,113,43,.45)}
@media (min-width:901px){
  body.acc .demo{grid-template-columns:minmax(0,300px) 1fr minmax(0,420px);justify-content:center;align-items:center;gap:0}
  body.acc .flux{margin-top:40px}
}

/* ═══ 4. KOULISSE INTELLIGENCE : un micro, une bulle de parole, une fiche qui se cree ═══ */
body.acc #scene-ia.ia2{padding:22px;border-radius:28px;background:#fff;color:#151515;border:0;box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05)}
body.acc #scene-ia .ia-micro{background:none;border:0;padding:0;margin:0 0 16px;gap:14px;box-shadow:none;transform:none}
/* LE MICRO EST L'AVATAR DE KOULISSE INTELLIGENCE (kit fige du 06/08, `marque/6-intelligence/intelligence-rond.svg`,
   Tony 13/09 22 h 35 : « normalement c'est jaune Koulisse ») : disque encre, anneau degrade jaune -> cyan ->
   lavande -> jaune, glyphe JAUNE maison. Ni le degrade rose-orange de la page, ni un cyan-violet seul. */
:root{--aura-intel:linear-gradient(100deg,#f6c744 0%,#67e8f9 45%,#a5b4fc 80%,#f6c744 100%)}
body.acc #scene-ia .ia-micro .b{width:54px;height:54px;color:#f6c744;border:3px solid transparent;
  background:linear-gradient(#141109,#141109) padding-box,var(--aura-intel) border-box;
  box-shadow:0 12px 26px -12px rgba(20,17,9,.7)}
body.acc #scene-ia .ia-micro .b svg{width:21px;height:21px}
body.acc #scene-ia .ia-micro.ecoute .b{animation:acc-orbe 1.5s ease-in-out infinite}
@keyframes acc-orbe{0%,100%{transform:scale(1);box-shadow:0 12px 26px -12px rgba(20,17,9,.7),0 0 0 0 rgba(246,199,68,.4)}
  50%{transform:scale(1.07);box-shadow:0 12px 26px -12px rgba(20,17,9,.7),0 0 0 12px rgba(246,199,68,0)}}
body.acc #scene-ia .ia-micro .onde{height:30px;gap:4px}
body.acc #scene-ia .ia-micro .onde i{width:4px;background:rgba(21,21,21,.14)}
body.acc #scene-ia .ia-micro.ecoute .onde i{background:linear-gradient(#f6c744,#67e8f9)}
body.acc #scene-ia .ia-micro .e{font-size:13px;color:var(--encre-36)}
body.acc #scene-ia .ia-micro.ecoute .e{color:#141109}
body.acc #scene-ia .ia-dit{background:#f3f3f5;color:#151515;border:0;border-radius:22px 22px 22px 6px;
  padding:16px 58px 16px 18px;font-size:16.5px;line-height:1.45;min-height:60px}
body.acc #scene-ia #ia-texte:empty::before{color:rgba(21,21,21,.32)}
body.acc #scene-ia .ia-dit .cur{background:#141109}
body.acc #scene-ia .ia-go{background:rgba(21,21,21,.08);color:#151515}
body.acc #scene-ia .ia-dit.ecrit .ia-go{background:#141109;color:#f6c744}
body.acc #scene-ia .ia-aide{font-size:12.5px;color:var(--encre-36)}
body.acc #scene-ia .ia-fiche{display:flex;gap:16px;margin-top:18px;padding:12px;border-radius:22px;background:#fff;
  transform:translateY(10px) scale(.98);transition:opacity .45s ease,transform .6s var(--ressort)}
body.acc #scene-ia.anim-ia .ia-fiche{transform:none}
.ia2-aff{flex:none;width:92px;border-radius:14px;overflow:hidden;box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.ia2-aff img{width:100%;height:100%;object-fit:cover}
.ia2-corps{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 4px 4px 0}
body.acc #scene-ia .if-tete{justify-content:flex-start;margin-bottom:10px}
body.acc #scene-ia .ia-fiche [data-champ="spectacle"] b{font-size:22px;color:#151515}
body.acc #scene-ia .if-lieu b{font-size:14.5px;color:var(--encre-64)}
.ia2-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
body.acc #scene-ia .ia-compris .v.ia2-puce{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:100px;
  background:#f3f3f5;color:var(--encre-64);font-size:13px}
body.acc #scene-ia .ia-compris .v.ia2-puce b{margin:0;font-size:13px;font-weight:600;color:#151515}
body.acc #scene-ia .ia-compris .v.vide{display:none}
body.acc #scene-ia .ia-fait{margin-top:14px;font-size:13.5px;color:var(--encre-36);justify-content:center}

/* ═══ UNE CHOSE A LA FOIS (Tony, 13/09 : « trop d'info, une phrase ou un mot, un logo ; mets-toi a
   la place de l'utilisateur ») ═══ */
body.acc .sat{padding:6px 16px 6px 6px}
body.acc .sat .ico{width:32px;height:32px;border-radius:10px}
body.acc .sat .ico.nu{height:32px}
body.acc .sat .txt b{font-size:14px;white-space:nowrap}
body.acc .noyau .nom{font-size:20px}
body.acc .noyau .chiffre{display:flex;justify-content:flex-start;gap:5px;align-items:baseline;margin-top:7px}
body.acc .noyau .chiffre span{color:var(--encre-36)}
body.acc .crm3 .mail-tete .qui b{font-size:14px}
body.acc .crm3 .mail-corps{margin-top:10px;font-size:14.5px;color:#151515}
body.acc .crm3 .range-l{padding:8px 10px}
body.acc .crm3 .range-l b{font-size:14.5px}
/* le pointage : on ne garde que ce qu'on lit en une seconde */
body.acc .demo .ecran .haut,body.acc .demo .ecran .sous,body.acc .demo .histo,
body.acc .demo .auto .d,body.acc .demo .auto .on{display:none}
body.acc .demo .tete-rapport{align-items:center}
body.acc .demo .auto{margin-top:14px;background:#f6f6f7;border:0}
body.acc #scene-ia .ia-fait{display:none}

/* la fiche d'Intelligence ne laisse jamais de trou : avant qu'elle comprenne, c'est une fiche
   FANTOME (affiche grisee, trois barres), qui se remplit sous les yeux */
body.acc #scene-ia .ia-fiche{opacity:1}
body.acc #scene-ia:not(.anim-ia) .ia-fiche{box-shadow:none;background:#fafafa}
body.acc #scene-ia:not(.anim-ia) .ia-fiche::after{opacity:0}
body.acc #scene-ia:not(.anim-ia) .ia2-aff,body.acc #scene-ia.sans-affiche .ia2-aff{opacity:.18;filter:grayscale(1) blur(2px)}
body.acc #scene-ia:not(.anim-ia) .ia2-corps > *{opacity:0}
.ia2-aff{transition:opacity .5s ease,filter .5s ease}
.ia2-corps{position:relative}
.ia2-corps::before{content:"";position:absolute;inset:8px 20% auto 0;height:74px;pointer-events:none;opacity:0;
  background:linear-gradient(#ececef,#ececef) 0 0/42% 12px no-repeat,
    linear-gradient(#ececef,#ececef) 0 30px/88% 16px no-repeat,
    linear-gradient(#ececef,#ececef) 0 62px/64% 12px no-repeat;
  transition:opacity .3s ease}
body.acc #scene-ia:not(.anim-ia) .ia2-corps::before{opacity:1;animation:acc-attente 1.4s ease-in-out infinite}
@keyframes acc-attente{50%{opacity:.45}}
/* le mail se tient au milieu de sa carte */
.crm-carte > .mail-d{margin:auto 0 !important}
/* le telephone de la salle a une silhouette de telephone */
/* l'ecran est une page : en haut le mot-marque et la pilule du module, puis le spectacle, la salle, la date */
body.acc .demo .salle .ecran{justify-content:flex-start;padding-top:52px}
body.acc .demo .salle-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
body.acc .demo .salle-marque svg{display:block;width:74px;height:auto}
body.acc .demo .salle-module{padding:4px 9px;border-radius:100px;background:rgba(225,29,72,.1);color:#b3123a;
  font-size:11px;font-weight:600;letter-spacing:.01em}
body.acc .demo .salle-spectacle{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:left}
body.acc .demo .salle-quand{margin:4px 0 0;font-size:12.5px;font-weight:400;color:var(--encre-64);text-align:left;white-space:normal}
body.acc .demo .salle-lab{display:block;margin:18px 0 6px;font-size:10.5px;color:var(--encre-36);text-align:left}
body.acc .demo .salle-aide{margin-top:12px;font-size:11.5px;color:var(--encre-36);text-align:center}
body.acc .demo .salle-quand{font-size:14px;white-space:nowrap}
body.acc .constellation{height:580px}

@media (max-width:1000px){
  .acc-h2{font-size:42px}
  /* sept bulles dans une colonne de tablette : on leur donne de la hauteur, pas de la largeur */
  body.acc .constellation{height:820px}
  .acc-chap{overflow-x:clip}
}
@media (max-width:900px){
  body.acc .mini.crm3{grid-template-columns:1fr;gap:0}
  .crm-lien{height:40px}
  .crm-lien::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px;
    background:repeating-linear-gradient(180deg,rgba(21,21,21,.14) 0 4px,transparent 4px 8px)}
  .crm-lien .fl svg{transform:rotate(90deg)}
  .crm-gain{margin-top:4px}
  body.acc .demo .salle{max-width:320px;width:100%;margin:0 auto}
}
@media (max-width:700px){
  .acc-chap{padding-top:84px}
  .acc-chap-tete{margin-bottom:32px}
  .acc-h2{font-size:34px}
  .acc-p{font-size:17px;line-height:26px}
  body.acc .constellation{height:auto}
  body.acc .noyau{width:100%}
  body.acc .sat .txt em{white-space:normal}
  .acc-chap + .acc-sec{margin-top:72px}
  body.acc #scene-ia.ia2{padding:16px}
  .ia2-aff{width:76px}
}

/* ═══ LES PAGES LEGALES, DANS LE MEME SQUELETTE ═══ */
.acc-legal{max-width:720px;margin:0 auto;padding:120px 24px 90px}
.acc-retour{margin:0 0 26px;opacity:1;animation:none}
.acc-legal .acc-h2{margin:0}
.acc-legal .acc-p{margin-top:14px;color:var(--encre-64)}
.acc-legal-texte{margin-top:56px;padding-top:8px;border-top:1px solid var(--encre-08)}
.acc-legal-texte h2{margin:40px 0 12px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.acc-legal-texte p{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--encre-64)}
.acc-legal-texte .acompleter{background:#fff3c4;color:#7a5a00;padding:0 4px;border-radius:4px}
.acc-legal .acc-h2 .acc-degrade{display:inline;padding:0}

/* ═══ LA PAGE QU'UN INCONNU COMPREND (13/09/2026, soir) ═══════════════════
   Ce que le matin ne disait pas : pour qui, le probleme, l'avant de chaque chapitre, ce sur quoi
   ca se branche, ou vont les donnees, le prix, les questions. Meme peau Luma : blanc, filets,
   ombres douces, le degrade sur un mot. */

.acc-note{margin-top:12px;font-size:13.5px;color:var(--encre-36);
  opacity:0;animation:acc-monte .8s var(--ressort) .56s forwards}
.acc-lien{margin-top:18px}
.acc-phrase{max-width:520px}

/* l'avant et l'apres d'un chapitre : gris pour aujourd'hui, encre pour Koulisse */
.acc-p{max-width:600px}
.acc-avant{color:var(--encre-36)}
.acc-p{color:var(--encre)}
.acc-avant + *{color:var(--encre)}

/* les cartes gagnent une phrase : plus de nom nu qu'un inconnu ne comprend pas */
.acc-brique .acc-carte-in{min-height:0}
.acc-brique .acc-nom{margin-top:14px}
.acc-brique .acc-desc,.acc-metier .acc-desc{display:block;-webkit-line-clamp:unset;overflow:visible}
.acc-sec-p{margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--encre-36);max-width:600px}
.acc-sec-p a{color:var(--encre-64);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.acc-sec-p a:hover{color:var(--encre)}

/* ─── ce sur quoi ca se branche : les vrais logos, en tuiles blanches ─── */
.acc-logos{display:flex;flex-wrap:wrap;gap:10px}
.acc-logo{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--encre-08),0 1px 2px rgba(0,0,0,.03);transition:transform .35s var(--ressort),box-shadow .3s}
.acc-logo img{width:30px;height:30px;object-fit:contain}
.acc-logo:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(21,21,21,.12),0 12px 24px -12px rgba(0,0,0,.25)}

/* ─── les donnees : quatre mots, quatre phrases ─── */
.acc-donnees{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.acc-donnee{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:12px;
  box-shadow:0 0 0 1px var(--encre-08)}
.acc-donnee b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.acc-donnee span{font-size:14px;line-height:1.45;color:var(--encre-36)}

/* ─── les prix : trois colonnes a filet, la deuxieme en encre ─── */
.acc-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.acc-plan{display:flex;flex-direction:column;padding:22px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--encre-08);transition:transform .35s var(--ressort),box-shadow .3s}
.acc-plan:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(21,21,21,.12),0 18px 36px -20px rgba(0,0,0,.25)}
.acc-plan.vedette{box-shadow:0 0 0 1.5px var(--encre),var(--ombre-douce)}
.acc-plan-nom{font-size:15px;font-weight:600;color:var(--encre-64)}
.acc-plan-prix{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.acc-plan-prix b{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.acc-plan-prix span{font-size:14px;color:var(--encre-36)}
.acc-plan-l{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.acc-plan-l li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.4}
.acc-plan-l svg{flex:none;margin-top:3px;color:#10a34a}
.acc-plan .acc-contour,.acc-plan .acc-noir-s{margin-top:auto;justify-content:center;height:40px;font-size:15px;
  animation:none;opacity:1;box-shadow:none}
.acc-noir-s{display:inline-flex;align-items:center;padding:0 16px;border-radius:100px;background:var(--encre);
  color:#fff !important;font-weight:500;transition:transform .25s var(--ressort),background .2s}
.acc-noir-s:hover{background:#000;transform:translateY(-1px)}

/* ─── les questions : visibles, deux colonnes, un filet entre chaque ─── */
.acc-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.acc-q{padding:20px 0;border-top:1px solid var(--encre-08)}
.acc-q h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.acc-q p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--encre-64)}

/* le rythme entre les sections de la fin */
.acc-branche,.acc-prix,.acc-questions,#donnees{padding-top:44px}
.acc-sec.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--ressort)}
.acc-sec.rv.vu{opacity:1;transform:none}

/* ═══ LE PROBLEME : une date eparpillee dans six endroits, rangee en un seul ═══
   Six vrais outils autour, une fiche Koulisse au milieu. Quand la scene arrive a l'ecran, le mot en
   gras de chaque source se surligne puis GLISSE jusqu'a sa ligne, qui s'ouvre pour le recevoir
   (la choregraphie validee le 13/09 : une seule matiere qui bouge, cause et effet lisibles). */
.eparp{position:relative;display:grid;grid-template-columns:1fr 340px 1fr;gap:26px;align-items:center;
  min-height:520px;padding:10px 0}
.ep-col{display:flex;flex-direction:column;gap:22px}
.ep-col.g{align-items:flex-end}
.ep-col.d{align-items:flex-start}
.ep-src{position:relative;margin:0;width:min(100%,290px);padding:12px 14px 13px;border-radius:16px;background:#fff;
  box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05);transform:rotate(var(--r,0deg));
  transition:opacity .7s ease,filter .7s ease,transform .7s var(--ressort)}
.ep-col.g .ep-src:nth-child(2){margin-right:34px}
.ep-col.d .ep-src:nth-child(2){margin-left:34px}
.ep-tete{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:12px;font-weight:500;color:var(--encre-36)}
.ep-tete img{width:17px;height:17px;object-fit:contain}
.ep-tete em{font-style:normal}
.ep-postit{width:14px;height:14px;border-radius:3px;background:#ffe57a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06)}
.ep-note{background:#fff8c7;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -16px rgba(120,90,0,.35)}
.ep-txt{font-size:13.5px;line-height:1.5;color:var(--encre-64)}
.ep-cel{display:inline-block;padding:3px 8px;margin:0 3px 3px 0;border-radius:4px;background:#f3f3f5;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.ep-mot{font-weight:600;color:var(--encre);padding:0 2px;border-radius:3px;white-space:nowrap;
  background:linear-gradient(90deg,rgba(246,199,68,.75),rgba(248,113,43,.45)) no-repeat 0 88%/0% 42%;
  transition:background-size .45s var(--ressort),opacity .4s ease}
.ep-mot.vise{background-size:100% 42%}
.ep-mot.parti{opacity:.28}
.ep-src.vide{opacity:.62;filter:saturate(.7)}
.eparp.ep-fini .ep-src{opacity:.4}
.eparp.ep-fini .ep-src:hover{opacity:1;filter:none}

.ep-vol{position:absolute;z-index:6;left:0;top:0;font-weight:600;font-size:14.5px;line-height:1;color:var(--encre);
  white-space:nowrap;pointer-events:none;transform-origin:0 0;will-change:transform;
  transition:transform .8s var(--ressort)}

.ep-date{position:relative;z-index:2;padding:14px;border-radius:24px;background:#fff;
  box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05);
  transform:translateY(12px) scale(.97);opacity:.6;
  transition:transform .8s var(--ressort),opacity .6s ease,box-shadow .8s ease}
.eparp.ep-joue .ep-date{transform:none;opacity:1}
.eparp.ep-fini .ep-date{box-shadow:var(--ombre-douce),0 0 0 1px rgba(21,21,21,.05),0 0 120px -20px rgba(246,199,68,.55)}
.ep-tete-fiche{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ep-aff{flex:none;width:52px;height:72px;border-radius:10px;overflow:hidden;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.ep-aff img{width:100%;height:100%;object-fit:cover}
.ep-date .nom{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ep-date .quand{margin-top:3px;font-size:12.5px;color:var(--encre-64)}
.ep-lignes{display:flex;flex-direction:column;gap:7px}
.ep-l{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border-radius:12px;background:#f6f6f7;
  font-size:14.5px;font-weight:600;transition:background .35s ease,box-shadow .35s ease}
.ep-l .ri{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--c);color:#fff}
.ep-l.ouvre{background:#fff3c4;box-shadow:inset 0 0 0 1.5px rgba(246,199,68,.9)}
.ep-l.pose{animation:acc-recu .5s var(--ressort)}
@keyframes acc-recu{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
.ep-cible{min-width:0;white-space:nowrap}
.ep-cible:empty::before{content:"";display:block;width:var(--g,96px);height:10px;border-radius:5px;background:#e6e6ea}
.ep-l:nth-child(2) .ep-cible:empty::before{--g:52px}
.ep-l:nth-child(3) .ep-cible:empty::before{--g:80px}
.ep-l:nth-child(4) .ep-cible:empty::before{--g:64px}
.ep-l:nth-child(5) .ep-cible:empty::before{--g:100px}
.ep-l:nth-child(6) .ep-cible:empty::before{--g:72px}
.ep-cible.cache{visibility:hidden}

@media (max-width:1000px){
  .acc-donnees{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc-plans{grid-template-columns:1fr}
  .acc-plan.vedette{order:-1}
}
@media (max-width:900px){
  .eparp{grid-template-columns:1fr 1fr;gap:16px;min-height:0}
  .ep-col{gap:14px}
  .ep-col.g .ep-src:nth-child(2),.ep-col.d .ep-src:nth-child(2){margin:0}
  .ep-src{width:100%;transform:rotate(calc(var(--r,0deg) * .5))}
  .ep-date{grid-column:1/-1;order:3;max-width:380px;margin:8px auto 0;width:100%}
}
@media (max-width:700px){
  .acc-qs{grid-template-columns:1fr}
  .acc-logo{width:56px;height:56px;border-radius:14px}
  .ep-txt{font-size:12.5px}
  .ep-src{padding:10px 12px}
}



/* ─── les icones d'app generees (metiers, briques, donnees) : posees comme sur un ecran d'accueil ─── */
.acc-app{display:block;width:56px;height:56px;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(21,21,21,.14));
  transition:transform .45s var(--ressort),filter .45s ease}
.acc-carte:hover .acc-app{transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 12px 20px rgba(21,21,21,.2))}
.acc-metier .acc-app{width:64px;height:64px}
.acc-metier .acc-nom{margin-top:14px}
.acc-donnee .acc-app{width:40px;height:40px;margin-bottom:8px;filter:drop-shadow(0 4px 8px rgba(21,21,21,.12))}

/* ═══ LE VRAI PRODUIT, EN COMPOSITION ═══
   Quatre ecrans reels de l'app (les dates, la billetterie, la facturation, la tete d'une fiche date),
   chacun dans une fenetre d'app, poses a des profondeurs differentes devant une lumiere jaune ; le relief
   suit le curseur (quelques degres, en ressort). Plus aucune carte de module (Tony, 13/09 nuit : « les
   vraies interfaces Koulisse bien mises en scene, pas des cards comme ca »). */
.acc-produit{max-width:1120px;margin:0 auto;padding:24px 24px 0}
.acc-produit-tete{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:680px;margin:0 auto 30px}
.acc-compo{position:relative;aspect-ratio:11/7;max-height:720px;perspective:1600px}
.acc-lumiere{position:absolute;left:10%;right:10%;top:4%;bottom:10%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,199,68,.5),rgba(246,199,68,0));filter:blur(30px)}
.acc-compo-in{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-8deg));transition:transform .2s linear}
/* UNE FENETRE D'APP : un ecran reel sous une barre sobre (trois points gris, l'adresse), une ombre longue
   teintee encre. La barre est grise et pas aux couleurs de macOS : l'ecran porte deja nos couleurs. */
.acc-compo .w{position:absolute;display:block;margin:0;border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(21,21,21,.07),0 2px 4px rgba(0,0,0,.04),0 40px 80px -36px rgba(21,21,21,.5);
  transform:translateZ(var(--z));transition:transform .9s var(--ressort),opacity .7s ease;
  transition-delay:calc(var(--i) * 90ms)}
.acc-compo .w img{display:block;width:100%;height:auto}
.fen-barre{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#f5f5f6;
  border-bottom:1px solid rgba(21,21,21,.06)}
.fen-barre i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(21,21,21,.16)}
.fen-barre span{margin:0 auto;padding:2px 12px;border-radius:999px;background:#fff;font-size:11px;line-height:16px;
  color:rgba(21,21,21,.45);letter-spacing:.01em;transform:translateX(-22px)}
/* la scene : les dates au centre et bien visibles (c'est le coeur), la billetterie et la facturation devant,
   sur les bords, cadrees serre pour rester lisibles ; la tete d'une fiche tout devant. Aucune fenetre ne
   sort de la section, profondeur et perspective comprises. */
/* SIX PAGES EN SCENE (13/09, 23 h) : la liste des dates en majeste, puis autour d'elle, a des profondeurs
   differentes, la billetterie (remplissages), la page de reservation (sombre, elle tranche), le budget, les
   visios et la publicite. Elles se chevauchent un peu, comme des fenetres ouvertes sur un bureau. */
.acc-compo{aspect-ratio:10/9;max-height:980px}
.acc-compo .w.dates{left:14%;top:0;width:72%}
.acc-compo .w.billetterie{left:0;top:36%;width:40%}
.acc-compo .w.regy{left:63%;top:31%;width:37%}
.acc-compo .w.visio{left:20%;top:60%;width:38%}
.acc-compo .w.budget{left:1%;top:67%;width:44%}
.acc-compo .w.publicite{left:58%;top:71%;width:42%}
.acc-produit.rv .w{opacity:0;transform:translateZ(var(--z)) translateY(36px)}
.acc-produit.rv.vu .w{opacity:1;transform:translateZ(var(--z))}
/* SUR TELEPHONE, PAS DE COMPOSITION (Tony, 13/09 21 h 40, capture : « sur mobile c'est cata, en plus c'est
   faux ») : en colonne pleine largeur, les widgets devenaient une fausse app lisible (des « Actif », des
   « Désactiver ») au lieu d'une image du produit. Sous 700 px la section disparait ; les scenes animees et
   la grille des icones portent le produit. */
@media (max-width:700px){ .acc-produit{display:none} }
@media (max-width:900px){
  .acc-compo{aspect-ratio:auto;max-height:none;perspective:none;display:grid;grid-template-columns:1fr;gap:14px}
  .acc-compo-in{display:contents}
  /* `.w[class]` bat `.w.dates` (meme specificite, ecrit apres) : sinon les largeurs en % du bureau restent.
     En colonne, la bande de la fiche date seule n'a pas de sens : elle se retire. */
  .acc-compo .w[class]{position:relative;left:auto;top:auto;width:100%;transform:none;--z:0px}
  .acc-compo .w[class].fiche{display:none}
  .acc-lumiere{inset:10% 0}
  .acc-produit.rv .w{transform:translateY(24px)}
  .acc-produit.rv.vu .w{transform:none}
}
@media (max-width:700px){
  .acc-produit{padding:8px 16px 0}
  .acc-produit-tete{margin-bottom:22px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA LANGUE DU COCKPIT SUR LA LANDING (24/09/2026)
   Koulisse.app a sa charte : `docs/design/langue-du-cockpit.md` et la regle
   `.claude/rules/design-system.md` de la branche `refactor`. La landing parle
   desormais la meme. Les jetons sont ceux de `src/app/globals.css`, pas des
   valeurs recopiees a la main.

   Un sol gris, des panneaux blancs qui flottent, des tuiles grises dedans,
   des pilules, UNE seule tache jaune sur toute la page, la couleur seulement
   la ou elle veut dire quelque chose. Interdits tenus ici : aucune bordure,
   aucune ombre au repos, aucun degrade, aucun flou, aucun fond translucide,
   aucune ligne de separation, aucun rond de couleur decoratif.
   ═══════════════════════════════════════════════════════════════════════════ */

body.acc{
  --sol:#f5f6f8; --surface:#fff; --surface-2:#f5f6f8; --surface-3:#eceef2;
  --encre:#0a0a0b; --encre-64:#5b5b5e; --encre-36:#6f6f75;
  --encre-08:rgba(10,10,11,.08); --encre-04:rgba(10,10,11,.04);
  --accent:#f6c744; --accent-soft:rgba(246,199,68,.22); --accent-fg:#1a1a1a;
  --r-control:10px; --r-card:16px; --r-tuile:20px; --r-rail:32px;
  --dur-vif:180ms; --dur-scene:240ms;
  --ease-scene:cubic-bezier(.22,1,.36,1); --ressort:cubic-bezier(.34,1.56,.64,1);
  --texte:#0a0a0b; --texte-2:#5b5b5e; --texte-3:#6f6f75;
  --bord:transparent; --bord-fort:transparent; --verre:#fff;
  --ombre-douce:none;
  background:var(--sol)}
body.acc ::selection{background:var(--accent);color:var(--accent-fg)}

/* ─── 1. le sol et les panneaux ─── */
.acc-produit,.acc-chap,.acc-sec,.acc-final{position:relative}
.acc-panneau-fond{background:var(--surface);border-radius:var(--r-tuile)}

.acc-sec:not(.acc-questions):not(#metiers) > .acc-logos,
.acc-donnees,.acc-plans,.acc-qs{margin-top:22px}

/* les sections de contenu deviennent des panneaux blancs poses sur le sol */
#metiers,#branche,#donnees,#prix,#questions,.acc-sec.acc-branche{
  max-width:1008px;margin:0 auto 20px;padding:28px;
  background:var(--surface);border-radius:var(--r-tuile)}
.acc-sec h2{font-size:1.125rem;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.acc-sec-p{font-size:.9375rem;color:var(--encre-64);margin-top:6px}
.acc-sec-p a{color:var(--encre-64);text-decoration:none;font-weight:500}
.acc-sec-p a:hover{color:var(--encre)}

/* ─── 2. le premier ecran ─── */
.acc-hero{background:var(--sol)}
.acc-titre{font-weight:800;letter-spacing:-.03em}
.acc-degrade{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--encre)}
/* le point de marque, seule couleur du titre : la loi « tout titre porte son point » */
.acc-titre .acc-ligne:last-child>span::after{content:".";color:var(--accent)}
.acc-phrase{color:var(--encre-64)}
.acc-phrase a{color:var(--encre);font-weight:500}
.acc-phrase a:hover,.acc-phrase a:focus-visible{text-decoration:none;
  background:var(--accent-soft);border-radius:4px;box-shadow:0 0 0 3px var(--accent-soft)}
.acc-note,.acc-lien{color:var(--encre-36) !important}
.acc-lien:hover{color:var(--encre) !important}

/* LA pilule jaune de la page : l'action qui cree un espace */
.acc-noir{background:var(--accent);color:var(--accent-fg) !important;box-shadow:none;
  height:44px;padding:0 20px;font-size:.9375rem;font-weight:600;letter-spacing:-.011em}
.acc-noir:hover{background:#ecb939;transform:none}
.acc-noir:active{background:#d9a520;transform:none}
/* l'en-tete : une pilule grise, jamais un second jaune */
.acc-pil{background:var(--surface);color:var(--encre) !important;font-weight:600;
  height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px}
.acc-pil:hover{background:var(--surface-3)}
.acc-sym:hover{background:var(--surface)}

/* les affiches : une photo encadree de blanc, sans ombre */
.acc-aff img{border-radius:var(--r-control);border-width:5px;box-shadow:none}
body.genre-actif .acc-aff.vu img{opacity:.3;filter:none}

/* ─── 3. la bande d'activite : jaune plat, sans ombre ni filet ni pastille ─── */
.acc-bande{background:var(--accent);border-top:0;box-shadow:none}
.acc-bande::after{display:none}
.acc-bande-item{color:var(--accent-fg);font-size:.9375rem;font-weight:600;letter-spacing:-.011em;
  padding:15px 26px}
.acc-bande-item + .acc-bande-item{border-left:0}
.acc-bande-ic{background:transparent;box-shadow:none;width:auto;height:auto;color:var(--accent-fg)}
.acc-bande-ic svg{width:17px;height:17px}

/* ─── 4. les panneaux d'une scene : blanc, rayon panneau, zero ombre ─── */
body.acc .mini,body.acc .ecran,body.acc .noyau,body.acc .sat,.crm-carte,.ep-src,.ep-date,
body.acc #scene-ia.ia2,body.acc #scene-ia .ia-fiche,.acc-compo .w,.acc-logo,.acc-plan,.acc-donnee{
  box-shadow:none !important;border:0}
body.acc .noyau,.ep-date,body.acc #scene-ia.ia2{background:var(--surface);border-radius:var(--r-tuile)}
.crm-carte,.ep-src,body.acc #scene-ia .ia-fiche{background:var(--surface);border-radius:var(--r-tuile)}
.acc-compo .w{border-radius:var(--r-card)}
body.acc .sat{background:var(--surface);border-radius:999px}
body.acc .sat.actif{transform:translateY(-2px);box-shadow:none !important;border-color:transparent}
body.acc .sat .ico{box-shadow:none}
.eparp.ep-fini .ep-date{box-shadow:none !important}
.ep-note{background:var(--surface)}
.ep-postit{background:var(--accent);box-shadow:none}
.acc-lumiere{display:none}
.acc-trame{display:none}
.noy-aff,.ep-aff,.ia2-aff{box-shadow:none}
.tel3d-cadre{filter:none}
.fen-barre{background:var(--surface-2);border-bottom:0}
.fen-barre span{background:var(--surface);color:var(--encre-36)}

/* les tuiles grises dans un panneau blanc */
.ep-l,body.acc .crm3 .range-l,body.acc .crm3 .mail-d,body.acc #scene-ia .ia-dit,
body.acc .demo .auto{background:var(--surface-2);border-radius:var(--r-control)}
.ep-l.ouvre{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.ep-cel{background:var(--surface-3);border-radius:6px}

/* ─── 5. les cartes d'une grille : tuiles grises, pas de filet lumineux ─── */
.acc-carte{padding:0;background:transparent;border-radius:var(--r-control)}
.acc-carte::before,.acc-carte-in::after{display:none}
.acc-carte-in{background:var(--surface-2);border-radius:var(--r-control);padding:16px;
  transition:background var(--dur-vif) var(--ease-scene)}
.acc-carte:hover .acc-carte-in{background:var(--surface-3)}
.acc-carte:active{transform:none}
.acc-nom{font-size:.9375rem;font-weight:600;letter-spacing:-.011em}
.acc-desc{font-size:.8125rem;color:var(--encre-36);font-weight:500}
.acc-app{filter:none}
.acc-carte:hover .acc-app{transform:none;filter:none}
/* aucun pave de couleur derriere une icone : l'icone est nue, dans un rond gris */
.acc-tuile{background:var(--surface-3) !important;border-radius:999px;width:40px;height:40px}
.acc-tuile svg{color:var(--encre)}

/* ─── 6. les logos de ce sur quoi ca se branche ─── */
.acc-logo{background:var(--surface-2);border-radius:var(--r-control);box-shadow:none}
.acc-logo:hover{background:var(--surface-3);transform:none;box-shadow:none}

/* ─── 7. les donnees, les prix, les questions : des tuiles, pas des filets ─── */
.acc-donnee{background:var(--surface-2);border-radius:var(--r-control);box-shadow:none}
.acc-donnee b{font-size:.9375rem;font-weight:600}
.acc-donnee span{font-size:.8125rem;color:var(--encre-36);font-weight:500}
.acc-plan{background:var(--surface-2);border-radius:var(--r-card);box-shadow:none}
.acc-plan:hover{background:var(--surface-3);transform:none;box-shadow:none}
.acc-plan.vedette{background:var(--encre);box-shadow:none}
.acc-plan.vedette,.acc-plan.vedette .acc-plan-nom,.acc-plan.vedette .acc-plan-prix span,
.acc-plan.vedette .acc-plan-l li{color:#fff}
.acc-plan.vedette .acc-plan-l svg{color:var(--accent)}
.acc-plan.vedette .acc-noir-s{background:var(--surface);color:var(--encre) !important}
.acc-plan.vedette .acc-noir-s:hover{background:var(--surface-3)}
.acc-plan-nom{font-size:.8125rem;font-weight:600;color:var(--encre-36);letter-spacing:.07em;text-transform:uppercase}
.acc-plan-prix b{font-weight:800;letter-spacing:-.03em}
.acc-plan-l svg{color:var(--encre-36)}
.acc-q{border-top:0;padding:14px 16px;background:var(--surface-2);border-radius:var(--r-control);margin-bottom:10px}
.acc-qs{gap:0 16px}
.acc-q h3{font-size:.9375rem;font-weight:600}
.acc-q p{font-size:.8125rem;color:var(--encre-64);font-weight:500}

/* ─── 8. les boutons de la fin : pilule encre, pilule grise ─── */
.acc-final{margin-top:20px;padding:80px 24px 70px}
.acc-final-in{max-width:1008px;margin:0 auto;padding:44px 28px;
  background:var(--surface);border-radius:var(--r-tuile)}
.acc-final h3{font-weight:800;letter-spacing:-.03em;font-size:34px}
.acc-contour{border:0;background:var(--encre);color:#fff !important;height:40px;padding:0 18px;font-weight:600}
.acc-contour:hover{background:#000;color:#fff !important}
.acc-gris{background:var(--surface-2);color:var(--encre) !important;height:40px;padding:0 18px;font-weight:600}
.acc-gris:hover{background:var(--surface-3)}
.acc-noir-s{background:var(--encre);color:#fff !important;font-weight:600}
.acc-noir-s:hover{background:#000;transform:none}

/* ─── 9. le pied : de l'espace, pas un filet ─── */
.acc-pied-l1{border-top:0;padding-top:26px}
.acc-pied-mot span{color:var(--accent)}
.acc-pied-ico a:hover{background:var(--surface)}
.acc a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-control)}

/* ─── 10. plus aucun degrade nulle part ─── */
body.acc .noyau .jauge i,body.acc .flux .bille,.crm3 .rail-e::after,
body.acc #scene-ia .ia-micro.ecoute .onde i{background:var(--accent)}
.crm3 mark,.ep-mot{background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 88%/0% 42%}
.crm3:has(#range.anim-ia) mark{background-size:100% 42%}
.ep-mot.vise{background-size:100% 42%}
body.acc .fils path.actif{stroke:var(--accent)}
body.acc .fils .goutte{filter:none}
.acc-etiq{background:var(--surface-2);color:var(--encre-64);font-size:.8125rem;font-weight:600}
.acc-etiq-t{background:var(--encre) !important;color:#fff !important;border-radius:999px;width:22px;height:22px}
.acc-etiq-t::before{display:none}
.acc-etiq-t[style*="#f6c744"]{background:var(--accent) !important;color:var(--accent-fg) !important}
.crm-lien::before{background:var(--surface-3)}
.crm-lien .fl{background:var(--surface-2);box-shadow:none;color:var(--encre-36)}
.crm3 .mail-fait.la .fl,.crm3:has(.rail-e li.ok) .crm-lien-2 .fl{background:var(--encre);color:#fff;
  box-shadow:none;transform:none}
.crm-gain{background:var(--surface-2);color:var(--encre)}
.crm-pas i{background:var(--encre)}
.ep-cible:empty::before{background:var(--surface-3)}
.ia2-corps::before{background:linear-gradient(var(--surface-3),var(--surface-3)) 0 0/42% 12px no-repeat,
  linear-gradient(var(--surface-3),var(--surface-3)) 0 30px/88% 16px no-repeat,
  linear-gradient(var(--surface-3),var(--surface-3)) 0 62px/64% 12px no-repeat}
body.acc #scene-ia .ia-micro .b{border:0;background:var(--encre);color:var(--accent);box-shadow:none}
@keyframes acc-orbe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
body.acc #scene-ia .ia-go{background:var(--surface-3);color:var(--encre)}
body.acc #scene-ia .ia-dit.ecrit .ia-go{background:var(--encre);color:var(--accent)}
body.acc .demo .salle-module{background:var(--surface-2);color:var(--encre-64)}
body.acc #scene-ia:not(.anim-ia) .ia-fiche{background:var(--surface-2)}
.acc-legal-texte{border-top:0}
.acc-legal-texte .acompleter{background:var(--accent-soft);color:var(--encre)}

/* ─── 11. les titres, a l'echelle du cockpit ─── */
.acc-h2{font-weight:800;letter-spacing:-.03em}
.acc-p{color:var(--encre-64)}
.acc-avant{color:var(--encre-36)}

@media (max-width:700px){
  #metiers,#branche,#donnees,#prix,#questions,.acc-sec.acc-branche{padding:20px 16px;margin-bottom:14px}
  .acc-final-in{padding:32px 20px}
  .acc-final h3{font-size:26px}
}

/* ─── 12. aucun pave de couleur derriere une icone : un rond gris, l'icone dedans ─── */
.crm3 .ri,.ep-l .ri,body.acc .sat .ico,body.acc .demo .tag .p{
  background:var(--surface-3) !important;color:var(--encre) !important;
  border-radius:999px;box-shadow:none !important}
body.acc .sat .ico.nu{background:var(--surface-2) !important;border-radius:999px}
.ep-l.ouvre .ri{background:var(--accent) !important;color:var(--accent-fg) !important}

/* l'anneau degrade cyan-violet de la fiche d'Intelligence : la charte ne veut pas de degrade,
   la fiche se detache par sa matiere (blanche sur le sol), pas par un contour lumineux */
body.acc #scene-ia .ia-fiche::after{display:none}
body.acc #scene-ia .ia-fiche{background:var(--surface)}

/* la barre d'une fenetre d'app : plus claire que le sol, sinon elle disparait et la pilule
   « koulisse.app » a l'air de flotter toute seule au-dessus de l'ecran */
.fen-barre{background:var(--surface-3)}
.fen-barre i{background:rgba(10,10,11,.18)}

/* ─── Regy, l'intelligence de Koulisse : son orbe, tel quel depuis l'app ───
   Les valeurs sont celles de `src/app/globals.css` (jetons `--orbe-*`) : une sphere jaune qui
   luit, deux yeux qui clignent. C'est son visage, partout ou elle parle. */
.k-orbe{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;
  overflow:hidden;border-radius:9999px;width:100%;height:100%;
  background:radial-gradient(circle at 50% 45%,#c48f0a 0%,#e6b322 42%,#f6c744 70%,#fff3c4 100%);
  box-shadow:0 0 4px 0 rgba(214,142,0,.35),0 0 16px 6px rgba(214,142,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.05)}
.k-orbe-reflet{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 24%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.1) 50%,transparent 70%)}
.k-orbe-ombre{position:absolute;inset:0;pointer-events:none;filter:blur(2px);
  background:radial-gradient(circle at 62% 68%,rgba(0,0,0,.1) 0%,transparent 55%)}
.k-orbe-yeux{position:relative;z-index:1;display:flex;align-items:center;gap:11px;transform:translateY(-3px)}
.k-orbe-yeux i{display:block;width:7px;height:12px;border-radius:9999px;
  background:linear-gradient(135deg,#fff 0%,#fff0a8 100%);animation:orbe-cligne 3.6s var(--ease-scene) infinite}
.k-orbe-yeux i:last-child{animation-delay:60ms}
@keyframes orbe-cligne{0%,88%,100%{transform:scaleY(1)}93%,97%{transform:scaleY(.07)}}
/* le bouton qui la porte n'est plus un disque encre : l'orbe EST le visage */
body.acc #scene-ia .ia-micro .b{width:56px;height:56px;background:none;box-shadow:none;border:0;padding:0}
body.acc #scene-ia .ia-micro.ecoute .b{animation:none}
@media (prefers-reduced-motion:reduce){ .k-orbe-yeux i{animation:none} }
/* l'etiquette de Regy : son orbe a la place de la tuile */
.acc-etiq-t[style*="transparent"]{background:none !important;padding:0;width:22px;height:22px}
.acc-etiq-t[style*="transparent"] .k-orbe-yeux{gap:4px;transform:translateY(-1px)}
.acc-etiq-t[style*="transparent"] .k-orbe-yeux i{width:3px;height:5px}