/* anthony-bouillon.com — la collection « Méthode polyglotte ».
   Refonte graphique du 15/10/2026. Deux règles tiennent toute la page :
   1. chaque langue s'écrit dans sa propre écriture (日本語, Русский, ᐃᓄᒃᑎᑐᑦ…) ;
   2. seuls les livres ont une ombre : tout le reste est plat, séparé par des filets,
      comme une page imprimée. */

/* ═══ Polices (servies par le site, licence SIL OFL) ═══ */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/polices/bodoni-moda-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/polices/noto-serif-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/polices/noto-serif-latin-italique.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
/* Les noms des langues : fichiers réduits aux seules lettres de ces noms */
@font-face{font-family:"Noms latins";font-weight:700;font-display:swap;src:url(/assets/polices/noto-serif-noms.woff2) format("woff2")}
@font-face{font-family:"Noms jp";font-weight:700;font-display:swap;src:url(/assets/polices/noto-serif-jp-noms.woff2) format("woff2")}
@font-face{font-family:"Noms kr";font-weight:700;font-display:swap;src:url(/assets/polices/noto-serif-kr-noms.woff2) format("woff2")}
@font-face{font-family:"Noms sc";font-weight:700;font-display:swap;src:url(/assets/polices/noto-serif-sc-noms.woff2) format("woff2")}
@font-face{font-family:"Noms thai";font-weight:700;font-display:swap;src:url(/assets/polices/noto-serif-thai-noms.woff2) format("woff2")}
@font-face{font-family:"Noms syllabaire";font-weight:700;font-display:swap;src:url(/assets/polices/noto-sans-syllabaire-noms.woff2) format("woff2")}

/* ═══ Variables : le seul endroit où se décident couleurs, tailles et espaces ═══ */
:root{
  /* Couleurs, tirées des couvertures */
  --encre:#0c447c;      /* titres, boutons, liens */
  --nuit:#0b1a2e;       /* texte ; fond du mode sombre */
  --papier:#fbf6ec;     /* fond */
  --or:#d4a544;         /* filets et repères, jamais du texte sur fond clair */
  --sceau:#c8102e;      /* le bouton « Voir le broché », rien d'autre */
  --plume:#5d6675;      /* textes secondaires */

  /* Rôles (le mode sombre ne change que ceux-ci) */
  --fond:var(--papier);
  --texte:var(--nuit);
  --discret:var(--plume);
  --titre:var(--encre);
  --lien:var(--encre);
  --filet:#e3d8c2;
  --surface:#fffdf8;    /* champs de formulaire */
  --ombre-livre:0 1px 2px rgba(11,26,46,.18),0 10px 24px -6px rgba(11,26,46,.35);

  /* Typographie : deux familles, cinq tailles */
  --titres:"Bodoni Moda","Noto Serif",Georgia,serif;
  --texte-police:"Noto Serif",Georgia,"Times New Roman",serif;
  --t-petit:.9375rem;                          /* 15 px */
  --t-corps:1.0625rem;                         /* 17 px */
  --t-3:1.375rem;                              /* 22 px */
  --t-2:clamp(1.625rem,3.4vw,2rem);            /* 26 → 32 px */
  --t-1:clamp(2.25rem,5.6vw,4rem);             /* 36 → 64 px */
  --mesure:65ch;                               /* longueur de ligne maximale */

  /* Espaces */
  --e1:.5rem;--e2:1rem;--e3:1.5rem;--e4:2.5rem;--e5:4rem;
  --largeur:1120px;
}
@media (prefers-color-scheme:dark){
  :root{--fond:var(--nuit);--texte:#ece5d6;--discret:#a7b0bf;--titre:#f1e7d0;--lien:#9cc6f2;--filet:#24344d;--surface:#11233b;
        --ombre-livre:0 1px 2px rgba(0,0,0,.5),0 12px 28px -6px rgba(0,0,0,.7)}
}

