/* survey/survey.css — la page du concours.

   Pensée pour un téléphone d'abord : en Algérie, la quasi-totalité du trafic
   qui vient d'une pub Facebook arrive sur mobile, souvent en 3G. D'où l'absence
   totale de framework, une seule feuille, et zéro image de décor — tout le
   mouvement de cette page est du CSS, il ne coûte donc rien à télécharger.

   RÈGLE TENUE PARTOUT : on n'anime que `transform` et `opacity`. Ce sont les
   deux seules propriétés que le téléphone traite sur le processeur graphique.
   Animer `width`, `top` ou `box-shadow` oblige le navigateur à recalculer et
   repeindre la page à chaque image — c'est exactement ce qui rend un site
   « joli sur l'ordinateur du développeur » et saccadé sur un vrai téléphone.

   Et tout s'arrête si le système demande moins d'animations (dernier bloc). */

:root{
  --or:#E8890B; --or-clair:#FFD98A; --or-fonce:#B85A09; --or-vif:#F6A81C;
  --brun:#2B1A07; --brun-2:#4A2F10;
  --creme:#FBF4E9; --blanc:#FFFFFF;
  --texte:#2B1A07; --doux:#7A6042;
  --bord:rgba(43,26,7,.12);
  --vert:#16a34a; --rouge:#DC2626;
  --ombre:0 18px 45px -22px rgba(43,26,7,.45);
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);   /* sortie franche, arrivée douce */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--creme); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--creme); color:var(--texte);
  font-family:'Segoe UI',system-ui,-apple-system,'Noto Naskh Arabic','Cairo',sans-serif;
  line-height:1.7; font-size:16px; overflow-x:hidden;
  /* Le bouton collant du bas ne doit jamais recouvrir le pied de page. */
  padding-bottom:env(safe-area-inset-bottom);
}
/* L'arabe a besoin d'un peu plus d'interligne pour rester lisible en petit. */
html[dir=rtl] body{ line-height:1.9; }
img{ max-width:100%; display:block; }
a{ color:var(--or-fonce); }

.wrap{ width:100%; max-width:680px; margin:0 auto; padding:0 16px; position:relative; z-index:1; }

/* ══ LE DÉCOR ══════════════════════════════════════════════════════════════
   Fixe derrière la page : trois halos qui dérivent et quelques bulles qui
   montent. `filter:blur()` est coûteux, mais il n'est appliqué QU'UNE FOIS,
   sur une couche fixe qui ne bouge pas avec le défilement — le navigateur la
   met en cache et n'y revient plus. */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
     background:
       radial-gradient(1000px 700px at 50% -10%, rgba(246,168,28,.20), transparent 70%),
       radial-gradient(700px 500px at 100% 100%, rgba(232,137,11,.13), transparent 70%),
       var(--creme); }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
       will-change:transform; }
