/* 8 Flux — source commune des styles visuels.
   Les anciens layouts sont isolés dans @layer legacy. Ce fichier définit les
   seuls rôles typographiques, les largeurs, les surfaces et les composants. */
:root {
  --text-h1: clamp(2.25rem, 5vw, 3.5rem);
  --text-h2: clamp(1.625rem, 3vw, 2.25rem);
  --text-h3: 1.25rem;
  --text-h4: 1.0625rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-small: .875rem;
  --text-caption: .75rem;
  --text-metric-sm: 1.5rem;
  --text-metric-lg: 4rem;
  --leading-solid:1;
  --weight-body:400;
  --weight-heading:600;
  --weight-strong:700;
  --tracking-title:-.02em;
  --tracking-default:0;
  --tracking-label:.06em;
  --leading-title: 1.2;
  --leading-body: 1.75;
  --leading-ui: 1.5;
  --width-page: 70rem;
  --width-reading: 45rem;
  --width-form: 36rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-space: clamp(2.5rem, 6vw, 4.5rem);
  --card-space: clamp(1.25rem, 3vw, 2rem);
  --radius: 16px;
  --shadow: 0 2px 12px rgb(0 0 0 / .04);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / .08);
  /* Deux surfaces seulement. Les couleurs des flux servent d’accents. */
  --surface-page: #fffcf8;
  --surface-card: #fff;
  --color-bg: var(--surface-page);
  --color-card-bg: var(--surface-card);
  --color-bg-alt: var(--surface-card);
  --color-bg-warm: var(--surface-card);
  --color-bg-light: var(--surface-card);
  --color-bg-section: var(--surface-page);
  --color-card-border: var(--color-border);
  --glass-60: var(--surface-card);
  --glass-82: var(--surface-card);
  --glass-88: var(--surface-card);
  --glass-96: var(--surface-card);
  --glass-warm: var(--surface-card);
  --soutenir-grad: var(--surface-card);
  --rainbow: linear-gradient(135deg, #F18781, #F7AF7F, #FFDB80, #A7CF8E, #96D2DA, #88A3D5, #B699C8, #F08BB8);
}
@media(prefers-color-scheme:dark) {
  :root { --surface-page:#03050D; --surface-card:#101625; }
}
html { font-size:16px; scroll-padding-top:calc(var(--nav-height) + 1rem); }
body { font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-body); }
button, input, select, textarea { font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-ui); }
h1, h2, h3, h4, h5, h6 { color:var(--color-text); letter-spacing:-.02em; line-height:var(--leading-title); text-wrap:balance; font-style:normal; }
h1 { font-family:var(--font-title); font-size:var(--text-h1); font-weight:400; margin:0 0 1.25rem; max-width:var(--width-reading); }
h2 { font-family:var(--font-body); font-size:var(--text-h2); font-weight:600; margin:0 0 1rem; }
h3 { font-family:var(--font-body); font-size:var(--text-h3); font-weight:600; margin:0 0 .75rem; }
h4, h5, h6 { font-family:var(--font-body); font-size:var(--text-h4); font-weight:600; margin:0 0 .5rem; }
p, li, dd { font-size:var(--text-body); line-height:var(--leading-body); }
p { margin:0 0 1rem; font-style:normal; }
p:last-child { margin-bottom:0; }
/* P1 : introductions ; P2 : texte courant ; P3 : aides et descriptions. */
.text-lead, .section-intro, .hero-subtitle, .pillar-hero-sub, .tools-hero-sub,
.jf-hero-sub, .fc-hero-sub, .jf-intro-lead {
  font-family:var(--font-body); font-size:var(--text-lead); line-height:var(--leading-body);
  font-weight:400; letter-spacing:normal; color:var(--color-text-sec); max-width:var(--width-reading);
}
.text-body, .post-body p, .post-body li { font-size:var(--text-body); line-height:var(--leading-body); }
.text-small, .pillar-sub, .post-card-excerpt, .tool-card-desc, .resource-card p,
.flux-card p, .flux-article-card p, .jf-card-desc, .cart-item p,
.explorer-context, .explorer-limit, .home-note, .home-evidence-note {
  font-size:var(--text-small); line-height:var(--leading-body); font-weight:400;
}
.section-label, .section-kicker, .hero-eyebrow, .pillar-hero-number, .post-card-date,
.pillar-number, .tool-card-tagline, .tool-meta .k, .pillar-nav-label, .post-tag,
.flux-article-tag, .explorer-status, .footer-copy {
  font-family:var(--font-body); font-size:var(--text-caption); line-height:var(--leading-ui);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-sec);
}
.section-label, .section-kicker, .hero-eyebrow, .pillar-hero-number { margin-bottom:1rem; }
/* Même largeur de lecture sur les pages du modèle, les flux et les articles. */
.container { max-width:var(--width-page); padding-inline:var(--gutter); }
.section, .tools-section, .flux-articles-section, .flux-deep-dive,
.repos-sec, .nutrition-sec, .mouvement-sec, .environnement-sec, .soins-sec,
.pillar-content { padding-block:var(--section-space); }
body > section, main > section, .section-alt, .section-warm, .cta-banner,
.tools-section-measure, .tools-section-understand, .tools-section-act {
  background:var(--surface-page); color:var(--color-text);
}
.section + .section, .tools-section + .tools-section { border-top:1px solid var(--color-border); }
.container > p, .container > h2, .container > h3, .resource-intro,
.home-introduction .section-intro, .post-body, .pillar-intro-text > p {
  max-width:var(--width-reading);
}
.model-reading, .repos-wrap, .nutrition-wrap, .mouvement-wrap,
.environnement-wrap, .soins-wrap, .post-article {
  max-width:calc(var(--width-reading) + 2 * var(--gutter));
}
.page-header { padding-block:var(--section-space); background:var(--surface-page); color:var(--color-text); text-align:left; }
.page-header h1 { font-size:var(--text-h1); line-height:var(--leading-title); font-family:var(--font-title); }
.page-header p:not(.section-label):not(.hero-eyebrow):not(.pillar-hero-number) { max-width:var(--width-reading); }
.page-header .container, .page-header .pillar-hero-inner { position:relative; }
.hero-title, .hero-subtitle, .pillar-hero-sub { margin-inline:0; }
.hero-layout { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.hero-logo { width:112px; height:112px; margin-bottom:1.5rem; order:0; }
.hero-title { order:1; }
.hero-subtitle { order:2; margin-bottom:1.5rem; }
.hero-discover { order:3; }
.home-introduction { display:block; }
.home-introduction .section-intro { margin:0; }
.tools-hero-inner, .fc-hero-inner, .jf-hero-inner { display:block; }
.tools-hero-text { min-width:0; }
.pillar-hero-band { width:48px; height:4px; border-radius:2px; margin-bottom:1.5rem; position:static; }
.pillar-intro > .container { max-width:var(--width-page); grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:start; }
.pillar-intro-media { width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:none; }
.contact-form-wrap { max-width:var(--width-form); margin-inline:auto; }
/* Cartes : même surface, bordure, rayon et ombre ; accent de flux conservé. */
.pillar-card, .intro-block, .flux-card, .tool-card, .post-card, .flux-article-card,
.model-source, .model-reference-block, .explorer-source, .tools-featured-card,
.resource-card, .repos-moment, .nutrition-card, .mouvement-card, .soins-card,
.environnement-card, .jf-card, .action-card, .cart-dialog, .focus-detail-card,
.pillar-result-item, .weekly-intention, .ritual-card, .measure-featured, .measure-secondary {
  background:var(--surface-card); border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:var(--shadow); outline:none;
}
.pillar-card:hover, .flux-card:hover, .tool-card:hover, .post-card:hover,
.flux-article-card:hover { background:var(--surface-card); box-shadow:var(--shadow-lg); }
.tool-card-body, .post-card-body, .model-reference-block, .explorer-source,
.tools-featured-card { padding:var(--card-space); }
.model-source h3, .pillar-name, .tool-card-title, .post-card-title,
.flux-card h3, .resource-card h3, .flux-article-card h3 { font-size:var(--text-h3); line-height:var(--leading-title); }
[class$="-quote"], .post-body blockquote { background:var(--surface-card); border:1px solid var(--color-border); border-left:3px solid var(--color-border); border-radius:var(--radius); font-style:normal; }
/* Les vrais boutons d’action partagent le contour arc-en-ciel. Les réponses,
   filtres, onglets et commandes de formulaire gardent leur état fonctionnel. */
.btn, .repos-cta, .nutrition-cta, .mouvement-cta, .soins-cta, .environnement-cta,
.footer-actions a {
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  min-height:48px; padding:.7rem 1.4rem; border:2px solid transparent;
  border-radius:999px; font-family:var(--font-body); font-size:var(--text-small);
  line-height:var(--leading-ui); font-weight:600; letter-spacing:normal;
  text-transform:none; text-align:center; text-decoration:none; white-space:normal;
  background:linear-gradient(var(--surface-card),var(--surface-card)) padding-box,var(--rainbow) border-box;
  color:var(--color-text); cursor:pointer; box-shadow:none; transition:background .2s, transform .2s;
}
.btn:hover, .repos-cta:hover, .nutrition-cta:hover, .mouvement-cta:hover,
.soins-cta:hover, .environnement-cta:hover, .footer-actions a:hover {
  background:var(--rainbow) border-box; color:var(--color-dark); transform:translateY(-1px);
}
.footer-actions .footer-contact, .footer-actions .footer-support {
  background:linear-gradient(var(--surface-card),var(--surface-card)) padding-box,var(--rainbow) border-box;
  border:2px solid transparent; color:var(--color-text);
}
.footer-actions .footer-support:hover, .footer-actions .footer-contact:hover { background:var(--rainbow); color:var(--color-dark); }
:is(a,button,input,select,textarea):focus-visible { outline:2px solid var(--color-text); outline-offset:4px; }
.footer { background:var(--surface-card); padding-block:1.5rem 1rem; }
.footer-brand { font-family:var(--font-title); font-size:var(--text-h3); }
.footer-brand span, .footer-links a { font-family:var(--font-body); font-size:var(--text-small); line-height:var(--leading-ui); }
.footer-copy { font-size:var(--text-caption); letter-spacing:normal; text-transform:none; }
.post-cover { aspect-ratio:16/9; height:auto; border-radius:var(--radius); }
.post-body h2 { margin-block:2.5rem 1rem; }
.post-body h3 { margin-block:2rem .75rem; }
@media(max-width:760px) {
  .pillar-intro > .container { display:block; }
  .pillar-intro-media { margin-top:1.5rem; }
  .page-header { text-align:left; }
  .hero-layout { flex-direction:column; }
  .footer-actions { width:100%; }
  .footer-actions a { flex:1; }
  .tools-featured-card { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

.journee-hero-inner { display:block; }
.journee-hero-text { min-width:0; }
.journee-hero-visual, .fc-hero-visual { display:none; }
.journee-hero h1 { max-width:var(--width-reading); }
.fc-intro, .journee-hero-sub { font-size:var(--text-lead); max-width:var(--width-reading); }
.flux-subtitle { font-size:var(--text-h2); }
.modele-text, .parcours { margin-inline:0; }
.cta-banner p, .results-hero p, .results-hero .score-total-num,
.results-hero .score-total-label { color:var(--color-text-sec); }

/* En-têtes alignés sur la même grille, sans hauteur artificielle. */
.hero, .hero-layout { min-height:0; text-align:left; }
.hero { display:block; }
.hero-title, .hero-subtitle { text-align:left; }
.nav-hamburger { border:0; background:none; color:var(--color-text); }
.footer-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem; }
@media(max-width:1000px) { .footer-inner { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) {
  .footer-main { width:100%; }
  .footer-links { display:flex; flex-direction:row; flex-wrap:wrap; }
}

.model-source { border-top:3px solid var(--source-color, var(--color-border)); }
.tools-featured-card { border-top:3px solid var(--color-enviro); }
.eval-ritual-badge { text-transform:none; letter-spacing:normal; }

/* Les textes et graphiques de résultats se contractent sur petit écran. */
.container :where(div,section,article) { min-width:0; }
.chart-wrap { width:100%; max-width:var(--width-form); position:relative; }
.chart-wrap canvas { max-width:100%; height:auto; }
.pillar-result-header { flex-wrap:wrap; gap:.75rem; }

.contact-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.contact-info-grid > div { padding:var(--card-space); background:var(--surface-card); border:1px solid var(--color-border); border-radius:var(--radius); }
@media(max-width:760px) { .contact-info-grid { grid-template-columns:minmax(0,1fr); } }

/* Matrice des cinq Sources : les mêmes surfaces et rôles que le reste du site. */
.explorer-method { padding-bottom:2rem; }
.explorer-method-details { max-width:var(--width-reading); }
.explorer-method summary, .explorer-bibliography summary {
  cursor:pointer; font-size:var(--text-small); font-weight:var(--weight-heading);
  padding-block:.75rem; color:var(--color-text);
}
.explorer-method-details[open] summary, .explorer-bibliography details[open] summary { margin-bottom:1rem; }
.explorer-evidence-key { margin-block:1.25rem; }
.explorer-evidence-key > div { margin-bottom:1rem; }
.explorer-evidence-key dt { font-size:var(--text-small); font-weight:var(--weight-heading); }
.explorer-evidence-key dd { font-size:var(--text-small); color:var(--color-text-sec); }
.explorer-actions { list-style:decimal; padding-left:1.5rem; margin:0; }
.explorer-actions > li { padding:.85rem 0 .85rem .5rem; border-bottom:1px solid var(--color-border); }
.explorer-actions > li:first-child { padding-top:.25rem; }
.explorer-actions > li:last-child { border-bottom:0; padding-bottom:0; }
.explorer-actions li::marker { color:var(--color-text-sec); font-weight:var(--weight-heading); }
.explorer-actions p { margin-bottom:.4rem; font-size:var(--text-body); }
.explorer-action-basis { font-size:var(--text-caption); color:var(--color-text-sec); }
.explorer-references { font-size:var(--text-small); color:var(--color-text-sec); margin-block:1rem 2rem; max-width:var(--width-reading); }
.explorer-references a, .explorer-reference-list a { text-decoration:underline; text-underline-offset:3px; }
.explorer-reference-list { padding-left:1.25rem; list-style:disc; max-width:var(--width-reading); }
.explorer-reference-list li { font-size:var(--text-small); margin-bottom:.65rem; overflow-wrap:anywhere; }
.explorer-bibliography details { max-width:var(--width-reading); }

/* Accès éditoriaux : une carte entière cliquable et un libellé arc-en-ciel. */
.orientation-card, .home-resource-links .orientation-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:var(--card-space); border:1px solid var(--color-border); border-radius:var(--radius);
  background:var(--surface-card); color:var(--color-text); text-decoration:none;
  box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s;
}
.orientation-card:hover, .home-resource-links .orientation-card:hover {
  transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--color-text-sec);
}
.orientation-card .section-kicker { margin-bottom:1rem; }
.orientation-card h3 { margin-bottom:.75rem; }
.orientation-card p { color:var(--color-text-sec); margin-bottom:1.5rem; }
.orientation-arrow {
  display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem;
  margin-top:auto; align-self:flex-end; border:1px solid var(--color-border); border-radius:50%;
  color:var(--color-text-sec); transition:transform .2s;
}
.orientation-card:hover .orientation-arrow { transform:translateX(3px); }
.action-secondary {
  display:inline-flex; align-items:center; min-height:48px;
  font-size:var(--text-body); font-weight:var(--weight-strong); text-decoration:none;
  color:var(--color-text); border:0;
}
.action-secondary .orientation-label {
  position:relative; display:inline-block; padding-bottom:.3em; text-decoration:none;
  color:var(--color-text); background:none;
}
.action-secondary .orientation-label::after {
  content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--rainbow);
}
.action-secondary-arrow { margin-left:.65rem; }
.action-secondary:hover .orientation-label::after { height:2px; }
@media(forced-colors:active) {
  .orientation-label { background:none; color:LinkText; }
  .action-secondary .orientation-label { text-decoration:underline; }
  .action-secondary .orientation-label::after { display:none; }
}
/* Mention commune à côté du copyright ; retour à la ligne sur petit écran. */
.footer-meta { grid-column:1 / -1; display:flex; align-items:baseline; gap:1rem 2rem; border-top:1px solid var(--color-border); padding-top:1rem; }
.footer-meta .footer-copy { flex-shrink:0; margin:0; }
.footer-model-note { max-width:var(--width-reading); margin:0; font-size:var(--text-caption); color:var(--color-text-sec); line-height:var(--leading-body); }
@media(max-width:760px) { .footer-meta { flex-direction:column; gap:.75rem; } }