/* ═══ Base ═══ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 var(--t-corps)/1.65 var(--texte-police)}
img{max-width:100%;height:auto;display:block}
a{color:var(--lien);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--titres);color:var(--titre);font-weight:700;line-height:1.12;margin:0 0 var(--e2);letter-spacing:-.005em}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2);margin-top:var(--e5)}
h3{font-size:var(--t-3);line-height:1.25}
p{margin:0 0 var(--e2);max-width:var(--mesure)}
ul,ol{max-width:var(--mesure)}
.conteneur{width:min(var(--largeur),100% - 2*var(--e2));margin:0 auto}
.etroit{width:min(46rem,100% - 2*var(--e2));margin:0 auto 0 max(var(--e2),(100% - var(--largeur))/2)}
.discret{color:var(--discret);font-size:var(--t-petit)}
.cache{position:absolute;left:-9999px}
.sauter{position:absolute;left:var(--e2);top:-4rem}
.sauter:focus{top:var(--e1);background:var(--fond);padding:var(--e1) var(--e2);z-index:5}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ═══ Les noms des langues dans leur écriture ═══ */
.endo{font-family:"Noms latins","Noto Serif",serif;font-weight:700;color:var(--titre);line-height:1.1;display:block}
.ecr-jp{font-family:"Noms jp","Noto Serif JP",serif}
.ecr-kr{font-family:"Noms kr","Noto Serif KR",serif}
.ecr-sc{font-family:"Noms sc","Noto Serif SC",serif}
.ecr-thai{font-family:"Noms thai","Noto Serif Thai",serif;line-height:1.35}
.ecr-syllabaire{font-family:"Noms syllabaire","Noto Sans Canadian Aboriginal",sans-serif}

/* ═══ Les livres : les seuls objets à avoir une ombre ═══ */
.couv{width:100%;height:auto;border-radius:1px 3px 3px 1px;box-shadow:var(--ombre-livre);background:var(--filet)}
.couv-vide{aspect-ratio:2/3;width:100%;border-radius:1px 3px 3px 1px;box-shadow:var(--ombre-livre);background:var(--encre);color:var(--papier);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--e2);font-family:var(--titres)}
.couv-vide b{font-size:var(--t-3);color:var(--or)}
.couv-vide small{font-size:var(--t-petit)}

/* ═══ En-tête ═══ */
.entete{border-bottom:1px solid var(--filet)}
.entete .conteneur{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e1) var(--e3);padding:var(--e2) 0}
.logo{font-family:var(--titres);font-weight:700;font-size:var(--t-3);color:var(--titre);text-decoration:none;letter-spacing:.01em}
.nav{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);font-size:var(--t-petit)}
.nav a{color:var(--texte);text-decoration:none}
.nav a:hover{color:var(--lien);text-decoration:underline}
@media (max-width:640px){.nav{gap:.35rem 1rem}}

/* ═══ Ouverture des pages ═══ */
.ouverture{padding:var(--e4) 0 var(--e3)}
.ouverture .sous{font-size:clamp(var(--t-corps),2.4vw,var(--t-3));line-height:1.45;color:var(--discret);max-width:34em}
.fil{font-size:var(--t-petit);color:var(--discret);margin-bottom:var(--e3)}
.fil a{color:inherit}

/* Accueil : le titre et deux couvertures posées */
.une{display:grid;gap:var(--e4);align-items:center;padding:var(--e4) 0 var(--e3)}
.une h1{max-width:12em}
.une .sous{font-size:clamp(var(--t-corps),2.4vw,var(--t-3));line-height:1.45;color:var(--discret);max-width:30em}
.une-livres{display:none}
@media (min-width:860px){
  .une{grid-template-columns:1fr 340px;padding:var(--e5) 0 var(--e4)}
  .une-livres{display:block;position:relative;height:330px}
  .une-livres img{position:absolute;width:190px}
  .une-livres img:first-child{left:0;top:10px;transform:rotate(-4deg)}
  .une-livres img:last-child{right:0;top:40px;transform:rotate(3deg)}
}

