/* ==========================================================================
   Feuille de style unique – magazine de savoirs pratiques
   Palette : papier bone très peu saturé, bleu de nuit, rouge brique.
   Typographie serif pour les titres et le corps de texte, sans-serif
   réservé aux libellés. Aucune ressource externe, aucune police importée.

   Règles tenues ici :
   – un seul filet structurel sur la page (le filet double sous le titre
     du journal) ; ailleurs on sépare par l'espace et par un palier de ton ;
   – aucun libellé sous 13 px, aucun texte courant sous 16 px ;
   – contraste du texte toujours au-dessus de 4,5:1 sur son fond ;
   – la mesure du texte courant reste entre 45 et 75 signes.
   ========================================================================== */

:root {
  /* Fonds : papier, champ, champ profond. Chroma volontairement très bas :
     un fond crème jaune se lit comme une couleur par défaut, pas comme un choix. */
  --paper:       #f1f0ec;
  --paper-2:     #e7e5e0;
  --paper-3:     #d7d4cc;

  /* Encres */
  --navy:        #152440;
  --navy-deep:   #101d33;
  --navy-soft:   #30456b;
  --ink:         #1d1b18;
  --ink-2:       #2c2922;
  --muted:       #575044;   /* 6,99:1 sur le papier */

  /* Accent */
  --accent:      #9e3f26;   /* 5,77:1 sur le papier */
  --accent-soft: #dcb3a0;   /* décoratif : dessins, filets de dessin */

  --rule:        #cfc9bb;   /* uniquement dans les dessins et les tableaux */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique : sept tailles pour tout le site */
  --t-label: .8125rem;  /* 13 px – libellés */
  --t-small: 1rem;      /* 16 px – texte secondaire */
  --t-body:  1.125rem;  /* 18 px – texte courant */
  --t-sub:   1.3rem;    /* 20,8 px – titres de rubrique et de carte */
  --t-head:  1.5rem;    /* 24 px – intertitres d'article */

  --wrap: 68rem;
  --ease: cubic-bezier(.22, .68, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* Surfaces rendues par le navigateur : elles appartiennent aussi au dessin. */
::selection { background: var(--navy); color: var(--paper); }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .18s var(--ease);
}
a:hover { color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--paper);
  padding: .7rem 1.2rem; z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- Titre du journal ---------- */
.masthead { background: var(--paper); text-align: center; padding: 3.2rem 0 2rem; }
.masthead-title {
  margin: 0;
  font-size: clamp(2.5rem, 7.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: .01em;
}
.masthead-title a { color: var(--navy); text-decoration: none; }
.masthead-title a:hover { color: var(--accent); }
.masthead-rule { color: var(--accent); margin: 1rem auto .8rem; max-width: 15rem; }
.masthead-rule svg { display: block; width: 100%; height: auto; }
.masthead-sub {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.masthead-date {
  margin: .7rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .02em;
  color: var(--muted);
}

/* ---------- Navigation ----------
   Le filet double sous la navigation est le seul filet structurel du site :
   c'est la marque de fabrique d'une une de journal, pas un séparateur. */
.nav { background: var(--navy); }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
}
.nav a {
  display: block;
  padding: 1rem 1.5rem;          /* cible tactile ≥ 44 px de haut */
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-3);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--navy-deep); color: var(--paper); }
.nav .is-current a { background: var(--paper); color: var(--navy); }
.nav .is-current a:hover { background: var(--accent); color: var(--paper); }

/* ---------- Blocs génériques ---------- */
.section { padding-top: 6.5rem; }
.section-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 2rem;
}
.section-head h2 {
  margin: 0;
  font-size: var(--t-sub);
  font-weight: 400;
  color: var(--navy);
}
.section-head span {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .02em;
  color: var(--muted);
}

/* Ligne de signature : rubrique, date, durée de lecture. La rubrique vit ici,
   jamais en surtitre au-dessus d'un titre. */
.byline {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .02em;
  color: var(--muted);
  margin: .7rem 0 0;
}
.byline .rubric { color: var(--accent); }
.byline span { white-space: nowrap; }
.byline span + span::before { content: "·"; margin: 0 .45rem; color: var(--muted); }

