/* ==========================================================================
   Scènes animées des en-têtes de page
   Dessins : scenes.php. Enchaînement : scenes.js. Ici : l'emplacement, les
   couleurs, et la POSE FINALE de chaque scène — celle qu'affiche un visiteur
   qui refuse les animations, et celle où chaque animation se termine.
   Toutes les couleurs viennent des jetons de style.css.
   ========================================================================== */

/* ---------- emplacement : à droite du titre, dans le vide de l'en-tête ---------- */
/* La place du bouton « Rejouer » est réservée d'emblée : sans cela, son
   apparition allongeait la figure, et la scène — centrée verticalement —
   remontait d'un cran. */
.scene{position:relative; margin:28px 0 0; width:min(100%,380px); padding-bottom:30px}
.scene svg{display:block; width:100%; height:auto}
@media(min-width:1060px){
  /* La colonne de texte se resserre de la largeur de la scène : le texte ne
     passe jamais dessous, et l'en-tête garde une hauteur suffisante même
     quand il ne porte qu'un titre (page À propos). */
  .phero.avec-scene .wrap{padding-right:calc(clamp(18px,4vw,36px) + 410px); min-height:270px}
  .phero.avec-scene .scene{position:absolute; top:50%; right:clamp(18px,4vw,36px); width:380px; margin:0;
    transform:translateY(-50%)}
}

.scene-rejouer{position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:6px; padding:4px 12px;
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1.4; color:var(--muted); background:none;
  border:1px solid var(--line); border-radius:99px; cursor:pointer}
.scene-rejouer:hover{color:var(--ink); border-color:var(--muted)}
.scene-rejouer[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.scene-rejouer{display:none}}

/* Les groupes animés ont pour origine leur point d'attache : c'est ce qui fait
   pivoter un membre autour de son articulation. Les exceptions — ce qui doit
   grossir ou tourner sur son propre centre — sont déclarées plus bas. */
.scene g,.scene path,.scene rect,.scene circle,.scene text{transform-box:view-box; transform-origin:0 0}

/* ---------- le personnage λ ---------- */
.scene .p-seg{fill:none; stroke-width:5.5; stroke-linecap:round}
.scene .p-bleu{stroke:var(--mark-bleu)}
.scene .p-vert{stroke:var(--mark-vert)}
.scene .p-bleu-f{fill:var(--mark-bleu)}
.scene .p-vert-f{fill:var(--mark-vert)}
.scene .p-pivot{fill:var(--bg); stroke:var(--mark-vert); stroke-width:2.5}
.scene .p-gris .p-seg{stroke:var(--muted)}
.scene .p-gris .p-bleu-f,.scene .p-gris .p-vert-f{fill:var(--muted)}
.scene .p-gris .p-pivot{stroke:var(--muted)}
/* Homme debout : pieds et hanche réduits à de petits nœuds. En forme λ, ils
   ont la taille des nœuds du logo. */
.scene .p-pied{transform:scale(.5)}
.scene .p-pivot{transform:scale(.6)}

/* ---------- le logo, dessiné tel quel ---------- */
.scene .lg-trait{fill:none; stroke-width:6.5; stroke-linecap:round}
.scene .lg-bleu{stroke:var(--mark-bleu)}
.scene .lg-vert{stroke:var(--mark-vert)}
.scene .lg-bleu-f{fill:var(--mark-bleu)}
.scene .lg-vert-f{fill:var(--mark-vert)}
.scene .lg-pivot{fill:var(--bg); stroke:var(--mark-vert); stroke-width:3}
.scene .sc-lambda{transform-box:fill-box; transform-origin:center}

/* ---------- décor commun ---------- */
.scene .sc-sol{stroke:var(--line); stroke-width:2}
.scene .sc-mobilier path{fill:none; stroke:var(--muted); stroke-width:4; stroke-linecap:round}
.scene .sc-plateau{fill:var(--surface); stroke:var(--line); stroke-width:2}
.scene .sc-ecran{fill:var(--surface-2); stroke:var(--ink-soft); stroke-width:2.5}
.scene .sc-pied-ecran,.scene .sc-pied-table{fill:none; stroke:var(--line); stroke-width:3.5; stroke-linecap:round}
.scene .sc-clavier{fill:var(--ink-soft)}

/* ==========================================================================
   Régie — le λ entre, devient un homme, serre la main du client, s'installe
   ========================================================================== */
.scene-regie .sc-ecran-on rect{fill:color-mix(in srgb,var(--ia) 22%,var(--surface))}
.scene-regie .sc-ligne{stroke:var(--ia); stroke-width:3; stroke-linecap:round; transform-box:fill-box; transform-origin:0 50%}
/* Pose finale : assis au bureau, mains sur le clavier ; le client est parti. */
.scene-regie .moi .p-pos{transform:translate(283px,0)}
.scene-regie .moi .p-hanche{transform:translateY(20px)}
.scene-regie .moi .p-j{transform:rotate(-90deg)}
.scene-regie .moi .p-t{transform:rotate(90deg)}
.scene-regie .moi .p-b{transform:rotate(-39deg)}
.scene-regie .moi .p-a{transform:rotate(-37deg)}
.scene-regie .client .p-pos{transform:translate(440px,0)}

