/* =========================================================
   Livre Expert — feuille de style
   Direction visuelle reprise de la maquette Figma :
   marine profond, or chaud, crème. Playfair Display + Outfit.
   ========================================================= */

:root{
  --encre:        #1a1714;
  --marine:       #162032;
  --marine-fonce: #0d1620;
  --marine-clair: #1e2d42;
  --or:           #c9a96e;
  --or-fonce:     #b8944d;
  --or-lisible:   #97722c;   /* variante accessible de l'or sur fond clair */
  --or-clair:     #e8d5b0;
  --creme:        #f7f3ee;
  --creme-creux:  #f0ebe3;
  --texte:        #5a5148;
  --texte-doux:   #7a6f65;
  --filet:        #ddd5c8;
  --blanc:        #ffffff;

  --police-titre: 'Playfair Display', Georgia, serif;
  --police-texte: 'Outfit', system-ui, -apple-system, sans-serif;

  --largeur:      1200px;
  --transition:   200ms ease;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--police-texte);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--police-titre);
  color:var(--encre);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .7em;
}
h1{ font-size:clamp(2.4rem, 5vw, 3.8rem); line-height:1.12; }
h2{ font-size:clamp(1.8rem, 3.5vw, 2.8rem); }
h3{ font-size:1.2rem; }
h4{ font-size:1rem; }
em{ font-style:italic; }

p{ margin:0 0 1.2em; max-width:68ch; color:var(--texte); }
ul,ol{ margin:0 0 1.3em; padding-left:1.1em; }
li{ margin-bottom:.5em; color:var(--texte); }
strong{ color:var(--encre); font-weight:600; }

a{ color:var(--or-lisible); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--encre); }
:focus-visible{ outline:2px solid var(--or-lisible); outline-offset:3px; }

.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--or); color:var(--encre); padding:.7rem 1.1rem; text-decoration:none; font-weight:600;
}
.saut-contenu:focus{ left:0; }

.conteneur{ width:100%; max-width:var(--largeur); margin:0 auto; padding:0 1.5rem; }
.etroit{ max-width:760px; }

/* ---------- Éléments de langage ---------- */
.section-label{
  font-family:var(--police-texte);
  font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--or-lisible);
  margin:0 0 .8rem;
}
.section-encre .section-label,
.appel .section-label,
.hero .section-label{ color:var(--or); }

.filet-or{ width:48px; height:2px; background:var(--or); display:block; margin-bottom:1.5rem; }

/* ---------- En-tête ---------- */
.entete{
  position:sticky; top:0; z-index:50;
  background:var(--marine);
  border-bottom:1px solid rgba(201,169,110,.2);
}
.entete-interieur{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:66px;
}
.marque{ display:flex; flex-direction:column; line-height:1; text-decoration:none; }
.marque-texte{
  font-family:var(--police-titre); color:var(--creme);
  font-size:1.1rem; font-weight:700; letter-spacing:.02em;
}
.marque-texte-fin{ color:var(--or); }
.marque-extension{
  font-size:.6rem; letter-spacing:.2em; color:var(--or);
  text-transform:uppercase; font-family:var(--police-texte); margin-top:.15rem;
}

.navigation{ display:flex; align-items:center; gap:2rem; }
.navigation .nav-lien{
  position:relative;
  color:var(--creme); font-size:.8rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:color var(--transition);
}
.navigation .nav-lien::after{
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--or); transition:width .3s ease;
}
.navigation .nav-lien:hover{ color:var(--or); }
.navigation .nav-lien:hover::after{ width:100%; }
.navigation .nav-lien-actif{ color:var(--or); }
.navigation .nav-lien-actif::after{ width:100%; }

.menu-bascule{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:.55rem; cursor:pointer;
}
.menu-bascule span{ display:block; width:24px; height:1.5px; background:var(--creme); transition:transform var(--transition), opacity var(--transition); }
.menu-bascule[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-bascule[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-bascule[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px){
  .menu-bascule{ display:flex; }
  .navigation{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--marine); border-top:1px solid rgba(201,169,110,.15);
    padding:.5rem 1.5rem 1.5rem; display:none;
  }
  .navigation.ouvert{ display:flex; }
  .navigation .nav-lien{ padding:.9rem 0; border-bottom:1px solid rgba(201,169,110,.12); }
  .navigation .bouton{ margin-top:1.2rem; text-align:center; }
}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-block;
  background:var(--or); color:var(--encre); border:1.5px solid var(--or);
  font-family:var(--police-texte); font-weight:600; font-size:.875rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.75rem 2rem; text-decoration:none; cursor:pointer;
  transition:background var(--transition), transform 150ms ease, color var(--transition);
}
.bouton:hover{ background:var(--or-fonce); border-color:var(--or-fonce); color:var(--encre); transform:translateY(-1px); }
.bouton-petit{ padding:.55rem 1.5rem; font-size:.8rem; }
.bouton-creux{
  background:transparent; color:var(--or-lisible); border:1.5px solid var(--or);
  font-weight:500; padding:.7rem 1.75rem;
}
.bouton-creux:hover{ background:var(--or); color:var(--encre); }
.section-encre .bouton-creux,
.appel .bouton-creux,
.hero .bouton-creux{ color:var(--or); }
.section-encre .bouton-creux:hover,
.appel .bouton-creux:hover,
.hero .bouton-creux:hover{ color:var(--encre); }