.b1{ width:340px; height:340px; top:-90px; inset-inline-start:-110px;
     background:radial-gradient(circle,#FFD98A,transparent 68%); animation:drift1 22s ease-in-out infinite; }
.b2{ width:300px; height:300px; top:44%; inset-inline-end:-120px;
     background:radial-gradient(circle,#F6A81C,transparent 68%); animation:drift2 27s ease-in-out infinite; }
.b3{ width:380px; height:380px; bottom:-140px; inset-inline-start:20%;
     background:radial-gradient(circle,#FFC24D,transparent 68%); animation:drift3 31s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate3d(60px,50px,0) scale(1.15); } }
@keyframes drift2{ 50%{ transform:translate3d(-70px,-40px,0) scale(1.1); } }
@keyframes drift3{ 50%{ transform:translate3d(40px,-60px,0) scale(1.12); } }

/* Les bulles de miel. Neuf éléments, positionnés et retardés par `--i` : une
   seule règle sert les neuf, aucune ne se répète dans la feuille. */
.bubbles i{
  position:absolute; bottom:-30px; inset-inline-start:calc(6% + var(--i) * 11%);
  width:calc(7px + (var(--i) % 3) * 5px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.85), rgba(232,137,11,.45));
  opacity:0; animation:rise calc(15s + var(--i) * 2s) linear infinite;
  animation-delay:calc(var(--i) * -2.4s); will-change:transform;
}
@keyframes rise{
  0%  { transform:translate3d(0,0,0) scale(.6); opacity:0; }
  12% { opacity:.75; }
  88% { opacity:.5; }
  100%{ transform:translate3d(26px,-102vh,0) scale(1.1); opacity:0; }
}

/* ══ Barre de langue ══════════════════════════════════════════════════════ */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; position:sticky; top:0; z-index:20;
  /* Un fond translucide net : sans lui, le texte de la page défile
     « à travers » la barre et devient illisible une seconde sur deux. */
  background:rgba(251,244,233,.82); backdrop-filter:blur(12px);
  margin-inline:-16px; padding-inline:16px;
}
/* 44 px de haut, comme tout ce qui se touche sur cette page : c'est la taille
   en dessous de laquelle un pouce rate sa cible une fois sur cinq. */
.topbar .brand{ display:flex; align-items:center; gap:9px; min-height:44px;
                font-weight:800; color:var(--brun); text-decoration:none; }
.topbar .brand img{ width:34px; height:34px; object-fit:contain; animation:bob 4.5s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-4px) rotate(-5deg); } }
.lang{
  border:1.5px solid var(--bord); background:var(--blanc); color:var(--texte);
  border-radius:100px; padding:0 16px; min-height:44px; font:inherit; font-size:.86rem;
  font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  transition:transform .2s var(--ease), border-color .2s;
}
.lang:hover{ border-color:var(--or); color:var(--or-fonce); transform:translateY(-2px); }
.lang:active{ transform:scale(.96); }

/* ══ Héro ═════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden; border-radius:26px; margin:8px 0 20px;
  color:#fff; padding:32px 20px 28px; text-align:center; box-shadow:var(--ombre);
  /* Le dégradé est plus large que le bloc et glisse lentement : le fond
     paraît vivant sans qu'aucun élément ne se déplace réellement. */
  background:linear-gradient(135deg,#F6A81C,#E8890B 35%,#B85A09 65%,#F6A81C);
  background-size:280% 280%; animation:flow 16s ease infinite;
}
@keyframes flow{ 50%{ background-position:100% 50%; } }
/* Un rappel du motif alvéolé de la marque, qui dérive doucement. */
.hero::before{
  content:''; position:absolute; inset:-40px; opacity:.16; pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%, #fff 1.5px, transparent 1.6px);
  background-size:22px 22px; animation:pan 30s linear infinite; will-change:transform;
}
@keyframes pan{ to{ transform:translate3d(44px,44px,0); } }
/* Un éclat qui balaie le héros toutes les 7 secondes — le reflet d'un pot de
   miel qu'on tourne dans la lumière. */
.hero::after{
  content:''; position:absolute; top:-60%; inset-inline-start:-60%;
  width:55%; height:220%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(18deg) translate3d(0,0,0); animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{ 0%,72%{ transform:rotate(18deg) translate3d(-40vw,0,0); } 100%{ transform:rotate(18deg) translate3d(180vw,0,0); } }
.hero-in{ position:relative; z-index:1; }

.eyebrow{
  display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35);
  border-radius:100px; padding:5px 15px; font-size:.76rem; font-weight:800; letter-spacing:.06em;
  margin-bottom:12px;
}
.hero h1{ line-height:1; font-weight:900; letter-spacing:-.02em; }
.hero h1 .num{
  display:block; font-size:clamp(3.8rem,20vw,6rem); line-height:.95;
  text-shadow:0 6px 26px rgba(120,60,0,.38); font-variant-numeric:tabular-nums;
}
.hero h1 em{ display:block; font-style:normal; font-size:clamp(1.4rem,6.5vw,2rem); margin-top:2px; }
.hero .sub{ font-size:1.02rem; font-weight:600; margin-top:10px; opacity:.96; }

.prize{
  margin-top:18px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  border-radius:16px; padding:13px 16px; backdrop-filter:blur(3px);
}
.prize span{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.1em; opacity:.85; }
.prize b{ display:block; font-size:1.06rem; font-weight:800; margin-top:3px; }

/* ══ « Bientôt » ══════════════════════════════════════════════════════════
   Ce qui remplace le compte à rebours. Un point qui bat, et rien de plus :
   aucune date affichée nulle part sur la page. */
.soon{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.28);
  border-radius:100px; padding:9px 20px; font-size:1rem; font-weight:900; letter-spacing:.02em;
}
.soon i{
  width:10px; height:10px; border-radius:50%; background:#FFE9B0; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,233,176,.7); animation:beat 1.9s ease-out infinite;
}
@keyframes beat{
  0%  { box-shadow:0 0 0 0 rgba(255,233,176,.7); transform:scale(1); }
  70% { box-shadow:0 0 0 13px rgba(255,233,176,0); transform:scale(1.18); }
  100%{ box-shadow:0 0 0 0 rgba(255,233,176,0); transform:scale(1); }
}
.soon-p{ font-size:.84rem; opacity:.92; margin-top:9px; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px; }
.chip{
  background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.26);
  border-radius:100px; padding:5px 13px; font-size:.78rem; font-weight:700;
}

