@charset "utf-8";
/* earth2france.com — foglio di stile.

   La palette viene dal logo del sito: il blu di Notre-Dame, il rouge della tour
   Eiffel, l'or dell'Arc de Triomphe, l'eau du socle. Due accenti soltanto: il
   rouge per i collegamenti, l'or per i richiami e per lo stato «ancora valido».

   Tre scelte che rispondono a quello che fanno i siti del settore, misurato
   aprendo i loro fogli di stile:

   * il corpo del testo sta a 19px su una colonna di 66 caratteri. I tre
     concorrenti vivi scrivono fra 12 e 13px su righe da 100 a 138 caratteri:
     è lo scarto che si vede al primo sguardo;
   * nessun angolo arrotondato e nessuna ombra. La pagina è tenuta insieme da
     filetti da un pixel, come una pagina stampata;
   * le guide lunghe hanno il sommario. Nessuno dei concorrenti ne ha uno. */

/* ------------------------------------------------------------------ font */
@font-face {
  font-family: 'Newsreader';
  src: url('/font/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/font/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap;
}

/* ----------------------------------------------------------------- token */
:root {
  --bleu: #2c4a86;          /* Notre-Dame */
  --bleu-fonce: #1b3160;
  --bleu-nuit: #14244a;
  --rouge: #c32d44;         /* tour Eiffel — accento primario */
  --rouge-fonce: #99202f;
  --or: #9d6f22;            /* Arc de Triomphe */
  --or-clair: #f3e6c8;
  --eau: #8ccfd8;           /* le socle */
  --eau-pale: #e4f2f4;
  --vert: #3f8a55;

  /* Il campo su cui sta il marchio con la scritta bianca — copertine e piè di
     pagina. Non si inverte nel tema scuro: se schiarisse, il logo sparirebbe. */
  --champ-marque: #14244a;

  --papier: #fdfcfa;
  --papier-2: #f4f2ed;
  --encre: #15181d;
  --attenue: #5d6671;
  --filet: #d9d6cf;
  --filet-fort: #b6b2a8;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t11: .6875rem; --t12: .75rem;  --t13: .8125rem; --t14: .875rem;
  --t15: .9375rem; --t16: 1rem;    --t17: 1.0625rem; --t19: 1.1875rem;
  --t21: 1.3125rem; --t25: 1.5625rem; --t30: 1.875rem; --t38: 2.375rem;
  --t46: 2.875rem;

  --large: 1270px;
  --mesure: 66ch;
}

/* --------------------------------------------------------------- di base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 var(--t19)/1.62 var(--serif);
  font-synthesis-weight: none;
  font-variant-numeric: oldstyle-nums;
}

h1, h2, h3, h4 {
  font-family: var(--serif); line-height: 1.16; margin: 0 0 .5em;
  font-weight: 600; letter-spacing: -.011em; color: var(--bleu-nuit);
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.7vw, var(--t46)); letter-spacing: -.022em; font-weight: 620; }
h2 { font-size: var(--t30); }
h3 { font-size: var(--t21); }
h4 { font-size: var(--t19); }
p { margin: 0 0 1.05em; }

a { color: var(--rouge); text-decoration-thickness: 1px; text-underline-offset: 2.5px; }
a:hover { color: var(--rouge-fonce); text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
       font-variant-numeric: lining-nums; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 2.2em 0; }
strong, b { font-weight: 640; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--bleu-nuit); color: #fff; padding: .7em 1.1em; font-family: var(--sans);
}
.salta:focus { left: 0; }

.enveloppe { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 22px; }

/* maiuscoletto spaziato: è la cifra tipografica del sito, al posto delle
   pillole colorate. Serve a targhette, occhielli e voci di navigazione. */
.capitale {
  font-family: var(--sans); font-size: var(--t11); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}

/* --------------------------------------------------- impaginazione a due */
.pagine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; align-items: start; }
@media (min-width: 1080px) {
  .pagine { grid-template-columns: minmax(0, 1fr) 296px; gap: 58px; }
  .pagine__laterale { position: sticky; top: 22px; }
}

