/* Les coulisses de la croisière : page de vente du Carnet de Françoise (calquée sur la boutique de Didier).
   Charte : bleu marine profond, ivoire, touche dorée. Polices locales (Cardo OFL, Lato OFL), zéro requête tierce. */
@font-face { font-family: "Cardo"; src: url("polices/cardo-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("polices/cardo-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("polices/cardo-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --marine: #0E1C36; --marine2: #16294A; --marine3: #22385E;
  --ivoire: #FBF7EF; --ivoire2: #F1E8D8; --blanc: #FFFDF9;
  --or: #C9A55A; --or-clair: #E2C98F; --or-f: #7E5E22;
  --texte: #18223A; --gris: #485268; --rouge: #9B2C2C;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivoire); color: var(--texte); font-family: "Lato", Arial, sans-serif; font-size: 19px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine3); }
h1, h2, h3 { font-family: "Cardo", Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--marine); }
h1 { font-size: clamp(31px, 5.4vw, 50px); letter-spacing: -.005em; }
h2 { font-size: clamp(28px, 4.4vw, 40px); }
h3 { font-size: 24px; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
.cadre { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 780px; }
.centre { text-align: center; }

/* bandeau et en-tête */
.bandeau { margin: 0; background: var(--marine); color: var(--or-clair); text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 12px; }
.entete { background: var(--ivoire); border-bottom: 1px solid var(--ivoire2); }
.entete-in { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 12px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marine); }
.marque img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--or); background: var(--ivoire2); }
.marque span { font-family: "Cardo", Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.1; }
.marque small { display: block; font-family: "Lato", Arial, sans-serif; font-weight: 400; font-size: 14px; color: var(--gris); letter-spacing: .02em; }

/* boutons */
.bouton { display: inline-block; background: var(--or); color: var(--marine); font-weight: 900; font-size: 22px; line-height: 1.2; text-decoration: none; padding: 19px 32px; border-radius: 10px; box-shadow: 0 4px 0 var(--or-f); text-align: center; }
.bouton:hover, .bouton:focus { background: var(--or-clair); }
.bouton:focus-visible, .bouton-petit:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; }
.bouton-large { display: block; width: 100%; max-width: 540px; margin: 0 auto; }
.bouton-petit { display: inline-block; background: var(--marine); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; padding: 11px 18px; border-radius: 8px; }
.prix-bouton { display: inline-block; background: rgba(14,28,54,.12); border-radius: 6px; padding: 2px 10px; margin-left: 8px; }
.rassure { color: var(--gris); font-size: 18px; margin: 12px 0 0; }
.cadenas::before { content: "🔒 "; }

/* haut de page */
.hero { padding: 40px 0 46px; }
.hero-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.surtitre { color: var(--or-f); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: 15px; margin: 0 0 10px; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--marine3); }
.hero-sous { font-size: 21px; color: #2A3550; }
.hero-achat { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.hero-mini { display: none; }
.hero-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.hero-prix strong { font-family: "Cardo", Georgia, serif; font-size: 50px; line-height: 1; color: var(--marine); }
.hero-prix span { color: var(--gris); font-size: 18px; line-height: 1.35; }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--ivoire2); padding-top: 18px; }
.hero-points li { padding: 6px 0 6px 34px; position: relative; }
.hero-points li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 14px; height: 8px; border-left: 3px solid var(--or-f); border-bottom: 3px solid var(--or-f); transform: rotate(-45deg); }
.hero-visuel img { margin: 0 auto; max-height: 620px; width: auto; filter: drop-shadow(0 18px 28px rgba(14,28,54,.28)); }

/* bandeau adapté à la vidéo d'où vient le visiteur (?v=) */
.du-video { background: var(--blanc); border-left: 5px solid var(--or); border-radius: 8px; padding: 10px 14px; font-size: 18px; line-height: 1.45; margin: 0 0 16px; box-shadow: 0 1px 6px rgba(14,28,54,.08); }
.du-video strong { color: var(--marine); }

