/* ATHAR · Landing V8 (13/10/2026) · « ta landing V38, en mieux »
   Mêmes sections, même ordre, mêmes textes que la V38 (sauf ce que Yacine a demandé de retirer).
   V8, ses retours : une seule police (Inter) en vrai blanc, plus d'italique doré dans les titres ; « Voir le making-of » retiré ;
   « Jugez par vous-même » : panneau de texte en verre Atheer bleuté, plus éclairé, sans la lumière qui tournait autour ;
   hero jamais plus grand que celui de la V38 ; informations à jour (Abraha : épisode 1 le vendredi 30 octobre).
   Légèreté : pas de grain plein écran, pas de Lenis, pas de flou animé ; dégradés des avis limités et en pause hors écran. */

body.p-landing{background:var(--noir)}
.section{position:relative;padding-block:clamp(32px,4.4vw,60px)}

/* Étiquette (pastille de texte) */
.etiquette{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;color:#fff;
  background:rgba(14,12,11,.74);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.1)}
.etiquette svg{width:14px;height:14px}
.etiquette.calme{color:rgba(255,255,255,.86)}

/* Lien texte avec flèche */
.lien{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff}
.lien svg{width:16px;height:16px;transition:transform .45s var(--ressort)}
.lien:hover svg{transform:translateX(4px)}

/* Panneau en verre (le verre K03 au repos), pour les cartes de la mission */
.verre{position:relative;isolation:isolate;
  background:radial-gradient(36% 72% at 78% 106%,rgba(242,180,74,.12),rgba(242,180,74,0) 76%),linear-gradient(180deg,rgba(255,248,236,.045),rgba(255,248,236,0) 62%),rgba(17,15,13,.8);
  box-shadow:inset 0 1px 0 rgba(255,250,240,.07),inset 0 0 0 1px rgba(255,244,226,.08),0 24px 50px -26px rgba(0,0,0,.9)}

/* ---------------- 1. Ouverture ---------------- */
#intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--noir);pointer-events:none;animation:intro-sortie .55s ease .95s forwards}
#intro.passe{display:none}
@keyframes intro-sortie{to{opacity:0;visibility:hidden}}
.intro-colonne{display:flex;flex-direction:column;align-items:center;gap:20px}
.intro-sceau{width:72px;height:72px;animation:intro-sceau .7s var(--courbe) both}
.intro-mot{width:132px;height:auto;animation:intro-mot .9s var(--courbe) .12s both}
@keyframes intro-sceau{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes intro-mot{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
body.entree .hero-texte{animation:intro-revele .8s ease .85s both}
@keyframes intro-revele{from{opacity:0}to{opacity:1}}

/* ---------------- 2. Bandeau de l'offre ---------------- */
.offre{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;min-height:40px;padding:9px var(--marge);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne-clair);background:linear-gradient(90deg,rgba(217,199,160,.02),rgba(217,199,160,.11) 50%,rgba(217,199,160,.02))}
.offre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,199,160,.5),transparent)}
.offre-etoile{margin-right:9px;color:var(--or)}
.offre-lien{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.82;transition:opacity .3s}
.offre-lien svg{width:13px;height:13px}
.offre-lien:hover{opacity:1}

/* ---------------- 3. Navigation ---------------- */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1320px,100% - 2*var(--marge));margin-inline:auto;padding-block:18px 16px}
.nav .marque img{height:48px}

/* ---------------- 4. Hero : la vidéo encadrée ----------------
   Hauteur du hero V38 : 46 % de l'écran, entre 360 et 500 px ; 54 % sur téléphone. */