/* ═══ Boutons ═══ */
.boutons{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e2);margin:var(--e3) 0}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.4rem;border-radius:3px;font:700 var(--t-petit)/1.2 var(--texte-police);text-decoration:none;border:2px solid var(--encre)}
.bouton.principal{background:var(--sceau);border-color:var(--sceau);color:#fff}
.bouton.principal:hover{background:#a50d26;border-color:#a50d26}
.bouton.second{background:transparent;color:var(--lien);border-color:currentColor}
.bouton.calme{background:var(--encre);border-color:var(--encre);color:#fff}
@media (max-width:520px){.boutons .bouton{flex:1 1 100%}.vedette .boutons .bouton{flex:1 1 0;padding:.6rem .5rem;min-height:44px}}

/* ═══ Accueil : la table des langues ═══ */
.groupe{font-family:var(--texte-police);font-size:var(--t-petit);font-weight:700;font-variant:small-caps;letter-spacing:.04em;color:var(--discret);border-bottom:2px solid var(--or);padding-bottom:var(--e1);margin:var(--e4) 0 0}
.vedettes{list-style:none;margin:0;padding:0;max-width:none}
.vedette{display:grid;grid-template-columns:72px 1fr;gap:var(--e2) var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--filet)}
.vedette .endo{font-size:var(--t-2)}
.vedette h3{font-family:var(--texte-police);font-size:var(--t-corps);margin:.2rem 0 .3rem}
.vedette h3 a{color:var(--texte)}
.vedette p{margin:0;color:var(--discret);font-size:var(--t-petit)}
.vedette .boutons{margin:var(--e2) 0 0}
@media (min-width:860px){
  .vedettes{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e4)}
  .vedette{grid-template-columns:120px 1fr}
}
.table-langues{list-style:none;margin:0;padding:0;max-width:none}
.table-langues li{border-bottom:1px solid var(--filet)}
.table-langues a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"endo couv" "nom couv";align-items:center;column-gap:var(--e2);padding:var(--e2) 0;text-decoration:none;color:var(--texte)}
.table-langues .endo{grid-area:endo;font-size:var(--t-2)}
.table-langues .nom{grid-area:nom;font-size:var(--t-petit);color:var(--discret)}
.table-langues .nom b{color:var(--texte);font-weight:700}
.table-langues .couv,.table-langues .couv-vide{grid-area:couv;width:44px}
.table-langues .couv-vide{padding:0;font-size:0}
.table-langues a:hover .endo{color:var(--lien);text-decoration:underline;text-decoration-thickness:2px}
@media (min-width:860px){
  .table-langues{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e4)}
}

/* La méthode : quatre paragraphes, sans boîtes */
.methode{display:grid;gap:var(--e2) var(--e4);margin-top:var(--e2)}
.methode p{margin:0}
.methode b{display:block;font-family:var(--titres);font-size:var(--t-3);color:var(--titre);margin-bottom:.2rem}
@media (min-width:760px){.methode{grid-template-columns:1fr 1fr}}

.auteur{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap;border-top:1px solid var(--filet);padding-top:var(--e4);margin-top:var(--e5)}
.auteur img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.auteur > div{flex:1 1 18rem}
.auteur h2{margin-top:0}
.pour-auteurs{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:var(--e2) 0;margin:var(--e4) 0;display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);justify-content:space-between;align-items:baseline}
.pour-auteurs span{font-family:var(--titres);font-size:var(--t-3);color:var(--titre)}

