/* ==========================================================
   Like2BeGeek : feuille de style commune v2
   Charte Pixel Heart : bleu électrique, denim, orange passion
   Mode clair / sombre via [data-theme]
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root {
  --electrique:  #1E5EFF;
  --denim:       #1560BD;
  --navy:        #0F2547;
  --passion:     #FF6B35;
  --passion-soft:#FFE9DF;

  --bg:          #f5f7fb;
  --paper:       #ffffff;
  --ink:         #16202e;
  --muted:       #5b6779;
  --line:        #e2e7ef;
  --brand:       var(--electrique);
  --brand-dark:  var(--denim);
  --brand-soft:  #e4edff;
  --accent:      var(--passion);
  --accent-soft: var(--passion-soft);
  --header-bg:   #eef3fc;
  --band-1:      #dbe6f9;
  --band-2:      #c8d9f4;
  --band-3:      #b3cbf0;
  --nav-bg:      rgba(238, 243, 252, .92);
  --shadow-1: 0 1px 2px rgba(15,37,71,.05), 0 1px 3px rgba(15,37,71,.07);
  --shadow-2: 0 2px 4px rgba(15,37,71,.06), 0 4px 12px rgba(15,37,71,.09);
  --shadow-3: 0 6px 16px rgba(15,37,71,.09), 0 12px 32px rgba(15,37,71,.11);
}
[data-theme="dark"] {
  --bg:          #0b1830;
  --paper:       #13233f;
  --ink:         #e8eef9;
  --muted:       #9fb0c8;
  --line:        #24395c;
  --brand:       #5b8cff;
  --brand-dark:  #8db0ff;
  --brand-soft:  #1b2f52;
  --accent:      #ff8557;
  --accent-soft: #3a2417;
  --header-bg:   #0f2038;
  --band-1:      #16294a;
  --band-2:      #1b3157;
  --band-3:      #223a63;
  --nav-bg:      rgba(15, 32, 56, .92);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.35);
  --shadow-3: 0 6px 16px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Lato', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
body { transition: background .25s ease, color .25s ease; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Barre de navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-nav .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-right: auto;
}
.site-nav .nav-logo img { width: 28px; height: 28px; }
.site-nav .nav-links {
  display: flex;
  gap: .35rem;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
}
.site-nav .nav-links a {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.site-nav .nav-links a:hover { background: var(--brand-soft); color: var(--brand); }
.site-nav .nav-links a[aria-current="page"] { background: var(--brand); color: #fff; }

/* Burger mobile (case à cocher, zéro JS) */
.nav-toggle-input { display: none; }
.nav-burger {
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  padding: .4rem .2rem;
}
.nav-burger .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}
.nav-burger .bars span {
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform .2s, opacity .2s;
}
@media (max-width: 760px) {
  .site-nav .nav-inner { flex-wrap: wrap; gap: .5rem; }
  /* Une seule marge automatique dans la barre mobile : celle du logo. Elle
     pousse l'interrupteur et le burger en bloc contre le bord droit. */
  .site-nav .nav-logo { order: 1; margin-right: auto; }
  .site-nav .theme-switch { order: 3; margin-left: 0; }
  .nav-burger { display: inline-flex; order: 4; margin-left: 0; }
  .site-nav .nav-links {
    order: 5;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: .5rem 0 .75rem;
  }
  .site-nav .nav-links a { display: block; padding: .65rem .85rem; border-radius: 10px; }
  .nav-toggle-input:checked ~ .nav-links { display: flex; padding-bottom: 0; }
  .nav-toggle-input:checked ~ .nav-burger .bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-burger .bars span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-burger .bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}


