/* Nexus Ebook — tokens, resets vitaux, typographie de base.
   Les composants (header, footer, tunnel…) arrivent aux tâches suivantes. */

:root{--creme:#F1ECDF;--encre:#15120F;--gris:#4A443A;--vermillon:#DB3318;--jaune:#F0BE00;--filet:#D8D2C4;--blanc:#FBF9F4;
  --font-display:'Archivo','Arial Narrow',sans-serif;--font-body:'Newsreader',Georgia,serif;--font-mono:'IBM Plex Mono',Menlo,monospace;
  --max:1200px;--gutter:clamp(16px,4vw,40px);--radius:2px}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html.menu-open{overflow:hidden}
html.menu-open body{overflow:hidden}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
.screen-reader-text{position:absolute!important;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0}
h1,h2,h3,.t-display{font-family:var(--font-display);font-stretch:condensed;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2.4rem,9vw,5.5rem);font-weight:800} h2{font-size:clamp(1.8rem,6vw,3.4rem);font-weight:700} h3{font-size:clamp(1.25rem,4vw,1.8rem);font-weight:600}
.mono,.prix,.etq{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
a{color:inherit} :focus-visible{outline:3px solid var(--vermillon);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;min-width:44px;padding:.75rem 1.5rem;background:var(--vermillon);color:var(--creme);font-family:var(--font-display);font-stretch:condensed;font-weight:700;text-transform:uppercase;font-size:1.05rem;text-decoration:none;border:0;border-radius:var(--radius);cursor:pointer}
.btn--ghost{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre)}
.btn[disabled],.btn.is-disabled{background:var(--filet);color:var(--gris);cursor:default}
.skip-link{position:absolute;left:-999px;top:0;display:inline-flex;align-items:center;min-height:44px;background:var(--encre);color:var(--creme);padding-inline:1rem;z-index:1000}.skip-link:focus{left:8px;top:8px}

/* ===== En-tête ===== */
.site-header{position:sticky;top:0;z-index:300;background:var(--creme);border-bottom:1px solid var(--filet)}
.site-header__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:64px;padding-block:.75rem}

.menu-toggle{position:relative;z-index:210;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem;background:transparent;border:0;border-radius:var(--radius);color:var(--encre);cursor:pointer}
.menu-toggle__icon-close{display:none}
html.menu-open .menu-toggle__icon-open{display:none}
html.menu-open .menu-toggle__icon-close{display:block}

.site-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:210;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-stretch:condensed;font-weight:800;letter-spacing:.02em;font-size:1.05rem;text-decoration:none;color:var(--encre);white-space:nowrap;opacity:1;transition:opacity .15s ease}

.cart-link{position:relative;z-index:210;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--encre);text-decoration:none;opacity:1;transition:opacity .15s ease}
.ne-cart-count{position:absolute;top:2px;right:2px}
.ne-cart-count__n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;background:var(--vermillon);color:var(--creme);font-family:var(--font-mono);font-size:.625rem;line-height:1;border-radius:999px}

/* Le logo et le panier restent PEINTS au-dessus du tiroir ouvert (z-index
   210 ci-dessus, finding 1 du round 1) mais sont rendus inert par le JS
   (finding 2) : sans signal visuel, ils avaient l'air cliquables tout en
   étant morts au toucher (round 1 -> régression relevée au round 2). Seul
   le burger (croix) reste un contrôle actif hors tiroir. */
html.menu-open .site-logo,
html.menu-open .cart-link{opacity:.35;pointer-events:none}

/* Tiroir plein écran < 768px, fermé par défaut (hidden + inert posés par le PHP,
   bascule pilotée par assets/js/theme.js via la classe menu-open sur <html>).
   z-index 200 < 210 (burger, logo, panier ci-dessus) : le panneau, bien qu'il
   couvre tout le viewport (inset:0) et soit un ENFANT DOM de .site-header__bar,
   passe SOUS ces trois éléments — sinon, sans z-index explicite sur eux, ils
   sont peints comme le reste du contenu "auto" de la barre et un enfant à
   z-index positif (le panneau) les recouvre systématiquement, burger compris :
   impasse au doigt, ouverture sans fermeture possible (round 1, finding 1). */
