/* Site de Duployé — mêmes jetons que l'application (spec § 13). Polices auto-hébergées. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/polices/fraunces-latin-opsz.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/polices/fraunces-latin-ext-opsz.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-display: swap; src: url('/polices/atkinson-400.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-style: italic; font-display: swap; src: url('/polices/atkinson-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson'; font-weight: 700; font-display: swap; src: url('/polices/atkinson-700.woff2') format('woff2'); }

:root {
  --encre: #2A1E16; --or: #C9A253; --or-fonce: #9A7324; --cuir: #6A3F24; --parchemin: #F3EAD7;
  --papier: #FBF7EF; --sepia: #6B5544; --filet: #D8C7A4; --ok: #246E40;
  --largeur: 72rem;
}
* { box-sizing: border-box; }
/* `hidden` doit gagner sur un `display` déclaré (.bouton est en inline-flex). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: 'Atkinson', system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
img, svg { max-width: 100%; }
a { color: var(--cuir); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; font-variation-settings: 'opsz' 96; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-variation-settings: 'opsz' 144; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.saut { position: absolute; left: -9999px; } .saut:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--papier); padding: .5rem 1rem; }
.cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
.lecture { max-width: 46rem; }
.discret { color: var(--sepia); }

/* En-tête : la reliure, commune au site et à « Mon compte ». */
.entete { background: var(--encre); border-bottom: 2px solid rgba(201,162,83,.7); position: sticky; top: 0; z-index: 20; }
.entete .cadre { display: flex; align-items: center; gap: 1.5rem; min-height: 60px; flex-wrap: wrap; }
.marque { display: block; line-height: 0; text-decoration: none; }
.marque img { display: block; height: 40px; width: auto; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.menu a { color: rgba(251,247,239,.85); text-decoration: none; padding: .4rem .7rem; border-radius: 6px; font-size: 16px; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--or); background: rgba(255,255,255,.06); }
.bouton { display: inline-flex; align-items: center; gap: .5rem; background: var(--or); color: var(--encre) !important; font-weight: 700; text-decoration: none; padding: .65rem 1.2rem; border-radius: 6px; border: 1px solid rgba(154,115,36,.5); }
.bouton:hover { background: #d4b066; }
.bouton.second { background: transparent; border-color: rgba(42,30,22,.35); color: var(--encre) !important; }
.bouton.second:hover { border-color: var(--encre); background: #fff; }
.entete .bouton { padding: .45rem .9rem; margin-left: .5rem; }
/* Téléphone : « Se connecter » reste sur la ligne de la marque, le menu passe dessous, sur une
   ligne qui défile plutôt que des libellés cassés en deux ou trois lignes. */
@media (max-width: 760px) {
  .entete .cadre { gap: .25rem; }
  .entete .bouton { margin-left: auto; }
  .menu { order: 3; margin-left: 0; width: 100%; padding-bottom: .5rem; overflow-x: auto; flex-wrap: nowrap; }
}

/* Ouverture de page */
.ouverture { padding: 4.5rem 0 3.5rem; }
.ouverture .chapeau { font-size: 1.2rem; max-width: 40rem; color: #3b2c22; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.preuve { margin-top: 1rem; font-size: 15px; color: var(--sepia); }

section.bloc { padding: 3.5rem 0; border-top: 1px solid var(--filet); }
.grille { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grille-2 { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .grille-2 { grid-template-columns: 1fr; gap: 2rem; } }
.etapes { counter-reset: e; list-style: none; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.etapes li { counter-increment: e; border-top: 2px solid var(--encre); padding-top: .75rem; }
.etapes li::before { content: counter(e); font-family: 'Fraunces', serif; font-size: 2.2rem; color: var(--or-fonce); display: block; line-height: 1; margin-bottom: .4rem; }

/* La page de registre : le même parchemin que la relecture dans l'application. */
.registre { position: relative; background: var(--parchemin); padding: 2.2rem 2rem 2rem 5rem; border-radius: 2px; box-shadow: 0 1px 0 var(--filet), 0 18px 40px -26px rgba(42,30,22,.6); font-size: 16px; line-height: 1.65; }
.registre::before { content: ''; position: absolute; left: 3.9rem; top: 0; bottom: 0; border-left: 1px solid rgba(154,115,36,.55); }
.registre h3 { font-size: 1.05rem; border-bottom: 1px solid rgba(42,30,22,.15); padding-bottom: .2rem; margin-top: 1.4rem; }
/* Le minutage se place dans la MARGE : il est positionné par rapport à son paragraphe, qui
   commence au retrait de 5rem — d'où la valeur négative (le filet est à 3,9rem). */
.registre .t { position: absolute; left: -4.6rem; top: .15rem; width: 3.1rem; text-align: right; font-size: 13px; color: var(--or-fonce); font-variant-numeric: tabular-nums; background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
.registre .t:hover { color: var(--cuir); text-decoration: underline; }
.registre p { position: relative; }
.registre mark { background: rgba(201,162,83,.3); box-shadow: inset 0 -2px 0 var(--or-fonce); color: var(--cuir); font-weight: 700; padding: 0 2px; }
.registre table { border-collapse: collapse; width: 100%; font-size: 15px; margin: .5rem 0 1rem; }
.registre th, .registre td { border: 1px solid rgba(42,30,22,.25); padding: .25rem .5rem; text-align: left; }
@media (max-width: 640px) { .registre { padding: 1.5rem 1rem 1.5rem 3.6rem; } .registre::before { left: 3rem; } .registre .t { width: 2.4rem; left: -3.3rem; } }
.lecteur-demo audio { width: 100%; }

/* Tarifs */
.offres { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.offre { background: #fff; border: 1px solid var(--filet); border-radius: 8px; padding: 1.4rem; display: flex; flex-direction: column; }
.offre.mise { border-color: var(--cuir); }
.prix { font-family: 'Fraunces', serif; font-size: 2.2rem; line-height: 1.1; margin: .75rem 0 0; font-variation-settings: 'opsz' 96; }
.prix small { font-family: 'Atkinson', sans-serif; font-size: 15px; color: var(--sepia); }
.ttc { font-size: 14px; color: var(--sepia); margin: .1rem 0 1rem; }
.offre .pour { font-size: 15px; color: #3b2c22; margin: 0 0 .75rem; }
.offre ul { padding-left: 1.1rem; margin: 0 0 1.25rem; font-size: 16px; }
.mention-tva { font-size: 15px; margin-top: .9rem; }
.pour-bientot { max-width: 40rem; margin: 1.25rem 0 0; }
.offres:has(.offre:only-child) { grid-template-columns: minmax(0, 22rem); }
.offre .bouton { margin-top: auto; justify-content: center; }

/* Documents juridiques */
.document { padding: 3rem 0 4rem; }
.document h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.document h2 { font-size: 1.35rem; margin-top: 2rem; }
.document table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1rem 0; display: block; overflow-x: auto; }
.document th, .document td { border: 1px solid var(--filet); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.document th { background: rgba(42,30,22,.05); }
.document blockquote { border-left: 3px solid var(--or-fonce); margin: 1rem 0; padding: .25rem 1rem; background: rgba(243,234,215,.6); }
.a-completer { background: #fde7c6; color: #7a3a08; font-weight: 700; padding: 0 3px; }
.avertissement { border: 1px solid #c08a3e; background: #fff6e8; padding: .75rem 1rem; border-radius: 6px; font-size: 15px; margin-bottom: 1.5rem; }

/* Formulaires */
label { display: block; font-weight: 700; margin: 1rem 0 .3rem; font-size: 16px; }
input[type=text], input[type=email], textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--filet); border-radius: 6px; font: inherit; background: #fff; color: var(--encre); }
.case { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.case input { margin-top: .35rem; }
.message { padding: .75rem 1rem; border-radius: 6px; margin-top: 1rem; }
.message.ok { background: rgba(36,110,64,.08); border: 1px solid rgba(36,110,64,.4); }
.message.ko { background: rgba(163,32,32,.06); border: 1px solid rgba(163,32,32,.4); }

details { border-top: 1px solid var(--filet); padding: .9rem 0; }
details summary { cursor: pointer; font-weight: 700; }
details p { margin: .6rem 0 0; }

.pied { border-top: 1px solid var(--filet); padding: 2rem 0 2.5rem; font-size: 15px; color: var(--sepia); margin-top: 2rem; }
.pied .cadre { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; }
.pied ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }