/* ==========================================================================
   Gélule Autobronzante — Feuille de style principale
   Design sobre, teintes chaudes, CTA orange. Sans JavaScript.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  --orange: #C15408;
  --orange-dark: #A24400;
  --orange-bright: #E4670A;
  --orange-soft: #FBE7D4;
  --amber: #F59E0B;
  --sand: #FBF3E9;
  --sand-2: #F6E9D8;
  --cream: #FFFBF6;
  --ink: #2A2320;
  --ink-soft: #5A4F47;
  --line: #ECDFCF;
  --line-strong: #D8C6AF;
  --white: #FFFFFF;
  --green: #2E7D5B;
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow: 0 6px 22px rgba(90, 60, 25, .09);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1120px;
  --readw: 760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 18px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--orange); }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); line-height: 1.25; font-weight: 700; }
h1 { font-size: 2.15rem; margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; margin: 2.2em 0 .7em; letter-spacing: -.005em; }
h3 { font-size: 1.25rem; margin: 1.8em 0 .5em; }
h4 { font-size: 1.08rem; margin: 1.5em 0 .4em; color: var(--ink-soft); }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }
em { font-style: italic; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

/* ---------- Header / navigation (menu CSS-only) ---------- */
.site-header {
  background: rgba(255, 251, 246, .92);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand .dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FFD9A8, var(--orange) 72%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); flex: none; }
.brand-logo { height: 50px; width: auto; display: block; }
@media (max-width: 640px){ .brand-logo { height: 40px; } }
.footer-logo { height: 46px; width: auto; display: block; margin-bottom: 6px; }
.nav-toggle, .nav-toggle-label { display: none; }
.nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .98rem; padding: 8px 12px; border-radius: 8px; }
.nav-menu a:hover { color: var(--orange-dark); background: var(--sand); }
.nav-menu .btn-nav { background: var(--orange); color: #fff; padding: 9px 16px; }
.nav-menu .btn-nav:hover { background: var(--orange-dark); color: #fff; }
.nav-scrim { display: none; }

/* ---------- Boutons / CTA ---------- */
.btn {
  display: inline-block; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px; padding: 14px 28px; font-size: 1.02rem;
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease; text-align: center;
}
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(228,103,10,.28); }
.btn-primary:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--orange-dark); border: 2px solid var(--line-strong); }
.btn-ghost:hover { background: var(--sand); color: var(--orange-dark); border-color: var(--orange); }
.btn-lg { padding: 16px 34px; font-size: 1.08rem; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1000px 460px at 82% -8%, var(--orange-soft), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; padding-top: 70px; padding-bottom: 62px; }
.hero h1 { font-size: 2.7rem; }
.eyebrow { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); background: var(--orange-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; }
.hero p.lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-visual { aspect-ratio: 1 / 1; border-radius: 26px; background:
    radial-gradient(circle at 34% 30%, #FFE0B4, var(--amber) 45%, var(--orange) 96%);
  box-shadow: var(--shadow); display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 78%, rgba(255,255,255,.32), transparent 45%); }
.hero-visual span { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; text-align: center; padding: 0 24px; text-shadow: 0 1px 8px rgba(120,60,10,.25); z-index: 1; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; }
.home-figure { margin: 0; }
.home-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
/* Figures paysage : pleine largeur de la PAGE (bord à bord), comme les
   couvertures d'article, quel que soit le device. On casse la contrainte du
   container avec la technique full-bleed (width:100vw + marge négative). */
.home-figure-wide { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; margin-top: 6px; margin-bottom: 34px; border-radius: 0; }
.home-figure-wide img { width: 100%; height: clamp(200px, 40vw, 560px); aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; display: block; }

