/* mijolo.fr · direction « Un motif » : la bulle du logo Mijolo est la seule forme de la page.
   Couleurs et polices : charte Mijolo 1.0 (brand/mijolo/charte). Pas de dégradé, pas d'ombre, pas de filet. */

@font-face{font-family:'Familjen Grotesk';src:url(fontes/familjen-grotesk-normal.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fontes/dm-sans-normal.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --encre:#1B1716;--abricot:#FFA630;--creme:#FFF4E6;--blanc:#FFFFFF;
  --caramel:#9A5200;--peche:#FFE2BA;--lin:#EAE0D5;--cendre:#857A72;--poivre:#5E5650;--fonte:#2E2724;--basilic:#467A22;--tomate:#B23A14;
  --titre:'Familjen Grotesk','DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --texte:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  /* cinq tailles : petite, corps, appui, titre, affiche */
  --t-petit:0.9375rem;
  --t-corps:1.0625rem;
  --t-appui:clamp(1.1875rem,1.05rem + 0.6vw,1.375rem);
  --t-titre:clamp(2rem,1.3rem + 3.2vw,3.75rem);
  --t-affiche:clamp(3rem,1.4rem + 5.2vw,5.75rem);
  --marge:clamp(16px,2.2vw,32px);
  --gouttiere:clamp(12px,1.4vw,24px);
  --section:clamp(96px,12vw,200px);
  --sortie:cubic-bezier(.22,1,.36,1);--expo:cubic-bezier(.16,1,.3,1);--entre:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 var(--t-corps)/1.5 var(--texte);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img,svg{height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a,button,input[type=range]{touch-action:manipulation}
button,.bouton,[role=switch],[role=tab]{-webkit-user-select:none;user-select:none}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--caramel);outline-offset:3px;border-radius:999px}
.sombre :focus-visible{outline-color:var(--abricot)}

.cadre{padding-inline:var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere)}
.evitement{position:absolute;left:16px;top:-64px;z-index:10;background:var(--abricot);color:var(--encre);padding:12px 18px;border-radius:999px;font-weight:600}
.evitement:focus{top:12px}

h1,h2,h3{font-family:var(--titre);text-wrap:balance}
h2{font-weight:700;font-size:var(--t-titre);line-height:1.02;letter-spacing:-.025em}
h3{font-weight:600;font-size:var(--t-appui);line-height:1.25}
.appui{font-size:var(--t-appui);line-height:1.4}
.petit{font-size:var(--t-petit);line-height:1.45}
.poivre{color:var(--poivre)}
.sombre{background:var(--encre);color:var(--creme)}
.sombre .poivre{color:var(--lin)}

/* --- la forme : une bulle, à toutes les échelles --- */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:transform 140ms var(--sortie),background-color 180ms ease}
.bouton:active{transform:scale(.97)}
.bouton-plein{background:var(--abricot);color:var(--encre)}
.bouton-encre{background:var(--encre);color:var(--creme)}
.lien{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.07em;padding-block:12px;font-weight:500}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
@media (hover:hover) and (pointer:fine){
  .bouton-plein:hover{background:#FFB552}
  .bouton-encre:hover{background:var(--fonte)}
  .lien:hover{text-decoration-thickness:.14em}
}

/* --- premier écran : la bulle géante entre par la droite et tient la vidéo --- */
.une{position:relative;min-height:min(100svh,960px);display:flex;flex-direction:column;overflow:clip;padding-top:env(safe-area-inset-top)}
.barre{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.barre nav{display:flex;align-items:center;gap:28px;flex:1;margin-left:40px}
.barre nav .bouton{margin-left:auto}
.barre nav a{text-decoration:none;font-weight:500;font-size:var(--t-petit)}
.barre .bouton{min-height:44px;padding:0 20px;font-size:var(--t-petit)}
.une-corps{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere);align-items:center;padding-block:24px 72px}
.une-texte{grid-column:1/8;position:relative;z-index:2;align-self:center}
h1{font-weight:700;font-size:var(--t-affiche);line-height:.98;letter-spacing:-.03em}
.une .appui{margin-top:28px;max-width:34ch}
.une .actions{margin-top:36px}
.bulle-une{position:absolute;top:50%;left:52%;width:min(120vh,1500px);height:min(120vh,1500px);transform:translateY(-50%);border-radius:50%;overflow:clip;background:var(--abricot);z-index:1}
.bulle-une video,.bulle-une img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.une-tickets{grid-column:9/13;position:relative;z-index:2;align-self:end;margin-bottom:40px}
@media (max-width:1100px){.une-texte{grid-column:1/9}.une-tickets{grid-column:9/13}}
@media (max-width:899px){
  .une{min-height:0}
  .une-corps{display:block;padding-bottom:0}
  .une-texte{padding-block:24px 40px}
  .bulle-une{position:relative;top:auto;left:auto;transform:none;width:118vw;height:118vw;max-width:none;max-height:none;margin:0 0 0 18vw;border-radius:50% 0 0 50%;border-radius:50%}
  .une-tickets{margin:-96px 0 0 var(--marge);width:min(320px,86%)}
}
@media (max-width:559px){.barre nav a{display:none}}

/* tickets : fragment réel de la tablette (ses propres conventions, racine data-ui) */
.tickets{display:flex;flex-direction:column;gap:10px;min-height:270px}
.ticket{background:var(--blanc);color:var(--encre);border-radius:14px;padding:14px 16px;border:1px solid var(--lin);animation:ticket 420ms var(--sortie) both}
.ticket-haut{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}
.ticket-haut span:first-child{display:flex;align-items:center;gap:7px}
.ticket-haut span:first-child::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--abricot)}
.ticket-haut span:last-child{color:var(--poivre);font-variant-numeric:tabular-nums}
.ticket p{margin-top:5px;font-size:15px;font-weight:600}
.ticket small{display:block;margin-top:2px;font-size:13px;color:var(--poivre);font-variant-numeric:tabular-nums}
@keyframes ticket{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}

