/* Nutizie · agrégateur d'actualité corse (maquette) */
:root {
  --fond: #f4f1ec;
  --carte: #ffffff;
  --encre: #1c1917;
  --doux: #57534e;
  --ligne: #e2ddd5;
  --accent: #0b5d7a;   /* bleu de la mer */
  --maquis: #2f5d3a;
  --ombre: 0 1px 2px rgba(28, 25, 23, .06), 0 6px 18px rgba(28, 25, 23, .06);
  --rayon: 14px;
  --fd: #b91c1c; --fd-texte: #fff; --fd-fond: #fdf0ef; --fd-ligne: #f3c9c5;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fond: #0e1417;
  --carte: #172126;
  --encre: #ece9e4;
  --doux: #a9b3b8;
  --ligne: #26343b;
  --accent: #6cc3e0;
  --maquis: #8fc79c;
  --ombre: none;
  --fd: #fca5a5; --fd-texte: #1c1917; --fd-fond: #241819; --fd-ligne: #4a2a2a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0e1417; --carte: #172126; --encre: #ece9e4; --doux: #a9b3b8; --ligne: #26343b;
    --accent: #6cc3e0; --maquis: #8fc79c; --ombre: none; color-scheme: dark;
    --fd: #fca5a5; --fd-texte: #1c1917; --fd-fond: #241819; --fd-ligne: #4a2a2a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; border-radius: 8px; background: var(--encre); color: var(--fond); }
.evitement:focus { top: 1rem; }

/* En-tête */
.entete, main, .pied, .page { width: min(100% - 2rem, 1320px); margin-inline: auto; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 .8rem; }
h1, .h1 { margin: 0; font: 700 clamp(2rem, 7vw, 3rem)/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
h1::after, .h1::after { content: ""; display: block; width: 2.2em; height: 4px; margin-top: .35rem; border-radius: 4px; background: linear-gradient(90deg, var(--maquis) 50%, var(--accent) 50%); }
.sous-titre { margin: .5rem 0 0; color: var(--doux); font-size: .95rem; }
.theme { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ligne); border-radius: 50%; background: var(--carte); color: var(--encre); cursor: pointer; }
.theme span::before { content: "☾"; font-size: 1.3rem; line-height: 1; }
:root[data-theme="dark"] .theme span::before { content: "☀"; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme span::before { content: "☀"; } }
html:not(.js) .theme, html:not(.js) .outils { display: none; }

/* Recherche et filtres */
.outils { display: grid; gap: .5rem; padding-bottom: .4rem; }
#q { width: 100%; min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--ligne); border-radius: 99px; background: var(--carte); color: var(--encre); font: inherit; }
#q::placeholder { color: var(--doux); opacity: 1; }
.filtres { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .5rem; scrollbar-width: thin; }
.filtre { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--ligne); border-radius: 99px; background: var(--carte); color: var(--encre); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.filtre .nb { color: var(--doux); font-weight: 500; font-size: .8rem; }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.filtre[aria-pressed="true"] .nb { color: inherit; }
.pastille { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, var(--doux)); }
@media (min-width: 900px) { .filtres { flex-wrap: wrap; overflow: visible; } }

