/* ============================================================
   Bascule thème clair / sombre — feuille partagée
   Bouton + animations identiques à la home (index.html).
   Le dark mode est piloté par variables : chaque page garde
   sa teinte de marque (aubergine, vert…), seuls les neutres
   (fonds, texte, bordures, cartes) basculent.
   Chargé APRÈS le <style> inline de la page → gagne les égalités
   de spécificité sur les surcharges de variables.
   ============================================================ */

/* ---- Bouton de bascule (copie exacte de la home) ----
   L'icône est un SVG au trait, dans la même grammaire que les
   pictogrammes des cartes : viewBox 24, contour en currentColor,
   épaisseur 1,6. La lune et le soleil sont tous deux dans le HTML,
   c'est le CSS ci-dessous qui affiche le bon selon data-theme. La
   bonne icône est donc à l'écran dès le premier rendu, sans attendre
   le JavaScript.
   Les animations permanentes tt-attn et tt-sway ont été retirées le
   30/07/2026 : elles signalaient une nouveauté, elles n'avaient plus
   d'objet, et un frétillement sur une icône au trait passe pour un
   défaut d'affichage. */
.theme-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:var(--ink);cursor:pointer;line-height:1;padding:0;transition:transform .15s;flex-shrink:0;}
.theme-toggle:hover{transform:translateY(-1px);}
.theme-toggle:active{transform:scale(.9);}
.theme-toggle .tt-icon{display:inline-flex;align-items:center;justify-content:center;}
.theme-toggle .tt-icon svg{width:18px;height:18px;}
.theme-toggle .tt-sun{display:none;}
[data-theme=dark] .theme-toggle .tt-moon{display:none;}
[data-theme=dark] .theme-toggle .tt-sun{display:block;}
@media(max-width:768px){.theme-toggle .tt-icon svg{width:20px;height:20px;}}


/* ---- Arrondi des boutons ----
   Une seule regle pour tous les boutons du site. La valeur vit dans
   --btn-radius : la changer ici change tout le site. Les liens de
   texte a fleche en sont exclus, ils n'ont ni fond ni bordure. */
:root{--btn-radius:6px;}
.btn,.btn-red,.btn-red-hero,.btn-red-lg,.btn-ghost,.btn-ghost-hero,.btn-white,.btn-bio,.btn-cta,.btn-au,.btn-top,.btn-export,.btn-add-tool,.btn-add-obj,.btn-cfg-secondary,.cta-box a,.cta-btn,.cta,.offre-cta,.offre-cta-solid,.offre-cta-outline,.offre-cta-final,.profile-cta,.mob-cta-bar a,.cf-submit,.w3-submit,.uc-cta,.uc-promo-cta,.art-footer-cta,.afc-btn,.blog-cta,.bcta-btn,.dt-cta,.hero-cta,.dl-btn,.rv-gate-btn,.stab,.rbtn,.obj-btn,#launch-btn,.tdah-field button,.bq-btn,.st-btn,.stress-btn{border-radius:var(--btn-radius);}

/* ---- Couleurs de TEXTE d'accent, pilotées par variable ----
   Les pages utilisent color:var(--brand) (aubergine) et color:var(--v)
   (vert) pour titres, labels, chiffres… Ces usages sont redirigés
   vers --tx-accent / --tx-green : teinte de marque en clair, version
   claire lisible en sombre. Évite d'énumérer chaque classe. */