/* Même alignement que l’accueil, avec des lignes de lecture mesurées. */
.model-page .model-reading { max-width:var(--width-page); }
.model-page .model-reading > p, .model-page .model-reading > h1,
.model-page .model-reading > h2 { max-width:var(--width-reading); }
.model-section-nav { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.model-section-nav a {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:.7rem 1.25rem; background:var(--surface-card); color:var(--color-text);
  border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow); font-weight:var(--weight-heading); text-decoration:none;
}
.model-section-nav a:hover { border-color:var(--color-text-sec); box-shadow:var(--shadow-lg); }
.model-page .model-reference-block { max-width:var(--width-reading); padding:var(--card-space); }
.model-page .model-reference-block .home-source-icon { display:block; margin-bottom:1.25rem; }
.model-page .model-conditions-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; gap:1.5rem; }
.model-page .model-conditions-list > div {
  display:block; border:1px solid var(--color-border); padding:var(--card-space);
  border-radius:var(--radius); background:var(--surface-card); box-shadow:var(--shadow);
}
.model-page .model-conditions-list dt { margin-bottom:.75rem; }
.model-page .model-references { max-width:var(--width-reading); }
.model-section-action { margin-top:2rem; }
.home-source-icon { width:2.75rem; height:2.75rem; flex-shrink:0; color:var(--color-text-sec); }
.explorer-actions .explorer-action-title { font-weight:var(--weight-heading); color:var(--color-text); }
.explorer-actions .explorer-action-references { font-size:var(--text-small); color:var(--color-text-sec); margin-top:.75rem; }
.explorer-action-references a { text-decoration:underline; text-underline-offset:3px; }
.explorer-source { border-left:1px solid var(--color-border); }
.explorer-source-heading .home-source-icon { display:block; margin-bottom:1rem; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:3rem; }
.contact-layout .contact-form-wrap { width:100%; max-width:none; margin:0; }
.contact-image { width:100%; height:100%; min-height:24rem; object-fit:cover; border-radius:var(--radius); }
@media(max-width:760px) {
  .model-page .model-conditions-list, .contact-layout { grid-template-columns:1fr; }
  .contact-layout { gap:2rem; }
  .contact-image { min-height:0; height:auto; aspect-ratio:4/3; }
}

/* Les Sources accompagnent les actions sans reprendre les couleurs des Flux. */
.action-source-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-block:.65rem; }
.action-source-tag { display:inline-flex; padding:.25rem .65rem; border:1px solid var(--color-border); border-radius:999px; background:var(--surface-page); color:var(--color-text-sec); font-size:var(--text-caption); font-weight:var(--weight-heading); }
.action-references { font-size:var(--text-small); color:var(--color-text-sec); }
.action-references a { text-decoration:underline; text-underline-offset:3px; }
#source-group .fc-seg.is-on { background:var(--color-text); border-color:var(--color-text); color:var(--surface-page); }

/* Illustrations éditoriales : dans la grille, à côté des introductions. */
.editorial-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(12rem,18rem);
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
  margin-bottom:2rem;
}
.editorial-heading > div { min-width:0; }
.editorial-heading p { max-width:var(--width-reading); }
.editorial-heading p:last-child { margin-bottom:0; }
.editorial-illustration {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:contain;
}
@media(max-width:760px) {
  .editorial-heading { grid-template-columns:1fr; gap:1rem; }
  .editorial-illustration { width:min(100%,14rem); justify-self:center; }
}