/* blog.2min2speak.com — charte 2min2speak (CHARTE.md). Le blog s'ouvre en nuit ; le thème clair est un choix du lecteur.
   Règles : un rôle par jeton, aucune couleur en dur hors jetons, aucune ombre (filets 1 px), un seul bouton jaune par écran. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/inter-400i.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/inter-700i.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/inter-800.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/inter-800i.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/inter-900.woff2) format("woff2")}

/* Thème nuit (par défaut) */
:root{
  --creme:#0f1729; --blanc:#17203a; --navy:#f2ebdd; --navy-clair:#cdd5e4; --gris:#a7b0c3; --beige:#2a3350;
  --rouge:#ff6b73; --vert:#4ade80; --filet:rgba(242,235,221,.16); --filet-clair:rgba(242,235,221,.09);
  --sur-navy:#f2ebdd; --nappe:#0a1222;
  --jaune:#ffc43d; --jaune-fonce:#f0b020; --sur-jaune:#14213d; --or:#d4a017;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titre:clamp(2.3rem,1.1rem + 5vw,4.6rem); --h2:clamp(1.6rem,1.1rem + 2vw,2.5rem); --h3:clamp(1.05rem,1rem + .35vw,1.28rem);
  --bloc:clamp(3.5rem,8vh,6rem); --cote:clamp(1rem,5vw,2.5rem); --large:1120px; --lecture:720px;
  color-scheme:dark;
}
/* Thème clair */
:root[data-theme="light"]{
  --creme:#fff8ec; --blanc:#ffffff; --navy:#14213d; --navy-clair:#2b3550; --gris:#5b6478; --beige:#f1e6cf;
  --rouge:#e63946; --vert:#1f9d55; --filet:rgba(20,33,61,.14); --filet-clair:rgba(20,33,61,.08);
  --sur-navy:#fff8ec; --nappe:#14213d;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--navy);font-family:var(--f);font-size:17px;line-height:1.6;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--jaune-fonce)}
img,video{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-9999px;top:8px;padding:8px 12px;background:var(--jaune);color:var(--sur-jaune);font-weight:700;border-radius:8px;z-index:10}
.saut:focus{left:8px}
.in{max-width:var(--large);margin:0 auto;padding-inline:var(--cote)}

/* En-tête */
.entete{position:sticky;top:0;z-index:5;background:var(--creme);border-bottom:1px solid var(--filet)}
.entete__in{max-width:var(--large);margin:0 auto;padding-inline:var(--cote);height:64px;display:flex;align-items:center;gap:18px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none}
.marque__logo{width:36px;height:36px;border-radius:50%;flex:none}
.marque__nom{font-weight:800;font-size:18px;letter-spacing:-.02em}
.marque__nom i,.deux{font-style:normal;color:var(--rouge)}
.marque__sous{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);line-height:1.1}
.menu{display:flex;gap:20px;margin:0 0 0 auto;padding:0;list-style:none;font-size:14px;font-weight:600}
.menu a{text-decoration:none;color:var(--gris)}
.menu a:hover,.menu a[aria-current]{color:var(--navy)}
.btn-contour{margin-left:4px;font-size:14px;font-weight:700;text-decoration:none;padding:9px 14px;border-radius:10px;border:1.5px solid var(--jaune);white-space:nowrap}
.bascule{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--filet);background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.bascule .lune{display:none}
:root[data-theme="light"] .bascule .soleil{display:none}
:root[data-theme="light"] .bascule .lune{display:block}
@media (max-width:860px){.menu{display:none}.btn-contour{margin-left:auto}}
@media (max-width:420px){.marque__sous{display:none}.btn-contour{padding:8px 10px;font-size:13px}}

