/* ============================
   POLICES (chargées ici une fois pour toutes : plus besoin du
   <link href="fonts.googleapis.com..."> dans le <head> de chaque page)
============================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Outfit:wght@300..600&display=swap');

/* .valid {display: none !important} */

/* ============================
   VARIABLES & RESET
============================ */
:root {
  --ink:       #0d0d14;
  --btn-text:  #0d0d14;
  --btn-texthover: #e5dcca;
  --marron: #87541b;
  --paper:     #fffaf4; /*#F8F3EE;*/
  --gold:      #c9a84c;         
  --gold-light:#e8d5a3;
  --gold-dark: #9c7a2e;
  --bleu-lcu: #112D53;
  --bleu-clair: #4B72A7;
  --gold-moyen: #cba024;
  --orange-lcu: #f98001;
  --mist:      #EBE2CF;
  --mist-dark: #c9bfb3;
  --shadow:    rgba(13,13,20,0.12);
  --navy:      #0d0d14;           
  --navy-mid:  #091522; 
--titres-pec:  #866b34;
  --brun:        #87541b;
  --brun-hover:  #a3641d;
  --brun-clair:  #f3d19e;
  --onglets:  #e8c98a;
  --fond-chaud:  #fff1e5;
  --fond-warm2:  #fff7ed;
  --texte:       #444;
  --blanc:       #fff;
  --gris-bord:   #DED7C8;  
  --fond-sombre: #0a1321; /* pas utilisée */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Outfit', system-ui, sans-serif;

  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   32px;
  --r-xl:   48px;

  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--sans);
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  overflow-x: hidden;
}


/* ============================
   TYPOGRAPHY
============================ */
h1, h2, h3, h4, h5 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ── Tailles fluides des titres (clamp = min | fluide | max) ── */
h1 {  
font-family: var(--serif);
  font-size: clamp(29px, 5vw, 51px);
  color: var(--gold-dark);
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 80px); 
}

h2 {
 font-family: var(--sans);
  font-size: clamp(28px, 3vw, 35px);
  line-height: clamp(28px, 3vw, 35px);
  font-weight: 450;
  color: var(--bleu-lcu);
  margin: 28px 0 20px;
}

h2.product_title  {
  margin: 0 0 25px;
   font-weight: 400;
}

h3 {
  font-family: var(--sans);
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bleu-lcu);
  margin-bottom: 14px;
  margin-top: 64px;
}

h4 { 
font-size: clamp(18px, 2vw, 19px); 
margin-bottom: 14px;
color: var(--bleu-lcu);
margin-top: 32px;
}

h5 { 
font-size: clamp(16px, 2vw, 18px); 
margin-bottom: 14px;
color: var(--bleu-clair);
margin-top: 32px;
text-align: center;
font-weight: 500;
}

p, ul, ol {
  margin-bottom: 15px;
  font-size: clamp(15px, 2vw, 18px);
}


li {
  margin: 8px 0 0 48px;
 /* line-height: 22px; */
}

.includes-list { list-style: none; margin-bottom: 2rem; }

    .includes-list li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9rem;
    }

    .includes-list li:last-child { border-bottom: none; }

    .includes-list .check {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      flex-shrink: 0;
    }

a {
  color: var(--marron);
  text-decoration: none;
}
a:hover {
  color: #a3641d;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.display {
  font-size: clamp(45px, 6vw, 88px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
}

/* ============================
   BLOCKQUOTE
   Style de base (sections claires : #section1, #section3).
   Surcharges pour fond sombre plus bas dans SECTION 2 et SECTION 4.
============================ */
blockquote {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--bleu-lcu);
  background: linear-gradient(135deg, #fff6eb 0%, #ffeccd 100%);
  border: none;
  border-left: 4px solid var(--gold-moyen);
  border-radius: 8px;
  padding: 26px 30px 26px 68px;
  margin: 40px 0;
  box-shadow: 0 3px 14px rgba(135,84,27,.1);
  font-weight: 600;
}

blockquote::before {
  content: '\201C';
  position: absolute;
  top: -6px;
  left: 22px;
  font-family: var(--serif);
  font-size: 58px;
  font-style: normal;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
}

blockquote p {
  margin-bottom: 10px;
  font-size: inherit;
}
blockquote p:last-of-type { margin-bottom: 0; }

blockquote footer,
blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--texte);
}
blockquote footer::before,
blockquote cite::before { content: '\2014\00A0'; }

span.stat-num {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: bold;
  font-style: normal;
}