/* sections */
.bloc { padding: 60px 0; }
.bloc-blanc { background: var(--blanc); }
.bloc-nuit { background: var(--marine); color: #E9E3D6; }
.bloc-nuit h2, .bloc-nuit h3 { color: #fff; }
.bloc-nuit .surtitre { color: var(--or-clair); }
.intro-bloc { font-size: 20px; max-width: 760px; margin: 0 auto 30px; }
.filet { width: 70px; height: 3px; background: var(--or); border: 0; margin: 0 auto 22px; }

.constat p { font-size: 20px; }
.constat .signature { margin-top: 6px; }

.changes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.change { background: var(--blanc); border: 1px solid var(--ivoire2); border-top: 4px solid var(--or); border-radius: 12px; padding: 22px 24px; }
.change h3 { font-size: 24px; margin-bottom: 8px; }
.change p { margin: 0; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.etape { background: var(--marine2); border: 1px solid var(--marine3); border-radius: 12px; padding: 24px; }
.etape b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--or); color: var(--marine); font-weight: 900; font-size: 22px; margin-bottom: 12px; }
.etape h3 { font-size: 24px; }
.etape p { margin: 0; color: #DCD5C6; }

.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(14,28,54,.07); font-size: 18px; }
.tableau th { background: var(--marine); color: var(--or-clair); text-align: left; padding: 14px 16px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.tableau td { padding: 14px 16px; border-top: 1px solid var(--ivoire2); vertical-align: top; }
.tableau td:last-child { font-weight: 700; color: var(--rouge); }
.tableau .nous td { background: var(--marine); color: #fff; font-family: "Cardo", Georgia, serif; font-size: 22px; font-weight: 700; }
.tableau .nous td:last-child { color: var(--or-clair); white-space: nowrap; }
.note { color: var(--gris); font-size: 17px; margin-top: 12px; }

.moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.moment { background: var(--blanc); border: 1px solid var(--ivoire2); border-radius: 14px; padding: 24px 26px; }
.moment .num { font-weight: 900; color: var(--or-f); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; margin: 0 0 4px; }
.moment h3 { font-size: 26px; margin-bottom: 10px; }
.moment ul { margin: 0; padding-left: 22px; }
.moment li { margin: 0 0 8px; }
.moment li::marker { color: var(--or-f); }
.encart-phrases { margin: 26px auto 0; max-width: 780px; background: var(--marine); color: #fff; border-radius: 14px; padding: 20px 24px; text-align: center; font-size: 19px; }
.encart-phrases strong { color: var(--or-clair); }

.phrase { background: rgba(255,255,255,.05); border-left: 5px solid var(--or); border-radius: 10px; padding: 18px 22px; margin: 0 0 16px; }
.phrase .quand { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--or-clair); margin-bottom: 6px; font-weight: 700; }
.phrase q { display: block; font-family: "Cardo", Georgia, serif; font-style: italic; font-size: 25px; line-height: 1.35; color: #fff; quotes: "« " " »"; }
.phrase .pourquoi { display: block; margin-top: 10px; color: #D7D0C1; font-size: 18px; }
.suite-phrases { color: #D7D0C1; font-size: 18px; margin-top: 20px; }

.pages-apercu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pages-apercu figure { margin: 0; }
.pages-apercu img { width: 100%; border-radius: 6px; box-shadow: 0 8px 22px rgba(14,28,54,.18); background: #fff; }

/* l'offre */
.offre { padding: 64px 0; background: var(--ivoire2); }
.offre-boite { background: var(--blanc); border: 2px solid var(--or); border-radius: 18px; padding: 34px 34px 30px; max-width: 920px; margin: 0 auto; box-shadow: 0 10px 34px rgba(14,28,54,.10); }
.offre-boite h2 { text-align: center; }
.offre-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; margin: 10px 0 18px; }
.offre-grille img { max-height: 380px; width: auto; margin: 0 auto; filter: drop-shadow(0 12px 20px rgba(14,28,54,.22)); }
.liste-offre { list-style: none; padding: 0; margin: 0; }
.liste-offre li { padding: 12px 0; border-bottom: 1px solid var(--ivoire2); }
.liste-offre li:last-child { border-bottom: 0; }
.liste-offre strong { color: var(--marine); }
.bonus { display: inline-block; background: var(--marine); color: var(--or-clair); font-size: 14px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 5px; margin-right: 8px; vertical-align: 2px; }
.prix-grand { font-family: "Cardo", Georgia, serif; font-weight: 700; font-size: 64px; line-height: 1; text-align: center; color: var(--marine); margin: 10px 0 4px; }
.prix-note { text-align: center; color: var(--gris); margin-bottom: 18px; }
.garantie { display: flex; gap: 20px; align-items: center; margin-top: 26px; padding: 20px 22px; background: var(--ivoire); border-radius: 12px; }
.sceau { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; border: 3px double var(--or-f); color: var(--marine); display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Cardo", Georgia, serif; font-weight: 700; font-size: 18px; line-height: 1.15; background: var(--blanc); }
.garantie p { margin: 0; }

/* Françoise */
.francoise { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
.francoise img { border-radius: 50%; border: 4px solid var(--or); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--ivoire2); }
.signature { font-family: "Cardo", Georgia, serif; font-style: italic; font-size: 22px; color: var(--marine3); }

/* questions */
.faq details { background: var(--blanc); border: 1px solid var(--ivoire2); border-radius: 12px; margin: 0 0 12px; }
.faq summary { cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 700; font-size: 20px; list-style: none; position: relative; color: var(--marine); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 30px; color: var(--or-f); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 20px 18px; margin: 0; }

.fin { background: var(--marine); color: #E9E3D6; text-align: center; padding: 60px 0; }
.fin h2 { color: #fff; }
.fin p { font-size: 20px; }
.fin .rassure { color: #C9C2B3; }

.pied { background: #09142A; color: #B8B2A6; font-size: 16px; padding: 28px 0; text-align: center; }
.pied a { color: #E9E3D6; }
.pied p { margin: 0 0 8px; }

/* pages légales */
.legal { padding: 40px 0 60px; }
.legal h2 { font-size: 26px; margin-top: 30px; }
.legal .maj { color: var(--gris); font-size: 16px; }

/* page après paiement */
.merci-haut { padding: 40px 0 10px; }
.liste-livres { display: grid; gap: 14px; margin: 18px 0 30px; }
.livre-lien { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; background: var(--blanc); border: 2px solid var(--ivoire2); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--texte); }
.livre-lien:hover { border-color: var(--or); }
.livre-icone { width: 64px; height: 80px; border-radius: 4px 8px 8px 4px; background: var(--marine); color: var(--or-clair); display: flex; align-items: center; justify-content: center; font-family: "Cardo", Georgia, serif; font-weight: 700; font-size: 26px; box-shadow: 0 4px 10px rgba(14,28,54,.25); }
.livre-lien strong { display: block; font-family: "Cardo", Georgia, serif; font-size: 23px; color: var(--marine); }
.livre-lien em { font-style: normal; background: var(--or); color: var(--marine); font-weight: 900; padding: 12px 18px; border-radius: 8px; }
.conseil-depart { background: var(--blanc); border-left: 6px solid var(--or); border-radius: 10px; padding: 22px 24px; margin-bottom: 40px; }

@media (max-width: 860px) {
  body { font-size: 18px; }
  .hero { padding: 16px 0 30px; }
  .hero-grille, .offre-grille, .francoise { grid-template-columns: 1fr; }
  .hero-grille { gap: 0; }
  .hero-visuel { display: none; }
  .hero-mini { display: block; flex: 0 0 76px; width: 76px; filter: drop-shadow(0 6px 10px rgba(14,28,54,.25)); }
  .surtitre-suite { display: none; }
  .surtitre { font-size: 14px; margin-bottom: 6px; }
  h1 { font-size: 31px; margin-bottom: .35em; }
  .hero-sous { font-size: 18px; line-height: 1.45; margin-bottom: 12px; }
  .hero-achat { gap: 14px; margin-bottom: 12px; }
  .hero-prix { flex-direction: column; gap: 2px; }
  .hero-prix strong { font-size: 44px; }
  .hero-prix span { font-size: 18px; }
  .hero .bouton { display: block; width: 100%; padding: 17px 16px; }
  .hero .rassure { font-size: 17px; text-align: center; margin-top: 10px; }
  .du-video { font-size: 16px; line-height: 1.4; padding: 7px 12px; margin-bottom: 10px; }
  .entete .bouton-petit { display: none; }
  .entete-in { min-height: 60px; }
  .marque img { width: 40px; height: 40px; }
  .marque span { font-size: 19px; }
  .marque small { font-size: 13px; }
  .bandeau { font-size: 13px; padding: 7px 10px; letter-spacing: .03em; }
  .bloc { padding: 46px 0; }
  .changes, .etapes, .moments { grid-template-columns: 1fr; }
  .pages-apercu { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tableau { font-size: 18px; }
  .tableau th, .tableau td { padding: 12px; }
  .tableau .nous td { font-size: 19px; }
  .phrase q { font-size: 22px; }
  .offre-boite { padding: 24px 18px; }
  .offre-grille img { max-height: 260px; }
  .prix-grand { font-size: 56px; }
  .garantie { flex-direction: column; text-align: center; }
  .francoise img { max-width: 230px; margin: 0 auto; }
  .livre-lien { grid-template-columns: 56px 1fr; }
  .livre-icone { width: 56px; height: 70px; }
  .livre-lien em { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 370px) {
  h1 { font-size: 28px; }
  .hero-mini { flex-basis: 64px; width: 64px; }
}

/* Lecture des livres achetés (/api/lire.php) et pages d'erreur (/api/telecharger.php), repris de Didier. */
.lecture { background: var(--marine2); }
.lecture-haut, .lecture-bas { background: var(--marine); color: #fff; text-align: center; padding: 14px 12px; }
.lecture-titre { font-family: "Cardo", Georgia, serif; font-size: 22px; margin: 0 0 4px; }
.lecture-aide { font-size: 15px; color: var(--ivoire2); margin: 0 0 10px; }
.lecture-pages { max-width: 860px; margin: 0 auto; padding: 12px 8px; }
.lecture-pages img { width: 100%; height: auto; margin: 0 0 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.bouton-seul { display: inline-block; background: var(--or); color: var(--marine); font-weight: 700; padding: 12px 18px; border-radius: 8px; text-decoration: none; }
.lecture-bas p { margin: 10px 0 0; font-size: 15px; }
.lecture-bas a:not(.bouton-seul) { color: #fff; }