.joined{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:rgba(255,255,255,.18); border-radius:100px; padding:7px 16px; font-size:.85rem; font-weight:700;
}
.joined i{ width:8px; height:8px; border-radius:50%; background:#7CFFB2; flex-shrink:0;
           box-shadow:0 0 0 4px rgba(124,255,178,.25); animation:beat 2.4s ease-out infinite; }
.joined .num{ font-variant-numeric:tabular-nums; font-weight:900; }

/* Le bouton du héros : un dégradé qui glisse en continu, pour que l'œil y
   revienne sans qu'on ait besoin de le faire clignoter. */
.hero-go{
  display:block; margin-top:20px; min-height:58px; line-height:58px;
  border-radius:16px; text-decoration:none; color:var(--brun);
  background:linear-gradient(100deg,#FFF6E0,#FFD98A,#FFF6E0); background-size:220% 100%;
  font-weight:900; font-size:1.05rem; box-shadow:0 16px 34px -18px rgba(0,0,0,.55);
  animation:slide 3.4s linear infinite;
  transition:transform .2s var(--ease);
}
@keyframes slide{ to{ background-position:220% 0; } }
.hero-go:hover{ transform:translateY(-2px); }
.hero-go:active{ transform:scale(.98); }

.scroll{ margin-top:16px; font-size:.76rem; opacity:.85; }
.scroll i{
  display:block; width:11px; height:11px; margin:6px auto 0;
  border-inline-end:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); animation:hop 1.7s ease-in-out infinite;
}
@keyframes hop{ 50%{ transform:rotate(45deg) translate3d(3px,3px,0); } }

/* ══ Blocs ════════════════════════════════════════════════════════════════ */
.card{
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border:1px solid var(--bord); border-radius:var(--r);
  padding:22px 18px; margin-bottom:16px; box-shadow:0 10px 30px -22px rgba(43,26,7,.5);
}
.card h2{ font-size:1.16rem; font-weight:800; margin-bottom:5px; }
.card .lead{ color:var(--doux); font-size:.88rem; margin-bottom:16px; }