/* ===== Titres avec bordure (classe .bordures) ===== */
h2.bordures {
  border-top: 1px solid var(--gold-dark);
  padding-top: 10px;
  margin-top: 50px;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 10px;
  margin-bottom: 30px;
  color: var(--gold-dark);
}

h3.bordures {
  border-top: 1px solid var(--gold-dark);
  padding-top: 10px;
  margin-top: 50px;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 10px;
  margin-bottom: 30px;
}


/* ============================
   IMAGES
============================ */
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;        /* toujours respecter les proportions */
  width: revert-layer; /* respecte l'attribut width="" du HTML */
  margin: 0 auto;
}

/* Lazy loading (transition douce), utilisé par toutes les images loading="lazy" */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s ease;
}
img[loading="lazy"].loaded { opacity: 1; }

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
  margin-bottom: 48px;
  max-width: 100%;
  height: auto;
  width: revert-layer;
}

.entry img {
  max-width: 100%;
  height: auto;
  width: revert-layer;
}

.entry .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* ============================
   LAYOUT UTILITIES
============================ */
.container {
  width: min(90%, 1180px);
  margin-inline: auto;
}

section {
  padding: 96px 0;
  margin: 0 auto;
}

.single-page-article {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px 60px 20px;
}

/* ── Rangées de contenu ── */
.row-1col,
.row-2col {
  padding: 48px 0;
}

