/* ==========================================================================
   « Accueil par profil » — charte du site public (22/10/2026, modèle 5 choisi par l'éditeur)

   Chargée APRÈS style.css et clinique-moderne.css, sur toutes les pages publiques et l'espace membre ;
   l'administration ne la charge pas. Même principe que la charte précédente : on redéfinit les jetons
   (--color-*, --radius-*, --cm-*) et on n'ajoute que ce qu'un jeton ne sait pas dire. La police reste
   Manrope, hébergée sur le site (aucune ressource extérieure).

   Couleurs : pétrole #0D5F6B (liens, boutons, états actifs), encre #10272B, jaune #FFD166 (surfaces,
   repères, jamais de texte posé dessus autre que l'encre), fond #FBFCFC.
   Contrastes mesurés : pétrole sur blanc 7,3:1 · sur #E8F1F2 6,4:1 · texte doux #4A6064 6,7:1 ·
   discret #55696D 5,8:1 · encre sur jaune 10,8:1 · blanc sur pétrole 7,3:1 · jaune sur pétrole 5,1:1.
   Sombre : pétrole éclairci #6CC6D1, 9,3:1 sur le fond sombre.
   ========================================================================== */

:root{
  --color-bg:#FBFCFC;
  --color-bg-alt:#EEF5F6;
  --color-surface:#FFFFFF;
  --color-ink:#10272B;
  --color-ink-soft:#4A6064;
  --color-ink-mute:#55696D;
  --color-primary:#0D5F6B;
  --color-primary-dark:#08434C;
  --color-primary-light:#E8F1F2;
  --color-accent:#0D5F6B;
  --color-accent-btn:#0D5F6B;
  --color-accent-light:#E8F1F2;
  --color-accent-2:#0D5F6B;
  --color-accent-3:#FFD166;
  --color-accent-text:#0D5F6B;
  --color-accent-2-text:#0D5F6B;
  --color-border:#DBE6E7;
  --color-border-strong:#C3D3D5;
  --fonce:#10272B;
  --fonce-bas:#0D5F6B;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --shadow-sm:0 1px 2px rgba(16,39,43,.05), 0 4px 14px rgba(16,39,43,.05);
  --shadow-md:0 2px 4px rgba(16,39,43,.04), 0 16px 36px -12px rgba(16,39,43,.16);
  --shadow-lg:0 4px 8px rgba(16,39,43,.05), 0 32px 64px -18px rgba(16,39,43,.24);
  --cm-barre:rgba(255,255,255,.94);
  --cm-sauge:#FFD166;
  --cm-sauge-fond:#FFF6DC;
  --cm-sauge-texte:#6B4E00;
  --cm-degrade:linear-gradient(0deg,#0D5F6B,#0D5F6B);
  --cm-nuit:linear-gradient(0deg,#10272B,#10272B);
  --tp-jaune:#FFD166;
  --tp-petrole:#0D5F6B;
  --tp-encre:#10272B;
}
:root[data-theme="sombre"]{
  --color-primary:#6CC6D1;
  --color-primary-dark:#A3DEE5;
  --color-primary-light:#12343A;
  --color-accent:#6CC6D1;
  --color-accent-btn:#6CC6D1;
  --color-accent-light:#12343A;
  --color-accent-2:#6CC6D1;
  --color-accent-text:#6CC6D1;
  --color-accent-2-text:#6CC6D1;
  --cm-barre:rgba(16,22,30,.92);
  --cm-sauge-fond:#2E2A17;
  --cm-sauge-texte:#FFD166;
  --cm-degrade:linear-gradient(0deg,#12343A,#12343A);
  --cm-nuit:linear-gradient(0deg,#0B1A1D,#0B1A1D);
}
:root[data-theme="sepia"]{
  --color-primary-light:#E6EFEE;
  --cm-barre:rgba(251,245,233,.94);
}

/* ---------- Barre de menu : blanche, nette, le repère jaune du logo ---------- */
.logo .dot{ width:12px; height:12px; margin-left:3px; background:var(--tp-jaune); box-shadow:0 0 0 3px var(--tp-petrole); }
.nav-cta, .header-actions .btn-accent{ border-radius:12px; }

/* ---------- Boutons : arrondis francs, le jaune pour l'action principale sur fond sombre ---------- */
.btn{ border-radius:12px; }
.btn-lg{ border-radius:14px; }

/* ---------- Pied de page : encre pleine, sans dégradé ---------- */
.site-footer{ background:var(--tp-encre); border-radius:28px 28px 0 0; }
:root[data-theme="sombre"] .site-footer{ background:#0B1A1D; }
.site-footer::before{ display:none; }
.footer-logo .dot{ background:var(--tp-jaune); box-shadow:0 0 0 3px var(--tp-petrole); }

/* ==========================================================================
   Toutes les pages (22/10/2026, suite du modèle 5) : la grammaire de l'accueil
   - des aplats : plus de reflets ni de dégradés ;
   - des cartes à bordure fine et ombre légère, comme .ap-carte ;
   - sur fond sombre (pétrole ou encre), l'action principale est JAUNE, comme .ap-action ;
   - le jaune sert de repère (numéros de section, filet de « L'essentiel »), jamais de fond de texte courant.
   Les sélecteurs reprennent la spécificité de clinique-moderne.css : cette feuille passe après, elle l'emporte.
   ========================================================================== */
.hero, .type-hero, :root[data-theme="sombre"] .hero, :root[data-theme="sombre"] .type-hero{
  background:var(--color-bg-alt); border-bottom:1px solid var(--color-border); }
.hero::before, .tldr-box::before, .sidebar-cta::before, .newsletter-box::before{ display:none; }
.type-hero-photo, .hero-photo{ box-shadow:none; border-radius:22px; }
.type-hero .reading-time, .hero .reading-time{ background:var(--color-surface); border:1px solid var(--color-border); }
/* « L'essentiel » ouvrait la page contre l'ancien dégradé ; contre l'aplat, il lui faut de l'air. */
.type-hero + section > .container > .tldr-box:first-child{ margin-top:2rem; }

/* Boutons à plat (plus d'ombre colorée) */
:root .btn:is(.btn-primary, .btn-accent), :root .btn:is(.btn-primary, .btn-accent):hover,
.main-nav a.nav-cta{ box-shadow:none; }

/* Cartes et encadrés */
.content-block, .sidebar-box{ box-shadow:var(--shadow-sm); border:1px solid var(--color-border); }
.content-block h2 .num, :root[data-theme="sombre"] .content-block h2 .num{ background:var(--tp-jaune); color:var(--tp-encre); box-shadow:none; }
.tldr-box{ background:var(--color-primary-light); border:0; border-left:6px solid var(--tp-jaune); box-shadow:none; }

/* Surfaces sombres : pétrole plein (encarts) ou encre pleine (bandes), action jaune */
.sidebar-cta, :root[data-theme="sombre"] .sidebar-cta{ background:var(--tp-petrole); box-shadow:none; }
.newsletter-box{ background:var(--tp-petrole); }
:root[data-theme="sombre"] .sidebar-cta, :root[data-theme="sombre"] .newsletter-box{ background:#12343A; }
.quiz-result-band-high{ background:var(--tp-petrole); }
:is(.sidebar-cta, .newsletter-box, .bg-dark, .cookie-banner) .btn:is(.btn-primary, .btn-accent){ background:var(--tp-jaune); color:var(--tp-encre); }
:is(.sidebar-cta, .newsletter-box, .bg-dark, .cookie-banner) .btn:is(.btn-primary, .btn-accent):hover{ background:#FFE29A; color:var(--tp-encre); }

/* ==========================================================================
   La page d'accueil (index.php, includes/accueil-profils.php)
   ========================================================================== */
.ap-hero{ padding:4.5rem 0 1.5rem; text-align:center; }
.ap-hero h1{ margin:0 auto 1rem; max-width:18ch; font-size:clamp(2.2rem, 5.2vw, 3.6rem); line-height:1.08; }
.ap-hero h1 mark{ background:var(--tp-jaune); color:var(--tp-encre); padding:0 .25em; border-radius:10px; }
.ap-hero .lead{ margin:0 auto 2rem; max-width:62ch; color:var(--color-ink-soft); font-size:1.15rem; line-height:1.6; }

.ap-selecteur{ display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px;
  background:var(--color-primary-light); border-radius:16px; max-width:100%; }
.ap-selecteur-t{ padding:0 .6rem 0 .5rem; font-weight:700; color:var(--color-ink-soft); }
.ap-choix{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border-radius:12px; font-weight:700;
  color:var(--color-ink); text-decoration:none; }
.ap-choix:hover{ background:rgba(13,95,107,.08); color:var(--color-ink); }
.ap-choix[aria-current="true"]{ background:var(--tp-petrole); color:#FFFFFF; }
:root[data-theme="sombre"] .ap-choix[aria-current="true"]{ background:var(--color-primary); color:#0B1A1D; }
.ap-choix:focus-visible{ outline:3px solid var(--tp-jaune); outline-offset:2px; }

.ap-profils{ padding:1rem 0 4rem; }
.ap-panneau[hidden]{ display:none; }
.ap-bandeau{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; background:var(--tp-petrole); color:#E8F6F7;
  border-radius:28px; padding:2.75rem; }
:root[data-theme="sombre"] .ap-bandeau{ background:#12343A; }
.ap-bandeau-texte{ flex:1 1 30rem; min-width:0; }
.ap-etiquette{ margin:0 0 .6rem; font-size:.85rem; font-weight:700; color:var(--tp-jaune); letter-spacing:.06em; text-transform:uppercase; }
.ap-bandeau h2{ margin:0 0 .75rem; color:#FFFFFF; font-size:clamp(1.7rem, 3.2vw, 2.35rem); line-height:1.12; }
.ap-bandeau p.ap-chapo{ margin:0; font-size:1.1rem; line-height:1.6; max-width:60ch; color:#E8F6F7; }
.ap-action{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:52px; padding:0 1.6rem; border-radius:14px;
  background:var(--tp-jaune); color:var(--tp-encre); font-weight:800; font-size:1.05rem; text-decoration:none; }
.ap-action:hover{ background:#FFE29A; color:var(--tp-encre); }
.ap-cartes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1.1rem; margin-top:1.1rem; }
.ap-carte{ display:flex; flex-direction:column; gap:.5rem; min-height:11rem; padding:1.6rem; border-radius:22px; text-decoration:none;
  background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-ink); box-shadow:var(--shadow-sm); }
.ap-carte:hover{ border-color:var(--color-primary); color:var(--color-ink); box-shadow:var(--shadow-md); }
.ap-carte-type{ font-size:.8rem; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.06em; }
.ap-carte strong{ font-size:1.25rem; line-height:1.3; }
.ap-carte span.ap-carte-texte{ color:var(--color-ink-soft); line-height:1.55; }

/* Les <section> du site ont un grand rembourrage (style.css) : le trio en garde un plus serré. */
section.ap-trio{ padding:3rem 0; border-top:1px solid var(--color-border); background:var(--color-surface); }
.ap-trio .container{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:2rem; }
section.ap-hero{ padding-bottom:1.5rem; }
section.ap-profils{ padding-top:1rem; padding-bottom:3rem; }
.ap-trio h3{ margin:0 0 .5rem; font-size:1.3rem; }
.ap-trio p{ margin:0 0 .75rem; color:var(--color-ink-soft); line-height:1.6; }
.ap-trio a.ap-lien{ font-weight:700; }

@media (max-width:640px){
  .ap-hero{ padding-top:2.5rem; }
  .ap-bandeau{ padding:1.75rem; border-radius:22px; }
  .ap-action{ width:100%; justify-content:center; }
  .ap-selecteur{ border-radius:14px; }
}
@media print{ .ap-selecteur{ display:none; } .ap-panneau[hidden]{ display:block; } }

/* 22/10/2026 — la petite note sous le formulaire de la lettre (« En vous inscrivant… ») : sa couleur venait de
   style.css, faite pour l'ancien fond bleu nuit ; sur le pétrole elle tombait à 2,9:1 (Lighthouse, 13 pages).
   Clair sur pétrole : 5,9:1 ; sur le pétrole sombre (#12343A) : 10:1. */
.newsletter-box .form-note, .newsletter-box .form-note a{ color:#D6ECEE; }