/* ============================================================
   Fidelio Patrimoine — site vitrine
   Direction « le relevé du cabinet », la même que l'application :
   une feuille de papier blanc posée sur un fond pierre, des filets
   qui structurent, des chiffres qui se lisent comme un relevé.
   La lecture en Source Serif 4, l'interface en Inter, hébergées
   par le site (polices/, licences OFL jointes) : aucune requête
   vers Google. Le bleu nuit de Fidelio signe ; l'or ne sert
   qu'aux filets, jamais au texte.
   Rien sous 14 px ; contraste d'au moins 4,5:1 pour tout texte.
   ============================================================ */

:root {
  --papier: #ffffff;
  --pierre: #f3f2ee;
  --filet: #dcd8d0;
  --filet-fort: #c4bfb5;
  --encre: #1c1a17;
  --texte: #3a3631;
  --discret: #5b564f;
  --hausse: #1f6a45;
  --baisse: #9b2f3b;
  --marque: #04335c;
  --marque-fonce: #032744;
  --marque-voile: #e9eef3;
  --or: #c9a961;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lecture: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  --largeur: 72rem;
  --marge: 1rem;
  --rayon: 10px;
  --rayon-petit: 8px;
}
@media (min-width: 40rem) { :root { --marge: 1.5rem; } }
@media (min-width: 64rem) { :root { --marge: 2.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--pierre);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--marque); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .9em; }
strong { font-weight: 600; color: var(--encre); }
:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.evitement { position: absolute; left: 1rem; top: -5rem; z-index: 60; background: var(--papier); color: var(--encre); padding: .75rem 1rem; border: 2px solid var(--marque); border-radius: var(--rayon-petit); font-weight: 600; text-decoration: none; }
.evitement:focus { top: 1rem; }

/* ---------- Titres et textes ---------- */

h1, h2, h3, h4 { margin: 0; color: var(--encre); font-weight: 500; }
.t-hero {
  font-family: var(--lecture);
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.375rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 20ch;
}
.t-section {
  font-family: var(--lecture);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 26ch;
}
.t-item { font-family: var(--lecture); font-size: 1.375rem; line-height: 1.25; }
.lead { font-family: var(--lecture); font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--texte); max-width: 44ch; }
.intro { color: var(--texte); max-width: 62ch; margin: 1.25rem 0 0; }
.discret { color: var(--discret); }
.rule { width: 3rem; height: 0; border: 0; border-top: 2px solid var(--or); margin: 0 0 1.5rem; }

/* ---------- Boutons et liens ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: .7rem 1.4rem;
  font: 600 1rem/1.2 var(--sans);
  border: 1px solid transparent; border-radius: var(--rayon-petit);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn--primary { background: var(--marque); color: #ffffff; }
.btn--primary:hover { background: var(--marque-fonce); }
.btn--ghost { border-color: var(--filet-fort); color: var(--encre); background: var(--papier); }
.btn--ghost:hover { border-color: var(--marque); color: var(--marque); }
.btn[disabled] { opacity: .7; cursor: progress; }
.link { font-weight: 600; color: var(--marque); }

/* ---------- En-tête et pied ---------- */

