/* =====================================================================================
   PAGE D'ACCUEIL DES VISITEURS — MOTION DESIGN (02/10/2026)
   Demande de Ju : « refais la page d'accueil avec du nouveau motion design, du flou en fond
   avec une action 2D, un truc beau, dynamique et poussé ».
   En fond : une VRAIE action du jeu (public/actions-motion/), jouée en boucle et floutée
   plein écran. Devant : la même action, nette, dans un écran de télévision.
   Marquage : la racine porte `acs acm` — `acs` garde les exclusions de motion-entree.css
   (pas de carte autour de l'écran), `acm` porte tout ce qui suit. Logique : accueil-motion.js.
   ===================================================================================== */
#titlescreen:has(.acm){align-items:flex-start;overflow-y:auto;overflow-x:hidden;background:#03060f;scroll-behavior:smooth}
#titlescreen:has(.acm) .ts-decor{display:none}
#titlescreen .ts-inner.wide:has(>.acm){max-width:none;width:100%;max-height:none;overflow:visible;padding:0;text-align:left}
#titlescreen .acm{--or:#f4c04a;--or2:#ffe6a3;--ciel:#5bc0ff;--px:0;--py:0;position:relative;color:#eef3ff;font-family:'Chakra Petch','Segoe UI',sans-serif;isolation:isolate}

/* ---------- LE FOND : l'action floutée, puis les voiles ---------- */
.acm-fond{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#03060f}
.acm-fond canvas,.acm-fond .acm-fond-img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  filter:blur(9px) saturate(1.25) brightness(.62);transform:translate3d(calc(var(--px)*-14px),calc(var(--py)*-10px),0) scale(1.04);
  transition:opacity 1.2s ease;will-change:transform}
.acm-fond .acm-fond-img{background:url('/images/accueil/match2d.webp?v=2') center/cover;opacity:1}
.acm-fond.pret .acm-fond-img{opacity:0}
.acm-fond canvas{opacity:0}
.acm-fond.pret canvas{opacity:1}
.acm-fond.coupe canvas{opacity:.25}
/* voile : sombre à gauche pour lire le texte, lumière dorée à droite derrière l'écran */
.acm-voile{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 72% 42%,rgba(244,192,74,.16),transparent 70%),
  radial-gradient(50% 60% at 18% 90%,rgba(91,192,255,.12),transparent 70%),
  linear-gradient(90deg,rgba(3,6,15,.92) 0%,rgba(3,6,15,.66) 42%,rgba(3,6,15,.28) 100%),
  linear-gradient(180deg,rgba(3,6,15,.35) 0%,transparent 30%,transparent 70%,rgba(3,6,15,.95) 100%)}
/* projecteurs du stade qui balaient lentement */
.acm-projo{position:absolute;top:-30%;width:70vmax;height:140vmax;transform-origin:50% 0;opacity:.16;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,240,200,.9),rgba(255,240,200,0) 70%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(18px)}
.acm-projo.g{left:-10%;animation:acmProjoG 14s ease-in-out infinite}
.acm-projo.d{right:-10%;animation:acmProjoD 17s ease-in-out infinite}
@keyframes acmProjoG{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(-12deg)}}
@keyframes acmProjoD{0%,100%{transform:rotate(26deg)}50%{transform:rotate(10deg)}}
/* bokeh doré qui flotte */
.acm-bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,220,140,.55),rgba(255,220,140,0) 70%);
  filter:blur(2px);animation:acmFlotte var(--d,18s) ease-in-out infinite;animation-delay:var(--r,0s);
  translate:calc(var(--px)*var(--k,10px)) calc(var(--py)*var(--k,10px))}
@keyframes acmFlotte{0%,100%{transform:translateY(0) scale(1);opacity:.25}50%{transform:translateY(-38px) scale(1.15);opacity:.6}}
/* grain de pellicule */
.acm-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;animation:acmGrain .9s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes acmGrain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* ---------- LA BARRE ---------- */
.acm-barre{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,56px);
  transition:background .3s,backdrop-filter .3s,padding .3s}
