/* Animations du site — chargées seulement si « Animations » est activé dans les réglages.
   Règle : sans JavaScript, ou si le visiteur a demandé moins d'animations à son téléphone,
   tout le contenu reste visible et immobile. Les états « cachés » n'existent que sous html.anim. */

html, body { overflow-x: clip; }

/* ---------- Transitions entre pages (Chrome, Edge, Safari récents) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sortie .35s ease both; }
::view-transition-new(root) { animation: vt-entree .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateX(60px); } }

/* ---------- Apparitions au défilement ---------- */
/* 11/10 (mesure de vitesse) : la transition ne joue qu'à l'apparition (.vu). Avant, poser « anim » faisait aussi
   jouer la disparition de tous les éléments de la page en même temps, au chargement. */
html.anim [data-anim].vu { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--retard, 0s); }
html.anim [data-anim]:not(.vu) { opacity: 0; }
html.anim [data-anim="monte"]:not(.vu) { transform: translateY(34px); }
html.anim [data-anim="glisse"]:not(.vu) { transform: translateX(-40px); }
html.anim [data-anim="zoom"]:not(.vu) { transform: scale(.82); }
html.anim [data-anim="pop"]:not(.vu) { transform: scale(.6) translateY(20px); }
html.anim [data-anim="pop"].vu { transition-timing-function: ease, cubic-bezier(.3,1.6,.5,1); }
html.anim .ar-cadre-penche[data-anim].vu { transform: rotate(-3deg); }
html.anim .ar-cadre-penche-2[data-anim].vu { transform: rotate(3deg); }

/* Les titres se dévoilent de gauche à droite */
/* (une animation et non une transition : un titre « découpé » à zéro ne serait jamais détecté à l'écran) */
/* Msg 7853 : « c'est découpé » : le titre ne garde plus de découpe une fois dévoilé (remplissage « backwards » au lieu
   de « both ») : un titre plus large que sa colonne n'est plus coupé net à la fin de l'animation */
html.anim [data-anim="titre"].vu { animation: devoile 1s cubic-bezier(.6,.05,.3,1) backwards; }
@keyframes devoile { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Agilité, adresse, réflexion : chaque carte arrive dans le noir, puis un projecteur l'allume */
.ar-fam-carte { position: relative; overflow: hidden; }
html.anim [data-anim="allume"]:not(.vu) { transform: translateY(50px) scale(.94); }
html.anim [data-anim="allume"].vu { animation: allumage 1.6s ease both; animation-delay: var(--retard, 0s); }
html.anim [data-anim="allume"]::after { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,236,190,.75), rgba(255,236,190,0) 70%),
              linear-gradient(105deg, transparent 38%, rgba(255,250,235,.7) 50%, transparent 62%); background-size: 100% 100%, 260% 100%; }
html.anim [data-anim="allume"].vu::after { animation: projecteur 1.6s ease both; animation-delay: calc(var(--retard, 0s) + .35s); }
@keyframes allumage {
  0% { filter: brightness(.25) saturate(.4); box-shadow: 6px 6px 0 var(--encre); }
  45% { filter: brightness(1.25) saturate(1.1); box-shadow: 6px 6px 0 var(--encre), 0 0 0 6px rgba(232,166,19,.55), 0 0 48px 10px rgba(232,166,19,.55); }
  100% { filter: none; box-shadow: 6px 6px 0 var(--encre); }
}
@keyframes projecteur {
  0% { opacity: 0; background-position: 0 0, 130% 0; }
  25% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0, -30% 0; }
}

/* Ordinateur : la première carte tombe « bam », les suivantes arrivent en force et percutent la précédente */
.ar-fam-grille { position: relative; }
html.anim [data-anim="choc"]:not(.vu) { transform: translateX(260px); }
html.anim [data-anim="choc"].vu { animation: arrivee-choc .55s cubic-bezier(.55,0,.8,.2) both, allumage 1.6s ease both; animation-delay: var(--retard, 0s), calc(var(--retard, 0s) + .4s); }
html.anim .ar-fam-carte:first-child[data-anim="choc"].vu { animation-name: bam, allumage; }
html.anim [data-anim="choc"]::after { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,236,190,.75), rgba(255,236,190,0) 70%),
              linear-gradient(105deg, transparent 38%, rgba(255,250,235,.7) 50%, transparent 62%); background-size: 100% 100%, 260% 100%; }