/* Rangée 2 colonnes */
.row-2col .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 768px) {
  .row-2col .cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Placeholder visuel pour les zones vides */
.placeholder {
  min-height: 120px;
  border: 2px dashed var(--gold-light);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ============================
   ALTERNANCE CLAIRE / FONCÉE
============================ */
.section-light {
  background-color: var(--paper); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
}
.section-mist  { background: var(--mist); }


/* ============================
   STICKY HEADER
============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #e9e0cced;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mist);
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: 0 4px 24px var(--shadow);
  border-bottom: 1px solid var(--mist-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 32px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-img {
  height: 44px;
  width: auto;
  aspect-ratio: 1477 / 502;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.logo-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 0.8;
  color: var(--ink);
}

.logo-sub {
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-weight: 400;
}



/* ============================
   HEADER NAV
============================ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.header-nav a, .header-nav span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(13,13,20,0.6);
  padding: 7px 12px;
  border-radius: 100px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.header-nav a:hover {
  color: var(--ink);
  background: var(--mist);
}

/* Bouton "Commander" du menu haut : enfant direct de .header-inner (plus de .header-nav).
   Grâce à ça, .header-nav (flex:1) se dimensionne automatiquement entre le logo (à gauche)
   et ce bouton (à droite), et ses liens se centrent sur cet espace via justify-content:center
   — plus besoin d'astuce de positionnement absolu. */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 100px;
  white-space: nowrap;
  background: linear-gradient(135deg, #fff1e5 0%, #ffe8cc 100%);
  color: var(--brun) !important;
  border: 1.5px solid var(--brun);
  box-shadow: 0 3px 10px rgba(135,84,27,.15);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.header-cta:hover {
  background: linear-gradient(135deg, #ffeedf 0%, #ffd9a8 100%) !important;
  color: var(--brun) !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(135,84,27,.28);
}

.header-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.header-cta:hover svg {
  transform: translateX(3px);
}

/* Le bouton reste visible en permanence dans le header, y compris sur mobile
   (à côté du burger), et non plus seulement comme dernier lien du menu déroulant. */
@media (max-width: 820px) {
  .header-inner { gap: 16px; }

  .header-cta {
    font-size: 12px;
    padding: 8px 14px;
  }
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  transition: background var(--transition);
  margin-left: auto;
  margin-right: 16px;
}

.nav-burger:hover { background: var(--mist); }

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(250,247,242,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 8px 32px var(--shadow);
    padding: 12px 16px;
    z-index: 99;
  }

  .header-nav.open { display: flex; }

  .header-nav a {
    padding: 14px 16px;
    border-radius: var(--r-sm);
    font-size: 15px;
    border-bottom: 1px solid var(--mist);
  }
  
  .header-nav span {
    padding: 14px 0;
    border-radius: var(--r-sm);
    font-size: 15px;
    border-bottom: 1px solid var(--mist);
  }

  .header-nav a:last-child, .header-nav span:last-child { border-bottom: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 492px) {
  .logo-sub, .logo-text { display: none; }
}

/* En dessous de 400px, logo + burger + bouton CTA (toujours visible) sont trop
   serrés dans .header-inner : le logo (hauteur fixe + aspect-ratio) ne peut
   pas se réduire tout seul et finit tronqué. On réduit donc sa hauteur ici. */
@media (max-width: 400px) {
  .logo-img { height: 40px; }
}

@media (max-width: 370px) {
  .header-cta {
    display: none;
  }
}

/* Pages sans menu top */

.header-page {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.header-page p, .header-page h2, .header-page h3 {
  margin: 0
}

/* ============================
   TOC LATÉRALE STICKY
============================ */
.toc-aside {
  display: none;
  position: fixed;
  top: 45%;
  right: 32px;
  transform: translateY(-50%) translateX(12px);
  z-index: 900;
  width: 180px;
  /* Apparition synchronisée avec .back-to-top (voir bloc 5 de script-global.js) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (min-width: 1600px) {
  .toc-aside {
    display: block;
  }
}

.toc-aside.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: all;
}

.toc-panel {
  background: rgba(255, 250, 244, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--mist-dark);
  border-radius: 10px;
  padding: 20px 20px 20px 16px;
  box-shadow: 0 2px 5px rgba(135, 84, 27, 0.3);
}

.toc-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marron);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #DED7C8;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.toc-list li {
  margin: 0;
   line-height: 1.3;
}

.toc-list li a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent; /* réservé pour l'état actif, transparent sinon : évite tout décalage au survol/activation */
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* La puce ronde générique est remplacée par l'emoji propre à chaque lien
   (voir <span class="toc-emoji"> dans le HTML de chaque page). On ne
   stylise donc plus qu'une taille/alignement communs, l'icône elle-même
   vient du contenu HTML. */
.toc-list li a .toc-emoji {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  opacity: 0.8;
  filter: grayscale(30%);
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.toc-list li a:hover {
  color: var(--marron);
  background: rgba(135, 84, 27, 0.07);
}

.toc-list li a:hover .toc-emoji {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.1);
}

.toc-list li a.toc-active {
  color: var(--marron);
  background: rgba(135, 84, 27, 0.1);
  font-weight: 600;
  border-left-color: var(--marron);
}

.toc-list li a.toc-active .toc-emoji {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.15);
}

.toc-progress {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #DED7C8;
}

.toc-progress-bar-track {
  height: 2px;
  background: #e8ddd0;
  border-radius: 2px;
  overflow: hidden;
}

.toc-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--marron), #f3d19e);
  border-radius: 2px;
  transition: width 0.15s ease;
}

.toc-progress-label {
  font-family: var(--sans);
  font-size: 10px;
  color: #999;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ===========================================================
   Section 1
   =========================================================== */

.livre-columns {

  /* ── Largeurs colonnes #section1 ── */
  --col-couverture: 43%;   /* largeur colonne couverture */
  --col-description: 51%; /* largeur colonne description */
  --gap-livre: 6%;         /* espace entre les deux       */

  display: grid;
  grid-template-columns: var(--col-couverture) var(--col-description);
  gap: var(--gap-livre);
  row-gap: 48px;
  align-items: start;
  margin-top: 24px;
}

.livre-col-gauche {
  display: flex;
  justify-content: center;
}

.livre-cover {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: block;
}

.livre-col-droite h3 {
  margin-top: 0;
}

.livre-col-droite p {
  margin: 0 0 1em 0;
}

/* --- Responsive : empilement en dessous de 700px --- */
@media (max-width: 700px) {
  .livre-columns {
    grid-template-columns: 1fr !important;
  }

  .livre-col-gauche {
    max-width: 260px;
    margin: 0 auto;
  }
}


/* ═══════════════════════════════════════════════════
   SECTION 1 — GRILLE DE LIVRES (1 / 2 / 3 colonnes)
   Structure : .livres-grid > .livres-row--1 / --2 / --3 > .livre-card
═══════════════════════════════════════════════════ */

.livres-grid {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.livres-row {
  display: grid;
  gap: 32px;
}

.livres-row--1 { grid-template-columns: 1fr; }
.livres-row--2 { grid-template-columns: repeat(2, 1fr); }
.livres-row--3 { grid-template-columns: repeat(3, 1fr); }

/* --- La boîte --- */
.livre-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gris-bord);
  border-radius: var(--r-md);
  box-shadow: 0 3px 14px rgba(135,84,27,.10);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.livre-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(135,84,27,.22);
  border-color: var(--gold-light);
}

.livre-card-cover {
  flex-shrink: 0;
  overflow: hidden;
  background: var(--mist);
}

.livre-card-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Lien autour de la couverture (livres payants uniquement) */
.livre-card-cover-link {
  display: block;
  width: 100%;
  height: 100%;
}

.livre-card-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.livre-card-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.livre-card-desc {
  font-size: 15px;
  color: var(--texte);
  flex: 1;
  /* Hauteur uniforme même si les descriptions n'ont pas la même longueur */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Rangée 1 (livre mis en avant) : un peu plus de place, donc plus de lignes visibles */
.livres-row--1 .livre-card-desc {
  -webkit-line-clamp: 3;
}

.livre-card-price {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--marron);
  letter-spacing: .02em;
}

/* --- Rangée 1 : livre mis en avant, disposition horizontale --- */
.livres-row--1 .livre-card {
  flex-direction: row;
}
.livres-row--1 .livre-card-cover {
  width: 32%;
}
.livres-row--1 .livre-card-body {
  width: 68%;
  padding: 32px 35px;
  justify-content: center;
}
.livres-row--1 .livre-card-title { font-size: 26px; }

/* Badge "coup de cœur" sur la rangée 1 uniquement */
.livre-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  box-shadow: 0 3px 10px rgba(201,168,76,.35);
  z-index: 2;
}

/* --- Rangées 2 et 3 : couverture en haut, texte en dessous --- */
.livres-row--2 .livre-card-cover,
.livres-row--3 .livre-card-cover {
  aspect-ratio: 3 / 4;
}

/* --- Boutons dans les cartes (achat vs téléchargement) --- */
.btn-livre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 18px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s, transform .2s, box-shadow .3s;
}

.btn-livre svg { flex-shrink: 0; }

/* --- Bouton secondaire "Description détaillée" : même famille visuelle
   que .btn-livre, mais plus discret (pas de fond, moins haut) --- */
.btn-livre--details {
  padding: 8px 18px;
  margin-top: auto;
  background: transparent;
  color: var(--brun) !important;
  border: 1.5px solid var(--gris-bord);
}
.btn-livre--details:hover {
  background: rgba(135, 84, 27, .06);
  border-color: var(--brun);
  transform: translateY(-2px);
}

/* Quand les 2 boutons sont présents, on retire le margin-top:auto du 1er
   pour que seul le groupe (les 2 boutons) soit collé en bas de la carte */
.livre-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.livre-card-actions .btn-livre--details,
.livre-card-actions .btn-livre--acheter,
.livre-card-actions .btn-livre--telecharger {
  margin-top: 0;
}

.btn-livre--acheter {
  background: linear-gradient(135deg, #fff1e5 0%, #ffe8cc 100%);
  color: var(--brun) !important;
  border: 1.5px solid var(--brun);
  box-shadow: 0 3px 12px rgba(135,84,27,.18);
}
.btn-livre--acheter:hover {
  background: linear-gradient(135deg, #ffeedf 0%, #ffd9a8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(135,84,27,.28);
}

.btn-livre--telecharger {
  background: linear-gradient(135deg, #e9f0fb 0%, #d6e4f6 100%);
  color: var(--bleu-lcu) !important;
  border: 1.5px solid var(--bleu-lcu);
  box-shadow: 0 3px 12px rgba(75,114,167,.18);
}
.btn-livre--telecharger:hover {
  background: linear-gradient(135deg, #dbe8f9 0%, #c3d9f2 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(75,114,167,.28);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .livres-row--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .livres-row--1 .livre-card {
    flex-direction: column;
  }
  .livres-row--1 .livre-card-cover,
  .livres-row--1 .livre-card-body {
    width: 100%;
  }
  .livres-row--1 .livre-card-cover { aspect-ratio: 3 / 4; }
  .livres-row--1 .livre-card-body { padding: 24px 26px 28px; }
}

@media (max-width: 620px) {
  .livres-row--2,
  .livres-row--3 { grid-template-columns: 1fr; }
}


/* ============================
   SCROLL ANIMATIONS
============================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: /* opacity 0.6s ease, */ transform 0.6s ease;
/*  box-shadow: 0 3px 14px rgba(135,84,27,.25); */
/*  padding: 32px;
  border-radius: 8px; */
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal au scroll (appliqué en JS à divers blocs de contenu : .su-row, div.attention) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================
   ONGLETS SU
============================ */
.su-tabs {
  margin-top: 64px;
}

.su-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.su-tabs-nav span {
  padding: 10px 18px;
  cursor: pointer;
  background-color: var(--paper);
  border: 1px solid var(--gold-dark);
  border-radius: 6px;
  font-weight: 600;
/*  color: var(--gold-dark); */
}

.su-tabs-nav span.su-tab-actif {
  background-color: var(--gold-dark);
  color: var(--paper);
}

.su-tabs-pane {
  display: none;
}

.su-tabs-pane.active-pane {
  display: block;
  border: 1px solid #c9bfb366;
  margin-top: 0 !important;
  padding: 20px;
}

.su-tabs-panes h3 {
  margin-top: 32px;
}

/* Sur mobile, on affiche un libellé court à la place du libellé complet
   (voir <span class="onglet-txt-full">/<span class="onglet-txt-court"> dans le HTML)
   pour garder des onglets compacts même empilés verticalement.
   Réinitialisation explicite pour ne dépendre d'aucun style hérité. */
.su-tabs-nav .onglet-txt-full,
.su-tabs-nav .onglet-txt-court {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}
.su-tabs-nav .onglet-txt-court {
  display: none;
}

/* Onglets empilés sur écran étroit, avec libellé raccourci */
@media (max-width: 580px) {
  .su-tabs-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .su-tabs-nav span {
    text-align: center;
  }

  .su-tabs-nav .onglet-txt-full {
    display: none;
  }
  .su-tabs-nav .onglet-txt-court {
    display: inline;
  }
}

/* Colonnes SU */
.su-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.su-column {
  flex: 1 1 45%;
  min-width: 250px;
}

/* ═══════════════════════════════════════════════════
   IMAGE DE FOND OPTIONNELLE — GÉNÉRIQUE
   S'applique automatiquement à N'IMPORTE QUELLE section
   (et au footer) dès qu'on lui ajoute en HTML :
     style="background-image: url('img/mon-fond.jpg');"
   → plus besoin que la section ait déjà ce traitement
   prévu spécifiquement (comme #section2 / #section4
   ci-dessous, qui gardent en plus leurs propres
   surcharges de texte clair pour fond sombre).
   Un voile uni est ajouté par défaut (rgba(0,0,0,.25))
   pour préserver la lisibilité du texte, que la photo
   soit claire ou foncée. Pour l'adapter au thème d'une
   page/image en particulier, ajouter la variable
   --voile dans le même style inline, ex :
     style="background-image: url('img/mon-fond.jpg');
            --voile: rgba(40, 20, 10, .45);"

   Tant qu'aucune vraie photo n'a été choisie, la section/le
   footer ne doit tout simplement PAS avoir cet attribut de
   style — un commentaire HTML au-dessus rappelle comment
   l'ajouter le moment venu (voir face-au-deuil.html /
   IA_biais-marketing.html). Pas besoin de convention de
   nommage (placeholder, etc.) : l'absence de l'attribut
   suffit à désactiver tout le traitement ci-dessous.
═══════════════════════════════════════════════════ */
section[style*="background-image"],
footer[style*="background-image"] {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
section[style*="background-image"]::before,
footer[style*="background-image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Couleur par défaut rgba(0,0,0,.25) — personnalisable au cas par cas
     en ajoutant --voile: ... dans le style inline de la section/du footer,
     ex : style="background-image: url('...'); --voile: rgba(40,20,10,.45);" */
  background: var(--voile, rgba(9, 21, 34, 0.25));
  pointer-events: none;
}
section[style*="background-image"] > *,
footer[style*="background-image"] > * {
  position: relative;
  z-index: 1;
}
/* background-attachment:fixed est coûteux/instable sur mobile (Safari iOS
   notamment) : on repasse en scroll normal en dessous de 768px. */
@media (max-width: 768px) {
  section[style*="background-image"],
  footer[style*="background-image"] {
    background-attachment: scroll;
  }
}

/* ═══════════════════════════════════════════════════
   SECTION 2
═══════════════════════════════════════════════════ */
section#section2 {
  scroll-margin-top: 58px;
  background-color: var(--navy-mid); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
  padding: 60px 0 70px !important;
  border-top: 1px solid rgba(135,84,27,.1);
  border-bottom: 1px solid rgba(135,84,27,.1); 
}

section#section2 h2 {
  color: var(--gold);
  
}
section#section2 h3 {
  color: var(--onglets);
}
section#section2 p,
section#section2 li {
  color: rgba(255,255,255,.85) ;
}
section#section2 .cadreinfo {
  background: rgba(255,255,255,.07);
  border-left-color: var(--onglets);
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

section#section2 .cadreinfo li {
 margin: 8px 0 12px 30px;
}