.acm.defile .acm-barre{background:rgba(3,6,15,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:11px;box-shadow:0 1px 0 rgba(244,192,74,.18)}
.acm-marque{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:15px;color:#fff}
.acm-marque i{width:9px;height:9px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 0 0 rgba(255,59,92,.7);animation:acmPouls 1.6s infinite}
.acm-marque span{color:var(--or)}
@keyframes acmPouls{0%{box-shadow:0 0 0 0 rgba(255,59,92,.7)}70%{box-shadow:0 0 0 10px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
.acm-lien{font-family:inherit;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:9px 20px;
  font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}
.acm-lien:hover{background:rgba(244,192,74,.16);border-color:rgba(244,192,74,.6);transform:translateY(-1px)}

/* ---------- LA UNE ---------- */
.acm-une{min-height:calc(100vh - 70px);min-height:calc(100svh - 70px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);
  align-items:center;padding:10px clamp(16px,4vw,56px) 70px;max-width:1380px;margin:0 auto;position:relative}
.acm-sur{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--or2);margin-bottom:22px;
  animation:acmMonte .9s .05s cubic-bezier(.2,.8,.2,1) both}
.acm-sur::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--or));}
#titlescreen .acm h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(40px,6.2vw,86px);line-height:.98;letter-spacing:-.01em;margin:0 0 26px;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.55)}
#titlescreen .acm h1::after{display:none}
.acm-mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.acm-mot>*{display:inline-block;animation:acmMot 1s cubic-bezier(.16,.84,.24,1) both;animation-delay:calc(.25s + var(--i)*70ms)}
@keyframes acmMot{0%{transform:translateY(105%) rotate(4deg);opacity:0;filter:blur(6px)}100%{transform:none;opacity:1;filter:none}}
#titlescreen .acm h1 em{font-style:italic;color:transparent;background:linear-gradient(100deg,#c9952f 0%,#f4c04a 30%,#fff6d6 48%,#f4c04a 62%,#c9952f 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:acmMot 1s cubic-bezier(.16,.84,.24,1) both,acmBrille 5s 1.4s linear infinite;animation-delay:calc(.25s + var(--i)*70ms),1.4s;padding-right:.08em}
@keyframes acmBrille{0%{background-position:100% 0}100%{background-position:-160% 0}}
.acm-texte p{font-size:clamp(15.5px,1.25vw,18px);line-height:1.65;color:#c9d6f2;margin:0 0 34px;max-width:31em;animation:acmMonte 1s .95s cubic-bezier(.2,.8,.2,1) both;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.acm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;animation:acmMonte 1s 1.15s cubic-bezier(.2,.8,.2,1) both}
@keyframes acmMonte{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
.acm-cta{position:relative;overflow:hidden;font-family:inherit;background:linear-gradient(180deg,#ffd978,#f2b52e);color:#241500;border:0;border-radius:14px;
  padding:17px 34px;font-size:17px;font-weight:700;letter-spacing:.03em;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  box-shadow:0 0 0 1px rgba(255,230,163,.6),0 14px 40px -10px rgba(244,192,74,.75);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.acm-cta::before{content:'';position:absolute;inset:-3px;border-radius:17px;border:2px solid rgba(244,192,74,.7);animation:acmHalo 2.4s ease-out infinite;pointer-events:none}
.acm-cta::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:acmReflet 3.6s 2s ease-in-out infinite;pointer-events:none}
.acm-cta b{display:inline-block;transition:transform .25s}
.acm-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px #fff3c4,0 22px 50px -10px rgba(244,192,74,.95)}
.acm-cta:hover b{transform:translateX(5px)}
.acm-cta:active{transform:translateY(0) scale(.98)}
@keyframes acmHalo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.18,1.5);opacity:0}}
@keyframes acmReflet{0%{left:-60%}35%,100%{left:130%}}
.acm-note{font-size:13px;color:#a9b8d8;display:flex;gap:14px;flex-wrap:wrap}
.acm-note span{display:inline-flex;align-items:center;gap:6px}
.acm-note span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--or)}

