/* PORTÉ depuis site-final/src/silex-2026.css par tools/site/porter-site-final.mjs : ne pas modifier à la main. */
/* Silex · couche 2026 du site (après silex-v7.css et silex-v7-site.css).
 * 1. Allègement : la charte est fine. Titres en semi-gras, aucun gras dans le texte courant.
 * 2. En-tête, menu et pied communs.
 * 3. Filigrane (règles du directeur artistique, voir REGLES-FILIGRANE.md).
 * 4. Petits composants partagés.
 * Les jetons de couleur, de police et de rayon restent ceux de :root (silex-v7.css).
 */

/* ── 1. allègement ── */
h1,h2{font-weight:600;letter-spacing:-.028em}
h3,h4{font-weight:600}
.sur{font-weight:600;letter-spacing:.12em}
.btn{font-weight:600}
.phrase{font-weight:600}
.lead{font-size:18px}
.faq summary{font-weight:600}
main b,main strong{font-weight:600} /* le gras du navigateur (700) n’existe pas dans la charte ; les composants gardent leurs propres réglages */

/* ── 2. en-tête, menu, pied ── */
.evitement{position:absolute;left:12px;top:-100px;z-index:200;background:var(--surface);color:var(--texte);padding:10px 14px;border-radius:10px}
.evitement:focus{top:12px;box-shadow:var(--ombre)}
.tete .connexion{background:transparent}
@media (max-width:980px){.tete .connexion{display:none}}
.menu .ctas{margin:8px 0 30px}
.pied .pied-marque{display:inline-block}
.pied .pied-marque img{display:block}
.pied .pied-accroche{margin:14px 0 0;max-width:44ch;font-size:15px;line-height:1.45;color:rgba(232,247,251,.86)}
.pied .legal{max-width:none}

/* ── 3. filigrane ── */
/* Règles complètes du directeur artistique (REGLES-FILIGRANE.md). Un .tex sans variante ne s’affiche pas. */
/* ==========================================================================
   Silex · Filigrane v8
   Remplace TOUTES les règles .tex de silex-v7.css (.tex, .tex rect,
   .nuit/.fin .tex, variantes sombres, html.sans-tex).
   Motifs : motifs.svg.html (id tx = trait nuit, txb = trait clair).
   Balisage inchangé : <svg class="tex tex-doux" aria-hidden="true"><rect width="100%" height="100%"/></svg>
   Usage : voir REGLES.md. Un .tex sans variante ne s'affiche pas.
   ========================================================================== */

/* 1. Opt-in : sans variante, rien ne s'affiche */
.tex{display:none}

