/* ───────────────────────────────────────────────
   Balades Philo' · feuille de style
   Couleurs : charte graphique 2025 + couleurs de l'app
   Typo : Josefin Sans (titres, à la place de Folies Bergère) + Roboto (textes)
   ─────────────────────────────────────────────── */
/* Polices hébergées sur le serveur (dossier /fonts) : aucune donnée envoyée à Google */
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/josefin-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/josefin-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); }


:root {
  /* Charte */
  --vert-fonce: #353f33;
  --vert-clair: #c0d7be;
  --bleu-fonce: #48617d;
  --bleu-clair: #c5d9f1;
  --orange: #f0833e;
  --jaune: #ffe906;
  /* App */
  --vert-app: #dde8d8;
  --vert-action: #588157;
  --sable: #f5f1e8;
  --texte: #2c342c;
  --texte-doux: #5f645e;
  --papier: #ffffff;

  --radius: 22px;
  --wrap: 1160px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titre: "Josefin Sans", "Roboto", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--texte); background: var(--papier); }
img, svg { display: block; max-width: 100%; }
a { color: var(--bleu-fonce); text-underline-offset: 3px; }
a:hover { color: var(--vert-action); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--font-titre); font-weight: 600; line-height: 1.05; letter-spacing: -0.005em; color: var(--vert-fonce); }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; max-width: 40em; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; position: relative; z-index: 1; }
.narrow { max-width: 760px; }
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 500; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--papier); padding: 8px 12px; }

/* ── Aplats de couleur + spirale en filigrane ─── */
[class*="c-"] { position: relative; }
.c-vert       { background: var(--vert-app);   color: var(--texte);      --motif: var(--vert-clair); }
.c-vert-clair { background: var(--vert-clair); color: var(--vert-fonce); --motif: #b0cbad; }
.c-vert-fonce { background: var(--vert-fonce); color: var(--vert-clair); --motif: #3e4a3c; }
.c-bleu       { background: var(--bleu-fonce); color: #fff;              --motif: #52708f; }
.c-bleu-clair { background: var(--bleu-clair); color: var(--texte);      --motif: #b3cbea; }
.c-orange     { background: var(--orange);     color: var(--vert-fonce); --motif: #e8763a; }
.c-jaune      { background: var(--jaune);      color: var(--vert-fonce); --motif: #f5dc00; }
.c-sable      { background: var(--sable);      color: var(--texte);      --motif: #ebe4d4; }
.c-bleu h1, .c-bleu h2 { color: #fff; }
.c-vert-fonce h1, .c-vert-fonce h2 { color: var(--vert-clair); }
.c-bleu-clair h1, .c-bleu-clair h2 { color: var(--bleu-fonce); }
.c-bleu a, .c-vert-fonce a { color: inherit; }

/* Spirale : vert foncé de la charte + transparence (comme sur les visuels imprimés).
   Change l'opacité ici pour la rendre plus ou moins visible. */
.spirale { position: absolute; color: var(--vert-fonce); opacity: .1; pointer-events: none; z-index: 0; }
.c-vert-fonce .spirale { color: #000; opacity: .2; } /* sur fond vert foncé, on assombrit un peu plus pour qu'elle reste visible */
.hero-spirale { width: clamp(320px, 46vw, 640px); right: -6%; top: -40px; }
.band-spirale { width: clamp(260px, 34vw, 460px); right: -4%; top: 50%; transform: translateY(-50%) rotate(-6deg); }
.page-head, .how { overflow: hidden; }

.vague { display: block; width: 100%; height: clamp(14px, 2.4vw, 32px); }
.vague--inverse { transform: scaleX(-1); }
.vague--vert-fonce { color: var(--vert-fonce); }
.vague--orange { color: var(--orange); }
.vague--bleu { color: var(--bleu-fonce); }

/* ── Boutons ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75em 1.4em; border-radius: 999px; border: 0;
  font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.btn--accent { background: var(--orange); color: var(--texte); }
.btn--accent:hover { background: var(--vert-fonce); color: var(--vert-app); }

/* ── En-tête ──────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid #e3ebe0; }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { color: var(--vert-fonce); flex: none; }
.brand .logo-svg { height: 46px; width: auto; }
.menu { margin-left: auto; }
.menu-toggle { display: none; }
.menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--texte); }
.menu a:hover { background: var(--vert-app); color: var(--vert-fonce); }
.menu a[aria-current="page"] { background: var(--vert-clair); }
.header-cta { flex: none; }

@media (max-width: 960px) {
  .header-cta { display: none; }
  .menu-toggle { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border: 0; background: none; cursor: pointer; border-radius: 12px; }
  .menu-toggle span { display: block; width: 24px; height: 2.5px; background: var(--vert-fonce); border-radius: 2px; }
  .menu.is-open .menu-toggle { background: var(--vert-app); }
  .menu nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid #e3ebe0; padding: 8px 16px 20px; }
  .menu.is-open nav { display: block; }
  .menu ul { flex-direction: column; }
  .menu a { padding: 12px; font-size: 1.15rem; }
}

/* ── Télécharger l'app : boutons orange (couleur des CTA) ─── */
.get-app { display: flex; gap: 16px; flex-wrap: wrap; }
.store { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.store .qr { width: 132px; height: 132px; background: var(--vert-fonce); padding: 10px; border-radius: 18px; }
.store-label {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  background: var(--orange); color: var(--texte); padding: 9px 18px; border-radius: 14px; font-weight: 700; font-size: 1.02rem;
}
.store-label small { font-weight: 500; font-size: .8rem; }
.store:hover .store-label { background: var(--vert-fonce); color: var(--vert-app); }

.get-app--compact { gap: 10px; }
.get-app--compact .qr { display: none; }

@media (max-width: 760px), (pointer: coarse) {
  .get-app .qr { display: none; }
  .get-app .store { flex: 1 1 150px; }
  .get-app .store-label { width: 100%; padding: 12px 18px; }
}

/* ── Accueil ──────────────────────────────────── */
/* Images détourées (fond transparent) posées sur le vert clair.
   Le texte occupe le haut vide de l'image, la vague et la photo sont dans l'image. */
.hero { overflow: hidden; padding-bottom: clamp(48px, 7vw, 110px); }
.hero-stage { display: grid; width: min(100%, 1180px); margin-inline: auto; }
.hero-stage > * { grid-area: 1 / 1; }
.hero-text {
  position: relative; z-index: 2; align-self: start;
  width: min(100% - 32px, 60%); margin-left: max(16px, 7%); padding-top: clamp(28px, 4vw, 56px);
}
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin-bottom: .2em; }
.hero-sub { font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; margin-bottom: .3em; }
.hero-tagline { font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.6rem); color: var(--bleu-fonce); min-height: 1.3em; margin-bottom: 18px; }
.hero-slides { position: relative; aspect-ratio: 1600 / 1375; margin-top: clamp(0px, 5vw, 72px); }
.hero-slides > img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hero-slides > img.is-active { opacity: 1; }
.carousel-dots { position: absolute; bottom: 3%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.carousel-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; }
.carousel-dots button[aria-current] { background: #fff; }

/* Tablette et téléphone : texte au-dessus, l'image remonte sous le texte */
@media (max-width: 900px) {
  .hero-stage { display: block; }
  .hero-text { width: auto; margin: 0 16px; }
  .hero-slides { margin-top: -20vw; }
}

.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; }
.intro h2 { margin: 0; }
.intro .prose { font-size: 1.15rem; }
@media (max-width: 760px) { .intro-grid { grid-template-columns: 1fr; } }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: block; font-family: var(--font-titre); font-size: 3.8rem; font-weight: 600; line-height: 1;
  color: var(--vert-fonce); margin-bottom: 10px;
}
.steps h3 { color: var(--bleu-fonce); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* Tuiles "Pour qui ?" : grands aplats des couleurs de la charte */
.tiles { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1; padding: 22px; border-radius: var(--radius); text-decoration: none; overflow: hidden; }
.tile-name { font-family: var(--font-titre); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.05; }
.tile-count { font-weight: 500; }
.tile:hover { transform: translateY(-3px); transition: transform .15s; }
.tile.c-vert-clair, .tile.c-orange, .tile.c-jaune, .tile.c-bleu-clair { color: var(--vert-fonce); }
.tile.c-bleu { color: #fff; }
.tile--outline { border: 2px dashed var(--vert-fonce); color: var(--vert-fonce); }
.tiles--small .tile { aspect-ratio: auto; min-height: 96px; }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr 1fr; } .tile { padding: 16px; } }

/* "Pour qui ?" : photo + bandeau de couleur avec le titre, drapeau jaune/orange */
.who { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.who-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.who-photo { background-image: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; position: relative; }
.who-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.who-photo .icon-svg { width: 34%; height: auto; opacity: .35; }
.who-name { flex: 1; padding: 16px 20px 18px; font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.1; }
.who-name.c-vert-clair, .who-name.c-bleu-clair { color: var(--vert-fonce); }
.who-name.c-bleu { color: #fff; }
.who-name.c-vert-fonce { color: var(--vert-clair); }
.who-card:hover .who-photo img { transform: scale(1.04); }
.who-card:hover .who-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.flag {
  position: absolute; top: 14px; left: 0; z-index: 1; padding: 5px 14px 5px 12px;
  border-radius: 0 999px 999px 0; font-family: var(--font); font-size: .88rem; font-weight: 700; color: var(--vert-fonce);
}
.flag--count { background: var(--jaune); }
.flag--soon { background: var(--orange); color: var(--texte); }
@media (max-width: 520px) { .who { grid-template-columns: 1fr 1fr; gap: 12px; } .who-name { padding: 12px 14px; } }

/* Fond : image BP_foot_orange.webp (vague + spirale, haut transparent) sur blanc.
   Sous l'image, un aplat orange prend le relais si le bloc est plus haut que l'image. */
.offer {
  background:
    url("../img/BP_foot_orange.webp") top center / 100% auto no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom / 100% calc(100% - 8vw) no-repeat,
    var(--papier);
  color: var(--texte);
  padding-top: calc(8.5vw + clamp(32px, 5vw, 72px));
  padding-bottom: clamp(48px, 7vw, 96px);
}
@media (max-width: 800px) {
  .offer { background-image: url("../img/BP_foot_orange-800.webp"), linear-gradient(var(--orange), var(--orange)); }
}
.offer h2 { max-width: 13em; color: var(--jaune); text-shadow: 0 2px 0 rgba(53, 63, 51, .4); }
.offer .store-label { background: var(--jaune); color: var(--vert-fonce); }
.offer .store:hover .store-label { background: var(--vert-fonce); color: var(--jaune); }
.offer p { font-size: 1.15rem; font-weight: 500; max-width: 28em; }
.offer-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px 56px; align-items: center; }
.offer .store .qr { background: var(--vert-fonce); }
@media (max-width: 760px) { .offer-grid { grid-template-columns: 1fr; } }

.band { padding-block: clamp(40px, 6vw, 72px); }
.band-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; }
.band h2 { margin: 0; }
@media (max-width: 760px) { .band-grid { grid-template-columns: 1fr; } }

/* ── Cartes de balades ────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; }
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover h3 { color: var(--vert-action); }
.cover { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover--placeholder { display: grid; place-items: center; }
.cover--placeholder .icon-svg { width: 34%; height: auto; opacity: .85; }
.card-body { padding-top: 14px; }
.card-body h3 { margin: 4px 0 6px; color: var(--texte); }
.card-body p { margin: 0 0 8px; font-size: .98rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; font-weight: 500; }
.card-time { color: var(--bleu-fonce); font-weight: 700; }
.badge { padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.badge--new { background: var(--jaune); color: var(--vert-fonce); }
.badge--soon { background: var(--bleu-clair); color: var(--vert-fonce); }
.badge--free { background: var(--orange); color: var(--texte); }

.series + .series { margin-top: 64px; }
.series-head { max-width: 46em; margin-bottom: 24px; }
.series-count { font-weight: 700; color: var(--bleu-fonce); }
.empty { max-width: 560px; }

/* ── En-têtes de pages ────────────────────────── */
.page-head { padding-block: clamp(40px, 6vw, 72px); }
.page-head h1 { max-width: 16em; }
.breadcrumb { margin-bottom: 14px; font-size: .92rem; font-weight: 500; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; opacity: .6; }
.breadcrumb a { color: inherit; text-decoration: none; opacity: .85; }
.breadcrumb a:hover { text-decoration: underline; opacity: 1; }
.breadcrumb [aria-current] { opacity: .7; }

/* ── Fiche balade ─────────────────────────────── */
.balade-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.balade-head .card-meta { margin-bottom: 10px; }
.page-head .badge { background: var(--papier); color: var(--vert-fonce); }
.cover--large { aspect-ratio: 4 / 3; }
.page-head .cover--placeholder { background: rgba(255, 255, 255, .3); }
.balade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
@media (max-width: 860px) {
  .balade-head, .balade-grid { grid-template-columns: 1fr; }
  .balade-head .cover { max-width: 420px; }
}
.facts { background: var(--vert-app); border-radius: var(--radius); padding: 24px; position: sticky; top: 100px; }
.facts dl { margin: 0; }
.facts dl > div { padding-block: 12px; border-bottom: 1px solid var(--vert-clair); }
.facts dt { font-size: .85rem; font-weight: 700; color: var(--bleu-fonce); }
.facts dd { margin: 2px 0 0; }
.facts dd p { margin: 0 0 4px; font-size: .95rem; }
.fact-note { font-size: .88rem; margin-top: 4px !important; color: var(--texte-doux); }
.facts-app { padding-top: 16px; }

.prose { max-width: 40em; }
.prose h2 { margin-top: 1.4em; }
.prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 4px solid var(--orange); font-size: 1.15rem; }
.prose img { border-radius: var(--radius); }

.series-nav { background: var(--sable); }
.series-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 0; list-style: none; counter-reset: s; }
.series-steps li { counter-increment: s; background: var(--papier); border-radius: 16px; padding: 16px; }
.series-steps li::before { content: counter(s); display: block; font-family: var(--font-titre); font-weight: 600; font-size: 1.8rem; color: var(--bleu-fonce); }
.series-steps li[aria-current] { background: var(--vert-fonce); color: var(--vert-app); }
.series-steps li[aria-current]::before { color: var(--jaune); }

/* ── Blog ─────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.post-card a { display: block; height: 100%; padding: 24px; border-radius: var(--radius); background: var(--bleu-clair); text-decoration: none; color: inherit; }
.post-card a:hover { background: var(--vert-app); }
.post-card img { border-radius: 14px; margin-bottom: 14px; }
.post-card time { font-size: .9rem; color: var(--bleu-fonce); font-weight: 500; }
.post-card h3 { margin: 6px 0 8px; }
.post-card p { margin: 0; }
.article-app { border-top: 2px solid var(--vert-app); }

/* ── FAQ ──────────────────────────────────────── */
.faq-group + .faq-group { margin-top: 48px; }
.faq { border-bottom: 1px solid var(--vert-clair); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 1.1rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 12px; font-size: 1.6rem; color: var(--orange); font-weight: 500; }
.faq[open] summary::after { content: "–"; }
.faq .prose { padding-bottom: 12px; }

/* ── Formulaires ──────────────────────────────── */
input, select, textarea { font: inherit; color: inherit; }
.newsletter label:first-child { display: block; margin-bottom: 10px; }
.newsletter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input[type="email"] { flex: 1 1 200px; padding: .7em 1em; border-radius: 999px; border: 2px solid var(--vert-clair); background: #fff; color: var(--texte); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; margin-top: 10px; line-height: 1.4; }
.consent input { margin-top: 3px; }
.contact-form { display: grid; gap: 16px; margin-top: 24px; }
.contact-form label { display: grid; gap: 6px; font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea { padding: .7em 1em; border: 2px solid var(--vert-clair); border-radius: 14px; background: #fff; }
.contact-form .consent { display: flex; font-weight: 400; }
.contact-form button { justify-self: start; }
.contact-mail { font-size: 1.4rem; font-weight: 700; }
.todo { background: var(--jaune); color: var(--vert-fonce); padding: 12px 16px; border-radius: 12px; }

/* ── Pied de page ─────────────────────────────── */
.site-footer { background: var(--bleu-fonce); color: #e6eef8; padding-top: 64px; }
.site-footer a { color: #fff; }
.site-footer h2 { font-family: var(--font); font-size: 1rem; font-weight: 700; color: #e6eef8; letter-spacing: 0; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { text-decoration: underline; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: 40px; }
.brand--footer { color: #fff; display: inline-block; margin-bottom: 14px; }
.brand--footer .logo-svg { height: 52px; }
.site-footer .newsletter input[type="email"] { border-color: transparent; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 28px; margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .9rem; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

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

/* Case à cocher blanche dans le pied de page */
.site-footer .consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; background: #fff; border: 2px solid #fff; cursor: pointer;
}
.site-footer .consent input[type="checkbox"]:checked {
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23353f33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--jaune);
}
.site-footer .consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* Le bouton "Télécharger l'app" de l'en-tête mène aux boutons du pied de page : on les signale */
#telecharger { scroll-margin-top: 120px; }
#telecharger:target .store-label { outline: 3px solid var(--jaune); outline-offset: 3px; }

/* Cartes « Pour qui ? » pas encore ouvertes : bouton qui ouvre la fenêtre « Bientôt » */
button.who-card { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.who-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.soon-dialog {
  max-width: min(440px, calc(100% - 32px)); border: 0; border-radius: var(--radius);
  padding: 28px; background: var(--vert-app); color: var(--texte);
  box-shadow: 0 20px 60px rgba(44, 52, 44, .35);
}
.soon-dialog::backdrop { background: rgba(44, 52, 44, .45); }
.soon-dialog h2 { margin-bottom: .4em; }
.soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn--ghost { background: transparent; color: var(--vert-fonce); box-shadow: inset 0 0 0 2px var(--vert-fonce); }
.btn--ghost:hover { background: var(--vert-fonce); color: var(--vert-app); }
#newsletter { scroll-margin-top: 120px; }
.wrap.narrow.prose { max-width: 760px; }

/* ── Blog : défi et pensée de la semaine, archives ── */
.week-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-bottom: 56px; }
.week-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); text-decoration: none; overflow: hidden; }
.week-kicker { font-weight: 700; font-size: .95rem; }
.week-text { font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; }
.week-meta { font-weight: 500; }
.week-more { margin-top: auto; padding-top: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.week-card.c-orange, .week-card.c-bleu-clair { color: var(--texte); }
.week-card:hover .week-more { text-decoration-thickness: 2px; }
.posts-title { margin-bottom: 24px; }
.archive { list-style: none; padding: 0; margin: 0; }
.archive-item { padding: 22px 0; border-bottom: 1px solid var(--vert-clair); scroll-margin-top: 110px; }
.archive-item.is-current { background: var(--sable); margin-inline: -20px; padding-inline: 20px; border-radius: 14px; border-bottom: 0; }
.archive-item:target { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 14px; }
.archive-meta { font-size: .92rem; color: var(--texte-doux); margin-bottom: 6px; }
.archive-text { font-size: 1.2rem; font-weight: 500; margin: 0; }
.archive-quote { margin: 0; font-family: var(--font-titre); font-size: 1.5rem; line-height: 1.3; }
.archive-quote p { margin: 0 0 6px; }
.archive-quote footer { font-family: var(--font); font-size: 1rem; color: var(--texte-doux); }
.archive + .article-app { margin-top: 48px; padding-top: 32px; }

/* « Pour qui ? » : les catégories à venir, séparées et atténuées */
.who-later-title { margin: 48px 0 0; padding-top: 28px; border-top: 2px dashed var(--vert-clair); font-family: var(--font-titre); font-size: 1.4rem; color: var(--texte-doux); }
.who--later { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); max-width: 820px; }
.who--later .who-card { opacity: .85; filter: saturate(.75); }
.who--later .who-card:hover { opacity: 1; filter: none; }
.who--later .who-photo { aspect-ratio: 16 / 9; }
.who--later .who-name { font-size: 1.2rem; padding: 12px 16px 14px; }
.who-photo { isolation: isolate; }

/* En-tête avec photo ronde (page À propos) */
.head-with-photo { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); }
.head-photo { width: clamp(120px, 18vw, 180px); height: auto; aspect-ratio: 1; border-radius: 50%; flex: none; border: 5px solid var(--papier); box-shadow: 0 8px 24px rgba(44, 52, 44, .15); }
@media (max-width: 560px) { .head-with-photo { flex-direction: column; align-items: flex-start; } }

/* Défis et pensées : cartes portrait comme les visuels de l'app.
   Haut de l'image : infos en petit + texte centré. Bas de l'image : rien. */
.archive--cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.archive-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: flex-start; scroll-margin-top: 110px; box-shadow: 0 6px 20px rgba(44, 52, 44, .12); }
.archive-card:target { outline: 3px solid var(--vert-fonce); outline-offset: 3px; }
.archive-panel { width: 100%; height: 52%; padding: 16px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.archive-card.has-bg { background: #fff var(--bg) center bottom / cover no-repeat; color: #3c4a4a; }
.archive-card:not(.has-bg) .archive-panel { height: 100%; }
.archive-panel .archive-meta { margin: 0; font-size: .78rem; color: inherit; opacity: .85; }
.archive-theme { margin: 2px 0 0; font-size: .78rem; font-weight: 500; opacity: .85; }
.archive-card .archive-text, .archive-card .archive-quote { margin: auto 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; }
.archive-quote p { margin: 0; }
.archive-quote footer { margin-top: 8px; font-weight: 400; font-size: .9rem; }
.archive--cards + .article-app { max-width: 760px; }
/* Blog : défi et pensée de la semaine, même visuel ; le lien est sous la carte */
.week-cards:has(.has-bg) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px)); justify-content: center; }
.week-item { display: flex; flex-direction: column; gap: 12px; }
.week-item .week-more { margin: 0; padding: 0; align-self: center; color: var(--texte); }
.week-panel { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.week-card.has-bg { aspect-ratio: 3 / 4; padding: 0; background: #fff var(--bg) center bottom / cover no-repeat; color: #3c4a4a; box-shadow: 0 6px 20px rgba(44, 52, 44, .12); }
.week-card.has-bg .week-panel { flex: 0 0 52%; padding: 16px 20px; gap: 2px; text-align: center; align-items: center; }
.week-card.has-bg .week-kicker { order: -2; font-size: .8rem; }
.week-card.has-bg .week-meta { font-size: .78rem; font-weight: 400; }
.week-card.c-orange.has-bg .week-meta { order: -1; }
.week-card.has-bg .week-text { margin: auto 0; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.week-card.c-bleu-clair.has-bg .week-text { margin-bottom: 4px; }
.week-card.c-bleu-clair.has-bg .week-meta { margin-bottom: auto; font-size: .9rem; }
.who--later img { object-position: center 20%; }
.nl-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter { position: relative; }
.nl-message { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--vert-clair); color: var(--texte); font-weight: 500; }
.nl-message.is-error { background: #ffe1d2; }
/* Bandeau « aucun cookie » : discret, en bas à gauche */
.privacy-note { position: fixed; left: 16px; bottom: 16px; z-index: 50; max-width: 380px; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--vert-fonce); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); font-size: .92rem; }
.privacy-note[hidden] { display: none; }
.privacy-note p { margin: 0; }
.privacy-note a { color: var(--vert-clair); }
.privacy-note .btn { flex: none; padding: .55em 1.1em; }
@media (max-width: 560px) { .privacy-note { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media print { .privacy-note { display: none !important; } }
/* Pages catégories : texte de présentation + mini-FAQ */
.cat-seo { padding-top: 0; }
.cat-seo .cat-faq-title { margin-top: 40px; }
.cat-faq-more { margin-top: 20px; }
/* Bandeau « À la une » (promo, info de saison) */
.a-la-une { padding-top: clamp(28px, 5vw, 48px); padding-bottom: 0; }
.a-la-une .wrap { display: grid; gap: 20px; }
.une-card { display: grid; grid-template-columns: 1fr; border-radius: var(--radius); overflow: hidden; color: var(--texte); }
.une-card.has-img { grid-template-columns: minmax(180px, 30%) 1fr; }
.une-card.has-img { position: relative; }
.une-img { position: absolute; left: 0; top: 0; width: 30%; min-width: 180px; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.une-card.has-img .une-body { grid-column: 2; min-height: 220px; }
.une-body { padding: clamp(20px, 3vw, 32px); }
.une-body h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.une-body p { margin: 0 0 10px; }
.une-kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.une-note { font-size: .92rem; font-weight: 500; }
.une-more summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 10px; }
.une-more[open] summary { display: none; }
.btn--light { background: #fff; color: var(--texte); }
.btn--light:hover { background: var(--vert-fonce); color: #fff; }
@media (max-width: 600px) { .une-card.has-img { grid-template-columns: 1fr; } .une-img { position: static; width: 100%; height: 170px; } .une-card.has-img .une-body { grid-column: 1; min-height: 0; } }