/* ===== Mode sobre (js/mode.js) : même site, sans cœurs, pétales ni emojis, palette neutre. ===== */
:root[data-mode="sobre"] {
  --bg: #f6f6f4; --bg-2: #ecedea; --card: #ffffff; --ink: #1f2328; --ink-soft: #5d646c;
  --pink: #dfe6ec; --pink-deep: #2f5d7c; --rose: #2f5d7c; --cream: #eef1f3;
  --green: #9cb8a4; --green-deep: #4f7a5e; --gold: #c9a24a; --line: #dfe2e5;
  --shadow: 0 8px 24px -14px rgba(20, 30, 40, .28); --radius: 14px;
  --sobre-fonce: #1d3d55;
}
:root[data-mode="sobre"][data-theme="dark"] {
  --bg: #16181b; --bg-2: #1c1f23; --card: #212429; --ink: #e7e9ec; --ink-soft: #a2a8b0;
  --pink: #2b3742; --pink-deep: #8db3d3; --rose: #8db3d3; --cream: #262b31; --line: #30353b;
  --shadow: 0 8px 24px -14px rgba(0, 0, 0, .7); --sobre-fonce: #4d7593;
}
@media (prefers-color-scheme: dark) {
  :root[data-mode="sobre"]:not([data-theme="light"]) {
    --bg: #16181b; --bg-2: #1c1f23; --card: #212429; --ink: #e7e9ec; --ink-soft: #a2a8b0;
    --pink: #2b3742; --pink-deep: #8db3d3; --rose: #8db3d3; --cream: #262b31; --line: #30353b;
    --shadow: 0 8px 24px -14px rgba(0, 0, 0, .7); --sobre-fonce: #4d7593;
  }
}

/* Bouton du mode, dans l'en-tête */
.mode-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; margin-left: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; flex: none; }
.mode-btn svg { width: 18px; height: 18px; }
.mode-btn:hover { color: var(--ink); }
.mode-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.site-header .wrap { position: relative; }
@media (max-width: 720px) {
  .site-header .wrap { padding-inline: 48px; }
  .mode-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; width: 42px; height: 42px; justify-content: center; }
  .mode-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Ce qui disparaît */
:root[data-mode="sobre"] .petals,
:root[data-mode="sobre"] .tendre,
:root[data-mode="sobre"] #counter,
:root[data-mode="sobre"] .daily,
:root[data-mode="sobre"] .tile .ico, :root[data-mode="sobre"] .tile .tuile-img, :root[data-mode="sobre"] .banner, :root[data-mode="sobre"] .etat img, :root[data-mode="sobre"] .groupe-tete img, :root[data-mode="sobre"] .cn-ico, :root[data-mode="sobre"] body::before, :root[data-mode="sobre"] .footer::before,
:root[data-mode="sobre"] h1 [aria-hidden], :root[data-mode="sobre"] .deco { display: none !important; }

/* Ce qui se calme */
:root[data-mode="sobre"] body { background-image: none; }
:root[data-mode="sobre"] .hero h1 em { font-style: normal; color: inherit; }
:root[data-mode="sobre"] .hero .eyebrow { color: var(--ink-soft); }
:root[data-mode="sobre"] nav a[aria-current="page"],
:root[data-mode="sobre"] .tab[aria-selected="true"], :root[data-mode="sobre"] .tab[aria-pressed="true"],
:root[data-mode="sobre"] .tab[aria-current="page"], :root[data-mode="sobre"] .chip.top,
:root[data-mode="sobre"] .chipbtn[aria-pressed="true"], :root[data-mode="sobre"] .steps li::before { color: var(--ink); }
:root[data-mode="sobre"] .btn { box-shadow: 0 4px 0 var(--sobre-fonce); }
:root[data-mode="sobre"] .btn:active { box-shadow: 0 1px 0 var(--sobre-fonce); }
:root[data-mode="sobre"] .btn.small, :root[data-mode="sobre"] .todo-form .btn { box-shadow: 0 3px 0 var(--sobre-fonce); }
:root[data-mode="sobre"] .counter { color: var(--ink); }
:root[data-mode="sobre"] .main-flower svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18)); }
:root[data-mode="sobre"] dialog::backdrop { background: rgba(20, 24, 28, .55); }
:root[data-mode="sobre"] .dc .btn:not(.ghost), :root[data-mode="sobre"] .dc-voile .btn:not(.ghost) { box-shadow: 0 3px 0 var(--sobre-fonce); }
:root[data-mode="sobre"] .dc, :root[data-mode="sobre"] .dc-voile { --dc-c0: #2f5d7c; }

/* Barre d'onglets du téléphone : icônes au trait à la place des emojis */
@media (max-width: 720px) {
  :root[data-mode="sobre"] .site-header nav a::before { content: ""; width: 22px; height: 22px; margin: 2px 0 3px; background: currentColor;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
  :root[data-mode="sobre"] .site-header nav a[href="index.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="jeux.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.2'/%3E%3Ccircle cx='15' cy='15' r='1.2'/%3E%3Ccircle cx='15' cy='9' r='1.2'/%3E%3Ccircle cx='9' cy='15' r='1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.2'/%3E%3Ccircle cx='15' cy='15' r='1.2'/%3E%3Ccircle cx='15' cy='9' r='1.2'/%3E%3Ccircle cx='9' cy='15' r='1.2'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="jardin.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12c0-4 3-7 7-7 0 4-3 7-7 7z'/%3E%3Cpath d='M12 15c0-3-2.5-5-6-5 0 3 2.5 5 6 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12c0-4 3-7 7-7 0 4-3 7-7 7z'/%3E%3Cpath d='M12 15c0-3-2.5-5-6-5 0 3 2.5 5 6 5z'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="favoris.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="sorties.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="focus.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M10 2h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M10 2h4'/%3E%3C/svg%3E"); }
  :root[data-mode="sobre"] .site-header nav a[href="miam.html"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8a2 2 0 0 0 2 2v8M5 3v5a2 2 0 0 0 2 2M9 3v5'/%3E%3Cpath d='M17 21V3c-2 1-3 4-3 8h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8a2 2 0 0 0 2 2v8M5 3v5a2 2 0 0 0 2 2M9 3v5'/%3E%3Cpath d='M17 21V3c-2 1-3 4-3 8h3'/%3E%3C/svg%3E"); }
}

/* Emojis dans le texte des pages (repérés par js/mode.js), sauf dans les jeux et le jardin */
:root[data-mode="sobre"] .emo { display: none; }

/* Images du glow-up : les illustrations décoratives disparaissent, les contenus (fleurs, recettes, roue) restent mais sans couleurs vives. */
:root[data-mode="sobre"] .brand > span[aria-hidden] { background: var(--ink); -webkit-mask: url("../img/marque/marque-symbole-mono.svg") no-repeat center / contain; mask: url("../img/marque/marque-symbole-mono.svg") no-repeat center / contain; }
:root[data-mode="sobre"] .fleur-img, :root[data-mode="sobre"] .roue-disque, :root[data-mode="sobre"] .roue-fleche, :root[data-mode="sobre"] .ill-aq img { filter: grayscale(1) contrast(1.05); }
:root[data-mode="sobre"] .tiles-home .tile { grid-template-columns: 1fr; padding-left: 18px; }
:root[data-mode="sobre"] .tiles-home .tile::after { background: var(--ink-soft); }
:root[data-mode="sobre"] .page-head, :root[data-mode="sobre"] .page-head.large { grid-template-columns: 1fr; }
:root[data-mode="sobre"] .ray-ico { color: var(--ink-soft); }
:root[data-mode="sobre"] .etat { padding-block: 6px; }