/* ============================================================
   AMARI TEAM — Couche « details » : textures de fond,
   micro-interactions et subtilites visuelles.
   Chargee APRES style.css.
   ============================================================ */

/* ---------- A. GRAIN / TEXTURE PAPIER ---------- */
/* Texture fixe, non animee : le grain doit rester quasi gratuit a l'affichage. */
.grain{
  position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ---------- B. BARRE DE PROGRESSION DE LECTURE ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; z-index:300; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  background:var(--grad-amari); pointer-events:none;
  transition:transform .12s linear;
}

/* ---------- C. TRAMES DE FOND (dots, lignes, terrain) ---------- */
.bg-dots{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(circle, rgba(11,27,51,.16) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
}
.dark .bg-dots{ background-image:radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1px); opacity:.35; }

.bg-hatch{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:repeating-linear-gradient(-45deg, rgba(11,27,51,.05) 0 1px, transparent 1px 11px);
}
.dark .bg-hatch{ background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 11px); }

/* Lignes de terrain de basket, dessinees en SVG (voir .court svg) */
.court{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  color:rgba(11,27,51,.13); overflow:hidden;
}
.dark .court{ color:rgba(255,255,255,.16); }
.court svg{ position:absolute; width:min(120%,1500px); height:auto; }
.court--tr{ }
.court--tr svg{ top:-16%; right:-14%; }
.court--bl svg{ bottom:-22%; left:-18%; }
.court--c svg{ top:50%; left:50%; transform:translate(-50%,-50%); }

/* Cercle de tir qui tourne tres lentement */
.spin-slow{ animation:spin 90s linear infinite; transform-origin:50% 50%; will-change:transform; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin-slow{ animation:none; } }

/* ---------- D. HALOS DE COULEUR EN MOUVEMENT ---------- */
.glow{ animation:float 18s ease-in-out infinite alternate; }
.glow--blue{ animation-duration:24s; animation-delay:-6s; }
.glow--turq{ animation-duration:30s; animation-delay:-12s; }
@keyframes float{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(3vw,-4vh,0) scale(1.09); }
  100%{ transform:translate3d(-2vw,3vh,0) scale(.96); }
}
@media (prefers-reduced-motion: reduce){ .glow{ animation:none; } }

/* ---------- E. SPOT LUMINEUX QUI SUIT LE CURSEUR ---------- */
.spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(242,113,43,.16), rgba(18,181,201,.08) 40%, transparent 68%);
}
.has-spot:hover .spot{ opacity:1; }
@media (hover:none){ .spot{ display:none; } }

/* ---------- F. FILIGRANE DE SECTION ---------- */
.watermark{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-display); text-transform:uppercase; line-height:.78;
  font-size:clamp(6rem,22vw,20rem); color:transparent;
  -webkit-text-stroke:1px rgba(11,27,51,.06); white-space:nowrap;
}
.dark .watermark{ -webkit-text-stroke-color:rgba(255,255,255,.07); }
.watermark--tr{ top:-.12em; right:-.06em; }
.watermark--bl{ bottom:-.14em; left:-.06em; }

/* ---------- G. SEPARATEURS ---------- */
.divider-arc{ display:block; width:100%; height:auto; color:var(--paper); }
.divider-arc path{ fill:currentColor; }

.rule-grad{ height:2px; border:0; margin:0; background:var(--grad-amari); opacity:.85; }

/* Petit ballon stylise repetable */
.ball-rule{
  display:flex; align-items:center; gap:.9rem; color:var(--muted);
  font-size:.68rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
}
.ball-rule::before,.ball-rule::after{ content:""; height:1px; background:var(--line); flex:1; }

/* ---------- H. CARTES : RELIEF ET SUIVI DU POINTEUR ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .5s var(--ease-out); }
.tilt:hover{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px); }
@media (hover:none),(prefers-reduced-motion: reduce){ .tilt:hover{ transform:none; } }

.sheen{ position:relative; overflow:hidden; }
.sheen::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .9s var(--ease-out); pointer-events:none;
}
.sheen:hover::after{ left:125%; }

/* Note : ne jamais redefinir `position` sur [data-placeholder] ici — cela
   ecraserait le position:absolute des medias plein cadre (hero, statement). */

/* ---------- I. BOUTON MAGNETIQUE + POINT LUMINEUX ---------- */
.btn{ transform:translate(var(--tx,0),var(--ty,0)); }
.btn:hover{ transform:translate(var(--tx,0), calc(var(--ty,0px) - 3px)); }
.btn--dot::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
  opacity:.55; transition:transform .45s var(--ease-out), opacity .3s;
}
.btn--dot:hover::before{ transform:scale(1.6); opacity:1; }

/* ---------- J. LIENS DE NAVIGATION : LETTRES QUI GLISSENT ---------- */
/* Le lien sert de fenetre : sans padding vertical, le double du libelle
   reste hors cadre tant qu'on ne survole pas. */
.nav__link{ overflow:hidden; padding:0; line-height:1.55; }
.nav__link .swap{ display:block; position:relative; transition:transform .45s var(--ease-out); }
.nav__link:hover .swap{ transform:translateY(-100%); }
.nav__link .swap::after{
  content:attr(data-t); position:absolute; left:0; top:100%; color:var(--orange-text); white-space:nowrap;
}

/* ---------- K. CHIFFRES CLES ---------- */
.stat__n .unit{ font-size:.42em; margin-left:.12em; color:var(--orange-text); }
.stat{ position:relative; overflow:hidden; }
.stat::after{
  content:""; position:absolute; left:1.6rem; right:1.6rem; bottom:0; height:2px;
  background:var(--grad-warm); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.stat.is-in::after{ transform:scaleX(1); }

/* ---------- L. PUCES ANIMEES ---------- */
.pulse{ position:relative; }
.pulse::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid currentColor; opacity:.4; animation:pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse{ 0%{ transform:scale(.75); opacity:.55; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pulse::before{ animation:none; } }

/* ---------- M. IMAGE : REVELATION PAR VOLET ---------- */
.wipe{ position:relative; overflow:hidden; }
.wipe::after{
  content:""; position:absolute; inset:0; z-index:4; background:var(--paper);
  transform-origin:right; transition:transform 1.1s var(--ease-out);
}
.wipe.is-in::after{ transform:scaleX(0); }
.dark .wipe::after{ background:var(--navy-deep); }

/* ---------- N. RETOUR EN HAUT ---------- */
.to-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:150;
  width:50px; height:50px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:all .5s var(--ease-out); box-shadow:var(--shadow-md);
}
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--orange-text); }

/* ---------- O. BANDEAU CHIFFRE / ANNEE ---------- */
.year-band{
  display:flex; align-items:center; gap:1rem; font-family:var(--font-display);
  text-transform:uppercase; font-size:.8rem; letter-spacing:.2em; color:var(--muted);
}
.year-band .bar{ height:1px; background:var(--line); flex:1; }

/* ---------- P. LISTES A COCHES ANIMEES ---------- */
.check-list li{ transition:transform .4s var(--ease-out); }
.check-list li:hover{ transform:translateX(5px); }

/* ---------- Q. TABLEAU BUDGET : BARRE PROPORTIONNELLE ---------- */
.budget-table td{ position:relative; }
.bar-cell{ position:relative; display:block; }
.bar-cell::before{
  content:""; position:absolute; right:0; bottom:-.55rem; height:3px; border-radius:2px;
  width:calc(var(--w,0) * 1%); max-width:100%; background:var(--grad-warm); opacity:.55;
  transform:scaleX(0); transform-origin:right; transition:transform .9s var(--ease-out);
}
tr.is-in .bar-cell::before{ transform:scaleX(1); }