.site-nav{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:2rem;background:var(--creme);padding:calc(64px + 2rem) var(--gutter) 2rem;overflow-y:auto}
.site-nav[hidden]{display:none}

.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.menu a{display:flex;align-items:center;min-height:44px;font-family:var(--font-display);font-stretch:condensed;font-weight:700;text-transform:uppercase;font-size:1.4rem;text-decoration:none;color:var(--encre);border-bottom:1px solid var(--filet)}

.lang-switch{display:flex;align-items:center;gap:.25rem;font-family:var(--font-mono);font-size:.875rem}
.lang-switch__item{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none;color:var(--gris)}
.lang-switch__item.is-active{color:var(--encre);font-weight:700}
.lang-switch__sep{color:var(--filet)}

@media (min-width:768px){
  .menu-toggle{display:none}
  .site-logo{position:static;transform:none;font-size:1.2rem}
  .site-header__bar{justify-content:flex-start}
  .site-nav{position:static;inset:auto;z-index:auto;flex:1;flex-direction:row;align-items:center;justify-content:flex-end;gap:2rem;background:none;padding:0;overflow:visible}
  .site-nav[hidden]{display:flex}
  .menu{flex-direction:row;gap:1.5rem}
  .menu a{border-bottom:0;padding-inline:.25rem}
}

/* ===== Pied ===== */
.site-footer{margin-top:4rem;background:var(--encre);color:var(--creme)}
.site-footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding-block:3rem}
.site-footer__title{margin:0 0 1rem;font-family:var(--font-display);font-stretch:condensed;font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--creme)}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.site-footer__col a{display:flex;align-items:center;min-height:44px;color:var(--creme);text-decoration:none}
.site-footer__col a:hover{text-decoration:underline}
.site-footer__bottom{border-top:1px solid rgba(241,236,223,.2);padding-block:1.25rem;font-family:var(--font-mono);font-size:.75rem;color:var(--filet)}

@media (max-width:767.98px){
  .site-footer__grid{grid-template-columns:minmax(0,1fr)}
}

/* ===== Filet provisoire sur les gabarits WooCommerce PAR DÉFAUT (fil
   d'Ariane, recherche produit) : les styles définitifs viennent avec les
   surcharges woocommerce/ de la tâche 4. Ici, seule la cible tactile réelle
   est corrigée — jamais par la police. */
.woocommerce-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.search-field,.search-submit{min-height:44px}

/* ===================================================================
   ACCUEIL — page de vente du livre (page-templates/accueil.php)
   Alternance de registres : hero crème → 4 choses crème → réassurance
   blanc cassé → extrait jaune → FAQ crème → ancre encre. Le jaune et
   l'encre tiennent lieu de respirations ; le vermillon reste rare
   (pastilles, puces, boutons) conformément à la règle 90/10.
   =================================================================== */

/* --- Hero : couverture d'abord sous 768px, texte à gauche au-dessus. --- */
.hero{padding-block:2rem 3rem;border-bottom:1px solid var(--filet)}
.hero__grid{display:grid;gap:1.75rem}
.hero__visuel{display:flex;justify-content:center;padding-block:.5rem 1rem}
/* La rotation reste petite ET la couverture bornée en largeur : la boîte
   englobante d'une image tournée de 3° gagne ~ hauteur × sin(3°) — à 320px,
   207px de large et 293px de haut donnent 222px englobants dans 288px
   disponibles. C'est ce calcul qui évite un débordement mesuré. */
.hero__couv{width:min(260px,70%);transform:rotate(-3deg);box-shadow:0 18px 44px rgba(21,18,15,.30);border-radius:3px}
.hero__surtitre{margin:0 0 .75rem;color:var(--vermillon);font-weight:700}
.hero h1{margin:0 0 1rem}
.hero__intro{margin:0 0 1.5rem;max-width:46ch;font-size:1.125rem;color:var(--gris)}
.hero__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .75rem;margin:0 0 1.25rem}
.hero__prix-montant{font-family:var(--font-mono);font-size:1.5rem;font-weight:700}
.hero__prix-montant .woocommerce-Price-amount{white-space:nowrap}
.hero__prix-note{color:var(--gris)}
.hero__cta{margin:0 0 1.5rem}
.hero__points{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-width:46ch}
.hero__points li{position:relative;padding-left:1.6rem;color:var(--gris);font-size:1rem}
.hero__points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--vermillon);border-radius:999px}

