/*
Theme Name: Blog Growth
Theme URI: https://public.alpha.tunnelduweb.top/
Author: Tunnel du Web
Description: Theme blog editorial : typographie de lecture longue, sommaire a liens de saut, chapitres illustres, encarts de capture d'e-mail, aucun popup sur les nouveaux articles, responsive.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL-2.0-or-later
Text Domain: blog-growth
*/

:root{
  --ink:#141726; --ink-2:#3d4356; --muted:#6d7488; --line:#e6e8f0;
  --bg:#ffffff; --bg-2:#f6f7fb; --accent:#5b4bdb; --accent-2:#0fb59b;
  --accent-soft:#efeaff; --radius:14px; --wrap:760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:var(--wrap);margin:0 auto}

/* ---------- entete ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;
  color:var(--ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .dot{width:26px;height:26px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:15px}
.nav a{color:var(--ink-2);font-weight:600}
.nav a:hover{color:var(--accent);text-decoration:none}
@media(max-width:720px){.nav{gap:14px;font-size:14px}.nav .hide-s{display:none}}

/* ---------- boutons ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;
  padding:13px 22px;border-radius:11px;border:0;cursor:pointer;font-size:16px}
.btn:hover{background:#4a3bc7;text-decoration:none;color:#fff}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.btn.ghost:hover{background:#e4dcff}
.btn.big{font-size:18px;padding:16px 28px}

/* ---------- heros ---------- */
.hero{padding:76px 0 54px;background:linear-gradient(180deg,#faf9ff,#fff)}
.hero h1{font-size:clamp(31px,5vw,52px);line-height:1.12;margin:0 0 18px;
  letter-spacing:-.02em}
.hero p.lead{font-size:clamp(17px,2.2vw,21px);color:var(--ink-2);max-width:680px;margin:0 0 26px}
.hero .kicker{display:inline-block;background:var(--accent-soft);color:var(--accent);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- cartes ---------- */
.section{padding:56px 0}
.section h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.02em;margin:0 0 8px}
.section .sub{color:var(--muted);margin:0 0 30px;font-size:17px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,23,38,.08)}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#efeaff,#e6fbf6);
  display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}
/* Vignette image (couverture de l'article) : remplit le cadre 16/9, cadrage centre. */
.card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card .body{padding:20px 22px 24px}
.card .cat{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent-2);margin-bottom:8px}
.card h3{margin:0 0 10px;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.card h3 a{color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.card .meta{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------- ancres de menu ---------- */
/* L'entete est sticky (70 px de haut) : sans scroll-margin-top, la cible d'un
   lien de menu (#methode, #inscription, #commencer) arrive masquee derriere le
   bandeau, ce qui donne l'impression que le clic n'a rien fait. */
section[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

/* ---------- partage (liens seuls : aucun script tiers, aucun traceur) ---------- */
/* ATTENTION AUX NOMS DE CLASSE : aucune ne doit contenir « share ». Les listes de
   filtres des bloqueurs de publicite (Fanboy Social, embarque par uBlock Origin,
   AdGuard, Brave, Samsung Internet) contiennent une regle GENERIQUE « ##.share-btn »
   qui masquait TOUS nos boutons, plus des regles par prefixe d'URL sur
   facebook.com/sharer, twitter.com/intent/tweet, linkedin.com/sharing, wa.me et
   t.me/share (d'ou le relais par notre domaine cote PHP). Constat du 21/09 : le
   visiteur ne voyait plus que la ligne de legende. Verifie : « cl-partage* » ne
   correspond a AUCUNE regle des 4 listes principales. Ne pas renommer. */
/* Les boutons portent la classe « btn » PLEINE du theme (fond var(--accent),
   texte blanc !important) et NON « btn ghost ». Raison mesuree : la bordure
   seule de « ghost » donne 1,22:1 sur le fond de page, donc SOUS les 3:1
   exiges par WCAG 1.4.11 pour la limite d'un composant d'interface. Le fond
   plein tient cette limite dans les deux themes. Ne pas revenir a « ghost »
   sans remesurer (verif_partage_contraste.py). */
.cl-partage{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:32px 0 4px;
  padding-top:20px;border-top:1px solid var(--line)}
/* Variante HAUTE (sous la signature, avant le corps de l'article) : meme bloc,
   meme filet au-dessus, mais on lui donne de l'air en dessous pour ne pas coller
   au premier paragraphe. Regle placee APRES .cl-partage, meme specificite. */
.cl-partage-haut{margin:22px 0 34px}
/* Bouton principal « Partager » : partage NATIF du telephone (navigator.share),
   repli sur la copie du lien sinon. Pleine largeur et centre, il remplace
   l'ancien libelle qui n'etait pas cliquable. Selecteur a (0,2,0) : il passe
   devant « .btn » de pro.css (0,1,0), qui ne fixe de toute facon pas
   flex-basis — la regle existe surtout pour resister aux evolutions du theme. */
.cl-partage .cl-partage-natif{flex-basis:100%;justify-content:center}
/* Le libelle occupe sa PROPRE ligne (flex-basis:100%) : sinon il consomme la
   largeur de la rangee et les boutons de reseaux passent sur deux lignes. */
.cl-partage-lbl{flex-basis:100%;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin:0 0 2px}
/* Taille compacte pour tenir sur une seule ligne dans la colonne de 760 px.
   Selecteur volontairement plus specifique que « .btn » de pro.css (charge
   APRES style.css) : un simple « .cl-partage-btn » (0,1,0) serait ignore. On ne
   touche ni au fond ni a la couleur, que pro.css fixe en !important — c'est
   justement ce fond plein qu'on veut, et dark.css adapte var(--accent). */
.cl-partage a.cl-partage-btn,.cl-partage button.cl-partage-btn{font-size:15px;padding:9px 14px;line-height:1.2}
/* Confirmation du bouton « copier » : un anneau INTERIEUR, choisi plutot qu'un
   changement de fond (qui concurrencerait la surcharge de pro.css). Blanc pour
   la reussite, ambre pour l'echec : deux teintes lisibles sur le fond violet.
   Meme exigence de specificite que ci-dessus, pour depasser le
   « box-shadow:none » que pro.css pose sur .btn.ghost. */
.cl-partage button.cl-partage-copie[data-etat="ok"]{box-shadow:inset 0 0 0 2px #fff}
.cl-partage button.cl-partage-copie[data-etat="ko"]{box-shadow:inset 0 0 0 2px #ffd166}
/* Focus clavier : le theme n'a pas de style de focus global (seul .theme-toggle
   en definit un), donc les boutons se contentaient de l'indicateur par defaut
   du navigateur. Anneau var(--ink) et NON var(--accent) : sur un fond plein
   var(--accent), un anneau de la meme teinte serait invisible. */
.cl-partage a.cl-partage-btn:focus-visible,.cl-partage button.cl-partage-btn:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}

/* ---------- fenetre de partage (v1.5.0) ---------- */
/* POURQUOI UNE FENETRE : mesure du 21/09, le bloc complet place EN HAUT de
   l'article occupait 225 px sur une fenetre de 844 px et l'auteur le trouvait
   trop lourd a l'ouverture de la lecture. Le haut ne porte plus qu'un
   declencheur compact ; la liste des reseaux s'ouvre a la demande. Le bloc du
   BAS est conserve tel quel (il ne pese pas sur l'entree).
   NOMS DE CLASSE : tout porte « cl-partage ». Ni « share », ni « popup », ni
   « modal », ni « overlay » : ces derniers sont cibles par les listes
   « annoyances » des bloqueurs (meme famille de piege que « ##.share-btn »). */
.cl-partage-haut{display:flex;justify-content:flex-start;margin:22px 0 30px}
/* Selecteur a (0,2,0) : depasse « .btn » de pro.css (0,1,0), charge APRES
   style.css. On garde volontairement le fond plein et le texte blanc de pro.css
   (4,63:1 mesures, verif_partage_contraste.py) et l'ombre est retiree : un
   declencheur discret ne doit pas peser comme un bouton d'accroche. */
.cl-partage .cl-partage-ouvre{padding:9px 16px;font-size:14.5px;box-shadow:none}
.cl-partage-ico{font-size:15px;line-height:1}
.cl-partage .cl-partage-ouvre[aria-expanded="true"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
/* Deux couches fixes. z-index AU-DESSUS du bandeau de cookies (#clcb-banner,
   999999) : mesure du 21/09, le bandeau avalait les taps du bloc inline sur
   mobile — il ne doit pas avaler ceux de la fenetre. */
.cl-partage-fixe{position:fixed;inset:0;z-index:1000000}
.cl-partage-fixe[hidden]{display:none}
.cl-partage-fond{position:absolute;inset:0;background:rgba(8,10,22,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* Mobile : feuille collee en bas (zone du pouce). Desktop : carte centree. */
.cl-partage-panneau{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--bg);
  border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 18px 22px;
  box-shadow:0 -14px 40px rgba(8,10,22,.28)}
@media (min-width:640px){
  .cl-partage-panneau{top:50%;bottom:auto;transform:translate(-50%,-50%);
    border-radius:18px;padding:20px 22px 24px;box-shadow:0 24px 60px rgba(8,10,22,.34)}
}
.cl-partage-tete{display:flex;align-items:center;gap:12px;justify-content:space-between}
.cl-partage-titre{font-size:17px;margin:0}
.cl-partage-ferme{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
.cl-partage-ferme:hover{background:var(--line)}
.cl-partage-ferme:focus-visible,.cl-partage .cl-partage-ouvre:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}
.cl-partage-nom{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.4}
/* Le corps reprend « cl-partage » (regles de boutons ci-dessus) mais sans la
   respiration du bloc de page : c'est deja le panneau qui l'entoure. */
.cl-partage-corps.cl-partage{margin:14px 0 0;padding-top:14px}
/* Animation coupee si le visiteur demande moins de mouvement. Les deux
   keyframes sont distincts : sur desktop le panneau est centre par un
   translate(-50%,-50%), que l'animation mobile ecraserait (rebond visuel). */
@media (prefers-reduced-motion: no-preference){
  .cl-partage-fixe{animation:cl-partage-voile .16s ease-out}
  .cl-partage-panneau{animation:cl-partage-monte .22s ease-out}
}
@media (prefers-reduced-motion: no-preference) and (min-width:640px){
  .cl-partage-panneau{animation:cl-partage-centre .22s ease-out}
}
@keyframes cl-partage-voile{from{opacity:0}to{opacity:1}}
@keyframes cl-partage-monte{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cl-partage-centre{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* La page ne defile plus derriere la fenetre ouverte. */
body.cl-partage-modal{overflow:hidden}