section#section2 .cadreinfo .liste-emoji li {
 margin: 8px 0 0 10px;
}

/* Onglets (.su-tabs) adaptés au fond sombre de cette section */
section#section2 .su-tabs-nav span {
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,200,130,.4);
  color: var(--onglets);
}
section#section2 .su-tabs-nav span.su-tab-actif,
section#section2 .su-tabs-nav span.su-tab-actif .onglet-txt-full,
section#section2 .su-tabs-nav span.su-tab-actif .onglet-txt-court {
  background-color: var(--onglets);
  color: var(--navy-mid) !important;
}
section#section2 .su-tabs-pane.active-pane {
  border-color: rgba(255,200,130,.25);
}
section#section2 .fade-up {
  box-shadow: none;
  padding: 0;
}

/* Blockquote adaptée au fond sombre de cette section */
section#section2 blockquote {
  background: rgba(255,255,255,.06);
  border-left-color: var(--onglets);
  color: rgba(255,255,255,.9);
  box-shadow: none;
}
section#section2 blockquote::before { color: var(--onglets); opacity: 0.4; }
section#section2 blockquote footer,
section#section2 blockquote cite { color: rgba(255,255,255,.6); }

 @media (max-width: 1490px) { 
	 .retour-onglets-s2, .retour-onglets-s3 {margin: 40px 0 20px 0; text-align: center; font-size: 80%} 
	 .retour-onglets-s2 a {color:#fff; opacity: 50%; text-decoration:none }
	 .retour-onglets-s3 a {opacity: 70%; text-decoration:none }
	 }
	@media (min-width: 1491px) {.retour-onglets-s2, .retour-onglets-s3 {display: none} }

/* ═══════════════════════════════════════════════════
   SECTION 3
═══════════════════════════════════════════════════ */

section#section3 {
  scroll-margin-top: 58px;
  background-image: linear-gradient(180deg, #fffaf4 0%, #fff7ed 100%); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
  border-top: 1px solid rgba(135,84,27,.1);
  border-bottom: 1px solid rgba(135,84,27,.1);
  padding: 60px 0;
  overflow-x: clip; /* contient .degrade-3 à marge négative sans élargir le viewport */
}

/* .tabs-panel : règle générale + spécialisation dans #section3 fusionnées */
.tabs-panel {
  padding: 30px 0 0;
}
section#section3 .tabs-panel {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 30px;
}

figure {
  display: flex;
  flex-direction: column; /* empile image puis légende verticalement */
  align-items: center;    /* centre horizontalement */
  margin: 0 0 30px;              /* reset des marges par défaut du navigateur */
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

figcaption {
  order: 2;              /* force la légende après l'image, même si l'ordre HTML change */
  margin-top: 8px;
  font-size: 0.9em;
  color: #555;
  text-align: center;
  font-style: italic;
}

/* Titres PV */

h4.resume-pv {
  text-align: justify !important;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
}

/* Attention box */
div.attention {
  color: #333;
  text-align: justify;
  background: linear-gradient(135deg, #fff6eb 0%, #ffeccd 100%);
  margin-top: 40px;
  margin-bottom: 50px;
 /* padding: 22px 24px 10px 22px; */
 padding: 17px 20px 22px;
  border: none;
  border-left: 4px solid var(--gold-moyen);
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(135,84,27,.1);
  font-size: clamp(15px, 2vw, 18px);
}

.cadreinfo {
  background-color: var(--mist);
  border-left: 4px solid var(--gold-dark);
  border-radius: 8px;
  padding: 17px 20px 22px;
  margin: 30px 0;
  font-size: clamp(15px, 2vw, 18px);
}

/* Cadre */
div.cadre {
  color: #222;
  text-align: justify;
  margin-top: 30px;
  margin-bottom: 40px;
  padding: 16px 20px;
  border: 1.5px solid #c9b08a;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
  background: #fffdf9;
}
div.cadre p { margin: 0; }

/* ═══════════════════════════════════════════════════
   SECTION 4
═══════════════════════════════════════════════════ */

section#section4 {
  scroll-margin-top: 58px;
  background-color: var(--navy-mid); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
  padding: 60px 0 70px;
  border-top: 1px solid rgba(135,84,27,.1);
}
section#section4 h2 {
  color: var(--titres-pec);
}
section#section4 h2::after {
  background: none;
}
section#section4 h3,
section#section4 h4,
section#section4 .h4-sous-titre-pv { color: var(--onglets) !important; }
section#section4 p,
section#section4 li { color: rgba(255,255,255,.82) !important; }
section#section4 .cadre {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,200,130,.3) !important;
  color: rgba(255,255,255,.8) !important;
}
section#section4 .su-row { background: rgba(30, 23, 0, 0.17); border-radius: 10px; /* padding: 20px; */}

