/* Habillage « editorial minimalism » : fond blanc cassé, vert profond, serif, aucun dégradé ni verre.
   Chargé après glass.css : il ne redéfinit que les jetons (clair et sombre), la barre du haut, l'accueil et la courbe.
   Les thèmes noir et blanc (« nb », « nbc ») ne sont pas touchés. */

/* ---------- Jetons ---------- */
:root {
  --editorial: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bar-h: clamp(50px, 3.9vw, 66px);
}
:root:not([data-theme="dark"]):not([data-theme="nb"]):not([data-theme="nbc"]) {
  --papier: #FAF9F6;
  --surface: #FFFFFF;
  --surface2: #F0EEEB;
  --encre: #242424;
  --ardoise: #67655F;
  --filet: #E4E1DD;
  --contour: #8E8B85;
  --accent: #075B3D;
  --accent-doux: #DCE8DF;
  --sur-accent: #FFFFFF;
  --rose-txt: #075B3D;
  --ciel: #075B3D;
  --rose: #2F7D5C;
  --blanc: #FFFFFF;
  --verre: #F0EEEB;
  --verre-fort: #FFFFFF;
  --verre-bord: #E4E1DD;
  --verre-ombre: 0 10px 30px -18px rgba(36, 36, 36, 0.28);
  --flou: 0px;
  --lueur-a: transparent; --lueur-b: transparent; --lueur-c: transparent; --voile: transparent;
}
:root[data-theme="dark"] {
  --papier: #151715;
  --surface: #1C1F1C;
  --surface2: #242824;
  --encre: #F2F0EB;
  --ardoise: #A8AAA5;
  --filet: #363B36;
  --contour: #6C736C;
  --accent: #77B998;
  --accent-doux: #28382F;
  --sur-accent: #0F1A14;
  --rose-txt: #77B998;
  --ciel: #77B998;
  --rose: #5E9F7E;
  --blanc: #F2F0EB;
  --verre: #242824;
  --verre-fort: #2C312C;
  --verre-bord: #363B36;
  --verre-ombre: 0 12px 34px -18px rgba(0, 0, 0, 0.8);
  --flou: 0px;
  --lueur-a: transparent; --lueur-b: transparent; --lueur-c: transparent; --voile: transparent;
}

/* ---------- Fond uni ---------- */
html { background: var(--papier); }
body::before, body.fond-photo::after { display: none; }
body { background: var(--papier); }

