/* ═══════════════════════════════════════════════════════════════════════════
   cv-textes.css — MISE EN PAGE DES PAGES DE TEXTE (validée par Ange le 04/10/2026)
   Maquettes : revue https://claude.ai/artifact/61iZq25YVTNnTLm81fMS8x
   Demande : « centrer les grands titres, travailler la mise en page des
   textes, faut que ce soit beau et propre ». Condition d'Ange à la
   validation : « je veux toujours voir les photos en fond d'écran ».
   D'où, par rapport à la maquette : le panneau de lecture est SEMI-
   TRANSPARENT (la photo du site se voit autour et au travers), mais assez
   dense pour que le texte reste lisible sur la photo la plus claire.

   Chargée APRÈS le <style> de chaque page : à spécificité égale, elle gagne.
   Elle ne touche que quatre gabarits, reconnus à leurs classes :
     A. articles et guides     .article-header + .article-body   (181 pages)
     B. pages légales          .page > .hero + .container (.toc, .section)
     C. mentions légales       .container:has(.fact-row)
     D. FAQ                    .faq-hero + .faq-container
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cvt-panneau: rgba(13, 15, 20, .80);
  --cvt-panneau-2: rgba(23, 26, 33, .86);
  --cvt-filet: rgba(255, 255, 255, .10);
  --cvt-texte: #D9DDE5;
  --cvt-titre: #FFFFFF;
  --cvt-doux: #B4BCC9;
  --cvt-accent: #3B82F6;
  --cvt-accent-clair: #93C5FD;
  --cvt-orange: #FB923C;
  --cvt-mesure: 68ch;
}

/* ── Commun : le panneau de lecture ──────────────────────────────────────── */
.article-body,
.page .container,
.container:has(.fact-row),
.faq-container {
  background: var(--cvt-panneau);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cvt-filet);
  border-radius: 22px;
}
@media (prefers-reduced-transparency: reduce) {
  .article-body, .page .container, .container:has(.fact-row), .faq-container { background: #0F1116; backdrop-filter: none; }
}

/* ══ A. ARTICLES ET GUIDES ═════════════════════════════════════════════════ */
.breadcrumb { text-align: center; color: var(--cvt-doux); }
.article-header { max-width: 860px; text-align: center; padding-bottom: 32px; }
.article-header h1 {
  font-size: clamp(38px, 6.4vw, 68px); line-height: 1.02; letter-spacing: .5px;
  text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); margin-bottom: 14px;
}
.article-meta { color: var(--cvt-doux); font-size: 14px; }
.article-body {
  max-width: calc(var(--cvt-mesure) + 2 * clamp(20px, 5vw, 52px));
  padding: clamp(24px, 5vw, 52px);
  margin-bottom: 48px;
  font-size: 17px; line-height: 1.75; color: var(--cvt-texte);
}
.article-body p { color: var(--cvt-texte); margin-bottom: 1.1em; text-wrap: pretty; }
.article-body h2 {
  color: var(--cvt-titre); font-size: clamp(22px, 2.6vw, 27px); line-height: 1.25; letter-spacing: -.01em;
  margin: 2em 0 .6em; padding-top: 0; border-top: 0; text-wrap: balance;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { color: var(--cvt-titre); font-size: 19px; line-height: 1.35; margin: 1.7em 0 .5em; }
.article-body strong { color: var(--cvt-titre); }
.article-body a { color: var(--cvt-accent-clair); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body ul { list-style: none; margin: 0 0 1.1em; padding: 0; color: var(--cvt-texte); }
.article-body ul > li { position: relative; padding-left: 1.5em; margin-bottom: .55em; }
.article-body ul > li::before { content: ""; position: absolute; left: .35em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--cvt-accent); }
.article-body ol { margin: 0 0 1.1em 1.4em; color: var(--cvt-texte); }
.article-body ol > li { margin-bottom: .55em; padding-left: .2em; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; margin: 1.2em 0; display: block; overflow-x: auto; }
.article-body th, .article-body td { padding: 11px 13px; border-bottom: 1px solid var(--cvt-filet); text-align: left; color: var(--cvt-texte); }
.article-body th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cvt-doux); background: var(--cvt-panneau-2); }
.article-body .cta-box { background: var(--cvt-panneau-2); border-color: rgba(59, 130, 246, .35); }

