/* ==========================================================================
   WattNeuf — frontend mobile (chargé après site.css)
   Mode clair / sombre : suit le réglage du téléphone, ou le choix du visiteur
   (attribut data-theme sur <html>, posé par theme.js).
   ========================================================================== */

/* ---------- Thème sombre : redéfinition des couleurs de site.css ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bleu-nuit: #dbe8f7;      /* titres : texte clair */
        --bleu-profond: #7fb6f5;
        --bleu: #5aa6f0;
        --bleu-clair: #8cc2f7;
        --bleu-pale: #16294a;
        --bleu-voile: #111f38;
        --texte: #e3e9f1;
        --texte-doux: #b3c0cf;
        --texte-leger: #8494a8;
        --fond: #121c2e;
        --fond-doux: #0b1424;
        --bordure: #24344f;
        --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
        --ombre-survol: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
        --m-fond-entete: rgba(11, 20, 36, .92);
        --m-fond-sombre: #071022;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bleu-nuit: #dbe8f7;
    --bleu-profond: #7fb6f5;
    --bleu: #5aa6f0;
    --bleu-clair: #8cc2f7;
    --bleu-pale: #16294a;
    --bleu-voile: #111f38;
    --texte: #e3e9f1;
    --texte-doux: #b3c0cf;
    --texte-leger: #8494a8;
    --fond: #121c2e;
    --fond-doux: #0b1424;
    --bordure: #24344f;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --ombre-survol: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
    --m-fond-entete: rgba(11, 20, 36, .92);
    --m-fond-sombre: #071022;
    color-scheme: dark;
}
:root {
    --m-fond-entete: rgba(255, 255, 255, .94);
    --m-fond-sombre: #072f5f;
    --m-gouttiere: 16px;
}

