/* ATHAR · V39 · socle commun à toutes les pages (13/10/2026)
   Demande de Yacine : UNE seule police partout (celle des titres « Le Monde des Prophètes », Inter),
   des titres en vrai blanc, pas d'italique, un rendu Apple, et un site léger qui ne fait pas chauffer le téléphone.
   Règles de légèreté appliquées ici : pas de grain plein écran en mode de fusion, pas de flou animé,
   backdrop-filter réservé aux barres de navigation, animations coupées quand l'onglet est caché. */

:root{
  /* Couleurs : le noir domine, l'or seulement par touches */
  --noir:#08070A;
  --noir-2:#0E0C0B;
  --blanc:#FFFFFF;
  --texte:rgba(255,255,255,.78);
  --discret:rgba(255,255,255,.58);
  --pale:rgba(255,255,255,.4);
  --trait:rgba(255,255,255,.1);
  --bord:rgba(255,255,255,.14);
  --bord-fort:rgba(255,255,255,.26);
  --surface:rgba(18,16,15,.7);
  --champagne:#D9C7A0;
  --champagne-clair:#F2E5C8;
  --or:#C8A24B;
  --rouge:#FF5A45;
  --vert:#45E39A;

  /* Une seule famille : Inter (variable, taille optique). Amiri seulement pour l'arabe et ﷺ. */
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --f-ar:'Amiri','Geeza Pro','Noto Naskh Arabic',serif;
  --va-police:var(--f);

  /* Échelle de titres (la même sur toutes les pages) */
  --t-hero:clamp(34px,4.6vw,64px);
  --t-section:clamp(28px,3.2vw,44px);
  --t-monde:clamp(26px,2.5vw,36px);
  --t-carte:clamp(19px,1.6vw,22px);
  --t-corps:16px;

  --marge:clamp(16px,4vw,48px);
  --large:1180px;
  --courbe:cubic-bezier(.22,1,.36,1);
  --ressort:cubic-bezier(.32,.72,0,1);
  --douce:cubic-bezier(.45,0,.55,1);
  --grain: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--noir);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;
  /* zoom à deux doigts et double-tape bloqués (demande de Yacine), le défilement reste libre */
  touch-action:pan-x pan-y}
body{margin:0;min-height:100vh;isolation:isolate;background:var(--noir);color:var(--blanc);font-family:var(--f);font-optical-sizing:auto;font-size:var(--t-corps);line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--champagne-clair);outline-offset:3px;border-radius:10px}
::selection{background:rgba(217,199,160,.32)}
.saw{font-family:var(--f-ar);font-weight:400;font-size:1.1em;line-height:1;white-space:nowrap;unicode-bidi:isolate}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.athar-app .app-hide{display:none!important}

