/* ==========================================================
   Accueil animé : écran qui s'allume et change de scène,
   fond qui bouge, titre qui apparaît, cartes qui réagissent à la souris,
   apparitions au défilement.
   Tout ne bouge qu'avec <html class="anime"> (posée par js/animations.js) :
   sans JavaScript, ou si le visiteur a demandé moins d'animations
   (réglage « réduire les animations »), la page reste fixe et lisible.
   ========================================================== */

/* ---------- Titre et écran côte à côte ---------- */
.hero-zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:12px 40px;align-items:center;padding-bottom:18px}
.hero-zone .sous-titre{margin:-6px 0 0}
.hero-ecran{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;--lueur:60,109,240}
.hero-ecran[data-scene="2"]{--lueur:227,52,43}
.ecran-halo{position:absolute;z-index:-1;left:8%;right:8%;top:10%;bottom:22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--lueur),.42),rgba(var(--lueur),0));filter:blur(18px);transition:background 1s ease}
.moniteur{width:100%;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease-out}
.moniteur-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 22px 28px rgba(16,19,28,.22))}
.voyant{fill:#3A4050;transition:fill .4s ease}
.hero-ecran.allume .voyant{fill:#5CD08E}

/* Scènes : une seule visible à la fois. Sans animation, c'est le bureau. */
.scene{opacity:0;transition:opacity .5s ease}
.hero-ecran[data-scene="1"] .scene-1,.hero-ecran[data-scene="2"] .scene-2{opacity:1}
.cellules rect{fill:#DCE6FF}
.barres rect{fill:#8FB2FF}
.barres rect:nth-child(5){fill:#3C6DF0}
.curseur{transform:translate(290px,160px)}
/* Scène 2 (course) : compteur de vitesse */
.vitesse-val{font:italic 800 22px var(--font-display);fill:#fff;letter-spacing:-.5px}
.vitesse-unite{font:700 9px var(--font-body);fill:#FFD9A8}
.jauge{transform-box:fill-box;transform-origin:left center;transform:scaleX(.82)}
.hud text{font:700 10px var(--font-body);fill:#fff}
.tirets path,.poteaux g,.traits path{opacity:0}
.tirets path:first-child{opacity:1}
.allumage,.reflet{opacity:0}

/* Boutons sous l'écran : Bureau / Gaming, avec barre de progression */
.scenes{display:flex;gap:8px}
.scene-bouton{position:relative;overflow:hidden;font:600 .84rem var(--font-body);color:var(--muted);background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer}
.scene-bouton[aria-pressed="true"]{color:var(--ink);border-color:#CDD3E3}
.scene-bouton span{position:relative;z-index:1}
.scene-bouton i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgb(var(--lueur));transform:scaleX(0);transform-origin:left}
.scene-bouton[aria-pressed="true"] i{transform:scaleX(1)}

@media (max-width:860px){
  .hero-zone{grid-template-columns:minmax(0,1fr)}
  .hero-ecran{max-width:400px;width:100%;justify-self:center;margin-top:8px}
}
/* Téléphone : écran un peu plus petit, pour que la carte Bureautique se voie dès l'arrivée */
@media (max-width:600px){
  .hero-ecran{max-width:290px;margin-top:0;gap:10px}
  .hero-zone{padding-bottom:6px}
}

/* ==========================================================
   Tout ce qui suit ne s'applique qu'avec les animations activées
   ========================================================== */

/* ---------- L'écran s'allume ---------- */
.anime .hero-ecran:not(.allume) .scene{opacity:0!important;transition:none}
.anime .allumage{transform-box:fill-box;transform-origin:center}
.anime .hero-ecran.allume .allumage{animation:allumage .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes allumage{
  0%{opacity:0;transform:scaleX(.02) scaleY(1)}
  25%{opacity:1;transform:scaleX(1) scaleY(1)}
  60%{opacity:.9;transform:scaleX(1) scaleY(52)}
  100%{opacity:0;transform:scaleX(1) scaleY(52)}
}
.anime .moniteur{animation:flotte 7s ease-in-out infinite}
@keyframes flotte{50%{translate:0 -6px}}

/* Reflet qui balaie la dalle à chaque changement de scène */
.anime .hero-ecran.change .reflet{animation:reflet .9s ease-out}
@keyframes reflet{0%{opacity:1;transform:skewX(-18deg) translateX(0)}100%{opacity:1;transform:skewX(-18deg) translateX(620px)}}

/* Barre de progression du bouton actif : elle se remplit pendant la scène */
.anime .scene-bouton[aria-pressed="true"] i{animation:progression var(--duree,4.2s) linear both}
@keyframes progression{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.anime .hero-ecran.pause .scene-bouton i{animation-play-state:paused}

/* Scène 1 : les cases du tableur se remplissent, les barres montent, la courbe se dessine, la souris bouge */
.anime .scene-1.joue .cellules rect{animation:case .5s ease both;animation-delay:calc(var(--i) * 90ms + .2s)}
@keyframes case{from{fill:#F1F4FA}to{fill:#DCE6FF}}
.anime .scene-1.joue .barres rect{transform-box:fill-box;transform-origin:bottom;animation:barre .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 110ms + .4s)}
@keyframes barre{from{transform:scaleY(0)}}
.anime .scene-1.joue .courbe{stroke-dasharray:200;animation:trace 1.4s ease both .6s}
@keyframes trace{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.anime .scene-1.joue .curseur{animation:souris 3.6s ease-in-out both}
@keyframes souris{0%{transform:translate(290px,190px)}35%{transform:translate(128px,112px)}55%{transform:translate(128px,112px)}100%{transform:translate(330px,96px)}}

/* Scène 2 : course automobile. Les lignes, les poteaux et les traits de vitesse grandissent depuis l'horizon
   (effet de perspective), la route ondule comme dans des virages, la voiture se penche et freine parfois.
   La vitesse affichée varie grâce à js/animations.js */
.anime .scene-2.joue .tirets path,.anime .scene-2.joue .poteaux g,.anime .scene-2.joue .traits path{
  transform-box:view-box;transform-origin:200px 110px;animation:approche .9s cubic-bezier(.55,0,1,1) infinite;animation-delay:calc(var(--i) * -.225s)}
.anime .scene-2.joue .poteaux g{animation-duration:1.2s;animation-delay:calc(var(--i) * -.3s)}
.anime .scene-2.joue .traits path{animation-name:trait;animation-duration:.7s;animation-delay:calc(var(--i) * -.18s)}
@keyframes approche{0%{transform:scale(.03);opacity:0}12%{opacity:1}100%{transform:scale(1.55);opacity:1}}
@keyframes trait{0%{transform:scale(.4);opacity:0}30%{opacity:.45}100%{transform:scale(1.7);opacity:0}}
.anime .scene-2.joue .monde{transform-box:view-box;transform-origin:200px 226px;animation:virage 4.2s ease-in-out infinite alternate}
@keyframes virage{from{transform:skewX(6deg)}to{transform:skewX(-6deg)}}
.anime .scene-2.joue .montagnes{animation:montagnes 4.2s ease-in-out infinite alternate}
@keyframes montagnes{from{transform:translateX(14px)}to{transform:translateX(-14px)}}
.anime .scene-2.joue .voiture{transform-box:view-box;transform-origin:200px 214px;animation:pilote 4.2s ease-in-out infinite alternate}
@keyframes pilote{from{transform:translateX(-9px) rotate(-1.6deg)}to{transform:translateX(9px) rotate(1.6deg)}}
.anime .scene-2.joue .feux{animation:freine 4.2s ease-in-out infinite}
@keyframes freine{0%,40%,60%,100%{fill:#FF2A3A}46%,54%{fill:#FF8A94}}
.anime .scene-2.joue .compteur,.anime .scene-2.joue .hud{animation:hud .6s ease both .3s}
@keyframes hud{from{opacity:0;transform:translateY(-8px)}}
.anime .scene-2.joue .jauge{transition:transform .5s ease-out}

/* ---------- Fond qui bouge : les halos bleu et rouge dérivent doucement ---------- */
.anime .page::before{animation:derive-1 22s ease-in-out infinite alternate}
.anime .page::after{animation:derive-2 26s ease-in-out infinite alternate}
@keyframes derive-1{to{transform:translate(160px,90px) scale(1.18)}}
@keyframes derive-2{to{transform:translate(-180px,120px) scale(1.12)}}
.anime .stage::before{animation:derive-3 16s ease-in-out infinite alternate}
.anime .stage::after{animation:derive-4 18s ease-in-out infinite alternate}
@keyframes derive-3{to{transform:translate(18%,22%)}}
@keyframes derive-4{to{transform:translate(-16%,-20%)}}

/* ---------- Titre : les mots montent un par un ---------- */
.anime h1.hero .mot{display:inline-block;animation:mot .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms + .1s)}
@keyframes mot{from{opacity:0;transform:translateY(45%);filter:blur(6px)}}
.anime .hero-zone .sous-titre{animation:monte .8s ease both .45s}
.anime .scenes{animation:monte .8s ease both 1.1s}
@keyframes monte{from{opacity:0;transform:translateY(14px)}}

/* ---------- Cartes Bureautique et Gaming ---------- */
.anime .choice{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .35s ease-out,box-shadow .35s ease;position:relative;overflow:hidden}
.anime .choice:hover{--ty:-4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 28px 50px -26px rgba(var(--t),1)}
/* Reflet de lumière qui suit la souris */
.anime .choice::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 45%)}
.anime .choice:hover::after{opacity:1}
.anime .choice .art{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.anime .choice:hover .art{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 16px 18px rgba(var(--t),.55))}
.anime .choice .arrow{transition:transform .3s ease,background .3s ease,color .3s ease}
.anime .choice:hover .arrow{transform:translateX(4px);background:var(--c);color:#fff}
/* Gaming : l'éclair de l'illustration pulse */
.anime .choice.gaming .choice-foot{position:relative}
.anime .choice.gaming .choice-foot::before{content:"";position:absolute;right:calc(min(240px,62%) / 2 - 30px);bottom:46%;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));opacity:0;pointer-events:none}
.anime .choice.gaming:hover .choice-foot::before{animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}

/* ---------- Apparitions au défilement ---------- */
.anime [data-apparait]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--rang,0) * 80ms)}
.anime [data-apparait].vu{opacity:1;transform:none}

/* Bouton « Trouver mon écran » de l'encadré : un éclat passe de temps en temps */
.anime .aide-bouton{position:relative;overflow:hidden}
.anime .aide-bouton::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));animation:eclat 4.5s ease-in-out infinite 2s}
@keyframes eclat{0%,70%{left:-60%}100%{left:130%}}

/* Écran tactile : pas d'inclinaison à la souris */
@media (hover:none){
  .anime .choice,.moniteur{transform:none}
}

/* ---------- Titres de section : des pixels se rassemblent en petit écran (créés par js/animations.js) ---------- */
.anime .bloc-tete h2{display:inline-flex;align-items:center;gap:12px}
.pix{position:relative;display:inline-block;width:24px;height:19px;flex:none}
.pix i{position:absolute;width:4px;height:4px;border-radius:1px;background:#3C6DF0;opacity:0;
  transform:translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease;transition-delay:calc(.25s + var(--i) * 40ms)}
.pix i:last-child{background:#E3342B}
.bloc-tete.vu .pix i{opacity:1;transform:none}