/* Le Scribe — site commercial. Même identité que l'atelier : crème, terracotta, bleu profond, touches dorées. */
:root {
  --creme: #fbf5ec; --creme-2: #f4eadb; --papier: #fffdf8;
  --terracotta: #b85a3a; --terracotta-2: #9c4a2e; --corail: #e9785e; --corail-pale: #fbe3da;
  --bleu: #1e3550; --bleu-2: #2c4b6e; --or: #c9a14a; --or-clair: #ecd9a6; --or-pale: #fbf1d8;
  --encre: #232630; --gris: #5f5950; --bord: #e7dac6; --vert: #2f6b4f; --vert-pale: #e1f0e7; --rouge: #a8323f; --rouge-pale: #f8dde0;
  --titres: "Constantia", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --texte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --ombre: 0 1px 2px #5a3b2010, 0 8px 24px #5a3b2018; --rayon: 16px;
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); color: var(--encre); line-height: 1.6; background: var(--creme);
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: var(--bleu-2); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--bleu); color: #fff; padding: .6rem 1rem; z-index: 50; }
.evitement:focus { left: 1rem; }
h1, h2, h3 { font-family: var(--titres); color: var(--bleu); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: .4rem 0 1rem; }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.8rem); margin: 2rem 0 .8rem; }
main { flex: 1; width: min(1120px, 100%); margin: 0 auto; padding: 1.2rem clamp(1rem, 4vw, 2rem) 3rem; }
section { margin: 1.5rem 0 2.5rem; } .etroit { max-width: 560px; margin-inline: auto; }

/* en-tête et navigation */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .5rem clamp(1rem, 4vw, 2rem); background: #1e3550f2; color: #fff; backdrop-filter: blur(8px); }
.marque { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-family: var(--titres);
  font-size: 1.32rem; font-weight: 700; margin-right: auto; line-height: 1.05; }