/* Blockquote adaptée au fond sombre de cette section */
section#section4 blockquote {
  background: rgba(255,255,255,.06);
  border-left-color: var(--onglets);
  color: rgba(255,255,255,.9);
  box-shadow: none;
}
section#section4 blockquote::before { color: var(--onglets); opacity: 0.4; }
section#section4 blockquote footer,
section#section4 blockquote cite { color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════════
   SECTION 4 — GRILLE D'INTRODUCTION (aperçu des 4 outils)
   Structure : .section4grid > .card.fade-up > .card-icon + .card-content
═══════════════════════════════════════════════════ */
.section4grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
  margin: 0 0 60px;
}

.section4grid .card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,200,130,.18);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.section4grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,200,130,.4);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}

.section4grid .card-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 50%;
  background: rgba(255,200,130,.12);
  border: 1px solid rgba(255,200,130,.3);
}

.section4grid .card-content h3 {
  margin: 0 0 8px !important;
  padding: 0;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}

.section4grid .card-content p {
  margin: 0 0 14px !important;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.75) !important;
}

.section4grid .grid-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-mid);
  background: var(--onglets);
  padding: 4px 12px;
  border-radius: 100px;
}

@media (max-width: 700px) {
  .section4grid { grid-template-columns: 1fr; }
}