.site-header { background: var(--papier); border-top: 3px solid var(--marque); border-bottom: 1px solid var(--filet); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.site-header__logo { width: 9.5rem; height: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a:not(.btn) { display: inline-block; padding: .5rem 0; color: var(--texte); text-decoration: none; font-size: 1rem; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { color: var(--encre); border-bottom-color: var(--filet-fort); }
.site-nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--or); }
.site-nav .btn { min-height: 2.5rem; padding: .5rem 1rem; font-size: .9375rem; }
@media (max-width: 30rem) {
  .site-header__logo { width: 6.5rem; }
  .site-nav ul { gap: .25rem .7rem; flex-wrap: nowrap; }
  .site-nav a:not(.btn) { font-size: .9375rem; }
  .site-nav .btn { min-height: 2.5rem; padding: .4rem .65rem; font-size: .9375rem; white-space: nowrap; }
}

.site-footer { background: var(--papier); border-top: 1px solid var(--filet); padding: 2.5rem 0 2rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.site-footer__logo { width: 8.5rem; height: auto; margin-bottom: 1rem; }
.site-footer__small { font-size: .9375rem; color: var(--discret); margin: 0; }
.site-footer__small a { color: var(--discret); }
.site-footer__small a:hover { color: var(--encre); }
.site-footer__right { text-align: right; }
.site-footer__mention { flex-basis: 100%; font-size: .875rem; color: var(--discret); border-top: 1px solid var(--filet); padding-top: 1.25rem; margin: .5rem 0 0; }
.socials { display: flex; gap: .75rem; justify-content: flex-end; margin-top: .75rem; }
.socials a { width: 1.25rem; height: 1.25rem; color: var(--discret); }
.socials a:hover { color: var(--encre); }
.socials svg { width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 40rem) { .site-footer__right { text-align: left; } .socials { justify-content: flex-start; } }

/* ---------- Sections ---------- */

.section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.section + .section { border-top: 1px solid var(--filet); }
.section--papier { background: var(--papier); }
.entete { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.split { display: grid; gap: 2rem 4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Hero ---------- */

.hero { padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem); }
.hero__grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; } }
.hero .lead { margin: 1.5rem 0 2rem; }
.hero__actions { display: flex; align-items: center; gap: 1rem 1.75rem; flex-wrap: wrap; }

/* Deux feuilles posées : le point du client devant, la comparaison du cabinet derrière */
.feuilles { position: relative; margin: 0; }
.feuille { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.5rem; }
/* La lettre du client, puis la comparaison du cabinet posée sur son coin bas droit (coin vide de la lettre) */
.feuille--dessus { position: relative; width: 86%; padding-bottom: 4rem; }
.feuille--dessous { position: relative; z-index: 1; width: 74%; margin: -2.75rem 0 0 auto; padding: 1rem 1.25rem; font-size: .9375rem; }
.feuille__tete { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; color: var(--discret); padding-bottom: .9rem; border-bottom: 1px solid var(--filet); margin-bottom: 1rem; }
.feuille--dessous .feuille__tete { padding-bottom: .5rem; margin-bottom: .25rem; }
.monogramme { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px; background: var(--marque); color: #ffffff; font: 600 .875rem/1 var(--sans); letter-spacing: .02em; flex: none; }
.feuille__titre { font-family: var(--lecture); font-size: 1.375rem; line-height: 1.25; color: var(--encre); margin: 0 0 .75rem; }
.feuille__chiffre { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; padding: .9rem 0; margin: .75rem 0 1rem; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.feuille__chiffre strong { font-variant-numeric: tabular-nums; font-size: 2.125rem; font-weight: 600; color: var(--hausse); letter-spacing: -.01em; }
.feuille__chiffre span { font-size: .9375rem; color: var(--discret); }
.feuille__lecture { font-family: var(--lecture); font-size: 1rem; line-height: 1.6; color: var(--texte); }
.feuille__bouton { display: inline-block; margin-top: .25rem; background: var(--marque); color: #ffffff; border-radius: var(--rayon-petit); padding: .55rem 1rem; font-size: .9375rem; font-weight: 600; }
.feuille__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--filet); font-variant-numeric: tabular-nums; color: var(--texte); }
.feuille__ligne:first-of-type { border-top: 0; }
.feuille__ligne span:last-child { color: var(--encre); font-weight: 600; white-space: nowrap; }
.feuilles__legende { margin-top: 1rem; font-size: .9375rem; color: var(--discret); }
@media (max-width: 34rem) {
  .feuille--dessus { width: auto; padding-bottom: 1.5rem; }
  .feuille--dessous { width: auto; margin: .75rem 0 0; }
}

/* ---------- Badge « exemple » ---------- */

.exemple {
  display: inline-flex; align-items: center;
  font-size: .875rem; font-weight: 600; color: #664400;
  background: #f5ecd6; border-radius: 999px; padding: .2rem .75rem; white-space: nowrap;
}

/* ---------- Deux problèmes ---------- */

.problemes { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .problemes { grid-template-columns: 1fr 1fr; } }
.probleme { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.25rem, 1rem + 1vw, 2rem); display: flex; flex-direction: column; }
.probleme__numero { display: block; font-size: .9375rem; font-weight: 600; color: var(--discret); margin-bottom: .75rem; }
.probleme h3 { margin-bottom: .9rem; }
.probleme p { margin: 0 0 .75rem; }
.probleme__reponse { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--filet); }
.probleme__reponse a { font-weight: 600; text-decoration: none; }
.probleme__reponse a:hover { text-decoration: underline; }