/* ---------- L'ÉCRAN : l'action nette ---------- */
.acm-scene{perspective:1400px;animation:acmEcranArrive 1.3s .45s cubic-bezier(.16,.84,.24,1) both}
@keyframes acmEcranArrive{0%{opacity:0;transform:translateY(40px) scale(.94);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
.acm-tv{position:relative;border-radius:18px;padding:10px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(244,192,74,.12),0 0 80px -20px rgba(244,192,74,.35);
  transform:rotateY(calc(-7deg + var(--px)*5deg)) rotateX(calc(4deg - var(--py)*4deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.acm-tv::before{content:'';position:absolute;inset:-1px;border-radius:19px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(244,192,74,.95) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:acmTour 6s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes acmTour{to{--ang:360deg}}
.acm-ecran{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:#05070d}
.acm-ecran canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .45s ease}
.acm-ecran.coupe canvas{opacity:0}
.acm-ecran .acm-ecran-img{position:absolute;inset:0;background:url('/images/accueil/match2d.webp?v=2') center/cover;transition:opacity .6s}
.acm-ecran.pret .acm-ecran-img{opacity:0}
/* reflet de vitre */
.acm-ecran::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%)}
.acm-direct{position:absolute;left:22px;top:-13px;z-index:2;display:flex;align-items:center;gap:7px;background:#ff3b5c;color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:7px;box-shadow:0 8px 20px rgba(255,59,92,.45)}
.acm-direct i{width:7px;height:7px;border-radius:50%;background:#fff;animation:acmClign 1.1s steps(2) infinite}
@keyframes acmClign{50%{opacity:.15}}
.acm-legende{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 6px 2px;font-size:13px;color:#b8c6e6;min-height:20px}
.acm-legende b{color:#fff;font-weight:700;letter-spacing:.04em;transition:opacity .35s, transform .35s}
.acm-legende b.change{opacity:0;transform:translateY(6px)}
.acm-legende small{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.acm-flottant{position:absolute;z-index:3;padding:10px 14px;border-radius:12px;background:rgba(6,12,26,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:12.5px;color:#dbe5fb;
  display:flex;align-items:center;gap:10px;animation:acmFlotteCarte 6s ease-in-out infinite;pointer-events:none}
.acm-flottant strong{display:block;color:#fff;font-size:15px}
.acm-flottant .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:17px;background:rgba(244,192,74,.18)}
.acm-flottant.f1{right:-18px;top:16%;animation-delay:-1s}
/* sous l écran, pour ne jamais couvrir le bandeau du buteur dessiné en bas à gauche de l action */
.acm-flottant.f2{left:28px;bottom:-68px;animation-delay:-3.5s}
.acm-flottant.f2 .ic{background:rgba(61,220,151,.18)}
@keyframes acmFlotteCarte{0%,100%{transform:translateY(0) translateZ(40px)}50%{transform:translateY(-12px) translateZ(40px)}}

.acm-defiler{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#93a3c6;cursor:pointer;animation:acmMonte 1s 1.8s both}
.acm-defiler i{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;position:relative}
.acm-defiler i::after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--or);animation:acmRoulette 1.8s ease-in-out infinite}
@keyframes acmRoulette{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}

/* ---------- LE BANDEAU DE L'ACTUALITÉ ---------- */
.acm-bandeau{position:relative;overflow:hidden;border-block:1px solid rgba(244,192,74,.22);background:rgba(4,8,18,.7);backdrop-filter:blur(8px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.acm-bandeau-piste{display:flex;width:max-content;animation:acmDefile 48s linear infinite}
.acm-bandeau:hover .acm-bandeau-piste{animation-play-state:paused}
.acm-bandeau-piste span{display:inline-flex;align-items:center;gap:18px;padding:15px 18px;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:.04em;color:#e8eefc}
.acm-bandeau-piste span::after{content:'◆';color:var(--or);font-size:9px}
.acm-bandeau-piste em{font-style:normal;color:var(--or);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@keyframes acmDefile{to{transform:translateX(-50%)}}

/* ---------- LES QUATRE MONDES ---------- */
.acm-section{max-width:1380px;margin:0 auto;padding:clamp(60px,9vw,120px) clamp(16px,4vw,56px) 20px}
.acm-section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.acm-section-tete h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(30px,3.8vw,52px);line-height:1.02;margin:0;color:#fff}
.acm-section-tete h2 em{font-style:italic;color:var(--or)}
.acm-section-tete p{max-width:26em;margin:0;color:#a9b8d8;font-size:15px;line-height:1.6;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.acm-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.acm-carte{--mx:50%;--my:50%;position:relative;border-radius:20px;overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;
  background:#0a1022;border:1px solid rgba(255,255,255,.1);cursor:default;
  opacity:0;transform:translateY(50px) scale(.97);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
  transition-delay:calc(var(--i,0)*110ms)}
.acm-carte.vu{opacity:1;transform:none}
.acm-carte-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(1.05) brightness(.85)}
.acm-carte::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,6,15,0) 30%,rgba(3,6,15,.82) 68%,rgba(3,6,15,.97) 100%)}
.acm-carte::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(244,192,74,.22),transparent 45%)}
.acm-carte-txt{position:relative;z-index:3;padding:22px 22px 24px}
.acm-carte-txt small{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--c,var(--or));margin-bottom:10px}
.acm-carte-txt b{display:block;font-size:22px;line-height:1.15;color:#fff;margin-bottom:8px}
.acm-carte-txt p{margin:0;font-size:14px;line-height:1.55;color:#b9c6e3;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.acm-carte-trait{position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--c,var(--or));z-index:3;transform:scaleX(.18);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){
  .acm-carte:hover{border-color:rgba(244,192,74,.45);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .acm-carte:hover .acm-carte-img{transform:scale(1.16);filter:saturate(1.2) brightness(.95)}
  .acm-carte:hover::after{opacity:1}
  .acm-carte:hover .acm-carte-trait{transform:scaleX(1)}
}
.acm-carte:nth-child(1){--c:#5bc0ff}.acm-carte:nth-child(2){--c:#3ddc97}.acm-carte:nth-child(3){--c:#f4c04a}.acm-carte:nth-child(4){--c:#c9a0ff}

/* ---------- LE DERNIER APPEL ---------- */
.acm-fin{position:relative;max-width:1100px;margin:clamp(50px,8vw,100px) auto 0;padding:clamp(44px,6vw,80px) clamp(18px,4vw,60px);text-align:center;border-radius:28px;overflow:hidden;
  border:1px solid rgba(244,192,74,.25);background:radial-gradient(120% 140% at 50% 0%,rgba(244,192,74,.16),rgba(6,10,22,.75) 60%);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.acm-fin.vu{opacity:1;transform:none}
.acm-fin::before{content:'';position:absolute;left:50%;top:-140px;width:340px;height:340px;margin-left:-170px;border-radius:50%;background:radial-gradient(circle,rgba(244,192,74,.35),transparent 65%);filter:blur(10px);animation:acmFlotte 9s ease-in-out infinite;pointer-events:none}
.acm-fin h2{position:relative;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(32px,4.6vw,62px);line-height:1.02;margin:0 0 14px;color:#fff}
.acm-fin h2 em{font-style:italic;color:var(--or)}
.acm-fin p{position:relative;margin:0 auto 30px;max-width:30em;color:#b9c6e3;font-size:15.5px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.acm-pied{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 16px 34px}
.acm-pied .acm-cx{font-size:14px;color:#b9c6e3}
.acm-pied .acm-cx span{color:var(--or);font-weight:700;cursor:pointer}
.acm-pied .acm-legal{font-size:12px;color:#7d8bab;text-align:center;line-height:1.8}
.acm-pied .acm-legal a{color:#9aa8c8;text-decoration:none}
.acm-pied .acm-legal a:hover{color:#fff}

/* ---------- TÉLÉPHONE ---------- */
@media(max-width:1100px){.acm-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.acm-carte{min-height:340px}}
@media(max-width:860px){
  .acm-une{grid-template-columns:1fr;min-height:0;padding-top:8px;padding-bottom:88px;gap:44px}
  .acm-voile{background:radial-gradient(80% 50% at 50% 62%,rgba(244,192,74,.14),transparent 70%),linear-gradient(180deg,rgba(3,6,15,.55) 0%,rgba(3,6,15,.82) 50%,rgba(3,6,15,.96) 100%)}
  .acm-tv{transform:none}
  .acm-flottant.f1{right:-6px;top:-30px}
  /* 02/10 (supervision) : à -42px la carte couvrait la légende de l'action ; on la pose sous l'écran */
  .acm-flottant.f2{left:auto;right:-6px;top:auto;bottom:-66px}
  .acm-defiler{display:none}
  .acm-cta{width:100%;justify-content:center}
  .acm-actions{flex-direction:column;align-items:stretch}
  .acm-note{justify-content:center}
}
@media(max-width:560px){
  .acm-grille{grid-template-columns:1fr}
  .acm-carte{min-height:300px}
  .acm-marque{font-size:13px;letter-spacing:.1em}
  .acm-lien{padding:8px 14px;font-size:13px}
  .acm-flottant{font-size:11.5px;padding:8px 11px}
  .acm-flottant strong{font-size:13.5px}
  .acm-flottant .ic{width:26px;height:26px;font-size:14px}
}
/* Mouvement réduit / animations coupées : tout est posé, rien ne bouge, l'image fixe reste. */
@media (prefers-reduced-motion: reduce){
  .acm *,.acm *::before,.acm *::after{animation:none!important;transition:none!important}
  .acm-carte,.acm-fin{opacity:1;transform:none}
}
body.anim-off .acm *,body.anim-off .acm *::before,body.anim-off .acm *::after{animation:none!important;transition:none!important}
body.anim-off .acm-carte,body.anim-off .acm-fin{opacity:1;transform:none}

/* ---------- TÉLÉPHONE : ALLÉGÉ (02/10/2026) ----------
   Mesure (processeur ralenti ×4) : 35 images/s et 21 à-coups en 15 s. Le flou CSS plein écran,
   les projecteurs flous animés, le grain et les vitres floutées coûtaient trop cher. Sur
   téléphone, accueil-motion.js dessine le fond en TRÈS basse définition (le grossissement le
   floute tout seul) et l'assombrit lui-même : plus aucun filtre à recalculer à chaque image. */
@media (max-width:860px),(pointer:coarse){
  .acm-fond canvas{filter:none;transform:none;inset:0;width:100%;height:100%}
  .acm-fond .acm-fond-img{filter:blur(6px) brightness(.6)}
  .acm-projo,.acm-grain{display:none}
  .acm-bokeh{animation:none;opacity:.35}
  .acm-tv,.acm-flottant,.acm-bandeau,.acm.defile .acm-barre,.acm-fin{backdrop-filter:none;-webkit-backdrop-filter:none}
  .acm-tv{background:rgba(20,26,44,.92)}
  .acm-flottant{background:rgba(6,12,26,.94)}
  .acm-tv::before{animation:none}
}