/* Meridal, le mouvement. Règle de 09-mouvement.md : le trait bouge par images, la surface
   glisse ou ne bouge pas, le film est la nature filmée au ralenti.

   Chaque effet est ajouté par mouvement.js. Sans le script, la page montre son état final.
   Avec « réduire les animations », le script ne pose aucun mouvement. */

:root{
  --pas:166.667ms;          /* un pas de trait : 6 images par seconde */
  --vif:83.333ms;           /* trait qui se pose, retour d'action : 12 images par seconde */
  --pas-lent:500ms;         /* attente, recherche : 2 images par seconde */
  --presse:120ms; --etat:160ms; --dur-trait:200ms; --entree:320ms; --voile:640ms;
  --courbe:cubic-bezier(.2,.7,.2,1);
}

/* ————————————————————————————————————————— P02 · le trait qui se pose */
.mvt-trait{position:absolute;pointer-events:none;overflow:visible;color:var(--accent)}
.mvt-trait path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.lien-fleche{position:relative}
.lien-fleche.mvt-ok:hover,.lien-fleche.mvt-ok:focus-visible{text-decoration:none}
.lien-fleche.mvt-ok:hover .mvt-trait path,.lien-fleche.mvt-ok:focus-visible .mvt-trait path,
.lien-fleche.mvt-ok.mvt-vu .mvt-trait path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
.lien-fleche.mvt-ok.mvt-vu:not(:hover) .mvt-trait path{animation-duration:calc(var(--vif) * 6);animation-timing-function:steps(6,end)}
.lien-fleche.mvt-ok::after{transition:none}
.lien-fleche.mvt-ok:hover::after{transform:none;animation:mvt-saut calc(var(--vif) * 3) steps(1,end) forwards}
@keyframes mvt-pose{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes mvt-saut{0%{transform:translateX(0)}34%{transform:translateX(2px)}67%{transform:translateX(4px)}100%{transform:translateX(3px)}}
/* le titre qui porte la décision de la page : un trait sous sa dernière ligne, une seule fois */
[data-mvt="trait"]{position:relative}
[data-mvt="trait"] > .mvt-trait path{stroke-width:3;stroke-dashoffset:0;opacity:1}
[data-mvt="trait"].mvt-joue > .mvt-trait path{stroke-dashoffset:1;opacity:1;animation:mvt-pose calc(var(--vif) * 8) steps(8,end) forwards}

/* ————————————————————————————————————————— P03 · le fil qui suit la lecture */
.js .frise li.mvt-passe::before{background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px),var(--fond)}
.js .frise li.mvt-actif::before{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent)}
.js .frise li.mvt-actif .quand{color:var(--accent)}

/* ————————————————————————————————————————— P04 · le mur de cases */
.mur{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:.55cqw;container-type:inline-size;width:100%;max-width:30rem;margin-top:1rem}
.mur b{aspect-ratio:1;min-width:0;border-radius:18%;border:max(1px,.55cqw) solid var(--texte-2);background:transparent}
.mur b.pl{background:var(--accent);border-color:var(--accent)}
.mur-note{margin-top:.5rem}

