/* Atelier — couche commune « façon Apple » (décision du 9 nov.) : typographie SF Pro et mouvement expressif.
   Chargée APRÈS le style de chaque écran : elle le complète sans le réécrire. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  /* SF Pro sur iPad, iPhone et Mac ; Inter (très proche) ailleurs */
  --apple-titre:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Inter","Helvetica Neue",sans-serif;
  --apple-texte:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Inter","Helvetica Neue",sans-serif;
  --serif:var(--apple-titre);
  --sans:var(--apple-texte);
  --contenu:"Instrument Serif",Georgia,serif;   /* seulement pour le texte DANS les vidéos et carrousels */
  --degrade:linear-gradient(90deg,#f5c96a 0%,#ee8a3a 55%,#e8541e 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-move:cubic-bezier(.65,0,.35,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--apple-texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.012em}

/* --- Typographie façon apple.com : titres gras, serrés, mots clés en dégradé --- */
h1,h2,h3,.entree.principale strong,.espace .nb,.chiffre b,.stat b,.texte-g,.ajouter b,.lettre,.marque b,.p-haut h2,.fenetre h3,.hero{
  font-family:var(--apple-titre)!important;font-weight:700!important;letter-spacing:-.035em!important}
h1{line-height:1.02!important}
.titre h1{font-size:clamp(2.8rem,6vw + .5rem,5.4rem)!important;letter-spacing:-.045em!important}
h1 em,h2 em,.texte-g em,.titre-c em{font-style:normal!important;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.espace .nb small,.chiffre b span,.stat b span{font-family:var(--apple-texte)!important;font-weight:500!important;letter-spacing:-.01em!important}
.logo{font-family:var(--apple-titre)!important;font-style:normal!important;font-weight:800!important;font-size:20px!important}
.sous,.chapo,.p-role,.panneau .sous{letter-spacing:-.015em}
/* Le texte affiché DANS la vidéo garde la police du modèle */
.apercu .txt,.diapo .txt,.vignette,.tagline{font-family:var(--contenu)!important;font-weight:400!important;letter-spacing:-.01em!important}
.apercu .txt em,.diapo .txt em{background:none!important;color:var(--or)!important;font-style:italic!important}

/* --- Lumière d'ambiance qui respire --- */
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(45vmax 32vmax at 78% 8%,rgba(232,184,74,.11),transparent 62%),radial-gradient(40vmax 30vmax at 10% 95%,rgba(232,84,30,.07),transparent 60%);
  animation:respire 9s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(1) translate3d(0,0,0);opacity:.75}to{transform:scale(1.08) translate3d(-1.5vmax,1vmax,0);opacity:1}}
body{background-image:none!important}

/* --- Barre du haut floutée qui reste en place (comme apple.com) --- */
.entete{position:sticky;top:0;z-index:30;margin:0 -16px;padding-left:16px!important;padding-right:16px!important;transition:background .35s var(--ease),backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.entete.colle{background:rgba(21,19,17,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:rgba(240,228,206,.08)}

/* --- Apparitions : fondu + montée + léger zoom + flou qui se dissipe --- */
@keyframes monte{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.apparait{animation-duration:.9s!important;animation-timing-function:var(--ease)!important}
.revele{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px)}
.revele.vu{opacity:1;transform:none;filter:none;transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease);transition-delay:var(--d,0ms)}

/* --- Transitions d'écran (navigation entre pages) --- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sortie .45s var(--ease-move) both}
::view-transition-new(root){animation:entree .7s var(--ease) both}
@keyframes sortie{to{opacity:0;transform:scale(.97);filter:blur(4px)}}
@keyframes entree{from{opacity:0;transform:scale(1.03)}}
::view-transition-group(carte){animation-duration:.7s;animation-timing-function:var(--ease)}
.voile-page{position:fixed;inset:0;z-index:999;background:var(--fond,#151311);pointer-events:none;opacity:0;transition:opacity .35s var(--ease-move)}
.voile-page.on{opacity:1}

/* --- Interactions --- */
button,a,.entree,.espace,.modele,.script,.agent,.ligne,.vign{-webkit-tap-highlight-color:transparent}
.entree,.espace,.agent,.ia,.rendu,.script,.ligne,.bloc{transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease),background .3s}
@media (hover:hover){
  .entree:hover,.espace:hover,.agent:hover,.script:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.65)}
  .btn:hover,.b:hover{transform:scale(1.02)}
}
:focus-visible{outline:2px solid var(--or,#e8b84a);outline-offset:3px;border-radius:12px}

/* --- Vignettes de modèles vivantes --- */
.modele .apercu,.modeles .apercu{transition:transform .6s var(--ease)}
.modele .apercu::before,.modele .apercu::after{animation:flotte 7s ease-in-out infinite alternate}
.modele:nth-child(2n) .apercu::before,.modele:nth-child(2n) .apercu::after{animation-duration:9s;animation-delay:-3s}
@keyframes flotte{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-6%) rotate(calc(var(--r,0deg) + 2deg))}}
.ap-vox::before{--r:-4deg}.ap-collage::before{--r:-6deg}.ap-collage::after{--r:5deg}

/* --- Timeline qui se dessine, coches et barres animées --- */
.dessine{clip-path:inset(0 100% 0 0)}
.dessine.vu{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease);transition-delay:var(--d,0ms)}
.ok svg path,.coche svg path,.etat svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:trace .7s var(--ease) forwards;animation-delay:var(--d,.3s)}
@keyframes trace{to{stroke-dashoffset:0}}
.repere-vu{opacity:0;animation:fondu-repere .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes fondu-repere{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.barre i,.trait i{transition:width .9s var(--ease)!important}
.compte-vu{display:inline-block;animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.9);opacity:.4}}

/* --- Calme si l'iPad réduit les animations --- */
@media (prefers-reduced-motion:reduce){
  body::before,.modele .apercu::before,.modele .apercu::after{animation:none!important}
  .repere-vu{animation:none!important;opacity:1!important}
  .revele,.dessine{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .ok svg path,.coche svg path,.etat svg path{animation:none!important;stroke-dashoffset:0!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s!important}
}