/* --------------------------------------------------------------- testata */
.testata { background: var(--papier); }
.testata__ligne {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 16px; padding-bottom: 14px;
}
.marque { display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; margin-right: auto; }
/* Il marchio sta su una targa scura e non sulla carta: la parola FRANCE è in
   tricolore e le lettere centrali sono bianche, quindi su fondo chiaro
   sparirebbero. È la variante del logo pensata apposta per questo. */
.marque__plaque {
  display: block; background: var(--champ-marque); padding: 9px 15px;
  line-height: 0; flex: none;
}
.marque__plaque img { height: 58px; width: auto; display: block; }
.marque__devise {
  font-family: var(--sans); font-size: var(--t12); color: var(--attenue); max-width: 23ch;
  line-height: 1.35; border-left: 1px solid var(--filet); padding-left: 18px;
}
@media (max-width: 680px) { .marque__devise { display: none; }
                            .marque__plaque { padding: 7px 11px; }
                            .marque__plaque img { height: 36px; } }

/* il filetto tricolore: tre segmenti, non una bandiera. Viene dal logo, che il
   tricolore ce l'ha già sulla scritta FRANCE. */
.tricolore { height: 3px; display: flex; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--bleu); }
.tricolore span:nth-child(2) { background: var(--filet); }
.tricolore span:nth-child(3) { background: var(--rouge); }

.menu-bouton {
  display: none; align-items: center; gap: 9px; background: none;
  border: 1px solid var(--filet-fort); color: var(--encre); font-family: var(--sans);
  font-size: var(--t14); padding: .5em .85em; cursor: pointer;
}
.menu-bouton__barres { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-bouton__barres span { display: block; width: 16px; height: 2px; background: currentColor; }
.menu-bouton em { font-style: normal; }

.navigation ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.navigation a {
  display: block; padding: .62em .78em; text-decoration: none; color: var(--bleu-nuit);
  font-family: var(--sans); font-size: var(--t13); font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--rouge); border-bottom-color: var(--filet-fort); }
.navigation a[aria-current] { color: var(--rouge); border-bottom-color: var(--rouge); font-weight: 620; }
.navigation__recherche a { border: 1px solid var(--filet-fort); margin-left: 8px; padding: .52em .9em; }
.navigation__recherche a:hover { border-color: var(--rouge); }

@media (max-width: 960px) {
  .menu-bouton { display: inline-flex; }
  .navigation { flex-basis: 100%; display: none; }
  .navigation[data-ouvert] { display: block; }
  .navigation ul { flex-direction: column; gap: 0; padding-bottom: 10px; }
  .navigation a { border-bottom: 1px solid var(--filet); padding: .8em .2em; }
  .navigation__recherche a { border: 0; border-bottom: 1px solid var(--filet); margin-left: 0; padding: .8em .2em; }
}

/* --------------------------------------------------------------- sezioni */
main { padding-bottom: 72px; }
.section { margin: 54px 0; }
.section:first-child { margin-top: 36px; }
.section__titre {
  font-size: var(--t25); margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 2px solid var(--bleu-nuit); display: block;
}
.section__titre--second { margin-top: 44px; }
.section__note { color: var(--attenue); font-size: var(--t17); max-width: 62ch; margin: 12px 0 24px; }
.section__action { margin-top: 26px; }

.bande {
  margin: 58px 0; padding: 34px 28px 38px;
  border-top: 3px solid var(--bleu); border-bottom: 1px solid var(--filet);
  background: var(--papier-2);
}
.bande > :first-child { margin-top: 0; }
@media (max-width: 560px) { .bande { padding: 26px 18px 30px; } }