/* ---------- Sections ---------- */
.section { padding: 62px 0; }
.section-tight { padding: 30px 0 8px; }
.section-tight + .section { padding-top: 26px; }
.section-tint { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Blog index : chapô SEO + texte de fond */
.blog-intro { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
/* Blocs de contenu placés directement dans un .container : ils épousent la
   largeur du container (pas de double marge) pour un rendu pleine largeur. */
.container > .article-body,
.container > .blog-intro { max-width: none; padding-left: 0; padding-right: 0; }
.blog-intro .blog-chapo { font-size: 1.14rem; line-height: 1.75; color: var(--ink-soft); border-left: 4px solid var(--orange); padding-left: 18px; margin: 0; }
.blog-outro { padding-top: 8px; border-top: 1px solid var(--line); }
.blog-outro h2 { scroll-margin-top: 90px; }
.blog-outro h2:first-child { margin-top: .2em; }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

/* ---------- Grilles de cartes ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .12s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-dark); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 14px; font-weight: 800; }
.card h3 { margin-top: 0; font-size: 1.16rem; }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: .98rem; }

/* ---------- Cartes articles ---------- */
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .12s ease; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card .thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--sand-2), var(--orange-soft)); display: grid; place-items: center; color: var(--orange-dark); font-family: var(--serif); font-size: 1.05rem; text-align: center; padding: 16px; }
.post-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card .tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-dark); }
.post-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--orange-dark); }
.post-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.post-card .more { margin-top: auto; font-weight: 700; font-size: .92rem; color: var(--orange-dark); text-decoration: none; padding-top: 6px; }
.post-card .more:hover { text-decoration: underline; }

/* ---------- Contenu d'article ---------- */
.article { background: var(--white); }
.article-head { background: linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%); border-bottom: 1px solid var(--line); padding: 46px 0 40px; }
.breadcrumb { font-size: .86rem; color: var(--ink-soft); margin-bottom: 14px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: 6px; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-dark); }
.article-meta { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }
.article-body { max-width: var(--maxw); margin: 0 auto; padding: 42px 22px 20px; }
.article-body .chapo { font-size: 1.18rem; color: var(--ink-soft); border-left: 4px solid var(--orange); padding-left: 18px; margin-bottom: 1.6em; }
.article-body h2 { scroll-margin-top: 90px; }
.article-body ul, .article-body ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.article-body li { margin-bottom: .5em; }
.article-body ul li::marker { color: var(--orange); }
.article-body ol li::marker { color: var(--orange-dark); font-weight: 700; }
/* Bloc longform de l'accueil : il réutilise .article-body (conçu pour les pages
   article, après un hero) mais se trouve déjà dans une .section paddée. On supprime
   le padding vertical et la marge de tête redondants pour éviter un grand vide. */
.home-longform { padding-top: 0; padding-bottom: 0; }
.home-longform > :first-child { margin-top: 0; }

/* Réponse position zéro */
.answer-box { background: var(--sand); border: 1px solid var(--line-strong); border-left: 5px solid var(--orange); border-radius: var(--radius-sm); padding: 18px 22px; margin: 0 0 1.8em; }
.answer-box p { margin: 0; }
.answer-box .label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-dark); margin-bottom: 6px; }