.tex.tex-doux,
.tex.tex-coin{
  display:block;
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  opacity:var(--tex-o);
}
.tex{--tex-o:.10}   /* fond blanc, brume, teinte : opacité au plus fort du masque */
.tex rect{fill:url(#tx)}

/* Fonds foncés de la charte : trait clair, un peu moins fort */
.nuit .tex,.fin .tex{--tex-o:.085}
.nuit .tex rect,.fin .tex rect{fill:url(#txb)}

/* 2. .tex-doux : marges latérales seulement.
   La colonne de contenu (2 × --tex-libre) reste vide ; fondu de --tex-fondu
   vers les bords, et fondu en haut et en bas pour ne jamais buter
   sur la section voisine. */
.tex-doux{
  --tex-libre:420px;   /* demi-largeur gardée vide au centre */
  --tex-fondu:200px;   /* longueur du fondu vers les bords */
  -webkit-mask-image:
    linear-gradient(90deg,
      #000 calc(50% - var(--tex-libre) - var(--tex-fondu)),
      transparent calc(50% - var(--tex-libre)),
      transparent calc(50% + var(--tex-libre)),
      #000 calc(50% + var(--tex-libre) + var(--tex-fondu))),
    linear-gradient(180deg,transparent 0,#000 min(25%,180px),#000 calc(100% - min(25%,180px)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,
      #000 calc(50% - var(--tex-libre) - var(--tex-fondu)),
      transparent calc(50% - var(--tex-libre)),
      transparent calc(50% + var(--tex-libre)),
      #000 calc(50% + var(--tex-libre) + var(--tex-fondu))),
    linear-gradient(180deg,transparent 0,#000 min(25%,180px),#000 calc(100% - min(25%,180px)),transparent 100%);
          mask-composite:intersect;
}

/* 3. .tex-coin : une tache de motif dans un coin, qui s'éteint en cercle.
   Par défaut en haut à droite ; .tex-oppose la met en bas à gauche. */
.tex-coin{
  --tex-r:460px;--tex-x:100%;--tex-y:0%;
  -webkit-mask-image:radial-gradient(circle var(--tex-r) at var(--tex-x) var(--tex-y),#000 0,rgba(0,0,0,.6) 40%,transparent 100%);
          mask-image:radial-gradient(circle var(--tex-r) at var(--tex-x) var(--tex-y),#000 0,rgba(0,0,0,.6) 40%,transparent 100%);
}
.tex-coin.tex-oppose{--tex-x:0%;--tex-y:100%}

/* 4. Thème sombre : trait clair partout. Sur les surfaces sombres du thème,
   opacité abaissée (le clair sur noir ressort plus que le nuit sur blanc).
   .nuit et .fin gardent leur dégradé en sombre : même réglage qu'en clair. */
:root[data-theme="dark"] .tex rect{fill:url(#txb)}
:root[data-theme="dark"] .tex{--tex-o:.07}
:root[data-theme="dark"] .nuit .tex,
:root[data-theme="dark"] .fin .tex{--tex-o:.085}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tex rect{fill:url(#txb)}
  :root:not([data-theme="light"]) .tex{--tex-o:.07}
  :root:not([data-theme="light"]) .nuit .tex,
  :root:not([data-theme="light"]) .fin .tex{--tex-o:.085}
}

/* 5. Écrans étroits. Sous 900 px il n'y a plus de marges libres :
   .tex-doux disparaît, le coin rétrécit. Sous 640 px (téléphone),
   chaque pixel touche du texte : aucun filigrane. */
@media (max-width:900px){
  .tex.tex-doux{display:none}
  .tex-coin{--tex-r:340px}
}
@media (max-width:640px){
  .tex.tex-coin{display:none}
}

/* 6. Désactivations */
html.sans-tex .tex{display:none!important}
@media print{.tex{display:none!important}}
@media (forced-colors:active),(prefers-contrast:more){.tex{display:none!important}}


/* ── 4. composants partagés ── */
.centre>.col-m.large{max-width:1100px}
.liste-puces{list-style:none;margin:0;padding:0;display:grid;gap:12px;text-align:left}
.liste-puces li{position:relative;padding-left:26px;font-size:17px;line-height:1.5;color:var(--texte)}
.liste-puces li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--ligne)}
.nuit .liste-puces li{color:#fff}
.nuit .liste-puces li::before{border-color:#18B4D6}

/* bouton secondaire sur les bandes foncées (.btn.sec est tracé par une ombre intérieure, pas par une bordure) */
.fin .btn.sec,.nuit .btn.sec{color:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(232,247,251,.55)}
.fin .btn.sec:hover,.nuit .btn.sec:hover{background:rgba(232,247,251,.1);box-shadow:inset 0 0 0 1.5px #E8F7FB}

/* ── 5. audit du 23 octobre : règles qui se répétaient de page en page ── */

/* Bandes foncées : surtitre et textes lisibles (au moins 4,5:1 sur le haut clair du dégradé) */
.nuit .sur,.fin .sur{color:#E8F7FB}
.nuit p,.nuit .lead,.fin p,.fin .lead{color:rgba(255,255,255,.94)}
.nuit .petit,.fin .petit{color:rgba(255,255,255,.9)}
.fin .petit a,.nuit .petit a{color:#fff}

/* Cartes claires des composants posées sur .nuit : la règle .nuit p (texte blanc) ne doit pas les atteindre */
.nuit :is(.pr-ex-carte,.pr-devoir,.cp-fiche,.ec-par) p{color:var(--texte)}

/* Jamais de rouge chez l'élève : les erreurs des copies, des exercices et des fiches passent en ardoise (toutes les pages) */
.pr-devoir,.pr-ex,.cp-fiche{--erreur:#31506B;--erreur-bg:rgba(49,80,107,.10)}
:root[data-theme="dark"] .pr-devoir,:root[data-theme="dark"] .pr-ex,:root[data-theme="dark"] .cp-fiche{--erreur:#C2CED4;--erreur-bg:rgba(194,206,212,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pr-devoir,:root:not([data-theme="light"]) .pr-ex,:root:not([data-theme="light"]) .cp-fiche{--erreur:#C2CED4;--erreur-bg:rgba(194,206,212,.14)}}

/* Héros à deux colonnes (Démonstration, Écoles, À propos) : .hero-duo sur la section, puis .hd-t (titre et chapeau),
   .hd-v (visuel) et .hd-c (boutons). Téléphone : titre, visuel, boutons. Ordinateur : texte à gauche, visuel à droite.
   Réglages par page : --hd-v (largeur relative du visuel, 1fr) et --hd-h1 (largeur du titre, 14ch). */
.hero-duo .wrap{display:grid;grid-template-areas:"t" "v" "c"}
.hero-duo .hd-t{grid-area:t}
.hero-duo .hd-v{grid-area:v;margin-top:20px;min-width:0}
.hero-duo .hd-c{grid-area:c}
@media (min-width:980px){
  .hero-duo .wrap{grid-template-columns:minmax(0,1fr) minmax(0,var(--hd-v,1fr));grid-template-areas:"t v" "c v";column-gap:72px;text-align:left}
  .hero-duo .hd-t{align-self:end}
  .hero-duo .hd-c{align-self:start}
  .hero-duo .hd-v{margin-top:0;align-self:center}
  .hero-duo h1{margin-left:0;max-width:var(--hd-h1,14ch)}
  .hero-duo .lead{margin-left:0}
  .hero-duo .ctas{justify-content:flex-start}
}

/* Titres des composants (fiche, table des matières) : semi-gras, comme les titres du site */
.cp-fiche .cp-f-titre,.pr-scene .pr-pc-t,.pr-scene .pr-fp-t{font-weight:600}

/* Focus clavier visible partout, y compris sur les fonds foncés */
:where(a,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
:where(.nuit,.fin,.pied,.tf-clarte) :where(a,button,summary,input,select,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#E8F7FB}
main[tabindex="-1"]:focus{outline:none}
.pied .pied-maquette{border-top:0;padding-top:2px;margin-top:6px}.pied .pied-maquette a{display:inline;margin:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:2px}