/* --- déclaration avec vignettes rondes dans la ligne --- */
.declaration{padding-block:var(--section)}
.declaration p{max-width:74%;margin-inline:auto;text-align:center;font:600 clamp(1.5rem,1rem + 1.9vw,2.125rem)/1.25 var(--titre);letter-spacing:-.015em}
.vignette{display:inline-block;width:1.15em;height:.85em;border-radius:999px;vertical-align:-.1em;margin-inline:.12em;overflow:clip;background:var(--lin)}
.vignette img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.declaration p{max-width:none;text-align:left;font-size:clamp(1.375rem,6.4vw,1.75rem)}}

/* --- capacités : une phrase, un interrupteur, une conséquence --- */
.capacites{list-style:none}
.bande{min-height:17vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere);align-items:center;padding:22px var(--marge);background:var(--blanc);transition:background-color 320ms ease}
.bande-texte{grid-column:1/11}
.bande p{font:600 clamp(1.5rem,1rem + 2.2vw,2.75rem)/1.1 var(--titre);letter-spacing:-.02em;color:var(--poivre);transition:color 240ms ease}
.bande small{display:block;margin-top:10px;font-size:var(--t-corps);max-height:0;overflow:clip;opacity:0;transition:max-height 320ms var(--sortie),opacity 240ms ease}
.bande[data-on="true"]{background:var(--couleur,var(--creme))}
.bande[data-on="true"] p{color:var(--encre)}
.bande[data-on="true"] small{max-height:6em;opacity:1}
.bande-com{grid-column:11/13;justify-self:end}
[role=switch]{display:inline-flex;align-items:center;width:3.1em;height:1.7em;padding:.2em;border-radius:999px;background:var(--cendre);font-size:clamp(1rem,.6rem + 1.2vw,1.5rem);transition:background-color 220ms ease}
[role=switch] i{display:block;width:1.3em;height:1.3em;border-radius:50%;background:var(--blanc);transition:transform 240ms var(--sortie)}
[role=switch][aria-checked="true"]{background:var(--encre)}
[role=switch][aria-checked="true"] i{transform:translateX(1.4em);background:var(--abricot)}
@media (max-width:899px){
  .bande{min-height:132px;padding-block:24px}
  .bande-texte{grid-column:1/10}
  .bande p{font-size:clamp(1.25rem,5.8vw,1.5rem)}
  .bande-com{grid-column:10/13}
  [role=switch]{font-size:1.1rem;min-height:44px}
}