/* ═══ Page langue ═══ */
.fiche{display:grid;grid-template-columns:104px 1fr;grid-template-areas:"endo endo" "titre titre" "couv faits" "boutons boutons" "sous sous" "desc desc" "en en";column-gap:var(--e2);padding:var(--e3) 0 var(--e2)}
.fiche .endo{grid-area:endo;font-size:var(--t-2);margin-bottom:var(--e1)}
.fiche h1{grid-area:titre;font-size:clamp(1.875rem,5vw,3.25rem)}
.fiche .objet{grid-area:couv}
.fiche .faits{grid-area:faits}
.fiche .boutons{grid-area:boutons;margin:var(--e2) 0}
.fiche .sous{grid-area:sous;font-size:var(--t-corps);color:var(--discret)}
.fiche .desc{grid-area:desc}
.fiche .en{grid-area:en;font-size:var(--t-petit)}
@media (min-width:860px){
  .fiche{grid-template-columns:280px 1fr;grid-template-areas:"couv endo" "couv titre" "couv sous" "couv faits" "couv boutons" "couv desc" "couv en";column-gap:var(--e5);align-items:start;padding:var(--e4) 0}
  .fiche .objet{align-self:start}
  .fiche .endo{font-size:var(--t-1)}
}
.faits{list-style:none;margin:0;padding:0;font-size:var(--t-petit)}
.faits li{padding:.2rem 0;border-bottom:1px solid var(--filet)}
.faits li:last-child{border-bottom:0}
.faits b{font-weight:700}
@media (min-width:860px){.faits{display:flex;flex-wrap:wrap;gap:0 var(--e3)}.faits li{border:0;padding:0}}

.pour-qui{margin:var(--e4) 0}
.pour-qui h2{font-size:var(--t-3);margin:0 0 .3rem}
.pour-qui p{margin:0}
.sommaire{list-style:none;margin:var(--e2) 0 0;padding:0;counter-reset:palier;columns:2 18rem;column-gap:var(--e4);max-width:none}
.sommaire li{counter-increment:palier;break-inside:avoid;display:flex;gap:var(--e2);padding:.55rem 0;border-bottom:1px solid var(--filet)}
.sommaire li::before{content:counter(palier);font-family:var(--titres);font-weight:700;color:var(--titre);min-width:1.6em;text-align:right}
.extraits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);margin-top:var(--e2)}
.extraits img{border-radius:1px;box-shadow:var(--ombre-livre);background:#fff}
@media (max-width:640px){.extraits{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--e1)}.extraits img{scroll-snap-align:start}}
.autres{list-style:none;margin:0;padding:0;max-width:none}
.autres li{display:grid;grid-template-columns:72px 1fr;gap:var(--e2);padding:var(--e3) 0;border-bottom:1px solid var(--filet)}
.autres h3{font-family:var(--texte-police);font-size:var(--t-corps);margin:0 0 .3rem}
.autres p{margin:0;font-size:var(--t-petit);color:var(--discret)}
.autres .boutons{margin:var(--e2) 0 0}

/* Questions fréquentes : des filets, pas des boîtes */
details{border-bottom:1px solid var(--filet)}
details:first-of-type{border-top:1px solid var(--filet)}
summary{cursor:pointer;font-weight:700;padding:var(--e2) 0;list-style-position:outside}
details p{margin:0 0 var(--e2)}

/* ═══ Cartes de livres (guides, éditions anglaises) : à plat, séparées par des filets ═══ */
.livres{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;gap:0 var(--e4);max-width:none}
@media (min-width:760px){.livres{grid-template-columns:1fr 1fr}}
.livre{display:grid;grid-template-columns:96px 1fr;gap:var(--e2) var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--filet);align-content:start}
.livre h3{margin:0 0 .3rem}
.livre p{font-size:var(--t-petit);color:var(--discret);margin:0 0 var(--e1)}
.livre .boutons{margin:var(--e1) 0 0}

