/* Signal B (Thierry, 2026-10-02) : en-tête et pied bleu nuit, logo blanc sur le site seulement.
   Maquettes de référence hors dépôt : design/signal-b-accueil.html, signal-b-article.html. */
:root {
  --nuit: #0D1B2A; --nuit-filet: #2B3D52; --sur-nuit: #E8EEF5; --sur-nuit-doux: #9FB0C3;
  --fond: #F4F6F9; --carte: #fff; --encre: #0D1B2A; --texte: #25323F; --doux: #5B6B7D;
  --filet: #D8DFE7; --vert: #0B7D72; --vert-vif: #3DDBC4;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}
body { margin: 0; background: var(--fond); font: 1.0625rem/1.65 var(--sans); color: var(--texte); }
a { color: var(--vert); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
main { max-width: 46rem; margin: 0 auto; padding: 0 1rem 3rem; }
main.wide { max-width: 72rem; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem; z-index: 10; }
h1, h2, h3, h4 { color: var(--encre); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -.02em; }
.byline { color: var(--doux); font: .8125rem var(--sans); padding: .6rem 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.byline a { color: var(--encre); font: 600 .875rem var(--sans); text-decoration: none; }
img, video { max-width: 100%; height: auto; }
iframe { display: block; max-width: 100%; margin: 1rem auto; border: 0; }
iframe[src*="youtube"], iframe[src*="vimeo"], iframe[src*="dailymotion"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hero { margin: 1.25rem 0; }
.hero img { display: block; border-radius: 10px; }
figure { margin: 1rem 0; max-width: 100%; }
figcaption { color: var(--doux); font-size: 0.875rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.alignleft { float: left; margin: 0.25rem 1rem 0.5rem 0; }
.alignright { float: right; margin: 0.25rem 0 0.5rem 1rem; }
figure.alignleft, figure.alignright { max-width: 50%; }
.body::after { content: ""; display: table; clear: both; }
table { border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
td, th { border: 1px solid var(--filet); padding: 0.25rem 0.5rem; }
blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid var(--vert-vif); background: var(--carte); color: var(--encre); }
blockquote.twitter-tweet { border-left-color: #1d9bf0; }

.contact form { display: grid; gap: 1rem; max-width: 36rem; }
.contact label { display: block; font-weight: 600; }
.contact input, .contact textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem; border: 1px solid var(--filet); border-radius: 6px; background: #fff; }
.contact .errorlist { color: #b42318; margin: 0; padding: 0; list-style: none; }
.contact button { justify-self: start; font: 600 1rem var(--sans); padding: .6rem 1.4rem; background: var(--nuit); color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.contact-trap { position: absolute; left: -10000px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rubrique { margin: 2.5rem 0; }
.rubrique h2 { font-size: 1.75rem; margin: 0 0 1.1rem; }
.rubrique h2 a { color: inherit; text-decoration: none; }
.cards, .une { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { background: var(--carte); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(13, 27, 42, .08); display: flex; flex-direction: column; }
.card a, .item a { color: inherit; text-decoration: none; }
.card a:hover h3, .item a:hover h3 { color: var(--vert); }
.card a:focus-visible h3, .item a:focus-visible h3 { text-decoration: underline; }
.meta span + span::before { content: " · "; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.22; margin: 1rem 1.1rem .4rem; overflow-wrap: anywhere; }
.card .meta { color: var(--vert); font: .75rem var(--sans); letter-spacing: .02em; margin: 0 1.1rem 1.1rem; }
.card > p:not(.meta) { margin: 0 1.6rem 1.6rem; color: #3E4C5C; }
.card-big h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: .6rem 1.6rem 1.6rem; }
.card-big .meta { margin: 1.5rem 1.6rem 0; order: -1; }
.card-big > a { display: contents; }
.card-big img { order: -2; }
.pagination { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; margin: 2rem 0; font-size: .875rem; }
.pagination a { text-decoration: none; }
.pagination [aria-current] { font-weight: 700; color: var(--encre); }

/* « À la une » : le premier article en grand, les suivants en liste numérotée (Signal). */
.une { margin-top: 2.5rem; counter-reset: une; }
.une .card-big { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  .une { grid-template-columns: minmax(0, 1fr) 22.5rem; grid-auto-flow: dense; gap: 0 2.5rem; align-content: start; }
  .une .card-big { grid-column: 1; grid-row: 1 / span 10; align-self: start; }
  .une .card + .card { grid-column: 2; background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--filet); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1rem 0; counter-increment: une; }
  .une .card + .card::before { content: counter(une, decimal-leading-zero); grid-row: 1 / span 2; font: 700 1.375rem var(--sans); color: var(--vert); }
  .une .card + .card img { display: none; }
  .une .card + .card h3 { font-size: 1.0625rem; margin: 0 0 .25rem; }
  .une .card + .card .meta { margin: 0; color: var(--doux); font-size: .6875rem; }
  .une .card:nth-child(2) { border-top: 2px solid var(--nuit); }
  .une .card:last-child { border-bottom: 0; }
}

/* En-tête, menu et pied de page : bleu nuit, logo blanc. */
.top-bar { background: var(--nuit); color: var(--sur-nuit-doux); font: .75rem var(--sans); border-bottom: 1px solid var(--nuit-filet); }
.top-bar .wrap { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; min-height: 2rem; }
.top-bar .today { color: var(--sur-nuit); text-transform: uppercase; letter-spacing: .04em; }
.top-bar a { color: var(--sur-nuit-doux); text-decoration: none; }
.top-bar a:hover { color: var(--vert-vif); }
.top-bar .social { margin-left: auto; }
.social { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-header { background: var(--nuit); color: var(--sur-nuit); font-family: var(--sans); }
.site-header > .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 5.75rem; }
.logo img { display: block; height: 50px; width: auto; }
.menu-toggle { display: none; font: 500 .875rem var(--sans); padding: .55rem 1rem; background: none; color: var(--sur-nuit); border: 1px solid var(--nuit-filet); border-radius: 8px; }
.main-nav { border-top: 1px solid var(--nuit-filet); }
.menu, .menu ul { margin: 0; padding: 0; list-style: none; }
.menu > li { position: relative; display: inline-block; }
.menu a { display: block; color: var(--sur-nuit); text-decoration: none; }
.menu > li > a { padding: .8rem .85rem; font-size: .9375rem; font-weight: 500; }
.menu > li:first-child > a { padding-left: 0; }
.menu > li > a:hover, .menu > li > a:focus { color: var(--vert-vif); }
.menu ul { display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 15rem; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(13, 27, 42, .2); padding: .35rem 0; }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.menu ul a { padding: .5rem 1rem; font-size: .875rem; color: var(--encre); }
.menu ul a:hover, .menu ul a:focus { background: var(--fond); color: var(--vert); }
@media (max-width: 48rem) {
  .menu-toggle { display: block; }
  .site-header > .wrap { min-height: 3.75rem; }
  .logo img { height: 30px; }
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .menu > li { display: block; }
  .menu > li > a { padding: .65rem 0; }
  .menu ul { display: block; position: static; background: none; box-shadow: none; padding: 0 0 .5rem 1rem; }
  .menu ul a { color: var(--sur-nuit-doux); padding: .4rem 0; }
  .top-bar .today { display: none; }
}
.site-footer { margin-top: 3rem; background: var(--nuit); color: var(--sur-nuit-doux); font: .875rem/1.6 var(--sans); }
.site-footer a { color: var(--sur-nuit); }
.site-footer a:hover { color: var(--vert-vif); }
.site-footer strong { color: var(--sur-nuit); }
.site-footer img { display: block; height: 40px; width: auto; }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding-top: 2.5rem; padding-bottom: 2rem; }
.sub-footer { border-top: 1px solid var(--nuit-filet); padding: .9rem 0; font: .75rem var(--sans); }
.search { display: flex; gap: .25rem; font: .875rem var(--sans); }
.search input { font: inherit; padding: .5rem .75rem; border: 1px solid var(--filet); border-radius: 8px; min-width: 0; background: #fff; }
.search button { font: inherit; padding: .5rem .9rem; background: var(--nuit); color: #fff; border: 0; border-radius: 8px; }
.site-header .search input { background: transparent; border-color: var(--nuit-filet); color: var(--sur-nuit); font-size: .8125rem; }
.site-header .search input::placeholder { color: var(--sur-nuit-doux); }
.site-header .search button { background: var(--nuit-filet); }
.site-header .search { margin-left: auto; margin-right: 1rem; }
@media (max-width: 48rem) {
  .site-header > .wrap { flex-wrap: wrap; gap: .75rem; padding-top: .75rem; padding-bottom: .75rem; }
  .site-header .search { order: 3; flex-basis: 100%; margin: 0; }
  .site-header .search input { flex: 1; }
}
.breadcrumb { color: var(--doux); font: .75rem var(--sans); margin: 1.5rem 0 1rem; }
.breadcrumb a { text-decoration: none; }
.terms { font: .875rem var(--sans); color: var(--doux); }
.author-box { margin: 2rem 0; padding: 1.1rem 1.25rem; background: var(--carte); border: 1px solid var(--filet); border-radius: 10px; font: .9375rem/1.5 var(--sans); }
.author-box p { margin: .25rem 0; }
.author-box a { color: var(--encre); }
.lecture { display: none; }
@media (max-width: 48rem) {
  .lecture { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 3px; background: var(--nuit); }
  .lecture span { display: block; height: 100%; background: var(--vert-vif); transform: scaleX(0); transform-origin: left; }
}
.related .cards { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.related h2, .widget h2 { font: .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); padding-bottom: .6rem; border-bottom: 2px solid var(--nuit); }

/* Blocs de la page d'accueil et colonne des articles */
.plus { font: .8125rem var(--sans); margin: 1rem 0 0; }
.plus a { text-decoration: none; }
.plus a::after { content: " →"; }
.voir-plus { font: inherit; color: var(--vert); background: none; border: 1px solid var(--vert); border-radius: 8px; padding: .45rem 1rem; cursor: pointer; }
.voir-plus[disabled] { opacity: .5; cursor: default; }
figure.bandeau { margin: 2rem 0; }
figure.bandeau img { display: block; width: 100%; height: auto; border-radius: 12px; }
.article-colonnes { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.colonne { font-family: var(--sans); padding-top: 1.5rem; }
.widget { margin: 0 0 2rem; }
.widget h2 a { color: inherit; text-decoration: none; }
.widget img { display: block; width: 100%; height: auto; border-radius: 8px; }
.widget-articles { margin: 0; padding: 0; list-style: none; }
.widget-articles li { padding: .7rem 0; border-bottom: 1px solid var(--filet); }
.widget-articles a { color: var(--encre); text-decoration: none; font: 600 .9375rem/1.3 var(--sans); }
.widget-articles a:hover { color: var(--vert); }
.widget-articles .meta { display: block; color: var(--doux); font: .6875rem var(--sans); margin-top: .2rem; }
@media (min-width: 62rem) {
  main.avec-colonne .article-colonnes { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

/* Page Logo / Presse : le logo bleu, sur blanc. */
.presse { display: grid; gap: 1.5rem; margin: 2rem 0; }
.presse figure { margin: 0; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; padding: 2rem; }
.presse img { display: block; margin: 0 auto 1.25rem; max-height: 9rem; width: auto; }
.presse figcaption { text-align: center; }

/* Couleurs des rubriques (Catégories › couleur ; palette choisie avec Thierry le 2026-10-09).
   --c : liseré, titres et étiquette ; --c-fond : le fond coloré. Le texte reste lisible dessus. */
.rubrique { --c: var(--nuit); --c-fond: #E9EEF4; }
.c-bleu { --c: #1C5D99; --c-fond: #E8F0F8; }
.c-vert { --c: #096A61; --c-fond: #E3F3F1; }
.c-ocre { --c: #8A5300; --c-fond: #FBF1E1; }
.c-bordeaux { --c: #9B2C3A; --c-fond: #F7E7E9; }
.c-violet { --c: #5B4B9A; --c-fond: #EEEBF7; }
.c-terre { --c: #A3402A; --c-fond: #F9EAE5; }
.sep-lisere { border-top: 4px solid var(--c); padding-top: 1rem; }
.sep-lisere > h1, .sep-lisere > h2, .sep-fond > h2 { color: var(--c); }
.sep-fond { background: var(--c-fond); border-radius: 14px; padding: 1.5rem; }
.sep-etiquette { border-bottom: 1px solid var(--filet); padding-bottom: 1.5rem; }
.sep-etiquette > h2 { display: inline-block; background: var(--c); color: #fff; padding: .35rem .9rem; border-radius: 6px; font-size: 1.25rem; }
.breadcrumb a[class^="c-"] { color: var(--c); font-weight: 600; }

/* Formes des rubriques : grille (.cards), une grande et des petites, liste, titres seuls. */
.item h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; margin: 0 0 .25rem; }
.item .meta { color: var(--vert); font: .6875rem var(--sans); margin: 0; }
.forme-titres .item, .forme-liste .item { padding: .75rem 0; border-bottom: 1px solid var(--filet); }
.forme-titres .item:first-child, .forme-liste .item:first-child { padding-top: 0; }
.forme-titres .item:last-child, .forme-liste .item:last-child { border-bottom: 0; }
.forme-une { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .forme-une { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.avec-vignette { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.avec-vignette > a { display: contents; }
.avec-vignette img { grid-row: 1 / span 4; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.avec-vignette > a > :not(img), .avec-vignette > .meta { grid-column: 2; }
.avec-vignette .mention-communique { justify-self: start; }
.deux-colonnes { columns: 2 18rem; column-gap: 2.5rem; }
.deux-colonnes .item { break-inside: avoid; }
.deux-colonnes .item:first-child { padding-top: .75rem; }
.sep-fond .card { box-shadow: none; }
.cards .card > p:not(.meta) { margin: -.5rem 1.1rem 1.1rem; font-size: .875rem; line-height: 1.5; }
.forme-une .card-big h3 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); }

/* Sous-catégories d'une rubrique : colonnes, onglets (static/js/onglets.js) ou liens. */
.sous-rubriques { display: grid; gap: 1.5rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.sous-rubrique h3 { font: 600 .8125rem var(--sans); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--c); }
.sous-rubrique h3 a { color: var(--c); text-decoration: none; }
.sous-rubrique .item { padding: .6rem 0; border-bottom: 1px solid var(--filet); }
.sous-rubrique .item:last-child { border-bottom: 0; }
.sous-rubrique .item h3 { font: 600 .9375rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; border: 0; padding: 0; margin: 0 0 .2rem; color: var(--encre); }
.onglets-actifs { display: block; }
.onglets-actifs .sous-rubrique > h3 { display: none; }
.onglets-liste { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.onglets-liste button { font: 500 .875rem var(--sans); padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--filet); background: #fff; color: var(--encre); cursor: pointer; }
.onglets-liste button[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.sous-liens { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sous-liens a { display: block; font: .8125rem var(--sans); padding: .3rem .8rem; border: 1px solid var(--c); border-radius: 999px; color: var(--c); text-decoration: none; background: #fff; }

/* Communiqués de partenaires */
.mention-communique { display: inline-block; font: 600 .6875rem var(--sans); text-transform: uppercase; letter-spacing: .06em; background: var(--nuit); color: #fff; padding: .15rem .5rem; border-radius: 4px; }
.card .mention-communique { margin: 1rem 1.1rem 0; align-self: flex-start; }
.card-communique.card { outline: 2px solid var(--nuit); }
.item .mention-communique { margin-bottom: .3rem; }
article > .mention-communique { margin: 0; }

/* Publicités (menu Publicités) et habillage (Paramètres › Habillage du site) */
.pub { margin: 0 auto; text-align: center; }
.pub img, .habillage-bandeau img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.pub-mention { display: block; font: .625rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin-bottom: .3rem; }
.pub-bloc { margin: 2.5rem 0; }
.avec-pub { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .avec-pub { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.habillage-bandeau { background: var(--nuit); text-align: center; }
.habillage-bandeau img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.habillage-lien { display: none; }
@media (min-width: 62rem) {
  body.habille { background: var(--habillage-couleur, var(--fond)) var(--habillage, none) no-repeat fixed center top; }
  body.habille main { position: relative; z-index: 1; background: var(--fond); }
  .habillage-lien { display: block; position: fixed; inset: 0; z-index: 0; }
  .top-bar, .site-header, .site-footer, .habillage-bandeau { position: relative; z-index: 2; }
}

/* Icônes des réseaux et boutons de partage */
.icone { width: 1.125rem; height: 1.125rem; fill: currentColor; display: block; flex: none; }
.social .reseau { display: flex; align-items: center; justify-content: center; }
.top-bar .social { align-items: center; }
.top-bar .icone { width: 1rem; height: 1rem; }
.site-footer .social .reseau { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nuit-filet); color: #fff; }
.site-footer .social .reseau:hover { background: var(--vert); color: #fff; }
.main-nav .wrap { display: flex; align-items: center; gap: 1rem; }
.main-nav .menu { flex: 1; }
.main-nav .social .reseau { color: var(--sur-nuit); }
.main-nav .social .reseau:hover { color: var(--vert-vif); }
.widget .social .reseau { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nuit); color: #fff; }
.partage { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; font: .8125rem var(--sans); color: var(--doux); }
.partage a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border: 1px solid var(--filet); border-radius: 999px; background: #fff; color: var(--encre); text-decoration: none; font-size: .75rem; }
.partage a:hover { border-color: var(--vert); color: var(--vert); }
.partage .icone { width: .9375rem; height: .9375rem; }
@media (max-width: 48rem) { .main-nav .wrap { display: block; } .main-nav .social { padding: .5rem 0 1rem; } }