.marque img { width: 38px; height: 38px; flex: none; border-radius: 9px; box-shadow: 0 0 0 1px #d4af5a55; }
.marque-nom { display: flex; flex-direction: column; }
.marque small { font-family: var(--texte); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); margin-top: .18rem; }
.entete nav a, .compte-liens a { color: #fff; text-decoration: none; padding: .45rem .5rem; border-radius: 8px; font-size: .86rem; white-space: nowrap; display: inline-block; min-height: 44px; line-height: 28px; }
.entete nav a:hover, .entete nav a[aria-current="page"] { background: #ffffff1f; }
.compte-liens { display: flex; gap: .3rem; align-items: center; }
.compte-liens .btn { background: var(--corail); border-color: var(--corail); }
.menu { display: none; } .menu summary { cursor: pointer; padding: .5rem .8rem; border: 1px solid #ffffff55; border-radius: 8px; list-style: none; min-height: 44px; }
.menu nav { display: flex; flex-direction: column; position: absolute; right: 1rem; top: 100%; background: var(--bleu); border-radius: 12px; padding: .5rem; box-shadow: var(--ombre); min-width: 220px; }
@media (max-width: 1380px) { .nav-large { display: none; } .menu { display: block; } }
.entete { flex-wrap: nowrap; } .marque { white-space: nowrap; }
@media (max-width: 560px) { .entete { flex-wrap: wrap; } .marque { font-size: 1.15rem; } .marque img { width: 34px; height: 34px; } }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.3rem;
  border-radius: 999px; border: 2px solid var(--terracotta); background: var(--terracotta); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.btn:hover { background: var(--terracotta-2); border-color: var(--terracotta-2); transform: translateY(-1px); }
.btn.secondaire { background: transparent; color: var(--terracotta-2); }
.btn.secondaire:hover { background: var(--corail-pale); }
.btn.grand { font-size: 1.05rem; padding: .8rem 1.6rem; } .btn.petit { min-height: 40px; padding: .35rem .9rem; font-size: .88rem; }
.btn.danger { background: var(--rouge); border-color: var(--rouge); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0; }

/* accueil */
.heros { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.heros em { font-style: normal; color: var(--terracotta); }
.heros figure { margin: 0; } .heros img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.heros figcaption { font-size: .8rem; color: var(--gris); margin-top: .4rem; }
@media (max-width: 800px) { .heros { grid-template-columns: 1fr; } }
/* accueil : visuel panoramique 16:9 sur toute la largeur de l'écran, juste sous la navigation ; ses titres et son bouton
   « Commencer maintenant » sont dessinés dans l'image (un vrai lien est posé sur le bouton dessiné) */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.accueil-visuel { width: 100vw; margin: -1.2rem calc(50% - 50vw) 0; background: #0d1a2b; }
.visuel { position: relative; aspect-ratio: 1672 / 941; background: #0d1a2b; }
.visuel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visuel-action { position: absolute; left: 3.8%; top: 66.5%; width: 35%; height: 7.6%; border-radius: 999px; transition: box-shadow .2s; }
.visuel-action:hover { box-shadow: 0 0 0 3px #ecd9a6cc, 0 8px 26px #c9a14a88; }
.visuel-action:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--or); }
.accueil-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.2rem;
  width: min(1120px, 100%); margin: 0 auto; padding: .9rem clamp(1rem, 4vw, 2rem); background: var(--creme); }
.accueil-suite .rassurance { margin: 0; }
.accueil-mobile { display: none; }
.bouton-mobile { display: none; }
@media (max-width: 900px) {  /* tablette et téléphone : le bouton dessiné devient trop petit pour le doigt */
  .bouton-mobile { display: inline-flex; width: 100%; }
}
@media (max-width: 700px) {  /* téléphone : le texte dessiné devient illisible, il est repris en vrai texte */
  .accueil-mobile { display: block; padding: 1.4rem clamp(1rem, 5vw, 1.6rem) 1.1rem; color: #fbf5ec;
    background: radial-gradient(120% 140% at 85% 0%, #3a5a86 0%, #1e3550 45%, #0d1a2b 100%); }
  .accueil-mobile-titre { font-family: var(--titres); font-size: 1.62rem; line-height: 1.22; margin: 0 0 .6rem; color: #fff; }
  .accueil-mobile-titre em { color: #ecd9a6; }
  .accueil-mobile-points { margin: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #ecd9a6; }
}

/* deux parcours sous le visuel */
.parcours { margin-top: 2rem; }
.parcours h2 { text-align: center; margin-top: 0; }
.parcours-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.parcours-carte { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.4rem clamp(1rem, 3vw, 1.8rem) 1.5rem; box-shadow: var(--ombre); }
.parcours-carte h3 { margin: .2rem 0 .6rem; font-size: 1.35rem; }
.parcours-carte ul { margin: .2rem 0 1.2rem; padding-left: 1.1rem; flex: 1; } .parcours-carte li { margin: .25rem 0; }
.parcours-carte .btn { align-self: stretch; }
.parcours-lettre { position: absolute; top: 1rem; right: 1.2rem; margin: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--titres); font-weight: 700; color: var(--bleu); background: var(--or-pale);
  border: 1px solid var(--or-clair); }
.btn.chaud { background: var(--bleu); border-color: var(--bleu); } .btn.chaud:hover { background: var(--bleu-2); border-color: var(--bleu-2); }
@media (max-width: 760px) { .parcours-cartes { grid-template-columns: 1fr; } }

/* typographie des textes longs : justification avec césure française sur grand écran, alignement à gauche sur téléphone */
.legal p, .parcours-carte p, .bande p, section > p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 760px) {
  .legal p, section > p:not(.rassurance):not(.note):not(.petit) { text-align: justify; text-justify: inter-word; }
}
/* les cartes de parcours sont étroites sur tablette : justifiées seulement quand elles sont assez larges */
@media (min-width: 1100px) { .parcours-carte p { text-align: justify; text-justify: inter-word; } }
.surtitre { color: var(--terracotta); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; margin: 0; }
.intro { font-size: 1.08rem; color: #3a3d47; max-width: 62ch; }
.rassurance { color: var(--gris); font-size: .9rem; }
.bande { background: var(--papier); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.2rem clamp(1rem, 3vw, 2rem); }
.grille3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.2rem; }
.carte h2 { margin-top: .2rem; font-size: 1.2rem; }

/* offres */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; align-items: stretch; }
.offre { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.4rem; display: flex; flex-direction: column; box-shadow: var(--ombre); }
.offre.mise-en-avant { border: 2px solid var(--or); }
.offre h3 { margin: 0; font-size: 1.4rem; } .offre .prix { margin: .4rem 0 0; } .offre .prix b { font-size: 2.2rem; font-family: var(--titres); color: var(--bleu); }
.offre .prix span { color: var(--gris); } .offre .quota { font-weight: 700; color: var(--terracotta-2); margin: .2rem 0 .6rem; }
.offre ul { padding-left: 1.1rem; margin: .6rem 0 1.2rem; flex: 1; } .offre .btn { align-self: stretch; }
.note, .petit { font-size: .85rem; color: var(--gris); }
.etapes { counter-reset: e; list-style: none; padding: 0; display: grid; gap: .7rem; }
.etapes li { counter-increment: e; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: .8rem 1rem .8rem 3.4rem; position: relative; }
.etapes li::before { content: counter(e); position: absolute; left: .9rem; top: .8rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--bleu); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.etapes b { display: block; color: var(--bleu); } .liste li { margin: .4rem 0; }
.question { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: .2rem 1rem; margin: .6rem 0; }
.question summary { cursor: pointer; font-weight: 600; padding: .7rem 0; min-height: 44px; }

/* formulaires */
.formulaire { display: grid; gap: .3rem; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.2rem; }
.formulaire label { font-weight: 600; margin-top: .5rem; }
input, select, textarea { font: inherit; padding: .65rem .8rem; border: 1px solid #cdbfa8; border-radius: 10px; background: #fff; width: 100%; min-height: 48px; }
.case { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.case input { width: auto; min-height: auto; margin-top: .35rem; }
.retour { min-height: 1.4em; margin: .4rem 0 0; } .retour.erreur { color: var(--rouge); } .retour.ok { color: var(--vert); }

/* pages légales */
.legal { max-width: 860px; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: clamp(1rem, 3vw, 2.2rem); }
.legal h2 { font-size: 1.2rem; margin-top: 1.6rem; } .version, .source { color: var(--gris); font-size: .85rem; }
.a-completer { background: #fff1b8; color: #6b4e00; padding: 0 .25rem; border-radius: 4px; font-weight: 600; }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.tableau th, .tableau td { border: 1px solid var(--bord); padding: .5rem .6rem; text-align: left; vertical-align: top; }
blockquote { border-left: 4px solid var(--or); margin: 1rem 0; padding: .6rem 1rem; background: var(--or-pale); }

/* espace client et administration */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .8rem; margin: 1rem 0; }
.tuile { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: .9rem 1rem; }
.tuile b { display: block; font-size: 1.6rem; font-family: var(--titres); color: var(--bleu); }
.etiquette { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--creme-2); }
.etiquette.ok { background: var(--vert-pale); color: var(--vert); } .etiquette.alerte { background: var(--rouge-pale); color: var(--rouge); }
.livres { display: grid; gap: .7rem; } .livre { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: .9rem 1rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.onglets-admin { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.onglets-admin button { min-height: 44px; border-radius: 99px; border: 1px solid #cdbfa8; background: #fff; padding: .3rem 1rem; font: inherit; cursor: pointer; }
.onglets-admin button[aria-pressed="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
pre.journal { white-space: pre-wrap; background: #1f2430; color: #e8e6e3; padding: 1rem; border-radius: 12px; font-size: .78rem; max-height: 420px; overflow: auto; }
.voile { position: fixed; inset: 0; background: #1e355066; display: grid; place-items: center; padding: 1rem; z-index: 40; }
.boite { background: var(--papier); border-radius: 18px; padding: 1.4rem; width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow: auto; box-shadow: var(--ombre); }

/* pied de page */
.pied { background: var(--bleu); color: #dfe6ee; padding: 1.6rem clamp(1rem, 4vw, 2rem); display: grid; gap: 1rem; font-size: .85rem; }
.pied b { color: #fff; } .pied nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.pied a { color: #fff; display: inline-block; min-height: 32px; line-height: 32px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }