/* Home — funnel + 3 filières */
.hhero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 8vw, 96px); }
.hhero-art { position: absolute; inset: 0; z-index: -1; }
.hhero-art svg { width: 100%; height: 100%; object-fit: cover; }
.hhero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 74%, transparent) 46%, transparent 70%); }
.hhero-in { position: relative; max-width: 660px; }
.hhero .display { font-size: clamp(2.4rem, 8vw, 4.4rem); }
.ink-hi { color: var(--terre); position: relative; white-space: nowrap; }
.ink-hi::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .28em; background: color-mix(in srgb, var(--terre) 30%, transparent); z-index: -1; border-radius: 3px; }
.hhero .lead { margin: 16px 0 28px; max-width: 34ch; }

/* Funnel 4 étapes */
.funnel { margin-top: -34px; position: relative; z-index: 2; }
.funnel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fstep { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; }
.fstep .fn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--terre); color: #fff; font-weight: 700; font-family: var(--display); margin-bottom: 10px; }
.fstep b { display: block; margin-bottom: 3px; }
.fstep small { color: var(--ink-soft); font-size: .84rem; }

.block { padding-block: clamp(48px, 8vw, 88px); }
.block-head { max-width: 640px; margin-bottom: 32px; }
.block-head h2 { margin-top: 6px; }
.block-alt { background: linear-gradient(var(--terre-tint), color-mix(in srgb, var(--terre-tint) 35%, var(--paper))); }

/* Filières */
.fil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fil-card { background: var(--paper-2); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; transition: .25s var(--ease); }
.fil-card.live { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--terre) 30%, var(--line)); }
.fil-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fil-ico { color: var(--accent); }
.fil-ico .ic { width: 38px; height: 38px; }
.fil-card h3 { color: var(--accent); }
.fil-card p { color: var(--ink-soft); font-size: .95rem; }
.fil-card .btn { margin-top: 10px; }
.fil-soon { margin-top: 10px; font-size: .82rem; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--line); border-radius: 999px; padding: 7px 14px; justify-self: start; }
.fil-note { margin-top: 22px; text-align: center; color: var(--ink-soft); font-size: .92rem; }

/* Value */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-grid > div { text-align: center; }
.v-ico { font-size: 2rem; margin-bottom: 10px; }
.value-grid b { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: 6px; }
.value-grid p { color: var(--ink-soft); font-size: .92rem; }

@media (max-width: 820px) {
  .funnel-grid { grid-template-columns: 1fr 1fr; }
  .fil-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; gap: 26px; }
  .funnel { margin-top: 18px; }
}

/* v2 — hero image home */
.hhero { min-height: clamp(480px, 62vh, 660px); display: grid; align-items: center; }
.hhero-art .hero-veil { background: linear-gradient(96deg, var(--paper) 8%, color-mix(in srgb, var(--paper) 90%, transparent) 40%, color-mix(in srgb, var(--paper) 45%, transparent) 58%, transparent 78%); }

/* CTA band (partagé avec fiche) */
.cta-band { margin-top: 8px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: linear-gradient(120deg, var(--ink), #1c5171); color: var(--paper); display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band h3 { color: #fff; margin-bottom: 8px; }
.cta-band h3 b { color: #a9d69a; }
.cta-band p { color: color-mix(in srgb, #fff 82%, transparent); max-width: 52ch; font-size: .95rem; }
.cta-band .btn-primary { background: #fff; color: var(--ink); }
.cta-band .btn-primary:hover { background: var(--terre-tint); }

@media (max-width: 760px) {
  .hhero-art .hero-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 93%, transparent) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 62%, color-mix(in srgb, var(--paper) 55%, transparent) 100%); }
}
.v-ic { width: 30px; height: 30px; color: var(--terre); }

/* ═══ v4 — HERO CINÉMATIQUE ═══ */
.cine { position: relative; isolation: isolate; min-height: clamp(560px, 78vh, 780px); display: grid; align-items: end; overflow: hidden; }
.cine-img { position: absolute; inset: 0; z-index: -2; }
.cine-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; animation: kb 16s cubic-bezier(.22,.61,.36,1) forwards; transform-origin: 62% 42%; }
@keyframes kb { from { transform: scale(1.09); } to { transform: scale(1); } }
.cine-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,42,58,.28) 0%, transparent 32%),
              linear-gradient(184deg, transparent 38%, rgba(14,38,52,.62) 78%, rgba(11,31,44,.82) 100%),
              linear-gradient(100deg, rgba(12,34,48,.42) 0%, rgba(12,34,48,.18) 34%, transparent 55%); }
.cine-in { padding-bottom: clamp(120px, 16vh, 170px); }
.cine-eyebrow { color: #FBF6EC; opacity: .92; text-shadow: 0 1px 14px rgba(10,28,40,.45); }
.cine-title { font-family: var(--display); font-weight: 600; font-size: clamp(2.8rem, 7.2vw, 5.2rem); line-height: 1.02; letter-spacing: -.015em; color: #FBF6EC; text-shadow: 0 2px 30px rgba(10,28,40,.35); margin: 10px 0 14px; }
.cine-lead { color: color-mix(in srgb, #FBF6EC 88%, transparent); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 44ch; margin-bottom: 26px; }
.btn-cine { background: #FBF6EC; color: var(--ink); }
.btn-cine:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(10,28,40,.5); }
.btn-cine-ghost { border: 1.5px solid color-mix(in srgb, #FBF6EC 55%, transparent); color: #FBF6EC; backdrop-filter: blur(4px); }
.btn-cine-ghost:hover { background: color-mix(in srgb, #FBF6EC 14%, transparent); border-color: #FBF6EC; }
.cine-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* cards chevauchant le hero */
.filieres-cine { margin-top: -96px; position: relative; z-index: 3; }
.fil-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-weight: 700; font-size: .92rem; }
.fil-link span { transition: transform .25s var(--ease); }
.fil-link:hover span { transform: translateX(5px); }

/* bande étapes compacte */
.steps-band { margin: 54px auto 10px; }
.steps-line { list-style: none; display: flex; gap: clamp(14px, 4vw, 44px); flex-wrap: wrap; justify-content: center; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.steps-line b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--terre); color: #fff; font-family: var(--display); font-size: .78rem; margin-right: 8px; }

@media (prefers-reduced-motion: reduce) { .cine-img img { animation: none; } }
@media (max-width: 760px) {
  .cine { min-height: 74vh; }
  .cine-in { padding-bottom: 130px; }
  .filieres-cine { margin-top: -80px; }
}

/* ═══ v5 — RESPIRATION + sections de contenu (fidélité maquette client) ═══ */
/* Les sections étaient collées (10px/8px) : rythme vertical généreux et régulier */
.secteur, .pedago { padding-block: clamp(56px, 9vw, 104px); }
.apercu, .carte, .value { padding-block: clamp(56px, 9vw, 104px); }
.steps-band { margin: clamp(40px, 6vw, 72px) auto; }

/* Comprendre le secteur */
.secteur-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.secteur-grid h2 { margin: 8px 0 14px; }
.secteur-src { margin-top: 16px; font-size: .84rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 12px; }
.secteur-points { list-style: none; display: grid; gap: 2px; }
.secteur-points li { display: grid; gap: 2px; padding: 16px 20px; border-left: 3px solid var(--terre); background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.secteur-points li:nth-child(2) { border-left-color: var(--mer); }
.secteur-points li:nth-child(3) { border-left-color: var(--transfo); }
.secteur-points li:nth-child(4) { border-left-color: var(--hibiscus); }
.secteur-points b { font-family: var(--display); font-size: 1.05rem; }
.secteur-points span { font-size: .9rem; color: var(--ink-soft); }

/* Aperçu fiche métier */
.apercu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apercu-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); }
.apercu-ico { color: var(--terre); margin-bottom: 12px; }
.apercu-ico .ic { width: 30px; height: 30px; }
.apercu-card h3 { margin-bottom: 8px; }
.apercu-card p { color: var(--ink-soft); font-size: .94rem; }
.apercu-cta { text-align: center; margin-top: 34px; }

/* Ressources pédagogiques */
.pedago-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.pedago-in h2 { margin: 8px 0 14px; }
.pedago-list { list-style: none; display: grid; gap: 12px; }
.pedago-list li { display: flex; align-items: center; gap: 14px; padding: 15px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; }
.pedago-list .pl-ic { display: flex; flex: none; }
.pedago-list .ic { width: 22px; height: 22px; color: var(--terre); }

/* Carte des filières */
.carte-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.carte-in h2 { margin: 8px 0 14px; }
.carte-list { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.carte-list li { display: grid; gap: 2px; padding: 15px 20px; background: var(--paper-2); }
.carte-list b { font-family: var(--display); font-size: 1rem; }
.carte-list span { font-size: .88rem; color: var(--ink-soft); }

/* FIX alignement : icônes centrées comme leur texte (elles étaient collées à gauche) */
.v-ico { display: flex; justify-content: center; margin-bottom: 12px; }
.value-grid { gap: clamp(24px, 4vw, 44px); }
.value-grid > div { max-width: 34ch; margin-inline: auto; }

/* CTA commissions : ne colle plus à la bande précédente */
.cta-band { margin-top: clamp(32px, 5vw, 56px); margin-bottom: clamp(24px, 4vw, 48px); }

@media (max-width: 860px) {
  .secteur-grid, .pedago-in, .carte-in { grid-template-columns: 1fr; }
  .apercu-grid { grid-template-columns: 1fr; }
}

/* Badge « prévu, non démontré » — même sobriété que le badge « données simulées » du tableau de bord */
.tag-prevu { display: inline-block; margin-left: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #6d5a2a; border: 1px solid #d8c79a; border-radius: 4px; padding: 2px 7px;
  vertical-align: middle; background: none; }

/* Liste « choisis un métier » (bloc 3 maquette) */
.metiers { padding-block: clamp(48px, 8vw, 88px); }
.metier-list { list-style: none; display: grid; gap: 8px; max-width: 720px; margin: 0 auto; }
.metier-list li { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.metier-list li > a, .metier-list li.soon { display: flex; align-items: center; gap: 14px; padding: 13px 18px; min-height: 44px; font-weight: 600; }
.metier-list .mp { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent); flex: none; }
.metier-list .mp .ic { width: 18px; height: 18px; }
.metier-list .chev { margin-left: auto; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s var(--ease); }
.metier-list li > a:hover { background: var(--accent-tint); border-radius: var(--radius-sm); }
.metier-list li > a:hover .chev { transform: translateX(4px); }
.metier-list li.soon { color: var(--ink-soft); }
.metier-list .stat { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.metier-more { text-align: center; margin-top: 20px; color: var(--ink-soft); font-size: .9rem; }

/* Liste « comprendre le secteur » à icônes (bloc 1 maquette) */
.secteur-points li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
  /* minmax(0,…) : sans lui, la colonne refuse de descendre sous son contenu minimal et
     pousse toute la page (débordement horizontal mesuré à 320px — iPhone SE, vieux Android). */
  .secteur-points li b, .secteur-points li span { overflow-wrap: anywhere; }
.secteur-points .sp-ic { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--paper); color: var(--terre); }
.secteur-points li:nth-child(2) .sp-ic { color: var(--mer); }
.secteur-points li:nth-child(3) .sp-ic { color: var(--transfo); }
.secteur-points li:nth-child(4) .sp-ic { color: var(--hibiscus); }
.secteur-points .sp-ic .ic { width: 20px; height: 20px; }
.secteur-points .sp-t { grid-column: 2; font-size: .88rem; color: var(--ink-soft); }
.secteur-points .tag-prevu { grid-column: 3; grid-row: 1; margin-left: 0; }

@media (max-width: 860px) { .fil-visuel img { height: 190px; } }

/* Mention de périmètre sous chaque description de carte */
.fil-demo { display: block; margin-top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }

/* ═══ v7 — CARTES FILIÈRES : L'IMAGE EST LE FOND DE TOUTE LA CARTE (fidèle maquette client) ═══ */
.fil-grid { align-items: start; }
.fil-card { position: relative; background: none; border: none; box-shadow: none; padding: 0; overflow: visible; margin-top: 34px; }
/* pastille ronde qui CHEVAUCHE le bord haut de la carte */
.fil-pastille { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; border: 4px solid var(--paper);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.fil-pastille .ic { width: 34px; height: 34px; }
/* la carte elle-même : ratio portrait, image en fond intégral */
.fil-inner { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden;
  border: 3px solid var(--accent); box-shadow: var(--shadow-lg); isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fil-card:hover .fil-inner { transform: translateY(-6px); }
.fil-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .6s var(--ease); }
.fil-card:hover .fil-bg { transform: scale(1.04); }
/* voile clair en haut pour garantir la lisibilité du texte posé sur l'image */
.fil-inner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 88%, transparent) 0%,
                              color-mix(in srgb, var(--accent-tint) 55%, transparent) 34%, transparent 58%); }
/* padding-top > 34px : le bas de la pastille (top -34px + 68px de haut) tombe à +34px du bord
   haut de la carte — en dessous, le rond mord sur la 1re ligne du titre. */
.fil-body { padding: 48px 22px 0; text-align: center; }
.fil-card h3 { color: var(--accent); font-size: clamp(1.15rem, 2.1vw, 1.42rem); text-transform: uppercase;
  line-height: 1.2; margin: 0 0 10px; text-shadow: 0 1px 10px rgba(255,255,255,.65); }
.fil-card p { color: var(--ink); font-size: .92rem; margin: 0 auto; max-width: 26ch; font-weight: 500;
  text-shadow: 0 1px 8px rgba(255,255,255,.8); }
.fil-demo { display: block; margin-top: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); text-shadow: 0 1px 8px rgba(255,255,255,.9); }
/* bouton pill posé en bas SUR l'image */
.fil-btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: grid; place-items: center; min-height: 46px; padding: 0 26px; border-radius: 999px;
  background: var(--accent); color: #fff; border: 3px solid #fff; font-weight: 800; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(18,59,87,.45); transition: filter .2s var(--ease); }
.fil-card:hover .fil-btn { filter: brightness(1.08); }
.fil-inner:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* 820px = MÊME seuil que le passage de .fil-grid à 1 colonne (ligne 47). Désaccorder les deux
   donnait, entre 821 et 860px, 3 colonnes de ~230px en ratio carré : trop court pour le contenu,
   le texte passait sous le bouton. Le carré n'a de sens qu'en 1 colonne (carte large). */
@media (max-width: 820px) {
  .fil-inner { aspect-ratio: 1 / 1; }
  .fil-card p { max-width: 34ch; }
  .fil-inner::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 94%, transparent) 0%,
    color-mix(in srgb, var(--accent-tint) 78%, transparent) 40%, transparent 66%); }
  .fil-grid { gap: 34px; }
}

/* ═══ QR d'accès — gravé dans la page (0 image, 0 requête, lisible hors ligne) ═══ */
.qr-band-wrap { margin-bottom: 56px; }
.qr-band { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; box-shadow: var(--shadow); }
.qr-code { width: 148px; height: 148px; flex: none; padding: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; }
.qr-code .qr-svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.qr-txt h3 { margin: 4px 0 8px; }
.qr-txt p { color: var(--ink-soft); max-width: 62ch; }
.qr-url { margin-top: 10px !important; font-family: var(--font); font-weight: 700;
  font-size: .9rem; letter-spacing: .01em; color: var(--ink) !important; }
@media (max-width: 640px) {
  .qr-band { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .qr-txt p { text-align: left; }
}