/* ---------- R. CITATION ---------- */
.pull{
  position:relative; padding:2.4rem 0 2.4rem 3.6rem; font-size:var(--step-2);
  line-height:1.34; font-weight:600; letter-spacing:-.015em; max-width:34ch;
}
.pull::before{
  content:"\201C"; position:absolute; left:0; top:.2em; font-family:var(--font-display);
  font-size:5rem; line-height:.6; color:var(--orange); opacity:.75;
}
.pull cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--muted); }

/* ---------- S. ETIQUETTE DE SECTION FLOTTANTE ---------- */
.side-label{
  position:absolute; left:calc(var(--gutter) * -1 + .4rem); top:0;
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:800; color:var(--muted); opacity:.7;
}
@media (max-width:1200px){ .side-label{ display:none; } }

/* ---------- T. GRILLE DE VALEURS ---------- */
.values{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:660px){ .values{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .values{ grid-template-columns:repeat(5,1fr); } }
.value{ background:var(--paper); padding:2rem 1.5rem 2.2rem; position:relative; overflow:hidden; }
.value__i{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--ivory-2); color:var(--navy); margin-bottom:1.1rem;
  transition:background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease-out);
}
.value:hover .value__i{ background:linear-gradient(100deg,#E4570E,#C0271B); color:#fff; transform:rotate(-8deg) scale(1.08); }
.value h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; margin-bottom:.55rem; }
.value p{ font-size:var(--step--1); color:var(--muted); margin:0; }

/* ---------- U. FRISE / CHRONOLOGIE HORIZONTALE ---------- */
.hscroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 340px);
  gap:1.2rem; overflow-x:auto; padding-bottom:1.4rem; scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.hscroll > *{ scroll-snap-align:start; }
.hscroll::-webkit-scrollbar{ height:6px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; }
.hscroll::-webkit-scrollbar-thumb:hover{ background:var(--orange); }

.mini-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.6rem 1.6rem 1.8rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.mini-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.mini-card__d{ font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--orange-text); }
.mini-card h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; margin:.7rem 0 .6rem; line-height:1.05; }
.mini-card p{ font-size:var(--step--1); color:var(--muted); margin:0; }
.dark .mini-card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); box-shadow:none; }
.dark .mini-card p{ color:rgba(255,255,255,.7); }

/* ---------- V. ACCORDEON ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.5rem);
  transition:color .3s var(--ease);
}
.acc__btn:hover{ color:var(--orange-text); }
.acc__btn::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px;
  background:currentColor; transform:translateY(-50%);
}
.acc__btn::before{
  content:""; position:absolute; right:calc(.4rem + 6px); top:50%; width:2px; height:14px;
  background:currentColor; transform:translateY(-50%) scaleY(1); transition:transform .4s var(--ease-out);
}
.acc__btn[aria-expanded="true"]::before{ transform:translateY(-50%) scaleY(0); }
.acc__panel{ overflow:hidden; height:0; transition:height .5s var(--ease-out); }
.acc__panel > div{ padding:0 0 1.7rem; color:var(--muted); max-width:64ch; }

/* ---------- W. LOGO : ETOILE QUI SCINTILLE ---------- */
.logo__star{ animation:twinkle 4.5s var(--ease) infinite; transform-origin:50% 50%; }
@keyframes twinkle{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.95; }
  45%{ transform:scale(1.18) rotate(14deg); opacity:1; }
  70%{ transform:scale(.94) rotate(-6deg); opacity:.85; }
}
@media (prefers-reduced-motion: reduce){ .logo__star{ animation:none; } }

/* ---------- X. TRAIT ANIME SOUS LES TITRES ---------- */
.title-line{ position:relative; display:inline-block; }
.title-line::after{
  content:""; position:absolute; left:0; bottom:-.22em; height:5px; width:100%;
  border-radius:3px; background:var(--grad-warm);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out) .2s;
}
.title-line.is-in::after,.reveal.is-in .title-line::after{ transform:scaleX(1); }