/* ---------- Réponses : texte et maquette ---------- */

.reponse { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .reponse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
@media (min-width: 60rem) {
  .reponse--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .reponse--inverse > :first-child { order: 2; }
}
.parties { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: partie; }
.parties li { counter-increment: partie; display: grid; grid-template-columns: 2rem 1fr; gap: 0 .9rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.parties li::before { content: counter(partie); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--filet-fort); font-weight: 600; font-size: .9375rem; color: var(--encre); background: var(--papier); }
.parties strong { display: block; color: var(--encre); }
.parties--onglets li { grid-template-columns: 1fr; }
.parties--onglets li::before { content: none; }
.encadre { margin: 1.5rem 0 0; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-left: 3px solid var(--or); background: var(--papier); border-radius: 0 var(--rayon) var(--rayon) 0; font-family: var(--lecture); font-size: 1.125rem; line-height: 1.55; color: var(--encre); }
.mention { font-size: .9375rem; color: var(--discret); margin-top: 1rem; }

/* La maquette : une feuille, comme dans l'application */
.maquette { margin: 0; min-width: 0; }
.maquette__feuille { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.maquette__barre { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .9rem 1.25rem; border-bottom: 1px solid var(--filet); border-top: 3px solid var(--marque); }
.maquette__marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--encre); font-size: .9375rem; }
.maquette__corps { padding: 1.25rem; }
@media (min-width: 40rem) { .maquette__corps { padding: 1.5rem 1.75rem; } }
.maquette__titre { font-family: var(--lecture); font-size: 1.375rem; color: var(--encre); margin: 0 0 .25rem; }
.maquette__date { font-size: .9375rem; color: var(--discret); margin: 0 0 1.25rem; }
.maquette h4 { font-family: var(--lecture); font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: var(--encre); }
.maquette h4:first-of-type { margin-top: 0; }
.maquette__texte { font-family: var(--lecture); font-size: 1rem; line-height: 1.6; color: var(--texte); margin: 0 0 .5rem; }
.maquette__legende { margin-top: .75rem; font-size: .9375rem; color: var(--discret); }