@media (min-width:768px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:3rem;padding-block:1.5rem 2rem}
  .hero__texte{order:1}
  .hero__visuel{order:2}
  /* 88 % et pas 100 % : la boîte englobante d'une image tournée de 3°
     mesure largeur × (cos3° + ratio × sin3°) ≈ largeur × 1,073 pour une
     couverture 900×1273. À 100 %, la colonne de droite déborde de 23 px
     à 768 px — mesuré par l'audit, invisible à la lecture du CSS. */
  .hero__couv{width:min(340px,88%)}
}
@media (min-width:1200px){ .hero__couv{width:min(400px,88%)} }

/* --- Les quatre choses : liste numérotée, côtés alternés ≥ 768px. --- */
.facons{padding-block:3rem}
.facons__titre{margin:0 0 .9rem}
.facons__intro{margin:0 0 2.5rem;max-width:60ch;color:var(--gris);font-size:1.05rem}
.facons__liste{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
.facon{display:grid;gap:1.25rem}
.facon__num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 .9rem;background:var(--vermillon);color:var(--creme);border-radius:999px;font-size:.9375rem;font-weight:700}
.facon__texte h3{margin:0 0 .6rem}
.facon__texte p{margin:0;max-width:52ch;color:var(--gris)}
.facon__figure,.bonus__figure{margin:0}
/* Les visuels sont des cartes d'écran à coins arrondis et à FOND
   TRANSPARENT (recadrées au plus près depuis les planches du livre :
   la légende y était cuite dans le PNG et doublait la nôtre). Un cadre
   rectangulaire dessinerait un second contour autour de coins arrondis :
   une ombre portée qui épouse l'alpha les détache mieux du crème. */
.facon__figure img,.bonus__figure img{width:100%;filter:drop-shadow(0 10px 22px rgba(21,18,15,.14))}
.facon__figure figcaption,.bonus__figure figcaption{margin-top:.5rem;color:var(--gris)}

@media (min-width:768px){
  .facon{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;align-items:center}
  .facon:nth-child(even) .facon__texte{order:2}
}

/* --- Bonus : encadré jaune, 5e bloc discret (pas de numéro). --- */
.bonus{margin-top:3rem;display:grid;gap:1.25rem;padding:1.5rem;background:rgba(240,190,0,.16);border:1px solid var(--jaune);border-radius:4px}
.bonus__etiquette{display:inline-block;margin:0 0 .75rem;padding:.3rem .6rem;background:var(--jaune);color:var(--encre);font-weight:700}
.bonus__texte h3{margin:0 0 .6rem}
.bonus__texte p{margin:0;max-width:52ch;color:var(--gris)}
@media (min-width:768px){ .bonus{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;align-items:center;padding:2rem} }