/* ══ Les 3 étapes ═════════════════════════════════════════════════════════ */
.steps{ display:grid; gap:11px; margin-top:14px; }
.step{ display:flex; gap:13px; align-items:flex-start; }
.step .n{
  flex-shrink:0; width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--or-clair),var(--or)); color:#fff; font-weight:900;
  box-shadow:0 8px 18px -10px rgba(232,137,11,.9);
}
.step b{ display:block; font-size:.95rem; }
.step p{ color:var(--doux); font-size:.83rem; }
/* Les étapes entrent l'une après l'autre quand la carte devient visible. */
.reveal .step{ opacity:0; transform:translateY(14px); }
.reveal.in .step{ animation:pop .6s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes pop{ to{ opacity:1; transform:none; } }

/* ══ Avancement du formulaire ═════════════════════════════════════════════
   Neuf questions, c'est long. Voir la barre monter est ce qui fait terminer
   plutôt que fermer. `scaleX` et non `width` : voir l'en-tête de la feuille. */
.prog{ margin:2px 0 18px; }
.prog-t{ display:flex; justify-content:space-between; align-items:center;
         font-size:.78rem; font-weight:700; color:var(--doux); margin-bottom:7px; }
.prog-t b{ color:var(--or-fonce); font-variant-numeric:tabular-nums; }
.prog-r{ height:9px; border-radius:100px; background:rgba(43,26,7,.09); overflow:hidden; }
.prog-r i{
  display:block; height:100%; width:100%; border-radius:100px; transform-origin:inline-start;
  background:linear-gradient(90deg,var(--or-clair),var(--or-vif),var(--or));
  background-size:200% 100%;
  transition:transform .55s var(--ease); animation:slide 2.6s linear infinite;
}
.prog.full .prog-t b{ color:var(--vert); }
.prog.full .prog-r i{ background:linear-gradient(90deg,#4ADE80,#16a34a); }

/* ══ Formulaire ═══════════════════════════════════════════════════════════ */
.fld{ margin-bottom:16px; }
.fld > label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:7px; }
.opt{
  font-weight:600; font-size:.72rem; color:var(--doux); background:var(--creme);
  border:1px solid var(--bord); border-radius:100px; padding:1px 9px; margin-inline-start:6px;
}
.help{ font-size:.76rem; color:var(--doux); margin-top:6px; }
input[type=text], input[type=tel], select, textarea{
  width:100%; border:1.5px solid var(--bord); border-radius:13px; background:var(--blanc);
  color:var(--texte); font:inherit;
  /* 16 px et 52 px : en dessous, iOS zoome à la mise au point et casse la mise
     en page pendant la saisie — sur un formulaire, c'est fatal. */
  font-size:16px; min-height:52px; padding:12px 15px;
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
textarea{ min-height:76px; resize:vertical; line-height:1.6; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--or); box-shadow:0 0 0 4px rgba(232,137,11,.15);
  transform:translateY(-1px);
}
/* Un champ correctement rempli se marque en vert : la personne sait qu'elle
   peut passer au suivant sans avoir à relire. */
.fld.ok input, .fld.ok select, .fld.ok textarea{ border-color:rgba(22,163,74,.55); }
.fld.ok > label::after{
  content:'✓'; color:var(--vert); font-weight:900; margin-inline-start:7px;
  display:inline-block; animation:pop-in .35s var(--ease);
}
@keyframes pop-in{ from{ opacity:0; transform:scale(.3); } }
input.bad, select.bad, textarea.bad{ border-color:var(--rouge); }
.err{ color:var(--rouge); font-size:.8rem; margin-top:6px; font-weight:600; }

/* Les choix en cartes : plus rapides à toucher qu'une liste déroulante, et
   tout est visible d'un coup — on ne cherche pas dans un menu. */
.opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:9px; }
.opts label{
  position:relative; display:flex; align-items:center; gap:9px; cursor:pointer;
  border:1.5px solid var(--bord); border-radius:13px; padding:12px 13px; min-height:52px;
  background:var(--blanc); font-size:.9rem; font-weight:600;
  transition:transform .22s var(--ease), border-color .2s, background .2s;
}
.opts input{ position:absolute; opacity:0; width:0; height:0; }
.opts label:active{ transform:scale(.96); }
.opts label:has(input:checked){
  border-color:var(--or); background:rgba(232,137,11,.09); color:var(--or-fonce); font-weight:800;
  animation:tick .4s var(--ease);
}
@keyframes tick{ 40%{ transform:scale(1.05); } }
.opts label:has(input:focus-visible){ box-shadow:0 0 0 4px rgba(232,137,11,.2); }
.opts .em{ font-size:1.3rem; line-height:1; transition:transform .3s var(--ease); }
.opts label:has(input:checked) .em{ transform:scale(1.2) rotate(-8deg); }

.consent{
  display:flex; gap:11px; align-items:flex-start; background:var(--creme);
  border:1px solid var(--bord); border-radius:14px; padding:13px 15px; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.consent:has(input:checked){ border-color:rgba(22,163,74,.5); background:rgba(22,163,74,.06); }
.consent input{ width:22px; height:22px; accent-color:var(--or); flex-shrink:0; margin-top:2px; }
.consent span{ font-size:.85rem; line-height:1.6; }

.go{
  position:relative; overflow:hidden;
  width:100%; min-height:60px; border:0; border-radius:16px; cursor:pointer;
  background:linear-gradient(100deg,var(--or-vif),#E8890B 45%,var(--or-vif));
  background-size:220% 100%; color:#fff;
  font:inherit; font-size:1.08rem; font-weight:900; letter-spacing:.01em;
  box-shadow:0 16px 34px -16px rgba(232,137,11,.85); margin-top:6px;
  animation:slide 3.4s linear infinite;
  transition:transform .2s var(--ease);
}
.go span{ position:relative; z-index:1; }
.go::after{
  content:''; position:absolute; top:0; inset-inline-start:-40%; width:35%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translate3d(0,0,0); animation:swipe 3.6s ease-in-out infinite;
}
@keyframes swipe{ 0%,60%{ transform:translate3d(-60px,0,0); } 100%{ transform:translate3d(340px,0,0); } }
.go:hover{ transform:translateY(-2px); }
.go:active{ transform:scale(.98); }
.go:disabled{ opacity:.65; cursor:default; animation:none; transform:none; }
.go:disabled::after{ display:none; }

/* Piège à robots : invisible pour un humain, rempli par les scripts.

   PAS `left:-9999px`. En RTL — et la page est en arabe par défaut — un élément
   poussé à gauche hors écran ÉTEND le document de l'autre côté : mesuré à
   10 389 px de large au lieu de 390 sur un téléphone, avec le défilement
   horizontal qui va avec. Le motif ci-dessous découpe l'élément sur place :
   il reste dans le DOM, donc les robots le remplissent, mais il n'occupe
   plus aucune surface. */
.hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ══ Réseaux ══════════════════════════════════════════════════════════════ */
.socials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
.soc{
  display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px;
  border-radius:14px; text-decoration:none; color:#fff; font-weight:800; font-size:.92rem;
  transition:transform .22s var(--ease), filter .22s;
}
.soc:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.soc:active{ transform:scale(.97); }
.soc.fb{ background:#1877F2; } .soc.ig{ background:linear-gradient(45deg,#F09433,#DC2743,#BC1888); }
.soc.tk{ background:#111; } .soc.wa{ background:#25D366; }

/* ══ Règlement ════════════════════════════════════════════════════════════ */
.rules{ list-style:none; display:grid; gap:9px; margin-top:12px; }
.rules li{ display:flex; gap:10px; font-size:.85rem; color:var(--doux); line-height:1.65; }
.rules li::before{ content:'✓'; color:var(--or); font-weight:900; flex-shrink:0; }
.reveal .rules li{ opacity:0; transform:translateY(10px); }
.reveal.in .rules li{ animation:pop .5s var(--ease) forwards; animation-delay:var(--d,0ms); }

footer{ text-align:center; padding:26px 0 40px; color:var(--doux); font-size:.8rem; }
/* Le lien de retour est le dernier de la page ; à 15 px de haut on le ratait
   au doigt. `inline-flex` + `min-height` lui donnent une vraie zone de touche
   sans changer son apparence. */
footer a{ font-weight:700; display:inline-flex; align-items:center; justify-content:center;
          min-height:44px; padding:0 12px; }

/* ══ Bouton collant ═══════════════════════════════════════════════════════
   Il n'existe que sur la partie haute de la page et disparaît dès que le
   formulaire est à l'écran (classe retirée par le script) : un bouton fixe
   par-dessus le champ qu'on remplit est une gêne, pas un raccourci. */
.stick{
  position:fixed; z-index:30; inset-inline:16px; bottom:calc(14px + env(safe-area-inset-bottom));
  max-width:648px; margin:0 auto; min-height:56px;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  border-radius:16px; color:#fff; font-weight:900; font-size:1.02rem;
  background:linear-gradient(100deg,var(--or-vif),#E8890B 50%,var(--or-vif));
  background-size:220% 100%; animation:slide 3.4s linear infinite;
  box-shadow:0 18px 40px -16px rgba(232,137,11,.9);
  opacity:0; transform:translateY(90px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.stick.on{ opacity:1; transform:none; pointer-events:auto; }
.stick:active{ transform:scale(.98); }

/* ══ Page de remerciement ═════════════════════════════════════════════════ */
.done{ text-align:center; }
.done .big{ font-size:3.6rem; line-height:1; margin-bottom:10px; animation:cheer 2.6s ease-in-out infinite; }
@keyframes cheer{ 25%{ transform:rotate(-11deg) scale(1.12); } 60%{ transform:rotate(9deg) scale(1.06); } }
.done h1{ font-size:1.6rem; font-weight:900; margin-bottom:6px; }
.done p{ color:var(--doux); }
.reflink{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.reflink input{ flex:1 1 200px; text-align:center; font-weight:700; font-size:15px; }
.reflink button{
  flex:0 0 auto; min-height:52px; padding:0 20px; border:0; border-radius:13px; cursor:pointer;
  background:var(--brun); color:#fff; font:inherit; font-weight:800;
  transition:transform .2s var(--ease);
}
.reflink button:active{ transform:scale(.96); }
.refcount{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  background:rgba(232,137,11,.1); border:1px solid rgba(232,137,11,.3); color:var(--or-fonce);
  border-radius:100px; padding:7px 16px; font-weight:800; font-size:.9rem;
}
.alert{
  border-radius:14px; padding:14px 16px; font-weight:700; font-size:.92rem; margin-bottom:16px;
  background:rgba(220,38,38,.09); border:1px solid rgba(220,38,38,.3); color:var(--rouge);
}
.shake{ animation:shake .5s var(--ease); }
@keyframes shake{ 20%{ transform:translateX(-7px); } 45%{ transform:translateX(6px); } 70%{ transform:translateX(-3px); } }

/* ══ Entrées ══════════════════════════════════════════════════════════════
   `rise` part tout seul au chargement (le héros), `reveal` attend que le bloc
   entre dans l'écran (le script pose la classe `in`). */
.rise{ opacity:0; transform:translateY(20px); animation:pop .75s var(--ease) forwards; animation-delay:var(--d,0ms); }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* Sans JavaScript, rien ne doit rester invisible : rien de plus grave qu'une
   page blanche parce qu'un script n'a pas chargé. */
.no-js .reveal{ opacity:1; transform:none; }

/* ══ Grand écran ══════════════════════════════════════════════════════════ */
@media (min-width:760px){
  .wrap{ max-width:720px; padding:0 20px; }
  .hero{ padding:44px 34px 38px; }
  .card{ padding:26px 24px; }
  .stick{ display:none; }   /* la souris atteint le formulaire d'un coup de molette */
}

/* ══ Respect du réglage système ═══════════════════════════════════════════
   Certaines personnes désactivent les animations pour cause de vertiges ou de
   migraines ; d'autres pour économiser la batterie. On coupe tout, et on
   s'assure que ce qui devait apparaître est bien visible. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  html{ scroll-behavior:auto; }
  .rise, .reveal, .reveal .step, .reveal .rules li{ opacity:1!important; transform:none!important; }
  .stick{ opacity:1; transform:none; pointer-events:auto; }
}