/* ---------- La une ---------- */
.lead { padding-top: 3.2rem; }
.lead-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: 2.8rem; align-items: stretch; }
.lead-art { background: var(--paper-2); display: flex; align-items: center; }
.lead-art svg { display: block; width: 100%; height: auto; }
.lead h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2.9vw, 2.35rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
  hyphens: manual;
}
.lead h2 a { color: var(--navy); text-decoration: none; }
.lead h2 a:hover { color: var(--accent); }
.lead p.chapo { margin: 0; font-size: var(--t-body); color: var(--ink-2); max-width: 34rem; }
.more {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  text-decoration: none;
  padding: .85rem 1.5rem;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.more:hover { background: var(--accent); color: var(--paper); }
.more:active { transform: translateY(1px); }

/* ---------- Grille d'articles ----------
   Cinq articles dans trois colonnes : le premier occupe deux colonnes et
   porte son dessin, ce qui remplit la grille au lieu de laisser un trou. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2.4rem; }
.card h3 { margin: 0 0 .6rem; font-size: var(--t-sub); line-height: 1.22; font-weight: 400; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: 34rem; }

.card--lead { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: center; }
.card--lead h3 { font-size: var(--t-head); line-height: 1.18; }
.card--lead .card-art { background: var(--paper-2); }
.card--lead .card-art svg { display: block; width: 100%; height: auto; }

/* ---------- Encadré de bas de page d'accueil ---------- */
.standfirst {
  margin: 4rem 0 0;
  background: var(--paper-2);
  padding: 2rem 2.2rem;
}
.standfirst-in { columns: 2; column-gap: 2.6rem; }
.standfirst p { margin: 0 0 .9rem; font-size: var(--t-small); line-height: 1.6; }
.standfirst p:last-child { margin-bottom: 0; }

/* ---------- Article ---------- */
.article { padding-top: 3rem; }
.article-head { max-width: 44rem; margin: 0 auto; text-align: center; }
.article-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
  hyphens: manual;
}
.article-chapo { font-size: var(--t-body); color: var(--ink-2); margin: 0 auto; max-width: 36rem; }
.article-art { max-width: 48rem; margin: 2.4rem auto 3rem; background: var(--paper-2); }
.article-art svg { display: block; width: 100%; height: auto; }

.prose { max-width: 36rem; margin: 0 auto; }
.prose > p { margin: 0 0 1.3rem; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.6rem;
  line-height: .82;
  padding: .1em .14em 0 0;
  color: var(--accent);
}
.prose h2 {
  margin: 3rem 0 1rem;
  font-size: var(--t-head);
  line-height: 1.25;
  font-weight: 400;
  color: var(--navy);
}
.prose h3 { margin: 2rem 0 .6rem; font-size: var(--t-sub); font-weight: 600; color: var(--navy-soft); }
.prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose ul { list-style: none; padding-left: 0; margin: 0 0 1.4rem; }
.prose ul > li { position: relative; padding-left: 1.4rem; }
.prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: .45rem; height: .45rem;
  background: var(--accent);
  transform: rotate(45deg);
}
.prose dl { margin: 0 0 1.5rem; }
.prose dt { font-weight: 600; color: var(--navy); margin-top: 1rem; }
.prose dd { margin: .15rem 0 0; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

/* Exergue : il reprend le texte de l'article, donc pas de guillemets (certains
   extraits en contiennent déjà). Il sort de la mesure au lieu de porter un filet. */
.pull {
  margin: 2.8rem -2rem;
  padding: 0;
  font-size: var(--t-head);
  line-height: 1.35;
  color: var(--navy);
  font-style: italic;
  text-wrap: balance;
}
.pull p { margin: 0; }

.note {
  margin: 2.4rem 0;
  background: var(--paper-2);
  padding: 1.4rem 1.6rem;
  font-size: var(--t-small);
  line-height: 1.6;
}
.note p { margin: 0 0 .7rem; }
.note p:last-child { margin-bottom: 0; }
.note-title {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .02em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 .6rem;
}

.article-foot {
  max-width: 36rem;
  margin: 3rem auto 0;
  background: var(--paper-2);
  padding: 1.2rem 1.4rem;
  font-size: var(--t-small);
  color: var(--muted);
}

.related { padding-top: 6.5rem; }

/* ---------- Pages statiques ---------- */
.page { padding-top: 3rem; max-width: 42rem; }
.page h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.12;
  font-weight: 400;
  color: var(--navy);
  text-wrap: balance;
}
.page h2 { margin: 2.6rem 0 .8rem; font-size: var(--t-head); font-weight: 400; color: var(--navy); }
.page h3 { margin: 1.8rem 0 .5rem; font-size: var(--t-sub); font-weight: 600; color: var(--navy-soft); }
.page p, .page li { font-size: var(--t-small); line-height: 1.6; }
.page ul { padding-left: 1.1rem; }
.page li { margin-bottom: .45rem; }
.page dl { margin-bottom: 1.4rem; }
.page dt { font-weight: 600; color: var(--navy); margin-top: .9rem; }
.page dd { margin: .1rem 0 0; }
.page table { width: 100%; border-collapse: collapse; margin: 1.3rem 0 1.8rem; font-size: var(--t-small); }
.page th, .page td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.page th { font-family: var(--sans); font-size: var(--t-label);  letter-spacing: .02em; font-weight: 600; color: var(--navy); }