/* ==========================================================================
   Intervention — les quatre nœuds du λ deviennent les étapes du chantier
   ========================================================================== */
.scene-intervention .lg-trait{stroke-width:8.5}
.scene-intervention .sc-lambda-traits{opacity:0}
.scene-intervention .sc-frise{stroke:var(--line); stroke-width:3}
.scene-intervention .sc-frise-faite{fill:none; stroke:var(--infra); stroke-width:3; stroke-dasharray:100; stroke-dashoffset:0}
.scene-intervention .sc-n-creux{fill:var(--bg); stroke:var(--mark-vert); stroke-width:3}
.scene-intervention .sc-halo{fill:none; stroke:var(--infra); stroke-width:2; opacity:.3; transform-box:fill-box; transform-origin:center}
.scene-intervention .sc-icone :is(path,rect,ellipse){fill:none; stroke:var(--ink-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.scene-intervention .sc-icone-txt{fill:var(--infra-ink); font:800 12px/1 sans-serif; text-anchor:middle}
.scene-intervention .sc-icone .sc-entoure{stroke:var(--cloud); stroke-width:2; stroke-dasharray:100; stroke-dashoffset:0}
.scene-intervention .sc-icone .sc-coche{stroke:var(--ia); stroke-width:2.5}
.scene-intervention .sc-libelle{fill:var(--ink-soft); font:700 10.5px/1 sans-serif; letter-spacing:.1em; text-transform:uppercase; text-anchor:middle}

/* ==========================================================================
   Support — de poste en poste, chaque écran repasse au vert
   ========================================================================== */
.scene-support .sc-poste-ko rect{fill:color-mix(in srgb,var(--alerte) 22%,var(--surface))}
.scene-support .sc-poste-ko text{fill:var(--alerte); font:800 22px/1 sans-serif; text-anchor:middle}
.scene-support .sc-poste-ok rect{fill:color-mix(in srgb,var(--ia) 22%,var(--surface))}
.scene-support .sc-poste-ok path{fill:none; stroke:var(--ia); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.scene-support .sc-poste-ok{transform-box:fill-box; transform-origin:center}
/* Pose finale : tous les postes au vert, le technicien et l'utilisateur se
   serrent la main au bout de la table ; leurs mains se rejoignent à x = 358,
   à droite du troisième écran pour ne pas le masquer. */
.scene-support .sc-poste-ko{opacity:0}
.scene-support .moi .p-pos{transform:translate(330px,0)}
.scene-support .client .p-pos{transform:translate(386px,0)}
.scene-support .client .p-sens{transform:scaleX(-1)}
.scene-support :is(.moi,.client) .p-b2{transform:rotate(-78deg)}
.scene-support :is(.moi,.client) .p-a2{transform:rotate(-8deg)}

/* ==========================================================================
   Infrastructure — le bouclier repousse les attaques, les données partent
   à la sauvegarde
   ========================================================================== */
.scene-infrastructure .sc-bouclier{fill:color-mix(in srgb,var(--infra) 12%,transparent); stroke:var(--infra);
  stroke-width:3.5; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:0}
.scene-infrastructure .sc-lien{fill:none; stroke:var(--ia); stroke-width:2; stroke-dasharray:5 5}
.scene-infrastructure .sc-paquet{fill:var(--ia); opacity:0}
.scene-infrastructure .sc-sauvegarde :is(path,ellipse){fill:var(--surface); stroke:var(--infra); stroke-width:2.5}
.scene-infrastructure .sc-sauvegarde .sc-bandes{fill:none}
.scene-infrastructure .sc-sauvegarde text{fill:var(--muted); font:700 9.5px/1 sans-serif; letter-spacing:.12em; text-transform:uppercase; text-anchor:middle}
.scene-infrastructure .sc-attaque{opacity:0}
.scene-infrastructure .sc-attaque path{fill:none; stroke:var(--alerte); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.scene-infrastructure .sc-impacts circle{fill:none; stroke:var(--alerte); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center}

/* ==========================================================================
   IA — la machine trie les documents dans vos murs ; le nuage rebondit
   ========================================================================== */
.scene-ia .sc-perimetre{fill:color-mix(in srgb,var(--ia) 6%,transparent); stroke:var(--ia); stroke-width:2; stroke-dasharray:7 6}
.scene-ia .sc-perimetre-txt{fill:var(--ia-ink); font:800 10px/1 sans-serif; letter-spacing:.16em}
.scene-ia .sc-machine{fill:var(--surface); stroke:var(--ia); stroke-width:2.5; transform-box:fill-box; transform-origin:center}
.scene-ia .sc-led{fill:var(--ia)}
.scene-ia .sc-doc rect{fill:var(--surface); stroke:var(--ink-soft); stroke-width:1.8}
.scene-ia .sc-doc path{fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round}
.scene-ia .sc-tampon circle{fill:var(--ia)}
.scene-ia .sc-tampon path{fill:none; stroke:var(--bg); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.scene-ia .sc-nuage :is(circle,rect){fill:var(--cloud)}
.scene-ia .sc-nuage .sc-oeil{fill:var(--bg)}
.scene-ia .sc-nuage{transform-box:fill-box; transform-origin:center}
.scene-ia .sc-choc path{stroke:var(--cloud); stroke-width:3.5; stroke-linecap:round; opacity:0}
/* Pose finale : un document en attente à gauche, un traité à droite. */
.scene-ia .d1{transform:translate(64px,150px) rotate(-14deg)}
.scene-ia .d1 .sc-tampon{opacity:0}
.scene-ia .d2{transform:translate(238px,146px)}
.scene-ia .d3{opacity:0}

/* ==========================================================================
   À propos — le λ parcourt l'Hérault et le Gard
   ========================================================================== */
.scene-a-propos .sc-mer{fill:color-mix(in srgb,var(--infra) 14%,transparent)}
.scene-a-propos .sc-mer-txt{fill:var(--infra-ink); font:italic 600 10.5px/1 sans-serif; opacity:.75}
.scene-a-propos .sc-limite{fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 5; opacity:.6}
.scene-a-propos .sc-dept{fill:var(--muted); font:800 10.5px/1 sans-serif; letter-spacing:.2em; opacity:.75}
.scene-a-propos .sc-route{fill:none; stroke:var(--mark-bleu); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:0; opacity:.45}
.scene-a-propos .sc-epingle path{fill:var(--infra)}
.scene-a-propos .sc-epingle circle{fill:var(--bg)}
.scene-a-propos .sc-epingle-maison path{fill:var(--mark-vert)}
.scene-a-propos .sc-ville-txt{fill:var(--ink-soft); font:700 10px/1 sans-serif}
.scene-a-propos .sc-ville-txt.g{text-anchor:end}
.scene-a-propos .sc-ville-txt.h{text-anchor:middle}
.scene-a-propos .v-vendargues .sc-ville-txt{fill:var(--ia-ink); font-weight:800}
/* Pose finale : le λ, arrêté à droite de Nîmes, dans sa forme de logo. */
.scene-a-propos .moi .p-pos{transform:translate(366px,106px)}
.scene-a-propos .moi .p-buste{transform:rotate(34deg)}
.scene-a-propos .moi .p-j1{transform:rotate(34deg)}
.scene-a-propos .moi .p-j2{transform:rotate(-40deg)}
.scene-a-propos .moi .p-tete{transform:translate(0,10px) scale(.78)}
.scene-a-propos .moi .p-epaules{transform:scale(0)}
.scene-a-propos .moi .p-pied,.scene-a-propos .moi .p-pivot{transform:none}

/* ==========================================================================
   Contact — le λ se plie en avion en papier ; il décolle quand le message part
   ========================================================================== */
.scene-contact .sc-aile{fill:var(--surface); stroke:var(--ia); stroke-width:2.5; stroke-linejoin:round}
.scene-contact .sc-aile-b{fill:color-mix(in srgb,var(--ia) 25%,var(--surface)); stroke:var(--ia); stroke-width:2.5; stroke-linejoin:round}
.scene-contact .sc-pli{stroke:var(--ia); stroke-width:2}
.scene-contact .sc-avion{transform-box:fill-box; transform-origin:center}
.scene-contact .sc-trainee{fill:none; stroke:var(--muted); stroke-width:2; stroke-dasharray:4 6; opacity:.6}
.scene-contact .sc-etincelles{opacity:0; transform-box:fill-box; transform-origin:center}
.scene-contact .sc-etincelles path{stroke:var(--mark-vert); stroke-width:3; stroke-linecap:round}
.scene-contact .sc-lambda{opacity:0}
.scene-contact .sc-envoye{opacity:0; transform-box:fill-box; transform-origin:center}
.scene-contact .sc-envoye circle{fill:color-mix(in srgb,var(--ia) 14%,transparent); stroke:var(--ia); stroke-width:3}
.scene-contact .sc-envoye path{fill:none; stroke:var(--ia); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
.scene-contact .sc-envoye-txt{fill:var(--ink); font:800 14px/1 sans-serif; text-anchor:middle}
.scene-contact .sc-envoye-sous{fill:var(--muted); font:600 11.5px/1 sans-serif; text-anchor:middle}
/* Message envoyé : l'avion est parti, la confirmation reste. */
.scene-contact[data-etat="envoye"] :is(.sc-avion,.sc-trainee){opacity:0}
.scene-contact[data-etat="envoye"] .sc-envoye{opacity:1}

/* ==========================================================================
   404 — le λ, perdu, regarde autour de lui puis montre le chemin
   ========================================================================== */
.scene-404 .sc-question{fill:var(--cloud); font:800 30px/1 sans-serif; text-anchor:middle; opacity:0;
  transform-box:fill-box; transform-origin:center}
.scene-404 .sc-fleche-bas{fill:none; stroke:var(--muted); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.scene-404 .moi .p-pos{transform:translate(200px,0)}
.scene-404 .moi .p-b2{transform:rotate(-35deg)}
.scene-404 .moi .p-a2{transform:rotate(-10deg)}