/* ---------- Y. ENTREE DE PAGE ---------- */
.page-veil{
  position:fixed; inset:0; z-index:500; background:var(--navy-deep); pointer-events:none;
  transform-origin:top; animation:veil 1s var(--ease-out) forwards;
}
@keyframes veil{ to{ transform:scaleY(0); } }
@media (prefers-reduced-motion: reduce){ .page-veil{ display:none; } }

/* ---------- Z. DIVERS ---------- */
.badge-live{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.64rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange-text);
}
.badge-live .pulse{ width:8px; height:8px; border-radius:50%; background:var(--orange); }

.note{
  border-left:3px solid var(--turquoise); padding:.4rem 0 .4rem 1.1rem;
  font-size:var(--step--1); color:var(--muted);
}

.ph-note{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.62rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px dashed var(--line); border-radius:100px; padding:.4rem .8rem;
}
.dark .ph-note{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.28); }

/* Le pied de page est sombre sans porter la classe .dark : la note
   « à venir » y héritait du gris clair (3,0:1). On la remet au niveau AA. */
.site-footer .ph-note{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.3); }

/* ---------- AA. MUR DE LOGOS PARTENAIRES ---------- */
.logo-wall{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.logo-wall li{
  background:#fff; aspect-ratio:16/10; display:grid; place-items:center; padding:1.4rem;
  transition:background .4s var(--ease);
}
.logo-wall li:hover{ background:var(--ivory-2); }
/* Logos affiches dans leurs couleurs d'origine : c'est la marque du
   partenaire, elle doit se reconnaitre au premier coup d'oeil.
   Les fichiers ont des proportions tres differentes (carres, horizontaux,
   verticaux) : on plafonne hauteur ET largeur pour qu'ils occupent tous
   la meme surface optique, sans qu'aucun n'ecrase les autres. */
.logo-wall img{
  max-width:78%; max-height:62%; width:auto; height:auto; object-fit:contain;
  transition:transform .5s var(--ease-out);
}
.logo-wall li:hover img{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){ .logo-wall li:hover img{ transform:none; } }
/* variante du mur de logos sur fond sombre */
.logo-wall--dark{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); }
.logo-wall--dark li{ background:#FBF8F3; }
.logo-wall--dark li:hover{ background:#fff; }

/* ---------- AB. CARROUSEL PHOTO ---------- */
.carousel{ position:relative; }
.carousel__track{
  display:flex;
  gap:1.2rem; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:1.2rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.carousel__item{ flex:0 0 auto; width:84%; scroll-snap-align:start; }
@media (min-width:640px){
  .carousel__item{ width:calc(50% - .6rem); }
}
@media (min-width:900px){
  .carousel__item{ width:calc(33.333% - .8rem); }
}
@media (prefers-reduced-motion: reduce){ .carousel__track{ scroll-behavior:auto; } }
.carousel__track::-webkit-scrollbar{ height:6px; }
.carousel__track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; }
.carousel__track::-webkit-scrollbar-thumb:hover{ background:var(--orange-text); }

.carousel__item figure{
  margin:0; position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/3; background:var(--ivory-2);
}
.carousel__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out);
}
.carousel__item:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){ .carousel__item:hover img{ transform:none; } }
.carousel__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2rem 1.2rem .9rem;
  background:linear-gradient(transparent, rgba(7,23,51,.55) 40%, rgba(7,23,51,.92));
  color:#fff; font-size:var(--step--1); font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* commandes */
.carousel__nav{ display:flex; gap:.6rem; align-items:center; margin-top:.4rem; }
.carousel__btn{
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.carousel__btn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.carousel__btn:disabled{ opacity:.32; cursor:default; }
.carousel__count{
  margin-left:auto; font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums;
}
.dark .carousel__btn{ border-color:rgba(255,255,255,.28); color:#fff; }
.dark .carousel__btn:hover:not(:disabled){ background:#fff; color:var(--ink); border-color:#fff; }
.dark .carousel__count{ color:rgba(255,255,255,.66); }