:root{--tx-accent:var(--brand,#4A1942);--tx-green:var(--v,#2D5016);}
[data-theme=dark]{--tx-accent:var(--brand-light,#E8C4E4);--tx-green:#B8D49A;}

/* Rouge de TEXTE. Le rouge de marque --accent (#FE2400) ne fait que 3,62:1
   sur le crème : conforme en aplat (blanc sur rouge), pas en texte.
   --tx-red porte donc une version assombrie en clair (5,65:1 sur #FAF8F5)
   et une version éclaircie en sombre.
   Pour du texte rouge, utiliser var(--tx-red), jamais var(--accent).

   Le rouge vif servait auparavant tel quel en sombre : mesuré, il ne
   faisait que 4,35:1 sur les cartes sombres (#241A2A), sous les 4,5
   exigés. #FF5A3C monte à 5,4:1 sans changer la famille de teinte. */
:root{--tx-red:#C2200A;}
[data-theme=dark]{--tx-red:#FF5A3C;}

/* ---- Transition douce au basculement ---- */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease!important;}
@media(prefers-reduced-motion:reduce){
  .theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:none!important;}
}

/* ============================================================
   Palette sombre — neutres universels.
   Les teintes de marque (--brand, --brand-light, --brand-tint, --brand-dark) restent
   définies par chaque page et sont réutilisées telles quelles.
   --card / --line / --line2 sont injectés en clair dans le
   :root de chaque page (valeurs #fff / #E8E0D8 / #E0D8D0) et
   basculés ici.
   ============================================================ */
[data-theme=dark]{
  --w:#15100F;      /* fond de page, presque noir chaud */
  --w2:#1C1518;     /* fond de section alterné */
  --ink:#F2E9F0;    /* texte principal */
  --soft:#C6B8C2;   /* texte secondaire */
  --muted:#9E8F9A;  /* texte tertiaire */
  --card:#211A20;   /* fond de carte (était #fff) */
  --line:#37303A;   /* bordures (était #E8E0D8 / #EAE0D8) */
  --line2:#2F2833;  /* bordures discrètes (était #E0D8D0) */
  --brand-tint:#241A2A;    /* fond teinté (aubergine par défaut) */
  --vx:#1B2416;     /* fond teinté vert (était #EAF3DF) */
}

[data-theme=dark] body{background:var(--w);color:var(--ink);}

/* Barre de navigation (fond translucide + bordure basse) */
[data-theme=dark] nav{background:rgba(21,16,15,.94);border-bottom-color:var(--line);}

/* Accents colorés : titres, labels, liens de marque repassent
   en version claire de la teinte (--brand-light = lavande sur aubergine,
   vert clair sur la page libéraux). */
[data-theme=dark] .s-label,
[data-theme=dark] .s-title .v,
[data-theme=dark] .nav-link:hover,
[data-theme=dark] .who-name,
[data-theme=dark] .who-link,
[data-theme=dark] .offre-num,
[data-theme=dark] .bio-block-label,
[data-theme=dark] .p-num,
[data-theme=dark] .b-card-cat,
[data-theme=dark] .bcard-cat,
[data-theme=dark] .fq-icon,
[data-theme=dark] .bh-label,
[data-theme=dark] .art-cat,
[data-theme=dark] .toc-title{color:var(--brand-light);}
[data-theme=dark] .s-label::before,
[data-theme=dark] .bio-block-label::before{background:var(--brand-light);}

/* Styles inline color:var(--brand…) (labels, accents posés en dur dans le HTML)
   → repassent en teinte claire, sinon ils restent foncés sur fond sombre. */
[data-theme=dark] [style*="color:var(--brand)"]{color:var(--brand-light)!important;}

/* Titres de prose (articles de blog) → clair pour rester lisibles */
[data-theme=dark] .art-body h2,
[data-theme=dark] .art-body h3,
[data-theme=dark] .art-body h4,
[data-theme=dark] .cta-box-title,
[data-theme=dark] .uc-section-title,
[data-theme=dark] .cas-title{color:var(--ink);}
/* Liens d'accent (consentement formulaire, corps de texte) */
[data-theme=dark] .cf-consent a,
[data-theme=dark] .art-body a,
[data-theme=dark] .art-body strong{color:var(--brand-light);}

/* Cartes / panneaux qui utilisaient un fond blanc en dur */
[data-theme=dark] .who-card,
[data-theme=dark] .offre,
[data-theme=dark] .b-card,
[data-theme=dark] .bcard,
[data-theme=dark] .proof-c,
[data-theme=dark] .lev-col,
[data-theme=dark] .tool-card,
[data-theme=dark] .uc-card,
[data-theme=dark] .cas-card{background:var(--card);}

/* Grilles à fond de séparation clair */
[data-theme=dark] .who-grid,
[data-theme=dark] .offres-grid,
[data-theme=dark] .proof-grid,
[data-theme=dark] .lev-grid{background:var(--line);border-color:var(--line);}

/* Bordures de sections / séparateurs */
[data-theme=dark] .section{border-top-color:var(--line);}

/* FAQ / accordéons */
[data-theme=dark] .fi,
[data-theme=dark] .fi:last-child{border-color:var(--line);}
[data-theme=dark] .fq-icon{border-color:var(--line);}

/* Champs de formulaire */
[data-theme=dark] input,
[data-theme=dark] select,
[data-theme=dark] textarea{background:var(--card);border-color:var(--line);color:var(--ink);}

/* Le pied de page est déjà sombre (aubergine --brand-dark) : on le laisse.
   Exception traitée dans les pages légales, qui utilisaient
   background:var(--ink) : en sombre --ink devient CLAIR, le pied de page
   virait au blanc sous son texte blanc. Corrigé à la source par une
   valeur littérale, voir mentions-legales.html et confidentialite.html. */

/* ============================================================
   Encadrés à fond clair posés en dur dans le HTML.
   Ils gardaient leur fond clair en sombre pendant que leur texte
   passait en clair : contenu illisible (1,04:1 mesuré).
   ============================================================ */
/* Numéros d'étape en vert de marque (pages outils) : le vert foncé reste
   foncé en sombre. Version claire, 8,6:1 sur les cartes sombres. */
[data-theme=dark] .inst-n{color:#9BCB78;}

/* Numéros filigrane des briques. Ils sont décoratifs, donc hors norme de
   contraste, mais posés en noir translucide ils disparaissaient totalement
   sur fond sombre. Deux pages avaient déjà leur propre surcharge, celle-ci
   couvre les autres. */
[data-theme=dark] .mod-n,
[data-theme=dark] .pain-n{color:rgba(255,255,255,.06);}

[data-theme=dark] .warning-box{background:#2B2317;border-color:#E68A00;}
[data-theme=dark] .warning-title{color:#F0B65C;}
[data-theme=dark] .warning-box p{color:#E8DCC4;}
[data-theme=dark] code,
[data-theme=dark] .art-body code{background:var(--w2);color:var(--ink);}

/* ============================================================
   Cibles tactiles — zone de contact étendue, rendu inchangé.
   Le padding agrandit ce que le doigt peut toucher, la marge
   négative rembourse l'espace pris : aucun décalage de mise en
   page. Mesures d'origine : logo 19 à 22px de haut, icônes
   sociales 15px de large, lien "Blog" du footer à 23px.
   ============================================================ */
@media(hover:none){
  .nav-logo{padding:13px 0;margin:-13px 0;}
  .footer-links a{min-width:24px;}
  /* Icônes sociales : 15px de large, donc 15 de padding de chaque côté
     pour atteindre la barre de confort de 44px (elles étaient à 39). */
  footer a[aria-label]{padding:15px;margin:-15px;}
}

/* ============================================================
   Filet de sécurité des révélations au scroll.
   Chaque page pose .rev / .rev-l / .stg>* à opacity:0 et compte
   sur un IntersectionObserver pour ajouter .in. Si le JS ne
   s'exécute pas, ou si l'observateur ne se déclenche jamais, le
   contenu reste invisible — y compris le H1. Deux protections :
   1. mouvement réduit → tout est visible d'emblée, sans animation
   2. sans JavaScript → tout est visible (la classe .js est posée
      par le script anti-FOUC en <head> ; sans JS elle n'existe pas,
      donc html:not(.js) s'applique). Voir aussi le filet de
      theme.js, qui couvre le cas où le JS tourne mais échoue.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .rev,.rev-l,.stg>*{opacity:1!important;transform:none!important;transition:none!important;}
}
html:not(.js) .rev,
html:not(.js) .rev-l,
html:not(.js) .stg>*{opacity:1!important;transform:none!important;}