/**
 * Charte commune Max'Sens Conseil « Veilleuse / Aube » — version 1.0 (01/10/2026).
 * Source unique : dépôt SiteMSC (www = site de référence), fichier static/charte/msc-charte.css,
 * publié tel quel sur https://www.max-sens-conseil.fr/charte/msc-charte.css.
 * Les autres sites (apps, coach, music) en COPIENT une version datée dans leur dépôt (pas de
 * chargement à distance : CSP stricte, pas de dépendance réseau) et posent data-site sur <html>.
 * Contenu : polices auto-hébergées, jetons de couleur des deux thèmes, signature par sous-domaine,
 * composants communs (titres, surtitre, boutons 44 px, champs, en-tête, bandeau d'horizon,
 * cartes en filets, ligne du temps, pied de page). Tout le reste est propre à chaque site.
 * Polices attendues sous /fonts/ (alegreya-*, alegreya-sans-* en woff2).
 */

@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/alegreya-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/alegreya-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2"); }

/* Charte commune Max'Sens Conseil « Veilleuse / Aube » — www est le site de référence.
   Aube (clair) par défaut ; Veilleuse (nuit) quand l'appareil est en sombre ou sur choix.
   Signature de www : bleu lune (--sig). Les autres sous-domaines ne changent que --sig,
   la baseline et le motif d'horizon. */
:root {
  --navy: #0f1a33; --navy-dark: #0f1a33; --navy-mid: #3550c8;
  --amber: #d99a4e; --amber-dark: #c98a3e; --amber-ink: #8f5716;
  --bg: #f6f7fb; --paper: #eef1f7; --card: #ffffff; --amber-tint: #faf0e3;
  --ink: #0f1a33; --text: #1f2a44; --muted: #4a5570; --faint: #657089;
  --border: #dde2ec; --border-strong: #c3cad8;
  --sig: #3550c8; --sig-soft: rgba(53, 80, 200, .10); --star: 0;
  --radius: 6px; --ctl: 44px; --maxw: 1080px;
  --font-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Alegreya", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #eef0f6; --navy-dark: #0b1325; --navy-mid: #a9bcff;
    --amber: #e3a75b; --amber-dark: #d39747; --amber-ink: #e3a75b;
    --bg: #0b1325; --paper: #0e172c; --card: #111b33; --amber-tint: #241f1c;
    --ink: #0b1325; --text: #dfe3ee; --muted: #aab3ca; --faint: #8a94b0;
    --border: #1f2b47; --border-strong: #34425f;
    --sig: #a9bcff; --sig-soft: rgba(169, 188, 255, .10); --star: 1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #eef0f6; --navy-dark: #0b1325; --navy-mid: #a9bcff;
  --amber: #e3a75b; --amber-dark: #d39747; --amber-ink: #e3a75b;
  --bg: #0b1325; --paper: #0e172c; --card: #111b33; --amber-tint: #241f1c;
  --ink: #0b1325; --text: #dfe3ee; --muted: #aab3ca; --faint: #8a94b0;
  --border: #1f2b47; --border-strong: #34425f;
  --sig: #a9bcff; --sig-soft: rgba(169, 188, 255, .10); --star: 1;
  color-scheme: dark;
}

/* Déclinaison par sous-domaine : seule la signature change (posée par data-site sur <html>).
   www (référence) = bleu lune, valeur par défaut ci-dessus. */