/* ══ B. PAGES LÉGALES (CGU, confidentialité, cookies, CGV) ══════════════════ */
.page .hero {
  background: transparent; border-bottom: 0; padding: clamp(40px, 8vw, 80px) 20px clamp(24px, 4vw, 36px);
}
.page .hero::before { display: none; }
.page .hero h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.page .hero p { color: #E4E7EE; font-size: clamp(16px, 2vw, 19px); max-width: 46ch; margin-inline: auto; text-wrap: balance; }
.page .hero .date { color: var(--cvt-doux); font-size: 13px; }
.page .container { max-width: calc(var(--cvt-mesure) + 2 * clamp(20px, 5vw, 48px)); padding: clamp(22px, 5vw, 48px); margin-top: 0; }
/* Le sommaire devient une rangée de pastilles centrées. */
.page .toc { background: transparent; border: 0; padding: 0; margin-bottom: 28px; text-align: center; }
.page .toc h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cvt-orange); font-family: inherit; font-weight: 800; }
.page .toc ol { padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.page .toc ol li { margin: 0; font-size: 14px; }
.page .toc ol li a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--cvt-filet); background: var(--cvt-panneau-2); color: var(--cvt-texte); }
.page .toc ol li a:hover, .page .toc ol li a:focus-visible { border-color: var(--cvt-accent); color: #fff; }
/* Chaque article : plus de carte dans la carte, un espacement et un filet. */
.page .section { background: transparent; border: 0; border-radius: 0; padding: 28px 0 8px; margin: 0; border-top: 1px solid var(--cvt-filet); }
.page .section:first-of-type { border-top: 0; padding-top: 0; }
.page .section:hover { border-color: var(--cvt-filet); }
.page .section h2 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(21px, 2.4vw, 25px); letter-spacing: -.01em; border-bottom: 0; padding-bottom: 0; color: var(--cvt-titre); text-wrap: balance; }
.page .section h3 { font-size: 18px; color: var(--cvt-titre); margin-top: 1.5em; }
.page .section p, .page .section ul li { color: var(--cvt-texte); font-size: 16.5px; line-height: 1.75; }
.page .section a { color: var(--cvt-accent-clair); text-decoration: underline; text-underline-offset: 3px; }
.page .box { border-radius: 14px; }

/* ══ C. MENTIONS LÉGALES ═══════════════════════════════════════════════════ */
.container:has(.fact-row) { max-width: calc(var(--cvt-mesure) + 2 * clamp(20px, 5vw, 48px)); padding: clamp(22px, 5vw, 48px); }
.container:has(.fact-row) h1 { text-align: center; font-size: clamp(40px, 7vw, 72px); line-height: 1; text-wrap: balance; }
.container:has(.fact-row) h2 { color: var(--cvt-titre); text-wrap: balance; }
.container:has(.fact-row) p, .container:has(.fact-row) li { color: var(--cvt-texte); line-height: 1.75; }

/* ══ D. FAQ ════════════════════════════════════════════════════════════════ */
.faq-hero h1 { text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.faq-hero p { color: #E4E7EE; }
.faq-container { padding: clamp(20px, 4vw, 40px); }
.faq-section-title { color: var(--cvt-titre); justify-content: center; text-align: center; }
.faq-item { background: var(--cvt-panneau-2); border-color: var(--cvt-filet); border-radius: 14px; }
.faq-q { font-size: 16.5px; line-height: 1.4; }
.faq-a { color: var(--cvt-texte); line-height: 1.75; font-size: 16px; }

/* ══ E. CONFIDENTIALITÉ, COOKIES (.hero + .hero-label, puis .layout) ═══════
   Le sommaire reste collé sur le côté en grand écran (pratique sur une page
   longue) ; seule la colonne de lecture est habillée. */
.hero:has(.hero-label) { background: transparent; border-bottom: 0; }
.hero:has(.hero-label)::before { display: none; }
.hero:has(.hero-label) h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.hero:has(.hero-label) .hero-sub { color: #E4E7EE; max-width: 52ch; margin-inline: auto; text-wrap: balance; }
.layout .content {
  background: var(--cvt-panneau); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--cvt-filet); border-radius: 22px; padding: clamp(22px, 4vw, 44px); min-width: 0;
}
/* cookies.html : les sections sont directement dans .layout, sans .content. */
.layout:not(:has(.content)):has(> .section) {
  max-width: calc(var(--cvt-mesure) + 2 * clamp(20px, 5vw, 48px)); margin-inline: auto;
  background: var(--cvt-panneau); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--cvt-filet); border-radius: 22px; padding: clamp(22px, 4vw, 44px);
}
.layout > .section p, .layout > .section li { color: var(--cvt-texte); font-size: 16.5px; line-height: 1.75; }
.layout > .section h2 { color: var(--cvt-titre); text-wrap: balance; }
.layout .toc { background: var(--cvt-panneau-2); border-color: var(--cvt-filet); }
.layout .content .section p, .layout .content .section li { color: var(--cvt-texte); font-size: 16.5px; line-height: 1.75; }
.layout .content .section h2 { color: var(--cvt-titre); text-wrap: balance; }
.layout .content .section a { color: var(--cvt-accent-clair); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .article-body, .page .container, .container:has(.fact-row), .faq-container, .layout .content { border-radius: 16px; }
  .article-body { font-size: 16.5px; }
}