/* --- la solution : une liste, un disque, l'écran choisi --- */
.solution{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere);align-items:center;padding-block:var(--section) 80px}
.solution-liste{grid-column:1/6;grid-row:1;position:relative;z-index:2;align-self:center}
.solution h2{font-weight:600;color:var(--poivre);font-size:clamp(1.75rem,1.1rem + 1.9vw,2.75rem);letter-spacing:-.015em;line-height:1.15}
.solution-liste li{margin-top:2px}
.solution-intro{margin:10px 0 18px;max-width:40ch;color:var(--poivre)}
.solution-suite{margin-top:22px;font-weight:600;color:var(--poivre);font-size:var(--t-appui)}
.choix-solution{display:flex;align-items:baseline;gap:10px;font:600 clamp(1.5rem,1rem + 1.5vw,2.25rem)/1.12 var(--titre);letter-spacing:-.015em;color:var(--poivre);text-align:left;transition:color 180ms ease}
.choix-solution::before{content:'';width:.38em;height:.38em;border-radius:50%;background:var(--lin);flex:none;transition:background-color 180ms ease,transform 240ms var(--sortie);transform:translateY(-.08em)}
.choix-solution[aria-selected="true"]{color:var(--encre)}
.choix-solution[aria-selected="true"]::before{background:var(--abricot);transform:translateY(-.08em) scale(1.35)}
.choix-solution em{font:600 .5em/1.2 var(--titre);color:var(--caramel);font-style:normal;letter-spacing:0}
.scene{grid-column:6/13;grid-row:1;display:grid;place-items:center;align-self:center;overflow:clip visible;margin-inline:calc(var(--gouttiere)*-1);padding-block:24px}
.disque{grid-area:1/1;position:relative;z-index:1;width:min(64vh,640px);height:min(64vh,640px);margin-left:10%;border-radius:50%;background:var(--couleur,var(--abricot));transition:background-color 320ms ease}
.objet{grid-area:1/1;position:relative;z-index:2;width:min(64vh,640px);height:min(78vh,780px);margin-left:10%;display:grid;place-items:center}
.objet>*{grid-area:1/1;max-height:100%;max-width:100%;display:grid;place-items:center;opacity:0;transition:opacity 300ms ease,transform 400ms var(--sortie);transform:translateY(10px)}
.objet>.actif{opacity:1;transform:none}
.objet img{max-height:min(78vh,780px);width:auto;object-fit:contain}
.objet .large{width:112%;max-width:none;height:auto}
.objet .telephone{border-radius:28px;border:6px solid var(--encre);max-height:min(72vh,720px);width:auto}
.fait-solution{margin-top:22px;max-width:36ch;font-size:var(--t-corps);color:var(--encre);min-height:3em}
@media (max-width:899px){
  .solution{display:block;min-height:0;padding-block:var(--section) 64px}
  .scene{margin-inline:calc(var(--marge)*-1);padding-block:16px}
  .disque,.objet{width:86vw;height:86vw;margin-left:0}
  .objet{height:100vw}
  .objet img{max-height:100vw}
  .objet .telephone{max-height:92vw}
  .solution-liste{margin-top:28px}
  .solution h2{font-size:clamp(1.5rem,7vw,1.75rem)}
  .solution-liste ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin-top:12px}
  .solution-liste li{margin:0}
  .choix-solution{font-size:1.25rem;min-height:44px;align-items:center}
  .fait-solution{margin-top:12px}
}

/* --- suivi des livreurs : la carte, le trajet, le livreur --- */
.suivi{position:relative;width:100%;aspect-ratio:12/7;border-radius:24px;overflow:clip;background:var(--lin)}
.suivi>img{width:100%;height:100%;object-fit:cover}
.suivi svg{position:absolute;inset:0;width:100%;height:100%}
.suivi path{fill:none;stroke:var(--encre);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12}
.suivi-point{fill:var(--abricot);stroke:var(--encre);stroke-width:4;offset-path:path('M790 232 C 760 245, 745 262, 712 268 S 660 252, 630 258 S 575 275, 545 290 S 520 300, 505 300');animation:route 12s linear infinite alternate}
.suivi-maison{fill:var(--encre)}
@keyframes route{from{offset-distance:0%}to{offset-distance:100%}}
.suivi-bulle{position:absolute;right:16px;bottom:16px;background:var(--encre);color:var(--creme);border-radius:999px;padding:12px 18px;font-weight:600;font-size:var(--t-petit)}