.hero-zone{position:relative;isolation:isolate;width:min(1320px,100% - 2*var(--marge));margin-inline:auto}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:clamp(360px,46svh,500px);border-radius:26px;overflow:hidden;background:#0D0B0A;box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.hero::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,244,226,.13)}
.hero-mur{position:absolute;inset:-14%;z-index:-4;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;opacity:.6;filter:brightness(.8);pointer-events:none;transform:rotate(-6deg) scale(1.3)}
.hero-mur img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px}
.hero-video{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero-video.joue{opacity:1}
.hero-video.joue~.hero-mur,.hero:has(.hero-video.joue) .hero-mur{visibility:hidden}
.hero-voile{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 60% 64% at 50% 52%,rgba(10,9,8,.6) 0%,rgba(10,9,8,.3) 58%,rgba(10,9,8,.12) 100%),linear-gradient(0deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 34%)}
.hero-texte{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:900px;padding:24px var(--marge);text-align:center}
.hero-titre{text-shadow:0 2px 20px rgba(0,0,0,.5),0 8px 60px rgba(0,0,0,.4)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.hero-note{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 9px;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.76);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero-note .riba{font-weight:700;color:var(--rouge);text-shadow:0 0 16px rgba(255,90,69,.4)}

/* ---------------- 6. Séries exclusives (Top 10) ---------------- */
.catalogue{padding-top:clamp(34px,4vw,52px);padding-bottom:0}
.tete-rangee{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.fleches{display:flex;gap:10px;flex:none}
.rangee{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  padding:22px max(var(--marge),calc((100% - var(--large))/2)) 26px;scroll-padding-inline:max(var(--marge),calc((100% - var(--large))/2));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 100px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 100px),transparent)}
.rangee::-webkit-scrollbar{display:none}
.top{position:relative;flex:none;display:flex;align-items:flex-end;padding-left:clamp(50px,5vw,72px);scroll-snap-align:start}
.top:last-child{padding-left:clamp(92px,9.5vw,132px);margin-right:60px}
.top-num{position:absolute;left:0;bottom:-.08em;z-index:0;font-weight:700;font-size:clamp(132px,13vw,196px);line-height:.8;letter-spacing:-.08em;pointer-events:none;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.62);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 72%);-webkit-background-clip:text;background-clip:text}
.top-affiche{position:relative;z-index:1;display:block;width:clamp(128px,12.5vw,180px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#15120F;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.9);transition:transform .55s var(--courbe),box-shadow .55s var(--courbe)}
.top-affiche::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,244,226,.12);pointer-events:none}
.top-affiche img{width:100%;height:100%;object-fit:cover}
.top-affiche .statut{position:absolute;z-index:2;top:9px;left:9px;max-width:calc(100% - 18px)}
.top:hover .top-affiche,.top:focus-visible .top-affiche{transform:translateY(-6px) scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 32px 60px -24px rgba(0,0,0,.95)}

