/* Carnet d’escale — design 2026 : bleu nuit et or, sobre et aéré.
   Chargé après styles.css et les styles de la page : il redéfinit les couleurs, la typo et les surfaces. */
:root {
  --papier: #fafaf7;
  --brume: #f1f2f5;
  --blanc: #ffffff;
  --nuit: #12203a;
  --nuit-2: #0e1a2f;
  --nuit-3: #1a2a47;
  --encre: #12203a;
  --gris: #5e6573;
  --gris-clair: #8a909c;
  --ligne: #e4e5ea;
  --or: #b8975a;
  --or-fonce: #8f7240;
  --or-clair: #d6be8e;
  --creme: #f5f3ee;
  /* anciens noms, remappés */
  --ocre: var(--nuit);
  --ocre-fonce: var(--or-fonce);
  --sauge: var(--or-clair);
  --sauge-fonce: var(--nuit);
  --f-titre: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --f-texte: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --f-note: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --r: 12px;
  --r-grand: 22px;
}

body { background: var(--papier); color: var(--encre); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--gris); }

/* Petites étiquettes : en minuscules, or, sans police machine à écrire */
.kicker { font-family: var(--f-texte); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--or-fonce); }

/* Boutons : pilule bleu nuit; sur fond sombre, or */
.btn { border-radius: 999px; background: var(--nuit); color: #fff; font-weight: 600; letter-spacing: -0.005em; padding: 12px 28px; transition: background .2s, transform .2s; }
.btn:hover { background: var(--nuit-3); }
.btn:active { transform: scale(.98); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.nav .btn, .hero .btn, .etapes .btn, .final .btn, .forfait .btn, .cta-mobile .btn { background: var(--or); color: var(--nuit-2); }
.nav .btn:hover, .hero .btn:hover, .etapes .btn:hover, .final .btn:hover, .forfait .btn:hover, .cta-mobile .btn:hover { background: var(--or-clair); }
.link-light { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(214, 190, 142, .7); padding-bottom: 2px; }

/* Navigation : barre fine et translucide */
.nav { background: rgba(14, 26, 47, .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.nav .wrap { min-height: 60px; }
.logo { font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.logo span { color: var(--or-clair); font-style: normal; font-weight: 500; }
.nav-links { gap: 30px; }
.nav-links a { font-size: .88rem; opacity: .78; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav .btn { min-height: 36px; padding: 7px 18px; font-size: .86rem; }

/* Couverture */
.hero { background: var(--nuit-2); color: #fff; }
.hero .kicker { color: var(--or-clair); }
.hero h1 em { font-style: normal; color: inherit; }
.hero .lead { color: rgba(255, 255, 255, .78); font-size: 1.22rem; }
.hero-coords { border-left: 1px solid rgba(214, 190, 142, .35); font-family: var(--f-texte); font-size: .9rem; line-height: 1.9; color: rgba(255, 255, 255, .62); }
.hero-coords strong { color: #fff; font-weight: 600; }
.globe-route { font-family: var(--f-texte) !important; letter-spacing: 0 !important; font-size: .82rem !important; background: rgba(14, 26, 47, .62) !important; border-color: rgba(214, 190, 142, .3) !important; backdrop-filter: blur(10px); }
.globe-route b { color: var(--or-clair) !important; }

/* Bandeau de promesse */
.promesse { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.promesse h3 { font-size: 1.12rem; }
.promesse div + div { border-left-color: var(--ligne); }
.promesse p { font-size: .94rem; }

/* Sections : plus d'air, titres centrés */
section { padding-block: 128px; }
@media (max-width: 640px) { section { padding-block: 76px; } }
.section-head { margin-inline: auto; text-align: center; align-items: center; gap: 16px; margin-bottom: 64px; max-width: 760px; }
.section-head .lead { margin-inline: auto; }
#inspirations, #inclus, .faq, #securite { background: var(--brume); }
.apercu { background: var(--papier); }

/* Notre approche (photo conservée) */
.image-texte { background: var(--blanc); }
.note-liberte { background: var(--brume); border-left: 0; border-radius: var(--r); }

/* Comment ça marche : fond nuit */
.etapes { background: var(--nuit-2); color: #fff; }
.etapes .kicker { color: var(--or-clair); }
.etapes .lead, .etapes p { color: rgba(255, 255, 255, .72); }
.etapes .num { font-family: var(--f-titre); font-style: normal; font-weight: 300; font-size: 2.6rem; color: var(--or-clair); letter-spacing: -0.03em; }
.etapes-photo .etapes-liste li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.etapes-photo .section-head { text-align: left; align-items: flex-start; margin-inline: 0; }

/* Photos et cartes */
.photo { border-radius: var(--r-grand); background: var(--brume); }
.ce-anim .cadre.zoom { border-radius: var(--r-grand) !important; }
.inspi { border-radius: var(--r-grand); background: var(--nuit-2); }
.inspi .bandeau { background: linear-gradient(to top, rgba(14, 26, 47, .9) 0%, rgba(14, 26, 47, .55) 55%, rgba(14, 26, 47, 0) 100%); padding: 22px 22px 24px; }
.inspi h3 { font-size: 1.25rem; color: #fff; }
.inspi p { color: rgba(255, 255, 255, .8); }
.experience h3 { font-size: 1.2rem; }
.legende { font-family: var(--f-texte); font-size: .84rem; letter-spacing: 0; color: var(--gris-clair); }

.carte { background: var(--blanc); border-radius: var(--r-grand); padding: 28px; gap: 12px; }
.cartes-compactes .carte { padding: 26px; }
.carte svg { stroke: var(--or); stroke-width: 1.5; width: 28px; height: 28px; }
.carte h3 { font-size: 1.12rem; }
.carte p { font-size: .94rem; line-height: 1.55; }

/* Forfaits : cartes blanches, montant en grand, forfait choisi bordé d'or */
.prix { background: var(--papier); }
.prix .section-head { margin-inline: auto !important; }
.forfaits { gap: 22px; }
.forfaits .forfait { background: var(--blanc); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 36px 32px; gap: 14px; }
.forfaits .forfait .kicker { color: var(--or-fonce); }
.forfaits .forfait h3 { color: var(--encre); font-size: 1.35rem; }
.forfaits .forfait .montant { font-family: var(--f-titre); font-weight: 700; font-size: 3rem; letter-spacing: -0.04em; color: var(--encre); }
.forfaits .forfait .montant small { color: var(--gris); font-weight: 500; letter-spacing: 0; }
.forfaits .forfait p { color: var(--gris); }
.forfaits .forfait strong { color: var(--encre); }
.forfaits .forfait.suggere { border: 2px solid var(--or); transform: none; box-shadow: 0 20px 50px -30px rgba(18, 32, 58, .35); }
.ce-anim .forfaits .forfait.suggere.vu { transform: none; }
.forfaits .forfait .btn-choisir { background: var(--nuit); color: #fff; }
.forfaits .forfait .btn-choisir:hover { background: var(--nuit-3); }
.prix .wrap > div:last-child > .btn { margin-inline: auto; display: flex; width: fit-content; }

/* Sécurité */
#securite .carte { background: var(--blanc); }

/* FAQ */
.faq-liste { margin-inline: auto; border-top-color: var(--ligne); }
.faq details { border-bottom-color: var(--ligne); }
.faq summary { font-family: var(--f-titre); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; padding-block: 24px; }
.faq summary::after { color: var(--or); font-weight: 400; top: 20px; }

/* Formulaire */
.demande { background: var(--papier); }
#avis { background: var(--brume) !important; border-top: 0 !important; }
.panneau { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 40px; box-shadow: 0 24px 60px -40px rgba(18, 32, 58, .25); }
@media (max-width: 640px) { .panneau { padding: 22px; } }
.champ input[type=text], .champ input[type=email], .champ input[type=url], .champ input[type=tel],
.champ input[type=number], .champ input[type=date], .champ select, .champ textarea {
  border: 1px solid #d6d9e0; border-radius: var(--r); background: var(--blanc); transition: border-color .15s, box-shadow .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 4px rgba(184, 151, 90, .22); }
.requis { color: var(--or-fonce); }
/* Pastilles des cases à choix multiples (et non les boutons de forfait) */
fieldset .choix { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding: 0; border: 0; background: none; cursor: default; box-shadow: none; }
fieldset .choix label { border: 1px solid #d6d9e0; background: var(--blanc); border-radius: 999px; }
fieldset .choix label:has(input:checked) { border-color: var(--nuit); background: #eef1f6; }
.choix input, .case input { accent-color: var(--nuit); }
/* Étape 1 : choix du forfait */
.choix-forfait { border-bottom-color: var(--ligne); }
.choix-liste .choix { background: var(--blanc); border: 1.5px solid var(--ligne); border-radius: 16px; padding: 16px 18px; }
.choix-liste .choix:hover { border-color: var(--gris-clair); }
.choix-liste .choix[aria-pressed="true"] { border-color: var(--or); box-shadow: 0 0 0 4px rgba(184, 151, 90, .18); background: #fffdf8; }
.choix-prix { font-family: var(--f-titre); font-weight: 700; letter-spacing: -0.03em; font-size: 1.45rem; color: var(--encre); }
.suggestion-forfait { color: var(--or-fonce); }
.nuits { color: var(--nuit) !important; }
.champ.paiement { background: var(--brume) !important; border-radius: var(--r) !important; }
.squelette span { background: linear-gradient(90deg, var(--brume), #e8eaef, var(--brume)); border-radius: var(--r); }
.reco { background: var(--nuit-2); border-radius: var(--r-grand); }
.reco .kicker { color: var(--or-clair); }
.reco h4, .reco .prixreco { font-family: var(--f-titre); font-weight: 700; letter-spacing: -0.02em; }

/* Appel final */
.final { background: var(--nuit-2); color: #fff; }
.final p { color: rgba(255, 255, 255, .72); }

/* Pied de page */
footer { background: #0a1424; color: rgba(255, 255, 255, .6); }
footer h4 { font-family: var(--f-texte); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--or-clair); }
footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.avis { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }

/* Itinéraire d'exemple (s'il est affiché) */
.carnet { border-radius: var(--r-grand); border-color: var(--ligne); box-shadow: 0 30px 60px -40px rgba(18, 32, 58, .3); }
.moment, .adresse, .badge-exemple { font-family: var(--f-texte); letter-spacing: 0; text-transform: none; }
.onglets button[aria-selected="true"] { border-bottom-color: var(--or); }

/* Barre mobile */
.cta-mobile { background: rgba(14, 26, 47, .85) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Pages légales */
.legal h2 { font-size: 1.5rem; }

/* Correctifs de mise en page */
.nav-links a, .nav .btn, .langue { white-space: nowrap; }
@media (max-width: 1180px) { .nav-links { display: none; } }
.promesse > .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.promesse > .wrap > div { padding-top: 34px; padding-bottom: 34px; }

/* Pas d'astérisque à côté des champs obligatoires */
.requis { display: none !important; }

/* Contraste renforcé (WCAG AA) */
:root { --or-fonce: #7d6438; --gris-clair: #676d7b; }
.carte svg { stroke: var(--or-fonce); }