/* Mosaïque */
main { padding-bottom: 2rem; }
main:focus { outline: none; }
.etat { margin: .4rem 0 .8rem; color: var(--doux); font-size: .9rem; }
.mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.carte { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); border: 1px solid var(--ligne); }
.carte:not(:has(img)) { border-top: 4px solid var(--c); }
.carte img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ligne); }
.carte .corps { display: grid; gap: .4rem; padding: .9rem 1rem 1.1rem; }
.meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0; color: var(--doux); font-size: .8rem; font-weight: 600; }
.carte h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; } /* toute la vignette est cliquable */
.carte:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.carte h3 a:focus-visible { outline: none; }
.carte:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.extrait { margin: 0; color: var(--doux); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.js .carte.cachee { display: none; }
@media (min-width: 934px) {
  /* l'article le plus récent avec photo, en grand (dès 3 colonnes) */
  .mosaique { grid-auto-flow: dense; }
  .carte.une { grid-column: span 2; grid-row: span 2; }
  .carte.une h3 { font: 700 1.6rem/1.2 Georgia, "Times New Roman", serif; }
  .carte.une img { aspect-ratio: 16 / 10; }
  .carte.une .extrait { font-size: 1rem; -webkit-line-clamp: 5; }
}
.vide { padding: 2rem 0; text-align: center; color: var(--doux); }
.plus[hidden] { display: none; }
.plus { display: block; min-height: 48px; margin: 1.5rem auto 0; padding: .7rem 1.6rem; border: 0; border-radius: 99px; background: var(--accent); color: var(--fond); font: inherit; font-weight: 700; cursor: pointer; }

/* Raccourcis vers les pages rubrique et ville, au-dessus des Faits divers ; défilent à l'horizontale s'ils débordent */
.raccourcis { display: grid; margin: 0 0 .4rem; font-size: .9rem; }
.raccourcis-ligne { display: flex; align-items: baseline; gap: .5rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
.raccourcis-ligne::-webkit-scrollbar { display: none; }
.raccourcis h2 { position: sticky; left: 0; z-index: 1; flex: none; width: 5.6rem; margin: 0; background: var(--fond); box-shadow: .5rem 0 0 var(--fond);color: var(--doux); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.raccourcis ul { display: flex; margin: 0; padding: 0 1.5rem 0 0; list-style: none; }
.raccourcis li + li::before { content: "·"; color: var(--doux); }
.raccourcis a { display: inline-block; padding: .3rem .4rem; color: var(--encre); font-weight: 600; text-decoration: none; }
.raccourcis li:first-child a { padding-left: 0; }
.raccourcis a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Sections : Faits divers en tête, À la une, toutes les actualités */
.bloc { margin: 1rem 0 2.2rem; }
.bloc h2 { margin: 0 0 .8rem; font: 700 clamp(1.35rem, 4.5vw, 1.7rem)/1.2 Georgia, "Times New Roman", serif; }
.bloc h2:focus { outline: none; }
.bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; margin-bottom: .6rem; }
.bloc-tete h2 { margin: 0; }
.fd { padding: 1rem; border: 1px solid var(--fd-ligne); border-top: 5px solid var(--fd); border-radius: var(--rayon); background: var(--fd-fond); }
.fd h2 { display: flex; align-items: center; gap: .55rem; color: var(--fd); text-transform: uppercase; letter-spacing: .03em; }
.fd h2::before { content: ""; flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--fd); }
.voir { display: inline-flex; align-items: center; min-height: 44px; color: var(--fd); font-weight: 700; }
.fd-liste { display: grid; gap: .7rem; }
.carte.compacte { flex-direction: row-reverse; align-items: center; }
.carte.compacte img { flex: none; width: 96px; aspect-ratio: 1; margin: .7rem .7rem .7rem 0; border-radius: 10px; }
.carte.compacte .corps { flex: 1; padding: .7rem .9rem; }
.carte.compacte h3 { font-size: .98rem; }
.carte.compacte .extrait { display: none; }
@media (min-width: 900px) {
  .fd { padding: 1.2rem 1.4rem 1.4rem; }
  .fd-liste { grid-template-columns: 1.25fr 1fr; }
  .fd-liste > :first-child { grid-row: span 5; align-self: start; } /* sans photo : pas de grand cadre vide */
  .fd-liste > :first-child h3 { font: 700 1.5rem/1.2 Georgia, "Times New Roman", serif; }
}
.rub { padding: .05rem .5rem; border-radius: 99px; background: var(--ligne); color: var(--encre); font-size: .72rem; }
[data-rubrique="faits-divers"] .rub { background: var(--fd); color: var(--fd-texte); }
.fd .rub { display: none; } /* déjà dans la section Faits divers */
.sujets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; align-items: start; }
.sujet { overflow: hidden; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.sujet .carte { border: 0; border-radius: 0; box-shadow: none; }
.sujet .carte:not(:has(img)) { border-top: 4px solid var(--c); }
.nb-medias { margin: 0 1rem; color: var(--accent); font-size: .8rem; font-weight: 700; }
.aussi { display: grid; gap: .1rem; margin: .3rem 0 0; padding: 0 1rem .8rem; list-style: none; font-size: .9rem; }
.aussi li { padding: .45rem 0; border-top: 1px solid var(--ligne); }
.aussi a { color: var(--encre); text-decoration: none; }
.aussi a:hover { text-decoration: underline; }
.aussi .de { display: block; color: var(--doux); font-size: .78rem; font-weight: 600; }

/* Pages annexes : mentions légales, page introuvable */
.page { padding-bottom: 3rem; max-width: 760px; }
.page h2 { margin: 1.6rem 0 .4rem; font: 700 1.25rem/1.25 Georgia, "Times New Roman", serif; }
.page p, .page li { max-width: 68ch; }
.entete a { color: inherit; text-decoration: none; }
.entete .sous-titre a { color: var(--accent); }
.page h1 { margin: 1rem 0 .5rem; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.page h1::after { display: none; }

/* Pied de page */
.pied { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--ligne); color: var(--doux); font-size: .9rem; }
.pied h2 { margin: 1.2rem 0 .4rem; color: var(--encre); font-size: 1rem; }
.pied ul { margin: 0; padding-left: 1.2rem; }
.pied li { margin: .25rem 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