/* ---------------- 8. Coulisses ---------------- */
.coulisses{padding-top:clamp(30px,3.6vw,48px)}
.coulisses .titre-section{max-width:820px;margin-inline:auto}
.duos{display:grid;gap:clamp(28px,3vw,40px) clamp(24px,3vw,40px);margin-top:clamp(24px,3.2vw,40px)}
.duo-images{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.cadre{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#15120F;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.cadre::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,244,226,.1);pointer-events:none}
.cadre video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.cadre video.joue{opacity:1}
.cadre .etiquette{position:absolute;z-index:2;top:10px;left:10px}
.duo-fleche{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;background:rgba(20,17,14,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.duo-fleche svg{width:15px;height:15px}
.duo figcaption,.atelier figcaption{margin-top:16px;text-align:center;font-size:clamp(17px,1.5vw,19px);font-weight:500;line-height:1.4;letter-spacing:-.015em;color:#fff}
.atelier figcaption span{display:block;margin-top:5px;font-size:14px;font-weight:400;color:var(--discret)}
.atelier{margin-top:clamp(28px,3.6vw,48px)}
.comparateur{--pos:50%;position:relative;aspect-ratio:2.35/1;border-radius:22px;overflow:hidden;background:#0D0C0B;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.comparateur::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,244,226,.12);pointer-events:none;z-index:4}
.comparateur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.comp-avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comp-poignee{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.comp-trait{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,250,240,.92);box-shadow:0 0 16px rgba(255,236,198,.55)}
.comp-bouton{position:absolute;top:50%;left:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);color:#1A1511;background:rgba(250,246,238,.96);box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .35s var(--ressort)}
.comp-bouton svg{width:13px;height:13px;margin:0 -1px}
.comparateur.glisse .comp-bouton{transform:translate(-50%,-50%) scale(1.08)}
.comp-etiquette{position:absolute;z-index:2;top:14px;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(10,9,8,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:opacity .3s}
.comp-etiquette.gauche{left:14px}
.comp-etiquette.droite{right:14px}
.comp-curseur{position:absolute;left:0;bottom:0;width:100%;height:2px;margin:0;opacity:0;pointer-events:none}
.comparateur:has(.comp-curseur:focus-visible){outline:2px solid var(--champagne-clair);outline-offset:4px}
.atelier-pied{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 20px;margin-top:18px}
.scenes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(20,17,14,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.scene{height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--discret);transition:background-color .3s,color .3s,box-shadow .3s}
.scene:hover{color:#fff}
.scene[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

/* ---------------- 9. Jugez par vous-même ---------------- */
.ba{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:clamp(24px,3.2vw,40px);border-radius:24px;overflow:hidden;background:#0c0e18;
  box-shadow:inset 0 0 0 1px rgba(196,206,255,.16),0 40px 90px -40px rgba(0,0,0,.95)}
.ba-video{position:relative;min-height:340px;background:#000}
.ba-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-son{position:absolute;right:16px;bottom:16px;z-index:2}
.ba-texte{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(26px,3.6vw,48px)}
.ba-titre{margin-top:18px;font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.028em;color:#fff}
.ba-ep{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ba-citation{margin:24px 0 26px;padding-left:16px;border-left:2px solid rgba(200,212,255,.5)}
.ba-citation p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.62;color:rgba(255,255,255,.86)}
.ba-citation cite{display:block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Verre Atheer, porté en CSS depuis notre verre d'habillage (verre_atheer.js, mesuré sur leur vidéo, repris du pack After Effects) :
   - le plan : un fond bleu nuit, plus éclairé que l'ancien panneau noir ;
   - les lueurs : des orbes douces qui glissent vers la gauche derrière le verre (boucle de 8 s), chacune avec une traîne lavande ;
   - les lames : le verre cannelé (lames de 13,5 px, montée brusque puis longue retombée), qui découpe les lueurs ;
   - l'arête : un trait clair d'environ 1 px. Seuls transform et opacity bougent : rien n'est recalculé. */
.verre-atheer{position:relative;isolation:isolate;overflow:hidden;background:#0e1124}
.vat-plan{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(90% 70% at 18% 10%,rgba(70,92,190,.55),rgba(70,92,190,0) 70%),radial-gradient(80% 70% at 100% 100%,rgba(96,70,170,.5),rgba(96,70,170,0) 70%),linear-gradient(160deg,#141a38,#0c0f20 60%,#0a0b16)}
.vat-orbe{position:absolute;display:block;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(168,186,255,.7),rgba(132,150,255,.3) 45%,rgba(132,150,255,0) 100%);
  animation:vat-glisse 8s cubic-bezier(.33,0,.67,1) infinite}
.vat-orbe::after{content:"";position:absolute;left:62%;top:18%;width:56%;height:56%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,170,255,.5),rgba(200,170,255,0))}
.vat-orbe.o1{width:58%;aspect-ratio:1;left:52%;top:6%;animation-delay:-1.8s}
.vat-orbe.o2{width:66%;aspect-ratio:1;left:58%;top:52%;animation-delay:-3.7s}
.vat-orbe.o3{width:46%;aspect-ratio:1;left:30%;top:28%;animation-delay:-5.4s;background:radial-gradient(closest-side,rgba(130,214,255,.6),rgba(110,190,255,.24) 45%,rgba(110,190,255,0) 100%)}
.vat-orbe.o4{width:70%;aspect-ratio:1;left:40%;top:-14%;animation-delay:-.2s}
@keyframes vat-glisse{0%{transform:translateX(18%);opacity:0}18%{opacity:1}72%{opacity:.95}100%{transform:translateX(-62%);opacity:0}}
.vat-lames{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.13) 1.2px,rgba(255,255,255,.07) 3.2px,rgba(255,255,255,.02) 7px,rgba(6,8,20,.12) 11.5px,rgba(6,8,20,.24) 13px,rgba(255,255,255,0) 13.5px),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%,rgba(0,0,0,.18));
  box-shadow:inset 1px 0 0 rgba(214,222,255,.22),inset 0 1px 0 rgba(214,222,255,.18)}
.verre-atheer .etiquette{background:rgba(12,14,30,.6);box-shadow:inset 0 0 0 1px rgba(214,222,255,.28)}

/* ---------------- Le grand écran, dans votre poche ---------------- */
.ecrans{overflow:hidden}
.ecrans .chapo{margin:18px auto 0}
.appareils{position:relative;width:min(1080px,100% - 2*var(--marge));margin:clamp(28px,4vw,52px) auto 0;padding-bottom:3%;aspect-ratio:100/58}
.appareils::before{content:"";position:absolute;z-index:-1;left:50%;top:46%;width:115%;height:100%;transform:translate(-50%,-50%);background:radial-gradient(ellipse 48% 44% at 50% 50%,rgba(217,199,160,.15),rgba(217,199,160,0) 70%)}
.macbook{position:absolute;left:4%;top:0;width:80%}
.mb-capot{position:relative;aspect-ratio:1.5;padding:1.7% 1.7% 2.2%;border-radius:2.6% 2.6% .6% .6%/3.9% 3.9% .9% .9%;background:#0b0b0c;box-shadow:0 0 0 1.5px #b9bbbf,0 0 0 2.5px #6e7075,inset 0 0 0 1px rgba(255,255,255,.05),0 60px 110px -50px rgba(0,0,0,.95)}
.mb-dalle{width:100%;height:100%;overflow:hidden;border-radius:.7%/1.05%;background:#000}
.mb-dalle img{width:100%;height:100%;object-fit:cover;object-position:top}
.mb-encoche{position:absolute;left:50%;top:1.7%;width:6.4%;height:3.3%;transform:translateX(-50%);border-radius:0 0 18% 18%/0 0 40% 40%;background:#0b0b0c}
.mb-charniere{height:clamp(2px,.35vw,4px);margin:0 1.2%;background:linear-gradient(180deg,#1a1b1d,#3a3b3f)}
.mb-base{position:relative;height:clamp(7px,1.35vw,15px);margin:0 -3.8%;border-radius:2px 2px 50% 50%/2px 2px 100% 100%;background:linear-gradient(180deg,#f1f2f3 0%,#c9cbce 18%,#9c9ea3 55%,#6c6e73 100%);box-shadow:0 22px 34px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.9)}
.mb-creux{position:absolute;left:50%;top:0;width:13%;height:42%;transform:translateX(-50%);border-radius:0 0 12px 12px/0 0 8px 8px;background:linear-gradient(180deg,#8d8f94,#b8babe)}
.iphone{position:absolute;right:2.5%;bottom:-3%;width:21%;aspect-ratio:71.6/147.6;padding:1.15%;border-radius:16%/7.8%;background:linear-gradient(135deg,#d6d1c9 0%,#8f8b84 20%,#cdc8c0 46%,#7e7a73 72%,#c4bfb7 100%);
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.55),0 0 0 .6px rgba(0,0,0,.55),0 46px 80px -26px rgba(0,0,0,.95)}
.ip-verre{width:100%;height:100%;padding:3.3%;border-radius:15%/7.3%;background:#050505}
.ip-dalle{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12.6%/6%;background:#000}
.ip-dalle img{width:100%;height:100%;object-fit:cover;object-position:top}
.ip-ile{position:absolute;left:50%;top:1.5%;width:31%;height:4.2%;transform:translateX(-50%);border-radius:999px;background:#000}
.ip-statut{position:absolute;left:0;right:0;top:1.5%;height:4.2%;display:flex;align-items:center;padding:0 8% 0 11%;color:#fff;font:600 clamp(5px,.74vw,10px)/1 var(--f);pointer-events:none}
.ip-reseau{display:inline-flex;align-items:flex-end;gap:1px;margin-left:auto;margin-right:5%}
.ip-reseau i{display:block;width:clamp(1px,.16vw,2px);border-radius:1px;background:#fff}
.ip-reseau i:nth-child(1){height:clamp(2px,.25vw,3px)}.ip-reseau i:nth-child(2){height:clamp(3px,.35vw,4.5px)}.ip-reseau i:nth-child(3){height:clamp(3.5px,.45vw,6px)}.ip-reseau i:nth-child(4){height:clamp(4px,.55vw,7.5px)}
.ip-batterie{width:clamp(9px,1.2vw,16px);height:clamp(5px,.6vw,8px);padding:1px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);background:linear-gradient(90deg,#fff 0 80%,transparent 80%) content-box}
.ip-bouton{position:absolute;width:1.5%;border-radius:2px;background:linear-gradient(90deg,#77736c,#cbc6be)}
.ip-action{left:-1.1%;top:15%;height:5%}.ip-vol1{left:-1.1%;top:23%;height:9%}.ip-vol2{left:-1.1%;top:34%;height:9%}.ip-power{right:-1.1%;top:26%;height:14%}
.boutiques{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}

/* ---------------- 10. La mission ---------------- */
.tete-centre{max-width:760px;margin-inline:auto;text-align:center}
.tete-centre .chapo{margin:18px auto 0}
.cartes-mission{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:var(--large);margin:clamp(26px,3.4vw,44px) auto 0}
.m-carte{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;transition:transform .55s var(--courbe)}
.m-carte:hover{transform:translateY(-4px)}
.m-image{position:relative;aspect-ratio:2/1;overflow:hidden;background:#14110E}
.m-image img{width:100%;height:100%;object-fit:cover}
.m-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,15,13,1) 0%,rgba(17,15,13,.4) 34%,rgba(17,15,13,0) 66%)}
.m-bientot{position:absolute;z-index:2;top:12px;left:12px}
.m-icone{display:grid;place-items:center;background:radial-gradient(ellipse 44% 70% at 50% 60%,rgba(69,227,154,.13),rgba(69,227,154,0) 70%),#121412}
.m-pastille{width:76px;height:76px;color:#B8F2D6}
.m-pastille svg{width:32px;height:32px}
.m-corps{display:flex;flex-direction:column;flex:1;padding:6px 26px 26px}
.m-cat{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.m-carte h3{margin-top:9px;font-size:var(--t-carte);font-weight:600;line-height:1.22;letter-spacing:-.02em;color:#fff}
.m-carte p:not(.m-cat):not(.m-tags){margin-top:9px;font-size:15px;line-height:1.6;color:var(--discret)}
.m-carte strong{font-weight:600;color:#fff}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.m-tags span{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:500;color:var(--texte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.humain .m-cat{color:#8FE3BF}
.humain .m-tags span{box-shadow:inset 0 0 0 1px rgba(69,227,154,.26)}

/* ---------------- Avis : le dégradé dans chaque carte (modèle Origin, choix 4B) ---------------- */
.avis{padding-bottom:clamp(36px,4.4vw,60px)}
.note-globale{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:18px;font-size:15px;color:var(--texte)}
.note-globale b{font-weight:600;color:#fff}
.etoiles{display:inline-flex;gap:3px;color:#F5C54A}
.etoiles svg{width:17px;height:17px}
.avis-piste{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:clamp(22px,3vw,34px) max(var(--marge),calc((100% - var(--large))/2)) 6px;scroll-padding-inline:max(var(--marge),calc((100% - var(--large))/2))}
.avis-piste::-webkit-scrollbar{display:none}
.avis-piste:focus-visible{outline-offset:-4px}
.carte-avis{position:relative;isolation:isolate;flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:clamp(240px,calc((min(var(--large),100vw - 2*var(--marge)) - 42px)/4),290px);min-height:250px;padding:22px 20px 20px;border-radius:22px;overflow:hidden;text-align:center;scroll-snap-align:start;
  background:#1A1410;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.carte-fond{position:absolute;inset:0;z-index:-3;background:#0b0908}
.carte-fond.p0{background:radial-gradient(75% 60% at 28% 22%,rgba(126,38,16,.85),transparent 72%),radial-gradient(60% 50% at 80% 85%,rgba(168,84,40,.35),transparent 70%),#0b0605}
.carte-fond.p1{background:radial-gradient(75% 60% at 28% 22%,rgba(34,53,106,.85),transparent 72%),radial-gradient(60% 50% at 80% 85%,rgba(166,128,60,.35),transparent 70%),#05060a}
.carte-fond.p2{background:radial-gradient(75% 60% at 28% 22%,rgba(110,30,50,.85),transparent 72%),radial-gradient(60% 50% at 80% 85%,rgba(164,78,70,.35),transparent 70%),#0a0407}
.carte-fond.p3{background:radial-gradient(75% 60% at 28% 22%,rgba(90,64,36,.85),transparent 72%),radial-gradient(60% 50% at 80% 85%,rgba(160,128,80,.32),transparent 70%),#0a0806}
.carte-fond canvas{display:block}
.carte-avis::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(8,6,5,.26),rgba(8,6,5,.08) 70%),linear-gradient(180deg,rgba(8,6,5,.05),rgba(8,6,5,.3))}
.carte-avis::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.carte-etoiles{display:flex;gap:4px;color:#FFF7E6}
.carte-etoiles svg{width:12px;height:12px}
.avis-texte p{font-size:14.5px;font-weight:500;line-height:1.5;letter-spacing:-.008em;color:#FFF9EF;text-wrap:pretty}
.carte-auteur{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:auto;padding-top:6px}
.carte-auteur b{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.carte-auteur span{font-size:11.5px;color:rgba(255,249,239,.7)}
.avis-commandes{display:flex;justify-content:center;gap:12px;margin-top:26px}
.avis-source{margin-top:18px;padding-inline:var(--marge);text-align:center;font-size:12.5px;color:var(--pale)}

/* ---------------- 11. Appel final ---------------- */
.final{background:linear-gradient(180deg,var(--noir),var(--noir-2) 28%,var(--noir-2) 72%,var(--noir))}
.final-embleme{width:62px;height:62px;margin:0 auto 24px}
.final .chapo{max-width:540px;margin:18px auto 0}
.final-bouton{margin-top:32px}
.final-note{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}

/* ---------------- 12. Pied de page ---------------- */
.pied{padding-block:56px 40px;border-top:1px solid rgba(255,255,255,.08)}
.pied-grille{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.pied-marque{max-width:360px}
.pied-marque .marque img{height:42px}
.pied-slogan{margin-top:18px;font-size:15px;line-height:1.6;color:var(--discret)}
.reseaux{display:flex;gap:10px;margin-top:20px}
.pied-colonnes{display:flex;gap:clamp(36px,6vw,80px)}
.pied-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pied-col h4{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne)}
.pied-col a{font-size:15px;color:var(--discret);transition:color .3s}
.pied-col a:hover{color:#fff}
.pied-bas{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.pied-bism{font-family:var(--f-ar);font-size:19px;color:var(--or);opacity:.6}
.pied-copy{margin-top:8px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}

/* ---------------- 13. Barre collante (téléphone) ---------------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,9,8,.9),rgba(8,7,10,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(110%);transition:transform .45s var(--courbe)}
.sticky-cta.visible{transform:none}
.sticky-cta .va-bouton{width:100%}

/* ---------------- Apparitions au défilement ---------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--courbe),transform .9s var(--courbe)}
.rv.vu{opacity:1;transform:none}

/* ---------------- Tablette ---------------- */
@media (min-width:900px){.duos{grid-template-columns:1fr 1fr}}
@media (max-width:1199px) and (min-width:641px){.hero-mur{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}}
@media (max-width:860px){
  .ba{grid-template-columns:1fr}
  .ba-video{min-height:0;aspect-ratio:16/9}
  .cartes-mission{grid-template-columns:1fr;max-width:560px}
}

/* ---------------- Téléphone ---------------- */
@media (max-width:640px){
  .offre{min-height:34px;padding-block:7px;font-size:10.5px;letter-spacing:.1em;gap:4px 12px}
  .nav{padding-block:14px 12px}
  .nav .marque img{height:38px}
  /* Hero : 54 % de la hauteur d'écran, comme la V38 */
  .hero{height:max(54svh,330px);border-radius:22px}
  .hero-mur{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));inset:-16%}
  .hero-texte{padding:20px 18px}
  .hero-titre{font-size:clamp(27px,7.4vw,36px)}
  /* Retour du 13/10 : boutons côte à côte et compacts, ils ne mangent plus la vidéo */
  .hero-actions{flex-wrap:nowrap;gap:8px;margin-top:18px}
  .hero-actions .va-bouton{height:38px;padding:0 14px;font-size:13.5px;gap:6px;--va-biseau:12px}
  .hero-actions .va-bouton svg{width:15px;height:15px}
  .hero-note{font-size:10px;letter-spacing:.08em;margin-top:16px}
  .hero-note .point{display:none}
  .hero-note>span:first-child,.hero-note .riba{flex-basis:100%}
  .fleches{display:none}
  .rangee{gap:8px;padding-top:16px;padding-bottom:20px}
  .top{padding-left:24px}
  .top:last-child{padding-left:50px;margin-right:24px}
  .top-num{font-size:86px}
  .top-affiche{width:24vw;border-radius:9px}
  .top .statut{top:5px;left:5px;padding:2px 6px;font-size:8.5px;gap:3px}
  .top .statut-point{width:4px;height:4px}
  .top .statut svg{width:8px;height:8px}
  .duo-images{gap:8px}
  .duo-fleche{width:26px;height:26px}
  .duo-fleche svg{width:12px;height:12px}
  .cadre{border-radius:14px}
  .cadre .etiquette{top:7px;left:7px;height:24px;padding:0 9px;font-size:11px}
  .comparateur{aspect-ratio:4/3;border-radius:18px}
  .comp-etiquette{top:10px;height:26px;padding:0 10px;font-size:11.5px}
  .comp-etiquette.gauche{left:10px}
  .comp-etiquette.droite{right:10px}
  .scene{padding:0 13px;font-size:13.5px}
  .macbook{left:1%;width:84%}
  .iphone{right:0;width:25%}
  .m-corps{padding:4px 20px 22px}
  .avis-piste{gap:10px}
  .carte-avis{width:calc((100vw - 2*var(--marge) - 20px)/2.3);min-width:0;min-height:0;padding:16px 12px 14px;gap:9px;border-radius:18px}
  .avis-texte p{font-size:12.5px;line-height:1.45}
  .carte-etoiles svg{width:10px;height:10px}
  .carte-auteur b{font-size:9.5px;letter-spacing:.1em}
  .carte-auteur span{font-size:10px}
  .pied-grille{flex-direction:column}
  /* Jugez par vous-même, retour du 13/10 : bloc deux fois moins haut et plus sombre ;
     « Expérience immersive » et « Découvrir ATHAR » sur la même ligne, la citation reste sur ordinateur */
  .ba{border-radius:20px}
  .ba-texte{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;padding:14px 16px 16px}
  .ba-texte .etiquette{grid-area:1/1;height:26px;padding:0 10px;font-size:11.5px}
  .ba-texte .lien{grid-area:1/2;justify-self:end;font-size:14px}
  .ba-titre{grid-area:2/1/3/3;margin-top:12px;font-size:21px}
  .ba-ep{grid-area:3/1/4/3;margin-top:5px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
  .ba-citation{display:none}
  .verre-atheer{background:#090a14}
  .verre-atheer .vat-plan{opacity:.45}
  .vat-orbe.o3,.vat-orbe.o4{display:none}
  .sticky-cta{display:block}
  .pied{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* ---------------- Mouvement réduit ---------------- */
@media (prefers-reduced-motion:reduce){
  #intro{display:none}
  .rv{opacity:1;transform:none;transition:none}
  body.entree .hero-texte{animation:none}
  .vat-orbe{opacity:.8;animation:none}
}
.va[disabled]{opacity:.3;pointer-events:none}
.pied-plan{margin-top:14px;font-size:12.5px}
.pied-plan a{color:var(--champagne-clair);text-decoration:underline;text-underline-offset:3px}


/* ---------------- 11. Fin (V3, 13/10 nuit) : modèle BibleProject « Follow Your Curiosity. We'll Meet You There. » ----------------
   Titre en très grand + emoji, bouton juste dessous, deux rangées de photos Higgsfield en formats variés (haut vers la gauche,
   bas vers la droite, transform seulement, en pause hors écran), puis le merci écrit avec un grand cœur au grain. */
.final{background:none}
.fin-cadre{position:relative;isolation:isolate;overflow:hidden;max-width:var(--large);margin:0 auto;border-radius:32px;padding:clamp(44px,5.4vw,72px) 0 clamp(40px,5vw,64px);
  background:radial-gradient(60% 45% at 50% 0%,rgba(226,188,120,.12),transparent 70%),radial-gradient(50% 40% at 50% 100%,rgba(190,40,60,.18),transparent 70%),#0f0c0b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px -50px rgba(0,0,0,.95)}
.fin-cadre::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background-image:var(--grain);background-size:170px;pointer-events:none}
.fin-tete{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--marge)}
.fin-titre{font-size:clamp(33px,6.4vw,88px);font-weight:600;line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.insecable{white-space:nowrap}
.fin-emoji{display:inline-block;font-size:.8em;line-height:1;vertical-align:.04em;letter-spacing:0}
.fin-tete .final-bouton{margin-top:clamp(24px,2.6vw,34px)}
.fin-images{display:flex;flex-direction:column;gap:14px;margin-top:clamp(36px,4.4vw,56px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fin-rang{display:flex;gap:14px;width:max-content;will-change:transform;animation:defile-g 80s linear infinite}
.fin-rang.r2{animation:defile-d 90s linear infinite}
.fin-rang img{flex:none;height:clamp(104px,11.5vw,158px);width:auto;border-radius:18px;object-fit:cover;box-shadow:0 18px 36px -20px rgba(0,0,0,.9)}
@keyframes defile-g{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes defile-d{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.fin-merci{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(36px,4.4vw,56px);padding:0 var(--marge)}
.fin-grace{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;color:#fff}
.fin-suite{margin-top:6px;font-size:clamp(15px,1.4vw,18px);color:var(--texte)}
.fin-mot{display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,20px);margin-top:clamp(14px,1.6vw,22px)}
.fin-mot span:first-child{font-family:'Great Vibes',cursive;font-size:clamp(58px,6.4vw,92px);line-height:1.1;color:var(--champagne-clair);letter-spacing:0;text-shadow:0 4px 30px rgba(226,188,120,.25)}
.fin-coeur{display:block;width:clamp(64px,6.6vw,96px);aspect-ratio:1.1/1;
  background:radial-gradient(70% 60% at 35% 30%,#ff8a96 0%,#e8384f 45%,#9c0f26 100%),var(--grain);background-size:100% 100%,120px;background-blend-mode:overlay;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cpath d='M55 96C51 92 6 63 3 33 1 14 14 2 30 2c11 0 20 6 25 15C60 8 69 2 80 2c16 0 29 12 27 31-3 30-48 59-52 63z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100'%3E%3Cpath d='M55 96C51 92 6 63 3 33 1 14 14 2 30 2c11 0 20 6 25 15C60 8 69 2 80 2c16 0 29 12 27 31-3 30-48 59-52 63z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 10px 30px rgba(232,56,79,.45));animation:battement 2.6s var(--douce) infinite}
@keyframes battement{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.07)}28%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.fin-rang,.fin-coeur{animation:none}}
@media (max-width:820px){
  .fin-cadre{border-radius:26px}
  .fin-rang img{height:92px;border-radius:14px}
  .fin-images,.fin-rang{gap:10px}
}

/* ---------------- Aperçu d'une série (16/10) : fiche façon Netflix ----------------
   Ordinateur : l'affiche à gauche, le texte et les épisodes à droite. Téléphone : feuille qui monte du bas, affiche en bandeau. */
html.apercu-ouvert{overflow:hidden}
.apercu{width:min(860px,calc(100vw - 48px));max-width:none;max-height:min(86vh,640px);padding:0;border:0;border-radius:28px;color:#fff;overflow:hidden;
  background:radial-gradient(80% 60% at 100% 0,rgba(226,188,120,.1),transparent 60%),#0d0b0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 50px 120px -30px rgba(0,0,0,.95)}
.apercu::backdrop{background:rgba(4,3,5,.78)}
.apercu[open]{animation:ap-entre .45s var(--courbe)}
@keyframes ap-entre{from{transform:translateY(16px) scale(.985)}}
.ap-carte{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);max-height:inherit}
.ap-visuel{position:relative;aspect-ratio:9/16;max-height:min(86vh,640px);overflow:hidden;background:#151311}
.ap-visuel img{width:100%;height:100%;object-fit:cover}
.ap-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,10,0) 60%,#0d0b0a)}
.ap-corps{display:flex;flex-direction:column;gap:10px;min-width:0;max-height:min(86vh,640px);overflow-y:auto;overscroll-behavior:contain;padding:34px 30px 28px 26px;scrollbar-width:thin}
.ap-titre{font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.ap-sous{font-size:15px;color:var(--texte)}
.ap-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;color:var(--discret)}
.ap-pastille{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ap-fermer{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:rgba(12,10,9,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color .3s}
.ap-fermer:hover{background:rgba(40,36,32,.9)}
.ap-fermer svg{width:16px;height:16px}
.ap-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}
/* Liste des épisodes (aussi utilisée par la page Le Programme) */
.ep-liste{display:flex;flex-direction:column;margin-top:6px;border-top:1px solid rgba(255,255,255,.08)}
.ep-liste li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.ep-liste li.vise{margin:0 -10px;padding-inline:14px;border-radius:12px;background:rgba(255,255,255,.07);border-bottom-color:transparent}
.ep-num{font-size:14px;font-weight:600;color:var(--pale);font-variant-numeric:tabular-nums}
.ep-titre{font-size:14.5px;line-height:1.35;color:#fff}
.ep-etat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--discret)}
.ep-etat.dispo{color:#BFF5D8}
.ep-etat.dispo i{width:6px;height:6px;border-radius:50%;background:#45E39A}
.ep-etat.date{color:var(--champagne-clair)}
@media (max-width:640px){
  .apercu{width:100vw;max-height:88svh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .apercu[open]{animation:ap-monte .45s var(--courbe)}
  @keyframes ap-monte{from{transform:translateY(40px)}}
  .ap-carte{grid-template-columns:minmax(0,1fr);overflow-y:auto;overscroll-behavior:contain;max-height:88svh}
  .ap-visuel{aspect-ratio:16/10;max-height:none}
  .ap-visuel img{object-position:50% 14%}
  .ap-voile{background:linear-gradient(180deg,rgba(13,11,10,0) 55%,#0d0b0a)}
  .ap-corps{max-height:none;overflow:visible;margin-top:-34px;position:relative;padding:0 18px calc(22px + env(safe-area-inset-bottom,0px))}
  .ap-actions .va-bouton{flex:1 1 0;justify-content:center;height:44px;padding:0 12px;font-size:14.5px}
}