/* Landing page de cinelayers.com (22-23 oct. 2026), d'après les maquettes du canevas.
   Deux modes : SOMBRE par défaut (celui des maquettes), CLAIR au choix (palette claire de la vitrine, 18 oct.), mémorisé
   comme sur la page d'attente (localStorage « cl_theme », posé avant l'affichage par theme.js).
   Fichier source : memory/outils/landing/landing.css, copié tel quel par gen_landing.py. */
@font-face{font-family:'Jost'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/jost.woff2') format('woff2')}
/* la couleur du module ouvert glisse d'un module à l'autre (halo, icône) */
@property --c{syntax:'<color>'; inherits:true; initial-value:#2a97a8}

/* ---- les couleurs des deux modes ---- */
/* 24 oct. (sa demande) : en mode clair, le comparatif (dans la page et dans la fenêtre) et la fenêtre « Créez votre
   compte » gardent les couleurs et le fond du mode sombre : les couleurs sombres sont reposées sur eux ; le soir, avec le
   fond gris clair, le comparatif de la page est posé sur un panneau sombre (.cmp-boite), comme dans la fenêtre */
:root, html[data-theme="light"] .fen-offres, html[data-theme="light"] .cmp-boite{
  color-scheme:dark;
  --fond:#0b1013; --encre:#f4f3ef; --doux:#c9cfd2; --gris:#8e959a; --texte2:#b8c0c4; --discret:#a9aeb3; --puce:#d4d8db;
  --ligne:#283238; --ligne2:#3a464d; --carte:#141b1f; --survol-fond:rgba(255,255,255,.04);
  --sarcelle:#2a97a8; --sarcelle2:#4fbccb; --orange:#f6a243; --orange2:#f39331; --lien-survol:#7cc7d2;
  --papier:#f6f2eb; --papier2:#fbf9f5; --encre-papier:#121316;
  --vignette:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(0,0,0,0) 24%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.17) 51%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.53) 73%, rgba(0,0,0,.65) 84%, rgba(0,0,0,.7) 100%);
  --trait:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.17) 100%);
  /* le ticket d'entrée */
  /* le corps en sarcelle, texte blanc (maquette F2, 23 oct. au soir) ; dessous du corps de la même couleur : aucun liseré */
  --ticket:#21808f; --ticket-corps-bord:#21808f; --ticket-contour:#f6f2eb; --ticket-ep:0px; --ticket-encre:#ffffff; --ticket-pointilles:#b9c0c4;
  /* le talon en papier crème, imprimé d'une seule encre sarcelle (maquette L1, 24 oct.) : le même dans les deux modes */
  /* 24 oct. (sa demande : plus de teintes jaunes) : le talon passe du papier crème à un gris clair neutre */
  --ticket-talon-papier:#eaeced; --ticket-talon-encre:#1d6f7c;
  /* le comparatif */
  --cmp-lib-fond:#18232a; --cmp-lib-encre:#eceeec; --cmp-groupe:#b3bcc0; --cmp-lib-trait:rgba(255,255,255,.08);
  --cmp-ess:#eceef0; --cmp-ess-trait:#d9dde0;   /* l'Essentielle sur un papier gris clair (24 oct., crème avant) */
  --cmp-int:#21808f; --cmp-fen-fond:#11181c;
  /* les fenêtres */
  --voile:rgba(4,6,8,.74); --ombre-fen:0 50px 120px -40px rgba(0,0,0,.9);
  --offres-fond:linear-gradient(170deg, #141c20, #0e1417); --carte-ess-fond:linear-gradient(165deg, #f4f5f6, #e2e5e8); --ombre-carte:drop-shadow(0 18px 26px rgba(0,0,0,.5));
  --module-fond:linear-gradient(160deg, #131b1f 0%, #0f1518 55%, #0d1316 100%); --halo-opacite:.6;
  --ico-base:#11181c; --ico-trait:#ffffff;
  --offre-ess-bord:#3a9aab; --offre-ess-encre:#6fc3d6; --offre-int-bord:#e07944; --offre-int-encre:#f6a243;
  --plus-fond:rgba(246,162,67,.07); --plus-bord:rgba(246,162,67,.22); --plus-encre:#e6d2b6; --plus-titre:#f6a243;
  --cadre-fond:#0b1013; --ombre-image:0 30px 60px -30px rgba(0,0,0,.85); --attente1:#10171b; --attente2:#121a1e; --vignette-fond:#0b1013;
  --loupe-fond:rgba(3,5,7,.95); --barre-fond:rgba(16,23,27,.88); --barre-encre:#c9cfd2; --ombre-loupe:0 40px 100px -30px rgba(0,0,0,.9);
  --sortie:cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"]{
  color-scheme:light;
  /* 24 oct. au soir (sa demande : « je veux pas que le fond soit jaunâtre. Plus dans le gris clair ») : fond, vignettage,
     traits, fenêtres, voile et ombres passent du beige au gris neutre (ils tiraient sur le brun) */
  --fond:#eef0f2; --encre:#121316; --doux:#3d4045; --gris:#6b6f75; --texte2:#45484d; --discret:#55585d; --puce:#2c2e33;
  --ligne:#dcdfe2; --ligne2:#c6cbcf; --carte:#ffffff; --survol-fond:rgba(18,19,22,.04);
  --sarcelle:#1d7c8c; --sarcelle2:#1d7c8c; --orange:#e08f2e; --orange2:#d97c34; --lien-survol:#1d7c8c;
  --vignette:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(20,26,30,0) 24%, rgba(20,26,30,.012) 40%, rgba(20,26,30,.035) 51%, rgba(20,26,30,.065) 62%, rgba(20,26,30,.09) 73%, rgba(20,26,30,.11) 84%, rgba(20,26,30,.12) 100%);
  --trait:linear-gradient(90deg, rgba(18,19,22,0) 0%, rgba(18,19,22,.03) 35%, rgba(18,19,22,.14) 100%);
  --ticket:#21808f; --ticket-corps-bord:#121316; --ticket-contour:#121316; --ticket-ep:1.5px; --ticket-encre:#ffffff; --ticket-pointilles:rgba(18,19,22,.45);
  --voile:rgba(236,238,240,.66); --ombre-fen:0 40px 100px -40px rgba(16,22,26,.32);
  --module-fond:linear-gradient(160deg, #ffffff 0%, #f9fafb 55%, #f3f5f6 100%); --halo-opacite:.5;
  --ico-base:#ffffff; --ico-trait:#000000;
  --offre-ess-bord:#1d7c8c; --offre-ess-encre:#1d7c8c; --offre-int-bord:#c96a1e; --offre-int-encre:#b45f17;
  --plus-fond:#fdf4e7; --plus-bord:#f0d3aa; --plus-encre:#5a4630; --plus-titre:#b45f17;
  --cadre-fond:#e6e9eb; --ombre-image:0 26px 50px -30px rgba(16,22,26,.36); --attente1:#f0f2f3; --attente2:#eaedef; --vignette-fond:#e6e9eb;
  --loupe-fond:rgba(236,238,240,.97); --barre-fond:rgba(255,255,255,.92); --barre-encre:#3d4045; --ombre-loupe:0 30px 80px -30px rgba(16,22,26,.42);
}

*{box-sizing:border-box}
.fen-offres,.cmp-boite{color:var(--encre)}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html,body{margin:0; padding:0}
body{background:var(--fond); color:var(--encre); font:400 16px/1.5 'Avenir Next',Avenir,'Century Gothic',Jost,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .35s ease, color .35s ease}
a{color:var(--encre)} a:hover{color:var(--lien-survol)}
button{font-family:inherit}

/* ---- le vignettage : les bords s'assombrissent doucement (brun très léger en clair) ---- */
body::before{content:""; position:fixed; z-index:0; inset:0; pointer-events:none; background:var(--vignette)}
/* la page entière recule légèrement quand une fenêtre s'ouvre devant elle */
.page{position:relative; z-index:1; transition:transform .7s var(--sortie)}
body.recul .page{transform:scale(.97)}
body.recul .mods li, body.recul .mods li::before, body.recul .sym *, body.recul .nom *{animation-play-state:paused}

/* ---- en-tête : le logo (oiseau animé + nom) à gauche, les liens et le mode à droite, un trait qui s'efface vers la gauche ----
   25 oct. 2026 au soir, sa demande : UNE SEULE BARRE, collée en haut de l'écran et de la MÊME TAILLE partout (la barre
   fixe plus petite qui la remplaçait au défilement faisait sauter le menu au clic sur Tutoriels, Contact ou le logo) ;
   transparente tout en haut, le fond de la page dès qu'on défile (.colle, landing.js : la couleur seule change) ; logo
   un peu plus gros ; « S'inscrire » à côté de « Se connecter » ; liens jamais sur deux lignes (white-space, largeurs
   mesurées ci-dessous, et .serre de landing.js si une police plus large les fait quand même déborder).
   --barre-h : sa hauteur, sous laquelle arrivent les parties (scroll-margin-top). */
:root{--barre-h:94px}   /* (25 oct., nuit : 104 → 94 px, le logo un peu réduit, sa demande) */
/* la place de la barre de défilement réservée sur toutes les pages (sa remarque : la barre se décalait sur Tutoriels et
   Contact, trop courtes pour avoir une barre de défilement, donc un peu plus larges) */
html{scrollbar-gutter:stable}
.haut{position:sticky; top:0; z-index:40; transition:background-color .25s ease}
.haut.colle{background:var(--fond)}   /* fond plein : en clair, la moindre transparence laissait deviner le texte dessous */
/* MAQUETTE B (son choix) : le logo, les liens et les comptes en un groupe centré, juste un peu écartés (--ecart : 48 px
   vers 1400 px de large, 110 px sur un grand écran) ; FR / EN et le thème au bord droit, dans la 3e colonne (1fr | groupe |
   1fr) : quand la place manque, le groupe glisse à gauche au lieu de les recouvrir */
.haut-in{padding:0 28px; height:var(--barre-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px; font-size:15px;
  --ecart:clamp(48px, 10.33vw - 96.7px, 110px)}
.haut-groupe{grid-column:2; display:flex; align-items:center; gap:var(--ecart)}
.haut-comptes{display:flex; flex:none; align-items:center; gap:24px}
.haut-trait{height:1px; background:var(--trait)}
.logo{display:flex; flex:none; align-items:center; gap:16px; text-decoration:none; color:var(--encre); line-height:0}
.logo .sym{height:74px; width:auto; overflow:visible}
.logo .nom{height:27px; width:auto; overflow:visible; animation:unclip 2.1s step-end both}
.haut-droite{grid-column:3; justify-self:end; display:flex; flex:none; align-items:center; gap:24px}
.liens{display:flex; flex:none; gap:28px}
.liens a,.connexion,.inscription{text-decoration:none; white-space:nowrap}
.connexion{font-weight:600; color:var(--sarcelle2)}
/* « S'inscrire » : un peu mis en valeur, une pastille sarcelle ; il ouvre la fenêtre de l'inscription */
.inscription{display:inline-flex; align-items:center; height:36px; margin-left:-10px; padding:0 16px; border:1px solid var(--sarcelle); border-radius:999px;
  background:color-mix(in srgb, var(--sarcelle) 14%, transparent); color:var(--encre); font-weight:600; transition:background-color .2s, border-color .2s}
.inscription:hover{background:color-mix(in srgb, var(--sarcelle) 28%, transparent); color:var(--encre)}
.inscription:focus-visible{outline:2px solid var(--sarcelle); outline-offset:2px}
/* le bouton FR / EN et le bouton du mode, côte à côte (sa demande), au bout de la barre, au téléphone aussi */
.haut-outils{display:flex; flex:none; align-items:center; gap:8px}
/* le bouton du mode : l'icône seule, la même que dans l'application (soleil en sombre, lune en clair), infobulle
   « Thème clair / sombre » au survol, comme .ph-ic de la page des projets (sa demande du 23 oct.). Le soir : « trop gros,
   le rendre plus petit et tout à droite de la barre » : rond de 34 px ; sur un écran large, il quitte la colonne du
   contenu pour le bord droit de la barre (sous 1420 px, la colonne touche presque le bord : il suit « Se connecter »). */
.theme{position:relative; display:grid; place-items:center; flex:none; width:34px; height:34px; padding:0; border:1px solid var(--ligne); border-radius:999px; background:var(--carte); color:var(--discret); cursor:pointer; transition:color .2s, border-color .2s}
.theme:hover{color:var(--encre); border-color:var(--sarcelle)}
.theme svg{width:16px; height:16px}
.theme .i-lune, html[data-theme="light"] .theme .i-soleil{display:none}
html[data-theme="light"] .theme .i-lune{display:block}
.theme::after,.langue::after,.fermer::after,.bascule button::after{content:attr(data-tip); position:absolute; z-index:20; top:calc(100% + 8px); right:0; padding:6px 10px; border-radius:8px; background:var(--encre); color:var(--fond); font-size:12px; font-weight:600; line-height:1.2; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .12s ease, transform .12s ease, visibility 0s .12s}
.theme:hover::after,.theme:focus-visible::after,.langue:hover::after,.langue:focus-visible::after,.fermer:hover::after,.fermer:focus-visible::after,.bascule button:hover::after,.bascule button:focus-visible::after{opacity:1; visibility:visible; transform:none; transition-delay:.05s, .05s, 0s}

/* l'oiseau se déplie puis bat doucement des ailes (repris de la page d'attente) */
.sym .hover{transform-origin:302.09px 125px; animation:hover 1.7s cubic-bezier(.37,0,.63,1) infinite alternate 2s}
.sym .pc{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both; animation-delay:var(--t)}
.sym .pc.wing{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, wingbeat 1.7s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2s}
.sym .pc.tail{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, tailsway 2.3s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2.2s}
.sym .pc.belly{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, bellysway 2.9s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2.5s}
.sym .pc.neck{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, nodn 3.4s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2.3s}
.sym .pc.head{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, nodh 3.4s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2.3s}
.sym .pc.beak{animation:fold var(--d) cubic-bezier(.22,.7,.25,1) both, nodb 3.4s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:var(--t), 2.3s}
.sym .sh{animation:shade .5s ease-out both; animation-delay:var(--t)}
@keyframes fold{from{transform:rotate(var(--a)) scaleY(0) rotate(calc(-1 * var(--a)))} to{transform:rotate(var(--a)) scaleY(1) rotate(calc(-1 * var(--a)))}}
@keyframes wingbeat{from{transform:translate(65.74px,-43.01px) rotate(0deg) translate(-65.74px,43.01px)} to{transform:translate(65.74px,-43.01px) rotate(-5deg) translate(-65.74px,43.01px)}}
@keyframes tailsway{from{transform:rotate(0deg)} to{transform:rotate(-4.5deg)}}
@keyframes bellysway{from{transform:rotate(0deg)} to{transform:rotate(2.4deg)}}
@keyframes nodn{from{transform:rotate(0deg)} to{transform:rotate(-2deg)}}
@keyframes nodh{from{transform:translate(15.23px,47.48px) rotate(0deg) translate(-15.23px,-47.48px) translate(31.38px,5.66px) rotate(0deg) translate(-31.38px,-5.66px)} to{transform:translate(15.23px,47.48px) rotate(-2deg) translate(-15.23px,-47.48px) translate(31.38px,5.66px) rotate(-2.6deg) translate(-31.38px,-5.66px)}}
@keyframes nodb{from{transform:translate(-23.76px,68.43px) rotate(0deg) translate(23.76px,-68.43px) translate(-7.61px,26.61px) rotate(0deg) translate(7.61px,-26.61px)} to{transform:translate(-23.76px,68.43px) rotate(-2deg) translate(23.76px,-68.43px) translate(-7.61px,26.61px) rotate(-2.6deg) translate(7.61px,-26.61px)}}
@keyframes shade{from{opacity:0}}
@keyframes hover{to{translate:0 -3px; rotate:-.5deg}}
@keyframes unclip{from{overflow:hidden} to{overflow:visible}}
.nom .word > *{transform-box:fill-box; animation:lift .7s cubic-bezier(.16,.8,.2,1) both; animation-delay:calc(.75s + var(--i) * .04s)}
@keyframes lift{from{translate:0 108%; opacity:0}}
/* le nom posé dans son état final après son animation (landing.js, .nom-pose : Safari pouvait le laisser invisible) */
html.nom-pose .nom, html.nom-pose .nom .word > *{animation:none}

/* ---- l'accueil : l'accroche au centre, les quinze modules, le ticket d'entrée ---- */
.accueil{display:flex; flex-direction:column; align-items:center; text-align:center; padding:96px 24px 120px; min-height:calc(100vh - var(--barre-h) - 1px)}
.titre{margin:0; font-size:68px; line-height:1.17; letter-spacing:-.015em; text-wrap:balance; font-weight:300}
.titre strong{font-weight:650; color:var(--ticket)}   /* « au même endroit. » dans le bleu du ticket (24 oct.) ; le trait
   manuscrit qui le soulignait a été retiré le même jour (sa demande) */
/* 24 oct. (sa demande) : un peu plus d'espace entre l'accroche, les modules et le ticket (52 → 76 px, 64 → 88 px ; le
   haut de page remonte de 40 px, 136 → 96, pour que les deux lignes sous le ticket restent dans le premier écran d'un
   portable de 1440 × 789 ; puis, à sa demande, 100 et 112 px) ; les modules sont dans .mods-zone */
.mods-zone{position:relative; margin-top:100px}
.mods{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 12px; max-width:1300px}   /* 1300 : la 1re rangée agrandie fait 1260 px */
/* 24 oct. (sa demande, la synchronisation Y4 retirée) : « une petite vague qui parcourt les modules, du premier au dernier,
   dans une boucle. Lente. » Chaque module se soulève de 4 px et son contour prend sa couleur, l'un après l'autre (0,26 s
   d'écart, dans l'ordre des boutons : la 1re rangée puis la 2e), puis tout se repose ; la vague repart toutes les 8 s.
   Sans opacité ni transform (dans Safari, chaque élément animé ainsi devient un calque : c'est ce qui ralentissait
   l'ouverture des fenêtres avec la 1re version de Y4) : « top » pour le mouvement ; la couleur sur un calque ::before,
   sous le texte (isolation), pour laisser au survol ses propres couleurs. Arrêtée pendant qu'une fenêtre est ouverte. */
.mods li{position:relative; isolation:isolate; animation:vague 8s ease-in-out calc(1.6s + var(--i) * .26s) infinite}
/* le dessin d'une puce de module : celles de l'accueil et, depuis le 24 oct. au soir, celles des pages Concept et Aide à
   l'écriture (.puce), qui ouvrent la même fenêtre */
.mods li,.puce{--c:var(--sarcelle); border:1px solid var(--ligne2); border-radius:8px; background:var(--carte); color:var(--puce); transition:color .2s, border-color .2s, background-color .2s, transform .2s}
html[data-theme="light"] .mods li,html[data-theme="light"] .puce{--c:var(--cc) !important}   /* la couleur claire de chaque module (style en ligne --cc) */
.mods li.saut{flex-basis:100%; height:0; padding:0; border:0; margin:0; animation:none}
.mods li:not(.saut)::before{content:""; position:absolute; z-index:-1; inset:-1px; border:1px solid transparent; border-radius:8px; pointer-events:none;
  animation:vague-lueur 8s ease-in-out calc(1.6s + var(--i) * .26s) infinite}
@keyframes vague{0%,20%,100%{top:0} 10%{top:-4px}}
@keyframes vague-lueur{0%,20%,100%{border-color:transparent; background-color:transparent} 10%{border-color:var(--c); background-color:color-mix(in srgb, var(--c) 12%, transparent)}}
.mods li button,.puce button{display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 10px; border:0; background:none; color:inherit; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; cursor:pointer; min-height:34px}
.mods li button svg,.puce button svg{width:13px; height:13px; flex:none; stroke:var(--c)}
.mods li:hover,.puce:hover{color:var(--encre); border-color:var(--c); background:color-mix(in srgb,var(--c) 16%,var(--carte)); transform:translateY(-1px)}
.mods li:active,.puce:active{transform:scale(.97)}
/* 24 oct. au soir (sa demande : « Grossis un peu la taille des modules ») : ceux de l'accueil passent de 10,5 à 11,5 px,
   icône de 15 px, 40 px de haut (les puces des pages Concept et Aide gardent leur taille) */
.mods li button{gap:8px; padding:9px 14px 9px 12px; font-size:11.5px; min-height:40px}
.mods li button svg{width:15px; height:15px}
/* entre 1001 et 1310 px de large (portables de 1280 px) : un cran plus petit, pour garder les deux rangées (8 + 7) */
@media (min-width:1001px) and (max-width:1310px){
  .mods{gap:14px 10px}
  .mods li button{gap:7px; padding:9px 13px 9px 11px; font-size:11px}
  .mods li button svg{width:14px; height:14px}
}
.mods li button:focus-visible,.puce button:focus-visible{outline:2px solid var(--c); outline-offset:2px; border-radius:8px}

/* le ticket d'entrée (maquette E4, 23 oct. ; le soir, corps de la maquette F2, puis bords festonnés, cadre, grain et
   « Cine Layers » vertical de la maquette H2) : corps SARCELLE, texte blanc, dans les
   deux modes, pour que « Je fais mon film » ressorte ; en clair, contour noir ; encoches sur les côtés ;
   le talon, en papier crème imprimé « Entrée gratuite » (maquette L1, 24 oct. : les rayures aux quatre couleurs faisaient
   « bonbon »), se détache vers la droite au clic, avant l'ouverture des offres (landing.js). Pas d'ombre (sa demande : dans Safari, le calque de l'ombre faisait
   un rectangle plus clair autour du ticket au survol).
   Le contour suit les encoches : chaque pièce est peinte deux fois, la couleur du contour dessous et le papier dessus,
   rentré de l'épaisseur du trait (--ticket-ep, nulle en sombre), avec une encoche plus large d'autant. */
.cta{position:relative; margin-top:112px; display:flex; justify-content:center}
.ticket{position:relative; display:inline-flex; align-items:stretch; padding:0; border:0; background:none; cursor:pointer; transition:transform .35s cubic-bezier(.2,.9,.3,1.3); -webkit-tap-highlight-color:transparent}
.ticket:hover,.ticket.tenu{transform:translateY(-3px) rotate(-1.5deg)}   /* tenu : la pose gardée pendant la déchirure (landing.js) */
.ticket:focus-visible{outline:2px solid var(--orange); outline-offset:6px; border-radius:12px}
.ticket-corps,.ticket-talon{position:relative; display:flex; background:var(--ticket-contour)}
/* MAQUETTE H2 (23 oct. au soir : G4 fusionné avec la DA) : bords FESTONNÉS, un feston de 5 px tous les 12 px, ticket de
   84 px de haut = 7 festons (24 oct. : « grossis un peu le ticket » : 96 px = 8 festons, sur ordinateur) ; le papier, rentré de l'épaisseur du trait, a des festons plus grands d'autant aux mêmes
   centres (motif décalé de −ep) : le contour noir du mode clair suit les festons */
.ticket-corps{background:var(--ticket-corps-bord);
  -webkit-mask:radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0 / 100% 12px repeat-y; mask:radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0 / 100% 12px repeat-y}
.ticket-corps::before{content:""; position:absolute; inset:var(--ticket-ep) 0 var(--ticket-ep) var(--ticket-ep); background:var(--ticket);
  -webkit-mask:radial-gradient(circle calc(5px + var(--ticket-ep)) at calc(-1 * var(--ticket-ep)) 50%, #0000 96%, #000) 0 calc(-1 * var(--ticket-ep)) / 100% 12px repeat-y;
  mask:radial-gradient(circle calc(5px + var(--ticket-ep)) at calc(-1 * var(--ticket-ep)) 50%, #0000 96%, #000) 0 calc(-1 * var(--ticket-ep)) / 100% 12px repeat-y}
.ticket-talon{margin-left:-1px; transform-origin:0 100%;   /* chevauche le corps d'un pixel : plus de filet clair à la couture (largeurs fractionnaires) */
 
  -webkit-mask:radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 0 0 / 100% 12px repeat-y; mask:radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 0 0 / 100% 12px repeat-y}
.ticket-talon::before{content:""; position:absolute; inset:var(--ticket-ep) var(--ticket-ep) var(--ticket-ep) 0; background:var(--ticket-talon-papier);
  -webkit-mask:radial-gradient(circle calc(5px + var(--ticket-ep)) at calc(100% + var(--ticket-ep)) 50%, #0000 96%, #000) 0 calc(-1 * var(--ticket-ep)) / 100% 12px repeat-y;
  mask:radial-gradient(circle calc(5px + var(--ticket-ep)) at calc(100% + var(--ticket-ep)) 50%, #0000 96%, #000) 0 calc(-1 * var(--ticket-ep)) / 100% 12px repeat-y}
/* la découpe : une rangée de petits trous ronds (couleur du fond de la page) CENTRÉE SUR LA JONCTION, une moitié de chaque
   trou peinte par le corps, l'autre par le talon (chaque pièce rogne la moitié qui dépasse) : le talon se détache AU
   NIVEAU DES PERFORATIONS et chaque morceau garde ses demi-trous (sa demande du 23 oct. au soir ; ils étaient tous dans le
   talon). Centre commun au milieu du pixel de chevauchement : 2 px hors du corps, 2 px avant le talon */
.ticket-corps::after,.ticket-talon::after{content:""; position:absolute; z-index:3; top:5px; bottom:5px; width:5px; background:radial-gradient(circle 2px, var(--fond) 92%, transparent 100%) 0 0 / 5px 8px repeat-y}
.ticket-corps::after{right:-2px}
.ticket-talon::after{left:-2px}
/* le grain du papier (filtre #grain de la page) ; le cadre intérieur crème, d'un seul tenant d'une pièce à l'autre, qui se
   coupe avec la déchirure ; « Cine Layers » à la verticale */
.defs{position:absolute; width:0; height:0; overflow:hidden}
.ticket-grain{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:multiply; opacity:.5}
.ticket-talon .ticket-grain{opacity:.3}   /* sur le papier clair du talon, le grain marquait trop (sa demande du 24 oct.) */
.ticket-cadre{position:absolute; z-index:1; pointer-events:none; border:1.5px solid rgba(246,242,235,.7)}
.ticket-corps .ticket-cadre{inset:10px 0 10px 13px; border-right:0; border-radius:4px 0 0 4px}
.ticket-talon .ticket-cadre{inset:10px 13px 10px 0; border-left:0; border-radius:0 4px 4px 0; border-color:rgba(33,128,143,.6)}   /* imprimé en sarcelle sur le papier */
.ticket-vert{position:absolute; z-index:2; left:22px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-size:8px; font-weight:600; line-height:1; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:rgba(246,242,235,.85)}
.ticket-dedans{position:relative; z-index:2; display:flex; align-items:center; color:var(--ticket-encre)}
.ticket-corps .ticket-dedans{gap:13px; min-height:96px; padding:0 38px 0 52px; font-size:22px; font-weight:650; white-space:nowrap}
.ticket-corps .ticket-dedans svg{width:22px; height:22px; flex:none}
.ticket-talon .ticket-dedans{justify-content:center; width:146px}
/* le talon imprimé (maquette L1, 24 oct.) : « Entrée » petit et espacé, « Gratuite » en gras, d'une seule encre sarcelle,
   et les quatre couleurs du logo en un court trait dessous (elles faisaient des rayures sur tout le talon) */
.ticket-imprime{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ticket-talon-encre); line-height:1}
.ticket-imprime small{font-size:10.5px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; padding-left:.32em}
.ticket-imprime b{font-size:17.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.ticket-imprime i{display:block; width:52px; height:3px; margin-top:7px; border-radius:2px;
  background:linear-gradient(90deg, #2a97a8 0 25%, #9b5488 25% 50%, #c44745 50% 75%, #f6a243 75% 100%)}
.sous1{margin:22px 0 0; font-size:15px; color:var(--doux)} .sous1 strong{font-weight:650; color:var(--encre)}
.sous2{margin:4px 0 0; font-size:14.5px; color:var(--gris)}

/* ---- le comparatif (maquette 6) ---- */
.comparatif{padding:80px 16px 80px}
.cmp-titre{margin:0 auto; max-width:1060px; text-align:center; font-size:44px; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; font-weight:300}
.cmp-titre strong{font-weight:650}
.cmp-cadre{max-width:1120px; margin:48px auto 0; overflow-x:auto}
html[data-theme="light"] .cmp-boite{max-width:1200px; margin:0 auto; padding:60px 40px 44px; border-radius:26px; border:1px solid var(--ligne);
  background:var(--cmp-fen-fond); box-shadow:0 50px 110px -50px rgba(16,22,26,.6)}
.cmp{width:100%; border-collapse:separate; border-spacing:12px 0; font-size:15px; line-height:1.4}
.cmp .col-offre{width:270px}
.cmp th,.cmp td{padding:12px 20px; text-align:left; vertical-align:middle; text-wrap:pretty}
.cmp th[scope=row]{font-weight:400; color:var(--cmp-lib-encre); background:var(--cmp-lib-fond); border-bottom:1px solid var(--cmp-lib-trait)}
.cmp td{text-align:center; background:var(--cmp-ess); color:var(--encre-papier); border-bottom:1px solid var(--cmp-ess-trait)}
.cmp td.i{background:var(--cmp-int); color:#fff; border-bottom-color:rgba(255,255,255,.15)}
.cmp tr.g th{padding:26px 20px 10px; font-size:11.5px; font-weight:650; letter-spacing:.15em; text-transform:uppercase; color:var(--cmp-groupe); background:var(--cmp-lib-fond); border-bottom:1px solid var(--cmp-lib-trait)}
.cmp tr.g td{padding:26px 20px 10px}
.cmp .ok,.cmp .non{width:18px; height:18px; vertical-align:middle}
.cmp td .ok{color:#1d7c8c} .cmp td.i .ok{color:#fff} .cmp .non{color:#d23f3b}
.cmp .petit{font-size:13.5px; color:#43484d} .cmp .nb{white-space:nowrap}
.cmp td.cmp-coin{background:var(--cmp-lib-fond); border-radius:16px 16px 0 0; border-bottom:1px solid var(--cmp-lib-trait); padding:0 20px 18px; text-align:left; vertical-align:bottom; color:var(--cmp-groupe); font-size:14px}
.cmp thead th{position:relative; padding:28px 20px 22px; text-align:center; vertical-align:top; border-radius:16px 0 0 0}
.cmp-ess{background:var(--cmp-ess); color:var(--encre-papier); border-bottom:1px solid var(--cmp-ess-trait)}
.cmp-int{background:var(--cmp-int); color:#fff; border-bottom:1px solid rgba(255,255,255,.15)}
.cmp-nom{display:block; font-size:21px; font-weight:650}
.cmp-prix{display:block; margin-top:10px; font-size:34px; font-weight:300; line-height:1}
.cmp-note{display:block; margin-top:6px; font-size:13px; font-weight:400; color:#55585d} .cmp-int .cmp-note{color:#dff0f2}
.cmp-note2{display:block; margin-top:4px; font-size:12px; font-weight:400; color:#c8e6ea}
.cmp-cadeau{display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:5px 10px; border-radius:999px; background:var(--orange); color:#2b1d08; font-size:12px; font-weight:600}
.cmp-cadeau svg{width:14px; height:14px; flex:none}
/* une seule action en pied de tableau (23 oct. au soir) : le bouton sous l'Essentielle, le cadeau sous l'Intégrale */
.cmp-offert{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.35; font-weight:600; color:#fff; text-align:left}
.cmp-offert svg{width:17px; height:17px; flex:none; color:var(--orange)}
.cmp tfoot th,.cmp tfoot td{padding:22px 20px 24px; border-bottom:0; border-radius:0 0 16px 16px}
.cmp tfoot th{background:var(--cmp-lib-fond); color:var(--cmp-groupe); font-size:14px}
.pli-ess,.pli-int{position:absolute; top:0; right:0; width:30px; height:30px; filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.3)); pointer-events:none}
.pli-ess{background:linear-gradient(225deg, transparent 0 50%, #e6e9eb 50%, #b3babf 100%)}
.pli-int{background:linear-gradient(225deg, transparent 0 50%, #6fcad6 50%, #7c4f86 100%)}
/* le coin replié des deux offres : la case est réellement coupée en biais (fond transparent dans l'angle, 30 px de côté),
   le fond de la page passe dessous ; il était peint couleur papier et faisait un carré clair sur le vignettage (23 oct.).
   Dégradé posé sur toute la case, bordure comprise, sans répétition : répété, il recopiait l'angle coupé dans la bordure
   du bas (trait clair sous l'Intégrale, dont la bordure est translucide). */
.cmp thead th.cmp-ess{background:linear-gradient(225deg, transparent 0 21.21px, var(--cmp-ess) 21.21px) no-repeat border-box}
.cmp thead th.cmp-int{background:linear-gradient(225deg, transparent 0 21.21px, var(--cmp-int) 21.21px) no-repeat border-box}
.cmp-pied{max-width:1120px; margin:26px auto 0; text-align:center; font-size:14.5px; color:var(--gris)}
.btn-sombre{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 12px; border-radius:11px; font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap; transition:filter .2s}
.btn-sombre{background:var(--encre-papier); color:#fff} .btn-sombre:hover{color:#fff; filter:brightness(1.3)}

/* ---- pied de page ---- */
.pied{padding:28px 28px 32px; text-align:center; font-size:12.5px; letter-spacing:.02em; color:var(--gris)}
.pied a{color:var(--gris); text-decoration:none; border-bottom:1px solid var(--ligne)} .pied a:hover{color:var(--encre)}
.pied .sep{margin:0 10px; opacity:.5}

/* ---- les fenêtres : un voile flou, la carte CENTRÉE (grille + marge auto : centrée, et défilable si elle dépasse) ---- */
/* le flou et la teinte derrière les fenêtres sont un calque À PART, fixe, qui ne défile jamais (23 oct. au soir) : portés
   par le voile, qui défile, ils « sautaient » dans Safari quand le comparatif rendait le voile défilant et le faisait
   défiler de 750 px d'un coup (le site semblait se recharger derrière) */
.voile-fond{position:fixed; inset:0; z-index:49; pointer-events:none; background:var(--voile); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.voile{--voile-pad:24px; position:fixed; inset:0; z-index:50; display:grid; grid-template-columns:minmax(0,1fr); overflow:auto; overscroll-behavior:contain; padding:var(--voile-pad)}
/* pas de barre de défilement propre au voile (23 oct. au soir) : avec des barres toujours affichées (son Mac), elle
   paraissait avec le comparatif, à côté de celle de la page, et ses 17 px recentraient la fenêtre d'un coup (saut de
   8,5 px à l'aller et au retour, mesuré dans son Safari) ; le voile défile au pavé, à la molette, au doigt, au clavier */
.voile{scrollbar-width:none} .voile::-webkit-scrollbar{display:none; width:0; height:0}
.fen{position:relative; margin:auto; width:100%; border-radius:22px; border:1px solid var(--ligne); box-shadow:var(--ombre-fen); outline:none}
.fen-haut{display:flex; align-items:flex-start; justify-content:space-between; gap:20px}
/* fermer : la croix seule dans un rond (sa demande du 23 oct. au soir), intitulé gardé pour les lecteurs d'écran et en
   bulle au survol */
.fermer{position:relative; flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--ligne2); border-radius:999px; background:transparent; color:var(--puce); cursor:pointer; transition:color .2s, border-color .2s, background-color .2s}
.fermer:hover{color:var(--encre); border-color:var(--gris); background:var(--survol-fond)}
.fermer svg{width:18px; height:18px}
.fen-pied{display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; font-size:15px}
.fen-pied .sep{width:1px; height:18px; background:var(--ligne)}

/* le liseré lumineux, à la couleur du module (orangé pour les offres) : il dessine la carte pendant son trajet depuis le
   bouton cliqué, puis s'efface quand le contenu arrive ; à la fermeture, il la ramène au bouton */
.fen-anneau{position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; opacity:0;
  border:1.5px solid color-mix(in srgb, var(--c, #f6a243) 85%, #ffffff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, #f6a243) 30%, transparent), inset 0 0 42px -8px color-mix(in srgb, var(--c, #f6a243) 70%, transparent)}

/* la fenêtre « Créez votre compte » (maquette J1, 23 oct. au soir) : une PILE de deux panneaux ; le premier porte
   l'inscription (le formulaire sur le papier de l'Essentielle, les deux offres en cartes compactes à côté), le second le
   comparatif, montré par « Comparer les deux offres » (landing.js : la pile glisse vers le haut jusqu'à son titre) */
/* écart entre les panneaux = marge du voile : arrivé en haut (à la marge), le comparatif a poussé l'inscription juste
   hors de l'écran ; elle est alors retirée de la fenêtre sans que rien ne bouge (on ne remonte plus jusqu'à elle) */
.fen-offres{--c:#f6a243; max-width:960px; display:flex; flex-direction:column; gap:24px; border:0; border-radius:0; box-shadow:none; background:none}
.panneau{position:relative; padding:30px 36px 24px; border-radius:22px; border:1px solid var(--ligne); box-shadow:var(--ombre-fen); background:var(--offres-fond)}
.fen-titre{margin:0; font-size:32px; line-height:1.15; letter-spacing:-.015em; font-weight:300} .fen-titre strong{font-weight:650}
.fen-sous{margin:8px 0 0; font-size:15px; color:var(--discret)} .fen-sous strong{font-weight:600; color:var(--doux)}
.compte{margin-top:24px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:24px; align-items:stretch}
.carte-cadre{position:relative; display:flex; filter:var(--ombre-carte)}
.carte{flex:1; min-width:0; display:flex; flex-direction:column; padding:24px 24px 22px; border-radius:18px; clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%)}
.carte-ess{background:var(--carte-ess-fond); color:var(--encre-papier)}
.carte-cadre .pli-ess{width:34px; height:34px; filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.35))}

/* le formulaire, sur le papier crème (le même dans les deux modes) ; mêmes champs et mêmes textes que l'inscription de
   l'app, un seul mot de passe avec un œil pour l'afficher ; 16 px dans les champs : l'iPhone ne zoome pas en y entrant */
.inscr{display:flex; flex-direction:column; gap:12px}
/* la carte prend la hauteur de la colonne des offres : s'il reste de la place (erreurs repliées, autre police), elle va
   entre l'accord et le bouton, le groupe des boutons reste calé en bas (Google sur la ligne de « Comparer les deux
   offres ») ; avec la confirmation du mot de passe, les deux colonnes ont presque la même hauteur (mesuré : 19 px) */
.carte-compte .inscr{flex:1 0 auto}
.champ-accord{margin-bottom:4px}
.champ{display:flex; flex-direction:column; gap:6px}
.lib{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; line-height:1.4; font-weight:600; color:#2c2e33}
.lib small{font-size:12.5px; font-weight:500; color:#7d7366; white-space:nowrap}
.champ input[type=email],.champ input[type=password],.champ input[type=text]{display:block; width:100%; height:46px; margin:0; padding:0 14px; border-radius:10px; border:1px solid #d6ccba; background:#fffdf9; font-family:inherit; font-size:16px; color:#121316; outline:none; box-shadow:inset 0 1px 2px rgba(60,48,30,.06); -webkit-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s}
.champ input:focus{border-color:#1d7c8c; box-shadow:0 0 0 3px rgba(29,124,140,.2)}
.champ input[aria-invalid=true]{border-color:#c44745; box-shadow:0 0 0 3px rgba(196,71,69,.13)}
.champ input[type=password]{letter-spacing:.12em}
#cCode{text-transform:uppercase; letter-spacing:.06em}
.mdp{position:relative; display:block}
.champ .mdp input{padding-right:50px}
.oeil{position:absolute; top:5px; right:5px; width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:none; color:#6b6f75; cursor:pointer}
.oeil:hover{background:rgba(18,19,22,.06); color:#121316}
.oeil:focus-visible{outline:2px solid #1d7c8c; outline-offset:1px}
.oeil svg{width:19px; height:19px}
.oeil .i-oeil-barre,.oeil[aria-pressed=true] .i-oeil{display:none}
.oeil[aria-pressed=true] .i-oeil-barre{display:block}
.msg-err{display:flex; gap:7px; align-items:flex-start; margin:0; font-size:12.5px; line-height:1.4; font-weight:500; color:#a8322f}
.msg-err svg{width:15px; height:15px; flex:none; margin-top:1.5px}
.msg-gen{padding:10px 12px; border-radius:10px; background:rgba(196,71,69,.09)}
.accord{display:flex; gap:10px; align-items:flex-start; margin-top:2px; font-size:13px; line-height:1.4; color:#3d4045; cursor:pointer}
.accord input{-webkit-appearance:none; appearance:none; flex:none; width:18px; height:18px; margin:1px 0 0; border-radius:5px; border:1.5px solid #b3a790; background:#fffdf9 center / 12px 12px no-repeat; cursor:pointer}
.accord input:checked{border-color:#1d7c8c; background-color:#1d7c8c; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.accord input:focus-visible{outline:2px solid #1d7c8c; outline-offset:2px}
.accord input[aria-invalid=true]{border-color:#c44745}
.accord a{color:#1d7c8c; text-underline-offset:2px} .accord a:hover{color:#155f6b}
.inscr .btn-sombre{gap:10px; width:100%; min-height:54px; margin-top:auto; border:0; border-radius:12px; font-family:inherit; font-size:16px; cursor:pointer}
.tourne{display:none; width:18px; height:18px; animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.inscr.envoi .tourne{display:block}
.inscr.envoi .envoyer{cursor:progress; filter:none}
.inscr.envoi .champ,.inscr.envoi .btn-google{opacity:.55}
/* la seule mention du cadeau : juste sous le bouton (sa demande du 23 oct. au soir) */
.offert{align-self:center; display:inline-flex; align-items:center; gap:8px; margin:-2px 0 0; padding:6px 14px 6px 11px; border-radius:999px; background:rgba(246,162,67,.2); box-shadow:inset 0 0 0 1px rgba(224,143,46,.4); color:#5f3b0c; font-size:13.5px; line-height:1.3; font-weight:600}
.offert svg{width:16px; height:16px; flex:none; color:#d97c1f}
.ou{display:flex; align-items:center; gap:12px; margin:0; font-size:12.5px; line-height:1.4; color:#8a8f94}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:#e0d9cc}
.btn-google{display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 12px; border:1px solid #d6ccba; border-radius:12px; background:#fff; color:#121316; font-size:15px; font-weight:600; text-decoration:none; transition:background-color .2s, border-color .2s}
.btn-google:hover{color:#121316; background:#f7f3ec; border-color:#c4b59b}
.btn-google svg{width:18px; height:18px; flex:none}
/* le champ appât, caché SUR PLACE (1 px, rogné) : poussé à 9 999 px à gauche comme dans l'app, il agrandissait jusqu'à
   lui ce que Safari peint pour la carte et son ombre ; mesuré dans son Safari le 23 oct. au soir : ouverture 35 ms au
   lieu de 25, poussée vers le comparatif 40 ms au lieu de 22, rendus aux chiffres d'avant une fois caché sur place */
.appat{position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* la réussite : elle remplace le formulaire dans la carte, au milieu de sa hauteur */
.pret{display:flex; flex-direction:column; gap:12px; margin-block:auto; outline:none}
.pret-rond{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#1d7c8c; color:#fff}
.pret-rond svg{width:26px; height:26px}
.pret-titre{margin:4px 0 0; font-size:21px; line-height:1.3; font-weight:650}
.pret p{margin:0; font-size:14.5px; line-height:1.5; color:#3d4045}
.pret p strong{color:#121316; font-weight:650; overflow-wrap:anywhere}
.pret .pret-code{display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:rgba(29,124,140,.1); color:#155f6b; font-size:13.5px; line-height:1.4}
.pret-code svg{width:16px; height:16px; flex:none; margin-top:1px}
.pret .btn-sombre{margin-top:6px; min-height:54px; border-radius:12px; font-size:16px}
.pret .pret-note{font-size:12.5px; line-height:1.45; color:#6b6f75}

/* les deux offres en cartes compactes, sans bouton : tout le monde crée le même compte */
/* 23 px sous la colonne : « Comparer les deux offres » sur la même ligne que le bouton Google (marge de la carte, 22 px,
   et demi-écart de hauteur entre le lien et le bouton) */
.offres-col{display:flex; flex-direction:column; gap:14px; min-width:0; padding-bottom:23px}
.mini-cadre{position:relative; display:flex; filter:var(--ombre-carte)}
.mini-cadre .pli-ess,.mini-cadre .pli-int{width:26px; height:26px; filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.3))}
.mini{flex:1; min-width:0; display:flex; flex-direction:column; padding:18px 22px 18px 20px; border-radius:16px; clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%)}
.mini-ess{background:var(--carte-ess-fond); color:var(--encre-papier)}
.mini-int{background:linear-gradient(165deg, var(--sarcelle), #18606d); color:#fff}
.mini h3{margin:0; font-size:16px; line-height:1.4; font-weight:650}
.mprix{margin:4px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.mprix b{font-size:32px; line-height:1.1; font-weight:300; letter-spacing:-.03em}
.mprix span{font-size:13px; color:#55585d}
.mini-int .mprix span{color:#dff0f2}
.mannuel{margin:2px 0 0; font-size:12.5px; line-height:1.4; color:#dff0f2}
.mpoints{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14px; line-height:1.4}
.mpoints li{display:flex; gap:8px}
.mpoints .ok{width:14px; height:14px; flex:none; margin-top:3px; color:#1d7c8c}
.mini-int .mpoints .ok{color:#fff}
.comparer{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--puce); font-size:15px; text-decoration:underline; text-underline-offset:4px}
.comparer:hover{color:var(--lien-survol)}
.comparer svg{width:16px; height:16px}
.fen-offres .fen-pied{margin-top:20px; min-height:44px}
.deja{color:var(--discret)} .deja a{color:var(--sarcelle2); font-weight:600; text-decoration:none}

/* le second panneau : le comparatif, à la largeur de la fenêtre ; son en-tête (les noms des deux offres) reste collé en
   haut de l'écran pendant qu'on fait défiler. Chaque case de l'en-tête a un fond PLEIN, couleur du panneau, et sa vraie
   forme (arrondi, coin replié) est peinte par-dessus en ::before : quand les rangées passent dessous, rien ne transparaît
   dans les coins ; le panneau est d'un fond uni (pas de dégradé) pour que ce fond plein s'y fonde exactement */
.panneau-cmp{background:var(--cmp-fen-fond); outline:none}
.panneau-cmp.part{position:absolute; left:0; right:0; top:calc(100% + 24px)}   /* le temps du retour aux offres : hors du flux */
.retour{display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-top:4px; padding:0; border:0; background:none; color:var(--puce); font:inherit; font-size:15px; text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.retour:hover{color:var(--encre)}
.retour svg{width:16px; height:16px}
.cmp-fen{margin-top:16px}
.cmp-fen .col-offre{width:250px}
/* collé au BORD de l'écran : un élément collant s'arrête à la marge intérieure du voile ; on la reprend en négatif */
.cmp-fen thead td.cmp-coin,.cmp-fen thead th.cmp-ess,.cmp-fen thead th.cmp-int{position:sticky; top:calc(-1 * var(--voile-pad)); z-index:2; padding:16px 20px 14px; border-radius:0; background:var(--cmp-fen-fond)}
.cmp-fen thead td::before,.cmp-fen thead th::before{content:""; position:absolute; inset:0; z-index:-1}
.cmp-fen thead td.cmp-coin::before{border-radius:16px 16px 0 0; background:var(--cmp-lib-fond)}
.cmp-fen thead th.cmp-ess::before{border-radius:16px 0 0 0; background:linear-gradient(225deg, transparent 0 21.21px, var(--cmp-ess) 21.21px) no-repeat}
.cmp-fen thead th.cmp-int::before{border-radius:16px 0 0 0; background:linear-gradient(225deg, transparent 0 21.21px, var(--cmp-int) 21.21px) no-repeat}
.cmp-fen .cmp-nom{font-size:19px}
.cmp-fen tfoot td{padding:18px 12px 20px}
.cmp-fen tfoot .btn-sombre{font-size:14px; padding:0 10px}
.cmp-fen .cmp-offert{font-size:13px}
.panneau-cmp .cmp-pied{margin:18px 0 4px}

/* ---- la fenêtre d'un module : le texte à gauche, la capture en grand à droite ----
   Trois rangées alignées des deux côtés : la tête (nom | vignettes des vues, Clair, Sombre, Fermer), le contenu (texte |
   capture), le pied (modules voisins | nom de la vue). Les vignettes sont AU-DESSUS de la capture (sa demande du 23 oct. :
   on comprend tout de suite qu'il y a d'autres images) et la vue suivante arrive toute seule au bout de 4 s.
   La largeur suit l'écran ET sa hauteur, pour que la fenêtre tienne sans défiler : la capture fait 1,7616 fois sa hauteur,
   et il reste ≈ 260 px pour les rangées et les marges.
   « overflow: clip » (et non hidden) pour rogner le halo : en « hidden », la fenêtre devient un élément défilant que la
   grille du voile peut ramener à la hauteur de l'écran ; au téléphone, le bas de la fenêtre (texte, navigation) était
   coupé sans pouvoir défiler (214 px sur 878 pour le Scénario sur un iPhone, vu au banc le 23 oct. ; voir aussi la
   règle .fen du téléphone). */
.fen-module{--c:#2a97a8; --col:clamp(340px, 31vw, 470px);   /* 24 oct. au soir : colonne de texte élargie (290-350 avant), pour que le texte justifié n'ait pas de grands blancs ; 25 oct. (nuit) : 320-410 → 340-470, sans césure (mesuré, banc_justif.py) */
   padding:28px; overflow:hidden; overflow:clip; container:fenetre / inline-size;
  width:min(1760px, 100%, calc((100vh - 260px) * 1.7616 + var(--col) + 96px));
  width:min(1760px, 100%, calc((100svh - 260px) * 1.7616 + var(--col) + 96px));
  background:var(--module-fond); transition:--c .6s ease}
.mod-halo{position:absolute; left:-12%; top:-38%; width:72%; height:110%; pointer-events:none; opacity:var(--halo-opacite);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 55%, transparent)}
.mod-grille{position:relative; display:grid; grid-template-columns:var(--col) minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:40px; row-gap:16px;
  grid-template-areas:"tete outils" "texte visuel" "nav legende"}
.mod-tete{grid-area:tete; display:flex; align-items:center; gap:14px; min-width:0}
.mod-ico{flex:none; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 20%, var(--ico-base)); border:1px solid color-mix(in srgb, var(--c) 75%, transparent); box-shadow:0 10px 30px -12px color-mix(in srgb, var(--c) 60%, transparent)}
.mod-ico svg{width:23px; height:23px; stroke:color-mix(in srgb, var(--c) 65%, var(--ico-trait))}
.mod-tete-txt{min-width:0}
.mod-nom{margin:0; font-size:27px; line-height:1.1; font-weight:650; letter-spacing:-.015em}
.mod-offre{display:inline-block; margin-top:7px; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--offre-ess-bord); color:var(--offre-ess-encre)}
.mod-offre.int{border-color:var(--offre-int-bord); color:var(--offre-int-encre)}
/* 25 oct. 2026 (nuit) : le Scénario mis en avant (« le plus important de la plateforme ») : une pastille à la couleur du
   module, à côté de celle de l'offre */
.mod-coeur{display:inline-block; margin:7px 0 0 8px; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 24%, transparent); border:1px solid color-mix(in srgb, var(--c) 70%, transparent); color:var(--encre); white-space:nowrap}
.mod-outils{grid-area:outils; justify-self:end; display:flex; align-items:center; justify-content:flex-end; gap:12px}
.bascule{display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--ligne2); background:var(--fond); font-size:13px; font-weight:600}
/* Clair / Sombre des captures : le soleil et la lune de l'application, sans texte (même demande) */
.bascule button{position:relative; display:grid; place-items:center; width:40px; min-height:32px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--discret); font:inherit; cursor:pointer; transition:background-color .25s, color .25s}
.bascule button svg{width:17px; height:17px}
.bascule button[aria-pressed="true"]{background:var(--ligne); color:var(--encre)}
.mod-texte{grid-area:texte; display:flex; flex-direction:column; gap:16px; min-width:0; padding-top:6px}
/* 24 oct. au soir (sa demande) : les textes de la fenêtre JUSTIFIÉS, à gauche et à droite. 25 oct. (nuit), sa demande :
   PLUS DE CÉSURES ; les mots courts et le dernier mot de chaque phrase sont tenus par des espaces insécables
   (gen_landing.py, insecables()). L'accroche, en grands caractères sur deux lignes, passe en drapeau, équilibrée :
   justifiée, sa première ligne s'étirait avec de grands blancs (« L'écriture de votre scénario, au format... ») */
.mod-accroche,.mod-detail,.mod-plus{-webkit-hyphens:manual; hyphens:manual}
.mod-detail p,.mod-plus-txt p{margin:0; text-align:justify}
/* les lignes composées par landing.js (composer) : chacune justifiée d'un bord à l'autre, sans se couper ; la dernière à gauche */
.mod-detail .ligne,.mod-plus-txt .ligne{display:block; white-space:nowrap; text-align:justify; text-align-last:justify}
.mod-detail .ligne.fin,.mod-plus-txt .ligne.fin{text-align-last:auto}   /* sans text-wrap:pretty : il raccourcissait l'avant-dernière ligne, que la justification étirait (mesuré : banc_justif.py) */
.mod-accroche{margin:0; font-size:19px; line-height:1.42; font-weight:500; letter-spacing:-.005em; color:var(--encre); text-align:left; text-wrap:balance}
.mod-detail{display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.68; color:var(--texte2)}
.mod-detail b{font-weight:600; color:var(--encre)}
.mod-plus{margin:4px 0 0; padding:13px 15px; border-radius:12px; background:var(--plus-fond); border:1px solid var(--plus-bord); font-size:13.5px; line-height:1.55; color:var(--plus-encre)}
.mod-plus a{color:var(--plus-titre); font-weight:650; text-decoration:underline; text-underline-offset:3px} .mod-plus a:hover{color:var(--encre)}
.mod-plus-titre{display:block; margin-bottom:5px; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--plus-titre)}
.mod-plus-txt{display:flex; flex-direction:column; gap:8px} .mod-plus-txt b{font-weight:650; color:var(--plus-titre)}
/* 25 oct. (nuit) : les textes plus longs défilent dans leur colonne ; la capture garde la hauteur de la fenêtre (le texte
   ne compte plus dans la hauteur de sa rangée : contain:size). Un fondu en bas tant qu'il reste à lire (landing.js) */
@media (min-width:901px){
  .mod-texte{contain:size; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:8px; margin-right:-8px}
  .mod-texte.suite{-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent)}
  .mod-texte:focus-visible{outline:2px solid color-mix(in srgb, var(--c) 70%, transparent); outline-offset:4px; border-radius:6px}
}
.mod-nav{grid-area:nav; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0}
.mod-nav button{display:inline-flex; align-items:center; gap:7px; min-height:44px; min-width:0; padding:0 4px; border:0; background:none; color:var(--discret); font-size:14px; cursor:pointer; transition:color .2s}
.mod-nav button span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mod-nav button:hover{color:var(--encre)}
.mod-nav svg{width:16px; height:16px; flex:none}
.mod-visuel{grid-area:visuel; min-width:0}
.mod-image{position:relative; margin:0; aspect-ratio:4108 / 2332; border-radius:14px; overflow:hidden; border:1px solid var(--ligne); background:var(--cadre-fond); box-shadow:var(--ombre-image); cursor:zoom-in}
.mod-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; -webkit-user-drag:none; user-select:none}
.mod-flou{filter:blur(16px); transform:scale(1.08)}   /* la vignette agrandie et floutée : affichée tout de suite, l'image nette arrive en fondu */
.mod-image.vide{cursor:default}
.mod-image.vole img{visibility:hidden}   /* pendant le zoom, l'image semble sortir de la fenêtre */
.mod-attente{position:absolute; inset:0; margin:0; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; font-size:15px; color:var(--gris); background:repeating-linear-gradient(135deg, var(--attente1) 0 14px, var(--attente2) 14px 28px)}
.mod-attente svg{width:34px; height:34px; stroke:var(--c)}
.mod-zoom{position:absolute; right:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 15px 0 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(11,16,19,.74); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#f4f3ef; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:0 8px 24px -10px rgba(0,0,0,.7); transition:background-color .2s, transform .25s var(--sortie)}
.mod-image:hover .mod-zoom{background:rgba(11,16,19,.9); transform:translateY(-2px)}
.mod-zoom svg{width:16px; height:16px}
/* les vignettes des vues, au-dessus de la capture (dans la rangée du haut, à gauche des boutons) ; sous la vignette
   choisie, un trait se remplit en 4 s, puis la vue suivante arrive (il s'arrête quand la souris est sur l'image) */
.mod-bande{grid-area:outils; justify-self:start; align-self:center; position:relative; display:flex; align-items:center; min-width:0; max-width:calc(100% - 156px)}
/* 24 oct. au soir (les 7 vues de la Bible) : la bande défile, sans barre ; fondu sur le bord qui cache des vues, flèches */
.mod-vignettes{display:flex; gap:10px; min-width:0; padding:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
.mod-vignettes::-webkit-scrollbar{display:none; width:0; height:0}
.mod-bande.g .mod-vignettes{-webkit-mask-image:linear-gradient(90deg, transparent, #000 40px); mask-image:linear-gradient(90deg, transparent, #000 40px)}
.mod-bande.d .mod-vignettes{-webkit-mask-image:linear-gradient(270deg, transparent, #000 40px); mask-image:linear-gradient(270deg, transparent, #000 40px)}
.mod-bande.g.d .mod-vignettes{-webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent)}
.mod-bande-g,.mod-bande-d{position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:30px; height:30px; margin-top:-15px; padding:0;
  border:1px solid var(--ligne2); border-radius:50%; background:var(--carte); color:var(--puce); cursor:pointer; box-shadow:0 6px 18px -8px rgba(0,0,0,.55)}
.mod-bande-g{left:-4px} .mod-bande-d{right:-4px}
.mod-bande-g:hover,.mod-bande-d:hover{color:var(--encre); border-color:var(--gris)}
.mod-bande-g svg,.mod-bande-d svg{width:15px; height:15px}
.mod-vignettes button{flex:none; position:relative; display:block; padding:0; border:2px solid transparent; border-radius:9px; background:var(--vignette-fond); cursor:pointer; overflow:hidden; opacity:.55; line-height:0; transition:opacity .2s, border-color .2s, transform .2s}
.mod-vignettes button:hover{opacity:.9; transform:translateY(-1px)}
.mod-vignettes button[aria-pressed="true"]{border-color:var(--orange); opacity:1}
.mod-vignettes img{display:block; width:96px; height:54px; object-fit:cover; object-position:top left}
.mod-vignettes button::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--orange); transform:scaleX(0); transform-origin:0 50%; pointer-events:none}
.mod-vignettes.auto button[aria-pressed="true"]::after{animation:defile-vue 4s linear forwards}
.mod-vignettes.auto.pause button[aria-pressed="true"]::after{animation-play-state:paused}
@keyframes defile-vue{to{transform:scaleX(1)}}
.mod-vues{grid-area:legende; display:flex; align-items:center; justify-content:flex-end; min-height:36px; min-width:0}
.mod-vue-nom{font-size:13.5px; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* fenêtre étroite (la rangée du haut ne tient plus vignettes et boutons côte à côte) : les vignettes passent sur leur
   propre rangée, toujours au-dessus de la capture */
@container fenetre (max-width:1080px){
  .mod-grille{grid-template-rows:auto auto 1fr auto; grid-template-areas:"tete outils" "texte vignettes" "texte visuel" "nav legende"}
  .mod-bande{grid-area:vignettes; max-width:100%}
}

/* ---- le zoom : la capture en plein écran, puis encore plus près ---- */
.loupe{position:fixed; inset:0; z-index:80; overflow:hidden; outline:none; touch-action:none}
.loupe-fond{position:absolute; inset:0; background:var(--loupe-fond)}
.loupe-img{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; cursor:zoom-in; border-radius:10px; box-shadow:var(--ombre-loupe); -webkit-user-drag:none; user-select:none}
.loupe.proche .loupe-img{cursor:zoom-out; border-radius:0}
.loupe.proche.tactile .loupe-img{cursor:grab}
.loupe-fermer{position:absolute; top:18px; right:18px; z-index:2; background:var(--barre-fond); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.loupe-barre{position:absolute; left:50%; bottom:18px; z-index:2; transform:translateX(-50%); display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px); padding:6px 6px 6px 18px; border-radius:999px; background:var(--barre-fond); border:1px solid var(--ligne); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:13.5px; color:var(--barre-encre); white-space:nowrap}
.loupe-legende{overflow:hidden; text-overflow:ellipsis} .loupe-legende b{color:var(--encre); font-weight:600}
.loupe-aide{color:var(--gris)}
.loupe-barre button{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; border:1px solid var(--ligne2); border-radius:999px; background:transparent; color:var(--puce); font-size:13px; font-weight:600; cursor:pointer}
.loupe-barre button:hover{color:var(--encre); border-color:var(--gris)}
.loupe-barre button svg{width:14px; height:14px}

/* ---- écrans moyens et petits ---- */
@media (max-width:1000px){
  :root{--barre-h:84px}
  .haut-in{padding:0 20px} .logo{gap:12px} .logo .sym{height:60px} .logo .nom{height:22px}
  .haut-droite{gap:16px}
  .accueil{padding:72px 20px 80px} .titre{font-size:42px}
  .mods{gap:8px} .mods li button{font-size:10.5px; padding:7px 11px; min-height:36px; gap:7px} .mods li button svg{width:13px; height:13px}
  .mods-zone{margin-top:76px}
  .cta{margin-top:68px}
  .ticket-corps .ticket-dedans{gap:12px; min-height:84px; padding:0 22px 0 34px; font-size:17px} .ticket-talon .ticket-dedans{width:112px}
  .ticket-corps .ticket-dedans svg{width:20px; height:20px}
  .ticket-corps .ticket-cadre{inset:9px 0 9px 12px} .ticket-talon .ticket-cadre{inset:9px 12px 9px 0} .ticket-vert{left:20px; font-size:7.5px}
  .ticket-imprime{gap:3px} .ticket-imprime small{font-size:9.5px}   /* le ticket de 84 px d'avant le 24 oct. : il tient dans 360 px */
  .ticket-imprime b{font-size:14px} .ticket-imprime i{width:40px; margin-top:6px}   /* « GRATUITE » dans le cadre du talon plus étroit */
  /* l'inscription d'abord, les deux offres dessous, côte à côte tant qu'il y a la place */
  .compte{grid-template-columns:minmax(0,1fr); gap:18px}
  .offres-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding-bottom:0}
  .comparer{grid-column:1 / -1}
  .cmp-titre{font-size:32px}
  .panneau{padding:22px 18px 18px}
}
/* écrans peu hauts (portables) : le texte de la fenêtre d'un module un cran plus petit, pour que la fenêtre tienne sans
   défiler avec les textes plus longs du 24 oct. au soir (Structure narrative, Développement, Bible) */
@media (min-width:901px) and (max-height:820px){
  .mod-texte{gap:12px}
  .mod-accroche{font-size:17.5px; line-height:1.4}
  .mod-detail{font-size:14px; line-height:1.6}
  .mod-plus{padding:11px 13px; font-size:13px; line-height:1.5}
}
/* sous 900 px : la fenêtre du module prend tout l'écran ; les vignettes, puis la capture, puis le texte */
/* très petits téléphones (360 à 380 px) : « Je fais mon film » reste sur une ligne, à côté de « Cine Layers » vertical */
@media (max-width:380px){
  .ticket-corps .ticket-dedans{gap:10px; padding:0 16px 0 32px; font-size:16px} .ticket-corps .ticket-dedans svg{width:18px; height:18px}
}
@media (max-width:900px){
  .voile{--voile-pad:0px}
  .fen{border-radius:0; border:0; margin:0}   /* pleine page par étirement ; « min-height: 100% » la bloquait à la hauteur de l'écran */
  .fen-offres{gap:12px} .panneau{border-radius:0; border-left:0; border-right:0} .panneau-offres{flex:1 0 auto}
  .panneau-cmp.part{top:calc(100% + 12px)}
  .fen-module{width:100%; padding:16px 16px 28px}
  .mod-grille{grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:14px; grid-template-areas:"tete" "outils" "vignettes" "visuel" "legende" "texte" "nav"}
  .mod-outils{justify-self:stretch; justify-content:space-between}
  .mod-bande{grid-area:vignettes; max-width:100%}
  .mod-nom{font-size:22px} .mod-ico{width:44px; height:44px}
  .mod-accroche{font-size:18px}
  .mod-vignettes img{width:72px; height:41px}
  .mod-vues{justify-content:flex-start; min-height:0}
  .mod-zoom{min-height:32px; right:10px; bottom:10px; padding:0 11px 0 9px; font-size:12.5px}
  .mod-nav{padding-top:6px; border-top:1px solid var(--ligne)}
  .loupe-aide{display:none}
}
@media (max-width:760px){
  /* le comparatif tient dans la largeur (il débordait : 491 px pour un écran de 390) : chaque rangée devient une grille,
     le libellé au-dessus de ses deux valeurs ; les rôles ARIA posés dans le HTML gardent un tableau pour les lecteurs
     d'écran. Dans la fenêtre, c'est l'en-tête entier qui reste collé (une case de grille ne sort pas de sa rangée) */
  .cmp-cadre{overflow:visible}
  .cmp,.cmp thead,.cmp tbody,.cmp tfoot{display:block}
  .cmp colgroup,.cmp tr.g td,.cmp thead .cmp-coin{display:none}
  .cmp tr{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:8px}
  .cmp th,.cmp td{display:block; padding:10px 12px}
  .cmp{font-size:14px}
  .cmp th[scope=row],.cmp th[scope=rowgroup]{grid-column:1 / -1}
  .cmp tr.g th{padding:22px 12px 8px}
  .cmp thead th{padding:20px 12px 16px}
  .cmp-nom{font-size:17px} .cmp-prix{font-size:26px} .cmp-note2{font-size:11.5px}
  .cmp-cadeau{white-space:normal; text-align:left; line-height:1.25; border-radius:12px}   /* sur plusieurs lignes : pas une pilule */
  .panneau-cmp .fen-titre{font-size:25px}
  .cmp tfoot .btn-sombre{font-size:12.5px; white-space:normal; min-height:44px; padding:6px 10px; text-align:center; line-height:1.2}
  .cmp-offert,.cmp-fen .cmp-offert{font-size:12px; text-align:left}
  .offres-col{grid-template-columns:minmax(0,1fr)}
  .cmp tfoot th{border-radius:0} .cmp tfoot td{border-radius:0 0 12px 12px; padding:14px 10px 16px}
  .cmp-fen thead{position:sticky; top:calc(-1 * var(--voile-pad)); z-index:2; background:var(--cmp-fen-fond)}
  .cmp-fen thead th.cmp-ess,.cmp-fen thead th.cmp-int{position:relative; z-index:0; padding:14px 12px 12px}
  .loupe-barre{padding-left:14px; gap:8px}
  .loupe-barre button span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sym .hover,.sym .pc,.sym .pc.wing,.sym .pc.tail,.sym .pc.belly,.sym .pc.neck,.sym .pc.head,.sym .pc.beak,.sym .sh,.nom,.nom .word > *,.mods li,.mods li:not(.saut)::before{animation:none}
  html{scroll-behavior:auto}
  .page,body.recul .page{transition:none; transform:none}
  body{transition:none}
  .tourne{animation:none}
}

/* ==== LES PAGES « CONCEPT » ET « AIDE À L'ÉCRITURE » (24 oct. 2026 au soir, sa demande : « Mets en page Concept et Aide
   à l'écriture avec tes textes, qu'on modifiera plus tard ») ====
   Même en-tête, même pied, mêmes fenêtres que l'accueil (les puces de modules ouvrent la fenêtre du module, le ticket
   ouvre « Créez votre compte »). Les captures du haut de « Concept » sont posées par la page elle-même (style dans son
   en-tête, une version claire et une sombre). Aucune animation en opacité ou en transform (calques Safari). */
.liens a[aria-current="page"]{color:var(--sarcelle2)}
.doc{max-width:1180px; margin:0 auto; padding:0 40px}
.doc-tete{padding:88px 0 72px; text-align:center}
.doc-titre{margin:0; font-size:60px; line-height:1.12; letter-spacing:-.018em; font-weight:300; text-wrap:balance}
.doc-titre strong{font-weight:650; color:var(--ticket)}
.doc-chapo{margin:26px auto 0; max-width:40em; font-size:19px; line-height:1.6; color:var(--doux); text-wrap:pretty}
.doc-offre{margin:22px 0 0}
.doc-bloc{padding:76px 0; border-top:1px solid var(--ligne)}
.doc-duo{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:72px; align-items:center}
.doc-h2{margin:0; font-size:36px; line-height:1.15; letter-spacing:-.015em; font-weight:300; text-wrap:balance}
.doc-h2 strong{font-weight:650}
.doc-centre{text-align:center}
.doc-h3{margin:0; font-size:24px; line-height:1.25; font-weight:650; letter-spacing:-.01em}
.doc-p{margin:18px 0 0; max-width:34em; font-size:17px; line-height:1.65; color:var(--texte2); text-wrap:pretty}
.doc-note{margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--gris)}
.puces{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.puce{display:inline-flex}

/* -- Concept : les couches. Des modules empilés comme des calques, qui AVANCENT (24 oct. au soir, sa demande) : --p est
   la profondeur (0 au fond, 4 devant) ; chaque cran les décale vers le haut à droite et les grandit un peu ; celle de
   devant part (p 4,7) en s'effaçant dans le flou, une nouvelle paraît au fond (p -1 → 0) en sortant du flou
   (landing.js). Chacune garde visible sa bande du bas, où se pose son nom (une puce : elle ouvre la fenêtre du module).
   Transform, opacité et flou en TRANSITION seulement (1,5 s par cran) : entre deux crans, rien n'est animé. */
.doc-tete{overflow-x:clip}   /* la couche qui part ne fait pas défiler la page de côté */
.couches{position:relative; width:min(880px, 100%); aspect-ratio:880 / 510; margin:64px auto 0}
.couche{--p:0; position:absolute; left:0; top:33.6%; width:62%; aspect-ratio:4108 / 2332;
  border-radius:12px; border:1px solid var(--ligne2); background:var(--cadre-fond) center / cover no-repeat; box-shadow:var(--ombre-image);
  transform-origin:0 0; transform:translate(calc(var(--p) * 15.32%), calc(var(--p) * -13.83%)) scale(calc(.88 + var(--p) * .03));
  transition:transform 1.5s cubic-bezier(.45,0,.25,1), opacity 1.1s ease, filter 1.5s ease}
.couche.sortie{opacity:0; filter:blur(16px); transition:transform 1.5s cubic-bezier(.45,0,.25,1), opacity 1.35s ease-in, filter 1.5s ease}
.couche.attente{opacity:0; filter:blur(10px); transition:none}
.couche .puce{position:absolute; left:12px; bottom:7px}
.couche .puce button{min-height:28px; padding:5px 10px 5px 9px; font-size:10px}

/* -- Concept : « D'habitude », des fichiers éparpillés */
.fichiers{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:20px 16px; min-height:280px; padding:12px}
.fic{display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 10px; border-radius:9px; border:1px solid var(--ligne2); background:var(--carte);
  color:var(--doux); font:500 13px/1.2 ui-monospace,'SF Mono',Menlo,Consolas,monospace; white-space:nowrap;
  transform:translateY(var(--y, 0px)) rotate(var(--r, 0deg)); box-shadow:0 12px 26px -16px rgba(0,0,0,.55)}
.fic svg{width:17px; height:17px; flex:none; color:var(--t)}

/* -- Concept : « Ici, tout se tient », les liens entre les modules. Chaque rangée : un module, le fil (son nom au-dessus,
   flèche dans le sens où les choses passent, double quand les deux se tiennent à jour, pointillé pour un simple lien), un
   module ; les couleurs du fil vont de l'un à l'autre */
.liens-mods{list-style:none; max-width:940px; margin:48px auto 0; padding:0; display:flex; flex-direction:column; gap:10px}
.lien{--ca:var(--a-s); --cb:var(--b-s); display:grid; grid-template-columns:200px minmax(0,1fr) 200px; align-items:center; column-gap:16px; min-height:52px}
html[data-theme="light"] .lien{--ca:var(--a-c); --cb:var(--b-c)}
.lien .puce-a{grid-column:1; grid-row:1; justify-self:end}
.lien .puce-b{grid-column:3; grid-row:1; justify-self:start}
.lien-fil{grid-column:2; grid-row:1; position:relative; height:12px; background:linear-gradient(90deg, var(--ca), var(--cb)) center / 100% 2px no-repeat}
.lien-txt{grid-column:2; grid-row:1; align-self:start; padding:0 14px; text-align:center; font-size:12.5px; line-height:15px; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lien-fil::before,.lien-fil::after{content:""; position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border:solid transparent; border-width:2px 2px 0 0}
.lien-fil::after{right:1px; border-color:var(--cb); transform:rotate(45deg)}
.lien.sync .lien-fil::before{left:1px; border-color:var(--ca); transform:rotate(-135deg)}
.lien.relie .lien-fil{background:linear-gradient(90deg, var(--ca) 0 6px, transparent 6px) 0 50% / 11px 2px repeat-x}
.lien.relie .lien-fil::after,.lien.relie .lien-fil::before{width:6px; height:6px; margin-top:-3px; border:0; border-radius:50%; transform:none}
.lien.relie .lien-fil::before{left:0; background:var(--ca)}
.lien.relie .lien-fil::after{right:0; background:var(--cb)}

/* -- Concept : « De l'idée au tournage », cinq étapes sur un fil aux couleurs du logo */
.chemin{position:relative; list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:28px}
.chemin::before{content:""; position:absolute; top:15px; left:calc((100% - 112px) / 10); right:calc((100% - 112px) / 10); height:2px; border-radius:2px;
  background:linear-gradient(90deg, #2a97a8, #9b5488 40%, #c44745 70%, #f6a243)}
.etape{--c:var(--c-s); position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:50px}
html[data-theme="light"] .etape{--c:var(--c-c)}
.etape-n{position:absolute; top:0; left:50%; width:32px; height:32px; margin-left:-16px; display:grid; place-items:center; border-radius:50%;
  border:2px solid var(--c); background:var(--fond); color:var(--c); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.etape .doc-h3{font-size:22px}
.etape .doc-p{margin-top:10px; font-size:15px; line-height:1.55}
.etape .puces{justify-content:center; gap:8px; margin-top:18px}
.doc-entete-bloc .doc-p{max-width:40em}

/* -- Concept : seul ou à deux, votre travail */
.doc-deux{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:72px}
.formats{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.formats li{padding:5px 10px; border-radius:7px; border:1px solid var(--ligne2); color:var(--doux); font:500 12.5px/1.3 ui-monospace,'SF Mono',Menlo,Consolas,monospace}

/* -- la fin des deux pages : le ticket d'entrée */
.doc-fin{display:flex; flex-direction:column; align-items:center; text-align:center; padding:84px 0 104px; border-top:1px solid var(--ligne)}
.doc-fin .cta{margin-top:0}
.doc-citation{margin:0 0 30px; max-width:24em; font-size:34px; line-height:1.25; letter-spacing:-.015em; font-weight:300; text-wrap:balance}
.doc-citation strong{font-weight:650}
.doc-mention{margin:0 0 48px; max-width:36em; font-size:16px; line-height:1.55; color:var(--doux)}

/* -- Aide à l'écriture : une fiche, à côté de la page. À gauche, la page du scénario en silhouette (en-tête de scène,
   action, personnage, réplique) ; à droite, l'aide ouverte sur « La structure en 3 actes », ses huit jalons placés sur
   la durée du récit (repris de l'application) : un clic sur un jalon l'explique, ils défilent seuls sinon */
.fd{margin:64px auto 0; max-width:1080px}
.fd-boite{--fd-papier:var(--carte); --fd-barre:color-mix(in srgb, var(--encre) 13%, transparent); --fd-panneau:color-mix(in srgb, var(--fond) 55%, var(--carte));
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); border-radius:18px; overflow:hidden; border:1px solid var(--ligne2);
  background:var(--fd-papier); box-shadow:var(--ombre-image); text-align:left}
/* la page de scénario (25 oct. au soir) : une vraie scène, aux retraits d'une page de scénario (personnage, parenthèse,
   réplique), en Courier Prime ; le curseur clignote au bout tant que la fiche est à l'écran */
.fd-page{padding:38px 34px 34px; background:var(--fd-papier); font-family:'Courier Prime', 'Courier New', monospace; font-size:12.5px;
  line-height:1.5; color:var(--encre); overflow:hidden}
.fd-page p{margin:0}
.fd-sc{font-weight:700; margin-bottom:14px !important}
.fd-ac{margin-bottom:14px !important}
.fd-pe{margin-left:38% !important}
.fd-pa{margin-left:29% !important; margin-right:22% !important}
.fd-di{margin:0 17% 14px 19% !important}
.fd-curseur{display:inline-block; width:1.5px; height:1.15em; margin-left:2px; vertical-align:-.2em; background:var(--sarcelle)}
.fd.joue .fd-curseur{animation:fd-clign 1.1s steps(1) infinite}
@keyframes fd-clign{50%{visibility:hidden}}
body.recul .fd-curseur{animation-play-state:paused}
.fd-fiche{padding:26px 28px 28px; background:var(--fd-panneau); border-left:1px solid var(--ligne)}
.fd-onglets{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px}
.fd-onglets span{padding:5px 10px; border-radius:999px; border:1px solid var(--ligne); color:var(--gris); font-size:11.5px; font-weight:600; white-space:nowrap}
.fd-onglets span.on{color:var(--encre); border-color:var(--sarcelle); background:color-mix(in srgb, var(--sarcelle) 16%, transparent)}
.fd-titre{margin:0; font-size:22px; line-height:1.25; font-weight:650}
.fd-ref{margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--gris)}
.fd-schema{margin-top:22px}
.fd-actes{display:grid; grid-template-columns:25fr 50fr 25fr; gap:3px; height:32px}
.fd-acte{display:flex; align-items:center; justify-content:center; border-radius:6px; color:#fff; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase}
.fd-acte.a1{background:#2a97a8} .fd-acte.a2{background:#9b5488} .fd-acte.a3{background:#d9734a}
html[data-theme="light"] .fd-acte.a1{background:#1d7c8c} html[data-theme="light"] .fd-acte.a2{background:#8a4a7a} html[data-theme="light"] .fd-acte.a3{background:#c4603a}
.fd-jalons{position:relative; height:70px; margin-top:8px}
.fd-jalons::before{content:""; position:absolute; left:0; right:0; top:11px; height:1px; background:var(--ligne2)}
/* chaque jalon : le bouton est le point, posé à son pourcentage du récit ; son nom pend dessous (sur deux lignes en
   alternance pour que les noms voisins ne se touchent pas), aligné à droite pour le dernier, à gauche pour le premier */
.fd-j{position:absolute; top:0; left:calc(var(--p) * 1%); width:22px; height:22px; margin-left:-11px; padding:0; border:0; background:none;
  color:var(--gris); font:inherit; cursor:pointer}
.fd-pt{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:2px solid var(--ligne2); background:var(--fd-panneau);
  color:var(--doux); font-size:11px; font-weight:700; transition:background-color .2s, border-color .2s, color .2s}
.fd-lb{position:absolute; top:29px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:600; line-height:14px; white-space:nowrap; transition:color .2s}
.fd-j.bas .fd-lb{top:47px}
.fd-j.fin .fd-lb{left:auto; right:0; transform:none}
.fd-j.debut .fd-lb{left:0; transform:none}
.fd-j:hover .fd-pt{border-color:var(--sarcelle)}
.fd-j[aria-pressed="true"] .fd-pt{background:var(--sarcelle); border-color:var(--sarcelle); color:#fff}
.fd-j[aria-pressed="true"] .fd-lb{color:var(--encre)}
.fd-j:focus-visible{outline:none} .fd-j:focus-visible .fd-pt{outline:2px solid var(--sarcelle); outline-offset:2px}
.fd-etapes{min-height:132px; padding:16px 18px; border-radius:12px; border:1px solid var(--ligne); background:color-mix(in srgb, var(--carte) 70%, transparent)}
.fd-acte-nom{margin:0; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--gris)}
.fd-etape h3{margin:5px 0 0; font-size:16px; line-height:1.3; font-weight:650}
.fd-etape p.fd-txt{margin:7px 0 0; font-size:14.5px; line-height:1.55; color:var(--texte2); text-wrap:pretty}
.fd-legende{margin:22px auto 0; max-width:38em; font-size:15px; line-height:1.55; color:var(--gris); text-align:center}

/* -- Aide à l'écriture : le sommaire de la bibliothèque (les rubriques et les fiches de l'application) */
.sommaire{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--ligne)}
.som{display:grid; grid-template-columns:56px minmax(0,250px) minmax(0,1fr); gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--ligne)}
.som-n{font-size:13px; font-weight:650; letter-spacing:.12em; color:var(--gris); font-variant-numeric:tabular-nums}
.som-nom{margin:0; font-size:22px; line-height:1.25; font-weight:650}
.som-compte{display:block; margin-top:4px; font-size:13px; font-weight:400; color:var(--gris)}
.som-fiches{margin:0; display:flex; flex-wrap:wrap; gap:8px; font-size:14.5px; line-height:1.35; color:var(--texte2)}
/* une étiquette par fiche : un séparateur « · » se confondrait avec celui de certains titres (« Aristote · le caractère ») */
.som-fiches span{padding:6px 11px; border-radius:999px; border:1px solid var(--ligne); background:color-mix(in srgb, var(--carte) 70%, transparent)}

/* -- Aide à l'écriture : le guide de la bible et du dossier (onglets et checklist de l'application, en vignette) */
.guide{padding:22px 24px 24px; border-radius:16px; border:1px solid var(--ligne2); background:var(--carte); box-shadow:var(--ombre-image)}
.guide-onglets{display:flex; flex-wrap:wrap; gap:4px; padding:3px; border-radius:999px; border:1px solid var(--ligne); width:max-content; max-width:100%}
.guide-onglets span{padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; color:var(--gris)}
.guide-onglets span.on{background:color-mix(in srgb, var(--sarcelle) 18%, transparent); color:var(--encre)}
.guide-g{margin:20px 0 0; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:650}
.guide-g b{display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--sarcelle); color:#fff; font-size:12px}
.guide-l{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.guide-l li{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--texte2)}
.guide-l li::before{content:""; flex:none; width:16px; height:16px; margin-top:1px; border-radius:4px; border:1.5px solid var(--ligne2)}
.guide-l li.on{color:var(--gris); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--gris) 60%, transparent)}
.guide-l li.on::before{border-color:var(--sarcelle); background:var(--sarcelle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat}

@media (max-width:1000px){
  .doc{padding:0 20px}
  .doc-tete{padding:64px 0 56px}
  .doc-titre{font-size:44px}
  .doc-chapo{font-size:17.5px}
  .doc-bloc{padding:56px 0}
  .doc-duo,.doc-deux{grid-template-columns:minmax(0,1fr); gap:36px}
  .doc-h2{font-size:30px}
  .chemin{grid-template-columns:minmax(0,1fr); gap:34px; margin-top:40px}
  .chemin::before{top:16px; bottom:16px; left:15px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, #2a97a8, #9b5488 40%, #c44745 70%, #f6a243)}
  .etape{align-items:flex-start; text-align:left; padding:4px 0 0 52px}
  .etape-n{left:0; margin-left:0}
  .etape .puces{justify-content:flex-start}
  .fd-boite{grid-template-columns:minmax(0,1fr)}
  .fd-page{display:none}
  .fd-fiche{border-left:0}
  .doc-citation{font-size:28px}
  html[data-theme="light"] .cmp-boite{padding:44px 20px 32px}
}
@media (max-width:760px){
  .liens-mods{gap:18px; margin-top:32px}
  .lien{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:0}
  .lien .puce-a{order:1} .lien-fil{order:2; width:30px; flex:none} .lien .puce-b{order:3} .lien-txt{order:4; flex-basis:100%; padding:0; text-align:left; white-space:normal}
  .lien .puce button{font-size:9.5px; padding:6px 9px; min-height:30px; letter-spacing:.12em}
  .couche .puce{display:none}
  .fichiers{min-height:0; gap:14px 10px; padding:0}
  .fic{font-size:12px}
  .som{grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0}
  .fd-fiche{padding:20px 16px 20px}
  .fd-lb{display:none}
  .fd-jalons{height:30px}
  .fd-etapes{min-height:170px}
  .doc-titre{font-size:36px}
  html[data-theme="light"] .cmp-boite{padding:32px 12px 24px; border-radius:18px}
}

/* ==== PAGE CONCEPT, 2e VERSION (24 oct. 2026 au soir, ses retours) ==== */
/* les fils des liens s'animent (« une petite animation en boucle pour illustrer la synchronisation ») */
.lien-fil i{position:absolute; top:50%; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--cb);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cb) 26%, transparent), 0 0 12px color-mix(in srgb, var(--cb) 70%, transparent); visibility:hidden}
.lien.relie .lien-fil i{display:none}
.liens-mods.joue .lien.flux .lien-fil i{animation:lien-va 6.4s linear calc(var(--n) * .8s) infinite}
.liens-mods.joue .lien.sync .lien-fil i{animation:lien-va-vient 6.4s linear calc(var(--n) * .8s) infinite}
.liens-mods.joue .lien.relie .lien-fil{animation:lien-fourmis 1.1s linear infinite}
@keyframes lien-va{0%{left:0; visibility:visible; background-color:var(--ca)} 20%{left:100%; visibility:visible; background-color:var(--cb)} 20.01%, 100%{left:100%; visibility:hidden}}
@keyframes lien-va-vient{0%{left:0; visibility:visible; background-color:var(--ca)} 20%{left:100%; visibility:visible; background-color:var(--cb)}
  40%{left:0; visibility:visible; background-color:var(--ca)} 40.01%, 100%{left:0; visibility:hidden}}
@keyframes lien-fourmis{to{background-position:11px 50%}}
body.recul .liens-mods *, body.recul .liens-mods .lien-fil{animation-play-state:paused}

/* les apparitions au défilement : le bloc glisse et paraît quand il arrive à l'écran (landing.js pose .vu) */
html.anime [data-revele]{opacity:0; transform:translateY(26px)}
html.anime [data-revele].vu{opacity:1; transform:none; transition:opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1)}

/* « De l'idée au tournage » : à l'arrivée, le fil se trace et les cinq étapes paraissent l'une après l'autre */
html.anime .chemin[data-revele]{opacity:1; transform:none}
html.anime .chemin::before{-webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0)}
html.anime .chemin.vu::before{-webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); transition:clip-path 2.2s cubic-bezier(.45,0,.2,1) .15s, -webkit-clip-path 2.2s cubic-bezier(.45,0,.2,1) .15s}
html.anime .chemin .etape{opacity:0; transform:translateY(22px)}
html.anime .chemin.vu .etape{opacity:1; transform:none; transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(.25s + var(--n) * .42s)}
html.anime .chemin .etape-n{transform:scale(.3)}
html.anime .chemin.vu .etape-n{transform:none; transition:transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(.25s + var(--n) * .42s)}

/* « À deux, ou toute l'équipe » et « Votre travail, en sécurité » */
.ensemble{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 64px}
.ens-i{display:flex; gap:18px; align-items:flex-start}
.ens-ic{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--sarcelle2);
  border:1px solid color-mix(in srgb, var(--sarcelle) 45%, var(--ligne)); background:color-mix(in srgb, var(--sarcelle) 12%, transparent)}
.ens-ic svg{width:21px; height:21px}
.ens-i .doc-h3{font-size:19px}
.ens-i .doc-p{margin-top:8px; font-size:15.5px; line-height:1.6}
.doc-note-ens{margin-top:38px}
.trois{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px}
.trois-i .ens-ic{margin-bottom:18px}
.trois-i .doc-h3{font-size:20px}
.trois-i .doc-p{margin-top:10px; font-size:15.5px; line-height:1.6}

@media (max-width:1000px){
  html.anime .chemin::before{-webkit-clip-path:inset(0 0 100% 0); clip-path:inset(0 0 100% 0)}
  .ensemble{grid-template-columns:minmax(0,1fr); gap:28px}
  .trois{grid-template-columns:minmax(0,1fr); gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .couche{transition:none}
  .liens-mods *, .liens-mods .lien-fil{animation:none !important}
  html.anime [data-revele]{opacity:1; transform:none}
}

/* ======== 25 oct. 2026 (midi), sa demande : UNE SEULE PAGE ========
   Accueil, Concept, Scénario, Aide à l'écriture, Travail en équipe, sécurité, Offres ; le menu fait défiler jusqu'à la
   partie (défilement doux, arrêt sous la barre fixe), la partie où l'on est s'allume ; Tutoriels et Contact sont des
   pages à part. */
.doc-section > .doc-tete{border-top:1px solid var(--ligne)}
.doc-section,.comparatif,.accueil{scroll-margin-top:var(--barre-h)}
.doc-fin-aide{padding:64px 0 88px}
.liens a.actif{color:var(--sarcelle2)}
.liens a{transition:color .2s}
/* (la barre fixe a disparu le 25 oct. au soir ; .bf-logo reste : le logo du menu des petits écrans) */
.bf-logo{display:flex; align-items:center; gap:10px; margin-right:auto; color:var(--encre); text-decoration:none; line-height:0}
.bf-logo .sym{height:38px; width:auto; overflow:visible}
.bf-logo .nom{height:14px; width:auto; overflow:visible}
.bf-logo *{animation:none !important}
/* « Menu » : quand les liens ne tiennent plus sur la barre */
.menu-bt{display:none; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border:1px solid var(--ligne2); border-radius:999px; background:var(--carte);
  color:var(--encre); font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.menu-bt svg{width:16px; height:16px}
.menu-bt:hover,.menu-bt[aria-expanded="true"]{border-color:var(--sarcelle)}
.menu-bt:focus-visible{outline:2px solid var(--sarcelle); outline-offset:2px}
/* le groupe (logo, sept liens, « Se connecter », « S'inscrire ») et FR / EN + thème : mesurés avec la police de son Mac
   (Avenir Next 15 px), ils tiennent sur une ligne au-dessus de 1400 px en français, 1290 px en anglais ; « Menu » prend le
   relais en dessous (rangée simple : logo à gauche, comptes, « Menu », FR / EN et thème à droite) ; .serre (landing.js)
   fait de même si la barre déborde quand même */
@media (max-width:1400px){html[lang="fr"] .liens{display:none} html[lang="fr"] .menu-bt{display:inline-flex} html[lang="fr"] .haut-in{display:flex; justify-content:space-between} html[lang="fr"] .haut-groupe{flex:1; justify-content:space-between}}
@media (max-width:1290px){.liens{display:none} .menu-bt{display:inline-flex} .haut-in{display:flex; justify-content:space-between} .haut-groupe{flex:1; justify-content:space-between}}
.haut.serre .liens{display:none}
.haut.serre .menu-bt{display:inline-flex}
.haut.serre .haut-in{display:flex; justify-content:space-between}
.haut.serre .haut-groupe{flex:1; justify-content:space-between}
html.menu-ouvert{overflow:hidden}
.menu-panneau{position:fixed; z-index:46; inset:0; overflow:auto; padding:0 20px 40px; background:var(--fond)}
.menu-tete{display:flex; align-items:center; justify-content:space-between; height:84px}
.menu-liens{display:flex; flex-direction:column}
.menu-liens a{padding:16px 2px; border-bottom:1px solid var(--ligne); font-size:22px; font-weight:300; color:var(--encre); text-decoration:none}
.menu-liens a.actif{color:var(--sarcelle2)}
.menu-liens a.connexion{margin-top:18px; border-bottom:0; font-size:17px; font-weight:600; color:var(--sarcelle2)}
.menu-liens a.menu-inscription{align-self:flex-start; margin:14px 0 0; height:42px; padding:0 20px; border-bottom:1px solid var(--sarcelle); font-size:16px; font-weight:600; color:var(--encre)}
/* tablette en hauteur et téléphone : « Se connecter » et « S'inscrire » passent dans le menu */
@media (max-width:720px){.haut-comptes{display:none}}
/* téléphone : le logo d'avant (il ne laisserait pas la place au bouton « Menu »), des écarts resserrés ; sous 360 px,
   « Menu » garde son icône seule (son nom reste lu par les lecteurs d'écran : aria-label) */
@media (max-width:480px){.haut-in{gap:12px} .haut-droite{gap:10px} .haut-groupe{gap:12px} .logo{gap:10px} .logo .sym{height:52px} .logo .nom{height:19px}
  .menu-bt{padding:0 12px 0 10px; gap:6px}}
/* (FR / EN reste à côté du thème au téléphone, sa demande) : sous 400 px, « Menu » en icône seule ; sous 341 px, le logo
   un peu plus petit */
@media (max-width:399px){.menu-bt span{display:none} .menu-bt{width:34px; height:34px; padding:0; justify-content:center}}
@media (max-width:360px){.haut-droite{gap:8px} .haut-outils{gap:6px}}   /* (avec une barre de défilement classique, 15 px de moins) */
@media (max-width:340px){.logo{gap:8px} .logo .sym{height:42px} .logo .nom{height:15px}}
/* Tutoriels et Contact : une page seule, un bloc centré */
.page-seule{padding-bottom:104px}
.page-seule .cta{margin-top:48px}
.page-retour{margin:28px 0 0; font-size:15.5px; line-height:1.6; color:var(--doux)}
.page-retour a{color:var(--sarcelle2)}
.btn-contour{display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1px solid var(--ligne2); border-radius:999px; color:var(--encre);
  font-weight:600; text-decoration:none; transition:border-color .2s}
.btn-contour:hover{border-color:var(--sarcelle); color:var(--encre)}
/* l'encadré de contact : la carte de papier de « Créez votre compte », les champs de « Contactez-nous » de l'app */
.contact-cadre{max-width:600px; margin:44px auto 0; text-align:left}
.contact-carte{padding:28px 28px 24px}
.contact .champ select,.contact .champ textarea{display:block; width:100%; margin:0; border-radius:10px; border:1px solid #d6ccba; background-color:#fffdf9; font-family:inherit;
  font-size:16px; color:#121316; outline:none; box-shadow:inset 0 1px 2px rgba(60,48,30,.06)}
.contact .champ select{height:46px; padding:0 40px 0 14px; -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f75' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px}
.contact .champ textarea{min-height:176px; padding:12px 14px; line-height:1.5; resize:vertical}
.contact .champ select:focus,.contact .champ textarea:focus{border-color:#1d7c8c; box-shadow:0 0 0 3px rgba(29,124,140,.2)}
.contact .champ textarea[aria-invalid=true]{border-color:#c44745; box-shadow:0 0 0 3px rgba(196,71,69,.13)}
.ct-aide{margin:0; font-size:12.5px; line-height:1.45; color:#5f6369}
.ct-note{margin:0; font-size:12.5px; line-height:1.45; color:#5f6369; text-align:center}
.ct-note a{color:#1d7c8c; text-underline-offset:2px}
.contact .btn-sombre{margin-top:4px}
.contact-carte .pret{align-items:flex-start; text-align:left}
@media (max-width:560px){.contact-carte{padding:22px 18px 18px}}

/* ======== 25 oct. 2026 (soir), ses retours sur la page unique ========
   SES RETOURS À LA LIGNE : br.saut, seulement là où chaque ligne tient entière (au-dessous, le texte coule normalement :
   l'espace avant chaque br.saut sépare alors les mots) ; .lignes : le paragraphe prend la largeur de ses lignes. */
.doc-p.lignes{max-width:none}
@media (max-width:1179px){ br.saut{display:none} }   /* dès 1180 px, la colonne de la page a toute sa largeur (1100 px) */
/* la colonne de texte de la partie Scénario garde sa largeur (440 px : la plus longue ligne du 03 en fait 433) dès qu'elle est à côté de sa démonstration */
@media (min-width:901px) and (max-width:1179px){ .sx-txt br.saut{display:inline} }
/* au-dessus des modules de l'accueil (25 oct. au soir, sa demande) : dans l'espace qui les sépare du titre, rien ne bouge */
.mods-aide{position:absolute; left:0; right:0; bottom:100%; margin:0 0 18px; font-size:14.5px; line-height:1.4; color:var(--doux); text-align:center}
/* « Le projet partagé » : ses lignes tiennent dans la colonne (la plus longue fait 458 px en 15 px) */
.ensemble{column-gap:40px}
.ens-i .doc-p{font-size:15px}
.ens-i > div{flex:1; min-width:0}
/* le titre long de l'aide à l'écriture : sur deux lignes équilibrées, un cran plus petit */
/* le texte du haut du Concept : sa première phrase sur une ligne */
.doc-chapo-large{max-width:46em}
@media (min-width:1001px){.doc-titre-long{font-size:54px}}   /* (25 oct. au soir : sans media, il gardait 54 px au téléphone et débordait) */
.doc-titre-long span{display:inline-block; max-width:21em}
/* « Le travail en équipe » : un chapitre comme les autres, ses points sous le titre */
.doc-bloc-equipe{padding-top:8px}
.doc-bloc-equipe .ensemble{margin-top:0}
@media (prefers-reduced-motion:reduce){ .fd-curseur{animation:none !important} }

/* ======== les questions fréquentes (25 oct. 2026 au soir) : après les offres, des volets qui s'ouvrent (details) ======== */
.faq{border-top:0}
.faq-liste{margin-top:34px; border-top:1px solid var(--ligne)}
.faq-q{border-bottom:1px solid var(--ligne)}
.faq-q summary{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 4px; cursor:pointer; list-style:none;
  font-size:19px; line-height:1.35; font-weight:600; color:var(--encre)}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary svg{flex:none; width:18px; height:18px; color:var(--gris); transition:transform .25s ease}
.faq-q[open] summary svg{transform:rotate(180deg)}
.faq-q summary:hover span{color:var(--sarcelle2)}
.faq-q summary:focus-visible{outline:2px solid var(--sarcelle); outline-offset:2px; border-radius:6px}
.faq-q .doc-p{margin:0 0 24px; padding:0 4px; max-width:46em}
.faq-fin{margin:28px 0 0; font-size:16px; color:var(--texte2)}
.faq-fin a{color:var(--sarcelle2); text-underline-offset:3px}
@media (max-width:560px){ .faq-q summary{font-size:17px; padding:18px 2px} }
@media (prefers-reduced-motion:reduce){ .faq-q summary svg{transition:none} }

/* ======== la langue (25 oct. 2026 au soir) : le bouton FR / EN, à gauche du bouton du thème ; dans le menu des petits écrans ======== */
.langue{position:relative; display:grid; place-items:center; flex:none; min-width:34px; height:34px; padding:0 8px; box-sizing:border-box; border:1px solid var(--ligne);
  border-radius:999px; background:var(--carte); color:var(--doux); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-decoration:none}
.langue:hover{color:var(--encre); border-color:var(--sarcelle)}
.langue:focus-visible{outline:2px solid var(--sarcelle); outline-offset:2px}


/* ======== 25 oct. 2026 au soir : la seconde phrase du Concept sur une seule ligne (sa demande), là où elle tient ======== */
@media (min-width:1180px){.une-ligne{white-space:nowrap}}
/* le titre de l'accueil sur un très petit téléphone (« au même endroit. » dépassait sous 340 px) */
@media (max-width:380px){.titre{font-size:33px}}

/* ---- « Ici, tout se tient » : la maquette Y10 (sync_y10.py) : six cartes, la même scène qui change partout à la fois ----
   Aucune animation d'opacité ni de transformation (calques Safari) ; les animations ne tournent que sous .joue (la bande
   à l'écran, landing.js) et s'arrêtent pendant qu'une fenêtre est ouverte. */
.y10-bande{max-width:1100px; margin:44px auto 0;
  --y10-titre:#8e959a; --y10-filet:#263036; --y10-carte:#141b1f; --y10-cadre:#263036;
  --y10-tn:#8e959a; --y10-ts:#c4cacd; --y10-tb:#d4d8db; --y10-tp:#a3aaae; --y10-clair:#f4f3ef; --y10-gris:#798287; --y10-pale:#566064;
  --y10-surf-b:#263036; --y10-surf:#182126; --y10-retrait-b:#1f282d; --y10-retrait:#151c20; --y10-pastille:#2a3439;
  --y10-page-b:#29343a; --y10-page:#192227; --y10-sep:#263036; --y10-sep2:#1d262b;
  --y10-barre:#2c363c; --y10-barre-p:#323d43; --y10-barre-r:#20292e; --y10-case-b:#2b353b; --y10-case:#182126; --y10-trait:#7a8388;
  --y10-puce-b:#2b353b; --y10-puce:#1a2328; --y10-bandeau-b:#222b30; --y10-bandeau:#182126;
  --y10-nuit:#22314a; --y10-jour:#74663f; --y10-ciel-nuit:#1c2a45; --y10-ciel-jour:#6a8390; --y10-lune:#e6e1d2; --y10-soleil:#f0c978;
  --y10-tu-b:#2b353b; --y10-tu:#c4cacd; --y10-tu-fond:#141b1f; --y10-tu-plein:#f4f3ef; --y10-charniere:rgba(4,7,9,.38);
  --y10-vf:#141b1f; --y10-vf-ombre:#0d1316; --y10-vl:#1f292e; --y10-curseur:#f4f3ef}
/* en clair : les écrans de l'app en clair (cartes claires sur le fond de la page, surfaces blanches) */
html[data-theme="light"] .y10-bande{
  --y10-titre:#6b7378; --y10-filet:#d3d9dd; --y10-carte:#f7f8f9; --y10-cadre:#dbe0e3;
  --y10-tn:#6f777c; --y10-ts:#3d464b; --y10-tb:#232a2e; --y10-tp:#5c656a; --y10-clair:#1b2125; --y10-gris:#7b8489; --y10-pale:#a6aeb2;
  --y10-surf-b:#e1e6e9; --y10-surf:#ffffff; --y10-retrait-b:#e8ebed; --y10-retrait:#fbfcfc; --y10-pastille:#e0e5e8;
  --y10-page-b:#e1e6e9; --y10-page:#ffffff; --y10-sep:#e1e6e9; --y10-sep2:#edf0f2;
  --y10-barre:#dde2e5; --y10-barre-p:#d0d7db; --y10-barre-r:#eaedef; --y10-case-b:#dfe4e7; --y10-case:#ffffff; --y10-trait:#8a9398;
  --y10-puce-b:#dfe4e7; --y10-puce:#ffffff; --y10-bandeau-b:#e3e7ea; --y10-bandeau:#ffffff;
  --y10-nuit:#d6deec; --y10-jour:#f4e5b8; --y10-ciel-nuit:#cfd9eb; --y10-ciel-jour:#e3eef3; --y10-lune:#7c879f; --y10-soleil:#df9f32;
  --y10-tu-b:#d0d7db; --y10-tu:#3d464b; --y10-tu-fond:#ffffff; --y10-tu-plein:#1b2125; --y10-charniere:rgba(4,7,9,.1);
  --y10-vf:#ffffff; --y10-vf-ombre:#dce2e5; --y10-vl:#eef4f7; --y10-curseur:#1b2125}
.y10-titre{display:flex; align-items:center; gap:24px; margin:0 0 26px; font-size:10.5px; line-height:15px; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--y10-titre); white-space:nowrap}
.y10-titre::before,.y10-titre::after{content:""; flex:1; height:1px; background:var(--y10-filet)}
.y10-cartes{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 10px}
.y10-cadre-c{flex:none; width:175px; height:160px}
.y10-c{position:relative; width:175px; height:160px; border-radius:8px; background:var(--y10-carte); transform-origin:0 0}
.y10-c > span, .y10-c > svg{position:absolute; display:block}
.y10-ic{width:11px; height:11px; fill:none; stroke:var(--c)}
.y10-c .t{white-space:nowrap}
.y10-c .tn{font-size:8.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--y10-tn)}
.y10-c .ts{font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--y10-ts)}
.y10-c .tb{font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--y10-tb)}
.y10-c .tp{font-size:8px; font-weight:600; letter-spacing:.08em; color:var(--y10-tp)}
.y10-c .tp.fort{color:var(--y10-tb)}
.y10-c .clair{color:var(--y10-clair)}
.y10-c .gris{color:var(--y10-gris)}
.y10-c .pale{color:var(--y10-pale)}
.y10-filet{background:color-mix(in srgb, var(--c) 75%, transparent)}
.y10-surf{box-sizing:border-box; border:1px solid var(--y10-surf-b); background:var(--y10-surf)}
.y10-surf.y10-retrait{border-color:var(--y10-retrait-b); background:var(--y10-retrait)}
.y10-pastille{border-radius:1.5px; background:var(--y10-pastille)}
.y10-page{box-sizing:border-box; border:1px solid var(--y10-page-b); background:var(--y10-page)}
.y10-sep{background:var(--y10-sep)}
.y10-sep2{background:var(--y10-sep2)}
.y10-barre{border-radius:1.5px; background:var(--y10-barre)}
.y10-barre.p{background:var(--y10-barre-p)}
.y10-barre.r{background:var(--y10-barre-r)}
.y10-case{box-sizing:border-box; border:1px solid var(--y10-case-b); background:var(--y10-case)}
.y10-sv{overflow:hidden; fill:none; stroke:var(--y10-trait); stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
.y10-puce{box-sizing:border-box; border:1px solid var(--y10-puce-b); background:var(--y10-puce)}
.y10-point{border-radius:50%}
.y10-bandeau{box-sizing:border-box; border:1px solid var(--y10-bandeau-b); background:var(--y10-bandeau)}
.y10-teinte{background:var(--y10-nuit)}
.y10-ciel{background:var(--y10-ciel-nuit)}
.y10-lune, .y10-soleil{margin-top:0}
.y10-lune svg, .y10-soleil svg{display:block}
.y10-lune{color:var(--y10-lune)}
.y10-soleil{color:transparent; margin-top:1.5px}
.y10-cadre{box-sizing:border-box; border:1px solid var(--y10-cadre); border-radius:8px}
.y10-eclat{box-sizing:border-box; border:1px solid transparent; border-radius:8px}
/* la palette à volets : deux volets de 8 px, une charnière, le mot posé à gauche (là où le curseur écrit) */
.y10p{width:44px; height:16px; border:1px solid var(--y10-tu-b); border-radius:3px; background:var(--y10-tu-fond); color:var(--y10-tu)}
.y10p .fen{position:absolute; inset:0; overflow:hidden; border-radius:2px}
.y10p .fen::after{content:""; position:absolute; left:0; right:0; top:8px; height:1px; background:var(--y10-charniere)}
.y10p .dm{position:absolute; left:0; right:0; height:8px; overflow:hidden}
.y10p .dm.h{top:0; border-radius:2px 2px 0 0}
.y10p .dm.b{top:8px; border-radius:0 0 2px 2px}
.y10p .dm > span{position:absolute; left:5px; top:0.37px; font-size:10px; font-weight:700; letter-spacing:0.12em;
  line-height:16px; font-kerning:none; white-space:nowrap}
.y10p .dm.b > span{top:-7.63px}
.y10p .vf, .y10p .vl{visibility:hidden; background:var(--y10-vf)}
.y10p .w.j, .y10p .ws.j .c{visibility:hidden}
.y10p .ca{position:absolute; left:4.25px; top:2px; width:1.5px; height:12px; border-radius:1px; background:var(--y10-curseur); visibility:hidden}
body.recul .y10-bande *{animation-play-state:paused}
@media (max-width:640px){   /* le titre passe à la ligne, sans ses filets */
  .y10-titre{white-space:normal; justify-content:center; text-align:center; line-height:1.5}
  .y10-titre::before,.y10-titre::after{display:none}
}
@media (max-width:420px){   /* deux cartes par rangée au téléphone : un peu réduites (sans animation) */
  .y10-cartes{gap:10px 8px}
  .y10-cadre-c{width:164.5px; height:150.4px}
  .y10-c{transform:scale(.94)}
}
.y10-bande.joue .y10p .vf.fa{animation:y10s-vf-a 13s linear infinite}
.y10-bande.joue .y10p .vl.fa{animation:y10s-vl-a 13s linear infinite}
.y10-bande.joue .y10p .vf.fb{animation:y10s-vf-b 13s linear infinite}
.y10-bande.joue .y10p .vl.fb{animation:y10s-vl-b 13s linear infinite}
.y10-bande.joue .y10-c.r-ff .y10-eclat{animation:y10s-ec-ff 13s linear infinite}
.y10-bande.joue .y10p.r-ff{animation:y10s-tu-ff 13s linear infinite}
.y10-bande.joue .y10p.r-ff .dm.h .w.n{animation:y10s-ff-hn 13s linear infinite}
.y10-bande.joue .y10p.r-ff .dm.h .w.j{animation:y10s-ff-hj 13s linear infinite}
.y10-bande.joue .y10p.r-ff .dm.b .w.n{animation:y10s-ff-bn 13s linear infinite}
.y10-bande.joue .y10p.r-ff .dm.b .w.j{animation:y10s-ff-bj 13s linear infinite}
.y10-bande.joue .y10-c.r-fs .y10-eclat{animation:y10s-ec-fs 13s linear infinite}
.y10-bande.joue .y10p.r-fs{animation:y10s-tu-fs 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.n .c0{animation:y10s-fs-hn0 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.n .c1{animation:y10s-fs-hn1 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.n .c2{animation:y10s-fs-hn2 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.n .c3{animation:y10s-fs-hn3 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.j .c0{animation:y10s-fs-hj0 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.j .c1{animation:y10s-fs-hj1 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.j .c2{animation:y10s-fs-hj2 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.h .ws.j .c3{animation:y10s-fs-hj3 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.n .c0{animation:y10s-fs-bn0 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.n .c1{animation:y10s-fs-bn1 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.n .c2{animation:y10s-fs-bn2 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.n .c3{animation:y10s-fs-bn3 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.j .c0{animation:y10s-fs-bj0 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.j .c1{animation:y10s-fs-bj1 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.j .c2{animation:y10s-fs-bj2 13s linear infinite}
.y10-bande.joue .y10p.r-fs .dm.b .ws.j .c3{animation:y10s-fs-bj3 13s linear infinite}
.y10-bande.joue .y10p.r-fs .ca{animation:y10s-ca-fs 13s linear infinite}
.y10-bande.joue .y10-c.r-sf .y10-eclat{animation:y10s-ec-sf 13s linear infinite}
.y10-bande.joue .y10p.r-sf{animation:y10s-tu-sf 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.n .c0{animation:y10s-sf-hn0 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.n .c1{animation:y10s-sf-hn1 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.n .c2{animation:y10s-sf-hn2 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.n .c3{animation:y10s-sf-hn3 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.j .c0{animation:y10s-sf-hj0 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.j .c1{animation:y10s-sf-hj1 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.j .c2{animation:y10s-sf-hj2 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.h .ws.j .c3{animation:y10s-sf-hj3 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.n .c0{animation:y10s-sf-bn0 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.n .c1{animation:y10s-sf-bn1 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.n .c2{animation:y10s-sf-bn2 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.n .c3{animation:y10s-sf-bn3 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.j .c0{animation:y10s-sf-bj0 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.j .c1{animation:y10s-sf-bj1 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.j .c2{animation:y10s-sf-bj2 13s linear infinite}
.y10-bande.joue .y10p.r-sf .dm.b .ws.j .c3{animation:y10s-sf-bj3 13s linear infinite}
.y10-bande.joue .y10p.r-sf .ca{animation:y10s-ca-sf 13s linear infinite}
.y10-bande.joue .y10-teinte{animation:y10s-teinte 13s linear infinite}
.y10-bande.joue .y10-ciel{animation:y10s-ciel 13s linear infinite}
.y10-bande.joue .y10-lune{animation:y10s-lune 13s linear infinite}
.y10-bande.joue .y10-soleil{animation:y10s-soleil 13s linear infinite}
@keyframes y10s-vf-a{0%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 22.4615%{visibility:visible;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:cubic-bezier(.55,0,.9,.45)} 23.5385%{visibility:visible;clip-path:inset(100% 0 0 0);background-color:var(--y10-vf-ombre);animation-timing-function:step-end} 23.6308%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 100%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf)}}
@keyframes y10s-vl-a{0%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:step-end} 23.6308%{visibility:visible;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:cubic-bezier(.15,.75,.35,1)} 24.9231%{visibility:visible;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 25.0154%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:step-end} 100%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl)}}
@keyframes y10s-vf-b{0%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 72.4615%{visibility:visible;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:cubic-bezier(.55,0,.9,.45)} 73.5385%{visibility:visible;clip-path:inset(100% 0 0 0);background-color:var(--y10-vf-ombre);animation-timing-function:step-end} 73.6308%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 100%{visibility:hidden;clip-path:inset(0 0 0 0);background-color:var(--y10-vf)}}
@keyframes y10s-vl-b{0%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:step-end} 73.6308%{visibility:visible;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:cubic-bezier(.15,.75,.35,1)} 74.9231%{visibility:visible;clip-path:inset(0 0 0 0);background-color:var(--y10-vf);animation-timing-function:step-end} 75.0154%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl);animation-timing-function:step-end} 100%{visibility:hidden;clip-path:inset(0 0 100% 0);background-color:var(--y10-vl)}}
@keyframes y10s-ec-ff{0%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 22.4615%{border-color:transparent;background-color:transparent;animation-timing-function:ease-out} 23.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 25.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 34.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 72.4615%{border-color:transparent;background-color:transparent;animation-timing-function:ease-out} 73.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 75.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 84.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 100%{border-color:transparent;background-color:transparent}}
@keyframes y10s-tu-ff{0%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 22.4615%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:ease-out} 23.2308%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 25.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 34.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 72.4615%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:ease-out} 73.2308%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 75.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 84.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 100%{border-color:var(--y10-tu-b);color:var(--y10-tu)}}
@keyframes y10s-ff-hn{0%{visibility:visible;animation-timing-function:step-end} 22.4615%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-ff-hj{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 72.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-ff-bn{0%{visibility:visible;animation-timing-function:step-end} 24.9231%{visibility:hidden;animation-timing-function:step-end} 74.9231%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-ff-bj{0%{visibility:hidden;animation-timing-function:step-end} 24.9231%{visibility:visible;animation-timing-function:step-end} 74.9231%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-ec-fs{0%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 22.4615%{border-color:transparent;background-color:transparent;animation-timing-function:ease-out} 23.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 25.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 34.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 55.3846%{border-color:transparent;background-color:transparent;animation-timing-function:ease} 57.3077%{border-color:color-mix(in srgb, var(--c) 50%, transparent);background-color:color-mix(in srgb, var(--c) 3%, transparent);animation-timing-function:step-end} 72.4615%{border-color:color-mix(in srgb, var(--c) 50%, transparent);background-color:color-mix(in srgb, var(--c) 3%, transparent);animation-timing-function:ease-out} 73.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 75.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 84.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 100%{border-color:transparent;background-color:transparent}}
@keyframes y10s-tu-fs{0%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 22.4615%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:ease-out} 23.2308%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 25.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 34.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 55.3846%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 75.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 84.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 100%{border-color:var(--y10-tu-b);color:var(--y10-tu)}}
@keyframes y10s-fs-hn0{0%{visibility:visible;animation-timing-function:step-end} 22.4615%{visibility:hidden;animation-timing-function:step-end} 68.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-hn1{0%{visibility:visible;animation-timing-function:step-end} 22.4615%{visibility:hidden;animation-timing-function:step-end} 69.7692%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-hn2{0%{visibility:visible;animation-timing-function:step-end} 22.4615%{visibility:hidden;animation-timing-function:step-end} 71%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-hn3{0%{visibility:visible;animation-timing-function:step-end} 22.4615%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-hj0{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 65.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-hj1{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 64.5385%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-hj2{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 63.6154%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-hj3{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 62.6923%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-bn0{0%{visibility:visible;animation-timing-function:step-end} 24.9231%{visibility:hidden;animation-timing-function:step-end} 68.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-bn1{0%{visibility:visible;animation-timing-function:step-end} 24.9231%{visibility:hidden;animation-timing-function:step-end} 69.7692%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-bn2{0%{visibility:visible;animation-timing-function:step-end} 24.9231%{visibility:hidden;animation-timing-function:step-end} 71%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-bn3{0%{visibility:visible;animation-timing-function:step-end} 24.9231%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-fs-bj0{0%{visibility:hidden;animation-timing-function:step-end} 24.9231%{visibility:visible;animation-timing-function:step-end} 65.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-bj1{0%{visibility:hidden;animation-timing-function:step-end} 24.9231%{visibility:visible;animation-timing-function:step-end} 64.5385%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-bj2{0%{visibility:hidden;animation-timing-function:step-end} 24.9231%{visibility:visible;animation-timing-function:step-end} 63.6154%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-fs-bj3{0%{visibility:hidden;animation-timing-function:step-end} 24.9231%{visibility:visible;animation-timing-function:step-end} 62.6923%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-ca-fs{0%{visibility:hidden;left:36.86px;animation-timing-function:step-end} 55.3846%{visibility:visible;left:36.86px;animation-timing-function:step-end} 58.8462%{visibility:hidden;left:36.86px;animation-timing-function:step-end} 61.1538%{visibility:visible;left:36.86px;animation-timing-function:step-end} 62.6923%{visibility:visible;left:29.03px;animation-timing-function:step-end} 63.6154%{visibility:visible;left:20.45px;animation-timing-function:step-end} 64.5385%{visibility:visible;left:10.74px;animation-timing-function:step-end} 65.4615%{visibility:visible;left:4.25px;animation-timing-function:step-end} 68.4615%{visibility:visible;left:13.35px;animation-timing-function:step-end} 69.7692%{visibility:visible;left:21.93px;animation-timing-function:step-end} 71%{visibility:visible;left:26.31px;animation-timing-function:step-end} 72.4615%{visibility:visible;left:33.32px;animation-timing-function:step-end} 76.5385%{visibility:hidden;left:33.32px;animation-timing-function:step-end} 78.8462%{visibility:visible;left:33.32px;animation-timing-function:step-end} 81.9231%{visibility:hidden;left:33.32px;animation-timing-function:step-end} 83.4615%{visibility:hidden;left:36.86px;animation-timing-function:step-end} 100%{visibility:hidden;left:36.86px}}
@keyframes y10s-ec-sf{0%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 5.3846%{border-color:transparent;background-color:transparent;animation-timing-function:ease} 7.3077%{border-color:color-mix(in srgb, var(--c) 50%, transparent);background-color:color-mix(in srgb, var(--c) 3%, transparent);animation-timing-function:step-end} 22.4615%{border-color:color-mix(in srgb, var(--c) 50%, transparent);background-color:color-mix(in srgb, var(--c) 3%, transparent);animation-timing-function:ease-out} 23.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 25.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 34.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 72.4615%{border-color:transparent;background-color:transparent;animation-timing-function:ease-out} 73.5385%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:step-end} 75.8462%{border-color:var(--c);background-color:color-mix(in srgb, var(--c) 7%, transparent);animation-timing-function:ease-in-out} 84.3077%{border-color:transparent;background-color:transparent;animation-timing-function:step-end} 100%{border-color:transparent;background-color:transparent}}
@keyframes y10s-tu-sf{0%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 5.3846%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 25.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 34.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 72.4615%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:ease-out} 73.2308%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:step-end} 75.8462%{border-color:var(--c);color:var(--y10-tu-plein);animation-timing-function:ease-in-out} 84.3077%{border-color:var(--y10-tu-b);color:var(--y10-tu);animation-timing-function:step-end} 100%{border-color:var(--y10-tu-b);color:var(--y10-tu)}}
@keyframes y10s-sf-hn0{0%{visibility:visible;animation-timing-function:step-end} 15.4615%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-hn1{0%{visibility:visible;animation-timing-function:step-end} 14.5385%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-hn2{0%{visibility:visible;animation-timing-function:step-end} 13.6154%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-hn3{0%{visibility:visible;animation-timing-function:step-end} 12.6923%{visibility:hidden;animation-timing-function:step-end} 72.4615%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-hj0{0%{visibility:hidden;animation-timing-function:step-end} 18.4615%{visibility:visible;animation-timing-function:step-end} 72.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-hj1{0%{visibility:hidden;animation-timing-function:step-end} 19.7692%{visibility:visible;animation-timing-function:step-end} 72.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-hj2{0%{visibility:hidden;animation-timing-function:step-end} 21%{visibility:visible;animation-timing-function:step-end} 72.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-hj3{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 72.4615%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-bn0{0%{visibility:visible;animation-timing-function:step-end} 15.4615%{visibility:hidden;animation-timing-function:step-end} 74.9231%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-bn1{0%{visibility:visible;animation-timing-function:step-end} 14.5385%{visibility:hidden;animation-timing-function:step-end} 74.9231%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-bn2{0%{visibility:visible;animation-timing-function:step-end} 13.6154%{visibility:hidden;animation-timing-function:step-end} 74.9231%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-bn3{0%{visibility:visible;animation-timing-function:step-end} 12.6923%{visibility:hidden;animation-timing-function:step-end} 74.9231%{visibility:visible;animation-timing-function:step-end} 100%{visibility:visible}}
@keyframes y10s-sf-bj0{0%{visibility:hidden;animation-timing-function:step-end} 18.4615%{visibility:visible;animation-timing-function:step-end} 74.9231%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-bj1{0%{visibility:hidden;animation-timing-function:step-end} 19.7692%{visibility:visible;animation-timing-function:step-end} 74.9231%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-bj2{0%{visibility:hidden;animation-timing-function:step-end} 21%{visibility:visible;animation-timing-function:step-end} 74.9231%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-sf-bj3{0%{visibility:hidden;animation-timing-function:step-end} 22.4615%{visibility:visible;animation-timing-function:step-end} 74.9231%{visibility:hidden;animation-timing-function:step-end} 100%{visibility:hidden}}
@keyframes y10s-ca-sf{0%{visibility:hidden;left:33.32px;animation-timing-function:step-end} 5.3846%{visibility:visible;left:33.32px;animation-timing-function:step-end} 8.8462%{visibility:hidden;left:33.32px;animation-timing-function:step-end} 11.1538%{visibility:visible;left:33.32px;animation-timing-function:step-end} 12.6923%{visibility:visible;left:26.31px;animation-timing-function:step-end} 13.6154%{visibility:visible;left:21.93px;animation-timing-function:step-end} 14.5385%{visibility:visible;left:13.35px;animation-timing-function:step-end} 15.4615%{visibility:visible;left:4.25px;animation-timing-function:step-end} 18.4615%{visibility:visible;left:10.74px;animation-timing-function:step-end} 19.7692%{visibility:visible;left:20.45px;animation-timing-function:step-end} 21%{visibility:visible;left:29.03px;animation-timing-function:step-end} 22.4615%{visibility:visible;left:36.86px;animation-timing-function:step-end} 26.5385%{visibility:hidden;left:36.86px;animation-timing-function:step-end} 28.8462%{visibility:visible;left:36.86px;animation-timing-function:step-end} 31.9231%{visibility:hidden;left:36.86px;animation-timing-function:step-end} 33.4615%{visibility:hidden;left:33.32px;animation-timing-function:step-end} 100%{visibility:hidden;left:33.32px}}
@keyframes y10s-teinte{0%{background-color:var(--y10-nuit);animation-timing-function:step-end} 22.4615%{background-color:var(--y10-nuit);animation-timing-function:ease-in-out} 25.2308%{background-color:var(--y10-jour);animation-timing-function:step-end} 72.4615%{background-color:var(--y10-jour);animation-timing-function:ease-in-out} 75.2308%{background-color:var(--y10-nuit);animation-timing-function:step-end} 100%{background-color:var(--y10-nuit)}}
@keyframes y10s-ciel{0%{background-color:var(--y10-ciel-nuit);animation-timing-function:step-end} 22.4615%{background-color:var(--y10-ciel-nuit);animation-timing-function:ease-in-out} 25.2308%{background-color:var(--y10-ciel-jour);animation-timing-function:step-end} 72.4615%{background-color:var(--y10-ciel-jour);animation-timing-function:ease-in-out} 75.2308%{background-color:var(--y10-ciel-nuit);animation-timing-function:step-end} 100%{background-color:var(--y10-ciel-nuit)}}
@keyframes y10s-lune{0%{color:var(--y10-lune);margin-top:0px;animation-timing-function:step-end} 22.4615%{color:var(--y10-lune);margin-top:0px;animation-timing-function:ease-in-out} 25.2308%{color:color-mix(in srgb, var(--y10-lune) 0%, transparent);margin-top:1.5px;animation-timing-function:step-end} 72.4615%{color:color-mix(in srgb, var(--y10-lune) 0%, transparent);margin-top:1.5px;animation-timing-function:ease-in-out} 75.2308%{color:var(--y10-lune);margin-top:0px;animation-timing-function:step-end} 100%{color:var(--y10-lune);margin-top:0px}}
@keyframes y10s-soleil{0%{color:color-mix(in srgb, var(--y10-soleil) 0%, transparent);margin-top:1.5px;animation-timing-function:step-end} 22.4615%{color:color-mix(in srgb, var(--y10-soleil) 0%, transparent);margin-top:1.5px;animation-timing-function:ease-in-out} 25.2308%{color:var(--y10-soleil);margin-top:0px;animation-timing-function:step-end} 72.4615%{color:var(--y10-soleil);margin-top:0px;animation-timing-function:ease-in-out} 75.2308%{color:color-mix(in srgb, var(--y10-soleil) 0%, transparent);margin-top:1.5px;animation-timing-function:step-end} 100%{color:color-mix(in srgb, var(--y10-soleil) 0%, transparent);margin-top:1.5px}}
@media (prefers-reduced-motion: reduce){ .y10-bande *{animation:none !important} }

/* ---- Courier Prime, la police des pages de scénario (25 oct. 2026 : la partie Scénario) : les fichiers de l'app
   (assets/fonts, latin), licence SIL Open Font License ---- */
@font-face{font-family:'Courier Prime'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/courier-prime-400.woff2') format('woff2')}
@font-face{font-family:'Courier Prime'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/courier-prime-700.woff2') format('woff2')}

/* ======== La section Scénario (25 oct. 2026, maquette A choisie, scenario_section.py) ======== */
.sx{--sx-app:#0f1116; --sx-barre:#12161b; --sx-bord:#283238; --sx-trait:#1d242a; --sx-page:#1b1e25; --sx-encre:#e9ecf3; --sx-num:#6b7384;
  --sx-carte:#141b1f; --sx-texte:#d4d8db; --sx-gris:#8e959a; --sx-ligne2:#3a464d; --sx-champ:#1e262c; --sx-bleue:#1c2433;
  --sx-ombre:0 30px 60px -30px rgba(0,0,0,.85); --sx-ombre-page:0 2px 22px rgba(0,0,0,.5); --sx-accent:#f6a243; --sx-sur-accent:#16191d; --sx-accent-encre:#f6a243;
  --sx-sarcelle:#4fbccb; --sx-marque:rgba(79,188,203,.24)}
html[data-theme="light"] .sx{--sx-app:#e4e7ec; --sx-barre:#f7f8f9; --sx-bord:#d5d9de; --sx-trait:#e1e4e8; --sx-page:#ffffff; --sx-encre:#111318;
  --sx-num:#7c8294; --sx-carte:#ffffff; --sx-texte:#2c2e33; --sx-gris:#5f6369; --sx-ligne2:#c6cbcf; --sx-champ:#eef0f2; --sx-bleue:#dde9fb;
  --sx-ombre:0 26px 50px -30px rgba(16,22,26,.36); --sx-ombre-page:0 2px 18px rgba(0,0,0,.14); --sx-sarcelle:#1d7c8c; --sx-marque:rgba(29,124,140,.18);
  --sx-accent-encre:#a85a14}
.sx-tete{padding-bottom:64px}
.sx-tete .puce{margin-bottom:22px}
.sx-rang{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:center; padding:76px 0; border-top:1px solid var(--ligne)}
.sx-rang.inverse{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.sx-rang.inverse .sx-txt{order:2}
.sx-num{margin:0; font-size:12px; font-weight:650; letter-spacing:.16em; color:var(--gris); font-variant-numeric:tabular-nums}
.sx-txt .doc-h2{margin-top:14px}
.sx-txt .mod-offre{margin-top:18px}
.sx-txt .doc-note a{color:inherit}
@media (max-width:900px){.sx-rang,.sx-rang.inverse{grid-template-columns:minmax(0,1fr); gap:32px} .sx-rang.inverse .sx-txt{order:0}}
/* la démonstration : 648 × 430, mise à l'échelle de sa colonne par landing.js (--k) */
.sx-demo{position:relative; height:calc(430px * var(--k, 1))}
@media (max-width:1240px){.sx-demo{--k:.86}}
@media (max-width:1060px){.sx-demo{--k:.78}}
@media (max-width:900px){.sx-demo{--k:1}}
@media (max-width:700px){.sx-demo{--k:.72}}
@media (max-width:480px){.sx-demo{--k:.52}}
.sx-fen{position:absolute; left:0; top:0; width:648px; height:430px; transform:scale(var(--k, 1)); transform-origin:0 0; border-radius:14px;
  border:1px solid var(--sx-bord); background:var(--sx-app); overflow:hidden; box-shadow:var(--sx-ombre); color:var(--sx-texte); font-size:12px; line-height:1.4}
.sx-demo:not(.joue) *, .sx-demo:not(.joue) *::before, body.recul .sx-demo *, body.recul .sx-demo *::before{animation-play-state:paused !important}
.sx-barre{position:relative; display:flex; align-items:center; gap:6px; height:48px; padding:0 14px; border-bottom:1px solid var(--sx-trait); background:var(--sx-barre)}
.sx-info{margin-right:auto; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-gris); white-space:nowrap}
.sx-pil{font-size:11px; font-weight:600; letter-spacing:.04em; padding:7px 11px; border-radius:8px; color:var(--sx-gris); border:1px solid transparent; white-space:nowrap}
.sx-pil.cadre{border-color:var(--sx-ligne2)}
.sx-page{position:relative; background:var(--sx-page); color:var(--sx-encre); font-family:'Courier Prime','Courier New',Courier,monospace;
  box-shadow:var(--sx-ombre-page)}
.sx-el{position:relative; white-space:pre}
.sx-slug{font-weight:700; text-transform:uppercase}
.sx-slug .sx-tx,.sx-slug .sx-tape{text-decoration:underline; text-underline-offset:2px}
.sx-no{position:absolute; top:0; text-align:right; color:var(--sx-num); font-weight:700; text-decoration:none}
.sx-perso{text-transform:uppercase}
.sx-trans{text-align:right; text-transform:uppercase}
.sx-ligne{display:block; white-space:pre}
.sx-tape{display:inline-block; box-sizing:content-box; vertical-align:top; overflow:hidden; white-space:pre; border-right:2px solid transparent;
  margin-right:-2px; padding-bottom:3px; margin-bottom:-3px}
.sx-carton{padding:7px 9px; border:1px solid var(--sx-ligne2); border-radius:8px; background:var(--sx-carte); color:var(--sx-texte); white-space:nowrap}
.sx-lib{margin:0 0 6px; font-size:10px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-gris)}
@media (prefers-reduced-motion:reduce){.sx-demo *, .sx-demo *::before{animation:none !important}}

.sx-v1 .sx-zone{position:absolute; inset:48px 0 0 0; display:flex; justify-content:center; padding-top:22px}
.sx-v1 .sx-page{width:540px; min-height:520px; padding:30px 34px 30px 66px; font-size:13px; line-height:13px}
.sx-v1 .sx-el + .sx-el{margin-top:13px}
.sx-v1 .sx-perso + .sx-dial{margin-top:0}
.sx-v1 .sx-no{left:-52px; width:36px}
.sx-v1 .sx-perso{padding-left:171px}
.sx-v1 .sx-dial{padding-left:78px; padding-right:78px}
.sx-v1 .sx-touche{margin-left:auto; font-size:11px; font-weight:600; padding:7px 11px; border-radius:7px; border:1px solid var(--sx-ligne2); color:var(--sx-gris);
  box-shadow:inset 0 -2px 0 var(--sx-trait)}
.sx-tp1{width:19ch} .sx-tp2{width:3ch} .sx-tp3{width:9ch} .sx-tp4{width:10ch} .sx-tp5{width:16ch}
@keyframes sx1-fond{0%{opacity:1}90.833%{opacity:1}96.667%{opacity:0}100%{opacity:0}}
.sx-v1 .sx-contenu{animation:sx1-fond 12s linear infinite}
@keyframes sx1-t1{0%{width:0;border-right-color:transparent}0.833%{width:0;border-right-color:transparent}1.25%{width:0;border-right-color:#f6a243}4.167%{width:0;border-right-color:#f6a243;animation-timing-function:steps(19,end)}17.361%{width:19ch;border-right-color:#f6a243}21.528%{width:19ch;border-right-color:#f6a243}21.944%{width:19ch;border-right-color:transparent}100%{width:19ch;border-right-color:transparent}}
.sx-v1 .sx-tp1{animation:sx1-t1 12s linear infinite}
@keyframes sx1-a1{0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}20%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);animation-timing-function:steps(54,end)}27.5%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
.sx-v1 .sx-a1{animation:sx1-a1 12s linear infinite}
@keyframes sx1-a2{0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}27.5%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);animation-timing-function:steps(13,end)}29.306%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
.sx-v1 .sx-a2{animation:sx1-a2 12s linear infinite}
@keyframes sx1-t2{0%{width:0;border-right-color:transparent}30%{width:0;border-right-color:transparent}30.417%{width:0;border-right-color:#f6a243}33.333%{width:0;border-right-color:#f6a243;animation-timing-function:steps(3,end)}35.833%{width:3ch;border-right-color:#f6a243}40%{width:3ch;border-right-color:#f6a243}40.417%{width:3ch;border-right-color:transparent}100%{width:3ch;border-right-color:transparent}}
.sx-v1 .sx-tp2{animation:sx1-t2 12s linear infinite}
@keyframes sx1-t3{0%{width:0;border-right-color:transparent}35%{width:0;border-right-color:transparent}35.417%{width:0;border-right-color:#f6a243}38.333%{width:0;border-right-color:#f6a243;animation-timing-function:steps(9,end)}45.152%{width:9ch;border-right-color:#f6a243}49.318%{width:9ch;border-right-color:#f6a243}49.735%{width:9ch;border-right-color:transparent}100%{width:9ch;border-right-color:transparent}}
.sx-v1 .sx-tp3{animation:sx1-t3 12s linear infinite}
@keyframes sx1-t4{0%{width:0;border-right-color:transparent}46.667%{width:0;border-right-color:transparent}47.083%{width:0;border-right-color:#f6a243}50%{width:0;border-right-color:#f6a243;animation-timing-function:steps(10,end)}57.576%{width:10ch;border-right-color:#f6a243}61.742%{width:10ch;border-right-color:#f6a243}62.159%{width:10ch;border-right-color:transparent}100%{width:10ch;border-right-color:transparent}}
.sx-v1 .sx-tp4{animation:sx1-t4 12s linear infinite}
@keyframes sx1-t5{0%{width:0;border-right-color:transparent}57.5%{width:0;border-right-color:transparent}57.917%{width:0;border-right-color:#f6a243}60.833%{width:0;border-right-color:#f6a243;animation-timing-function:steps(16,end)}72.955%{width:16ch;border-right-color:#f6a243}77.121%{width:16ch;border-right-color:#f6a243}77.538%{width:16ch;border-right-color:transparent}100%{width:16ch;border-right-color:transparent}}
.sx-v1 .sx-tp5{animation:sx1-t5 12s linear infinite}
@keyframes sx1-t6{0%{opacity:0}77.5%{opacity:0}81.25%{opacity:1}100%{opacity:1}}
.sx-v1 .sx-tp6{animation:sx1-t6 12s linear infinite}
@keyframes sx1-scene{0%{background:transparent;color:var(--sx-gris)}1.667%{background:transparent;color:var(--sx-gris)}2.5%{background:var(--sx-accent);color:var(--sx-sur-accent)}19.167%{background:var(--sx-accent);color:var(--sx-sur-accent)}20%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v1 .sx-ty-scene{animation:sx1-scene 12s linear infinite}
@keyframes sx1-action{0%{background:transparent;color:var(--sx-gris)}18.333%{background:transparent;color:var(--sx-gris)}19.167%{background:var(--sx-accent);color:var(--sx-sur-accent)}31.667%{background:var(--sx-accent);color:var(--sx-sur-accent)}32.5%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v1 .sx-ty-action{animation:sx1-action 12s linear infinite}
@keyframes sx1-perso{0%{background:transparent;color:var(--sx-gris)}31.25%{background:transparent;color:var(--sx-gris)}32.083%{background:var(--sx-accent);color:var(--sx-sur-accent)}37.083%{background:var(--sx-accent);color:var(--sx-sur-accent)}37.917%{background:transparent;color:var(--sx-gris)}47.5%{background:transparent;color:var(--sx-gris)}48.333%{background:var(--sx-accent);color:var(--sx-sur-accent)}59.167%{background:var(--sx-accent);color:var(--sx-sur-accent)}60%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v1 .sx-ty-perso{animation:sx1-perso 12s linear infinite}
@keyframes sx1-dial{0%{background:transparent;color:var(--sx-gris)}36.667%{background:transparent;color:var(--sx-gris)}37.5%{background:var(--sx-accent);color:var(--sx-sur-accent)}47.917%{background:var(--sx-accent);color:var(--sx-sur-accent)}48.75%{background:transparent;color:var(--sx-gris)}58.75%{background:transparent;color:var(--sx-gris)}59.583%{background:var(--sx-accent);color:var(--sx-sur-accent)}75.417%{background:var(--sx-accent);color:var(--sx-sur-accent)}76.25%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v1 .sx-ty-dial{animation:sx1-dial 12s linear infinite}
@keyframes sx1-trans{0%{background:transparent;color:var(--sx-gris)}75%{background:transparent;color:var(--sx-gris)}75.833%{background:var(--sx-accent);color:var(--sx-sur-accent)}90.833%{background:var(--sx-accent);color:var(--sx-sur-accent)}91.667%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v1 .sx-ty-trans{animation:sx1-trans 12s linear infinite}
@keyframes sx1-tab{0%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}31.167%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}31.667%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}33.333%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}33.833%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}36.333%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}36.833%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}38.333%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}38.833%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}47.417%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}47.917%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}49.583%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}50.083%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}58.5%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}59%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}60.667%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}61.167%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}74.917%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}75.417%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}77.083%{border-color:var(--sx-accent-encre);color:var(--sx-encre);transform:translateY(1px)}77.583%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}100%{border-color:var(--sx-ligne2);color:var(--sx-gris);transform:none}}
.sx-v1 .sx-touche{animation:sx1-tab 12s linear infinite}

.sx-v2 .sx-corps{position:absolute; inset:48px 0 0 0; display:grid; grid-template-columns:170px minmax(0,1fr) 150px; gap:22px; padding:18px 22px}
.sx-v2 .sx-col{display:flex; flex-direction:column; gap:6px}
.sx-v2 .sx-fic{display:flex; align-items:center; gap:7px; padding:6px 9px; font-size:12px; font-weight:500}
.sx-v2 .sx-fic svg{width:13px; height:13px; flex:none; color:var(--sx-gris)}
.sx-v2 .sx-fic em{margin-left:auto; font-style:normal; font-family:'Courier Prime',monospace; font-size:11px; color:var(--sx-gris)}
.sx-v2 .sx-centre{display:flex; flex-direction:column; align-items:center}
.sx-v2 .sx-mini{position:relative; width:232px; height:250px; overflow:hidden; padding:18px 16px 16px 34px; font-size:10px; line-height:10px}
.sx-v2 .sx-ml{position:relative; white-space:pre}
.sx-v2 .sx-ml + .sx-ml{margin-top:10px}
.sx-v2 .sx-ml.suite{margin-top:0}
.sx-v2 .sx-ml b{position:absolute; left:-22px; color:var(--sx-num)}
.sx-v2 .sx-ml.s{font-weight:700; text-decoration:underline; text-underline-offset:2px}
.sx-v2 .sx-ml.p{padding-left:80px}
.sx-v2 .sx-ml.d{padding-left:36px}
.sx-v2 .sx-compte{margin:12px 0 0; font-size:12px; color:var(--sx-texte)}
.sx-v2 .sx-filigrane{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-30deg); font-family:'Jost',sans-serif; font-size:26px; font-weight:700;
  letter-spacing:.2em; color:var(--sx-encre); opacity:.12; white-space:nowrap}
.sx-v2 .sx-option{display:flex; align-items:center; gap:7px; margin-top:4px; font-size:11.5px; color:var(--sx-texte)}
.sx-v2 .sx-coche{display:grid; place-items:center; width:15px; height:15px; border-radius:4px; border:1px solid var(--sx-ligne2); color:var(--sx-sur-accent)}
.sx-v2 .sx-coche svg{width:10px; height:10px}
.sx-v2 .sx-option em{font-style:normal; color:var(--sx-gris)}
@keyframes sx2-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v2 .sx-corps{animation:sx2-fond 14s linear infinite}
@keyframes sx2-imp{0%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}45.714%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}46.429%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}}
.sx-v2 .sx-og-imp{animation:sx2-imp 14s linear infinite}
@keyframes sx2-exp{0%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}45%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}45.714%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.143%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.857%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}}
.sx-v2 .sx-og-exp{animation:sx2-exp 14s linear infinite}
@keyframes sx2-f0{0%{opacity:0;transform:translateX(-10px)}3.571%{opacity:0;transform:translateX(-10px)}6.786%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-f1{0%{opacity:0;transform:translateX(-10px)}5.714%{opacity:0;transform:translateX(-10px)}8.929%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-f2{0%{opacity:0;transform:translateX(-10px)}7.857%{opacity:0;transform:translateX(-10px)}11.071%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-f3{0%{opacity:0;transform:translateX(-10px)}10%{opacity:0;transform:translateX(-10px)}13.214%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-f4{0%{opacity:0;transform:translateX(-10px)}12.143%{opacity:0;transform:translateX(-10px)}15.357%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-f0{animation:sx2-f0 14s linear infinite}
.sx-v2 .sx-f1{animation:sx2-f1 14s linear infinite}
.sx-v2 .sx-f2{animation:sx2-f2 14s linear infinite}
.sx-v2 .sx-f3{animation:sx2-f3 14s linear infinite}
@keyframes sx2-choix{0%{border-color:var(--sx-ligne2);background:var(--sx-carte)}15%{border-color:var(--sx-ligne2);background:var(--sx-carte)}15.714%{border-color:var(--sx-sarcelle);background:var(--sx-marque)}45.714%{border-color:var(--sx-sarcelle);background:var(--sx-marque)}46.429%{border-color:var(--sx-ligne2);background:var(--sx-carte)}100%{border-color:var(--sx-ligne2);background:var(--sx-carte)}}
.sx-v2 .sx-f4{animation:sx2-f4 14s linear infinite,sx2-choix 14s linear infinite}
@keyframes sx2-ap{0%{opacity:0}17.143%{opacity:0}20.357%{opacity:1}100%{opacity:1}}
.sx-v2 .sx-apercu{animation:sx2-ap 14s linear infinite}
@keyframes sx2-m0{0%{opacity:0;transform:translateY(5px)}18.571%{opacity:0;transform:translateY(5px)}20.714%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m0{animation:sx2-m0 14s linear infinite}
@keyframes sx2-m1{0%{opacity:0;transform:translateY(5px)}20.143%{opacity:0;transform:translateY(5px)}22.286%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m1{animation:sx2-m1 14s linear infinite}
@keyframes sx2-m2{0%{opacity:0;transform:translateY(5px)}21.714%{opacity:0;transform:translateY(5px)}23.857%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m2{animation:sx2-m2 14s linear infinite}
@keyframes sx2-m3{0%{opacity:0;transform:translateY(5px)}23.286%{opacity:0;transform:translateY(5px)}25.429%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m3{animation:sx2-m3 14s linear infinite}
@keyframes sx2-m4{0%{opacity:0;transform:translateY(5px)}24.857%{opacity:0;transform:translateY(5px)}27%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m4{animation:sx2-m4 14s linear infinite}
@keyframes sx2-m5{0%{opacity:0;transform:translateY(5px)}26.429%{opacity:0;transform:translateY(5px)}28.571%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m5{animation:sx2-m5 14s linear infinite}
@keyframes sx2-m6{0%{opacity:0;transform:translateY(5px)}28%{opacity:0;transform:translateY(5px)}30.143%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-m6{animation:sx2-m6 14s linear infinite}
@keyframes sx2-cpt{0%{opacity:0}32.143%{opacity:0}35.357%{opacity:1}100%{opacity:1}}
.sx-v2 .sx-compte{animation:sx2-cpt 14s linear infinite}
@keyframes sx2-e0{0%{opacity:0;transform:translateX(10px)}48.571%{opacity:0;transform:translateX(10px)}51.786%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e1{0%{opacity:0;transform:translateX(10px)}50.143%{opacity:0;transform:translateX(10px)}53.357%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e2{0%{opacity:0;transform:translateX(10px)}51.714%{opacity:0;transform:translateX(10px)}54.929%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e3{0%{opacity:0;transform:translateX(10px)}53.286%{opacity:0;transform:translateX(10px)}56.5%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e4{0%{opacity:0;transform:translateX(10px)}54.857%{opacity:0;transform:translateX(10px)}58.071%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e5{0%{opacity:0;transform:translateX(10px)}56.429%{opacity:0;transform:translateX(10px)}59.643%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e6{0%{opacity:0;transform:translateX(10px)}58%{opacity:0;transform:translateX(10px)}61.214%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx2-e7{0%{opacity:0;transform:translateX(10px)}59.571%{opacity:0;transform:translateX(10px)}62.786%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v2 .sx-e0{animation:sx2-e0 14s linear infinite}
.sx-v2 .sx-e1{animation:sx2-e1 14s linear infinite}
.sx-v2 .sx-e2{animation:sx2-e2 14s linear infinite}
.sx-v2 .sx-e3{animation:sx2-e3 14s linear infinite}
.sx-v2 .sx-e4{animation:sx2-e4 14s linear infinite}
.sx-v2 .sx-e5{animation:sx2-e5 14s linear infinite}
.sx-v2 .sx-e6{animation:sx2-e6 14s linear infinite}
@keyframes sx2-pdf{0%{border-color:var(--sx-ligne2);color:var(--sx-texte)}61.429%{border-color:var(--sx-ligne2);color:var(--sx-texte)}62.143%{border-color:var(--sx-accent-encre);color:var(--sx-accent-encre)}92.143%{border-color:var(--sx-accent-encre);color:var(--sx-accent-encre)}92.857%{border-color:var(--sx-ligne2);color:var(--sx-texte)}100%{border-color:var(--sx-ligne2);color:var(--sx-texte)}}
.sx-v2 .sx-e7{animation:sx2-e7 14s linear infinite,sx2-pdf 14s linear infinite}
@keyframes sx2-opt{0%{opacity:0}62.857%{opacity:0}66.071%{opacity:1}100%{opacity:1}}
.sx-v2 .sx-option{animation:sx2-opt 14s linear infinite}
@keyframes sx2-coche{0%{background:transparent;border-color:var(--sx-ligne2)}66.429%{background:transparent;border-color:var(--sx-ligne2)}67.143%{background:var(--sx-accent);border-color:var(--sx-accent-encre)}92.143%{background:var(--sx-accent);border-color:var(--sx-accent-encre)}92.857%{background:transparent;border-color:var(--sx-ligne2)}100%{background:transparent;border-color:var(--sx-ligne2)}}
.sx-v2 .sx-coche{animation:sx2-coche 14s linear infinite}
@keyframes sx2-ck{0%{opacity:0}66.786%{opacity:0}67.143%{opacity:1}92.143%{opacity:1}92.5%{opacity:0}100%{opacity:0}}
.sx-v2 .sx-coche svg{animation:sx2-ck 14s linear infinite}
@keyframes sx2-fil{0%{opacity:0}69.286%{opacity:0}75%{opacity:.12}100%{opacity:.12}}
.sx-v2 .sx-filigrane{animation:sx2-fil 14s linear infinite}

.sx-v3 .sx-pres{display:flex; gap:6px}
.sx-v3 .sx-qui{display:inline-flex; align-items:center; gap:6px; padding:5px 9px 5px 7px; border-radius:999px; border:1px solid var(--sx-ligne2);
  font-size:11px; font-weight:600; color:var(--sx-texte)}
.sx-v3 .sx-qui i{width:9px; height:9px; border-radius:50%}
.sx-v3 .sx-qui-i i{background:#4fbccb} .sx-v3 .sx-qui-h i{background:#f6a243} .sx-v3 .sx-qui-c i{border:1.5px solid var(--sx-gris)}
.sx-v3 .sx-zone{position:absolute; inset:48px 0 0 0; display:grid; grid-template-columns:400px minmax(0,1fr); gap:16px; padding:22px 18px 0 22px}
.sx-v3 .sx-page{min-height:420px; padding:26px 22px 26px 56px; font-size:12px; line-height:12px}
.sx-v3 .sx-el + .sx-el,.sx-v3 .sx-ins + .sx-el{margin-top:12px}
.sx-v3 .sx-perso + .sx-dial{margin-top:0}
.sx-v3 .sx-no{left:-46px; width:32px}
.sx-v3 .sx-perso{padding-left:122px}
.sx-v3 .sx-dial{padding-left:56px}
.sx-v3 .sx-ins{height:24px; overflow:hidden}
.sx-v3 .sx-ins .sx-el{padding-top:12px}
.sx-tq1{width:16ch} .sx-tq2{width:18ch}
.sx-v3 .sx-tag{position:absolute; left:-52px; top:-1px; font-family:'Jost',sans-serif; font-size:10px; font-weight:650; padding:1px 6px; border-radius:5px; color:#0b1013}
.sx-v3 .sx-ins .sx-tag{top:11px}
.sx-v3 .sx-tag-h{background:#f6a243} .sx-v3 .sx-tag-i{background:#4fbccb}
.sx-v3 .sx-bloc-h::before{content:''; position:absolute; left:-8px; top:-3px; bottom:-3px; width:3px; border-radius:2px; background:#f6a243}
.sx-v3 .sx-marge{position:relative; padding-top:46px; display:flex; flex-direction:column; gap:10px}
.sx-v3 .sx-bulle{padding:10px 12px; border:1px solid var(--sx-ligne2); border-radius:10px; background:var(--sx-carte); font-size:12.5px; line-height:1.45; color:var(--sx-texte); white-space:normal}
.sx-v3 .sx-bulle p{margin:0}
.sx-v3 .sx-bulle .sx-de{margin-bottom:4px; font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-gris)}
.sx-v3 .sx-b2{margin-left:18px; border-color:rgba(79,188,203,.45)}
@keyframes sx3-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v3 .sx-zone{animation:sx3-fond 14s linear infinite}
@keyframes sx3-q0{0%{opacity:0;transform:scale(.8)}2.143%{opacity:0;transform:scale(.8)}5.357%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx3-q1{0%{opacity:0;transform:scale(.8)}3.571%{opacity:0;transform:scale(.8)}6.786%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sx3-q2{0%{opacity:0;transform:scale(.8)}24.286%{opacity:0;transform:scale(.8)}27.5%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v3 .sx-qui-i{animation:sx3-q0 14s linear infinite}
.sx-v3 .sx-qui-h{animation:sx3-q1 14s linear infinite}
.sx-v3 .sx-qui-c{animation:sx3-q2 14s linear infinite}
@keyframes sx3-bh{0%{opacity:0}3.571%{opacity:0}5%{opacity:1}25%{opacity:1}26.429%{opacity:0}100%{opacity:0}}
.sx-v3 .sx-bloc-h::before{animation:sx3-bh 14s linear infinite}
@keyframes sx3-th{0%{opacity:0}3.571%{opacity:0}5%{opacity:1}25%{opacity:1}26.429%{opacity:0}100%{opacity:0}}
.sx-v3 .sx-tag-h{animation:sx3-th 14s linear infinite}
@keyframes sx3-t1{0%{width:0;border-right-color:transparent}4.286%{width:0;border-right-color:transparent}4.643%{width:0;border-right-color:#f6a243}7.143%{width:0;border-right-color:#f6a243;animation-timing-function:steps(16,end)}19.841%{width:16ch;border-right-color:#f6a243}23.413%{width:16ch;border-right-color:#f6a243}23.77%{width:16ch;border-right-color:transparent}100%{width:16ch;border-right-color:transparent}}
.sx-v3 .sx-tq1{animation:sx3-t1 14s linear infinite}
@keyframes sx3-b1{0%{opacity:0;transform:translateX(14px)}25.714%{opacity:0;transform:translateX(14px)}29.286%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v3 .sx-b1{animation:sx3-b1 14s linear infinite}
@keyframes sx3-b2{0%{opacity:0;transform:translateX(14px)}40%{opacity:0;transform:translateX(14px)}43.571%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v3 .sx-b2{animation:sx3-b2 14s linear infinite}
@keyframes sx3-ins{0%{height:0}45.714%{height:0}49.286%{height:24px}100%{height:24px}}
.sx-v3 .sx-ins{animation:sx3-ins 14s ease infinite}
@keyframes sx3-ti{0%{opacity:0}46.429%{opacity:0}47.857%{opacity:1}70%{opacity:1}71.429%{opacity:0}100%{opacity:0}}
.sx-v3 .sx-tag-i{animation:sx3-ti 14s linear infinite}
@keyframes sx3-t2{0%{width:0;border-right-color:transparent}47.857%{width:0;border-right-color:transparent}48.214%{width:0;border-right-color:#4fbccb}50.714%{width:0;border-right-color:#4fbccb;animation-timing-function:steps(18,end)}65%{width:18ch;border-right-color:#4fbccb}68.571%{width:18ch;border-right-color:#4fbccb}68.929%{width:18ch;border-right-color:transparent}100%{width:18ch;border-right-color:transparent}}
.sx-v3 .sx-tq2{animation:sx3-t2 14s linear infinite}

.sx-v4 .sx-sel{display:inline-flex; align-items:center; gap:8px}
.sx-v4 .sx-sel em{font-style:normal; color:var(--sx-gris)}
.sx-v4 .sx-sel svg{width:12px; height:12px; color:var(--sx-gris)}
.sx-v4 .sx-on{background:rgba(246,162,67,.14); border-color:rgba(246,162,67,.55); color:var(--sx-accent-encre)}
.sx-v4 .sx-tour{margin-left:auto; font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:999px;
  border:1px solid rgba(120,160,230,.55); color:#7ea7e6}
html[data-theme="light"] .sx-v4 .sx-tour{color:#3d6fc0}
.sx-v4 .sx-zone{position:absolute; inset:48px 0 0 0; display:grid; grid-template-columns:repeat(2,290px); justify-content:center; gap:16px; padding:16px 18px 0}
.sx-v4 .sx-page{min-height:400px; padding:22px 18px 22px 40px; font-size:11px; line-height:11px}
.sx-v4 .sx-page.bleue{background:var(--sx-bleue)}
.sx-v4 .sx-el + .sx-el{margin-top:11px}
.sx-v4 .sx-perso + .sx-dial{margin-top:0}
.sx-v4 .sx-no{left:-34px; width:24px}
.sx-v4 .sx-perso{padding-left:92px}
.sx-v4 .sx-dial{padding-left:42px}
.sx-v4 .sx-vieille .sx-page{opacity:.72}
.sx-v4 .sx-marque{background:var(--sx-marque); border-radius:2px}
.sx-v4 .sx-ast{position:absolute; right:-12px; top:0; color:#7ea7e6; font-weight:700}
.sx-v4 .sx-variantes{position:relative; display:inline-block; width:21ch; height:11px; vertical-align:top; outline:1px dashed var(--sx-ligne2); outline-offset:2px; border-radius:2px}
.sx-v4 .sx-variantes span{position:absolute; left:0; top:0; white-space:pre}
.sx-v4 .sx-va2,.sx-v4 .sx-va3{opacity:0}
.sx-v4 .sx-fleches{position:absolute; left:42px; top:22px; display:inline-flex; align-items:center; gap:2px; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600; color:var(--sx-texte)}
.sx-v4 .sx-fleches b{display:grid; place-items:center; width:18px; height:18px; border-radius:5px; border:1px solid var(--sx-ligne2); font-weight:600}
.sx-v4 .sx-fleches .sx-n{position:relative; display:inline-block; width:58px; height:14px}
.sx-v4 .sx-fleches .sx-n i{position:absolute; inset:0; font-style:normal; text-align:center; white-space:nowrap}
.sx-v4 .sx-dial-var{padding-top:4px; padding-bottom:30px}
@keyframes sx4-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v4 .sx-zone{animation:sx4-fond 14s linear infinite}
@keyframes sx4-g{0%{opacity:0;transform:translateX(-24px)}2.143%{opacity:0;transform:translateX(-24px)}7.143%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v4 .sx-vieille{animation:sx4-g 14s linear infinite}
@keyframes sx4-m1{0%{background:transparent}11.429%{background:transparent}15%{background:var(--sx-marque)}100%{background:var(--sx-marque)}}
.sx-v4 .sx-mq1{animation:sx4-m1 14s linear infinite}
@keyframes sx4-m2{0%{background:transparent}14.286%{background:transparent}17.857%{background:var(--sx-marque)}100%{background:var(--sx-marque)}}
.sx-v4 .sx-mq2{animation:sx4-m2 14s linear infinite}
@keyframes sx4-ast{0%{opacity:0}18.571%{opacity:0}20.714%{opacity:1}100%{opacity:1}}
.sx-v4 .sx-ast{animation:sx4-ast 14s linear infinite}
@keyframes sx4-fl{0%{opacity:0}22.857%{opacity:0}25.714%{opacity:1}100%{opacity:1}}
.sx-v4 .sx-fleches{animation:sx4-fl 14s linear infinite}
@keyframes sx4-v1{0%{opacity:1}32.857%{opacity:1}34.643%{opacity:0}67.5%{opacity:0}69.286%{opacity:1}100%{opacity:0}}
.sx-v4 .sx-va1{animation:sx4-v1 14s linear infinite}
@keyframes sx4-v2{0%{opacity:0}31.786%{opacity:0}33.571%{opacity:1}50.714%{opacity:1}52.5%{opacity:0}100%{opacity:0}}
.sx-v4 .sx-va2{animation:sx4-v2 14s linear infinite}
@keyframes sx4-v3{0%{opacity:0}49.643%{opacity:0}51.429%{opacity:1}68.571%{opacity:1}70.357%{opacity:0}100%{opacity:0}}
.sx-v4 .sx-va3{animation:sx4-v3 14s linear infinite}
@keyframes sx4-clic{0%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}30.643%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}31.071%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}32.857%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}33.286%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}48.5%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}48.929%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}50.714%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}51.143%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}66.357%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}66.786%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}68.571%{background:var(--sx-accent);border-color:var(--sx-accent-encre);color:var(--sx-sur-accent)}69%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-texte)}}
.sx-v4 .sx-suiv{animation:sx4-clic 14s linear infinite}

.sx-v5 .sx-corps{position:absolute; inset:0; display:grid; grid-template-columns:46px 230px minmax(0,1fr)}
.sx-v5 .sx-rail{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0; border-right:1px solid var(--sx-trait); background:var(--sx-barre)}
.sx-v5 .sx-rail span{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--sx-gris)}
.sx-v5 .sx-rail svg{width:16px; height:16px}
.sx-v5 .sx-liste{padding:16px 14px; border-right:1px solid var(--sx-trait); background:var(--sx-barre)}
.sx-v5 .sx-titre{margin:0 0 12px; font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-gris)}
.sx-v5 .sx-lp{display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; font-size:12.5px; font-weight:500; color:var(--sx-encre)}
.sx-v5 .sx-lp .sx-cpt{margin-left:auto; min-width:24px; padding:2px 7px; border-radius:6px; background:var(--sx-champ); font-size:11px; font-weight:650; text-align:center; color:var(--sx-texte)}
.sx-v5 .sx-lp1{background:var(--sx-champ)}
.sx-v5 .sx-detail{margin:4px 9px 8px; font-size:11px; line-height:1.45; color:var(--sx-gris)}
.sx-v5 .sx-fiche{display:inline-block; margin:0 9px 10px; padding:5px 9px; border-radius:7px; border:1px solid var(--sx-ligne2); font-size:11px; font-weight:600; color:var(--sx-texte)}
.sx-v5 .sx-stats{padding:16px 20px; overflow:hidden}
.sx-v5 .sx-st{margin:14px 0 7px; font-size:10.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-texte)}
.sx-v5 .sx-st.premier{margin-top:0}
.sx-v5 .sx-genre{display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--sx-champ)}
.sx-v5 .sx-g-f{width:66.6%; background:#d4729a} .sx-v5 .sx-g-h{width:33.4%; background:#5b8def}
.sx-v5 .sx-note{margin:6px 0 0; font-size:11px; color:var(--sx-gris)}
.sx-v5 .sx-bl{display:grid; grid-template-columns:52px minmax(0,1fr) 38px; align-items:center; gap:10px; margin-top:6px; font-size:12px}
.sx-v5 .sx-bfond{height:8px; border-radius:4px; background:var(--sx-champ); overflow:hidden}
.sx-v5 .sx-bp{display:block; height:100%; border-radius:4px; background:#ad4e6b}
.sx-v5 .sx-bp1{width:47%} .sx-v5 .sx-bp2{width:44%} .sx-v5 .sx-bp3{width:9%}
.sx-v5 .sx-bv{text-align:right; color:var(--sx-gris); font-variant-numeric:tabular-nums}
.sx-v5 .sx-crit{display:flex; align-items:center; gap:8px; margin:6px 0 0; font-size:12px}
.sx-v5 .sx-ok{display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--sx-marque); color:var(--sx-sarcelle); flex:none}
.sx-v5 .sx-ok svg{width:10px; height:10px}
.sx-v5 .sx-btns{position:relative; display:inline-block; margin-left:8px}
.sx-v5 .sx-ph,.sx-v5 .sx-conf{display:inline-block; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; white-space:nowrap}
.sx-v5 .sx-ph{opacity:0; border:1px solid rgba(246,162,67,.6); color:var(--sx-accent-encre)}
.sx-v5 .sx-conf{position:absolute; left:0; top:0; border:1px solid var(--sx-sarcelle); color:var(--sx-sarcelle)}
.sx-v5 .sx-reussi{display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:5px 10px; border-radius:999px; background:var(--sx-marque);
  color:var(--sx-sarcelle); font-size:11.5px; font-weight:650}
.sx-v5 .sx-reussi svg{width:12px; height:12px}
@keyframes sx5-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v5 .sx-corps{animation:sx5-fond 14s linear infinite}
@keyframes sx5-l0{0%{opacity:0;transform:translateX(-8px)}2.857%{opacity:0;transform:translateX(-8px)}6.071%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-lp1{animation:sx5-l0 14s linear infinite}
@keyframes sx5-l1{0%{opacity:0;transform:translateX(-8px)}4.643%{opacity:0;transform:translateX(-8px)}7.857%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-lp2{animation:sx5-l1 14s linear infinite}
@keyframes sx5-l2{0%{opacity:0;transform:translateX(-8px)}6.429%{opacity:0;transform:translateX(-8px)}9.643%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-lp3{animation:sx5-l2 14s linear infinite}
@keyframes sx5-det{0%{opacity:0}10%{opacity:0}13.214%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-detail{animation:sx5-det 14s linear infinite}
@keyframes sx5-fi{0%{opacity:0;transform:scale(.9)}13.571%{opacity:0;transform:scale(.9)}16.786%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-fiche{animation:sx5-fi 14s linear infinite}
@keyframes sx5-rp{0%{background:var(--sx-accent);color:var(--sx-sur-accent)}18.571%{background:var(--sx-accent);color:var(--sx-sur-accent)}19.286%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v5 .sx-r-perso{animation:sx5-rp 14s linear infinite}
@keyframes sx5-rs{0%{background:transparent;color:var(--sx-gris)}17.857%{background:transparent;color:var(--sx-gris)}18.571%{background:var(--sx-accent);color:var(--sx-sur-accent)}92.143%{background:var(--sx-accent);color:var(--sx-sur-accent)}92.857%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v5 .sx-r-stats{animation:sx5-rs 14s linear infinite}
@keyframes sx5-st{0%{opacity:0;transform:translateX(16px)}18.571%{opacity:0;transform:translateX(16px)}22.143%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-stats{animation:sx5-st 14s linear infinite}
@keyframes sx5-g{0%{width:0}21.429%{width:0}27.143%{width:66.6%}100%{width:66.6%}}
.sx-v5 .sx-g-f{animation:sx5-g 14s ease infinite}
@keyframes sx5-b1{0%{width:0}25.714%{width:0}32.143%{width:47%}100%{width:47%}}
.sx-v5 .sx-bp1{animation:sx5-b1 14s ease infinite}
@keyframes sx5-b2{0%{width:0}26.786%{width:0}33.214%{width:44%}100%{width:44%}}
.sx-v5 .sx-bp2{animation:sx5-b2 14s ease infinite}
@keyframes sx5-b3{0%{width:0}27.857%{width:0}34.286%{width:9%}100%{width:9%}}
.sx-v5 .sx-bp3{animation:sx5-b3 14s ease infinite}
@keyframes sx5-c1{0%{opacity:0}38.571%{opacity:0}41.786%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-c1{animation:sx5-c1 14s linear infinite}
@keyframes sx5-c2{0%{opacity:0}42.857%{opacity:0}46.071%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-c2{animation:sx5-c2 14s linear infinite}
@keyframes sx5-c3{0%{opacity:0}47.143%{opacity:0}50.357%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-c3{animation:sx5-c3 14s linear infinite}
@keyframes sx5-ph{0%{opacity:1;transform:none}56.429%{opacity:1;transform:none}57.5%{opacity:1;transform:scale(.94)}58.571%{opacity:0;transform:scale(.94)}100%{opacity:0;transform:scale(.94)}}
.sx-v5 .sx-ph{animation:sx5-ph 14s linear infinite}
@keyframes sx5-cf{0%{opacity:0}58.571%{opacity:0}60.714%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-conf{animation:sx5-cf 14s linear infinite}
@keyframes sx5-ck{0%{opacity:0}58.571%{opacity:0}60.714%{opacity:1}100%{opacity:1}}
.sx-v5 .sx-c3 .sx-ok{animation:sx5-ck 14s linear infinite}
@keyframes sx5-re{0%{opacity:0;transform:translateY(6px)}62.857%{opacity:0;transform:translateY(6px)}66.071%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v5 .sx-reussi{animation:sx5-re 14s linear infinite}

.sx-v6 .sx-seg{display:inline-flex; padding:2px; border-radius:9px; border:1px solid var(--sx-ligne2)}
.sx-v6 .sx-seg span{padding:5px 9px; border-radius:7px; font-size:11px; font-weight:600; color:var(--sx-gris)}
.sx-v6 .sx-coul{margin-right:6px; font-size:11px; color:var(--sx-gris)}
.sx-v6 .sx-corps{position:absolute; inset:48px 0 0 0}
.sx-v6 .sx-c{position:absolute; width:197px; height:168px; display:flex; flex-direction:column; border-radius:10px; border:1px solid var(--sx-ligne2);
  background:var(--sx-carte); color:var(--sx-texte); overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.05)}
.sx-v6 .sx-c-tete{display:flex; align-items:center; gap:7px; padding:9px 10px 7px; font-size:10.5px; font-weight:650; letter-spacing:.04em; white-space:nowrap}
.sx-v6 .sx-c-no{position:relative; display:inline-block; min-width:20px; height:18px; border-radius:5px; background:#f6a243; color:#16191d; font-size:10.5px; text-align:center; line-height:18px}
.sx-v6 .sx-c-no i{position:absolute; inset:0; font-style:normal}
.sx-v6 .sx-c-no .apres{opacity:0}
.sx-v6 .sx-poignee{margin-left:auto; display:grid; place-items:center; width:16px; height:16px; opacity:.55}
.sx-v6 .sx-poignee svg{width:13px; height:13px}
.sx-v6 .sx-c-txt{flex:1; padding:2px 10px; font-family:'Courier Prime','Courier New',monospace; font-size:9.5px; line-height:1.35; white-space:pre; opacity:.92}
.sx-v6 .sx-c-pied{display:flex; align-items:center; gap:6px; padding:7px 10px 9px; white-space:nowrap}
.sx-v6 .sx-c-ton{font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.sx-v6 .sx-c-fn{padding:2px 6px; border-radius:5px; background:rgba(0,0,0,.18); font-size:9.5px; font-weight:600}
.sx-v6 .sx-main{position:absolute; right:6px; top:20px; width:22px; height:22px; opacity:0}

@keyframes sx6-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v6 .sx-corps{animation:sx6-fond 14s linear infinite}
@keyframes sx6-sans{0%{background:var(--sx-accent);color:var(--sx-sur-accent)}15.714%{background:var(--sx-accent);color:var(--sx-sur-accent)}16.429%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v6 .sx-s-sans{animation:sx6-sans 14s linear infinite}
@keyframes sx6-ton{0%{background:transparent;color:var(--sx-gris)}15%{background:transparent;color:var(--sx-gris)}15.714%{background:var(--sx-accent);color:var(--sx-sur-accent)}92.143%{background:var(--sx-accent);color:var(--sx-sur-accent)}92.857%{background:transparent;color:var(--sx-gris)}100%{background:transparent;color:var(--sx-gris)}}
.sx-v6 .sx-s-ton{animation:sx6-ton 14s linear infinite}
@keyframes sx6-c0{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}2.143%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}5%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}17.143%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}20.714%{opacity:1;background:#2E3270;color:#ffffff;border-color:#2E3270}100%{opacity:1;background:#2E3270;color:#ffffff;border-color:#2E3270}}
.sx-v6 .sx-c0{animation:sx6-c0 14s linear infinite}
@keyframes sx6-t0{0%{opacity:0}18.571%{opacity:0}21.429%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c0 .sx-c-ton{animation:sx6-t0 14s linear infinite}
@keyframes sx6-c1{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}3.429%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}6.286%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}18%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}21.571%{opacity:1;background:#5E7088;color:#ffffff;border-color:#5E7088}100%{opacity:1;background:#5E7088;color:#ffffff;border-color:#5E7088}}
@keyframes sx6-d1{0%{transform:none}37.857%{transform:none;animation-timing-function:cubic-bezier(.45,0,.2,1)}45.714%{transform:translate(209px,0px)}100%{transform:translate(209px,0px)}}
.sx-v6 .sx-c1{animation:sx6-c1 14s linear infinite,sx6-d1 14s linear infinite}
@keyframes sx6-t1{0%{opacity:0}19.429%{opacity:0}22.286%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c1 .sx-c-ton{animation:sx6-t1 14s linear infinite}
@keyframes sx6-c2{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}4.714%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}7.571%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}18.857%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}22.429%{opacity:1;background:#6E63C2;color:#ffffff;border-color:#6E63C2}100%{opacity:1;background:#6E63C2;color:#ffffff;border-color:#6E63C2}}
@keyframes sx6-d2{0%{transform:none}37.857%{transform:none;animation-timing-function:cubic-bezier(.45,0,.2,1)}45.714%{transform:translate(-418px,180px)}100%{transform:translate(-418px,180px)}}
.sx-v6 .sx-c2{animation:sx6-c2 14s linear infinite,sx6-d2 14s linear infinite}
@keyframes sx6-t2{0%{opacity:0}20.286%{opacity:0}23.143%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c2 .sx-c-ton{animation:sx6-t2 14s linear infinite}
@keyframes sx6-c3{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}6%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}8.857%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}19.714%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}23.286%{opacity:1;background:#D4537E;color:#ffffff;border-color:#D4537E}100%{opacity:1;background:#D4537E;color:#ffffff;border-color:#D4537E}}
@keyframes sx6-d3{0%{transform:none}37.857%{transform:none;animation-timing-function:cubic-bezier(.45,0,.2,1)}45.714%{transform:translate(209px,0px)}100%{transform:translate(209px,0px)}}
.sx-v6 .sx-c3{animation:sx6-c3 14s linear infinite,sx6-d3 14s linear infinite}
@keyframes sx6-t3{0%{opacity:0}21.143%{opacity:0}24%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c3 .sx-c-ton{animation:sx6-t3 14s linear infinite}
@keyframes sx6-c4{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}7.286%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}10.143%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}20.571%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}24.143%{opacity:1;background:#E58AA0;color:#1b1e25;border-color:#E58AA0}100%{opacity:1;background:#E58AA0;color:#1b1e25;border-color:#E58AA0}}
@keyframes sx6-d4{0%{transform:none;box-shadow:0 1px 0 rgba(0,0,0,.05);z-index:1}32.857%{transform:none;box-shadow:0 1px 0 rgba(0,0,0,.05);z-index:3}35%{transform:scale(1.05) rotate(-2deg);box-shadow:0 22px 40px -12px rgba(0,0,0,.55);z-index:3;animation-timing-function:cubic-bezier(.45,0,.2,1)}45%{transform:translate(0px,-180px) scale(1.05) rotate(-2deg);box-shadow:0 22px 40px -12px rgba(0,0,0,.55);z-index:3}47.143%{transform:translate(0px,-180px);box-shadow:0 1px 0 rgba(0,0,0,.05);z-index:3}100%{transform:translate(0px,-180px);box-shadow:0 1px 0 rgba(0,0,0,.05);z-index:3}}
.sx-v6 .sx-c4{animation:sx6-c4 14s linear infinite,sx6-d4 14s linear infinite}
@keyframes sx6-t4{0%{opacity:0}22%{opacity:0}24.857%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c4 .sx-c-ton{animation:sx6-t4 14s linear infinite}
@keyframes sx6-c5{0%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}8.571%{opacity:0;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}11.429%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}21.429%{opacity:1;background:var(--sx-carte);color:var(--sx-texte);border-color:var(--sx-ligne2)}25%{opacity:1;background:#D85A30;color:#ffffff;border-color:#D85A30}100%{opacity:1;background:#D85A30;color:#ffffff;border-color:#D85A30}}
.sx-v6 .sx-c5{animation:sx6-c5 14s linear infinite}
@keyframes sx6-t5{0%{opacity:0}22.857%{opacity:0}25.714%{opacity:1}100%{opacity:1}}
.sx-v6 .sx-c5 .sx-c-ton{animation:sx6-t5 14s linear infinite}
@keyframes sx6-main{0%{opacity:0}30%{opacity:0}31.429%{opacity:1}49.286%{opacity:1}50.714%{opacity:0}100%{opacity:0}}
.sx-v6 .sx-main{animation:sx6-main 14s linear infinite}
@keyframes sx6-av{0%{opacity:1}47.857%{opacity:1}48.929%{opacity:0}100%{opacity:0}}
.sx-v6 .sx-c-no .avant{animation:sx6-av 14s linear infinite}
@keyframes sx6-ap{0%{opacity:0}47.857%{opacity:0}48.929%{opacity:1}92.143%{opacity:1}93.214%{opacity:0}100%{opacity:0}}
.sx-v6 .sx-c-no .apres{animation:sx6-ap 14s linear infinite}

.sx-v7 .sx-corps{position:absolute; inset:48px 0 0 0}
.sx-v7 .sx-pil.on{background:rgba(246,162,67,.14); border-color:rgba(246,162,67,.55); color:var(--sx-accent-encre)}
.sx-v7 .sx-abs{position:absolute}
.sx-v7 .sx-acte{position:absolute; top:12px; font-size:9.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-gris); white-space:nowrap}
.sx-v7 .sx-ton{position:absolute; left:150px; top:30px; width:470px; height:16px; display:flex; border-radius:3px; overflow:hidden}
.sx-v7 .sx-ton i{display:block; height:100%; box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}
.sx-v7 .sx-lab{position:absolute; left:18px; width:124px; font-size:9.5px; line-height:12px; color:var(--sx-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-v7 .sx-lab.titre{font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--sx-texte)}
.sx-v7 .sx-trait{position:absolute; left:150px; width:470px; height:1px; background:var(--sx-trait)}
.sx-v7 .sx-pt{position:absolute; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:50%; background:#ad4e6b}
.sx-v7 .sx-lien{position:absolute; width:1px; margin-left:0; background:#ad4e6b; opacity:.55}
.sx-v7 .sx-acte-l{position:absolute; top:26px; width:1px; height:244px; background:var(--sx-ligne2)}
.sx-v7 .sx-curseur{position:absolute; top:51px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:#f6a243; color:#16191d; font-size:9.5px;
  font-weight:700; text-align:center; line-height:18px}
.sx-v7 .sx-bulle{position:absolute; top:-6px; padding:6px 9px; border-radius:8px; background:var(--sx-carte); border:1px solid var(--sx-ligne2); font-size:10.5px;
  line-height:1.35; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.sx-v7 .sx-bulle b{display:block; font-size:11px}
.sx-v7 .sx-struct{position:absolute; left:150px; top:276px; width:470px; height:22px; display:flex; gap:2px}
.sx-v7 .sx-struct span{display:grid; place-items:center; height:100%; border-radius:4px; background:var(--sx-champ); border:1px solid var(--sx-ligne2); font-size:9.5px;
  font-weight:650; letter-spacing:.06em; color:var(--sx-texte); white-space:nowrap}
.sx-v7 .sx-peek{position:absolute; left:150px; top:316px; width:470px; height:90px; padding:16px 18px 0 46px; font-size:11px; line-height:11px; overflow:hidden}
.sx-v7 .sx-peek .sx-el + .sx-el{margin-top:11px}
.sx-v7 .sx-peek .sx-no{left:-36px; width:26px}
.sx-v7 .sx-pk{position:absolute; left:46px; right:18px; top:16px}
.sx-v7 .sx-pk2{opacity:0}

@keyframes sx7-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v7 .sx-corps{animation:sx7-fond 14s linear infinite}
@keyframes sx7-bton{0%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}1.429%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}2.143%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.143%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.857%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}}
.sx-v7 .sx-b-ton{animation:sx7-bton 14s linear infinite}
@keyframes sx7-bdra{0%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}20.714%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}21.429%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.143%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.857%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}}
.sx-v7 .sx-b-dra{animation:sx7-bdra 14s linear infinite}
@keyframes sx7-bstr{0%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}52.857%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}53.571%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.143%{background:rgba(246,162,67,.14);border-color:rgba(246,162,67,.55);color:var(--sx-accent-encre)}92.857%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}100%{background:transparent;border-color:var(--sx-ligne2);color:var(--sx-gris)}}
.sx-v7 .sx-b-str{animation:sx7-bstr 14s linear infinite}
@keyframes sx7-ton{0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}2.857%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.45,0,.2,1)}12.857%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
.sx-v7 .sx-ton{animation:sx7-ton 14s linear infinite}
@keyframes sx7-actes{0%{opacity:0}13.571%{opacity:0}16.786%{opacity:1}100%{opacity:1}}
.sx-v7 .sx-acte, .sx-v7 .sx-acte-l{animation:sx7-actes 14s linear infinite}
@keyframes sx7-cur{0%{left:160.4px;opacity:0}15.714%{left:160.4px;opacity:0}17.857%{left:160.4px;opacity:1;animation-timing-function:cubic-bezier(.45,0,.2,1)}47.143%{left:348.4px;opacity:1}100%{left:348.4px;opacity:1}}
.sx-v7 .sx-curseur{animation:sx7-cur 14s linear infinite}
@media (prefers-reduced-motion:reduce){.sx-v7 .sx-curseur{left:348.4px} .sx-v7 .sx-curseur .n1, .sx-v7 .sx-pk1{opacity:0} .sx-v7 .sx-pk2{opacity:1}}
@keyframes sx7-n1{0%{opacity:1}46.429%{opacity:1}47.857%{opacity:0}100%{opacity:0}}
.sx-v7 .sx-curseur .n1, .sx-v7 .sx-pk1{animation:sx7-n1 14s linear infinite}
@keyframes sx7-n2{0%{opacity:0}46.429%{opacity:0}47.857%{opacity:1}100%{opacity:1}}
.sx-v7 .sx-curseur .n2, .sx-v7 .sx-pk2{animation:sx7-n2 14s linear infinite}
@keyframes sx7-bu{0%{opacity:0;transform:translateY(4px)}47.5%{opacity:0;transform:translateY(4px)}49.286%{opacity:1;transform:none}67.143%{opacity:1;transform:none}68.929%{opacity:0;transform:translateY(4px)}100%{opacity:0;transform:translateY(4px)}}
.sx-v7 .sx-bulle{animation:sx7-bu 14s linear infinite}
@keyframes sx7-lab{0%{opacity:0}21.429%{opacity:0}24.643%{opacity:1}100%{opacity:1}}
.sx-v7 .sx-lab.dra, .sx-v7 .sx-trait{animation:sx7-lab 14s linear infinite}
@keyframes sx7-p0{0%{opacity:0;transform:scale(0)}23.921%{opacity:0;transform:scale(0)}25.706%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p0{animation:sx7-p0 14s linear infinite}
@keyframes sx7-p1{0%{opacity:0;transform:scale(0)}24.444%{opacity:0;transform:scale(0)}26.23%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p1{animation:sx7-p1 14s linear infinite}
@keyframes sx7-p2{0%{opacity:0;transform:scale(0)}24.968%{opacity:0;transform:scale(0)}26.754%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p2{animation:sx7-p2 14s linear infinite}
@keyframes sx7-p3{0%{opacity:0;transform:scale(0)}25.492%{opacity:0;transform:scale(0)}27.278%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p3{animation:sx7-p3 14s linear infinite}
@keyframes sx7-p4{0%{opacity:0;transform:scale(0)}26.016%{opacity:0;transform:scale(0)}27.802%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p4{animation:sx7-p4 14s linear infinite}
@keyframes sx7-p6{0%{opacity:0;transform:scale(0)}27.063%{opacity:0;transform:scale(0)}28.849%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p6{animation:sx7-p6 14s linear infinite}
@keyframes sx7-p7{0%{opacity:0;transform:scale(0)}27.587%{opacity:0;transform:scale(0)}29.373%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p7{animation:sx7-p7 14s linear infinite}
@keyframes sx7-p8{0%{opacity:0;transform:scale(0)}28.286%{opacity:0;transform:scale(0)}30.071%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p8{animation:sx7-p8 14s linear infinite}
@keyframes sx7-p9{0%{opacity:0;transform:scale(0)}28.984%{opacity:0;transform:scale(0)}30.77%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p9{animation:sx7-p9 14s linear infinite}
@keyframes sx7-p10{0%{opacity:0;transform:scale(0)}29.508%{opacity:0;transform:scale(0)}31.294%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p10{animation:sx7-p10 14s linear infinite}
@keyframes sx7-p11{0%{opacity:0;transform:scale(0)}30.206%{opacity:0;transform:scale(0)}31.992%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p11{animation:sx7-p11 14s linear infinite}
@keyframes sx7-p12{0%{opacity:0;transform:scale(0)}30.73%{opacity:0;transform:scale(0)}32.516%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p12{animation:sx7-p12 14s linear infinite}
@keyframes sx7-p13{0%{opacity:0;transform:scale(0)}31.254%{opacity:0;transform:scale(0)}33.04%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p13{animation:sx7-p13 14s linear infinite}
@keyframes sx7-p15{0%{opacity:0;transform:scale(0)}32.302%{opacity:0;transform:scale(0)}34.087%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p15{animation:sx7-p15 14s linear infinite}
@keyframes sx7-p16{0%{opacity:0;transform:scale(0)}32.825%{opacity:0;transform:scale(0)}34.611%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p16{animation:sx7-p16 14s linear infinite}
@keyframes sx7-p17{0%{opacity:0;transform:scale(0)}33.349%{opacity:0;transform:scale(0)}35.135%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p17{animation:sx7-p17 14s linear infinite}
@keyframes sx7-p19{0%{opacity:0;transform:scale(0)}34.397%{opacity:0;transform:scale(0)}36.183%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p19{animation:sx7-p19 14s linear infinite}
@keyframes sx7-p20{0%{opacity:0;transform:scale(0)}34.921%{opacity:0;transform:scale(0)}36.706%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p20{animation:sx7-p20 14s linear infinite}
@keyframes sx7-p21{0%{opacity:0;transform:scale(0)}35.444%{opacity:0;transform:scale(0)}37.23%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p21{animation:sx7-p21 14s linear infinite}
@keyframes sx7-p22{0%{opacity:0;transform:scale(0)}36.317%{opacity:0;transform:scale(0)}38.103%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p22{animation:sx7-p22 14s linear infinite}
@keyframes sx7-p23{0%{opacity:0;transform:scale(0)}37.016%{opacity:0;transform:scale(0)}38.802%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p23{animation:sx7-p23 14s linear infinite}
@keyframes sx7-p24{0%{opacity:0;transform:scale(0)}37.54%{opacity:0;transform:scale(0)}39.325%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p24{animation:sx7-p24 14s linear infinite}
@keyframes sx7-p25{0%{opacity:0;transform:scale(0)}38.063%{opacity:0;transform:scale(0)}39.849%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p25{animation:sx7-p25 14s linear infinite}
@keyframes sx7-p26{0%{opacity:0;transform:scale(0)}38.587%{opacity:0;transform:scale(0)}40.373%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p26{animation:sx7-p26 14s linear infinite}
@keyframes sx7-p27{0%{opacity:0;transform:scale(0)}39.111%{opacity:0;transform:scale(0)}40.897%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-p27{animation:sx7-p27 14s linear infinite}
@keyframes sx7-str{0%{opacity:0;transform:translateY(6px)}54.286%{opacity:0;transform:translateY(6px)}58.571%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v7 .sx-struct, .sx-v7 .sx-lab.str{animation:sx7-str 14s linear infinite}

.sx-v8 .sx-corps{position:absolute; inset:48px 0 0 0; display:grid; grid-template-columns:236px minmax(0,1fr); gap:14px; padding:16px 16px 0}
.sx-v8 .sx-page{min-height:360px; padding:20px 14px 20px 38px; font-size:10.5px; line-height:10.5px}
.sx-v8 .sx-el + .sx-el{margin-top:10.5px}
.sx-v8 .sx-perso + .sx-dial{margin-top:0}
.sx-v8 .sx-no{left:-30px; width:22px}
.sx-v8 .sx-perso{padding-left:80px}
.sx-v8 .sx-dial{padding-left:36px}
.sx-v8 .sx-n12{border-radius:2px}
.sx-v8 .sx-panneau{position:relative; border-radius:12px; border:1px solid var(--sx-ligne2); background:var(--sx-barre); overflow:hidden}
.sx-v8 .sx-pt{display:flex; align-items:center; gap:6px; padding:9px 10px; border-bottom:1px solid var(--sx-trait)}
.sx-v8 .sx-choix{position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; border:1px solid var(--sx-ligne2); font-size:11px;
  font-weight:600; color:var(--sx-texte); white-space:nowrap}
.sx-v8 .sx-choix svg{width:11px; height:11px; color:var(--sx-gris)}
.sx-v8 .sx-choix .sx-nm{position:relative; display:inline-block; width:104px; height:14px}
.sx-v8 .sx-choix .sx-nm i{position:absolute; left:0; top:0; font-style:normal; white-space:nowrap}
.sx-v8 .sx-choix .n2{opacity:0}
.sx-v8 .sx-seg{margin-left:auto; display:inline-flex; padding:2px; border-radius:8px; border:1px solid var(--sx-ligne2)}
.sx-v8 .sx-seg span{padding:4px 8px; border-radius:6px; font-size:10.5px; font-weight:600; color:var(--sx-gris)}
.sx-v8 .sx-seg .on{background:var(--sx-champ); color:var(--sx-texte)}
.sx-v8 .sx-film{display:flex; justify-content:center; padding:10px 0 4px}
.sx-v8 .sx-film span{padding:5px 10px; border-radius:8px; background:#f6a243; color:#16191d; font-size:10.5px; font-weight:650; line-height:1.25; text-align:center}
.sx-v8 .sx-film small{display:block; font-size:9.5px; font-weight:600; opacity:.8}
.sx-v8 .sx-cols{position:absolute; left:10px; right:10px; top:104px; display:grid; gap:8px}
.sx-v8 .sx-cols.a{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-v8 .sx-cols.b{grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; opacity:0}
.sx-v8 .sx-col{display:flex; flex-direction:column; gap:5px; min-width:0}
.sx-v8 .sx-ch{padding:5px 7px; border-radius:7px; background:var(--sx-champ); font-size:10px; font-weight:650; color:var(--sx-texte); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-v8 .sx-ch small{display:block; font-size:9px; font-weight:500; color:var(--sx-gris)}
.sx-v8 .sx-sc{display:flex; align-items:center; gap:5px; padding:5px 6px; border-radius:7px; border:1px solid var(--sx-ligne2); background:var(--sx-carte); font-size:9.5px;
  font-weight:650; color:var(--sx-texte); white-space:nowrap; overflow:hidden}
.sx-v8 .sx-sc b{flex:none; min-width:17px; padding:1px 4px; border-radius:4px; background:var(--sx-champ); font-size:9px; text-align:center}
.sx-v8 .sx-sc.actuelle{border-color:#f6a243}
.sx-v8 .sx-sc.actuelle b{background:#f6a243; color:#16191d}
.sx-v8 .sx-liste{position:absolute; left:10px; top:38px; z-index:2; width:170px; padding:5px; border-radius:10px; background:var(--sx-carte); border:1px solid var(--sx-ligne2);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55); opacity:0}
.sx-v8 .sx-liste span{display:block; padding:5px 8px; border-radius:6px; font-size:11px; font-weight:500; color:var(--sx-texte); white-space:nowrap}
.sx-v8 .sx-garde{position:absolute; right:12px; bottom:12px; padding:5px 10px; border-radius:999px; background:var(--sx-marque); color:var(--sx-sarcelle); font-size:10.5px;
  font-weight:650; opacity:0}
@keyframes sx8-fond{0%{opacity:1}92.143%{opacity:1}97.143%{opacity:0}100%{opacity:0}}
.sx-v8 .sx-corps{animation:sx8-fond 14s linear infinite}
@keyframes sx8-pan{0%{opacity:0;transform:translateX(30px)}2.143%{opacity:0;transform:translateX(30px)}6.429%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v8 .sx-panneau{animation:sx8-pan 14s linear infinite}
@keyframes sx8-cola{0%{opacity:0}7.143%{opacity:0}10.714%{opacity:1}45.714%{opacity:1}47.857%{opacity:0}100%{opacity:0}}
.sx-v8 .sx-cols.a{animation:sx8-cola 14s linear infinite}
@keyframes sx8-colb{0%{opacity:0}47.143%{opacity:0}50%{opacity:1}100%{opacity:1}}
.sx-v8 .sx-cols.b{animation:sx8-colb 14s linear infinite}
@keyframes sx8-slug{0%{background:transparent}16.429%{background:transparent}18.571%{background:rgba(246,162,67,.28)}31.429%{background:rgba(246,162,67,.28)}35%{background:transparent}100%{background:transparent}}
.sx-v8 .sx-n12{animation:sx8-slug 14s linear infinite}
@keyframes sx8-act{0%{box-shadow:0 0 0 0 rgba(246,162,67,0)}17.143%{box-shadow:0 0 0 0 rgba(246,162,67,.55)}24.286%{box-shadow:0 0 0 7px rgba(246,162,67,0)}100%{box-shadow:0 0 0 7px rgba(246,162,67,0)}}
.sx-v8 .sx-sc.actuelle{animation:sx8-act 14s linear infinite}
@keyframes sx8-liste{0%{opacity:0;transform:translateY(-4px)}38.214%{opacity:0;transform:translateY(-4px)}39.286%{opacity:1;transform:none}47.143%{opacity:1;transform:none}48.214%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-4px)}}
.sx-v8 .sx-liste{animation:sx8-liste 14s linear infinite}
@keyframes sx8-fr{0%{background:transparent;color:var(--sx-texte)}43%{background:transparent;color:var(--sx-texte)}43.571%{background:var(--sx-accent);color:var(--sx-sur-accent)}46.786%{background:var(--sx-accent);color:var(--sx-sur-accent)}47.357%{background:transparent;color:var(--sx-texte)}100%{background:transparent;color:var(--sx-texte)}}
.sx-v8 .sx-liste .fr{animation:sx8-fr 14s linear infinite}
@keyframes sx8-n1{0%{opacity:1}46.429%{opacity:1}47.143%{opacity:0}100%{opacity:0}}
.sx-v8 .sx-choix .n1{animation:sx8-n1 14s linear infinite}
@keyframes sx8-n2{0%{opacity:0}46.429%{opacity:0}47.143%{opacity:1}100%{opacity:1}}
.sx-v8 .sx-choix .n2{animation:sx8-n2 14s linear infinite}
@keyframes sx8-glisse{0%{transform:none;box-shadow:none}61.429%{transform:none;box-shadow:none}63.571%{transform:scale(1.06) rotate(-2deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.6);animation-timing-function:cubic-bezier(.45,0,.2,1)}71.429%{transform:translate(calc(100% + 5px),0) scale(1.06) rotate(-2deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.6)}73.571%{transform:translate(calc(100% + 5px),0);box-shadow:none}100%{transform:translate(calc(100% + 5px),0);box-shadow:none}}
.sx-v8 .sx-glisse{animation:sx8-glisse 14s linear infinite}
@keyframes sx8-garde{0%{opacity:0;transform:translateY(6px)}75%{opacity:0;transform:translateY(6px)}78.214%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sx-v8 .sx-garde{animation:sx8-garde 14s linear infinite}