/* ---------- Sections ---------- */
.section{ padding:6rem 0; }
.section-creuse{ background:var(--creme-creux); }
.section-encre{ background:var(--marine); }
.section-encre h1,
.section-encre h2,
.section-encre h3,
.section-encre h4{ color:var(--creme); }
.section-encre p,
.section-encre li{ color:#a09484; }
.section-encre strong{ color:var(--creme); }
.section-encre a{ color:var(--or); }
.section-encre a:hover{ color:var(--or-clair); }

.section-tete{ max-width:600px; margin-bottom:4rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(135deg, #0e1720 0%, var(--marine) 55%, var(--marine-clair) 100%);
  padding:6rem 0;
  overflow:hidden;
}
.hero-grille{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero h1{ color:var(--creme); margin-bottom:1.75rem; }
.hero h1 em{ color:var(--or); font-style:italic; }
.hero-accroche{ color:#c8bfb4; font-size:1.05rem; line-height:1.8; max-width:520px; margin-bottom:2.5rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-preuve{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(201,169,110,.25);
  color:#a09484; font-size:.875rem; max-width:46ch;
}

/* Le livre, construit en CSS : l'objet vendu, sans photo de banque d'images */
.livre-scene{ display:flex; justify-content:center; perspective:1500px; }
.livre{
  position:relative; width:300px; height:400px;
  transform:rotateY(-16deg) rotateX(3deg); transform-style:preserve-3d;
}
.livre-plat{
  position:absolute; inset:0;
  background:linear-gradient(150deg, var(--marine-clair) 0%, #0e1720 70%);
  border:1px solid rgba(201,169,110,.35);
  box-shadow:26px 30px 60px rgba(0,0,0,.45);
  padding:3rem 2.2rem 2.4rem 2.6rem;
  display:flex; flex-direction:column; justify-content:space-between;
}
.livre-plat::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:18px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.livre-tranche{
  position:absolute; top:6px; bottom:6px; right:-14px; width:14px;
  background:repeating-linear-gradient(180deg,#F2EADA 0 2px,#D8CCB2 2px 4px);
}
.livre-filet{ width:48px; height:2px; background:var(--or); margin-bottom:1.2rem; }
.livre-titre{ font-family:var(--police-titre); color:var(--creme); font-size:1.6rem; line-height:1.2; margin:0; font-weight:700; }
.livre-soustitre{ color:#a09484; font-size:.8rem; margin:.8rem 0 0; letter-spacing:.04em; max-width:none; }
.livre-auteur{
  color:var(--or); font-size:.7rem; margin:0;
  letter-spacing:.16em; text-transform:uppercase;
}

@media (max-width: 940px){
  .hero{ padding:4rem 0; }
  .hero-grille{ grid-template-columns:1fr; gap:3rem; }
  .livre{ width:230px; height:308px; }
}

/* ---------- Bande de repères ---------- */
.reperes{ background:var(--or); }
.reperes-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:1.6rem 0; }
.repere{ text-align:center; }
.repere-valeur{ font-family:var(--police-titre); font-size:1.5rem; font-weight:700; color:var(--encre); margin:0; max-width:none; }
.repere-texte{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#3a2e1e; margin:.25rem 0 0; max-width:none;
}
@media (max-width: 720px){ .reperes-grille{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Packs ---------- */
.packs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
@media (max-width: 900px){ .packs{ grid-template-columns:1fr; } }

.pack{
  position:relative; display:flex; flex-direction:column;
  background:var(--blanc); border:1px solid var(--filet);
  padding:1.9rem 1.8rem;
  transition:box-shadow .25s ease, transform .25s ease;
}
.pack:hover{ box-shadow:0 12px 40px rgba(26,23,20,.12); transform:translateY(-3px); }
.pack-vedette{ border-color:var(--or); box-shadow:0 0 0 1px var(--or); }
.pack-etiquette{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--or); color:var(--encre);
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.25rem 1rem; white-space:nowrap;
}
.pack-rang{
  font-family:var(--police-titre); font-style:italic;
  font-size:.85rem; color:var(--or-lisible); margin:0 0 .6rem;
}
.pack h2,.pack h3{ font-size:1.25rem; margin-bottom:.9rem; }
.pack-prix{
  font-family:var(--police-titre); font-size:1.5rem; font-weight:700;
  color:var(--encre); margin:0 0 1rem;
}
.pack-prix small{
  display:block; font-family:var(--police-texte); font-size:.7rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); margin-top:.35rem;
}
.pack-liste{ list-style:none; padding:0; margin:1.3rem 0 1.6rem; flex:1; }
.pack-liste li{ position:relative; padding-left:1.35rem; font-size:.85rem; line-height:1.65; color:#3a3028; }
.pack-liste li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--or); }
.pack-liste .hors{ color:var(--texte-doux); }
.pack-liste .hors::before{ color:var(--filet); }
.pack-pied{ margin-top:auto; }
.pack-encart{
  margin-top:1.2rem; padding:1rem 1.1rem;
  background:var(--creme); border-left:3px solid var(--or);
  font-size:.8rem; font-style:italic; line-height:1.6;
}
.pack-encart p{ margin:0; }
.pack-encart strong{ font-style:normal; }

/* ---------- Tableau comparatif ---------- */
.tableau-enveloppe{ overflow-x:auto; }
table.comparatif{ width:100%; border-collapse:collapse; background:var(--blanc); min-width:660px; border:1px solid var(--filet); }
table.comparatif th,
table.comparatif td{ padding:.85rem 1rem; border-bottom:1px solid var(--filet); text-align:left; font-size:.875rem; }
table.comparatif thead th{
  background:var(--marine); color:var(--creme);
  font-family:var(--police-texte); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
table.comparatif tbody th{ font-weight:400; color:#3a3028; }
table.comparatif td{ text-align:center; }
table.comparatif .oui{ color:var(--or-lisible); font-weight:600; }
table.comparatif .non{ color:#c3bcae; }
table.comparatif tfoot th,
table.comparatif tfoot td{
  background:var(--creme-creux); font-family:var(--police-titre);
  font-weight:700; color:var(--encre);
}

/* ---------- Options ---------- */
.option-item{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem 0; border-bottom:1px solid rgba(201,169,110,.2);
}
.option-item:last-child{ border-bottom:none; }
.option-puce{ color:var(--or); font-size:.7rem; flex-shrink:0; margin-top:.35rem; }
.option-item h3{
  font-family:var(--police-titre); font-size:1rem; font-weight:600;
  color:var(--creme); margin:0 0 .35rem;
}
.option-item p{ font-size:.85rem; color:#8c7f74; line-height:1.6; margin:0; }

.options{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 2.5rem; }
@media (max-width: 900px){ .options{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .options{ grid-template-columns:1fr; } }
.option{ border-top:1px solid var(--filet); padding:1.4rem 0 1.6rem; }
.option h3{ font-size:1rem; margin-bottom:.4rem; }
.option p{ font-size:.85rem; color:var(--texte); margin:0; line-height:1.7; }

/* ---------- Engagements ---------- */
.engagements{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--filet); }
.engagement{ padding:2rem 1.8rem; border-right:1px solid var(--filet); }
.engagement:last-child{ border-right:none; }
.engagement-num{
  font-family:var(--police-titre); font-style:italic;
  font-size:.9rem; color:var(--or-lisible); margin:0 0 1.2rem;
}
.engagement h3{ font-size:1.05rem; margin-bottom:.8rem; }
.engagement p{ font-size:.875rem; line-height:1.75; margin:0; }
@media (max-width: 940px){
  .engagements{ grid-template-columns:repeat(2,1fr); }
  .engagement:nth-child(2n){ border-right:none; }
  .engagement:nth-child(-n+2){ border-bottom:1px solid var(--filet); }
}
@media (max-width: 560px){
  .engagements{ grid-template-columns:1fr; }
  .engagement{ border-right:none; border-bottom:1px solid var(--filet); }
  .engagement:last-child{ border-bottom:none; }
}

/* ---------- Étapes numérotées ---------- */
.etapes{ counter-reset:etape; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.etapes-longues{ grid-template-columns:repeat(5,1fr); }
.etape{ counter-increment:etape; position:relative; }
.etape::before{
  content:counter(etape);
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:1.3rem;
  border:2px solid var(--or); color:var(--or-lisible);
  font-family:var(--police-titre); font-weight:700; font-size:.9rem;
}
.etape:not(:last-child)::after{
  content:""; position:absolute; top:20px; left:calc(40px + 1rem);
  width:calc(100% - 40px - 1rem); height:1px;
  background:linear-gradient(to right, var(--or), transparent);
}
.etape-duree{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-lisible); margin:0 0 .4rem; font-weight:600;
}
.etape h3{ font-size:1rem; margin-bottom:.6rem; }
.etape p{ font-size:.85rem; line-height:1.7; margin:0; }
@media (max-width: 1040px){
  .etapes,
  .etapes-longues{ grid-template-columns:repeat(2,1fr); gap:2.5rem; }
  .etape::after{ display:none; }
}
@media (max-width: 560px){
  .etapes,
  .etapes-longues{ grid-template-columns:1fr; }
}
.section-encre .etape-duree,
.section-encre .etape::before{ color:var(--or); }

/* ---------- Blocs divers ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
@media (max-width: 900px){ .duo{ grid-template-columns:1fr; gap:2.5rem; } }
.colle{ position:sticky; top:6rem; }
@media (max-width: 900px){ .colle{ position:static; } }

.carte-simple{ background:var(--blanc); border:1px solid var(--filet); padding:2rem 1.8rem; }
.section-encre .carte-simple{ background:rgba(247,243,238,.05); border-color:rgba(201,169,110,.3); }

.citation{
  border-left:2px solid var(--or); padding:.2rem 0 .2rem 1.5rem;
  font-family:var(--police-titre); font-style:italic;
  font-size:1.15rem; line-height:1.55; color:var(--encre);
}
.section-encre .citation{ color:var(--creme); }
.citation cite{
  display:block; font-family:var(--police-texte); font-style:normal;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texte-doux); margin-top:1rem;
}

.appel{ background:var(--marine); padding:5rem 0; }
.appel h2{ color:var(--creme); }
.appel h2 em{ color:var(--or); }
.appel p{ color:#a09484; }

.note-tarif{ font-size:.8rem; color:var(--texte-doux); }

/* ---------- Formulaire ---------- */
.formulaire{ background:var(--blanc); border:1px solid var(--filet); padding:2rem 1.8rem; }
.champ{ margin-bottom:1.35rem; }
.champ label{
  display:block; font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--or-lisible); margin-bottom:.5rem;
}
.champ input,
.champ select,
.champ textarea{
  width:100%; padding:.75rem 1rem;
  font-family:var(--police-texte); font-size:.9rem; color:var(--encre);
  background:var(--creme); border:1px solid var(--filet); border-radius:0;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus{ border-color:var(--or); outline:2px solid rgba(201,169,110,.35); }
.champ textarea{ resize:vertical; }
.champ-aide{ font-size:.78rem; color:var(--texte-doux); margin:.4rem 0 0; }
.champ-honey{ position:absolute; left:-9999px; }

.alerte{ padding:1rem 1.2rem; margin-bottom:1.6rem; font-size:.9rem; }
.alerte-ok{ background:rgba(201,169,110,.16); border-left:3px solid var(--or); color:#4a3a18; }
.alerte-ko{ background:#FBEAEA; border-left:3px solid #9B2C2C; color:#742121; }

/* ---------- Mentions légales ---------- */
.legal h2{ margin-top:2.8rem; font-size:1.5rem; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ margin-top:1.8rem; font-size:1.05rem; }

/* ---------- Pied de page ---------- */
.pied{ background:var(--marine-fonce); border-top:1px solid rgba(201,169,110,.15); padding:3.5rem 0 2rem; }
.pied-grille{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
@media (max-width: 780px){ .pied-grille{ grid-template-columns:1fr; gap:2rem; } }
.pied-marque{ font-family:var(--police-titre); font-size:1.05rem; font-weight:700; color:var(--creme); margin:0 0 .5rem; }
.pied-note{ font-size:.8rem; color:var(--texte-doux); max-width:38ch; }
.pied-titre{
  font-family:var(--police-texte); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:.9rem;
}
.pied-liste{ list-style:none; padding:0; margin:0; }
.pied-liste li{ margin-bottom:.5rem; font-size:.85rem; color:#8c7f74; }
.pied a{ color:#a09484; text-decoration:none; }
.pied a:hover{ color:var(--or); }
.pied-bas{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(201,169,110,.15);
  font-size:.75rem;
}
.pied-bas p{ margin:0; color:#6a6259; }

/* ---------- Retour haut ---------- */
.retour-haut{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:30;
  width:44px; height:44px; border:1.5px solid var(--or); border-radius:0;
  background:var(--marine); color:var(--or);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity var(--transition), visibility var(--transition);
  cursor:pointer;
}
.retour-haut.visible{ opacity:1; visibility:visible; }
.retour-haut svg{ width:18px; height:18px; fill:currentColor; }
.retour-haut:hover{ background:var(--or); color:var(--encre); }

/* ---------- Barre de défilement ---------- */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#c9a96e44; }
::-webkit-scrollbar-thumb:hover{ background:#c9a96e99; }