:root[data-site="coach"] { --sig: #8f5716; --sig-soft: rgba(217, 154, 78, .14); }
:root[data-site="apps"]  { --sig: #1c7a66; --sig-soft: rgba(28, 122, 102, .10); }
:root[data-site="music"] { --sig: #b04466; --sig-soft: rgba(196, 87, 122, .10); }
@media (prefers-color-scheme: dark) {
  :root[data-site="coach"]:not([data-theme="light"]) { --sig: #e3a75b; --sig-soft: rgba(227, 167, 91, .14); }
  :root[data-site="apps"]:not([data-theme="light"])  { --sig: #86d3ae; --sig-soft: rgba(134, 211, 174, .10); }
  :root[data-site="music"]:not([data-theme="light"]) { --sig: #f0a3bb; --sig-soft: rgba(240, 163, 187, .10); }
}
:root[data-site="coach"][data-theme="dark"] { --sig: #e3a75b; --sig-soft: rgba(227, 167, 91, .14); }
:root[data-site="apps"][data-theme="dark"]  { --sig: #86d3ae; --sig-soft: rgba(134, 211, 174, .10); }
:root[data-site="music"][data-theme="dark"] { --sig: #f0a3bb; --sig-soft: rgba(240, 163, 187, .10); }

/* ————— Charte Veilleuse / Aube : composants ————— */
body { font-size: 1.1rem; line-height: 1.62; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.005em; }
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.lead { font-size: 1.22rem; }
/* Surtitre : italique, couleur de signature, sans capitales ni trait */
.kicker { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: .01em; text-transform: none; color: var(--amber-ink); }
.kicker::before { display: none; }
/* Contrôles : une seule hauteur, angles de 6 px */
.btn { min-height: var(--ctl); padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-weight: 700; line-height: 1; position: relative; overflow: hidden; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-outline { border-color: var(--border-strong); }
.btn-outline:hover { background: transparent; color: var(--navy); border-color: var(--amber); }
.theme-toggle, .burger { width: var(--ctl); height: var(--ctl); border-radius: var(--radius); background: transparent; border-color: var(--border-strong); }
.main-nav a { position: relative; border-radius: var(--radius); font-weight: 500; font-size: 1rem; min-height: var(--ctl); display: inline-flex; align-items: center; }
.main-nav a:hover { background: transparent; color: var(--navy); }
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { background: transparent; color: var(--navy); }
.field input, .field textarea, .field select { min-height: var(--ctl); border-radius: var(--radius); border-color: var(--border-strong); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sig); box-shadow: 0 0 0 3px var(--sig-soft); }
:focus-visible { outline-color: var(--sig); }
/* En-tête : nom + baseline en italique, filet de signature */
.site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 -2px 0 var(--sig); border-bottom: 0; }
.brand img { background: #fff; border-radius: 50%; padding: 1px; }
.brand-name { font-weight: 600; font-size: 1.2rem; }
.brand-tag { font-family: var(--font-display); font-style: italic; font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--sig); }
/* Accueil : bandeau de la nuit vers l'aube, horizon et lueur qui se lève */
.hero { background: linear-gradient(180deg, var(--paper), var(--bg) 78%); border-bottom: 0; padding: 88px 0 120px; }
.hero::before {
  background: radial-gradient(1.5px 1.5px at 12% 22%, var(--navy) 50%, transparent 51%), radial-gradient(1px 1px at 28% 64%, var(--navy) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 14%, var(--navy) 50%, transparent 51%), radial-gradient(1px 1px at 63% 38%, var(--navy) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 18%, var(--navy) 50%, transparent 51%), radial-gradient(1px 1px at 88% 52%, var(--navy) 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 34%, var(--navy) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 94% 30%, var(--navy) 50%, transparent 51%);
  opacity: calc(var(--star) * .45); animation: msc-twinkle 7s ease-in-out infinite;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: radial-gradient(60% 100% at 72% 100%, color-mix(in srgb, var(--amber) 42%, transparent), transparent 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 60%, transparent);
  transform-origin: 72% 100%; animation: msc-rise 2.4s var(--ease) both;
}
@keyframes msc-rise { from { transform: translateY(30px) scaleY(.6); opacity: .35; } }
@keyframes msc-twinkle { 50% { opacity: calc(var(--star) * .2); } }
.hero h1 { max-width: 18ch; }
.hero-meta { gap: 10px 32px; font-size: 1rem; }
.hero-meta strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.hero-video video { border-radius: var(--radius); box-shadow: none; }
/* Cartes : des filets plutôt que des ombres */
.card { border-radius: var(--radius); box-shadow: none; background: var(--card); }
.card-link:hover { border-color: var(--amber); background: linear-gradient(160deg, var(--amber-tint), var(--card) 55%); }
.univers-card:hover { transform: none; box-shadow: none; }
.univers-card::before { height: 2px; background: var(--amber); }
.u-icon { border-radius: var(--radius); background: transparent; border: 1px solid var(--border-strong); color: var(--navy); }
.univers-card:hover .u-icon { border-color: var(--amber); color: var(--amber-ink); }
.u-badge { border-radius: var(--radius); }
.section-paper { background: var(--paper); border-color: var(--border); }
/* Méthode : une ligne du temps qui va du gris vers l'ambre */
.steps { position: relative; gap: 22px; padding-left: 4px; }
.steps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--border-strong), var(--amber)); }
.steps li::before { position: relative; z-index: 1; background: var(--bg); border: 1.5px solid var(--border-strong); color: var(--navy); font-family: var(--font-display); font-size: 1.05rem; }
.section-paper .steps li::before { background: var(--paper); }
.steps li:last-child::before { background: var(--amber); border-color: var(--amber); color: var(--navy-dark); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 20%, transparent); }
/* Témoignages, étiquettes, encadrés */
.quote { border-radius: var(--radius); border-left-width: 2px; }
.quote blockquote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; }
.tag, .theme-cloud-links a { border-radius: var(--radius); }
.theme-cloud-links a[aria-current="page"] { color: var(--navy-dark); }
.post-date { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-style: italic; font-size: .95rem; font-weight: 400; }
.post-thumb, .article-cover img, .prose img { border-radius: var(--radius); }
.form-card { border-radius: var(--radius); }
.orthesia-callout { border-radius: 0 var(--radius) var(--radius) 0; }
.orthesia-links a { border-radius: var(--radius); }
/* Pied de page : nuit dans les deux thèmes */
.footer { background: #0b1325; color: #cfd5e4; box-shadow: inset 0 2px 0 var(--sig); }
.footer h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
  .btn-primary::after { display: none; }
  .main-nav a::after { transition: none; }
}