/* Relevé : libellé à gauche, montant à droite */
.releve { margin: .25rem 0 .75rem; }
.releve__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--filet); }
.releve__ligne:first-child { border-top: 0; }
.releve__ligne > span:last-child { color: var(--encre); font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.releve__ligne--total > span:first-child { color: var(--encre); font-weight: 600; }
.releve__ligne--total > span:last-child { font-size: 1.375rem; }
.releve__ligne small { display: block; font-size: .875rem; color: var(--discret); font-weight: 400; }

.famille { font-size: .9375rem; font-weight: 600; color: var(--marque); margin: 1rem 0 .25rem; padding-bottom: .3rem; border-bottom: 1px solid var(--filet); }
.support { padding: .6rem 0; border-bottom: 1px solid var(--filet); }
.support:last-child { border-bottom: 0; }
.support__nom { display: block; font-weight: 600; color: var(--encre); }
.support__chiffres { display: block; font-size: .9375rem; color: var(--discret); font-variant-numeric: tabular-nums; }
.support__texte { display: block; font-family: var(--lecture); font-size: 1rem; color: var(--texte); margin-top: .2rem; }
.hausse { color: var(--hausse); font-weight: 600; }
.baisse { color: var(--baisse); font-weight: 600; }

/* Onglets de la comparaison (maquette, non interactifs) */
.onglets { display: flex; flex-wrap: wrap; gap: 0 .25rem; padding: .5rem 1rem 0; border-bottom: 1px solid var(--filet); }
.onglets span { padding: .5rem .7rem; font-size: .9375rem; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets span.actif { color: var(--encre); font-weight: 600; border-bottom-color: var(--marque); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.tableau th { text-align: left; font-weight: 600; color: var(--discret); padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--filet-fort); }
.tableau td { padding: .55rem .5rem .55rem 0; border-bottom: 1px solid var(--filet); color: var(--texte); }
.tableau .num { text-align: right; white-space: nowrap; }
.tableau td:first-child { white-space: nowrap; color: var(--encre); }
.tableau tr:last-child td { border-bottom: 0; }
@media (max-width: 34rem) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: .5rem 0; border-bottom: 1px solid var(--filet); }
  .tableau tr:last-child { border-bottom: 0; }
  .tableau td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border: 0; }
  .tableau td::before { content: attr(data-label); color: var(--discret); }
  .tableau td:first-child { font-weight: 600; color: var(--encre); }
  .tableau td:first-child::before { content: none; }
}
.classement { list-style: none; margin: .25rem 0 0; padding: 0; counter-reset: rang; }
.classement li { counter-increment: rang; display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid var(--filet); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.classement li:first-child { border-top: 0; }
.classement li::before { content: counter(rang); font-weight: 600; color: var(--discret); }
.classement li span:last-child { text-align: right; white-space: nowrap; }
.deux-classements { display: grid; gap: .5rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .deux-classements { grid-template-columns: 1fr 1fr; } }

/* ---------- Deux espaces ---------- */

.espaces { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .espaces { grid-template-columns: 1fr 1fr; } }
.espace { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.espace__texte { padding: 1.5rem 1.5rem .5rem; }
.espace__texte h3 { margin-bottom: .6rem; }
.espace__texte ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.espace__texte li { margin: .3rem 0; }
.ecran { margin: auto 1.5rem 1.5rem; border: 1px solid var(--filet); border-radius: var(--rayon-petit); background: var(--pierre); overflow: hidden; font-size: .9375rem; }
.ecran__barre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .9rem; background: var(--papier); border-bottom: 1px solid var(--filet); }
.ecran__barre--marque { border-top: 3px solid var(--marque); }
.ecran__corps { display: grid; grid-template-columns: 10.5rem 1fr; min-height: 11rem; }
.ecran__menu { list-style: none; margin: 0; padding: .6rem; background: var(--papier); border-right: 1px solid var(--filet); }
.ecran__menu li { padding: .35rem .5rem; border-radius: 6px; color: var(--texte); }
.ecran__menu li.actif { background: var(--marque-voile); color: var(--marque); font-weight: 600; }
.ecran__zone { padding: .75rem .9rem; min-width: 0; }
.ecran__zone p { margin: 0 0 .5rem; color: var(--encre); font-weight: 600; }
.ecran__tache { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: var(--papier); border: 1px solid var(--filet); border-radius: 6px; padding: .5rem .65rem; margin-bottom: .5rem; }
.ecran__tache span:last-child { color: var(--marque); font-weight: 600; white-space: nowrap; }
.ecran__client { padding: .9rem; }
.ecran__client .releve { background: var(--papier); border: 1px solid var(--filet); border-radius: 6px; padding: .25rem .75rem; margin: 0; }
.ecran__question { display: inline-block; margin-top: .75rem; background: var(--marque); color: #ffffff; border-radius: 999px; padding: .4rem .9rem; font-weight: 600; }
@media (max-width: 30rem) {
  .ecran { margin: auto 1rem 1rem; }
  .ecran__corps { grid-template-columns: 1fr; }
  .ecran__menu { display: flex; flex-wrap: wrap; gap: .25rem; border-right: 0; border-bottom: 1px solid var(--filet); }
}

/* ---------- Leviers, gains ---------- */

.colonnes-deux { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .colonnes-deux { grid-template-columns: 1fr 1fr; } }
.carte { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.carte h3 { margin-bottom: .75rem; }
.carte p:last-child { margin-bottom: 0; }
.bulles { margin-top: 1rem; display: grid; gap: .5rem; }
.bulle { max-width: 90%; padding: .6rem .85rem; border-radius: 12px; font-size: .9375rem; line-height: 1.5; }
.bulle--client { justify-self: end; background: var(--marque-voile); color: var(--encre); }
.bulle--reponse { justify-self: start; background: var(--pierre); border: 1px solid var(--filet); color: var(--texte); font-family: var(--lecture); font-size: 1rem; }
.message-cabinet { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--filet); border-radius: var(--rayon-petit); background: var(--pierre); }
.message-cabinet small { display: block; font-size: .875rem; font-weight: 600; color: var(--discret); margin-bottom: .25rem; }
.message-cabinet p { margin: 0; font-family: var(--lecture); color: var(--encre); }

.gains { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--filet-fort); }
.gain { padding: 1.75rem 0 .5rem; }
@media (min-width: 52rem) {
  .gains { grid-template-columns: 1fr 1fr; }
  .gain { padding-right: 2.5rem; }
  .gain + .gain { border-left: 1px solid var(--filet); padding-left: 2.5rem; }
}
.gain h3 { font-family: var(--lecture); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.25; margin-bottom: .9rem; }
.gain p { max-width: 46ch; }

/* ---------- Né à l'intérieur des cabinets ---------- */

.recit p { font-family: var(--lecture); font-size: 1.125rem; line-height: 1.65; color: var(--texte); max-width: 60ch; }
.recit .citation { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--or); font-family: var(--lecture); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--encre); max-width: 52ch; }