/* ---------- 404 ---------- */
.err { padding: 5rem 0; text-align: center; }
.err-code { font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--accent-soft); margin: 0; }
.err h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400; color: var(--navy); margin: .4rem 0 1rem; }
.err p { font-size: var(--t-small); }
.err-links {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center;
  font-family: var(--sans); font-size: var(--t-label); letter-spacing: .02em;
}

/* ---------- Pied de page ---------- */
.footer { margin-top: 6rem; background: var(--navy); color: var(--paper-3); }
.footer a { color: var(--paper-3); }
.footer a:hover { color: var(--accent-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
  gap: 2.4rem;
  padding-top: 3.4rem;
  padding-bottom: 2.6rem;
}
.footer-mono { color: var(--accent-soft); width: 3.2rem; margin-bottom: .9rem; }
.footer-mono svg { display: block; width: 100%; height: auto; }
.footer-name { margin: 0 0 .6rem; font-size: var(--t-sub); color: var(--paper); }
.footer-tag { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--paper-3); }
.footer-head {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .02em;
  font-weight: 600;
  color: var(--accent-soft);
  margin: 0 0 .9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; font-size: var(--t-small); }
.footer-legal p { margin: 0; font-size: var(--t-small); line-height: 1.75; }
.footer-base {
  background: var(--navy-deep);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  padding-top: 1.3rem; padding-bottom: 1.3rem;
  font-family: var(--sans); font-size: var(--t-label); letter-spacing: .04em;
}
.footer-base p { margin: 0; }

/* ---------- Bandeau cookies ----------
   Panneau compact ancré en bas à droite : il recouvre une fraction de la page
   au lieu d'une bande pleine largeur, et disparaît définitivement au clic. */
.cookiebar {
  position: fixed; right: 1.5rem; bottom: 1.5rem; left: auto; z-index: 40;
  width: min(26rem, calc(100vw - 3rem));
  background: var(--navy);
  color: var(--paper);
  box-shadow: 0 10px 30px rgba(21, 36, 64, .28); /* taste-skill-ignore : vrai calque flottant */
}
.cookiebar[hidden] { display: none; }
.cookiebar-in { display: block; padding-top: 1.3rem; padding-bottom: 1.3rem; }
.cookiebar-text { margin: 0 0 1.1rem; font-size: var(--t-small); line-height: 1.55; }
.cookiebar a { color: var(--accent-soft); }
.cookiebar a:hover { color: var(--paper); }
.cookiebar-btn {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--navy);
  border: 0;
  padding: .9rem 1.6rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.cookiebar-btn:hover { background: var(--accent); color: var(--paper); }
.cookiebar-btn:active { transform: translateY(1px); }

/* ---------- Adaptatif ---------- */
@media (max-width: 62rem) {
  .lead-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .lead p.chapo, .card p { max-width: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--lead { grid-column: span 2; grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
  .page table { display: block; overflow-x: auto; }
  .wrap { padding-left: 1.2rem; padding-right: 1.2rem; }
  .section, .related { padding-top: 4rem; }
  .cards { grid-template-columns: 1fr; gap: 2.4rem; }
  .card--lead { grid-column: auto; grid-template-columns: 1fr; gap: 1.2rem; }
  .nav ul { justify-content: space-between; }
  .nav a { padding: .95rem .55rem; letter-spacing: .06em; }
  .standfirst { padding: 1.6rem 1.4rem; }
  .standfirst-in { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.4rem; }
  .cookiebar { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
  .cookiebar-in { padding-left: 1.2rem; padding-right: 1.2rem; }
  .prose > p:first-of-type::first-letter { font-size: 3rem; }
  .pull { margin-left: 0; margin-right: 0; }
  .article-head { text-align: left; }
  .article-chapo { max-width: none; }
}

/* ---------- Mouvement ----------
   Une seule séquence, à l'ouverture de la première page-écran : le titre du
   journal, le filet, la navigation puis les éléments de la une entrent en
   décalé. Aucun script : le contenu reste visible si l'animation ne joue pas. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .masthead-title,
  .masthead-rule,
  .masthead-sub,
  .nav ul,
  .lead h2,
  .lead .chapo,
  .lead .byline,
  .lead .more,
  .lead-art { animation: rise .62s var(--ease) both; }

  .masthead-title { animation-delay: .02s; }
  .masthead-rule  { animation-delay: .10s; }
  .masthead-sub   { animation-delay: .16s; }
  .nav ul         { animation-delay: .22s; }
  .lead h2        { animation-delay: .30s; }
  .lead .chapo    { animation-delay: .38s; }
  .lead .byline   { animation-delay: .46s; }
  .lead .more     { animation-delay: .54s; }
  .lead-art       { animation: fade .8s var(--ease) .36s both; }

  .card h3 a, .footer a { transition: color .18s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; animation: none !important; transition: none !important; }
}