html.anim [data-anim="choc"].vu::after { animation: projecteur 1.4s ease both; animation-delay: calc(var(--retard, 0s) + .45s); }
@keyframes arrivee-choc {
  0% { opacity: 0; transform: translateX(260px) skewX(-8deg); }
  70% { opacity: 1; transform: translateX(-18px) skewX(3deg); }
  85% { transform: translateX(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes bam {
  0% { opacity: 0; transform: scale(1.7) rotate(-6deg); }
  60% { opacity: 1; transform: scale(.92) rotate(1deg); }
  80% { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}
html.anim .ar-fam-carte.secoue { animation: secousse .55s ease both !important; }
html.anim .ar-fam-carte.secoue-leger { animation: secousse-leger .5s ease both !important; }
@keyframes secousse {
  0% { transform: none; }
  15% { transform: translateX(-16px) rotate(-3deg); box-shadow: 6px 6px 0 var(--encre), 0 0 0 5px rgba(232,166,19,.7), 0 0 40px 8px rgba(232,166,19,.6); }
  35% { transform: translateX(10px) rotate(2deg); }
  55% { transform: translateX(-7px) rotate(-1deg); }
  75% { transform: translateX(4px); }
  100% { transform: none; box-shadow: 6px 6px 0 var(--encre); }
}
@keyframes secousse-leger {
  0%, 100% { transform: none; }
  25% { transform: translateX(-7px) rotate(-1.2deg); }
  55% { transform: translateX(4px) rotate(.6deg); }
}
.impact { position: absolute; z-index: 4; width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 10%, var(--moutarde) 11% 26%, rgba(232,166,19,0) 27%),
              conic-gradient(from 10deg, var(--rouge) 0 6%, transparent 6% 12.5%, var(--moutarde) 12.5% 18.5%, transparent 18.5% 25%, var(--rouge) 25% 31%, transparent 31% 37.5%, var(--moutarde) 37.5% 43.5%, transparent 43.5% 50%, var(--rouge) 50% 56%, transparent 56% 62.5%, var(--moutarde) 62.5% 68.5%, transparent 68.5% 75%, var(--rouge) 75% 81%, transparent 81% 87.5%, var(--moutarde) 87.5% 93.5%, transparent 93.5%);
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 70%); mask: radial-gradient(circle, #000 55%, transparent 70%);
  animation: etincelle .6s ease-out both; }
@keyframes etincelle { 0% { transform: scale(.2) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.6) rotate(25deg); opacity: 0; } }

/* Les cartes des occasions se retournent une à une */
.ar-grille-occ { perspective: 1200px; }
html.anim [data-anim="carte"]:not(.vu) { transform: rotateY(-75deg) translateX(-30px); transform-origin: left center; }
html.anim [data-anim="carte"] { transform-origin: left center; }

/* Les étapes s'enchaînent : 1, puis 2, puis 3, et leur cadre s'éclaire au passage */
html.anim [data-anim="etape"]:not(.vu) { transform: translateY(30px); }
html.anim [data-anim="etape"].vu { animation: etape-lumiere 1.4s ease both; animation-delay: var(--retard, 0s); }
@keyframes etape-lumiere { 30% { border-color: var(--moutarde); box-shadow: 0 0 30px rgba(232,166,19,.35); } }

/* Étapes illustrées : la photo tombe comme un polaroïd, zoome doucement, puis le pictogramme se dessine */
html.anim .ar-etapes li.vu .ar-etape-visuel { animation: polaroid .9s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--retard, 0s) + .05s); }
html.anim .ar-etapes li.vu .ar-etape-visuel img { animation: lent-zoom 6s ease-out both; animation-delay: var(--retard, 0s); }
html.anim .ar-etapes li .ar-picto { transform: scale(0); }
html.anim .ar-etapes li.vu .ar-picto { animation: pastille-picto .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--retard, 0s) + .6s); }
html.anim .ar-etapes li .ar-picto svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.anim .ar-etapes li.vu .ar-picto svg * { animation: trace 1s ease forwards; animation-delay: calc(var(--retard, 0s) + .9s); }
@keyframes polaroid { from { transform: translateY(-50px) rotate(-8deg) scale(.85); opacity: 0; } }
@keyframes lent-zoom { from { transform: scale(1.18); } }
@keyframes pastille-picto { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1); } }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Les points « bon à savoir » se cochent un par un */
html.anim [data-anim="coche"]:not(.vu) { transform: translateX(-24px); }
html.anim [data-anim="coche"].vu::before { animation: coche .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--retard, 0s) + .2s); }
@keyframes coche { from { transform: scale(0) rotate(-45deg); } }