/* --- Réassurance : 3 tuiles sur bande blanc cassé. --- */
.reassurance{padding-block:3rem;background:var(--blanc);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.reassurance__titre{margin:0 0 2rem}
.reassurance__grille{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.tuile{padding:1.5rem;background:var(--creme);border:1px solid var(--filet);border-radius:4px}
.tuile h3{margin:.9rem 0 .5rem;font-size:1.15rem}
.tuile p{margin:0;color:var(--gris)}
.ne-icone{color:var(--vermillon)}
@media (min-width:768px){ .reassurance__grille{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* --- Extrait : bande jaune, formulaire e-mail + consentement. --- */
.extrait{padding-block:3rem;background:var(--jaune);color:var(--encre)}
.extrait__grille{display:grid;gap:2rem}
.extrait__surtitre{margin:0 0 .5rem;font-weight:700}
.extrait__texte h2{margin:0 0 .75rem}
.extrait__texte p{margin:0;max-width:48ch}
.extrait__form{display:grid;gap:1rem;align-content:start}
.extrait .btn{justify-self:start}
.extrait__note{margin:0;color:var(--gris)}
.champ{display:grid;gap:.4rem;margin:0}
.champ label{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.champ input{min-height:48px;padding:.6rem .8rem;background:var(--blanc);border:2px solid var(--encre);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;color:var(--encre)}
/* Piège à robots : display:none, jamais « hors écran ». Un champ poussé à
   gauche du viewport reste une cible interactive réelle, que l'audit
   compte à juste titre comme trop petite — et il a raison. */
.ne-piege{display:none}
/* La case est un input transparent étalé sur TOUT le label (≥ 44px) : c'est
   le label qu'on touche, la case dessinée n'est qu'un décor. */
.ne-check{position:relative;display:flex;align-items:flex-start;gap:.75rem;min-height:44px;padding:.35rem 0;cursor:pointer}
.ne-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ne-check__case{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:.15rem;background:var(--blanc);border:2px solid var(--encre);border-radius:var(--radius);color:transparent}
.ne-check input:checked ~ .ne-check__case{background:var(--encre);color:var(--jaune)}
.ne-check input:focus-visible ~ .ne-check__case{outline:3px solid var(--encre);outline-offset:3px}
.ne-check__texte{min-width:0;font-size:.95rem;line-height:1.4}
@media (min-width:768px){ .extrait__grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;align-items:start} }

/* --- FAQ : accordéon, état sur l'item (.is-open), bouton seul enfant du h3. --- */
.faq{padding-block:3rem}
.faq__titre{margin:0 0 1.75rem}
.faq__liste{max-width:70ch;border-top:1px solid var(--filet)}
.faq__item{border-bottom:1px solid var(--filet)}
.faq__q{margin:0;font-size:inherit;line-height:inherit}
.faq__bouton{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:56px;padding:.9rem 0;background:none;border:0;color:var(--encre);font-family:var(--font-display);font-stretch:condensed;font-weight:600;text-transform:uppercase;font-size:1.05rem;line-height:1.15;text-align:left;cursor:pointer}
.faq__libelle{min-width:0;overflow-wrap:break-word;hyphens:auto}
.faq__chevron{flex:0 0 auto;transition:transform .18s ease}
.faq__item.is-open .faq__chevron{transform:rotate(180deg)}
.faq__r{max-width:62ch;padding-bottom:1.1rem}
.faq__r p{margin:0;color:var(--gris)}

/* --- Ancre sombre : la collection. Couleurs posées EXPLICITEMENT. --- */
.ancre{padding-block:3.5rem;background:var(--encre);color:var(--creme)}
.ancre__surtitre{margin:0 0 .75rem;color:var(--jaune);font-weight:700}
.ancre__titre{margin:0 0 1rem;color:var(--creme)}
.ancre__texte{margin:0 0 2rem;max-width:56ch;color:var(--filet)}
.ancre__cartes{display:grid;gap:1.25rem;margin-bottom:2rem}
.ancre__cta{margin:0}
.btn--clair{background:var(--creme);color:var(--encre)}
@media (min-width:768px){ .ancre__cartes{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* --- Carte produit (accueil + collection). --- */
.pcard{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:rgba(241,236,223,.06);border:1px solid rgba(241,236,223,.22);border-radius:4px}
.pcard__lien{display:flex;flex-direction:column;gap:.9rem;color:inherit;text-decoration:none}
.pcard__visuel{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--gris)}
.pcard__visuel img{width:100%;height:100%;object-fit:cover}
.pcard__visuel--t1{background:var(--vermillon)}
.pcard__visuel--t2{background:var(--jaune)}
.pcard__visuel--t3{background:var(--gris)}
.pcard__num{font-size:clamp(2.5rem,11vw,4rem);font-weight:700;color:var(--creme)}
.pcard__visuel--t2 .pcard__num{color:var(--encre)}
.pcard__titre{font-family:var(--font-display);font-stretch:condensed;font-weight:700;text-transform:uppercase;font-size:1.05rem;line-height:1.1;color:var(--creme);overflow-wrap:break-word;hyphens:auto}
.pcard__pied{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0}
.pcard__prix{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--creme)}
.pcard__badge{padding:.25rem .5rem;background:var(--jaune);color:var(--encre);font-weight:700;border-radius:2px}