/* Foliocast · thème du site. Le clair est le thème par défaut ; le sombre d'origine revient quand
   <html data-theme="sombre"> (bouton soleil/lune, choix gardé dans le navigateur, voir theme-init.js et theme.js).
   Chargée après les autres feuilles : chaque règle du clair est préfixée par html:not([data-theme="sombre"])
   pour passer devant elles, styles en ligne des pages compris. */

/* ---------- jetons du thème clair ---------- */
html:not([data-theme="sombre"]) {
  --ink: #f5f0e6;        /* fond : papier */
  --ink-2: #fcfaf5;      /* surfaces */
  --ink-3: #ebe4d5;      /* surfaces hautes, bandeaux */
  --line: #d6ccb8;       /* filets */
  --line-2: rgba(12, 12, 11, .28);
  --cream: #0c0c0b;      /* texte : encre */
  --cream-2: #36332e;
  --cream-dim: #655e52;
  --accent-ink: #0c0c0b;
  --accent-soft: #9c4718;   /* orange en petit texte (5,6:1 sur papier) */
  --accent-big: #c8601f;    /* orange des grands titres et pictos (3,6:1 sur papier) */
  --info: #2c5a91;
  --error: #a83a25;
  --success: #2a6b44;
  --field-line: rgba(12, 12, 11, .45);
  --fm-shadow-1: 0 1px 2px rgba(12, 12, 11, .08), 0 10px 24px -12px rgba(12, 12, 11, .18);
  --fm-shadow-2: 0 2px 4px rgba(12, 12, 11, .08), 0 18px 36px -16px rgba(12, 12, 11, .22), 0 44px 80px -40px rgba(12, 12, 11, .28);
  color-scheme: light;
}

/* écrans, téléphones et illustrations de Reel : ils restent sombres, comme de vrais écrans */
html:not([data-theme="sombre"]) :is(.phone, .rl-screen, .fc-ex-reel, .fc-ex-grid li span, .foot) {
  --ink: #0c0c0b; --ink-2: #151413; --ink-3: #1d1b19; --line: #2d2b27;
  --line-2: rgba(237, 230, 214, .22);
  --cream: #ede6d6; --cream-2: #d2cbbb; --cream-dim: #aca596;
  --accent-soft: #f0a274; --accent-big: #e07a3f;
  --field-line: rgba(237, 230, 214, .45);
  color-scheme: dark;
}

/* ---------- orange en texte ---------- */
html:not([data-theme="sombre"]) h1 em,
html:not([data-theme="sombre"]) .manifesto-copy p.manifesto-sig,
html:not([data-theme="sombre"]) .foot-sig span { color: var(--accent-big); }
html:not([data-theme="sombre"]) .feat svg { stroke: var(--accent-big); }
html:not([data-theme="sombre"]) :is(.steps .n, .offer a, .tier-more, .any-card .any-online a, .faq-more a) { color: var(--accent-soft); }
html:not([data-theme="sombre"]) .faq summary::after { color: var(--accent-soft); }

/* ---------- en-tête ---------- */
html:not([data-theme="sombre"]) .top.fm-sc { box-shadow: 0 10px 24px -18px rgba(12, 12, 11, .35); }
html:not([data-theme="sombre"]) .top .logo-sombre { display: none; }
html[data-theme="sombre"] .top .logo-clair { display: none; }

/* ---------- héros de l'accueil : fond animé et cartes flottantes ---------- */
html:not([data-theme="sombre"]) .fm-glow.a { background: radial-gradient(closest-side, rgba(224, 122, 63, .12), rgba(224, 122, 63, .04) 55%, transparent); }
html:not([data-theme="sombre"]) .fm-shape.s1 i { border-color: rgba(12, 12, 11, .16); }
html:not([data-theme="sombre"]) .fm-shape.s2 i { border-color: rgba(12, 12, 11, .12); }
html:not([data-theme="sombre"]) .browser { box-shadow: var(--fm-shadow-2); }
html:not([data-theme="sombre"]) .browser-bar i { background: #d6ccb8; }
html:not([data-theme="sombre"]) .fm-card {
  background: rgba(252, 250, 245, .94); border-color: #d6ccb8;
  box-shadow: 0 2px 4px rgba(12, 12, 11, .06), 0 16px 30px -14px rgba(12, 12, 11, .28);
}
html:not([data-theme="sombre"]) .rl-badge { color: #ede6d6; }
html:not([data-theme="sombre"]) .rl-zoom { color: #0c0c0b; }
html:not([data-theme="sombre"]) .reel-row img { border-color: #0c0c0b; }
html:not([data-theme="sombre"]) .reel-row figcaption b { background: #0c0c0b; color: #f0a274; }

/* ---------- tarifs ---------- */
html:not([data-theme="sombre"]) .pricing { background: var(--ink-3); }
html:not([data-theme="sombre"]) .tier { box-shadow: 0 1px 2px rgba(12, 12, 11, .05), 0 16px 32px -24px rgba(12, 12, 11, .25); }
html:not([data-theme="sombre"]) .tier.hl { background: #fdf3e9; box-shadow: 0 20px 48px -30px rgba(224, 122, 63, .55); }
html:not([data-theme="sombre"]) .billing button[aria-checked="true"] span { color: #f0a274; }

/* ---------- page agences : maquette de « Mes espaces » et calculateur ---------- */
html:not([data-theme="sombre"]) .ag-mock .st-wait { color: #0c0c0b; }
html:not([data-theme="sombre"]) :is(.tp-hint a, .tp-out a) { color: var(--accent-soft); }

/* ---------- pages métiers : grille d'exemple ---------- */
html:not([data-theme="sombre"]) .fc-ex-grid li { box-shadow: inset 0 0 0 1px rgba(12, 12, 11, .08); }

/* ---------- pied de page : il reste à l'encre dans les deux thèmes ---------- */
html:not([data-theme="sombre"]) .foot { background: var(--ink); color: var(--cream); border-top: 0; }

/* ---------- bouton soleil/lune ---------- */
.theme-btn {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--cream); cursor: pointer;
}
.theme-btn:hover { border-color: var(--cream-dim); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html:not([data-theme="sombre"]) .theme-btn .t-soleil,
html[data-theme="sombre"] .theme-btn .t-lune { display: none; }
@media (max-width: 560px) {
  .top .wrap > .theme-btn { margin-left: auto; }
  .top .lang ~ .theme-btn { margin-left: 0; }
}
@media (max-width: 420px) {
  .top .wrap { gap: 10px; }
  .top .logo-img { width: 124px; height: auto; }
  .theme-btn { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .top .wrap > .theme-btn, .top .lang ~ .theme-btn { margin-left: auto; }
  .top .theme-btn ~ .btn { margin-left: 0; }
}