/* Typographie éditoriale */
.label{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.label--rouge{color:var(--rouge)}
.titre{margin:14px 0 0;font-size:var(--titre);font-weight:900;letter-spacing:-.045em;line-height:1.02;text-wrap:balance;max-width:18ch}
.titre em,h1 em,h2 em{font-style:italic;color:var(--rouge)}
.chapeau{margin:18px 0 0;max-width:56ch;font-size:1.12rem;color:var(--gris)}
.chapeau b{color:var(--navy);font-weight:600}
.bloc{padding-block:var(--bloc)}
.bloc + .bloc{border-top:1px solid var(--filet)}
.bloc h2{margin:0;font-size:var(--h2);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.tete__haut{display:flex;gap:12px;align-items:baseline;margin-bottom:10px}
.tete__num{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--rouge)}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;background:var(--jaune);color:var(--sur-jaune);font-weight:800;font-size:16px;text-decoration:none;border:0}
.btn:hover{background:var(--jaune-fonce);color:var(--sur-jaune)}
.btn--lien{background:transparent;color:var(--navy);padding:0;min-height:44px;font-weight:700;text-decoration:underline}
.actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.actions small{font-size:14px;color:var(--gris)}

/* Héros */
.heros{padding-block:clamp(48px,8vw,96px) clamp(32px,5vw,56px)}

/* Cartes */
.cartes{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cartes{grid-template-columns:1fr}}
.carte{display:flex;flex-direction:column;border:1px solid var(--filet);border-radius:18px;background:var(--blanc);overflow:hidden;text-decoration:none;transition:border-color .2s}
.carte:hover{border-color:var(--jaune);color:inherit}
.carte__img{aspect-ratio:4/3;background:var(--beige);overflow:hidden}
.carte__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.carte__corps{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.carte__corps h3{margin:0;font-size:var(--h3);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.carte__corps p{margin:0;font-size:15px;color:var(--gris)}
.carte__pied{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--navy)}
.carte__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--jaune);color:var(--sur-jaune);margin:20px 20px 0}

/* Lignes (liste des pages) */
.lignes{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--filet)}
.ligne{border-bottom:1px solid var(--filet)}
.ligne a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 4px;text-decoration:none}
.ligne a:hover{color:inherit}
.ligne a:hover .ligne__titre{color:var(--jaune-fonce)}
.ligne__num{font-size:13px;font-weight:700;color:var(--gris);font-variant-numeric:tabular-nums}
.ligne__titre{display:block;font-weight:700;font-size:1.05rem}
.ligne__meta{display:block;font-size:14px;color:var(--gris)}
.ligne__fin{color:var(--gris)}

/* Article / page de lecture */
.lecture{max-width:var(--lecture);margin:0 auto;padding-inline:var(--cote);padding-block:clamp(40px,6vw,72px) var(--bloc)}
.fil{font-size:13px;color:var(--gris);margin:0 0 18px}
.fil a{color:var(--gris)}
.lecture h1{margin:10px 0 0;font-size:clamp(2rem,1.2rem + 3.2vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.meta{margin:14px 0 0;font-size:14px;color:var(--gris)}
.prose{margin-top:28px}
.prose > *:first-child{margin-top:0}
.prose p,.prose li{text-wrap:pretty}
.prose h2{margin:2.2em 0 .5em;font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.prose h3{margin:1.6em 0 .4em;font-size:1.12rem;font-weight:800}
.prose p{margin:.8em 0}
.prose ul,.prose ol{padding-left:1.3em;margin:.8em 0}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--gris)}
.prose b,.prose strong{font-weight:700}
.prose i{color:var(--navy-clair)}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--filet)}
.prose th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:700;border-bottom-color:var(--navy)}
.prose a{font-weight:600}
.prose .btn{margin-top:8px}
.encadre{margin:1.4em 0;padding:16px 20px;border:1.5px solid var(--jaune);border-radius:14px;background:var(--blanc)}
.encadre p{margin:.35em 0}
.encadre p:first-child{margin-top:0}.encadre p:last-child{margin-bottom:0}
.video{margin:1.6em auto;max-width:340px}
.video video{width:100%;aspect-ratio:9/16;border-radius:18px;border:1px solid var(--filet);background:var(--nappe)}
.video figcaption{margin-top:8px;font-size:13px;color:var(--gris);text-align:center}
.en-vi{font-style:italic;color:var(--gris)}
.lire-aussi{margin-top:var(--bloc);padding-top:24px;border-top:1px solid var(--filet)}

