/* ============================================================ socle commun à toutes les pages
Ce qui ne dépend d'aucune maquette : remise à zéro, fond noir, police selon la langue,
la lueur et le grain de la planche B v4. Les écrans viendront dans leurs propres feuilles
(accueil.css, essai.css…) une fois leur maquette validée. */

/* ------------------------------------------------------------ remise à zéro */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--fond);color:var(--texte);
  font-family:var(--police);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* « clip » et pas « hidden » : hidden casse les sections épinglées au défilement */
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
/* un long mot (adresse, lien) passe à la ligne au lieu de faire déborder la page */
h1,h2,h3,h4,p,li,dd{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
/* le halo bleu quand on touche un lien sur téléphone */
a,button{-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------ français ou arabe
langue.js pose lang="ar" et dir="rtl" sur la page. On change seulement la police ici :
le sens de lecture, lui, suit dir tout seul tant qu'on écrit les marges avec
margin-inline-start / padding-inline-end (et pas left / right). */
:root[lang="ar"]{--police:var(--police-arabe)}
/* l'arabe a besoin d'un peu plus d'interligne, et jamais de lettres resserrées */
:root[lang="ar"] body{line-height:1.7}
:root[lang="ar"] *{letter-spacing:0!important}
/* les chiffres, prix et numéros restent en Geist, de gauche à droite */
.ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--police-latin)}
.mono{font-family:var(--police-mono)}

/* ------------------------------------------------------------ la lueur
Reprise de la planche B v4, recolorée par marque.css (variables --halo-…) : avec la
piste C c'est un bleu profond qui se fond dans le papier. Quatre taches floues : le cœur,
deux anneaux, un bord très large qui s'éteint dans le fond.
On les place avec --x et --y pour choisir d'où vient la lumière :
  <section class="lueur" style="--x:4%;--y:0%">
Règle de la charte : aucun texte sur la partie claire, le symbole non plus. */
.lueur{position:relative;overflow:hidden;background:var(--halo-fond);isolation:isolate}
.lueur::before{content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(40px) saturate(1.15);
  background:
    radial-gradient(22% 20% at var(--x,30%) var(--y,40%), var(--halo-coeur) 0%, var(--halo-coeur) 25%, transparent 100%),
    radial-gradient(40% 36% at var(--x,30%) var(--y,40%), var(--halo-1) 0%, var(--halo-1) 45%, transparent 100%),
    radial-gradient(62% 56% at var(--x,30%) var(--y,40%), var(--halo-2) 0%, var(--halo-2) 50%, transparent 100%),
    radial-gradient(85% 78% at var(--x,30%) var(--y,40%), var(--halo-bord) 0%, var(--halo-bord) 50%, transparent 100%);}

/* ------------------------------------------------------------ le grain
Un grain fin sur tous les fonds, pour que le noir et la lueur aient de la matière au lieu
d'un aplat d'écran. C'est un bruit dessiné par le navigateur (feTurbulence, aucune image à
télécharger), posé par-dessus en mode « overlay » : il éclaircit un peu le sombre et fonce
un peu le clair, sans changer les couleurs. Même réglage que la planche. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Sur un bloc : la classe .grain (la lueur l'a d'office). */
.grain{position:relative}
.lueur::after,.grain::after{content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:220px;mix-blend-mode:overlay;opacity:.8;
  pointer-events:none;border-radius:inherit;z-index:2}

/* Sur toute la page, seulement si on le demande (<body class="grain-page">) : la piste C
le garde « avec ou sans selon le support », et le hero validé est un blanc net.
Il est fixé à l'écran, il couvre la hauteur visible sans grandir avec une longue page. */
body.grain-page::after{content:"";position:fixed;inset:0;
  background-image:var(--grain);background-size:220px;mix-blend-mode:overlay;opacity:.65;
  pointer-events:none;z-index:100}

/* ------------------------------------------------------------ accessibilité
Lien « aller au contenu » visible seulement au clavier, et un contour orange net
quand on navigue à la tabulation. */
.aller-contenu{position:absolute;inset-inline-start:16px;top:-60px;z-index:200;
  background:var(--accent);color:var(--sur-accent);padding:10px 16px;border-radius:var(--rayon-pilule)}
.aller-contenu:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Quelqu'un qui a demandé moins d'animations dans son téléphone n'en aura pas. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}