.degrade-3 {
  background: #faf8f3;
  background: linear-gradient(to bottom, #faf8f3 0%, #e7e3da 50%, #faf8f3 100%);
  padding: 70px 40px 40px;
  max-width: 1300px;
  margin: 0 -30px;
}
@media (max-width: 600px) { .degrade-3 { padding: 40px 20px 30px; margin: 0 -20px; } }
section#section4 .degrade-3 {
  background: transparent !important;
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
}

.h2-titre-pv {
  font-family: var(--sans);
  color: var(--titres-pec);
  font-size: clamp(29px,4vw,38px);
  font-weight: 500;
  margin: 0 !important;
  padding: 30px 0 !important;
  line-height: 1.2;
}
.h4-sous-titre-pv {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  text-align: left !important;
  margin: 0 0 45px 0 !important;
  padding-left: 0 !important;
  color: #555;
}

/* Grille 2 colonnes */
.su-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}

.su-column img {
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* --- Responsive : empilement en dessous de 700px (colonne gauche au-dessus) --- */
@media (max-width: 700px) {
  .su-row {
    grid-template-columns: 1fr;
  }
}

.su-column h3.titre-SU-colonne {
  margin-top: 0;
  font-size: 20px;
  color: var(--brun);
  text-transform: none;
}
.su-column p { font-size: 15.5px; var(--texte); margin-bottom: 10px; }


/* ═══════════════════════════════════════════════════
   CTA FINAL (<section id="cta-footer">)
═══════════════════════════════════════════════════ */
section#cta-footer {
	scroll-margin-top: 58px;
  background-color: var(--fond-warm2); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
  padding: 50px 0;
}

section#cta-footer .cta-final-wrap {
  width: 600px;
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--brun);
  border-radius: 14px;
  padding: 36px 30px;
}

section#cta-footer p {
 text-align: center;
}

/* Titre "su-mini" (n'est en réalité utilisé que dans #cta-footer) */
.titre-su-mini {
  color: var(--texte);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-align: center !important;
  width: 95%;
  margin: 0 auto 1em;
}

/* Garantie (n'est en réalité utilisée que dans #cta-footer) */
.garantie-img { width: 282px; display: block; margin: 10px auto 0; }

.price-wrap { font-family: var(--sans); font-size: 35px; font-weight: 600; color: var(--brun); line-height: 1.1; }
.short-desc { margin-bottom: 20px; /*font-size: clamp(15px, 2vw, 18px) */}
.short-desc p { margin-bottom: 12px; }