/* Pages légales : numéros des sections de la politique de confidentialité */
.csbm{counter-reset:s}
.csbm h2{counter-increment:s}
.csbm h2::before{content:counter(s,decimal-leading-zero) " · ";color:var(--rouge);font-weight:700}
.csbm__maj{font-style:italic;color:var(--gris)}
.csbm__encadre{margin:1.4em 0;padding:16px 20px;border:1.5px solid var(--jaune);border-radius:14px;background:var(--blanc)}
.csbm__encadre p{margin:0}
.csbm__pied{margin-top:2em;color:var(--gris);font-size:15px}
.note-lang{margin:0 0 1.4em;padding:12px 16px;border-radius:12px;background:var(--blanc);border:1px solid var(--filet);font-size:14px;color:var(--gris)}

/* Méthode : le modèle en 4 étapes */
.etapes{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}
.etape{border:1px solid var(--filet);border-radius:16px;padding:16px;background:var(--blanc);display:flex;flex-direction:column;gap:8px}
.etape__n{display:flex;align-items:center;gap:10px;font-weight:800}
.etape__n i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;background:var(--jaune);color:var(--sur-jaune);flex:none}
.etape__n small{margin-left:auto;font-size:12px;font-weight:600;color:var(--gris);font-variant-numeric:tabular-nums}
.etape q{font-style:italic;font-size:15px;quotes:"“" "”"}
.duo{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:700px){.duo{grid-template-columns:1fr}}
.duo__cote{border:1px solid var(--filet);border-radius:16px;padding:16px 18px;background:var(--blanc)}
.duo__etiquette{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
.duo__texte{margin:6px 0 0;font-weight:700;font-size:1.02rem}
.duo__note{margin:6px 0 0;font-size:15px;color:var(--gris)}

/* Huy hiệu */
.regle{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.regle .t{display:flex;flex-direction:column;padding:12px 16px;border:1px solid var(--filet);border-radius:14px;min-width:120px;background:var(--blanc)}
.regle .t b{font-size:1.45rem;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.regle .t span{font-size:13px;color:var(--gris)}
.regle .t--ok{background:var(--jaune);color:var(--sur-jaune);border-color:transparent}
.regle .t--ok span{color:var(--sur-jaune)}
.regle .op{font-size:1.4rem;font-weight:700;color:var(--gris)}
.pastilles{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pastilles i{width:30px;height:30px;border-radius:50%;background:var(--jaune);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;color:var(--sur-jaune)}
.pastilles i:last-child{background:var(--or)}

/* Installation */
.plateforme{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;align-items:start;margin-top:28px;padding-top:28px;border-top:1px solid var(--filet)}
@media (max-width:640px){.plateforme{grid-template-columns:1fr}}
.plateforme .video{margin:0}
.plateforme h2{margin-top:0}

/* Nappe navy (bandeau d'appel) — reste sombre dans les deux thèmes */
.nappe-navy{background:var(--nappe);color:#fff8ec;border-radius:22px;padding:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.nappe-navy h2{color:#fff8ec}
.nappe-navy p{margin:6px 0 0;color:#cdd5e4}

/* Pied de page */
.pied{border-top:1px solid var(--filet);margin-top:var(--bloc)}
.pied__in{max-width:var(--large);margin:0 auto;padding:36px var(--cote) 28px;display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.pied__in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied__in{grid-template-columns:1fr}}
.pied h2{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.pied ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pied a{text-decoration:none;color:var(--navy-clair)}
.pied a:hover{color:var(--jaune-fonce)}
.pied p{margin:10px 0 0;font-size:14px;color:var(--gris)}
.pied__credit{max-width:var(--large);margin:0 auto;padding:16px var(--cote) 32px;border-top:1px solid var(--filet-clair);font-size:13px;color:var(--gris);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

@media (prefers-reduced-motion: reduce){*{transition:none}}
@media print{.entete,.pied,.bascule,.actions,.video{display:none}body{background:#fff;color:#000}}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--jaune)}
.btn.ghost:hover{background:transparent;color:var(--jaune-fonce)}