/* Lien LinkedIn discret dans la navigation */
.nav-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--muted);
  opacity: .8;
  transition: color .2s, background .2s, opacity .2s;
  flex: 0 0 auto;
}
.nav-linkedin:hover { color: #0a66c2; background: var(--brand-soft); opacity: 1; }
/* Sur desktop, le lien reste une icône seule : le libellé n'est là que pour
   le menu déroulant mobile. Le nom accessible vient de l'attribut aria-label,
   identique dans les deux cas. */
.nav-linkedin .nav-li-label { display: none; }
.nav-linkedin svg { flex: 0 0 auto; }

/* Sur mobile, LinkedIn quitte la barre et devient la dernière entrée du menu
   burger. C'est le MÊME élément du HTML qui change de place et de forme :
   aucun lien dupliqué, donc aucun doublon pour les robots, et l'entrée est
   retirée de l'arbre d'accessibilité (display:none) tant que le menu est
   fermé. Le déplacement se fait uniquement par l'ordre flex, sans JavaScript. */
@media (max-width: 760px) {
  .nav-linkedin { display: none; }
  .nav-toggle-input:checked ~ .nav-linkedin {
    display: inline-flex;
    order: 6;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: .6rem;
    padding: .65rem .85rem;
    margin: 0 0 .75rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 700;
    opacity: 1;
  }
  .nav-linkedin .nav-li-label { display: inline; }
}

/* ---------- Interrupteur clair / sombre ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: var(--muted);
}
.theme-switch .track {
  width: 42px;
  height: 23px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .25s;
  flex: 0 0 auto;
}
.theme-switch .thumb {
  position: absolute;
  top: 2.5px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  line-height: 1;
  transition: transform .25s;
}
[data-theme="dark"] .theme-switch .track { background: var(--brand); }
[data-theme="dark"] .theme-switch .thumb { transform: translateX(18px); }
.theme-switch .thumb::before { content: "☀️"; }
[data-theme="dark"] .theme-switch .thumb::before { content: "🌙"; }

/* ---------- Fil d'ariane ---------- */
.breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: .65rem 1.5rem 0;
  font-size: .82rem;
  color: var(--muted);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; }
.breadcrumb li + li::before { content: "›"; margin: 0 .45rem; color: var(--muted); }
.breadcrumb a { color: var(--brand); font-weight: 700; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted); }
/* Fil d'ariane centré, sous le bloc titre */
main .breadcrumb, .cv-wrap .breadcrumb {
  max-width: none;
  margin: 0 0 1.1rem;
  padding: .2rem .25rem 0;
  text-align: center;
}
.site-header .breadcrumb {
  max-width: none;
  margin: 1.4rem auto 0;
  padding: 0 1rem;
}

/* ---------- En-tête héro avec bandes ---------- */
.site-header {
  position: relative;
  background: var(--header-bg);
  color: var(--ink);
  padding: 4.5rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.site-header::before,
.site-header::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.site-header::before {
  width: 140%; height: 80px;
  background: var(--band-1);
  top: 18%; left: -20%;
  transform: rotate(-6deg);
  opacity: .8;
}
.site-header::after {
  width: 120%; height: 50px;
  background: var(--band-2);
  bottom: 8%; right: -10%;
  transform: rotate(4deg);
  opacity: .7;
}
.site-header .band-1 {
  position: absolute;
  width: 90%; height: 30px;
  background: var(--band-3);
  top: 55%; left: -10%;
  transform: rotate(-3deg);
  opacity: .55;
  border-radius: 999px;
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 2; }
.site-header .logo {
  width: 68px; height: 68px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-1);
}
.site-header h1 {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -.025em;
  margin-bottom: .6rem;
}
.site-header .lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---------- Contenu principal ---------- */
main {
  max-width: 1100px;
  margin: -3rem auto 0;
  padding: 0 1.5rem 4rem;
  position: relative;
  z-index: 1;
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 2.5rem 0 1rem;
  padding-left: .25rem;
}
.section-title:first-child { margin-top: 0; }

/* Bloc "à lire sur le blog" : l'écart avec la section précédente est porté
   par le bloc lui même. Son titre est le premier enfant de sa tête, la règle
   .section-title:first-child lui remettait donc sa marge haute à zéro et le
   bloc venait se coller au contenu du dessus. */
.bloc-blog { margin-top: 2.5rem; }

/* Tête d'un bloc "à lire sur le blog" : titre de section à gauche, lien
   vers la liste complète à droite, repliés l'un sous l'autre sur mobile. */
.bloc-blog-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem 1.5rem;
}
.bloc-blog-tout {
  color: var(--brand);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  margin-bottom: 1rem;
}
.bloc-blog-tout:hover { text-decoration: underline; }

/* Vignette d'une carte d'article. Cette règle ne vivait que dans le style
   inline des pages du blog : les blocs de maillage posés sur les autres
   pages du site héritaient d'une image sans width ni object-fit, donc
   écrasée à la hauteur imposée. Elle est désormais commune à tout le site,
   et object-fit: cover garantit une image RECADRÉE, jamais déformée. */
.card .card-thumb {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  margin-bottom: .7rem;
}

/* ---------- Grille de cartes ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--brand);
}
.card .icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: var(--shadow-1);
}
.card .icon img { width: 36px; height: 36px; }
.card h2, .card h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.card .tagline {
  font-size: .82rem;
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: -.3rem;
}
.card .desc { font-size: .92rem; color: var(--muted); flex: 1; }
.card .cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--brand);
  font-weight: 700;
  font-size: .92rem;
  margin-top: .25rem;
  transition: gap .2s;
}
a.card:hover .cta { gap: .6rem; }
.card.placeholder {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  cursor: default;
}
.card.placeholder .icon { background: var(--paper); color: var(--muted); }
.card.placeholder .label { font-weight: 700; color: var(--muted); }
.card.placeholder .sub { font-size: .82rem; color: var(--muted); opacity: .8; }

/* ---------- Carte d'article de blog ----------
   La carte n'est plus un <a> englobant : c'est un <article>. Le lien
   principal est porté par le titre, et son pseudo élément ::after couvre
   toute la carte, qui reste donc cliquable en entier. La pastille de
   catégorie est un second lien posé au dessus de cette couche (z-index),
   ce qui évite tout lien imbriqué : le HTML reste valide et chaque lien
   garde une destination unique pour les lecteurs d'écran comme pour les
   robots. Aucun JavaScript. */
.card-post { position: relative; gap: .85rem; }
.card-post:hover,
.card-post:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--brand);
}
.card-post:hover .cta,
.card-post:focus-within .cta { gap: .6rem; }
/* Titre de carte : l'interligne de 1.5 du corps de texte est trop généreux
   pour un titre de deux lignes, il faisait respirer la carte au point de
   désolidariser les deux lignes. 1.22 les rapproche sans les coller. */
.card-post h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -.01em; }

/* Bloc de tête d'une carte : pastille de catégorie, titre, puis date.
   La pastille passe AU DESSUS du titre : elle annonce le sujet avant que
   le titre ne soit lu, et la carte gagne une hiérarchie claire. */
.card-post .post-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}
.card-post .post-link { color: inherit; }
/* Couche cliquable qui recouvre la carte entière */
.card-post .post-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
}
.card-post .post-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 3px; }
.card-post:hover .post-link { color: var(--brand); }

/* Rangée de pastilles de catégorie, en tête du bloc, au dessus de la
   couche cliquable. La principale vient toujours en premier. */
.card-post .post-cats {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
}

/* Pastille de catégorie, en tête du bloc, au dessus de la couche cliquable */
.card-post .post-cat {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--brand-soft);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
  transition: background .2s, color .2s, border-color .2s;
}
.card-post .post-cat::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: currentColor;
  opacity: .75;
}
a.post-cat:hover,
a.post-cat:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] a.post-cat:hover,
[data-theme="dark"] a.post-cat:focus-visible { color: #0b1830; }
/* Sur une page catégorie, la pastille pointe la page courante : elle est
   marquée comme active, à l'image des pills de la barre de filtres */
.card-post .post-cat[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .card-post .post-cat[aria-current="page"] { color: #0b1830; }
/* Article sans catégorie : simple étiquette, sans lien */
.card-post .post-cat-plain { background: var(--paper); border-color: var(--line); color: var(--muted); }
/* Catégories secondaires : même forme, traitement plus discret, pour que la
   catégorie principale (celle qui porte l'URL) reste immédiatement lisible */
.card-post .post-cat-sec {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-weight: 700;
}
.card-post .post-cat-sec::before { opacity: .45; }
a.post-cat-sec:hover,
a.post-cat-sec:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Carte compacte des blocs de maillage ----------
   Les blocs "à lire sur le blog" posés en bas des pages du site sont des
   passerelles, pas des résumés : la carte perd son extrait et son bouton,
   la vignette est plus basse et le titre est coupé à deux lignes. Résultat,
   une hauteur divisée par deux par rapport à la carte du hub, pour un bloc
   qui n'écrase plus le contenu de la page qui l'accueille. */
.card-post.card-compacte {
  padding: .9rem 1rem 1.1rem;
  gap: .6rem;
}
.card-post.card-compacte .card-thumb {
  /* 128 px plutôt que 104 : au delà, le recadrage d'une image 16/9 devient
     une bande panoramique où le sujet disparaît. La carte reste deux fois
     moins haute que celle du hub. */
  height: 128px;
  margin-bottom: 0;
  border-radius: 8px;
}
.card-post.card-compacte .icon { width: 44px; height: 44px; border-radius: 10px; font-size: 22px; }
.card-post.card-compacte .post-head { gap: .35rem; }
.card-post.card-compacte h2 {
  font-size: 1.02rem;
  /* Deux lignes maximum : un titre à rallonge ne fait plus grandir la carte,
     et toutes les cartes de la rangée gardent la même hauteur. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-post.card-compacte .post-cat { font-size: .68rem; padding: .22rem .6rem; }
.card-post.card-compacte .post-cat::before { width: 6px; height: 6px; }
.card-post.card-compacte .post-date { font-size: .76rem; }

/* Date de publication de la carte. L'espacement vient désormais du gap de
   .post-head, la marge du haut ferait double emploi. */
.card-post .post-date {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 0;
}
.card-post .post-date .post-maj { white-space: nowrap; }
.card-post .post-date .sep { margin: 0 .35rem; opacity: .6; }

@media (max-width: 600px) {
  .card-post .post-cat { font-size: .7rem; padding: .25rem .7rem; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-2); color: #fff; }
[data-theme="dark"] .btn-primary { color: #0b1830; }
.btn-outline { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Animation discrète des bandes du header ---------- */
@keyframes l2bg-drift-a {
  0%, 100% { transform: rotate(-6deg) translateX(0); }
  50% { transform: rotate(-4.5deg) translateX(26px); }
}
@keyframes l2bg-drift-b {
  0%, 100% { transform: rotate(4deg) translateX(0); }
  50% { transform: rotate(5.5deg) translateX(-22px); }
}
@keyframes l2bg-drift-c {
  0%, 100% { transform: rotate(-3deg) translateX(0); }
  50% { transform: rotate(-2deg) translateX(18px); }
}
.site-header::before { animation: l2bg-drift-a 18s ease-in-out infinite; }
.site-header::after { animation: l2bg-drift-b 24s ease-in-out infinite; }
.site-header .band-1 { animation: l2bg-drift-c 30s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .site-header::after, .site-header .band-1 { animation: none; }
}

/* ---------- Newsletter ---------- */
.newsletter {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
}
/* Respiration avant le bloc newsletter quand il suit le contenu de la page :
   le retrait bas de <main> ne suffit pas à le détacher visuellement du dernier
   bloc, surtout quand celui-ci est une grille de cartes (page /cv/).
   Ne s'applique pas quand la newsletter est imbriquée dans <main>
   (page /newsletter/), où elle fait partie du contenu. */
main + .newsletter,
.site-header + .newsletter { margin-top: 2rem; }
.newsletter .nl-inner {
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.newsletter h2 { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: .4rem; }
.newsletter p { color: var(--muted); font-size: .95rem; max-width: 55ch; margin: 0 auto .5rem; }
.newsletter form {
  display: flex;
  gap: .6rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 .4rem;
}
.newsletter input[type="email"] {
  font: inherit;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  min-width: 260px;
}
.newsletter input[type="email"]:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.newsletter .nl-rgpd { font-size: .75rem; opacity: .8; }

/* Case d'accord RGPD (opt-in obligatoire) : elle passe seule à la ligne
   sous le champ e-mail, alignée à gauche et volontairement discrète. */
.newsletter .nl-optin {
  /* Occupe toute la largeur du formulaire : passe sous le champ et le bouton */
  flex: 0 0 100% !important;
  width: 100% !important;
  order: 3;
  max-width: none;
  margin: .7rem 0 0;
  display: flex;
  justify-content: center;
}
.newsletter .nl-optin label {
  max-width: 46ch;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.newsletter .nl-optin input[type="checkbox"] {
  flex: 0 0 auto;
  margin: .18rem 0 0;
  accent-color: var(--brand);
}
.newsletter .nl-optin a { color: var(--brand); font-weight: 700; }
.newsletter .nl-optin a:hover { text-decoration: underline; }

/* ---------- Pied de page ---------- */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--muted);
  font-size: .85rem;
}
.site-footer a { color: var(--brand); font-weight: 700; }
.site-footer a:hover { text-decoration: underline; }
.site-footer nav { margin-bottom: .5rem; }
.site-footer nav a { margin: 0 .5rem; }

/* Ligne légale discrète du pied de page (mentions, confidentialité, cookies) */
.site-footer .footer-legal { margin-top: .5rem; font-size: .78rem; opacity: .85; }
.site-footer .footer-legal a { color: var(--muted); font-weight: 400; }
.site-footer .footer-cookies {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.site-footer .footer-legal a:hover,
.site-footer .footer-cookies:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Bouton "Revenir en haut de page" ---------- */
.scroll-top {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s;
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.scroll-top:hover { background: var(--brand-dark); box-shadow: var(--shadow-3); }
.scroll-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: none; }
}

@media (max-width: 600px) {
  .site-header { padding: 3rem 1.25rem 4rem; }
  .site-header h1 { font-size: 1.75rem; }
  main { padding: 0 1rem 3rem; }
}
@media print {
  .site-nav, .site-footer, .breadcrumb, .theme-switch, .scroll-top,
  .l2bg-consent, .l2bg-consent-open { display: none !important; }
  body { background: #fff; }
}