/* Encadré remarque / prudence */
.note { background: #F4F9F5; border: 1px solid #CDE7D6; border-left: 5px solid var(--green); border-radius: var(--radius-sm); padding: 16px 20px; margin: 1.6em 0; }
.note .label { display: block; font-weight: 700; color: var(--green); margin-bottom: 4px; font-size: .95rem; }
.note p { margin: 0; font-size: .97rem; }
/* Note en dernier élément d'un bloc : pas de marge basse superflue (le padding
   de section suffit), pour éviter un vide excessif avant la section suivante. */
.lead-block .note:last-child { margin-bottom: 0; }

/* Tableaux (charte : bordure 2px, centrés) */
.table-wrap { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.article-table { border-collapse: collapse; border: 2px solid var(--line-strong); margin: 0 auto; width: 100%; font-size: .96rem; background: var(--white); }
.article-table caption { caption-side: top; text-align: left; font-size: .88rem; color: var(--ink-soft); margin-bottom: 8px; font-style: italic; }
.article-table th, .article-table td { border: 1px solid var(--line-strong); padding: 11px 14px; text-align: left; vertical-align: top; }
.article-table thead th { background: var(--orange-soft); color: var(--ink); font-weight: 700; }
.article-table tbody th[scope="row"] { background: var(--sand); font-weight: 700; }
.article-table tbody tr:nth-child(even) td { background: #FFFDFA; }

/* FAQ native (details/summary, sans JS) */
.faq { margin: 1.6em 0 0; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--white); overflow: hidden; }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; position: relative; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 1.4rem; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { background: var(--sand); }
.faq .faq-a { padding: 4px 20px 18px; color: var(--ink-soft); }
.faq .faq-a p { margin: 0; }

/* CTA de fin d'article */
.article-cta { max-width: var(--maxw); margin: 30px auto; padding: 0 22px; }
.article-cta .inner { background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 130%); color: #fff; border-radius: var(--radius); padding: 30px 30px; text-align: center; box-shadow: var(--shadow); }
.article-cta h2 { color: #fff; margin: 0 0 8px; font-size: 1.4rem; }
.article-cta p { color: rgba(255,255,255,.94); margin: 0 auto 18px; max-width: 52ch; }
.article-cta .btn-primary { background: #fff; color: var(--orange-dark); box-shadow: 0 6px 16px rgba(120,60,10,.25); }
.article-cta .btn-primary:hover { background: #FFF3E6; color: var(--orange-dark); }

/* Articles liés */
.related { border-top: 1px solid var(--line); background: var(--sand); }

/* Images d'article */
.article-hero { max-width: none; margin: 0; padding: 0; }
.article-hero img { width: 100%; height: clamp(190px, 40vw, 520px); object-fit: cover; border-radius: 0; box-shadow: none; display: block; }
.article-figure { max-width: 640px; margin: 2.2em auto; }
.article-figure img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.article-figure figcaption { font-size: .85rem; color: var(--ink-soft); text-align: center; margin-top: 8px; font-style: italic; }
/* Vignette image dans les cartes */
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .thumb { padding: 0; }

/* ---------- Bandeau transparence affiliation ---------- */
.affiliate-note { background: var(--sand-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 14px 18px; font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.6em; }
.affiliate-note strong { color: var(--ink); }

/* ---------- Page produit (modèle affiliation) ---------- */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-top: 44px; }
.product-media { position: sticky; top: 90px; }
.product-figure { aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(135deg, var(--sand-2), var(--orange-soft)); display: grid; place-items: center; color: var(--orange-dark); font-family: var(--serif); border: 1px solid var(--line); }
.product-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.badge { font-size: .78rem; font-weight: 700; background: var(--orange-soft); color: var(--orange-dark); padding: 6px 12px; border-radius: 999px; }
.product-info h1 { font-size: 2rem; }
.rating { color: var(--amber); font-weight: 700; margin-bottom: 8px; }
.rating .count { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.price { font-size: 1.7rem; font-weight: 800; color: var(--ink); margin: 6px 0 4px; }
.price .old { font-size: 1rem; color: var(--ink-soft); text-decoration: line-through; font-weight: 500; margin-left: 8px; }
.product-cta { margin: 22px 0; display: flex; flex-direction: column; gap: 10px; }
.product-cta small { color: var(--ink-soft); text-align: center; }
.spec-list { list-style: none; padding: 0; margin: 18px 0; }
.spec-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.spec-list li::before { content: "✓"; color: var(--green); font-weight: 800; flex: none; }

/* ---------- Footer ---------- */
.site-footer { background: #241E1A; color: #E9DED2; padding: 52px 0 26px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
.footer-grid h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: #C9BBAC; text-decoration: none; font-size: .95rem; }
.footer-grid a:hover { color: var(--amber); }
.footer-brand p { color: #B8A896; font-size: .93rem; max-width: 34ch; }
.footer-disclosure { border-top: 1px solid #3A322C; margin-top: 34px; padding-top: 20px; font-size: .84rem; color: #A99A88; }
.footer-disclosure p { margin: 0 0 8px; }
.footer-bottom { border-top: 1px solid #3A322C; margin-top: 18px; padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; color: #9C8D7C; }
.footer-bottom a { color: #9C8D7C; text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }

/* ---------- Formulaire de contact ---------- */
.contact-form .field { margin-bottom: 18px; }
.contact-form label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--ink); font-size: .98rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; background: var(--white); color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--amber); outline-offset: 1px; border-color: var(--orange); }
.contact-form textarea { resize: vertical; }
.contact-form .req { color: var(--orange-dark); }
.contact-form .field-check label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.contact-form .field-check input { margin-top: 4px; flex: none; }
.contact-form .form-note { font-size: .88rem; color: var(--ink-soft); margin: 6px 0 18px; }
.contact-form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.error-list { margin: .4em 0 0; padding-left: 1.2em; }

/* ---------- Utilitaires ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-lg { margin-top: 34px; }
.items-center { align-items: center; }
.brand-light, .brand-light:hover { color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lead-block { max-width: var(--maxw); margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; padding-bottom: 48px; }
  .hero-visual { max-width: 100%; }
  .hero h1 { font-size: 2.2rem; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .product { grid-template-columns: 1fr; }
  .product-media { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  h1 { font-size: 1.8rem; }
  .hero h1 { font-size: 1.95rem; }
  h2 { font-size: 1.38rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Images carrées (visuels SVG) en pleine largeur sur mobile, comme les couvertures */
  .article-figure { max-width: none; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 1.6em; margin-bottom: 1.6em; border-radius: 0; }
  .article-figure img { border-radius: 0; box-shadow: none; }
  .article-figure figcaption { padding: 0 22px; }
  /* Le backdrop-filter du header piège les enfants position:fixed (bloc conteneur) :
     on le désactive sur mobile pour que le panneau se positionne bien plein écran. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cream); }
  /* Menu mobile CSS-only */
  .nav-toggle-label { display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 210; }
  .nav-toggle-label span { width: 26px; height: 3px; background: var(--ink); border-radius: 2px; }
  .nav-menu {
    position: fixed; top: 0; right: 0; height: auto; max-height: 100dvh;
    width: min(82vw, 320px);
    background: var(--cream); flex-direction: column; align-items: stretch; gap: 0;
    padding: 78px 22px 16px; transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -10px 0 34px rgba(50,32,14,.28);
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 16px;
    z-index: 150; overflow-y: auto;
  }
  .nav-menu a { padding: 14px 12px; font-size: 1.08rem; color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-menu li:last-child a { border-bottom: none; }
  .nav-menu a:hover { background: var(--sand); color: var(--orange-dark); }
  .nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-toggle-label { position: fixed; right: 16px; top: 14px; z-index: 220; }
  /* Fond semi-transparent cliquable pour fermer le menu */
  .nav-toggle:checked ~ .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 140;
    background: rgba(34,24,12,.44); cursor: pointer;
  }
  /* Tableaux : cartes empilées sur mobile (pas de mots coupés, pas de défilement) */
  .table-wrap { overflow: visible; }
  .article-table { border: none; width: 100%; font-size: .95rem; }
  .article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .article-table tbody { display: block; }
  .article-table tbody tr {
    display: block; border: 2px solid var(--line-strong); border-radius: 12px;
    margin: 0 0 16px; overflow: hidden; background: var(--white);
  }
  .article-table tbody tr:nth-child(even) td { background: var(--white); }
  .article-table th[scope="row"] {
    display: block; width: 100%; background: var(--orange-soft); color: var(--ink);
    font-size: 1.02rem; font-weight: 700; padding: 11px 15px; border: none;
    border-bottom: 1px solid var(--line-strong);
  }
  .article-table td {
    display: flex; gap: 12px; align-items: baseline; width: 100%;
    padding: 10px 15px; border: none; border-bottom: 1px solid var(--line);
  }
  .article-table tr td:last-child { border-bottom: none; }
  .article-table td::before {
    content: attr(data-label); flex: 0 0 40%; max-width: 40%;
    font-weight: 700; color: var(--ink-soft); font-size: .84rem;
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.35;
  }
}

/* ---------- Impression ---------- */
@media print {
  .site-header, .site-footer, .article-cta, .related, .hero-cta { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}

/* ---------- Respect des préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* --- AdSense : réservation d'espace + repli propre (voir /assets/js/ads.js) --- */
.ad-top,.ad-inarticle{margin-left:auto;margin-right:auto}
.ad-top ins.adsbygoogle{min-height:250px}
.ad-inarticle ins.adsbygoogle{min-height:180px}
/* Ne replier un emplacement que si Google confirme n'avoir rien à diffuser */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}