/* Bouton acheter */
.btn-acheter-1 {
  display: block;
  background: linear-gradient(135deg, #fff1e5 0%, #ffe8cc 100%);
  color: var(--brun) !important;
  border: 1.5px solid var(--brun);
  border-radius: 6px;
  padding: 8px 5px 11px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
   max-width: 450px; 
  margin: 38px auto 30px auto;
  cursor: pointer;
  transition: background .3s, transform .2s, box-shadow .3s;
  box-shadow: 0 3px 14px rgba(135,84,27,.18);
  letter-spacing: .3px;
}

.btn-acheter-1:hover {
  background: linear-gradient(135deg, #ffeedf 0%, #ffd9a8 100%) !important;
  color: var(--brun) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(135,84,27,.28);
}
.btn-acheter-1:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(135,84,27,.2); }

.btn-transp {
  display: block;
  color: var(--onglets);
  border: 1.5px solid var(--onglets);
  border-radius: 6px;
  padding: 8px 5px 11px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  max-width: 450px;
  margin: 48px auto 30px auto;
  cursor: pointer;
  transition: background .3s, transform .2s, box-shadow .3s;
  box-shadow: 0 3px 14px rgba(135,84,27,.18);
  letter-spacing: .3px;
}

.btn-transp:hover {
  background: linear-gradient(135deg, #f9edd5 0%, var(--onglets) 100%); 
  color: var(--navy-mid); 
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(135,84,27,.28);
}
.btn-transp:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(135,84,27,.2); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--btn-text);
  font-weight: 400;
  font-size: 17px;
  padding: 16px 35px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  transition: all var(--transition);
  box-shadow: 0 8px 32px rgba(201,168,76,0.35);
  border: 1px solid var(--gold-dark);
  font-family: var(--sans);
  max-width: 100%;
  white-space: normal;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .btn-primary {
    padding: 14px 22px;
    font-size: 15px;
    gap: 6px;
  }
}

.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(201,168,76,0.5);
  color: var(--btn-texthover);
}

/* Effet de confirmation au clic (pulse) */
@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(135,84,27,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(135,84,27,0); }
  100% { box-shadow: 0 0 0 0 rgba(135,84,27,0); }
}
.btn-acheter-1.pulse, .btn-acheter-2.pulse {
  animation: btnPulse .6s ease;
}

.rappel-numerique, .prix-variable, .garantie, .rappels-cta {
  font-size: 70% !important;
  line-height: 120% !important;
  margin: 8px 4% 0 !important;
  text-align: justify !important;
  font-weight: 350 !important;
  opacity: 70% !important;
}

/* ============================
   FOOTER
============================ */
.site-footer {
  background-color: var(--navy-mid); /* fond de secours si aucune image n'est définie sur la page (voir style inline) */
  color: rgba(255,255,255,0.4);
  padding: 48px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

.site-footer a { color: rgba(255,255,255,0.5); transition: color var(--transition); }
.site-footer a:hover { color: var(--gold-light); }

.footer-logo {
  font-family: var(--serif);
  font-size: 19px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.footer-links {
display: inline-flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 3px;
}

.footer-pv-p {
margin: 25px 0 5px 0;
line-height: 18px;
font-size: 15px
}

/* Pages téléch */

.book-layout {display: flex; gap: 2rem; align-items: flex-start;}
p.ligne1 {font-size: 1.7rem;  margin-bottom:4rem}
p.ligne2 {font-size: 1.2rem; margin-bottom:2rem}
p.ligne3 {font-size: 1.2rem; margin-bottom:3rem}
.book-layout img {width: 400px;}
@media (max-width: 790px) {
      .book-layout {flex-direction: column; align-items: center; text-align: center;}
}


/* ============================
   BACK TO TOP
============================ */
.back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy-mid);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }

.back-to-top:hover { background: var(--bleu-clair); }

.back-to-top svg { transition: transform 0.2s ease; }
.back-to-top:hover svg { transform: translateY(-2px); }


/* ============================
   RESPONSIVE GLOBAL
============================ */
@media (max-width: 600px) {
  section { padding: 64px 0; }
  .hero { padding: 32px 0 64px; }
}
  
  /* ============================================================
   COMPLEMENT.CSS
   Règles récupérées depuis style.css et style-lcu.css 
   ============================================================ */



.entry-content ul {
  margin-left: 20px;
  margin-bottom: 20px;
}
.entry-content ul li { padding-bottom: 6px; }

 .liste-emoji {
	 margin-top: 22px;
    list-style: none;
    padding-left: 0;
  }
 
  .liste-emoji li {
    padding-left: 1.6em;
    text-indent: -1.6em;
    margin-bottom: 10px;
  }

/* ============================
   PETITS RÉGLAGES (anciennement en style="" inline dans le HTML)
============================ */

/* Icônes SVG des boutons CTA : alignement avec le texte du bouton
   (remplace le style="vertical-align: center" inline, qui n'est
   d'ailleurs pas une valeur CSS valide — "middle" est la bonne valeur) */
.btn-acheter-1 svg,
.btn-transp svg {
  vertical-align: middle;
}

/* Sommaire à onglets (#onglets, #onglets2, ...) : décale l'ancre pour
   qu'elle ne passe pas sous le header sticky quand on y accède via un lien */
#onglets,
#onglets2 {
  scroll-margin-top: 130px;
}

/* CTA final : espacements des paragraphes de texte */
.cta-final-desc {
  margin-bottom: 32px;
}

.cta-final-note {
  margin-top: 30px;
}