/* ————————————————————————————————————————— P05 · les vignettes de faute */
.vign{position:relative;display:grid;min-height:6.75rem;margin:.25rem 0 1.25rem;padding:.75rem .875rem;background:var(--eleve);border:1px solid var(--filet);border-radius:var(--rayon-champ);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.55;color:var(--texte);overflow:hidden}
.vign .etat-a,.vign .etat-b{grid-area:1/1;white-space:pre-wrap;overflow-wrap:anywhere}
.vign .etat-a{opacity:0}
.vign .ok{color:var(--accent);font-weight:600}
.vign .mal{color:var(--destructif);font-weight:600}
.vign.mvt-joue .etat-a{animation:mvt-a calc(var(--pas) * 18) steps(1,end) 3 forwards}
.vign.mvt-joue .etat-b{animation:mvt-b calc(var(--pas) * 18) steps(1,end) 3 forwards}
@keyframes mvt-a{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes mvt-b{0%{opacity:0}50%{opacity:1}100%{opacity:1}}

/* ————————————————————————————————————————— P06 · la sortie rejouée */
.sortie .ent .mvt-rejouer{margin-left:auto;min-width:11.5rem;text-align:right;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;min-height:24px}
.sortie .ent .mvt-rejouer:hover{text-decoration:underline}
@media (max-width:480px){.sortie .ent .mvt-rejouer{flex:0 0 100%;min-width:0;text-align:left;margin-left:0}}
.sortie .ent .mvt-rejouer:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sortie pre.mvt-rejoue span:not(.mvt-v){visibility:hidden}
.sortie pre.mvt-rejoue span[data-r]:not(.mvt-rep)::before{opacity:0}
.sortie pre span.mvt-rep{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:-1.125rem 0 0 color-mix(in srgb,var(--accent) 10%,transparent),1.125rem 0 0 color-mix(in srgb,var(--accent) 10%,transparent)}

/* ————————————————————————————————————————— P10 · la surface : le voile de la section « film » */
.js .film::before{transition:transform var(--voile) var(--courbe)}
.js .film .contenu{transition:opacity var(--entree) ease 260ms,transform var(--entree) ease 260ms}
.js .film.mvt-att::before{transform:translateY(58%)}
.js .film.mvt-att .contenu{opacity:0;transform:translateY(10px)}
.acc summary::after{transition-duration:var(--etat)}
.entete{transition-duration:var(--dur-trait)}

/* ————————————————————————————————————————— P07, P08 · le film */
.mvt-film{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--entree) ease;background:transparent}
.image .mvt-film{z-index:0}
.mvt-film.mvt-pret{opacity:1}
/* la carte d'une réalisation ne zoome plus : le clip se lit au survol (P07) */
.real:hover .image img{transform:none}
.real .image img{transition:none}
.mvt-arret{position:absolute;right:.875rem;bottom:.875rem;z-index:3;width:2.75rem;height:2.75rem;border:1px solid rgba(244,240,230,.6);border-radius:50%;
  background:rgba(14,18,32,.55);color:#F4F0E6;cursor:pointer;display:grid;place-items:center}
.mvt-arret:hover{background:rgba(14,18,32,.75)}
.mvt-arret:focus-visible{outline:2px solid #F4F0E6;outline-offset:3px}
.mvt-arret svg{width:1rem;height:1rem;fill:currentColor}

/* ————————————————————————————————————————— P13 · le globe-témoin */
.globe-t{position:relative;display:block;aspect-ratio:1;color:var(--accent)}
.courte > .globe-t{width:clamp(5.5rem,4.5rem + 4vw,8rem);margin:0 0 clamp(1.5rem,1.2rem + 1vw,2rem)}
.globe-t i{position:absolute;inset:0;background:currentColor;opacity:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  animation:mvt-g calc(var(--pas) * 3) steps(1,end) infinite}
.globe-t i:nth-child(1){--m:url("../../marque/sorties/Chargement/charge-v3-1-cobalt.svg");opacity:1}
.globe-t i:nth-child(2){--m:url("../../marque/sorties/Chargement/charge-v3-2-cobalt.svg");animation-delay:calc(var(--pas) * -2)}
.globe-t i:nth-child(3){--m:url("../../marque/sorties/Chargement/charge-v3-3-cobalt.svg");animation-delay:calc(var(--pas) * -1)}
.globe-t.fixe i{animation:none;opacity:0}
.globe-t.fixe i:nth-child(1){opacity:1}
@keyframes mvt-g{0%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
/* la 404 : le fuseau détaché bouge de deux images par seconde, trois positions */
.js .detache i{animation:mvt-detache calc(var(--pas-lent) * 3) steps(1,end) 3}
@keyframes mvt-detache{0%{transform:rotate(-10deg) translate(0,0)}33.333%{transform:rotate(-7deg) translate(-1px,-2px)}66.666%{transform:rotate(-13deg) translate(1px,2px)}100%{transform:rotate(-10deg) translate(0,0)}}

/* ————————————————————————————————————————— §13 · les petits gestes */
/* G1, G2 : le globe passe d'un dessin de l'emblème à l'autre, en coupe sèche (v1 à plat, v4 refermé) */
.lockup-entete .globe[data-i="1"],.pied .grand[data-i="1"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v1.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v1.svg")}
.lockup-entete .globe[data-i="2"],.pied .grand[data-i="2"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v2.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v2.svg")}
.lockup-entete .globe[data-i="3"],.pied .grand[data-i="3"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3.svg")}
/* G3 : le coup de pinceau sous l'entrée de navigation ; posé sous la page ouverte, il se dessine au survol */
.js .nav a.mvt-ok{position:relative}
.js .nav a.mvt-ok:hover{text-decoration:none}
.nav a[aria-current="page"] .mvt-trait path{stroke-dashoffset:0;opacity:1}
.nav a:not([aria-current]):hover .mvt-trait path,.nav a:not([aria-current]):focus-visible .mvt-trait path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
/* G4 : le disque du milieu, entre le soleil et la lune */
.theme-btn .demi{display:none}
.theme-btn[data-etape="2"] svg{display:none !important}
.theme-btn[data-etape="2"] .demi{display:block !important}
/* G5 : les barres se rapprochent avant de se croiser, ou de se séparer */
.menu-btn[data-etape="2"] .ico{height:7px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-btn[data-etape="2"] .ico::before,.menu-btn[data-etape="2"] .ico::after{content:none}
/* G6 : le trait marque le titre atteint par le sommaire */
.mvt-arrivee{position:relative}
.mvt-arrivee > .mvt-trait path{opacity:1;animation:mvt-pose calc(var(--vif) * 8) steps(8,start) forwards}
/* G7 : copier l'adresse */
.adresse-copie{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.copier{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;min-height:28px;border:1px solid var(--filet);border-radius:99px;background:transparent;color:var(--texte-2);font:500 .8125rem/1.4 var(--sans);cursor:pointer;vertical-align:middle;white-space:nowrap}
.copier:hover{color:var(--texte);border-color:var(--texte-2)}
.copier svg{width:14px;height:14px;display:none}
.copier path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.copier.fait{color:var(--accent);border-color:var(--accent)}
.copier.fait svg{display:block}
.copier.fait path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
/* G8 : d'une page à l'autre, l'en-tête reste, le reste sort en 160 ms et entre en 320 ms, 8 px plus bas */
@view-transition{navigation:auto}
.entete{view-transition-name:entete}
::view-transition-group(entete){animation:none}
::view-transition-old(entete),::view-transition-new(entete){animation:none}
::view-transition-old(root){animation:mvt-vt-sort var(--etat) var(--courbe) both}
::view-transition-new(root){animation:mvt-vt-entre var(--entree) var(--courbe) both}
@keyframes mvt-vt-sort{to{opacity:0}}
@keyframes mvt-vt-entre{from{opacity:0;transform:translateY(8px)}}

/* ————————————————————————————————————————— §13.1 · la deuxième série */
/* G10 : l'ovale du focus clavier, tracé à main levée ; il remplace le contour du navigateur
   partout sauf dans les champs de saisie */
.mvt-anneau{position:fixed;z-index:95;pointer-events:none;overflow:visible;display:none;color:var(--focus)}
.mvt-anneau.vu{display:block}
.mvt-anneau path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.mvt-anneau.mvt-joue path{animation:mvt-pose calc(var(--vif) * 4) steps(4,start) both}
.mvt-anneau-ok :focus-visible:not(input,textarea,select),.mvt-anneau-ok .b:focus-visible{outline:none}
.mvt-anneau-ok .real:has(.titre-4 a:focus-visible),.mvt-anneau-ok .suivante:has(.titre-3 a:focus-visible){outline:none}
/* G11 : le signe de l'accordéon, trois dessins au trait */
.acc summary.mvt-signe-ok::after{content:none}
.mvt-signe{flex:none;width:22px;height:22px;color:var(--accent)}
.mvt-signe svg{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mvt-signe[data-i="1"] svg:nth-child(1),.mvt-signe[data-i="2"] svg:nth-child(2),.mvt-signe[data-i="3"] svg:nth-child(3){display:block}
/* G13 : la flèche des liens sortants */
.mvt-sortie{display:inline-block;width:.7em;height:.7em;margin-left:.25em;vertical-align:.05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
a[data-i="2"] > .mvt-sortie{transform:translate(2px,-2px)}
a[data-i="3"] > .mvt-sortie{transform:translate(1px,-1px)}
/* G14 : les trois points sous le champ */
.mvt-points{display:flex;gap:6px;margin-top:.5rem}
.mvt-points i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent)}
.mvt-points i.plein{background:var(--accent)}
/* G15 : le trait sous l'entrée de la page ouverte, dans le menu */
.mvt-entree{position:relative}
.mvt-entree > .mvt-trait path{stroke-width:2.6}
.mvt-entree.mvt-joue > .mvt-trait path{animation:mvt-pose calc(var(--vif) * 6) steps(6,start) var(--entree) forwards}
/* G16 : le sommaire qui reste sous l'en-tête ; il glisse depuis l'en-tête, le trait saute */
.mvt-sommaire{position:fixed;left:0;right:0;top:var(--entete);z-index:45;background:var(--fond);border-bottom:1px solid var(--filet);transform:translateY(-100%);visibility:hidden;transition:transform var(--etat) var(--courbe),visibility 0s linear var(--etat)}
.mvt-sommaire.vu{transform:none;visibility:visible;transition:transform var(--entree) var(--courbe),visibility 0s}
.mvt-sommaire nav{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none;padding:.75rem 0;font-size:.9375rem;white-space:nowrap}
.mvt-sommaire a{position:relative;color:var(--texte-2);text-decoration:none}
.mvt-sommaire a.ici{color:var(--accent);font-weight:600}
.mvt-sommaire a.ici .mvt-trait path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
.menu-ouvert .mvt-sommaire{visibility:hidden}
.mvt-sommaire-ok main section[id]{scroll-margin-top:calc(var(--entete) + 3.5rem)}
/* G17 : le bouton « Lien » à côté d'un titre de section */
/* le bouton se pose au bout de la dernière ligne du titre, sans prendre de place ; sans survol
   (téléphone, tablette), il n'apparaît pas */
.mvt-titre-lien{position:relative}
.mvt-titre-lien .lien-section{position:absolute;opacity:0}
.mvt-titre-lien:hover .lien-section,.lien-section:focus-visible,.lien-section.fait{opacity:1}
@media (hover:none){.mvt-titre-lien .lien-section{display:none}}
/* G18 : le globe de l'en-tête bouillonne pendant l'attente de la page suivante */
.lockup-entete .globe[data-c="1"]{-webkit-mask-image:url("../../marque/sorties/Chargement/charge-v3-1-cobalt.svg");mask-image:url("../../marque/sorties/Chargement/charge-v3-1-cobalt.svg")}
.lockup-entete .globe[data-c="2"]{-webkit-mask-image:url("../../marque/sorties/Chargement/charge-v3-2-cobalt.svg");mask-image:url("../../marque/sorties/Chargement/charge-v3-2-cobalt.svg")}
.lockup-entete .globe[data-c="3"]{-webkit-mask-image:url("../../marque/sorties/Chargement/charge-v3-3-cobalt.svg");mask-image:url("../../marque/sorties/Chargement/charge-v3-3-cobalt.svg")}

/* ————————————————————————————————————————— §13.2 · la troisième série */
/* G19 : l'ovale autour du délai */
.mvt-entoure{position:relative;display:inline-block}
.mvt-cercle{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;color:var(--accent)}
.mvt-cercle path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.mvt-entoure.mvt-joue .mvt-cercle path{animation:mvt-pose calc(var(--vif) * 8) steps(8,start) forwards}
/* G20 : la coche au bout de chaque point */
.mvt-coches li{grid-template-columns:1.75rem minmax(0,1fr) 1.25rem}
.mvt-coche{width:1.25rem;height:1.25rem;align-self:start;margin-top:.15rem;color:var(--accent);overflow:visible}
.mvt-coche path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.mvt-coches.mvt-joue .mvt-coche path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) calc(var(--vif) * 3 * var(--k)) forwards}
/* G21 : la note atteinte, le trait d'arrivée, la flèche de retour */
.mvt-souligne{position:relative}
.mvt-souligne > .mvt-trait.arrivee path{opacity:1;animation:mvt-pose calc(var(--vif) * 8) steps(8,start) forwards}
.mvt-retour{margin-left:.5em;color:var(--accent);text-decoration:none;font-weight:600}
.mvt-retour:hover{text-decoration:underline}
/* G22 : le lien « Haut de page » */
.mvt-haut{display:inline-flex;align-items:center;gap:.375rem;color:var(--texte-2);text-decoration:none}
.mvt-haut:hover{color:var(--accent)}
.mvt-haut svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* G23 : le coup de pinceau sous le titre d'une carte survolée */
.mvt-carte:hover .titre-4 a{text-decoration:none}
.mvt-carte:hover > .mvt-carte-trait path,.mvt-carte:has(.titre-4 a:focus-visible) > .mvt-carte-trait path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
/* G24 : la coche du champ bien rempli */
.mvt-coche-champ{display:inline-block;width:1em;height:1em;margin-left:.375rem;vertical-align:-.1em;color:var(--accent);visibility:hidden}
.mvt-coche-champ path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.mvt-valide .mvt-coche-champ{visibility:visible}
.mvt-valide .mvt-coche-champ path{animation:mvt-pose calc(var(--vif) * 3) steps(3,start) forwards}
/* G26 : la page ouverte, soulignée dans le pied */
.mvt-ici{position:relative;color:var(--accent) !important}
.mvt-ici .mvt-trait path{opacity:1;stroke-dashoffset:0}

/* ————————————————————————————————————————— réduire les animations, imprimer */
@media (prefers-reduced-motion:reduce){
  .vign.mvt-joue .etat-a,.vign.mvt-joue .etat-b{animation:none}
  .vign .etat-a{opacity:0}.vign .etat-b{opacity:1}
  [data-mvt="trait"].mvt-joue > .mvt-trait path{animation:none;stroke-dashoffset:0}
  .lien-fleche.mvt-ok:hover .mvt-trait path,.lien-fleche.mvt-ok:hover::after{animation:none}
  .js .film::before,.js .film .contenu{transition:none}
  .js .detache i{animation:none}
  .nav a .mvt-trait path,.mvt-arrivee > .mvt-trait path,.copier.fait path{animation:none !important}
  .nav a:not([aria-current]):hover .mvt-trait path,.mvt-arrivee > .mvt-trait path,.copier.fait path{stroke-dashoffset:0;opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .mvt-anneau.mvt-joue path,.mvt-entree.mvt-joue > .mvt-trait path,.mvt-sommaire a.ici .mvt-trait path{animation:none;stroke-dashoffset:0;opacity:1}
  .mvt-sommaire,.mvt-sommaire.vu{transition:none}
  .mvt-entoure.mvt-joue .mvt-cercle path,.mvt-coches.mvt-joue .mvt-coche path,.mvt-souligne > .mvt-trait.arrivee path,.mvt-valide .mvt-coche-champ path{animation:none;opacity:1;stroke-dashoffset:0}
  .mvt-carte:hover > .mvt-carte-trait path{animation:none;opacity:1;stroke-dashoffset:0}
  .globe-t i{animation-duration:2400ms}
}
@media print{
  .mvt-film,.mvt-arret,.mvt-anneau,.mvt-sommaire,.copier,.mvt-points,.mvt-haut,.mvt-retour{display:none}
  .js .film.mvt-att::before{transform:none}
  .js .film.mvt-att .contenu{opacity:1;transform:none}
}
/* le statut lu par le lecteur d'écran, hors de la vue */
.visuellement-cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}