/* Changement de thème : tout bascule d'un coup (aucune transition en cours), pour éviter le scintillement. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; animation-duration: 0s !important; }

/* ---------- Barre du haut : logo, navigation centrée, thème et réglages ---------- */
#bar { padding-top: clamp(14px, 2vw, 26px); }
.bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 20px;
  margin: 0 clamp(16px, 4.8vw, 96px); padding: 0 0 clamp(14px, 1.8vw, 28px); border-bottom: 1px solid var(--filet);
}
.wordmark { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 0; color: var(--encre); font: 500 clamp(20px, 1.9vw, 31px) / 1 var(--editorial); letter-spacing: -0.02em; }
.logo { width: clamp(30px, 2.8vw, 46px); height: auto; color: var(--accent); flex: none; }
.bar nav {
  justify-self: center; padding: 6px; gap: 2px; border-radius: 999px; background: var(--verre); border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
}
.bar nav .nav-lien, .bar nav .nav-btn, .nav-item--coin .nav-btn {
  min-height: calc(var(--bar-h) - 12px); padding: 0 clamp(14px, 1.9vw, 32px); gap: 8px;
  font: 400 clamp(15px, 1.3vw, 21px) / 1 var(--editorial); color: var(--ardoise);
}
.bar nav .nav-lien:hover, .bar nav .nav-btn:hover, .bar nav .nav-btn[aria-expanded="true"],
.nav-item--coin .nav-btn:hover, .nav-item--coin .nav-btn[aria-expanded="true"] { color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, transparent); }
.bar nav .nav-btn[aria-current="page"], .nav-item--coin .nav-btn[aria-current="page"] { color: var(--encre); background: var(--verre-fort); box-shadow: none; }
.bar-droite { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav-item--coin { padding: 6px; background: var(--verre); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-item--coin .nav-btn { padding: 0 clamp(14px, 1.7vw, 28px) 0 clamp(12px, 1.4vw, 22px); }
.nav-ico { width: 1.15em; height: 1.15em; stroke-width: 1.4; }
.theme-btn {
  display: grid; place-items: center; width: var(--bar-h); height: var(--bar-h); padding: 0; border: 0; border-radius: 999px;
  background: var(--verre); color: var(--ardoise); cursor: pointer; transition: color var(--rapide), background-color var(--rapide);
}
.theme-btn:hover, .theme-btn:focus-visible { color: var(--encre); background: color-mix(in srgb, var(--encre) 8%, var(--verre)); }
.theme-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .ico-soleil, :root[data-theme="dark"] .theme-btn .ico-lune, :root[data-theme="nb"] .theme-btn .ico-lune { display: none; }
:root[data-theme="dark"] .theme-btn .ico-soleil, :root[data-theme="nb"] .theme-btn .ico-soleil { display: block; }
.theme-btn:focus-visible, .bar nav .nav-btn:focus-visible, .nav-item--coin .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-pop { background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--verre-ombre); backdrop-filter: none; -webkit-backdrop-filter: none; top: calc(100% + 12px); }
.bar .menu-pop a { font: 400 17px / 1 var(--editorial); color: var(--encre); }
.bar .menu-pop a:hover, .bar .menu-pop a:focus-visible { background: var(--accent-doux, color-mix(in srgb, var(--accent) 14%, transparent)); }
.menu-titre, .menu-compte { font-family: var(--editorial); }
@media (max-width: 760px) {
  :root { --bar-h: 46px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar nav { grid-column: 1 / -1; grid-row: 2; order: 0; width: auto; justify-self: stretch; justify-content: space-around; }
  .bar-droite { grid-column: 2; grid-row: 1; }
  .nav-item--coin { margin-left: 0; }
}


/* ---------- Accueil : statistiques centrées, titre en bas à gauche, courbe à droite ---------- */
body.fond-photo .page--accueil { padding: 0 clamp(16px, 4.8vw, 96px) clamp(16px, 5vh, 64px); }
body.fond-photo .accueil { display: flex; flex-direction: column; gap: 0; }
.stats-accueil { flex: none; display: flex; flex-direction: column; align-items: center; margin-top: clamp(14px, 6vh, 72px); }
.stats-accueil .chiffres { justify-content: center; }
.stats-accueil .chiffres > div { align-items: center; gap: clamp(4px, 0.5vw, 10px); padding: 0 clamp(16px, 3.4vw, 64px); border-left: 1px solid var(--filet); }
.stats-accueil .chiffres > div:first-child { padding-left: 0; border-left: 0; }
.stats-accueil .chiffres dd { margin: 0; font: 400 clamp(38px, 5vw, 88px) / 1 var(--editorial); letter-spacing: -0.02em; color: var(--encre); }
.stats-accueil .chiffres dd sup { font-size: 0.42em; vertical-align: super; line-height: 0; }
.stats-accueil .chiffres dd small { font: 400 0.27em / 1 var(--editorial); letter-spacing: 0; color: var(--accent); margin-left: 0.25em; }
.stats-accueil .chiffres dt { font: 400 clamp(13px, 1.35vw, 22px) / 1.1 var(--editorial); color: var(--ardoise); }
.stats-accueil .etat { margin: 12px 0 0; font: 400 13px / 1.2 var(--sans); color: var(--ardoise); }

.accueil-bas { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.accueil-bas .hero { grid-column: 1 / 9; grid-row: 1; align-self: end; position: relative; z-index: 1; max-width: none; margin: 0 0 clamp(22px, 3.6vw, 64px); container-type: normal; pointer-events: none; }
.accueil-bas .hero h1 { margin: 0; max-width: none; font: 500 clamp(44px, 9vw, 190px) / 0.94 var(--editorial); letter-spacing: -0.035em; color: var(--encre); text-wrap: nowrap; overflow-wrap: normal; }
.courbe-accueil { grid-column: 6 / 13; grid-row: 1; align-self: end; position: relative; z-index: 0; min-width: 0; }
.courbe-accueil .courbe { max-width: none; width: 100%; margin: 0; background: none; border-radius: 0; }
@media (max-width: 900px) {
  .accueil-bas { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
  .accueil-bas .hero { margin: 0; }
  .accueil-bas .hero h1 { font-size: clamp(44px, 14vw, 96px); }
  .courbe-accueil { width: 100%; }
  .stats-accueil .chiffres dd { font-size: clamp(32px, 9vw, 52px); }
}

/* ---------- Courbe : trait vert fin, aire à peine visible, pastille douce ---------- */
:root:not([data-theme="nb"]):not([data-theme="nbc"]) .courbe {
  --crb-1: var(--accent); --crb-2: var(--accent); --crb-3: var(--accent);
  --crb-off: color-mix(in srgb, var(--ardoise) 24%, transparent);
  --crb-q1: var(--accent); --crb-q2: var(--accent); --crb-q3: var(--accent); --crb-q4: var(--accent);
  --crb-aire: var(--accent); --crb-pt: var(--papier); --crb-scrim: transparent;
}
:root:not([data-theme="nb"]):not([data-theme="nbc"]) .crb-a1 { stop-opacity: 0.16; }
:root:not([data-theme="nb"]):not([data-theme="nbc"]) .crb-a2 { stop-opacity: 0.05; }
.crb-trait { stroke-width: 1.6; }
.crb-base { stroke: var(--ardoise); stroke-width: 0.6; opacity: 0.45; }
.crb-guide { stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 2.5 2.5; opacity: 0.9; }
.crb-bande, .crb-halo, .crb-anneau-fin { display: none; }
.crb-seg { stroke-width: 5; }
.crb-point { fill: var(--papier); stroke: var(--accent); stroke-width: 1.8; }
.crb-pill { fill: var(--accent-doux, var(--surface2)); rx: 12px; }
.crb-pillt { fill: var(--encre); font: 400 16px / 1 var(--editorial); }
.crb-q { font: 400 26px / 1 var(--editorial); }
.crb-axe { font: 400 12.5px / 1 var(--editorial); fill: var(--ardoise); }
.courbe { cursor: ew-resize; }
.courbe:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Statistiques plus grandes, même position. */
.stats-accueil .chiffres > div { padding: 0 clamp(20px, 5vw, 96px); gap: clamp(6px, 0.8vw, 14px); }
.stats-accueil .chiffres dd { font-size: clamp(52px, 8.2vw, 150px); }
.stats-accueil .chiffres dt { font-size: clamp(15px, 2vw, 34px); }
@media (max-width: 900px) { .stats-accueil .chiffres dd { font-size: clamp(40px, 12vw, 72px); } .stats-accueil .chiffres > div { padding: 0 clamp(12px, 4vw, 32px); } }

/* Statistiques : un peu plus petites, un peu plus bas. */
.stats-accueil { margin-top: clamp(28px, 11vh, 130px); }
.stats-accueil .chiffres dd { font-size: clamp(46px, 6.6vw, 120px); }
.stats-accueil .chiffres dt { font-size: clamp(14px, 1.7vw, 28px); }
.stats-accueil .chiffres > div { padding: 0 clamp(18px, 4.2vw, 80px); }
@media (max-width: 900px) { .stats-accueil { margin-top: clamp(20px, 7vh, 56px); } .stats-accueil .chiffres dd { font-size: clamp(36px, 10.5vw, 60px); } }

/* Titre de l'accueil : un peu plus haut. */
.accueil-bas .hero { margin-bottom: clamp(30px, 5vw, 88px); }
@media (max-width: 900px) { .accueil-bas .hero { margin-bottom: 0; } }

/* Menus ouverts au survol / au focus clavier */
.nav-item:hover > .menu-pop, .nav-item:has(:focus-visible) > .menu-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-item:hover > .nav-btn .nav-chev { transform: rotate(180deg); }
.menu-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }

/* Réglages : simple engrenage rond, comme le bouton de thème */
.nav-item--coin { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 999px; }
.nav-item--coin .nav-btn { display: grid; place-items: center; width: var(--bar-h); height: var(--bar-h); min-height: 0; padding: 0; border-radius: 999px; background: var(--verre); }
.nav-item--coin .nav-btn:hover, .nav-item--coin .nav-btn:focus-visible, .nav-item--coin .nav-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--encre) 8%, var(--verre)); }
.nav-item--coin .nav-btn[aria-current="page"] { background: var(--verre-fort); }
.nav-item--coin .nav-ico { width: 22px; height: 22px; stroke-width: 1.4; }
.nav-ico { transition: transform .35s ease; }
.nav-item--coin:hover .nav-ico { transform: rotate(45deg); }