/* Haut de page : le texte arrive de la gauche, la photo de la droite, les pastilles sautent */
html.anim .ar-hero-texte > * { animation: hero-texte .8s cubic-bezier(.2,.8,.2,1) both; }
html.anim .ar-hero-texte > :nth-child(2) { animation-delay: .1s; }
html.anim .ar-hero-texte > :nth-child(3) { animation-delay: .2s; }
html.anim .ar-hero-texte > :nth-child(4) { animation-delay: .3s; }
html.anim .ar-hero-texte > :nth-child(5) { animation-delay: .4s; }
html.anim .ar-hero-photo img { animation: hero-photo 1.1s cubic-bezier(.2,.8,.2,1) both; }

  
@keyframes hero-texte { from { opacity: 0; transform: translateX(-60px); } }
@keyframes hero-photo { from { opacity: 0; transform: translateX(80px) scale(1.08); } }
/* Les numéros des étapes battent une fois, l'un après l'autre */
html.anim .ar-etapes li.vu::before { animation: battement .6s ease both; animation-delay: var(--retard, 0s); }
@keyframes battement { 40% { transform: scale(1.35); color: #fff; } }

/* ---------- Compte à rebours ---------- */
.rebours { background: var(--encre); color: #fff; border-top: 3px solid var(--moutarde); border-bottom: 3px solid var(--moutarde); }
.rebours-w { max-width: 1180px; margin: 0 auto; padding: 22px var(--gouttiere, 16px); display: grid; gap: 14px; align-items: center; }
.rebours-titre { margin: 0; font-family: var(--ar-titre, sans-serif); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.1; }
.rebours-titre small { display: block; font-family: inherit; font-size: 12px; letter-spacing: .2em; color: var(--moutarde); margin-bottom: 4px; }
.rebours-texte { margin: 4px 0 0; color: #E5D9CF; font-size: 14.5px; }
.rebours-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rebours-cases li { background: #33282444; border: 2px solid #4a3b35; border-radius: 14px; text-align: center; padding: 8px 4px 6px; overflow: hidden; }
.rebours-cases b { display: block; font-family: var(--ar-titre, sans-serif); font-weight: 800; font-size: 38px; line-height: 1; color: var(--moutarde); font-variant-numeric: tabular-nums; }
.rebours-cases b.change { animation: chiffre .45s cubic-bezier(.2,.8,.2,1); }
.rebours-cases span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #CFC2B8; }
.rebours .ar-btn { justify-self: start; }
@keyframes chiffre { from { transform: translateY(-70%); opacity: 0; } }
@media (min-width: 900px) {
  .rebours-w { grid-template-columns: 1.2fr 1.3fr auto; gap: 28px; }
  .rebours-cases b { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .rebours-cases b.change { animation: none; }
}

/* Compte à rebours tout en haut, sous le menu (02/10, msg 4170) : plus compact, pour ne pas repousser la vidéo */
.rebours .rebours-w { padding-block: 14px; gap: 10px; }
.rebours .rebours-titre { font-size: 18px; }
.rebours .rebours-texte { font-size: 13.5px; }
.rebours .rebours-cases li { padding: 5px 4px 4px; border-radius: 10px; }
.rebours .rebours-cases b { font-size: 28px; }
.rebours .rebours-cases span { font-size: 10px; }
@media (min-width: 900px) { .rebours .rebours-cases b { font-size: 34px; } .rebours .rebours-w { padding-block: 12px; } }

/* Agilité, adresse, réflexion (msg 4325) : chaque carte arrive au centre puis se range à sa place
   (Agilité à gauche, Adresse à droite, Réflexion reste au centre), puis les trois s'allument ensemble. */
html.anim .ar-fam-grille.mots-attente > .ar-fam-carte, html.anim .ar-etapes ol.mots-attente > li { opacity: 0; }
.cartes-seq > .ar-fam-carte, .cartes-seq > li { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); transition: none; }
.cartes-seq > .ar-fam-carte.arrive, .cartes-seq > li.arrive { opacity: 1; z-index: 4; transform: translate(var(--dx), var(--dy)) scale(1.12); transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.4,.5,1); }
.cartes-seq > .ar-fam-carte.arrive.range, .cartes-seq > li.arrive.range { z-index: 3; transform: none; transition: transform .4s cubic-bezier(.6,0,.3,1); }
.ar-fam-carte.brille { animation: allumage 1.1s ease both; }
.ar-fam-carte.brille::after { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,236,190,.75), rgba(255,236,190,0) 70%),
              linear-gradient(105deg, transparent 38%, rgba(255,250,235,.7) 50%, transparent 62%); background-size: 100% 100%, 260% 100%;
  animation: projecteur 1.1s ease both .2s; }
.ar-etapes li { position: relative; }
.ar-etapes li.brille { animation: etape-lumiere 1.1s ease both; }
.ar-etapes li.arrive { background: #1A1412; }