/* ---------- Services : définitions, onglets ---------- */

.defs { margin: 0; display: grid; border-top: 1px solid var(--filet-fort); }
.defs__row { display: grid; grid-template-columns: 1fr; gap: .25rem 2.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 48rem) { .defs__row { grid-template-columns: 16rem 1fr; } }
.defs dt { font-weight: 600; color: var(--encre); }
.defs dd { margin: 0; max-width: 62ch; }
.onglets-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .onglets-liste { grid-template-columns: 1fr 1fr; } }
.onglets-liste li { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.5rem; }
.onglets-liste h3 { font-family: var(--lecture); font-size: 1.25rem; margin-bottom: .5rem; }
.onglets-liste p { margin: 0; }
.checklist { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.checklist li { padding: .65rem 0 .65rem 1.75rem; border-top: 1px solid var(--filet); position: relative; }
.checklist li::before { content: ""; position: absolute; left: .25rem; top: 1.15rem; width: .6rem; height: .35rem; border-left: 2px solid var(--marque); border-bottom: 2px solid var(--marque); transform: rotate(-45deg); }

/* ---------- Contact (le formulaire ne change pas) ---------- */

.contact__intro p { max-width: 38ch; }
.form { display: grid; gap: 1.25rem; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 36rem) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .9375rem; font-weight: 600; color: var(--encre); }
.field .opt { font-weight: 400; color: var(--discret); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.875rem; padding: .6rem .8rem;
  font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit);
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--discret) 50%), linear-gradient(135deg, var(--discret) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--marque); outline-offset: 1px; border-color: var(--marque); }
.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__status { font-size: .9375rem; margin: 0; }
.form__status--ok { color: var(--hausse); }
.form__status--err { color: var(--baisse); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Page de texte (confidentialité) ---------- */

.legal { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(1.25rem, 1rem + 2vw, 3rem); max-width: 52rem; }
.legal h1 { margin-bottom: .5rem; }
.legal .updated { color: var(--discret); font-size: .9375rem; }
.legal h2 { font-family: var(--lecture); font-size: 1.375rem; margin: 2.25rem 0 .75rem; }
.legal h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--filet); border-radius: var(--rayon-petit); margin: 1rem 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 30rem; }
.legal th, .legal td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--filet); }
.legal th { color: var(--discret); font-weight: 600; background: var(--pierre); }
.legal tr:last-child td { border-bottom: 0; }