.sous-titre { font: 600 var(--t15, 15px) / 1.4 var(--sans); margin: 20px 0 4px; }
.stats-hote .multiples { margin-top: 16px; }

/* Bouton clair / sombre : même petite rotation au survol que l'engrenage des Réglages. */
.theme-btn svg { transition: transform .35s ease; }
.theme-btn:hover svg, .theme-btn:focus-visible svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .theme-btn svg { transition: none; } .theme-btn:hover svg, .theme-btn:focus-visible svg { transform: none; } }

/* Réglages : l'icône garde le même ton que les titres de la barre et le bouton d'éclairage (page active comprise).
   La page active se repère au fond, pas à la couleur. Au survol : même passage à l'encre que les autres. */
.nav-item--coin .nav-btn[aria-current="page"] { color: var(--ardoise); }
.nav-item--coin .nav-btn[aria-current="page"]:hover, .nav-item--coin .nav-btn[aria-current="page"]:focus-visible,
.nav-item--coin .nav-btn[aria-current="page"][aria-expanded="true"] { color: var(--encre); }

/* ---------- États pressés (:active) : fond un peu plus sombre, sans animation ----------
   Boutons (toutes les variantes), éléments de navigation, bouton de thème, entrées de menu et puces (segments).
   Les jetons suivent le thème : clair et noir et blanc clair assombrissent vers l'encre, sombre et noir et blanc sombre vers le papier. */