/* ------------------------------------------------------------ cadrage */
.cadrage { display: grid; gap: 30px; align-items: center; margin: 30px 0 48px; }
@media (min-width: 760px) { .cadrage { grid-template-columns: 220px minmax(0,1fr); gap: 40px; } }
.cadrage__plaque { display: block; background: var(--champ-marque); padding: 18px 20px; line-height: 0; }
.cadrage__logo { width: 100%; height: auto; display: block; }
@media (max-width: 759px) { .cadrage__plaque { max-width: 280px; margin: 0 auto; padding: 14px 16px; } }
.cadrage p { font-size: var(--t21); line-height: 1.5; margin: 0; max-width: 56ch; }
.cadrage p b { color: var(--bleu-nuit); font-weight: 620; }

/* --------------------------------------------------------------- fiches */
/* i filetti si disegnano sulle schede, non sul fondo della griglia: con il
   fondo colorato, una riga incompleta lascia in vista una casella vuota */
.grille { display: grid; gap: 1px; border: 1px solid var(--filet); }
@media (min-width: 700px) { .grille--tiers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (min-width: 1000px) { .grille--tiers { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } }
/* quattro schede su tre colonne lasciano la seconda riga quasi vuota: con
   esattamente quattro si va a due per riga */
@media (min-width: 700px) {
  .grille--tiers:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fiche { background: var(--papier); display: flex; flex-direction: column;
         box-shadow: 0 0 0 1px var(--filet); }

/* la copertina: la schermata dell'articolo dove c'è, altrimenti il marchio del
   sito su campo blu con piattaforma e anno. Una griglia metà con figura e metà
   senza si legge come un errore. */
.fiche__figure {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--champ-marque); border-bottom: 1px solid var(--filet);
}
.fiche__figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.fiche__figure--marque { display: grid; place-items: center; }
.fiche__figure--marque img { width: 74%; max-width: 215px; height: auto; max-height: 68%; object-fit: contain; }
.fiche__figure--marque span {
  position: absolute; left: 15px; bottom: 11px;
  font-family: var(--sans); font-size: var(--t11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #9db2d8;
}
.fiche__texte { padding: 19px 21px 21px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fiche h3 { font-size: var(--t19); margin: 0; line-height: 1.26; }
.fiche h3 a { color: var(--bleu-nuit); text-decoration: none; background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .18s; }
.fiche h3 a:hover { color: var(--rouge); background-size: 100% 1px; }
.fiche__extrait { color: var(--attenue); font-size: var(--t15); line-height: 1.5; margin: 0; }
.fiche__meta { margin: auto 0 0; padding-top: 4px; font-family: var(--sans); font-size: var(--t12); color: var(--attenue); }
.fiche--grande h3 { font-size: var(--t25); }

/* --------------------------------------------------------------- pastilles */
.pastilles { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pastille {
  font-family: var(--sans); font-size: var(--t11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--attenue);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.pastille::before { content: ''; width: 7px; height: 7px; background: currentColor; flex: none; }
.pastille--plateforme { color: var(--bleu); }
.pastille--neutre { color: var(--attenue); }
.pastille--neutre::before { background: none; width: 0; }
.pastille--valide { color: var(--or); }
.pastille--depasse { color: var(--rouge); }
.pastille--chronique { color: var(--attenue); }
.pastille--date::before { display: none; }

/* ------------------------------------------------------------- entrées */
.entrees { display: grid; gap: 1px; border: 1px solid var(--filet); }
@media (min-width: 820px) { .entrees { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.entree {
  background: var(--papier); padding: 26px 24px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 9px; border-top: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--filet);
}
.entree:hover { border-top-color: var(--rouge); background: var(--papier-2); }
.entree b { font-size: var(--t21); color: var(--bleu-nuit); line-height: 1.25; font-weight: 600; }
.entree span { color: var(--attenue); font-size: var(--t15); line-height: 1.5; }
.entree i { font-style: normal; font-family: var(--sans); font-size: var(--t11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); margin-top: auto; padding-top: 10px; }

/* --------------------------------------------------------------- tuiles */
.tuiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tuile {
  border: 1px solid var(--filet-fort); padding: 13px 17px; text-decoration: none; color: var(--bleu-nuit);
  display: flex; flex-direction: column; gap: 3px; min-width: 150px;
}
.tuile:hover { border-color: var(--rouge); color: var(--rouge); }
.tuile b { font-size: var(--t17); font-weight: 600; }
.tuile i { font-style: normal; font-family: var(--sans); font-size: var(--t12); color: var(--attenue); }
.tuile--petite { min-width: 0; max-width: 42ch; padding: 10px 14px; }
.tuile--petite b { font-size: var(--t15); font-weight: 500; line-height: 1.35; }

/* ------------------------------------------------- richiami affiliazione */
.rappels { display: grid; gap: 18px; }
.rappel { border: 1px solid var(--filet-fort); border-top: 3px solid var(--bleu); background: var(--papier); }
.rappel--upland { border-top-color: var(--or); }
.rappel__plaque {
  display: grid; place-items: center; min-height: 112px;
  background: var(--champ-marque); border-bottom: 1px solid var(--filet); padding: 18px 20px;
}
.rappel__logo { max-height: 74px; max-width: 82%; width: auto; display: block; }
.rappel__plaque--enseigne { display: flex; align-items: center; justify-content: flex-start;
                            gap: 11px; text-align: left; min-height: 0;
                            background: var(--papier); }
.rappel__enseigne {
  font-family: var(--sans); font-weight: 700; font-size: var(--t14); letter-spacing: .06em;
  background: var(--bleu); color: #fff; padding: .35em .5em;
}
.rappel__nom { font-size: var(--t17); color: var(--bleu-nuit); }
.rappel__texte { padding: 17px 18px 19px; }
.rappel__note { font-family: var(--sans); font-size: var(--t13); color: var(--attenue); margin: 0 0 9px; }
.rappel__code { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 11px; }
.rappel__code code {
  font-size: var(--t19); font-weight: 700; letter-spacing: .055em; color: var(--bleu-nuit);
  background: var(--or-clair); padding: .24em .46em; border: 1px solid #e0cfa5;
}
.rappel__copie {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; cursor: pointer;
  background: var(--bleu-nuit); color: #fff; border: 0; padding: .55em .85em;
}
.rappel__copie:hover { background: var(--rouge); }
.rappel__copie[data-fait] { background: var(--vert); }
.rappel__lienfort { font-size: var(--t17); font-weight: 620; word-break: break-all; }
.rappel__detail { font-size: var(--t14); line-height: 1.5; color: var(--attenue); margin: 0 0 12px; }
.rappel__lien {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--bleu);
  border-bottom: 2px solid var(--filet-fort); padding-bottom: 2px;
}
.rappel__lien:hover { color: var(--rouge); border-bottom-color: var(--rouge); }
.rappels__note { font-size: var(--t13); line-height: 1.55; color: var(--attenue); margin: 2px 0 0; font-family: var(--sans); }

/* ------------------------------------------------------------- articolo */
.article { max-width: 100%; }
.fil { font-family: var(--sans); font-size: var(--t12); margin: 0 0 20px; }
.fil ul { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.fil li + li::before { content: '›'; margin-right: 9px; color: var(--filet-fort); }
.fil a { color: var(--attenue); text-decoration: none; }
.fil a:hover { color: var(--rouge); text-decoration: underline; }

.article h1 { margin: 14px 0 16px; max-width: 24ch; }
.article__chapeau {
  font-size: var(--t21); line-height: 1.5; color: var(--bleu-nuit);
  max-width: var(--mesure); margin: 0 0 20px; font-weight: 400;
}
.article__signature {
  font-family: var(--sans); font-size: var(--t13); color: var(--attenue);
  padding-bottom: 22px; border-bottom: 2px solid var(--bleu-nuit); margin: 0 0 28px;
}

.avis-date {
  border-left: 3px solid var(--filet-fort); background: var(--papier-2);
  padding: 15px 18px; margin: 0 0 30px; font-size: var(--t15); line-height: 1.55;
  color: var(--attenue); max-width: var(--mesure); font-family: var(--sans);
}

/* il sommario: nessuno dei concorrenti ne ha uno, ed è il punto in cui le
   guide lunghe di questo settore si perdono */
.sommaire {
  border: 1px solid var(--filet); border-left: 3px solid var(--bleu);
  padding: 20px 24px 22px; margin: 0 0 34px; max-width: var(--mesure); background: var(--papier-2);
}
.sommaire > b {
  display: block; font-family: var(--sans); font-size: var(--t11); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bleu); margin-bottom: 12px;
}
.sommaire ol { margin: 0; padding-left: 1.3em; }
.sommaire li { margin-bottom: 7px; font-size: var(--t16); line-height: 1.4; }
.sommaire li::marker { color: var(--attenue); font-variant-numeric: lining-nums; }
.sommaire a { color: var(--bleu-nuit); text-decoration: none; }
.sommaire a:hover { color: var(--rouge); text-decoration: underline; }

.texte { max-width: var(--mesure); }
.texte > h2 {
  font-size: var(--t30); margin: 1.9em 0 .5em; padding-top: 14px;
  border-top: 1px solid var(--filet);
}
.texte > h3 { font-size: var(--t21); margin: 1.7em 0 .45em; color: var(--bleu); }
.texte > h4, .texte > h5, .texte > h6 {
  font-size: var(--t17); margin: 1.5em 0 .4em; color: var(--bleu);
  font-family: var(--sans); font-weight: 650; letter-spacing: 0;
}
.texte ul, .texte ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.texte li { margin-bottom: .45em; }
.texte blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--rouge);
  font-size: var(--t21); line-height: 1.5; color: var(--bleu-nuit);
}
.texte blockquote p:last-child { margin-bottom: 0; }
.texte table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--t15);
  font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums;
}
.texte th, .texte td { border: 1px solid var(--filet); padding: 9px 11px; text-align: left; vertical-align: top; }
.texte th { background: var(--papier-2); font-weight: 650; color: var(--bleu-nuit); }
.texte tbody tr:nth-child(even) td { background: #faf8f4; }

figure.capture { margin: 1.9em 0; }
figure.capture img { display: block; width: 100%; border: 1px solid var(--filet); }
figure.capture figcaption { font-family: var(--sans); font-size: var(--t13); color: var(--attenue); margin-top: 9px; }
figure.capture .zoom { display: block; position: relative; }
figure.capture.alignleft, figure.capture.alignright { max-width: 320px; }
@media (min-width: 820px) {
  figure.capture.alignleft { float: left; margin: .4em 28px 1.2em 0; }
  figure.capture.alignright { float: right; margin: .4em 0 1.2em 28px; }
}

.etiquettes { margin: 42px 0 0; padding-top: 22px; border-top: 1px solid var(--filet); }
.etiquettes > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.etiquettes b {
  display: block; font-family: var(--sans); font-size: var(--t11); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--attenue); margin-bottom: 9px;
}
.etiquettes a {
  font-family: var(--sans); font-size: var(--t13); text-decoration: none; color: var(--bleu-nuit);
  border: 1px solid var(--filet-fort); padding: .35em .7em;
}
.etiquettes a:hover { border-color: var(--rouge); color: var(--rouge); }

.defiler { display: grid; gap: 1px; border: 1px solid var(--filet); margin: 36px 0 0; }
@media (min-width: 680px) { .defiler { grid-template-columns: 1fr 1fr; } }
.defiler a { background: var(--papier); padding: 18px 20px; text-decoration: none; display: block;
             box-shadow: 0 0 0 1px var(--filet); }
.defiler a:hover { background: var(--papier-2); }
.defiler i {
  font-style: normal; font-family: var(--sans); font-size: var(--t11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); display: block; margin-bottom: 6px;
}
.defiler b { font-weight: 500; font-size: var(--t17); color: var(--bleu-nuit); line-height: 1.3; display: block; }
.defiler__suiv { text-align: right; }

/* -------------------------------------------------------------- archivio */
.archive__tete { margin: 30px 0 34px; padding-bottom: 26px; border-bottom: 2px solid var(--bleu-nuit); }
.archive__description { color: var(--attenue); font-size: var(--t19); max-width: 62ch; margin: 10px 0 0; }

.presentation { margin: 0 0 42px; }
.presentation p { max-width: var(--mesure); font-size: var(--t19); }
.presentation__tuiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.filtres { border: 1px solid var(--filet); padding: 18px 20px 14px; margin: 0 0 30px; background: var(--papier-2); }
.filtres__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.filtres__ligne > b {
  font-family: var(--sans); font-size: var(--t11); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--attenue); min-width: 92px;
}
.filtres__ligne > div { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres button {
  font-family: var(--sans); font-size: var(--t13); cursor: pointer; background: var(--papier);
  border: 1px solid var(--filet-fort); color: var(--bleu-nuit); padding: .34em .72em;
}
.filtres button:hover { border-color: var(--rouge); color: var(--rouge); }
.filtres button[aria-pressed="true"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; }
.filtres__resultat { font-family: var(--sans); font-size: var(--t13); color: var(--attenue); margin: 6px 0 0; }
.filtres__raz { font-family: var(--sans); font-size: var(--t13); cursor: pointer;
  background: none; border: 0; color: var(--rouge); text-decoration: underline; padding: 0; }

/* l'elenco completo: righe con l'anno in margine, non schede.
   Le immagini di questo archivio sono schermate di gioco: ottime dentro
   l'articolo, pessime come copertine, e parecchi pezzi non ne hanno nessuna. */
.lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.ligne { display: grid; gap: 4px 22px; padding: 19px 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 680px) { .ligne { grid-template-columns: 72px minmax(0,1fr); } }
.ligne[hidden] { display: none; }
.ligne__annee {
  font-family: var(--sans); font-size: var(--t13); font-weight: 600; color: var(--attenue);
  font-variant-numeric: lining-nums; padding-top: 5px;
}
.ligne__corps { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ligne__corps > a { font-size: var(--t21); color: var(--bleu-nuit); text-decoration: none; line-height: 1.28; font-weight: 500; }
.ligne__corps > a:hover { color: var(--rouge); text-decoration: underline; }
.ligne__resume { color: var(--attenue); font-size: var(--t15); line-height: 1.5; }

/* -------------------------------------------------------------- bottoni */
.bouton {
  display: inline-block; font-family: var(--sans); font-size: var(--t14); font-weight: 600;
  letter-spacing: .04em; text-decoration: none; padding: .78em 1.4em;
  background: var(--bleu-nuit); color: #fff; border: 1px solid var(--bleu-nuit); cursor: pointer;
}
.bouton:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton--clair { background: none; color: var(--bleu-nuit); }
.bouton--clair:hover { background: var(--bleu-nuit); color: #fff; }

/* ----------------------------------------------------------- segnaposto */
.segnaposto {
  background: #ffe95c; color: #3a2d00; padding: 0 .3em; font-family: var(--sans);
  font-size: .86em; font-weight: 700; border: 1px dashed #b89a00;
}

/* ------------------------------------------------------------------ pie */
.pied { background: var(--bleu-nuit); color: #d2dced; margin-top: 70px; padding: 52px 0 0; }
.pied a { color: #fff; text-decoration: none; border-bottom: 1px solid #40588a; }
.pied a:hover { border-bottom-color: var(--eau); color: var(--eau); }
.pied h2 {
  font-family: var(--sans); font-size: var(--t11); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #93a8c9; margin: 0 0 14px;
}
.pied__grille { display: grid; gap: 38px; padding-bottom: 42px; }
@media (min-width: 880px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; gap: 52px; } }
.pied__bloc p { font-size: var(--t15); line-height: 1.6; color: #b9c7de; }
/* la variante del marchio pensata per il fondo scuro: scritta e codice in
   bianco, monumenti a colori. Niente piastra bianca, che lo spegneva. */
.pied__logo { width: 250px; max-width: 72%; height: auto; display: block; margin: -10px 0 16px -8px; }
.pied__liste { list-style: none; margin: 0; padding: 0; font-size: var(--t15); }
.pied__liste li { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; }
.pied__liste span { color: #7e93b8; font-family: var(--sans); font-size: var(--t12); font-variant-numeric: lining-nums; }
.pied__code { font-size: var(--t14); color: #b9c7de; }
.pied__code code { background: #22365f; padding: .18em .42em; color: #fff; }
.pied__consentement {
  background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 0;
  border-bottom: 1px solid #40588a;
}
.pied__consentement:hover { color: var(--eau); border-bottom-color: var(--eau); }
.pied__ligne {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  border-top: 1px solid #2a3f6b; padding-top: 20px; padding-bottom: 26px;
  font-family: var(--sans); font-size: var(--t12); color: #8a9dbe;
}
.pied__ligne p { margin: 0; }

/* -------------------------------------------------------------- consenso */
.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--papier);
  border-top: 3px solid var(--bleu); box-shadow: 0 -8px 30px -18px rgba(20,36,74,.5);
}
.consentement__corps { max-width: var(--large); margin: 0 auto; padding: 22px; display: grid; gap: 16px; }
@media (min-width: 900px) { .consentement__corps { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 30px; } }
.consentement p { margin: 0; font-size: var(--t15); line-height: 1.55; }
.consentement__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------- ricerca (UI) */
:root { --pagefind-ui-primary: #1b3160; --pagefind-ui-text: #15181d; --pagefind-ui-background: #fdfcfa;
  --pagefind-ui-border: #d9d6cf; --pagefind-ui-tag: #f4f2ed; --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: 'Newsreader', Georgia, serif; }

/* ------------------------------------------------------------ tema scuro */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14171c; --papier-2: #1b1f26; --encre: #e7e4dd; --attenue: #9aa3af;
    --filet: #2c323b; --filet-fort: #434b57;
    --bleu: #7fa0e0; --bleu-fonce: #6b8ed4; --bleu-nuit: #cdd9f0;
    --rouge: #ef7085; --rouge-fonce: #f5929f; --or: #d4a449; --or-clair: #3a3017;
    --eau: #8ccfd8;
  }
  body { background: var(--papier); color: var(--encre); }
  .testata { background: var(--papier); }
  .rappel__code code { color: #f0e2c0; border-color: #5a4a20; }
  .rappel__copie { background: var(--bleu-nuit); color: #14171c; }
  .rappel__enseigne { background: var(--bleu); color: #14171c; }
  .bouton { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #14171c; }
  .bouton:hover { background: var(--rouge); border-color: var(--rouge); color: #14171c; }
  .bouton--clair { background: none; color: var(--bleu-nuit); }
  .bouton--clair:hover { background: var(--bleu-nuit); color: #14171c; }
  .pied { background: var(--champ-marque); }
  .pied a { border-bottom-color: #3a4f7d; }
  .pied__code code { background: #22262e; }
  .pied__ligne { border-top-color: #262c35; }
  .texte tbody tr:nth-child(even) td { background: #191d23; }
  .tricolore span:nth-child(2) { background: var(--filet-fort); }
  .filtres button[aria-pressed="true"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #14171c; }
  figure.capture img { border-color: var(--filet-fort); }
  .segnaposto { background: #ffe95c; color: #3a2d00; }
  :root { --pagefind-ui-primary: #cdd9f0; --pagefind-ui-text: #e7e4dd; --pagefind-ui-background: #14171c;
          --pagefind-ui-border: #2c323b; --pagefind-ui-tag: #1b1f26; }
}

/* --------------------------------------------------------------- stampa */
@media print {
  .testata, .pied, .rappels, .consentement, .defiler, .filtres, .fil, .tricolore { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pagine { display: block; }
  .texte { max-width: none; }
  a { color: #000; }
  .texte a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}