/* --- le calcul : un chiffre réglé par le visiteur --- */
.calcul{position:relative;min-height:72svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--gouttiere);padding-block:var(--section) 56px}
.calcul h2{grid-column:1/8;grid-row:1;font-weight:600;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);letter-spacing:-.015em}
.reglages{grid-column:1/6;grid-row:2;align-self:start;margin-top:28px;width:min(400px,100%);display:grid;gap:22px}
.reglage{display:block}
.reglage label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:500;color:var(--lin)}
.reglage output{font:600 17px/1 var(--texte);color:var(--creme);font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--abricot);touch-action:pan-y;cursor:pointer}
.resultat{grid-column:1/9;grid-row:3;align-self:end}
.resultat p{font-size:var(--t-corps);font-weight:500;color:var(--lin)}
.total{display:block;font:700 clamp(8.75rem,19vw,20rem)/.8 var(--titre);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.total small{font-size:.22em;letter-spacing:0;font-weight:600;margin-left:.1em}
.methode{grid-column:9/13;grid-row:3;align-self:end;max-width:30ch;font-size:var(--t-corps);color:var(--lin)}
@media (max-width:899px){
  .calcul{display:block;min-height:84svh}
  .calcul h2{font-size:clamp(1.5rem,7vw,1.75rem)}
  .reglages{width:100%;margin-top:24px}
  .resultat{margin-top:min(14vh,96px)}
  .total{font-size:clamp(4.5rem,30vw,8rem);line-height:.9}
  .total small{display:block;font-size:1.25rem;margin:6px 0 0}
  .methode{margin-top:16px;max-width:none}
}

/* --- questions : des fiches à onglets --- */
.questions{padding-block:var(--section)}
.questions-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere)}
.questions h2{grid-column:3/11;font-size:clamp(1.75rem,1.1rem + 1.9vw,2.75rem);font-weight:600;letter-spacing:-.015em}
.fiches{grid-column:3/11;margin-top:40px}
.fiche{position:relative;margin-top:-28px;padding-top:40px}
.fiche:first-child{margin-top:0}
.onglet{position:absolute;top:0;height:44px;width:200px;display:flex;align-items:center;padding:0 22px;border-radius:999px 999px 0 0;background:var(--couleur);font-size:var(--t-petit);font-weight:600;color:var(--encre);left:calc(var(--n)*150px)}
.fiche-corps{background:var(--couleur);border-radius:0 28px 0 0;padding:0 32px 36px;min-height:96px}
.fiche:first-child .fiche-corps,.fiche:nth-child(n+2) .fiche-corps{border-top-right-radius:28px}
.fiche-question{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;min-height:96px;text-align:left;font:600 var(--t-appui)/1.3 var(--titre);letter-spacing:-.01em;color:var(--encre)}
.fiche-question::after{content:'';flex:none;width:14px;height:14px;border-radius:50%;background:var(--encre);transition:transform 240ms var(--sortie)}
.fiche-question[aria-expanded="true"]::after{transform:scale(1.6);background:var(--blanc)}
.fiche-reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--sortie)}
.fiche-reponse>div{overflow:clip}
.fiche-reponse p{max-width:50ch;padding-bottom:12px;font-size:var(--t-corps)}
.fiche-question[aria-expanded="true"]+.fiche-reponse{grid-template-rows:1fr}
@media (max-width:899px){
  .questions h2,.fiches{grid-column:1/13}
  .questions h2{font-size:clamp(2rem,9vw,2.5rem)}
  .onglet{width:120px;left:calc(var(--n)*48px);padding:0 16px}
  .fiche-corps{padding:0 20px 24px}
  .fiche-question{min-height:88px}
}

/* --- dernier appel : le premier écran de la démo, déjà ouvert --- */
.appel{min-height:90svh;background:var(--abricot);color:var(--encre);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere);padding-block:64px 40px}
.appel-texte{grid-column:1/6;align-self:end}
.appel h2{font-size:var(--t-affiche);line-height:.92;letter-spacing:-.03em}
.appel .appui{margin-top:20px;max-width:34ch;font-size:var(--t-corps)}
.dialogue{grid-column:7/12;align-self:center;width:min(440px,100%);justify-self:start}
@media (max-width:899px){
  .appel{display:block;min-height:84svh;padding-block:56px 40px}
  .appel h2{font-size:clamp(2.75rem,13vw,3.5rem)}
  .dialogue{width:100%;margin-top:56px}
}

/* fragments de la démo (data-ui) : les conventions du produit, bordures et rayons compris */
[data-ui]{font-family:var(--texte);color:var(--encre)}
.boite{background:var(--blanc);border-radius:20px;padding:24px;border:1px solid var(--lin)}
.boite h3{font:600 20px/1.25 var(--texte)}
.segments{display:flex;margin-top:18px;padding:4px;background:#F2EDE6;border-radius:999px}
.segments button{flex:1;min-height:44px;border-radius:999px;font-weight:600;font-size:15px;color:var(--poivre);transition:background-color 180ms ease,color 180ms ease}
.segments button[aria-pressed="true"]{background:var(--encre);color:var(--creme)}
.champ{display:block;margin-top:16px}
.champ span{display:block;font-size:14px;font-weight:500;color:var(--poivre);margin-bottom:6px}
.champ input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--cendre);border-radius:12px;background:var(--blanc);font-size:16px}
.champ input:focus{outline:2px solid var(--encre);outline-offset:1px;border-color:var(--encre)}
.boite .bouton{width:100%;margin-top:18px;min-height:52px}