/* ═══ Mise en page KDP ═══ */
.tarifs{width:100%;border-collapse:collapse;margin:var(--e2) 0}
.tarifs th{font-size:var(--t-petit);font-weight:700;text-align:left;color:var(--discret);border-bottom:2px solid var(--or);padding:var(--e1) var(--e2) var(--e1) 0}
.tarifs td{border-bottom:1px solid var(--filet);padding:var(--e2) var(--e2) var(--e2) 0;vertical-align:top}
.tarifs td.prix{font-family:var(--texte-police);font-weight:700;font-size:var(--t-corps);color:var(--titre);text-align:right;white-space:nowrap;padding-right:0}
.tarifs th:last-child{text-align:right;padding-right:0}
@media (max-width:640px){
  .tarifs thead{display:none}
  .tarifs tr{display:grid;border-bottom:1px solid var(--filet);padding:var(--e2) 0}
  .tarifs td{border:0;padding:0}
  .tarifs td.prix{grid-row:2;text-align:left;white-space:normal}
  .tarifs td:nth-child(2){grid-row:3;font-size:var(--t-petit);color:var(--discret);padding-top:.3rem}
}
.preuve{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2);max-width:30rem;margin:var(--e3) 0}
.savoir{padding-left:1.1rem}
.savoir li{margin:.35rem 0}

/* ═══ Formulaires ═══ */
.formulaire{border-top:2px solid var(--or);padding-top:var(--e3);margin-top:var(--e5)}
.formulaire h2{margin-top:0}
form .champ{margin:0 0 var(--e2)}
form label{display:block;font-weight:700;margin-bottom:.3rem;font-size:var(--t-petit)}
form input[type=text],form input[type=email],form input[type=number],form select,form textarea{width:100%;min-height:48px;padding:.65rem .8rem;border:1px solid #b8ab92;border-radius:3px;background:var(--surface);color:var(--texte);font:inherit}
form input[type=file]{font:inherit;font-size:var(--t-petit)}
@media (min-width:760px){form .deux{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e3)}}
form .case{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-petit);font-weight:400}
.message-ok{border-left:3px solid #1f7a4d;padding:var(--e1) var(--e2);background:rgba(31,122,77,.08)}
.message-erreur{border-left:3px solid var(--sceau);padding:var(--e1) var(--e2);background:rgba(200,16,46,.07)}

/* ═══ Pages audio ═══ */
.palier{margin:var(--e4) 0}
.mot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1) var(--e2);padding:var(--e1) 0;border-bottom:1px solid var(--filet)}
.mot b{min-width:8rem}

/* Champs à remplir : aperçu de travail seulement, jamais en ligne */
.a-remplir{display:inline-block;background:#fff3c4;color:#6b4e00;border:1px dashed var(--or);padding:.1rem .45rem;font-size:.85rem;font-weight:700}

/* ═══ Pied de page ═══ */
.pied{border-top:1px solid var(--filet);margin-top:var(--e5);padding:var(--e4) 0 var(--e3);font-size:var(--t-petit)}
.pied .colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--e3)}
.pied .colonnes > div{line-height:2}
.pied a{color:var(--texte)}
.pied .mention{color:var(--discret);border-top:1px solid var(--filet);margin-top:var(--e3);padding-top:var(--e2);max-width:none}

/* ═══ Formulaire Brevo « palier 1 gratuit » (config/brevo-formulaire.html) ═══
   Les styles de Brevo ne sont pas chargés : ces règles remplacent ce dont son script a besoin. */
.sib-form-message-panel{display:none;margin:0 0 var(--e2)}
.sib-form-message-panel--active{display:block}
.input--hidden{display:none!important}
.entry__error{display:block;color:var(--sceau);font-size:var(--t-petit);margin-top:.3rem}
.entry__error:empty{display:none}
.consentement{display:flex;gap:.6rem;font-weight:400!important;align-items:flex-start;font-size:var(--t-petit);line-height:1.5;margin:0 0 var(--e3);max-width:var(--mesure)}
.consentement input{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--encre)}
.sib-form-block__button svg{width:1em;height:1em;margin-right:.5em;fill:currentColor;animation:tourne 1s linear infinite}
.sib-form-block__button svg.sib-hide-loader-icon{display:none}
@keyframes tourne{to{transform:rotate(360deg)}}