/* ---------------- Typographie : une seule police, titres en vrai blanc ---------------- */
.titre-hero{font-weight:600;font-size:var(--t-hero);line-height:1.04;letter-spacing:-.034em;color:var(--blanc);text-wrap:balance}
.titre-section{font-weight:600;font-size:var(--t-section);line-height:1.08;letter-spacing:-.03em;color:var(--blanc);text-wrap:balance}
.titre-monde{font-weight:600;font-size:var(--t-monde);line-height:1.1;letter-spacing:-.028em;color:var(--blanc);text-wrap:balance}
.chapo{max-width:620px;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--texte);text-wrap:pretty}
.chapo b,.chapo strong{font-weight:600;color:var(--blanc)}
.surtitre{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.centre{text-align:center}
.conteneur{width:min(var(--large),100% - 2*var(--marge));margin-inline:auto}

/* ---------------- Logo ---------------- */
.marque{display:inline-flex;align-items:center;gap:10px}
.marque img{height:46px;width:auto}
@media (max-width:640px){.marque img{height:38px}}

/* ---------------- Pastilles d'état (sans flou d'arrière-plan : plus légères sur téléphone) ---------------- */
.statut{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 9px 4px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(255,255,255,.94);background:rgba(10,9,8,.74);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.statut.ok{color:#DFFBEC;background:rgba(8,58,36,.84);box-shadow:inset 0 0 0 1px rgba(90,230,160,.4)}
.statut-point{flex:none;width:6px;height:6px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 2px rgba(69,227,154,.22)}
.statut svg{width:11px;height:11px;flex:none}

/* ---------------- Cadenas au centre de l'affiche, avec la date de sortie ----------------
   Demande de Yacine : « une sorte de cadenas en plein milieu, avec la date », comme sur la bibliothèque actuelle,
   mais plus beau (pas le même logo). Modèle : les affiches « Coming soon » datées de l'app Apple TV. */
.verrou-centre{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:92%;pointer-events:none;text-align:center}
.verrou-rond{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;
  background:radial-gradient(120% 120% at 30% 18%,rgba(255,255,255,.26),rgba(255,255,255,.06) 60%),rgba(12,11,10,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -8px rgba(0,0,0,.8)}
.verrou-rond svg{width:20px;height:20px}
.verrou-date{display:block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.25;letter-spacing:-.005em;color:#fff;white-space:nowrap;
  background:rgba(10,9,8,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.verrou-date b{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-clair)}

/* ---------------- Toast ---------------- */
.toast{position:fixed;z-index:95;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));padding:13px 18px;border-radius:16px;font-size:14px;line-height:1.45;
  background:rgba(24,22,20,.96);box-shadow:inset 0 0 0 1px var(--bord),0 20px 40px -14px rgba(0,0,0,.9);animation:toast-pop .35s var(--courbe)}
.toast code{font-family:inherit;font-weight:600;font-size:13px;color:var(--champagne-clair)}
@keyframes toast-pop{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------------- Bandeau de la maquette (pour Yacine : ce lien ouvre telle page du vrai site) ---------------- */
.maquette-retour{position:fixed;z-index:96;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:none}

/* ---------------- Projecteur du haut de page (choix 1B de Yacine), commun à la landing et à la bibliothèque ----------------
   Deux faisceaux en dégradé qui viennent du coin haut droit et balaient (on voit nettement le mouvement),
   plus une lueur de coin qui respire. Aucun flou CSS : les dégradés sont doux par eux-mêmes, donc rien n'est recalculé
   à chaque image, seul le calque tourne (léger pour le téléphone). */
.projecteur{position:absolute;left:0;top:0;width:100%;height:1150px;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 94%);mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 94%)}
.projecteur .cone{position:absolute;right:-34vw;top:-58vw;width:150vw;height:62vw;transform-origin:92% 50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(255,236,200,.5),rgba(246,200,132,.26) 34%,rgba(226,160,88,.1) 62%,rgba(226,160,88,0) 100%);
  animation:balayage 8s var(--douce) infinite alternate}
.projecteur .cone.c2{right:-26vw;top:-50vw;width:120vw;height:40vw;opacity:.75;animation:balayage2 11s var(--douce) -3s infinite alternate;
  background:radial-gradient(closest-side,rgba(255,244,222,.44),rgba(240,196,128,.18) 45%,rgba(240,196,128,0) 100%)}
@keyframes balayage{0%{transform:rotate(-24deg);opacity:.78}50%{opacity:1}100%{transform:rotate(-46deg);opacity:.86}}
@keyframes balayage2{0%{transform:rotate(-40deg) translateX(-4vw)}100%{transform:rotate(-22deg) translateX(3vw)}}
.projecteur .coin{position:absolute;right:-18vw;top:-30vw;width:78vw;height:78vw;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(246,204,140,.42),rgba(214,150,86,.16) 48%,rgba(214,150,86,0) 100%);animation:respire 7s var(--douce) infinite alternate}
@keyframes respire{from{transform:scale(.92);opacity:.78}to{transform:scale(1.1);opacity:1}}
.projecteur .pgrain{position:absolute;inset:0;opacity:.14;background-image:var(--grain);background-size:180px}

@media (max-width:820px){
  .projecteur{height:760px}
  .projecteur .cone{right:-64vw;top:-34vw;width:190vw;height:64vw;opacity:.9}
  .projecteur .cone.c2{right:-56vw;top:-26vw;width:150vw;height:44vw}
  .projecteur .coin{right:-46vw;top:-46vw;width:110vw;height:110vw}
}
@media (prefers-reduced-motion:reduce){
  .projecteur .cone{transform:rotate(-34deg)}
  .projecteur .cone.c2{transform:rotate(-30deg)}
}

/* ---------------- Légèreté ----------------
   Onglet caché : toutes les animations CSS s'arrêtent (rien ne tourne en arrière-plan). */
html.onglet-cache *,html.onglet-cache *::before,html.onglet-cache *::after,.anim-pause,.anim-pause *,.anim-pause *::before,.anim-pause *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (prefers-contrast:more){
  .statut{background:#000}
}

/* Mode application (comme le snippet athar_app_mode de la V38) : aucun lien d'achat visible dans l'app iOS (règle Apple 3.1.1) */
html.athar-app a[href^="/store"],html.athar-app a[href^="/offers"],html.athar-app a[data-kajabi^="/store"],html.athar-app a[data-kajabi^="/offers"]{display:none!important}