/* --- les clients des restaurants --- */
.convives{padding-block:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gouttiere);row-gap:12px}
.convives p{max-width:62ch}
@media (max-width:899px){.convives{grid-template-columns:minmax(0,1fr)}}
.convives strong{color:var(--encre)}
.convives a{color:var(--caramel);text-underline-offset:.2em;overflow-wrap:anywhere}

/* --- pied : la marque, construite en grand --- */
.pied{padding-block:64px max(40px,env(safe-area-inset-bottom))}
.pied-marque{display:block;width:100%;height:auto}
.pied-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere);row-gap:28px;margin-top:56px;font-size:var(--t-petit)}
.pied-liens{grid-column:1/9;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px var(--gouttiere)}
.pied-liens a{text-decoration:none;padding-block:6px;display:block}
.pied-contact{grid-column:9/13;display:grid;gap:8px;align-content:start}
.pied-contact p{max-width:48ch}
.pied-bas{grid-column:1/13;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.pied-bas p{max-width:72ch}
@media (hover:hover) and (pointer:fine){.pied-liens a:hover{text-decoration:underline;text-underline-offset:.2em}}
@media (max-width:899px){
  .pied-liens{grid-column:1/13;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied-contact{grid-column:1/13}
}

/* --- pages de texte --- */
.doc-tete{background:var(--encre);color:var(--creme)}
.sombre a{color:inherit}
.doc-tete .barre{padding-block:18px}
.doc{padding-block:clamp(40px,6vw,72px)}
.etroit{max-width:760px;margin-inline:auto}
.doc h1{font-size:clamp(2.25rem,5vw,3rem);line-height:1.05;letter-spacing:-.02em}
.maj{margin-top:10px;font-size:var(--t-petit);color:var(--poivre)}
.intro{margin-top:24px;font-size:var(--t-appui);line-height:1.4}
.toc{margin-block:32px 8px;padding:24px 28px;background:var(--creme);border-radius:28px}
.toc ol{padding-left:1.2em;list-style:decimal}
.toc li{padding-block:3px}
.doc article{margin-top:40px;scroll-margin-top:16px}
.doc h2{font-size:var(--t-appui);line-height:1.25;font-weight:600;letter-spacing:-.01em}
.doc h3{font-size:var(--t-corps);margin-top:20px;font-weight:600}
.doc p,.doc article li{max-width:70ch}
.doc article p,.doc article ul{margin-top:12px}
.doc article ul{padding-left:1.2em;list-style:disc}
.doc article li{padding-block:3px}
.doc a{color:var(--caramel);text-underline-offset:.2em;overflow-wrap:anywhere}

/* --- 404 --- */
.introuvable{min-height:100svh;max-width:640px;margin-inline:auto;padding:64px var(--marge);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px}
.introuvable h1{font-size:clamp(2.25rem,8vw,3.5rem);line-height:1.02}

/* --- mouvement : chaque section arrive à sa façon, une fois ; rien n'est caché sans script --- */
@media (prefers-reduced-motion:no-preference){
  .js .une [data-ligne]{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
  .js .une [data-ligne] span{display:block;transform:translateY(105%);animation:ligne 800ms var(--expo) forwards;animation-delay:calc(100ms + var(--i)*90ms)}
  .js .une [data-arrive]{opacity:0;transform:translateY(12px);animation:arrive 500ms var(--sortie) forwards;animation-delay:var(--d,420ms)}
  .js .bulle-une{clip-path:circle(0% at 60% 50%);animation:bulle 1100ms var(--entre) 120ms forwards}
  .js [data-reveler]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--sortie),transform 900ms var(--sortie)}
  .js [data-reveler].visible{opacity:1;transform:none}
  .js [data-reveler="masque"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--entre)}
  .js [data-reveler="masque"].visible{clip-path:inset(0)}
  .js [data-reveler="disque"]{opacity:1;transform:scale(.6);transition:transform 900ms var(--expo)}
  .js [data-reveler="disque"].visible{transform:scale(1)}
  .js [data-reveler="pas"]{transition-delay:calc(var(--i,0)*70ms)}
  .js .bande{transition:background-color 320ms ease}
  .bulle-une video{transform:scale(1.04);animation:derive 14s ease-in-out infinite alternate}
}
@keyframes ligne{to{transform:none}}
@keyframes arrive{to{opacity:1;transform:none}}
@keyframes bulle{to{clip-path:circle(75% at 50% 50%)}}
@keyframes derive{to{transform:scale(1.1) translateX(-2%)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticket,.suivi-point{animation:none}
  .suivi-point{offset-distance:55%}
}