/* Éléments de site.css qui utilisent --bleu-nuit comme fond : couleurs fixes */
.mobile .badge { background: #072f5f; color: #fff; }
.mobile .badge--comparatif { background: var(--eclair); color: #3b2c00; }
.mobile .badge--essai { background: #1e7be0; }
.mobile .carte__vide { background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.25), transparent 45%), linear-gradient(135deg, var(--teinte), color-mix(in srgb, var(--teinte) 55%, #072f5f)); }
.mobile .form-newsletter input[type="text"], .mobile .form-newsletter input[type="email"] { background: var(--fond); color: var(--texte); }
.mobile .pastille { background: color-mix(in srgb, var(--teinte) 16%, var(--fond)); }
.mobile .erreurs { background: color-mix(in srgb, #b42318 12%, var(--fond)); border-color: color-mix(in srgb, #b42318 35%, var(--fond)); color: #e5484d; }
.mobile .entete-page { background: linear-gradient(180deg, var(--bleu-pale), var(--fond-doux)); }
.mobile .lecture { background: var(--fond-doux); }

/* ---------- Mise en page générale ---------- */
.mobile body {
    font-size: 16px;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-tap-highlight-color: transparent;
}
.mobile .conteneur { padding-left: var(--m-gouttiere); padding-right: var(--m-gouttiere); }
.mobile .principal { min-height: 70vh; padding-bottom: 1.5rem; }

/* ---------- En-tête : nom du site + onglets ---------- */
.m-entete {
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: var(--m-fond-entete);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--bordure);
}
.m-entete__haut {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem var(--m-gouttiere) .1rem;
}
.m-logo { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; color: var(--bleu-nuit); text-decoration: none; }
.m-logo strong { font-weight: 850; color: var(--bleu); }
.m-logo__icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #0b4f9c, #1e7be0); color: var(--eclair); }
.m-entete__actions { display: flex; gap: .25rem; }

.m-bouton-icone {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--texte-doux); cursor: pointer;
}
.m-bouton-icone:active { background: var(--bleu-pale); }
.m-bouton-icone[hidden] { display: none; }
/* Icône du bouton de thème : lune en clair, soleil en sombre */
.m-icone-soleil { display: none; }
:root[data-theme="dark"] .m-icone-lune { display: none; }
:root[data-theme="dark"] .m-icone-soleil { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .m-icone-lune { display: none; }
    :root:not([data-theme="light"]) .m-icone-soleil { display: block; }
}

.m-onglets {
    display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
    padding: .2rem calc(var(--m-gouttiere) - .55rem) 0;
    scroll-snap-type: x proximity;
}
.m-onglets::-webkit-scrollbar { display: none; }
.m-onglets a {
    --teinte: var(--bleu);
    flex: none; scroll-snap-align: start;
    padding: .45rem .55rem .55rem; font-size: .88rem; font-weight: 600; white-space: nowrap;
    color: var(--texte-leger); text-decoration: none; border-bottom: 3px solid transparent;
}
.m-onglets a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--teinte); }

/* Astuce d'installation iOS */
.m-astuce-ios {
    display: flex; align-items: center; gap: .5rem; margin: .6rem var(--m-gouttiere) 0; padding: .6rem .5rem .6rem .9rem;
    border-radius: 12px; background: var(--bleu-pale); color: var(--texte); font-size: .88rem;
}
.m-astuce-ios[hidden] { display: none; }
.m-astuce-ios p { margin: 0; flex: 1; }

/* ---------- Fil : article de tête (accueil), image pleine largeur ---------- */
.m-une { border-bottom: 6px solid var(--bleu-voile); }
.m-une__lien { display: block; color: var(--texte); text-decoration: none; }
.m-une__lien:active { background: var(--bleu-voile); }
.m-une__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bleu-pale); }
.m-une__image.carte__vide { display: grid; min-height: 0; }
.m-une__image svg { width: 18%; }
.m-une__texte { display: flex; flex-direction: column; gap: .35rem; padding: .8rem var(--m-gouttiere) 1rem; }
.m-une__titre { font-size: 1.3rem; font-weight: 800; line-height: 1.22; color: var(--bleu-nuit); }
.m-une__chapo {
    font-size: .95rem; line-height: 1.45; color: var(--texte-doux);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Fil : liste des derniers articles ---------- */
.m-flux { --teinte: var(--bleu); padding: .4rem 0 0; }
.m-liste { list-style: none; margin: 0; padding: 0; }
.m-liste li + li { border-top: 1px solid var(--bordure); }
.m-item {
    --ligne: 1.32em;
    display: flex; align-items: center; gap: .9rem;
    padding: .85rem var(--m-gouttiere);
    color: var(--texte); text-decoration: none;
}
.m-item:active { background: var(--bleu-voile); }
.m-item__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.m-item__meta { font-size: .74rem; color: var(--texte-leger); text-transform: uppercase; letter-spacing: .03em; }
/* Couleur de rubrique mêlée à la couleur du texte : lisible en clair comme en sombre */
.m-item__rubrique { --teinte: var(--bleu); color: color-mix(in srgb, var(--teinte) 65%, var(--texte)); font-weight: 700; }
.m-item__type { font-weight: 700; color: var(--texte-doux); }
.m-item__titre {
    font-size: 1rem; font-weight: 700; line-height: var(--ligne); color: var(--bleu-nuit);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Image : hauteur de 3 lignes de titre */
.m-item__image {
    flex: none; width: calc(3 * var(--ligne) * 4 / 3); height: calc(3 * var(--ligne));
    font-size: 1rem; border-radius: 8px; object-fit: cover; background: var(--bleu-pale);
}
.m-item__image.carte__vide { min-height: 0; }
.m-item__image svg { width: 40%; }

.m-plus { margin: .4rem 0 0; padding: 0 var(--m-gouttiere); text-align: right; }
.m-plus a { display: inline-block; padding: .5rem 0; font-weight: 700; font-size: .92rem; text-decoration: none; color: color-mix(in srgb, var(--teinte) 65%, var(--texte)); }

/* ---------- Fil : derniers dossiers, 2 par ligne ---------- */
.m-dossiers { margin-top: 1.2rem; padding: 1.2rem var(--m-gouttiere) 0; border-top: 6px solid var(--bleu-voile); }
.m-sous-titre {
    display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem;
    font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; color: color-mix(in srgb, var(--teinte) 65%, var(--texte));
}
.m-sous-titre::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }
.m-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
.m-dossier { display: flex; flex-direction: column; gap: .35rem; color: var(--texte); text-decoration: none; min-width: 0; }
.m-dossier__image { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 10px; object-fit: cover; background: var(--bleu-pale); }
.m-dossier__image.carte__vide { min-height: 0; }
.m-dossier__image svg { width: 26%; }
.m-dossier__titre {
    font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--bleu-nuit);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.m-dossiers .m-plus { padding: 0; }

/* ---------- Pied de page ---------- */
.m-pied { margin-top: 1rem; padding: 1.2rem var(--m-gouttiere) calc(1.2rem + env(safe-area-inset-bottom)); background: var(--m-fond-sombre); color: #c9d8ea; font-size: .9rem; }
.m-pied a { color: #fff; }
.m-pied__newsletter { margin-bottom: 1rem; }
.m-pied__newsletter summary { cursor: pointer; font-weight: 700; color: #fff; padding: .4rem 0; }
.m-pied__newsletter .form-newsletter { margin-top: .6rem; }
.m-pied .form-newsletter label > span, .m-pied .form-newsletter__consentement { color: #c9d8ea; }
.m-pied .form-newsletter input[type="text"], .m-pied .form-newsletter input[type="email"] { background: #fff; color: #1f2933; }
.m-pied .form-newsletter .bouton { background: var(--eclair); color: #2b2000; }
.m-pied__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.m-pied__liens a { text-decoration: none; color: #c9d8ea; }
.m-pied__bas { margin: .6rem 0 0; font-size: .78rem; color: #8ea6c4; }

/* ---------- Pages communes (article, archives…) dans la version mobile ---------- */
.mobile .lecture__entete { padding-top: 1.2rem; }
.mobile .lecture__image { padding: 0; }
.mobile .lecture__image img { border-radius: 0; }
.mobile .lecture__image figcaption { padding-left: var(--m-gouttiere); padding-right: var(--m-gouttiere); }
.mobile .texte { font-size: 1.05rem; }
.mobile .entete-page { padding: 1.3rem 0 1.1rem; margin-bottom: 1.2rem; }
.mobile .archives__filtres { box-shadow: none; border: 1px solid var(--bordure); }