:root { --presse: color-mix(in srgb, var(--encre) 10%, var(--surface2)); --presse-accent: color-mix(in srgb, var(--accent) 76%, var(--encre)); }
:root[data-theme="dark"], :root[data-theme="nb"] { --presse: color-mix(in srgb, var(--papier) 55%, var(--surface)); --presse-accent: color-mix(in srgb, var(--accent) 78%, var(--papier)); }
.btn--primaire:active:not(:disabled) { background-color: var(--presse-accent); background-image: none; box-shadow: none; }
.btn--secondaire:active:not(:disabled), .btn--texte:active:not(:disabled), .seg__b:active, .onglet:active { background: var(--presse); }
.btn--texte:active:not(:disabled) { text-decoration: underline; text-underline-offset: 0.2em; }
.bar nav .nav-lien:active, .bar nav .nav-btn:active, .nav-item--coin .nav-btn:active, .theme-btn:active { color: var(--encre); background: var(--presse); }
.bar .menu-pop a:active { background: var(--presse); }
.btn:active:not(:disabled), .seg__b:active, .onglet:active, .bar nav .nav-lien:active, .bar nav .nav-btn:active, .nav-item--coin .nav-btn:active, .theme-btn:active, .bar .menu-pop a:active { transition-duration: 0s; }

/* ---------- Zones de toucher : 40 px au moins (barre du haut, logo, liens-boutons, liens seuls sur leur ligne) ---------- */
.bar nav .nav-lien, .bar nav .nav-btn { min-height: max(40px, calc(var(--bar-h) - 12px)); }
.wordmark { min-height: 40px; }
button.lien { display: inline-flex; align-items: center; min-height: 40px; }
p.intro > a:only-child { display: inline-flex; align-items: center; min-height: 40px; }
.wd .chk { min-height: 40px; }
.reglage label:not(:has(.aide)) { display: flex; align-items: center; min-height: 40px; }