/* ========================================================
     PROD TOKENS — copied from Landing360.css + HomepageV2.tsx
     ======================================================== */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-dm-sans), 'DM Sans', system-ui, -apple-system, sans-serif;
    color: #0C1E4A;
    background: #fffaf5;
    font-feature-settings: "ss01";
    line-height: 1.55;
  }
  .landing-scope { overflow-x: clip; }
  .hf360-serif { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; font-weight: 500; font-optical-sizing: auto; }
  .hf360-hero h1.hf360-serif { font-weight: 700; }

  .hf360-kicker {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b73a2b;
    font-weight: 700;
  }
  .hf360-kicker::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: #d64a38;
    vertical-align: middle;
    margin-right: 12px;
    margin-bottom: 3px;
  }
  /* Variante Caveat narrative (Enchantée 👋) : pas de trait */
  .meet-text .hf360-kicker::before { content: none; }
  .hf360-card {
    background: #fff;
    border: 1px solid #E8E0D3;
    border-radius: 20px;
  }
  .hf360-card-cream {
    background: #FFF8EF;
    border: 1px solid #E8E0D3;
    border-radius: 20px;
  }
  .hf360-btn-coral {
    background: #d64a38;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    box-shadow: 0 8px 24px rgba(214,74,56,.25);
  }
  .hf360-btn-coral:hover { background: #e4705d; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(214,74,56,.3); }
  .hf360-btn-ghost {
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E8E0D3;
    background: #fff;
    color: #0C1E4A;
    text-decoration: none;
  }
  .hf360-underline-coral {
    background-image: linear-gradient(transparent 62%, rgba(214,74,56,.28) 62%);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    padding: 0 2px;
  }
  .hf360-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #E8E0D3;
    background: #fff;
    color: #0C1E4A;
  }
  .hf360-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
  }
  @media (max-width: 640px) {
    .hf360-blob { filter: blur(20px); }
  }
  .hf360-sect {
    padding: 96px 0;
    /* content-visibility: auto RETIRE le 2026-08-14. Les 16 sections etaient
       estimees a 800 px alors qu'elles montent a 5 788 px sur mobile : chaque
       section qui approchait prenait sa vraie hauteur et poussait tout le
       reste. Mesure : la page grandissait de 18 154 px pendant une lecture
       complete, contre 271 px sans la propriete. C'est ce qui donnait la
       sensation que le scroll bougeait seul.
       Cout assume : un layout complet passe de 28 a 46 ms (mesure Mac, dev). */
  }
  @media (max-width: 640px) {
    .hf360-sect { padding-top: 64px; padding-bottom: 64px; padding-left: 28px; padding-right: 28px; }
    .ct-spotlight-meta { align-items: flex-start; flex-direction: column; }
    .ct-spotlight-meta > div { min-width: 0; max-width: 100%; }
    .ct-spotlight-source {
      margin-left: 0; flex-shrink: 1; max-width: 100%;
      white-space: normal; overflow-wrap: anywhere;
    }
  }
  @media (max-width: 360px) {
    .hf360-sect .sect-container { padding-left: 0; padding-right: 0; }
    .meet-grid, .meet-grid > *, .meet-text, .meet-photo { min-width: 0; max-width: 100%; }
    .meet-text h2, .meet-text p, .ct-detail, .ct-verif, .ct-name { overflow-wrap: anywhere; }
    .ct-meta, .ct-meta > div, .ct-name, .ct-detail, .ct-verif { min-width: 0; width: auto; max-width: 100%; }
    .ct-verif { white-space: normal; }
  }

  /* ========================================================
     NAV — matches LandingNav.tsx
     ======================================================== */
  .hf-nav {
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid #E8E0D3;
  }
  .hf-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .hf-nav-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    color: #0C1E4A;
    text-decoration: none;
  }
  .hf-nav-right { display: flex; align-items: center; gap: 18px; }
  /* Sélecteur de langue en texte (menu du haut, 05/09/2026) : la langue
     active en navy soulignée, l'autre en gris. Même grammaire que l'école. */
  .hf-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .hf-lang-switch span, .hf-lang-switch a {
    padding: 0 0 2px;
    border-radius: 0;
    border-bottom: 1.5px solid transparent;
    color: #8A8FA0;
    text-decoration: none;
    line-height: 1.2;
  }
  .hf-lang-switch .on {
    background: transparent;
    color: #0C1E4A;
    font-weight: 700;
    border-bottom-color: #0C1E4A;
    box-shadow: none;
  }
  .hf-signin {
    font-size: 13px;
    font-weight: 500;
    color: #0C1E4A;
    text-decoration: none;
  }

  /* ========================================================
     HERO — same structure as prod Landing360 section 1
     ======================================================== */
  .hf360-hero {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(110% 80% at 110% -10%, rgba(214,74,56,0.10), transparent 55%),
      radial-gradient(80% 60% at -10% 110%, rgba(12,30,74,0.07), transparent 55%),
      linear-gradient(180deg, #fffaf5 0%, #fbf5ec 100%);
  }
  .hero-blob-coral {
    width: 500px; height: 500px;
    top: -100px; right: -100px;
    background: #d64a38;
  }
  .hero-blob-blue {
    width: 400px; height: 400px;
    bottom: -150px; left: -100px;
    background: #1b43f4;
    opacity: .06;
  }
  /* Halo corail "spotlight" en haut du hero — bande horizontale large + trait fin */
  .hero-halo-wide {
    position: absolute;
    top: -155px; left: 50%;
    transform: translateX(-50%);
    width: min(1800px, 140%);
    height: 235px;
    pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255, 175, 148, 0.45) 0%,
      rgba(255, 138, 114, 0.28) 22%,
      rgba(214, 74, 56, 0.16) 42%,
      rgba(214, 74, 56, 0.06) 68%,
      transparent 92%);
    filter: blur(30px);
    mix-blend-mode: multiply;
    animation: hf360-halo-breathe 6s ease-in-out infinite;
  }
  .hero-halo-core {
    position: absolute;
    top: -105px; left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 110%);
    height: 155px;
    pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255, 210, 188, 0.65) 0%,
      rgba(255, 160, 130, 0.42) 24%,
      rgba(255, 138, 114, 0.22) 45%,
      rgba(214, 74, 56, 0.08) 68%,
      transparent 90%);
    filter: blur(18px);
    mix-blend-mode: multiply;
    animation: hf360-halo-breathe 6s ease-in-out infinite reverse;
  }
  .hero-halo-line {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 95%);
    height: 1px;
    pointer-events: none; z-index: 3;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(214, 74, 56, 0.15) 15%,
      rgba(255, 138, 114, 0.55) 38%,
      rgba(255, 175, 148, 0.85) 50%,
      rgba(255, 138, 114, 0.55) 62%,
      rgba(214, 74, 56, 0.15) 85%,
      transparent 100%);
    box-shadow:
      0 0 12px rgba(255, 138, 114, 0.50),
      0 0 28px rgba(214, 74, 56, 0.25),
      0 0 56px rgba(214, 74, 56, 0.12);
  }
  .hero-halo-vignette {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse 90% 90% at 50% 25%,
      transparent 0%,
      transparent 55%,
      rgba(12, 30, 74, 0.05) 80%,
      rgba(12, 30, 74, 0.08) 100%);
  }
  @keyframes hf360-halo-breathe {
    0%, 100% { opacity: 1;    transform: translateX(-50%) scale(1);    }
    50%      { opacity: 0.88; transform: translateX(-50%) scale(1.03); }
  }
  .hero-sweep {
    position: absolute; top: -40%; left: -10%; width: 90%; height: 200%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.65) 50%, transparent 65%);
    transform: rotate(-8deg); z-index: 0; pointer-events: none; filter: blur(2px);
  }
  .hero-vignette {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    box-shadow: inset 0 0 120px rgba(12, 30, 74, 0.08);
  }
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    position: relative;
    z-index: 5;
  }
  .hero-top {
    max-width: 980px;
    margin: 0 0 28px;
    text-align: left;
  }
  .hf360-hero .h1-rotate { display: inline; }
  /* Mot rotatif : swap par FONDU (jamais coupe facon "arti"). transition portee par le Tracker. */
  .hf360-hero .rotate-text { color: #d64a38; transition: opacity .4s ease; }
  .hf360-hero .rotate-cursor {
    display: inline-block;
    color: #d64a38;
    font-weight: 300;
    margin-left: 2px;
    animation: hf360-cursor-blink 1s steps(1) infinite;
  }
  @keyframes hf360-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    justify-items: center;
    text-align: center;
  }
  .hero-body .hero-ctas { justify-content: center; }
  .hero-body .hero-price-mini { text-align: center; }
  .hero-body .trust-pills { justify-content: center; gap: 10px; flex-wrap: wrap; }
  @media (min-width: 920px) {
    .hero-body { gap: 48px; }
    .hero-body .trust-pills { flex-wrap: nowrap; }
    .hero-body .trust-pills .trust-check { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
    .hero-body .trust-pills .trust-check::before { width: 18px; height: 18px; }
  }

  /* ===== Respiration : rythme vertical entre les blocs du hero ===== */
  .hf360-hero .hero-body .hero-sub { line-height: 1.62; margin-bottom: 12px; }
  .hf360-hero .hero-body .hero-sub-promise { color: #0C1E4A; font-weight: 500; margin-bottom: 22px; }
  /* Version B (Mathieu 21/07) : surligneur marker jaune sur les 2 arguments
     de la promesse (« 15 minutes par jour », « sans galérer pendant des mois »). */
  .hf360-hero .hero-body .hero-sub-promise b { background: linear-gradient(transparent 55%, #ffd98a 55%, #ffd98a 92%, transparent 92%); color: #1A1F36; font-weight: 700; padding: 0 2px; }
  .hf360-hero .hero-body .hero-price-block { margin: 6px 0 22px; }
  .hf360-hero .hero-body .hero-ctas { margin-bottom: 14px; }
  .hf360-hero .hero-body .trust-pills { margin-top: 18px; }

  /* ===== Pill preuve sociale (sous le sous-titre du hero) ===== */
  .hero-social-mini {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 12px;
    margin: 2px 0 22px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #efe3d4;
    border-radius: 99px;
    box-shadow: 0 2px 8px rgba(12,30,74,0.05);
  }
  .hero-social-mini .hsm-avatars { display: flex; flex-shrink: 0; }
  .hero-social-mini .hsm-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    object-fit: cover;
    display: block;
  }
  .hero-social-mini .hsm-avatars img:first-child { margin-left: 0; }
  .hero-social-mini .hsm-txt {
    min-width: 0;
    font-size: 13px;
    color: #0C1E4A;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
  }
  .hero-social-mini .hsm-txt b { font-weight: 700; }
  .hero-social-mini .hsm-stars { color: #d64a38; font-size: 12.5px; letter-spacing: 1.5px; }
  @media (max-width: 480px) {
    .hero-social-mini { gap: 10px; padding: 7px 13px; }
    .hero-social-mini .hsm-txt { font-size: 12.5px; }
    .hero-social-mini .hsm-avatars img { width: 29px; height: 29px; }
  }

  /* Hero centre 1 colonne : .hero-body est deja centre par defaut (grid 1fr, text-align center),
     le texte est empile au-dessus de la grande video. Pas de variante 2-col. */
  @media (min-width: 960px) {
    .hf360-hero .hero-inner { padding-top: 52px; padding-bottom: 64px; }
  }

  .greeting-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    border: 1px solid #E8E0D3;
    background: #fff;
    color: #0C1E4A;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .greeting-pill .av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff1ef, #e4705d);
    border: 2px solid #fff;
  }
  .greeting-pill .yt-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff0000;
    margin-left: 4px;
  }

  .hf360-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.02em;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    color: #0C1E4A;
    background-image: linear-gradient(180deg, #2143a3 0%, #0F2A6B 55%, #061638 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 auto 22px;
    max-width: 860px;
  }
  /* Titre EN uniquement : la 1re ligne ("Finally understand French speakers,") fait ~931px a 56px
     et debordait les 860px, ce qui la cassait en 2 lignes (4 lignes au total). On elargit le cap
     pour la garder sur une ligne -> 3 lignes propres. Le titre FR est plus court et n'a pas cette classe. */
  .hf360-hero h1.h1-en-wide { max-width: 980px; }
  .hf360-hero h1 .rotate-text {
    background-image: linear-gradient(180deg, #ef6a59 0%, #d64a38 60%, #a8392c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hf360-hero h1 .rotate-cursor {
    -webkit-text-fill-color: #d64a38;
  }
  /* Rotating word: keep it on a single line whatever the variant ("utilisent de l'argot")
     so the hero height never changes and mobile scroll is stable. */
  .hf360-hero .h1-rotate { display: inline-block; white-space: nowrap; }
  .hf360-hero h1 .h1-whisper {
    display: block;
    font-style: italic;
    font-weight: 500;
    color: #d64a38;
    font-size: 0.68em;
    margin-top: 6px;
    letter-spacing: -0.01em;
  }
  .hf360-hero h1 .h1-whisper .hf360-underline-coral {
    font-style: italic;
  }
  .hf360-hero .hero-sub {
    font-size: clamp(16.5px, 1.8vw, 19px);
    color: #0A0F1C; font-weight: 450;
    line-height: 1.55;
    margin: 0 auto 26px;
    max-width: 560px;
  }
  .hf360-hero .hero-sub strong { color: #0C1E4A; font-weight: 600; }

  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    justify-content: center;
  }
  /* CTA secondaire "Tester Jean" (démo). Caché par défaut (anti-FOUC) : le
     Tracker le révèle en JS UNIQUEMENT pour le bucket holdout with_cta, sinon
     le groupe témoin without_cta verrait un flash et la mesure serait polluée. */
  .hf360-cta-secondary {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #b93d2e;
    border: 1.5px solid #d64a38;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 26px;
    border-radius: 14px;
    text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .hf360-cta-secondary:hover { background: #fff1ef; transform: translateY(-1px); }

  /* Bande "Essayer Jean" juste sous le hero (démo orale gratuite). Le bouton
     d'achat reste le chemin dominant ; cette bande capte le sceptique qui
     partirait sans tester. Cachée par défaut (anti-FOUC + geo), révélée en JS
     par le Tracker comme le CTA secondaire (display:block au lieu de none). */
  .jean-band { display: none; background: #ffffff; background-image: linear-gradient(90deg, #fff7f3, #ffffff); border-top: 1px solid #EADDCB; border-bottom: 1px solid #EADDCB; }
  .jean-band .jean-band-in { max-width: 1080px; margin: 0 auto; padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
  .jean-band .jean-band-ava { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; background: #fff1ec; border: 1px solid #EADDCB; flex: none; }
  .jean-band .jean-band-kick { color: #b93d2e; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 5px; }
  .jean-band .jean-band-line { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; line-height: 1.35; color: #0C1E4A; margin: 0; }
  .jean-band .jean-band-right { text-align: right; }
  .jean-band .jean-band-cta { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: #b93d2e; border: 1.6px solid #d64a38; font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-weight: 600; font-size: 14.5px; padding: 13px 24px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
  .jean-band .jean-band-cta:hover { background: #fff1ef; transform: translateY(-1px); }
  .jean-band .jean-band-micro { font-size: 11.5px; color: #6b6256; margin: 8px 0 0; }
  @media (max-width: 760px) {
    .jean-band .jean-band-in { grid-template-columns: 1fr; text-align: center; gap: 14px; padding: 22px 20px; }
    .jean-band .jean-band-ava { margin: 0 auto; }
    .jean-band .jean-band-right { text-align: center; }
    .jean-band .jean-band-cta { white-space: normal; }
  }
  .hero-cta-escape {
    text-align: center;
    margin: 0 0 14px;
    font-size: 12.5px;
  }
  .hero-cta-escape a {
    color: #6b7280;
    text-decoration: none;
    border-bottom: 1px dashed rgba(107, 114, 128, 0.4);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
  }
  .hero-cta-escape a:hover {
    color: #0C1E4A;
    border-bottom-color: rgba(12, 30, 74, 0.5);
  }
  .hf360-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #e4583f 0%, #b5271a 100%);
    color: #fff;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding: 21px 46px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 0 0 4px rgba(214,74,56,.12), 0 16px 40px -8px rgba(181,39,26,.55);
    transition: transform .15s, box-shadow .15s, background .15s;
  }
  .hf360-cta-primary:hover {
    background: linear-gradient(135deg, #ef6a52 0%, #c62d1f 100%);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(214,74,56,.18), 0 20px 46px -8px rgba(181,39,26,.6);
  }
  .hf360-cta-primary span { font-size: 18px; }
  /* Porte secondaire vers l'évaluation. Le CTA essai reste le seul bouton :
     ce lien répond uniquement au doute sur le niveau sans concurrencer l'achat. */
  .hero-eval-door {
    width: min(100%, 470px);
    margin: 20px auto 0;
    padding-top: 16px;
    border-top: 1px solid #DED4C7;
    text-align: center;
  }
  .hero-eval-door p {
    margin: 0 0 7px;
    color: #5F6878;
    font-size: 13px;
    line-height: 1.45;
  }
  .hero-eval-door a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #B73A2B;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .15s ease;
  }
  .hero-eval-door a:hover { color: #8F2419; }
  .hero-eval-door a span { font-size: 16px; }
  .hero-eval-door small {
    display: block;
    margin-top: 7px;
    color: #81776C;
    font-size: 11.5px;
    line-height: 1.45;
  }
  .cq-hero-stack .hero-eval-door { border-top-color: rgba(255,255,255,.28); }
  .cq-hero-stack .hero-eval-door p { color: rgba(255,255,255,.82); }
  .cq-hero-stack .hero-eval-door a { color: #ffb3a5; }
  .cq-hero-stack .hero-eval-door a:hover { color: #ffd0c7; }
  .cq-hero-stack .hero-eval-door small { color: rgba(255,255,255,.66); }
  @media (max-width: 600px) {
    .hero-eval-door { margin-top: 18px; padding-top: 15px; }
    .hero-eval-door p { font-size: 12.5px; }
    .hero-eval-door a { font-size: 14px; }
    .hero-eval-door small { max-width: 310px; margin-left: auto; margin-right: auto; font-size: 11px; }
  }
  /* YouTube sticky note - below hero video */
  .yt-sticky-note {
    position: relative;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 14px 22px 14px 56px;
    background: #fffbe9;
    border: 1px solid #f3e7a8;
    border-radius: 14px;
    box-shadow: 0 18px 40px -22px rgba(15,30,74,.25);
    transform: rotate(-0.6deg);
    font-family: 'Caveat', 'Comic Sans MS', cursive;
  }
  .yt-sticky-icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    background: #ff0033;
    border-radius: 8px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
  }
  .yt-sticky-text {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    color: #2b1b00;
  }
  .yt-sticky-text strong { color: #d64a38; font-weight: 700; }
  .yt-sticky-sig { display: block; margin-top: 4px; font-size: 18px; color: #7a6a3a; }
  @media (max-width: 600px) {
    .yt-sticky-note { margin: 16px 16px 0; padding: 14px 18px 14px 56px; }
    .yt-sticky-text { font-size: 19px; }
  }

  /* Mid-page CTA blocks */
  .hf360-mid-cta-wrap {
    padding: 56px 24px;
    background: #fffaf5;
    border-top: 1px solid #E8E0D3;
    border-bottom: 1px solid #E8E0D3;
  }
  .hf360-mid-cta {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 36px;
    background: linear-gradient(180deg, #fff 0%, #fff7f2 100%);
    border: 1px solid rgba(214,74,56,.18);
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 18px 40px -22px rgba(15,30,74,.18);
  }
  .hf360-mid-cta .mid-cta-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
  }
  .hf360-mid-cta .mid-cta-price .old {
    color: #6b7280;
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 600;
  }
  .hf360-mid-cta .mid-cta-price .new {
    color: #0C1E4A;
    font-size: 26px;
    font-weight: 700;
    font-family: 'Fraunces', serif;
  }
  .hf360-mid-cta .mid-cta-price .suffix {
    flex-basis: 100%;
    color: #4A5578;
    font-size: 14px;
    font-weight: 500;
  }
  .hf360-mid-cta .mid-cta-foot {
    margin: 14px 0 0;
    font-size: 13px;
    color: #4A5578;
  }
  /* Mid-CTA sans bloc prix (CTA post-comparatif) : accroche + 2e porte éval. */
  .hf360-mid-cta .mid-cta-lead {
    margin: 0 0 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: #0C1E4A;
  }
  .hf360-mid-cta .mid-cta-alt {
    margin: 16px 0 0;
    padding-top: 15px;
    border-top: 1px solid #EFE1D6;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1A1F36;
  }
  .hf360-mid-cta .mid-cta-alt a {
    color: #b73a2b;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @media (max-width: 480px) {
    .hf360-mid-cta .mid-cta-lead { font-size: 18px; }
  }

  /* Hero mini price (under CTA, discreet) */
  .hero-price-mini {
    margin: 12px 0 18px;
    font-size: 13.5px;
    color: #4A5578;
    font-weight: 500;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .hero-price-mini strong {
    color: #0C1E4A;
    font-weight: 700;
    font-size: 15px;
  }
  .hero-price-mini .old {
    color: #6b7280;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 600;
    margin-right: 6px;
  }

  /* Hero price block (monthly equivalent in big, annual total on a sub-line) */
  .hero-price-block {
    margin: 4px 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero-price-block .hpb-row {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-price-block .hpb-month {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    color: #0C1E4A;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .hero-price-block .hpb-month .hpb-unit {
    font-size: 18px;
    font-weight: 500;
    color: #4A5578;
    margin-left: 2px;
    letter-spacing: 0;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
  }
  .hero-price-block .hpb-month-strike {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
    line-height: 1;
  }
  .hero-price-block .hpb-total {
    font-size: 13.5px;
    color: #4A5578;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
  }
  .hero-price-block .hpb-total strong { color: #0C1E4A; font-weight: 700; }
  @media (max-width: 640px) {
    .hero-price-block .hpb-month { font-size: 34px; }
    .hero-price-block .hpb-month .hpb-unit { font-size: 16px; }
    .hero-price-block .hpb-month-strike { font-size: 18px; }
    .hero-price-block .hpb-total { font-size: 13px; }
  }

  /* Témoignage vérifié près du CTA hero (preuve près du prix + bouton, +34% best
     practice VWO). Avis Tina = preuve directe de la promesse du H1. */
  .hero-trust-quote {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 452px;
    margin: 0 auto 18px;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid #f0e0d8;
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(12,30,74,0.28);
    text-align: left;
  }
  .hero-trust-quote .htq-ava {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(12,30,74,0.16);
  }
  .hero-trust-quote .htq-stars { color: #d64a38; font-size: 12px; letter-spacing: 2px; line-height: 1; margin-bottom: 5px; }
  .hero-trust-quote .htq-quote { margin: 0 0 5px; font-size: 14px; line-height: 1.42; color: #1A1F36; font-weight: 450; }
  .hero-trust-quote .htq-quote strong { color: #0C1E4A; font-weight: 700; }
  .hero-trust-quote .htq-meta { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.25; }
  .hero-trust-quote .htq-name { color: #0C1E4A; font-weight: 700; }
  .hero-trust-quote .htq-verified { color: #b93d2e; font-weight: 600; }
  @media (max-width: 480px) {
    .hero-trust-quote { gap: 11px; padding: 12px 14px; max-width: 100%; }
    .hero-trust-quote .htq-quote { font-size: 13.5px; }
  }

  /* Mini-témoignages discrets disséminés dans la page (1 ligne, avis différent
     par section, matché à l'argument local). Avatar OU initiales en fallback. */
  .hf360-mini-testi { display: flex; align-items: center; gap: 13px; max-width: 600px; margin: 0 auto; text-align: left; }
  .hf360-mini-testi .mt-ava,
  .hf360-mini-testi .mt-initials { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(12,30,74,.16); }
  .hf360-mini-testi .mt-ava { object-fit: cover; }
  .hf360-mini-testi .mt-initials { display: flex; align-items: center; justify-content: center; background: #fff1ec; color: #b93d2e; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px; }
  .hf360-mini-testi .mt-body { min-width: 0; }
  .hf360-mini-testi .mt-stars { color: #d64a38; font-size: 11px; letter-spacing: 1.5px; line-height: 1; }
  .hf360-mini-testi .mt-quote { font-size: 14.5px; line-height: 1.4; color: #1A1F36; margin: 3px 0; font-style: italic; }
  .hf360-mini-testi .mt-quote b { font-style: normal; color: #0C1E4A; font-weight: 700; }
  .hf360-mini-testi .mt-who { font-size: 12px; color: #6b7280; margin: 0; }
  .hf360-mini-testi .mt-who b { color: #0C1E4A; font-weight: 700; }
  .hf360-mini-testi .mt-who .v { color: #b93d2e; font-weight: 600; }

  /* CTA pill : "puis 15€/mois" */
  .hf360-cta-primary .price-tag {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 5px 11px;
    font-size: 13.5px;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hf360-cta-primary .price-tag .cta-sub {
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.85;
    text-transform: lowercase;
    letter-spacing: 0.02em;
  }
  @media (max-width: 480px) {
    .hf360-cta-primary { flex-wrap: wrap; row-gap: 6px; font-size: 17px; padding: 17px 26px; width: 100%; justify-content: center; }
    .hf360-cta-primary .price-tag { font-size: 12.5px; padding: 4px 9px; }
    .hf360-cta-primary .price-tag .cta-sub { font-size: 10px; }
  }

  /* Mid-CTA price : nouveau format mensuel + suffixe annuel */
  .hf360-mid-cta .mid-cta-price .new .hpb-unit {
    font-size: 16px;
    font-weight: 500;
    color: #4A5578;
    margin-left: 2px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    letter-spacing: 0;
  }
  .hf360-mid-cta .mid-cta-price .suffix strong { color: #0C1E4A; font-weight: 700; }

  /* Hero price line with strikethrough on coupon */
  .hero-price-line {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
  }
  .hero-price-line .old {
    color: #6b7280;
    text-decoration: line-through;
    font-size: 17px;
    font-weight: 600;
  }
  .hero-price-line .new {
    color: #0C1E4A;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Fraunces', serif;
  }
  .hero-price-line .suffix {
    color: #6b7280;
    font-size: 13.5px;
    font-weight: 500;
  }

  /* Italic emphasis inside hero h1 */
  .hf360-hero h1 em { font-style: italic; }

  .trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 14px;
    color: #0C1E4A;
    font-weight: 500;
    justify-content: center;
  }
  .trust-pills span { display: inline-flex; align-items: center; gap: 8px; }
  .trust-check::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(214,74,56,.12);
    color: #d64a38;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

  /* Hero video (Wistia) — style SK : pleine largeur, radius doux, ombre profonde */
  .hero-video {
    position: relative;
    aspect-ratio: 16/9;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow:
      0 30px 60px -25px rgba(214,74,56,0.30),
      0 12px 28px -16px rgba(12,30,74,0.18);
  }
  .hero-video > div { border-radius: inherit; }
  .hero-video wistia-player { width: 100%; height: 100%; display: block; }
  .hero-video wistia-player:not(:defined) { display: block; width: 100%; height: 100%; }
  .hero-video iframe { width: 100%; height: 100%; border: 0; display: block; }
  .hero-video .play-fallback {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(214,74,56,.95); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; padding-left: 4px;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    pointer-events: none;
  }
  .hero-video wistia-player:defined ~ .play-fallback { display: none; }
  /* Facade click-to-play : poster WebP leger, l'iframe Wistia n'est injectee qu'au clic. */
  .hero-video-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-video-play {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
  }
  .hero-video-play > span {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(214,74,56,.95); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; padding-left: 4px;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    transition: transform .15s ease, background .15s ease;
  }
  .hero-video-play:hover > span { transform: scale(1.06); background: #d64a38; }
  .hero-video-play:focus-visible { outline: 3px solid #0C1E4A; outline-offset: 3px; }
  .hero-video.is-playing .hero-video-poster,
  .hero-video.is-playing .hero-video-play { display: none; }
  .hero-video .hero-sound-cta {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 0;
    border-radius: 99px;
    background: #d64a38;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.005em;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 12px 30px -8px rgba(214,74,56,0.6), 0 4px 10px -2px rgba(0,0,0,0.25);
    transition: background .18s ease, transform .15s ease, opacity .25s ease, box-shadow .2s ease;
  }
  .hero-video .hero-sound-cta:hover {
    background: #c93f2e;
    transform: translateY(-1px);
    box-shadow: 0 16px 36px -8px rgba(214,74,56,0.7), 0 6px 14px -2px rgba(0,0,0,0.3);
  }
  .hero-video .hero-sound-cta .hero-sound-icon { font-size: 18px; line-height: 1; }
  .hero-video.is-unmuted .hero-sound-cta { opacity: 0; pointer-events: none; transform: scale(.92); }
  .hero-photo-wrap {
    position: relative;
    width: min(920px, 94vw);
    max-width: 920px;
    margin: 0 auto;
    padding: 16px 0 24px;
  }
  /* Halo corail qui remonte du top de la vidéo vers le titre */
  .hero-photo-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translate(-50%, -100%);
    width: 135%;
    max-width: 1380px;
    height: 460px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 50% 100% at 50% 100%,
      rgba(255, 168, 138, 0.62) 0%,
      rgba(255, 138, 114, 0.42) 20%,
      rgba(214, 74, 56, 0.26) 42%,
      rgba(214, 74, 56, 0.12) 68%,
      transparent 94%);
    filter: blur(28px);
    mix-blend-mode: multiply;
    animation: hf360-halo-breathe 7s ease-in-out infinite;
  }
  /* Trait fin lumineux sur le bord supérieur de la vidéo */
  .hero-photo-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    width: 82%;
    max-width: 860px;
    height: 1.5px;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(214, 74, 56, 0.35) 18%,
      rgba(255, 138, 114, 0.78) 38%,
      rgba(255, 195, 168, 0.95) 50%,
      rgba(255, 138, 114, 0.78) 62%,
      rgba(214, 74, 56, 0.35) 82%,
      transparent 100%);
    box-shadow:
      0 0 14px rgba(255, 138, 114, 0.65),
      0 0 32px rgba(214, 74, 56, 0.35),
      0 0 64px rgba(214, 74, 56, 0.16);
  }
  .hero-photo-wrap .human-badge {
    position: absolute;
    top: -4px;
    left: -16px;
    background: #d64a38;
    color: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 18px 38px -14px rgba(214,74,56,0.55);
    /* Audit UI 01/09 : incliné, il se lisait comme un autocollant collé après
       coup sur la vidéo. Droit, il redevient une étiquette de la maison. */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
  }
  .hero-photo-wrap .human-badge .big {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .hero-photo-wrap .human-badge .small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.92;
  }
  .hero-photo-wrap .hero-stamp {
    position: absolute;
    top: 14px;
    right: -6px;
    background: #fff;
    border: 1px solid #f7d4cd;
    color: #d64a38;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 22px;
    padding: 8px 18px;
    border-radius: 99px;
    transform: rotate(4deg);
    box-shadow: 0 12px 28px -10px rgba(214,74,56,0.4);
    z-index: 3;
    white-space: nowrap;
  }
  @media (max-width: 640px) {
    .hero-photo-wrap .human-badge { top: -2px; left: -8px; padding: 8px 12px; border-radius: 11px; gap: 2px; }
    .hero-photo-wrap .human-badge .big { font-size: 15px; }
    .hero-photo-wrap .human-badge .small { font-size: 8.5px; letter-spacing: 0.08em; }
    .hero-photo-wrap .hero-stamp { top: 10px; right: -2px; font-size: 16px; padding: 5px 13px; }
  }
  .hero-photo-wrap .caption {
    position: absolute;
    bottom: 6px;
    left: 34px;
    right: 34px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: 17px;
    color: #0C1E4A;
    box-shadow: 0 8px 20px rgba(12,30,74,.12);
    z-index: 2;
    text-align: center;
  }

  /* ========================================================
     YOUTUBE SOCIAL PROOF — matches prod section 1b
     ======================================================== */
  .yt-proof {
    padding: 40px 0;
    background: #fff;
    border-top: 1px solid #E8E0D3;
    border-bottom: 1px solid #E8E0D3;
  }
  .yt-proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (max-width: 760px) { .yt-proof-grid { text-align: center; } }
  .yt-proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ff0000;
    color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 16px rgba(255,0,0,.2);
    flex-shrink: 0;
    width: max-content;
    justify-self: center;
  }
  .yt-proof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; flex: 1; }
  @media (max-width: 520px) { .yt-proof-stats { grid-template-columns: repeat(2, 1fr); } }
  .yt-proof-stat { border-left: 2px solid #d64a38; padding-left: 18px; }
  .yt-proof-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: #0C1E4A; line-height: 1; letter-spacing: -0.02em; }
  .yt-proof-label { font-size: 12.5px; color: #1A1F36; margin-top: 6px; font-weight: 500; }

  /* ===== Bloc YouTube (autorité) — remplace l'ancien bandeau de stats ===== */
  .ytblock { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid #EADDCB; border-radius: 20px; overflow: hidden; }
  .ytblock-top { display: flex; align-items: center; gap: 14px; padding: 20px 28px 18px; border-bottom: 1px solid #f1ece2; flex-wrap: wrap; }
  .ytblock-logo { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 32px; background: #ff0000; border-radius: 8px; flex: none; }
  .ytblock-logo svg { width: 22px; height: 22px; fill: #fff; }
  .ytblock-head { flex: 1; min-width: 240px; }
  .ytblock-t { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; color: #0C1E4A; line-height: 1.2; }
  .ytblock-s { font-size: 13px; color: #6b7280; margin-top: 3px; max-width: 460px; }
  /* Miniatures décoratives (vraies vidéos) à droite du titre. Non cliquables. */
  .ytblock-thumbs { display: flex; gap: 8px; flex: none; }
  .ytblock-thumb { width: 78px; height: 46px; border-radius: 7px; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: 0 2px 8px -2px rgba(12,30,74,0.35); }
  .ytblock-thumb::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); opacity: 0.92; }
  @media (max-width: 720px) { .ytblock-head { min-width: 100%; } .ytblock-thumbs { width: 100%; justify-content: center; } }
  .ytblock-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
  .ytblock-stat { padding: 24px 28px; text-align: center; border-right: 1px solid #f1ece2; }
  .ytblock-stat:last-child { border-right: 0; }
  .ytblock-num { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: #0C1E4A; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
  .ytblock-lab { font-size: 13px; color: #6b7280; margin-top: 8px; }
  @media (max-width: 600px) {
    .ytblock-stats { grid-template-columns: repeat(2, 1fr); }
    .ytblock-stat { border-right: 0; border-bottom: 0; padding: 18px 14px; }
    .ytblock-stat:nth-child(odd) { border-right: 1px solid #f1ece2; }
    .ytblock-stat:nth-child(-n+2) { border-bottom: 1px solid #f1ece2; }
  }

  /* ===== Bloc "Le cours, en quelques chiffres" (usage live, navy) ===== */
  .coursestats { max-width: 1040px; margin: 0 auto; background: linear-gradient(165deg, #0C1E4A, #16285a); border-radius: 20px; padding: 34px 30px 30px; color: #fff; }
  .coursestats-h { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(22px, 3vw, 30px); margin: 0 0 26px; line-height: 1.2; color: #fff; text-align: center; }
  .coursestats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 760px) { .coursestats-grid { grid-template-columns: repeat(2, 1fr); } }
  .coursestats-cell { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px 16px; text-align: center; }
  .coursestats-ic { font-size: 22px; line-height: 1; margin-bottom: 10px; }
  .coursestats-num { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(28px, 3.6vw, 38px); color: #ffd1c7; line-height: 1; letter-spacing: -0.02em; }
  .coursestats-lab { font-size: 12.5px; color: rgba(255,255,255,0.82); margin-top: 9px; line-height: 1.35; }
  .coursestats-foot { text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.55); margin: 22px 0 0; }

  /* ========================================================
     GENERIC SECTIONS
     ======================================================== */
  .sect-container { max-width: 1232px; margin: 0 auto; padding: 0 24px; }
  .sect-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
  .sect-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(30px, 4.2vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0C1E4A;
    margin: 14px 0 16px;
  }
  .sect-head p { font-size: 17px; color: #0A0F1C; font-weight: 450; line-height: 1.65; margin: 0; }

  /* ========================================================
     MEET ELISABETH — humanized section
     ======================================================== */
  .meet {
    background: #fff;
    border-top: 1px solid #E8E0D3;
    border-bottom: 1px solid #E8E0D3;
  }
  .meet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }
  @media (min-width: 920px) { .meet-grid { grid-template-columns: 360px 1fr; gap: 64px; } }
  .meet-photo {
    aspect-ratio: 3/4;
    border-radius: 20px;
    background: url('/images/elisabeth-coaching-optimized.webp') center/cover;
    border: 1px solid #E8E0D3;
    position: relative;
    box-shadow: 0 20px 50px -20px rgba(12,30,74,.25);
  }
  .meet-photo .sig-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    font-family: 'Caveat', cursive;
    font-size: 28px;
    color: #d64a38;
    transform: rotate(-2deg);
    opacity: 0.95;
    text-align: center;
  }
  .meet-text .intro-lead {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    line-height: 1.45;
    color: #0C1E4A;
    font-weight: 500;
    margin: 0 0 18px;
    font-style: italic;
  }
  .meet-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    color: #0C1E4A;
  }
  .meet-text p { font-size: 16.5px; color: #0A0F1C; font-weight: 450; line-height: 1.7; margin: 0 0 14px; }
  .meet-text p strong { color: #0C1E4A; font-weight: 600; }
  .meet-timeline {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  .meet-timeline .item {
    background: #FFF8EF;
    border: 1px solid #E8E0D3;
    border-radius: 14px;
    padding: 14px 16px;
  }
  .meet-timeline .year {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    color: #d64a38;
    line-height: 1;
  }
  .meet-timeline .desc { font-size: 13px; color: #0A0F1C; font-weight: 450; margin-top: 6px; line-height: 1.4; }

  /* ========================================================
     GENESIS — Google Meet visual
     ======================================================== */
  .genesis { background: #FFF8EF; border-bottom: 1px solid #E8E0D3; }
  .genesis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
  }
  @media (min-width: 920px) { .genesis-grid { grid-template-columns: 1.6fr 1fr; gap: 56px; } }
  .genesis-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0C1E4A;
    margin: 14px 0 18px;
  }
  .genesis-text .lead {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-style: italic;
    color: #0C1E4A;
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 500;
  }
  .genesis-text p { font-size: 16.5px; color: #0A0F1C; font-weight: 450; line-height: 1.7; margin: 0 0 14px; }
  .genesis-text p strong { color: #0C1E4A; font-weight: 600; }
  .genesis-text .quote-card {
    margin-top: 20px;
    padding: 16px 20px;
    background: #fff;
    border-left: 3px solid #d64a38;
    border-radius: 0 12px 12px 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: #0C1E4A;
    font-size: 16.5px;
    line-height: 1.5;
  }

  .meet-mock {
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(12,30,74,.35);
    border: 8px solid #2a2a2a;
  }
  .meet-mock-top {
    background: #202124;
    color: rgba(255,255,255,.7);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
  }
  .meet-mock-top .left { display: flex; align-items: center; gap: 10px; }
  .meet-mock-top .dots { display: flex; gap: 5px; }
  .meet-mock-top .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
  .meet-mock-top .dot:nth-child(2) { background: #febc2e; }
  .meet-mock-top .dot:nth-child(3) { background: #28c840; }
  .meet-mock-top .live {
    background: #ea4335; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 5px;
    letter-spacing: 0.06em;
  }
  .meet-mock-top .live::before {
    content: ""; width: 6px; height: 6px;
    background: #fff; border-radius: 50%;
    animation: mock-pulse 1.5s infinite;
  }
  @keyframes mock-pulse { 50% { opacity: 0.3; } }
  .meet-mock-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: #1e1e1e;
    aspect-ratio: 16/10;
    padding: 4px;
  }
  .meet-tile {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
  }
  .meet-tile.elisabeth { background: linear-gradient(135deg, #6b4423, #8b5a2b); }
  .meet-tile.student { background: linear-gradient(135deg, #3a4a6b, #2c3a55); }
  .meet-tile::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.3;
    background: radial-gradient(circle at 40% 40%, #fff, transparent);
  }
  .meet-tile .name {
    background: rgba(0,0,0,0.65);
    padding: 4px 9px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .meet-mock-footer {
    background: #202124;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .meet-btn { width: 36px; height: 36px; border-radius: 50%; background: #3c4043; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
  .meet-btn.end { background: #ea4335; width: 48px; border-radius: 24px; }
  .genesis-caption {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #d64a38;
    text-align: center;
    margin-top: 12px;
  }

  /* ========================================================
     METHOD — Listen · Repeat · Reuse (3 cards)
     ======================================================== */
  /* Variant B - tons chauds (fond crème, sans card sombre) */
  .method {
    background: linear-gradient(180deg, #faf5ec 0%, #f4ecdc 100%);
    border-top: 1px solid #E8E0D3;
    border-bottom: 1px solid #E8E0D3;
  }
  .method-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .method-head .hf360-kicker {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: #4A5578;
    font-size: 14px;
    margin-bottom: 14px;
    letter-spacing: 0;
    text-transform: none;
  }
  .method-head .hf360-kicker::before, .method-head .hf360-kicker::after {
    content: "—"; margin: 0 8px; color: rgba(12,30,74,.35);
    background: none; width: auto; height: auto; vertical-align: baseline;
  }
  .method-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(36px, 6vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin: 0 auto 14px;
    max-width: 900px;
  }
  .method-head h2 .w1 { color: #d64a38; }
  .method-head h2 .w2 { color: #0C1E4A; }
  .method-head h2 .w3 { color: #1b43f4; font-style: italic; }
  .method-head .lead {
    font-size: 15px;
    color: #4A5578;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 580px;
  }

  .method-steps { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 1080px; margin: 0 auto; position: relative; }
  @media (min-width: 860px) { .method-steps { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }
  .method-step {
    background: #ffffff;
    border: 1px solid rgba(12,30,74,0.10);
    border-radius: 20px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 22px 60px -28px rgba(12,30,74,.18);
    position: relative;
  }
  .method-step.warm {
    background: #fff7f2;
    border-color: rgba(214,74,56,.18);
  }
  .method-step .num-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
  }
  .method-step .num-head .num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #d64a38;
  }
  .method-step.warm .num-head .num { color: #0C1E4A; }
  .method-step.last .num-head .num { color: #1b43f4; }
  .method-step .num-head .label {
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4A5578;
    padding-top: 14px;
  }
  .method-step.warm .num-head .label { color: #0C1E4A; }
  .method-step.last .num-head .label { color: #1b43f4; }
  .method-step:not(.warm):not(.last) .num-head .label { color: #d64a38; }
  .method-step .tag {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: #4A5578;
    margin: 0 0 6px;
  }
  .method-step h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 20px;
    color: #0C1E4A;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
  }
  .method-step p { font-size: 14.5px; color: #4A5578; line-height: 1.6; margin: 0 0 8px; }
  .method-step p:last-child { margin-bottom: 0; }
  .method-step p strong { color: #0C1E4A; font-weight: 600; }

  /* ========================================================
     TESTIMONIALS — 3 types
     ======================================================== */
  .testim-section { border-top: 1px solid #E8E0D3; border-bottom: 1px solid #E8E0D3; }
  .testim-section.t1 { background: #fff; }
  .testim-section.t2 { background: #FFF8EF; }
  .testim-section.t3 { background: #fff; }

  .testim-head { text-align: center; max-width: 720px; margin: 0 auto 48px; padding: 0 24px; }
  .testim-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    color: #0C1E4A;
    margin: 12px 0 14px;
  }
  .testim-head p { font-size: 16px; color: #0A0F1C; font-weight: 450; line-height: 1.6; margin: 0; }
  .testim-head .type-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0C1E4A;
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .testim-head .yt-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff0000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
  }

  /* YouTube comment cards */
  .yt-grid {
    column-count: 1;
    column-gap: 18px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (min-width: 640px) { .yt-grid { column-count: 2; } }
  @media (min-width: 960px) { .yt-grid { column-count: 3; } }
  .yt-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin: 0 0 16px;
    break-inside: avoid;
    font-family: 'Roboto', var(--font-dm-sans), 'DM Sans', -apple-system, sans-serif;
  }
  .yt-card .yt-top { display: grid; grid-template-columns: 36px 1fr; gap: 10px; margin-bottom: 6px; align-items: center; }
  .yt-card .av {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .yt-card .yt-meta-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .yt-card .name { font-weight: 500; font-size: 13px; color: #0f0f0f; line-height: 1.3; }
  .yt-card .time { font-size: 12px; color: #606060; line-height: 1.3; }
  .yt-card .heart-from {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: #606060; line-height: 1;
  }
  .yt-card .heart-from .heart-avatar {
    width: 14px; height: 14px; border-radius: 50%;
    background: url('/images/elisabeth-yt.jpg') center/cover;
    position: relative;
  }
  .yt-card .heart-from .heart-avatar::after {
    content: "♥"; position: absolute;
    bottom: -3px; right: -4px;
    color: #ef4444; font-size: 9px;
    line-height: 1; font-weight: 700;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
  }
  .yt-card .content {
    font-size: 14px;
    color: #0f0f0f;
    line-height: 1.4;
    margin: 4px 0 10px 46px;
  }
  .yt-card .content strong { font-weight: 500; color: #0f0f0f; }
  .yt-card .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 46px;
    margin-bottom: 6px;
    color: #0f0f0f;
    font-size: 13px;
    font-weight: 500;
  }
  .yt-card .likes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 18px;
    transition: background .15s;
    color: #065fd4;
    font-weight: 600;
  }
  .yt-card .likes::before {
    content: "";
    display: inline-block;
    width: 20px; height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23065fd4' d='M18.77 11h-4.23l1.52-4.94C16.38 5.03 15.54 4 14.38 4c-.58 0-1.14.24-1.52.65L7 11H3v10h4h1h9.43c1.06 0 1.98-.67 2.19-1.61l1.34-6C21.23 12.15 20.18 11 18.77 11zM7 20H4v-8h3v8zm12.98-6.83l-1.34 6c-.1.48-.63.83-1.21.83H8v-8.61l5.6-6.06c.19-.21.48-.34.78-.34.26 0 .5.11.63.3.07.1.15.25.09.45l-1.52 4.94L13.18 13h5.59c.41 0 .8.17 1.03.46.23.3.32.68.24 1.04z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
  }
  .yt-card .likes:hover { background: #f2f2f2; }
  .yt-card .dislike {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
  }
  .yt-card .dislike::before {
    content: "";
    width: 20px; height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f0f0f' d='M17 4h-1H7.54c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L11.41 24l6.59-6.59c.36-.36.59-.86.59-1.41V6c0-1.1-.9-2-2-2zm0 12l-4.7 4.7L13.41 15H4v-2l3-7h10v10zm2-12h4v12h-4V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .yt-card .dislike:hover { background: #f2f2f2; }
  .yt-card .reply-btn {
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    color: #0f0f0f;
    transition: background .15s;
    margin-left: 4px;
  }
  .yt-card .reply-btn:hover { background: #f2f2f2; }
  .yt-card .video-ref {
    font-size: 11.5px;
    color: #606060;
    margin: 4px 0 0 46px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
    line-height: 1.4;
  }
  .yt-card .video-ref::before { content: ""; }
  .yt-card .view-replies {
    margin: 8px 0 0 46px;
    font-size: 13px;
    color: #065fd4;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  .yt-card .view-replies::before { content: "▾"; }

  /* Coaching & Course cards */
  .testim-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (min-width: 720px) { .testim-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1020px) { .testim-grid { grid-template-columns: repeat(3, 1fr); } }
  .testim-card {
    background: #fff;
    border: 1px solid #E8E0D3;
    border-radius: 20px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .t2 .testim-card { background: #fff; }
  .testim-card.featured { border: 2px solid #d64a38; background: linear-gradient(135deg, #FFF8EF, #fff); }
  .testim-card-top { display: flex; align-items: center; gap: 12px; }
  .testim-av {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #d64a38;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
  }
  .testim-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; color: #0C1E4A; line-height: 1.2; }
  .testim-meta { font-size: 12px; color: #1A1F36; margin-top: 2px; }
  .testim-source {
    display: inline-flex;
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto;
  }
  .testim-source.verified { background: #f0fdf4; color: #16a34a; }
  .testim-source.email { background: #dbeafe; color: #1d4ed8; }
  .testim-source.course { background: #f0fdf4; color: #16a34a; }
  .testim-source.senja { background: #fef3c7; color: #d97706; }
  .testim-quote { font-size: 14.5px; color: #0A0F1C; font-weight: 450; line-height: 1.6; margin: 0; }
  .testim-quote strong { color: #0C1E4A; font-weight: 600; }
  .testim-quote em { color: #d64a38; font-style: normal; font-weight: 700; background: rgba(214,74,56,.08); padding: 0 3px; border-radius: 3px; }

  /* ========================================================
     PRICING — 2 cards side by side (matches latest prod)
     ======================================================== */
  .pricing {
    background: #fffaf5;
    position: relative;
    overflow: hidden;
  }
  .pricing-grid-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
    position: relative;
  }
  @media (min-width: 920px) { .pricing-grid-wrap { grid-template-columns: 1.35fr 1fr; gap: 24px; } }

  .core-card {
    background: #fff;
    border: 2px solid #d64a38;
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    box-shadow: 0 18px 44px rgba(12,30,74,0.14);
  }
  @media (max-width: 760px) { .core-card { grid-template-columns: 1fr; } }

  /* ============================================================
     CARTE PRIX - composition du mockup « lot 1 » (audit UI 01/09,
     arbitrage Mathieu du 02/09 : on reprend la composition, on garde
     TOUS les leviers). Carte blanche calme au lieu du cadre corail
     et du ruban posé sur la bordure ; l'essai et l'offre vivent dans
     le kicker, les -55 % et le prix par jour dans la phrase de
     facturation, les étoiles restent sur la citation, et la carte du
     plan mensuel reste entière sous le bloc.
     ============================================================ */
  .pricing .pricing-single-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
  .pricing .core-card.pcard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 18px;
    padding: 0;
    border: 1px solid #EBE3DA !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 20px 40px -30px rgba(12,30,74,.25) !important;
    overflow: visible;
  }
  .pricing .core-card.pcard:hover { transform: none; box-shadow: 0 20px 40px -30px rgba(12,30,74,.25) !important; }
  .pcard > .hfc-grid2 { gap: 0; align-items: stretch; }
  .pcard-left, .pcard-right { min-width: 0; padding: 36px 40px; }
  .pcard-left { border-right: 1px solid #EBE3DA; }

  /* Bloc d'offre saisonnière dans la carte prix (12/09/2026). */
  .pcard .pcard-offer { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #F2D3C1; border-radius: 14px; background: #FFF5EC; }
  .pcard .pcard-offer-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #d64a38; }
  .pcard .pcard-offer-pct { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: 'Fraunces', Georgia, serif; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #b73a2b; white-space: nowrap; }
  .pcard .pcard-offer-pct small { font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #0C1E4A; white-space: normal; }
  .pcard .pcard-offer-sub { font-size: 13px; line-height: 1.45; color: #1A1F36; }
  .pcard .pk {
    margin: 0;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.5;
    text-transform: uppercase; color: #d64a38;
  }
  /* Le segment d'offre disparait tout seul hors fenetre saisonniere :
     le token rend une chaine vide, donc le separateur ne reste pas orphelin. */
  .pcard .pk .pk-offer:empty { display: none; }
  .pcard .pk .pk-offer::before { content: ' · '; }
  .pcard .pk .hf360-welcome-badge {
    display: inline; margin: 0; padding: 0; border-radius: 0;
    background: none; box-shadow: none; color: inherit;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
  }
  .pcard .kk { display: flex; align-items: center; gap: 10px; }
  .pcard .kk::before { content: ''; flex: none; width: 22px; height: 1.5px; background: #d64a38; }

  .pcard-title {
    margin: 9px 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
    color: #0C1E4A;
  }
  .pcard .pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .pcard .pr .pr-big {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
    color: #0C1E4A; white-space: nowrap;
  }
  .pcard .pr .pr-per { margin-left: -6px; font-size: 17px; color: #4A5068; }
  .pcard .pr .old { font-size: 17px; color: #7A8096; text-decoration: line-through; text-decoration-thickness: 1.5px; white-space: nowrap; }
  .pcard .pbill { margin: 14px 0 0; max-width: 42ch; font-size: 15px; line-height: 1.55; color: #1A1F36; }
  .pcard .pbill strong { font-weight: 600; color: #0C1E4A; }
  .pcard .pbill .pbill-day { white-space: nowrap; color: #b73a2b; font-weight: 600; }
  .pcard .pbill-save { margin-top: 6px; }
  .pcard .pbill-save strong { color: #2f7d3f; }

  .pcard .ptl { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: #4A5068; }
  .pcard .ptl li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .pcard .ptl li::before { content: ''; position: relative; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #0C1E4A; opacity: .75; }
  .pcard .ptl b { color: #1A1F36; font-weight: 600; }
  .pcard .ptl .ptl-free { color: #2f7d3f; }

  .pcard .pcard-cta { width: 100%; margin-top: 30px; padding: 18px 24px; font-size: 17px; border-radius: 12px; justify-content: center; }
  .pcard .pfine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #7A8096; text-align: center; }

  .pcard .pget { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: #1A1F36; }
  .pcard .pget li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
  .pcard .pget li strong { font-weight: 600; color: #0C1E4A; }
  .pcard .pget svg { position: relative; top: 3px; width: 16px; height: 16px; }

  .pcard .pquote { margin-top: 26px; padding: 14px 18px; border-left: 2px solid #d64a38; background: #FBFAF7; font-size: 14.5px; line-height: 1.5; color: #1A1F36; }
  .pcard .pquote-stars { display: block; margin-bottom: 5px; color: #f5a623; font-size: 11px; letter-spacing: 1px; line-height: 1; }
  .pcard .pquote-who { display: block; margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #7A8096; }

  @media (max-width: 900px) {
    .pcard-left { border-right: 0; border-bottom: 1px solid #EBE3DA; }
  }
  @media (max-width: 480px) {
    .pricing .pricing-single-wrap { padding: 0 10px; }
    .pcard-left, .pcard-right { padding: 26px 20px; }
    .pcard-title { font-size: 22px; }
    .pcard .pr { margin-top: 22px; }
    .pcard .pr .pr-big { font-size: 40px; }
    .pcard .pbill { font-size: 14.5px; }
    .pcard .pcard-cta { padding: 16px 14px; font-size: 15.5px; text-align: center; }
  }
  .core-left {
    background: linear-gradient(180deg, #0C1E4A, #162D6B);
    color: #fff;
    padding: 26px 28px;
  }
  .core-left .micro {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
  }
  .core-left h3 {
    font-family: 'Fraunces', serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 18px;
  }
  .core-left ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
  .core-left li {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    display: flex;
    gap: 10px;
    line-height: 1.45;
  }
  .core-left .emo { flex-shrink: 0; width: 18px; line-height: 1.3; }
  .core-left .bonus-pill {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #d64a38;
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .core-right {
    background: #fff;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .core-right .product-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .core-right .product {
    font-size: 10.5px;
    font-weight: 700;
    color: #d64a38;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .core-right .lifetime {
    font-size: 9.5px;
    font-weight: 700;
    color: #16a34a;
    background: #f0fdf4;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .core-right .prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .core-right .old {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
  }
  .core-right .new {
    font-family: 'Fraunces', serif;
    font-size: 48px;
    font-weight: 700;
    color: #0C1E4A;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .core-right .once { font-size: 13px; color: #1A1F36; }
  .core-right .day-pill {
    display: inline-flex;
    align-self: flex-start;
    background: #FDE1DB;
    color: #0C1E4A;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
  }
  .core-right .install { font-size: 12.5px; color: #1A1F36; margin: 0; line-height: 1.5; }
  .core-right .install strong { color: #0C1E4A; font-weight: 600; }
  .core-right .cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
    background: #d64a38;
    color: #fff;
    border-radius: 11px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(214,74,56,0.55);
  }
  .core-right .guar {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #E8E0D3;
  }
  .core-right .guar p { font-size: 12px; color: #0A0F1C; font-weight: 450; margin: 0; line-height: 1.45; }

  /* Coaching card (gold) */
  .coach-card-outer {
    padding: 1.5px;
    border-radius: 22px;
    background: linear-gradient(135deg, #d4a853 0%, #f4d47a 50%, #b8893a 100%);
    box-shadow: 0 14px 40px rgba(184, 137, 58, 0.22);
    display: flex;
  }
  .coach-card {
    background: linear-gradient(135deg, #faf6ec 0%, #fff 55%);
    border-radius: 20px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .coach-card .status {
    display: inline-flex;
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4a853, #b8893a);
    color: #fff;
  }
  .coach-card .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }
  .coach-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 700;
    color: #0C1E4A;
    line-height: 1.15;
    margin: 0 0 4px;
  }
  .coach-card .sub { font-size: 13px; color: #0A0F1C; font-weight: 450; line-height: 1.45; margin: 0; }
  .coach-card .price { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
  .coach-card .amount { font-family: 'Fraunces', serif; font-weight: 700; font-size: 32px; color: #0C1E4A; line-height: 1; letter-spacing: -0.02em; }
  .coach-card .suffix { font-size: 12px; color: #1A1F36; }
  .coach-card .note { font-size: 11.5px; color: #1A1F36; font-style: italic; margin: 0; line-height: 1.45; }
  .coach-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid #E8E0D3;
    padding-top: 12px;
  }
  .coach-card li {
    font-size: 12.5px;
    color: #0A0F1C; font-weight: 450;
    display: flex;
    gap: 9px;
    line-height: 1.45;
  }
  .coach-card li::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a853, #b8893a);
    color: #fff;
    font-weight: 700;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .coach-card li::before { content: "✓"; }
  .coach-card .cta-wrap { margin-top: auto; padding-top: 6px; }
  .coach-card .cta {
    display: block;
    text-align: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, #d4a853, #b8893a);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(184,137,58,0.25);
  }
  .coach-card .fine { text-align: center; font-size: 11px; color: #1A1F36; font-style: italic; margin: 6px 0 0; }

  /* ========================================================
     FINAL CTA
     ======================================================== */
  .final-cta {
    background: #0C1E4A;
    color: #fff;
    padding: 80px 0;
    text-align: center;
  }
  .final-cta h2 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(30px, 4.5vw, 42px);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 18px;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
  }
  .final-cta .underline-coral-dark {
    background-image: linear-gradient(transparent 62%, rgba(228,112,93,0.5) 62%);
    padding: 0 2px;
  }
  .final-cta p { font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 auto 26px; max-width: 560px; }
  .final-cta .sig {
    margin-top: 24px;
    font-family: 'Caveat', cursive;
    font-size: 28px;
    color: #e4705d;
    line-height: 1.3;
  }
  .final-cta .sig-photo {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.25);
    box-shadow: 0 14px 32px -14px rgba(0,0,0,0.5);
    margin: 32px auto -8px;
  }

  /* Pricing buckets (3 paquets) */
  .pricing-buckets { display: flex; flex-direction: column; gap: 14px; }
  .pr-bucket {
    background: #FFF8EF; border: 1px solid #E8E0D3;
    border-radius: 12px; padding: 14px 16px;
  }
  .pr-bucket h4 {
    font-family: 'Fraunces', serif; font-weight: 700;
    font-size: 15px; color: #0C1E4A;
    margin: 0 0 8px; display: flex; align-items: center; gap: 10px;
  }
  .pr-bucket h4 .num {
    width: 26px; height: 26px; border-radius: 50%;
    background: #d64a38; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-weight: 700;
    flex-shrink: 0;
  }
  .pr-bucket ul { list-style: none; padding: 0; margin: 0; }
  .pr-bucket ul li {
    font-size: 13.5px; color: #0A0F1C; font-weight: 450;
    padding-left: 18px; position: relative;
    margin-bottom: 4px; line-height: 1.5;
  }
  .pr-bucket ul li::before {
    content: "·"; position: absolute; left: 6px;
    color: #d64a38; font-weight: 700; font-size: 18px;
  }
  .pr-bucket ul li .bonus-pill {
    display: inline-block; margin-left: 6px;
    background: #d64a38; color: #fff;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
  }

  /* ============================================================
     HF360 ANIMATIONS — marker underline, stamps drop, CTA breathe,
     scroll reveal, card hover lift + soft glow
     ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    .hf360-underline-coral,
    .hf360-reveal,
    .ww-stamp,
    .hf360-cta-primary,
    .pricing .cta,
    .coach-card .cta { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
    /* transition coupee = l'etat initial resterait fige : on force l'etat final */
    .hf360-underline-coral { background-size: 100% 38% !important; }
  }

  /* 1. Marker underline - se peint quand le titre entre a l'ecran.
     L'etat SANS js reste le trait plein : si l'hydratation echoue ou tarde,
     le surlignage est simplement la, comme avant. */
  .hf360-underline-coral {
    background-image: linear-gradient(rgba(228,112,93,.38), rgba(228,112,93,.38));
    background-position: 0 88%;
    background-repeat: no-repeat;
    background-size: 100% 38%;
    padding: 0 3px;
  }
  .hf360-js .hf360-underline-coral {
    background-size: 0% 38%;
    transition: background-size .62s cubic-bezier(0.22, 0.61, 0.36, 1) .1s;
  }
  .hf360-js .hf360-underline-coral.in-view { background-size: 100% 38%; }

  /* 2. Stamps drop-in */
  .hf360-js .ww-stamp {
    opacity: 0;
    transform: scale(0.65) rotate(0deg);
    transition: opacity .5s ease, transform .7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hf360-js .ww-stamp.in-view { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .hf360-js .ww-passports > *:nth-child(1).in-view { transition-delay: 0s; }
  .hf360-js .ww-passports > *:nth-child(2).in-view { transition-delay: .06s; }
  .hf360-js .ww-passports > *:nth-child(3).in-view { transition-delay: .12s; }
  .hf360-js .ww-passports > *:nth-child(4).in-view { transition-delay: .18s; }
  .hf360-js .ww-passports > *:nth-child(5).in-view { transition-delay: .24s; }
  .hf360-js .ww-passports > *:nth-child(6).in-view { transition-delay: .30s; }
  .hf360-js .ww-passports > *:nth-child(7).in-view { transition-delay: .36s; }
  .hf360-js .ww-passports > *:nth-child(8).in-view { transition-delay: .42s; }
  .hf360-js .ww-passports > *:nth-child(9).in-view { transition-delay: .48s; }
  .hf360-js .ww-passports > *:nth-child(10).in-view { transition-delay: .54s; }
  .hf360-js .ww-passports > *:nth-child(11).in-view { transition-delay: .60s; }
  .hf360-js .ww-passports > *:nth-child(12).in-view { transition-delay: .66s; }
  .hf360-js .ww-stamp:hover { transform: rotate(0deg) translateY(-3px); transition-duration: .25s; }

  /* 3. CTA breathing - desktop only, transform-only (pas de box-shadow anime sur iOS) */
  @keyframes hf360-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }
  @media (min-width: 768px) and (hover: hover) {
    .hf360-js .hf360-cta-primary,
    .hf360-js .pricing .cta,
    .hf360-js .coach-card .cta {
      animation: hf360-breathe 3.5s ease-in-out 3;
    }
    .hf360-js .hf360-cta-primary:hover,
    .hf360-js .pricing .cta:hover,
    .hf360-js .coach-card .cta:hover {
      animation: none;
    }
  }

  /* 4. Scroll-reveal */
  .hf360-js .hf360-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s ease, transform .75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hf360-js .hf360-reveal.in-view { opacity: 1; transform: translateY(0); }
  .hf360-js .diag-grid > .hf360-reveal:nth-child(2) { transition-delay: .12s; }
  .hf360-js .diag-grid > .hf360-reveal:nth-child(3) { transition-delay: .24s; }
  .hf360-js .clash2-grid > .hf360-reveal:nth-child(2) { transition-delay: .12s; }
  .hf360-js .pep-grid > .hf360-reveal:nth-child(2) { transition-delay: .12s; }
  .hf360-js .pep-grid > .hf360-reveal:nth-child(3) { transition-delay: .24s; }
  .hf360-js .yt-vids > .hf360-reveal:nth-child(2) { transition-delay: .10s; }
  .hf360-js .yt-vids > .hf360-reveal:nth-child(3) { transition-delay: .20s; }
  .hf360-js .yt-vids > .hf360-reveal:nth-child(4) { transition-delay: .30s; }
  .hf360-js .access-grid > .hf360-reveal:nth-child(2) { transition-delay: .12s; }

  /* 5. Block hover lift + soft glow */
  .diag-card, .clash2-card, .feat-row, .method-step, .access-card, .pep-card,
  .testim-card, .ct-card, .faq-item, .yt-card, .yt-vid-card,
  .pricing .core-card, .coach-card, .ww-stat {
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color .35s ease;
    will-change: transform;
  }
  .clash2-card:hover, .feat-row:hover, .method-step:hover, .access-card:hover,
  .pep-card:hover, .testim-card:hover, .ct-card:hover, .faq-item:hover,
  .yt-card:hover, .yt-vid-card:hover, .pricing .core-card:hover,
  .coach-card:hover, .ww-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 58px -18px rgba(12,30,74,.22), 0 0 0 1px rgba(214,74,56,.12);
  }
  .diag-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 58px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(214,74,56,.4);
  }

  .hf360-js .hf360-reveal.in-view.diag-card:hover,
  .hf360-js .hf360-reveal.in-view.clash2-card:hover,
  .hf360-js .hf360-reveal.in-view.feat-row:hover,
  .hf360-js .hf360-reveal.in-view.method-step:hover,
  .hf360-js .hf360-reveal.in-view.access-card:hover,
  .hf360-js .hf360-reveal.in-view.pep-card:hover,
  .hf360-js .hf360-reveal.in-view.testim-card:hover,
  .hf360-js .hf360-reveal.in-view.ct-card:hover,
  .hf360-js .hf360-reveal.in-view.faq-item:hover,
  .hf360-js .hf360-reveal.in-view.yt-card:hover,
  .hf360-js .hf360-reveal.in-view.yt-vid-card:hover,
  .hf360-js .hf360-reveal.in-view.coach-card:hover {
    transform: translateY(-5px);
  }

  /* ===== AUTHENTICITY CARDS + AUDIO PLAYER + KARAOKE ===== */
  .auth-card {
    background: #fff;
    border: 1px solid #E8E0D3;
    border-radius: 16px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .auth-card:hover {
    border-color: rgba(214,74,56,.35);
    box-shadow: 0 14px 32px -18px rgba(12,30,74,.18);
  }
  .auth-tag {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(214,74,56,.1);
    color: #d64a38;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .auth-h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #0C1E4A;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .auth-quote {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
  }
  .auth-quote .kw {
    transition: color .22s ease, background-color .22s ease;
    border-radius: 3px;
    padding: 0 1px;
  }
  .auth-quote .kw.is-active {
    color: #0C1E4A;
    background: rgba(214,74,56,.16);
    font-weight: 500;
  }
  .auth-quote .kw.is-past {
    color: #0C1E4A;
  }

  .hf360-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffaf5;
    border: 1px solid #E8E0D3;
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    margin-top: auto;
  }
  .hf360-audio-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #d64a38;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 6px 14px -4px rgba(214,74,56,.45);
  }
  .hf360-audio-btn:hover {
    background: #e4705d;
    transform: scale(1.04);
  }
  .hf360-audio-btn:active { transform: scale(0.96); }
  .hf360-audio-btn:focus-visible {
    outline: 2px solid #d64a38;
    outline-offset: 3px;
  }
  .hf360-audio-btn svg { width: 11px; height: 13px; }
  .hf360-audio-btn .ico-pause { display: none; }
  .hf360-audio.is-playing .hf360-audio-btn { background: #0C1E4A; box-shadow: 0 6px 14px -4px rgba(12,30,74,.4); }
  .hf360-audio.is-playing .hf360-audio-btn:hover { background: #1B43F4; }
  .hf360-audio.is-playing .hf360-audio-btn .ico-play { display: none; }
  .hf360-audio.is-playing .hf360-audio-btn .ico-pause { display: inline-block; }
  .hf360-audio.is-loading .hf360-audio-btn { opacity: .55; cursor: wait; }
  .hf360-audio-track {
    flex: 1;
    height: 6px;
    background: #ece7da;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .hf360-audio-track:focus-visible {
    outline: 2px solid #d64a38;
    outline-offset: 3px;
  }
  .hf360-audio-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #d64a38, #e4705d);
    border-radius: 999px;
    transition: width .12s linear;
  }
  .hf360-audio-time {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
  }

  /* ===== 30 THEMES MOSAIC (under DU VRAI FRANÇAIS) ===== */
  .themes-mosaic-block {
    max-width: 1180px;
    margin: 56px auto 0;
  }
  .themes-mosaic-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
  }
  .themes-mosaic-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d64a38;
    margin-bottom: 10px;
  }
  .themes-mosaic-kicker::before,
  .themes-mosaic-kicker::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: #d64a38;
    opacity: 0.5;
  }
  .themes-mosaic-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 700;
    color: #0C1E4A;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .themes-mosaic-sub {
    font-size: 16px;
    color: #4b5563;
    margin: 0;
    line-height: 1.55;
  }
  .themes-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .theme-cell {
    text-align: center;
  }
  .theme-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #2A1F15;
    box-shadow: 0 6px 16px -6px rgba(12,30,74,.18);
    margin-bottom: 8px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .theme-cell:hover .theme-photo {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(12,30,74,.28);
  }
  .theme-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .theme-num {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .theme-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 12px;
    font-weight: 500;
    color: #0C1E4A;
    line-height: 1.25;
  }
  /* « Chaque thème débloque » : ligne mécanique + tag par vignette (objectifs réels des dialogues) */
  .themes-unlock-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 18px auto 28px; max-width: 640px; }
  .themes-unlock-line .lead-in { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15.5px; color: #0C1E4A; width: 100%; text-align: center; margin-bottom: 4px; line-height: 1.45; }
  .themes-unlock-line .chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid rgba(214,74,56,.3); color: #0C1E4A; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; box-shadow: 0 4px 12px -6px rgba(214,74,56,.25); }
  .themes-unlock-line .chip::before { content: "🎯"; font-size: 12px; }
  .theme-unlock { display: block; margin-top: 3px; font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700; color: #b73a2b; line-height: 1.3; padding: 0 2px; }
  .theme-unlock::before { content: "→ "; }
  .themes-mosaic-baseline {
    text-align: center;
    max-width: 680px;
    margin: 36px auto 0;
    font-size: 15px;
    color: #0A0F1C;
    font-weight: 450;
    line-height: 1.65;
  }
  /* 6 premières vignettes visibles par défaut (1 rangée desktop, 2 rangées
     mobile), le CTA déplie les 24 restantes. Historique : grille entièrement
     repliée du 05/08 au 12/08 (doublon avec les scènes de la carte), rouvert
     partiellement à la demande de Mathieu le 12/08. */
  .themes-mosaic-grid .theme-cell { display: none; }
  .themes-mosaic-grid .theme-cell:nth-child(-n+6) { display: block; }
  .themes-mosaic-toggle:checked ~ .themes-mosaic-grid .theme-cell { display: block; }
  .themes-mosaic-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px auto 0;
    padding: 13px 24px;
    border: 1.5px solid #d64a38;
    color: #d64a38;
    background: #fff;
    border-radius: 999px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    max-width: max-content;
    text-align: center;
    box-shadow: 0 4px 12px -4px rgba(214,74,56,0.25);
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .themes-mosaic-cta:hover {
    background: #d64a38;
    color: #fff;
    transform: translateY(-1px);
  }
  .themes-mosaic-cta-less { display: none; }
  .themes-mosaic-toggle:checked ~ .themes-mosaic-cta .themes-mosaic-cta-more { display: none; }
  .themes-mosaic-toggle:checked ~ .themes-mosaic-cta .themes-mosaic-cta-less { display: inline; }
  @media (max-width: 900px) {
    .themes-mosaic-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .theme-label { font-size: 11.5px; }
  }
  @media (max-width: 480px) {
    .themes-mosaic-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .theme-num { font-size: 9px; padding: 1px 5px; }
    .theme-label { font-size: 11px; }
  }

  /* ────────────────────────────────────────────────────────────
     UI REFRESH POP — appliqué sur les cards qui doivent ressortir
     Pattern unifié réutilisé sur toutes les landings (charte design pop).
     ──────────────────────────────────────────────────────────── */
  .method-step,
  .testim-card,
  .pricing .core-card,
  .faq-item,
  .meet-card,
  .frust-item-card,
  .scenes .scene-card,
  .bonus-fusion .bonus-card {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.85) inset,
      0 18px 50px -16px rgba(214,74,56,0.18),
      0 4px 14px -4px rgba(12,30,74,0.08);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  }
  .method-step:hover,
  .testim-card:hover,
  .pricing .core-card:hover,
  .faq-item:hover,
  .meet-card:hover,
  .frust-item-card:hover,
  .scenes .scene-card:hover,
  .bonus-fusion .bonus-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.85) inset,
      0 22px 56px -16px rgba(214,74,56,0.22),
      0 6px 18px -4px rgba(12,30,74,0.10);
  }

  /* CTA primary : ombre corail prononcée */
  .hf360-cta-primary {
    box-shadow:
      0 14px 30px -8px rgba(214,74,56,.5),
      0 1px 0 rgba(255,255,255,.3) inset;
  }
  .hf360-cta-primary:hover {
    box-shadow:
      0 18px 38px -8px rgba(214,74,56,.6),
      0 1px 0 rgba(255,255,255,.3) inset;
  }

  /* Trust pills : pills bordées corail-subtle au lieu de texte plat */
  .trust-pills .trust-check {
    padding: 6px 14px;
    background: rgba(214,74,56,.06);
    border: 1px solid rgba(214,74,56,.15);
    border-radius: 99px;
    transition: background .15s, border-color .15s;
  }
  .trust-pills .trust-check:hover {
    background: rgba(214,74,56,.12);
    border-color: rgba(214,74,56,.25);
  }

  /* Caveat sur les kickers narratifs (voix Elisabeth) */
  .meet-text .hf360-kicker,
  .frust-close .sig {
    font-family: 'Caveat', 'Brush Script MT', cursive;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #d64a38;
  }

  /* H1/H2 bump weight — Fraunces serif 700 pour plus de présence (aligné Homepage) */
  .hf360-hero h1,
  .hf360-sect h2,
  .life-section h2,
  .final-cta h2,
  .yt-proof h3,
  .pricing h2,
  .testim-section h2,
  .frustrations-section h2,
  .meet h2,
  .method-head h2,
  .scenes h2,
  .access h2,
  .cost-section h2,
  .faq h2,
  .not-for-you h2 {
    font-weight: 700;
  }

  /* ================================================
     JEAN LIVE CONVERSATION — triptyque produit
     Trois scènes simultanées rendent la pratique orale immédiatement
     tangible. Le fond navy détache les écrans clairs et crée une vraie
     respiration entre les blocs pédagogiques de la landing.
     ================================================ */
  .jls-section-shell {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    color: #fff;
    background:
      radial-gradient(circle at 20% 44%, rgba(22, 56, 102, .95) 0%, rgba(7, 22, 47, .98) 43%, #040c1d 100%);
  }
  .jls-section-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 24% 52%, rgba(255, 156, 138, .09), transparent 37%),
      radial-gradient(circle at 72% 28%, rgba(98, 151, 199, .08), transparent 34%);
  }
  .jean-landing-section {
    position: relative;
    margin: 0;
  }
  .jls-grid {
    display: grid;
    grid-template-columns: minmax(510px, 1.08fr) minmax(390px, .92fr);
    gap: 64px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
  }
  @media (max-width: 900px) {
    .jls-section-shell { padding: 66px 0 72px; }
    .jls-grid { grid-template-columns: 1fr; gap: 34px; padding: 0; }
    .jls-side { order: 1; }
    .jls-main { order: 2; max-width: 680px; margin: 0 auto; text-align: center; }
    .jls-main .jls-lead { margin-right: auto; margin-left: auto; }
    .jls-facts { text-align: left; }
  }
  /* ── Trois iPhone en éventail ── */
  .jls-phone {
    position: relative;
    width: min(100%, 570px);
    margin: 0 auto;
    aspect-ratio: 570 / 640;
  }
  .jls-phone::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 7%;
    bottom: 20px;
    left: 7%;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .54);
    filter: blur(24px);
  }
  .jls-phone img {
    position: absolute;
    top: 10%;
    z-index: 2;
    width: 41%;
    height: auto;
    object-fit: cover;
    object-position: top;
    border: 7px solid #0b0e1c;
    border-radius: 34px;
    background: #0b0e1c;
    box-shadow: 0 28px 52px rgba(0, 0, 0, .48);
  }
  .jls-phone img:nth-child(1) {
    left: 1%;
    transform: rotate(-9deg) translateY(7%);
  }
  .jls-phone img:nth-child(2) {
    top: 0;
    left: 50%;
    z-index: 4;
    width: 46%;
    transform: translateX(-50%);
  }
  .jls-phone img:nth-child(3) {
    right: 1%;
    transform: rotate(9deg) translateY(7%);
  }
  .jls-voice-live {
    position: absolute;
    z-index: 8;
    bottom: 5px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 22px;
    color: #fff;
    background: rgba(3, 10, 24, .82);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    white-space: nowrap;
  }
  .jls-voice-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55d98c;
    box-shadow: 0 0 12px #55d98c;
  }
  @media (max-width: 600px) {
    .jls-phone { width: min(100%, 420px); aspect-ratio: 420 / 470; }
    .jls-phone img { width: 43%; border-width: 5px; border-radius: 26px; }
    .jls-phone img:nth-child(2) { width: 49%; }
    .jls-voice-live { bottom: 0; padding: 8px 12px; font-size: 8px; }
  }
  .jls-lead {
    font-size: 16px;
    color: rgba(255,255,255,.78);
    line-height: 1.65;
    margin: 0 0 18px;
    max-width: 560px;
  }
  .jls-human {
    font-size: 13.5px;
    font-style: italic;
    color: #55504B;
    border-left: 3px solid #E8E0D3;
    padding: 2px 0 2px 12px;
    margin-top: 18px;
    max-width: 540px;
    line-height: 1.6;
  }
  .jls-jean-tile {
    border-radius: 26px;
    background: linear-gradient(160deg, #f9f1ec, #f5e9e4);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
  }
  .jls-jean-tile img {
    width: 70%;
    max-width: 230px;
    height: auto;
  }
  .jls-side-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #0C1E4A;
    margin: 0 0 16px;
  }
  .jls-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff9c8a;
    margin-bottom: 18px;
  }
  .jls-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: #ff9c8a;
    flex-shrink: 0;
  }
  .jls-h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 3.4vw, 42px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 26px;
  }
  .jls-h2 em {
    font-style: italic;
    color: #ff9c8a;
    font-weight: 600;
  }
  .jls-main .jls-live-ui {
    max-width: 560px;
    margin-bottom: 26px;
  }
  .jls-main > p {
    font-size: 15px;
    color: rgba(255,255,255,.78);
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 560px;
  }
  .jls-main strong { color: #fff; font-weight: 700; }
  .jls-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .jls-facts li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    color: rgba(255,255,255,.8);
    line-height: 1.5;
  }
  .jls-fact-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,156,138,.5);
    background: transparent;
    color: #ff9c8a;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .jls-cta {
    display: inline-block;
    background: #d64a38;
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 26px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(214,74,56,0.28);
    margin-top: 6px;
    transition: background 0.15s ease;
  }
  .jls-cta:hover { background: #b73a2b; }

  /* UI Live Conversation */
  .jls-live-ui {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12,30,74,0.86) 0%, rgba(12,30,74,0.97) 60%, #0a1737 100%);
    color: #fff;
    box-shadow: 0 12px 40px -12px rgba(12,30,74,0.5);
  }
  .jls-live-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .jls-live-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFB8A8;
  }
  .jls-live-status {
    --jls-status-rgb: 255, 138, 117;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
  }
  .jls-live-status::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: rgb(var(--jls-status-rgb));
    box-shadow: 0 0 0 0 rgba(var(--jls-status-rgb),0.45);
    animation: jlsStatusPulse 1.4s ease-out infinite;
  }
  .jls-live-ui.is-user-speaking .jls-live-status::before {
    --jls-status-rgb: 131, 224, 195;
  }
  .jls-live-ui.is-thinking .jls-live-status::before {
    background: rgba(255,255,255,0.5);
    animation: none;
  }
  @keyframes jlsStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--jls-status-rgb),0.48); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(var(--jls-status-rgb),0); }
  }
  .jls-live-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
  }
  @media (max-width: 480px) {
    .jls-live-main { flex-direction: column; text-align: center; gap: 12px; padding: 18px 14px; }
  }
  .jls-live-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }
  .jls-live-halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214,74,56,0.65), transparent 70%);
    filter: blur(14px);
    animation: jlsHaloBreath 2.4s ease-in-out infinite;
  }
  .jls-live-ui.is-user-speaking .jls-live-halo {
    background: radial-gradient(circle, rgba(131,224,195,0.42), transparent 70%);
  }
  .jls-live-ui.is-thinking .jls-live-halo {
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
  }
  @keyframes jlsHaloBreath {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50%       { opacity: 1;    transform: scale(1.05); }
  }
  .jls-live-avatar-circle {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    box-shadow: 0 6px 18px -4px rgba(0,0,0,0.45);
  }
  .jls-live-avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
  }
  .jls-live-pulse-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(214,74,56,0.8);
    animation: jlsPulseRing 1.5s cubic-bezier(0,0,0.2,1) infinite;
  }
  .jls-live-ui.is-user-speaking .jls-live-pulse-ring {
    border-color: rgba(131,224,195,0.82);
  }
  .jls-live-ui.is-thinking .jls-live-pulse-ring { display: none; }
  @keyframes jlsPulseRing {
    0%   { transform: scale(0.92); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  .jls-live-text {
    flex: 1;
    min-width: 0;
  }
  .jls-live-state-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .jls-live-state-sub {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 17px;
  }
  .jls-live-speaking-bars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 22px;
    height: 13px;
    flex: 0 0 22px;
  }
  .jls-live-speaking-bars span {
    width: 2px;
    height: 100%;
    border-radius: 3px;
    background: #FF8A75;
    transform-origin: center;
    animation: jlsVoiceBar 0.72s ease-in-out infinite alternate;
  }
  .jls-live-speaking-bars span:nth-child(2) { animation-delay: -0.48s; }
  .jls-live-speaking-bars span:nth-child(3) { animation-delay: -0.2s; }
  .jls-live-speaking-bars span:nth-child(4) { animation-delay: -0.62s; }
  .jls-live-speaking-bars span:nth-child(5) { animation-delay: -0.34s; }
  .jls-live-ui.is-user-speaking .jls-live-speaking-bars span { background: #83E0C3; }
  .jls-live-ui.is-thinking .jls-live-speaking-bars span {
    animation: none;
    opacity: 0.38;
    transform: scaleY(0.25);
  }
  @keyframes jlsVoiceBar {
    from { transform: scaleY(0.22); opacity: 0.65; }
    to { transform: scaleY(1); opacity: 1; }
  }
  .jls-live-timer {
    flex-shrink: 0;
    text-align: center;
  }
  .jls-live-timer-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .jls-live-timer-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
  }
  .jls-live-transcript {
    box-sizing: border-box;
    height: 94px;
    padding: 12px 18px;
    background: rgba(0,0,0,0.22);
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
  .jls-live-turn {
    flex: 0 0 auto;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .jls-live-turn.is-user { color: rgba(255,255,255,0.93); }
  .jls-live-turn.is-agent { color: #FFD9CD; }
  .jls-live-turn.is-memory {
    background: rgba(214,74,56,0.16);
    border: 1px solid rgba(255,217,205,0.4);
    border-radius: 10px;
    padding: 8px 10px;
  }
  .jls-live-turn-who {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-right: 7px;
  }
  .jls-live-turn.jls-animate-in {
    animation: jlsFadeUp 0.6s ease-out;
  }
  @keyframes jlsFadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .jls-live-footer {
    padding: 12px 22px;
    background: rgba(0,0,0,0.38);
    border-top: 1px solid rgba(255,255,255,0.07);
    text-align: center;
  }
  .jls-live-end-btn {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
  }
  @media (max-width: 480px) {
    .jls-live-transcript { height: 150px; }
    .jls-live-state-sub { justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .jls-live-halo,
    .jls-live-pulse-ring,
    .jls-live-status::before,
    .jls-live-speaking-bars span,
    .jls-live-turn.jls-animate-in { animation: none !important; }
    .jls-live-transcript { scroll-behavior: auto; }
  }

  /* ============================================================
     PASSE REDUCTION DE SCROLL (2026-06-20) - espacement + densite,
     contenu identique. Override en fin de fichier pour battre les
     styles inline des sections. ~ -7% de hauteur de page.
     ============================================================ */
  section, .hf360-sect { padding-top: 44px !important; padding-bottom: 44px !important; }
  section[style*="padding"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  .frustrations-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .head { margin-bottom: 26px !important; }
  .hf360-sect h2 { margin-bottom: 10px !important; }
  .frust-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  @media (max-width: 760px) { .frust-grid { grid-template-columns: 1fr !important; } }
  .six-moments-grid { gap: 14px !important; }
  /* Wall of Love : 1 seule rangee sur la landing (alleger), cartes a hauteur naturelle */
  div:has(> [class*="wallScrollRight"]) { display: none !important; }

  /* Hero : annule le double padding (Part A ajoutait 44px par-dessus hero-inner) */
  .hf360-hero { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Offre de bienvenue -20% : badge + mention "nouveaux membres".
     Badge corail plein (texte blanc) -> lisible sur cream, blanc ET navy (og-banner).
     Mention corail -> uniquement sur fonds clairs (hero, mid-cta, core-card). */
  .hf360-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    background: #d64a38;
    border-radius: 999px;
    padding: 5px 13px;
    margin: 0 0 10px;
    line-height: 1.2;
    box-shadow: 0 6px 16px -6px rgba(214,74,56,.5);
    /* La pastille porte l'échéance depuis le 2026-07-24 : le libellé le plus long
       du rotor ("Offre de fin d'année 🎁 · jusqu'au 31 décembre") mesurait 333px
       pour 327px disponibles en 375px. Filet : jamais plus large que le parent,
       et si ça passe quand même à la ligne, ça reste centré et lisible. */
    max-width: 100%;
    text-align: center;
  }
  @media (max-width: 400px) {
    .hf360-welcome-badge { font-size: 10px; letter-spacing: 0.05em; padding: 5px 11px; }
  }
  .hf360-welcome-sub {
    margin: 8px auto 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1A1F36;
    line-height: 1.45;
    max-width: 400px;
  }
  .hf360-welcome-sub strong { color: #b73a2b; font-weight: 700; }
  .og-banner .hf360-welcome-badge { margin-bottom: 12px; }


  /* ========================================================
     SECTION STYLES — déplacés des content FR/EN (DCR-11).
     Étaient 12 blocs <style> inline BYTE-IDENTIQUES dupliqués
     dans les deux fichiers de contenu. Le bloc .frust-diff
     (section EN-only) reste inline dans le content EN.
     ======================================================== */

    .frustrations-section .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
    .frustrations-section .head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
    .frustrations-section h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(32px, 3.5vw, 42px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; color: #0C1E4A; }
    .frustrations-section h2 em { color: #d64a38; font-style: italic; font-weight: 500; }
    .frustrations-section .lead { font-size: 18px; color: #0C1E4A; line-height: 1.55; max-width: 600px; margin: 0 auto; }
    .frustrations-section .lead .transition { display: block; position: relative; margin-top: 26px; padding-top: 24px; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 21px; color: #0C1E4A; }
    .frustrations-section .lead .transition::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 2px; background: #d64a38; border-radius: 2px; }
    .frustrations-section .lead .transition u { text-decoration: underline; text-decoration-color: #d64a38; text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .frust-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
    @media (min-width: 760px) { .frust-grid { grid-template-columns: 1fr 1fr; } }
    .frust-card { position: relative; overflow: hidden; background: #FFFDF9; border: 1px solid #EADDCB; border-radius: 20px; padding: 24px 26px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -22px rgba(12,30,74,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .frust-card:hover { transform: translateY(-3px); border-color: #e0cdb4; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 44px -24px rgba(12,30,74,.4); }
    .frust-card .ghost { position: absolute; top: -22px; right: -2px; font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 118px; line-height: 1; color: #d64a38; opacity: .06; pointer-events: none; user-select: none; }
    .frust-idx { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
    .frust-idx .n { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 25px; color: #b93d2e; line-height: 1; flex: none; }
    .frust-idx .n::after { content: ' -'; font-style: normal; font-weight: 500; }
    .frust-idx .t { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; color: #b93d2e; line-height: 1.14; letter-spacing: -.01em; }
    .frust-text { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: #39414f; }
    .frust-text b { color: #0C1E4A; font-weight: 600; }
    .frust-close { margin: 38px auto 0; max-width: 760px; background: #fff1ec; border-left: 4px solid #d64a38; border-radius: 0 14px 14px 0; padding: 24px 30px 24px 28px; }
    .frust-close p { font-size: 17px; line-height: 1.62; color: #1A1F36; margin: 0; }
    .frust-close p strong { color: #d64a38; font-weight: 700; }
    .frust-close .verdict { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.5; color: #0C1E4A; margin: 14px 0 0; }
    .frust-close .sig { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
    .frust-close .sig img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 3px 11px rgba(122,75,38,.22); }
    .frust-close .sig .name { font-family: 'Caveat', cursive; font-size: 29px; color: #d64a38; line-height: 1; }
    @media (max-width: 720px) {
      .frustrations-section .lead .transition { font-size: 19px; }
      .frust-idx .t { font-size: 19px; }
      .frust-text { font-size: 15.5px; }
      .frust-close .verdict { font-size: 17.5px; }
    }
  

      .hf360-trust .tw{max-width:920px;margin:0 auto;padding:0 24px;}
      .hf360-trust .tk{font-family:var(--font-dm-sans),'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b73a2b;text-align:center;margin:0 0 8px;}
      .hf360-trust h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(23px,3.2vw,30px);color:#0C1E4A;text-align:center;margin:0 0 6px;letter-spacing:-.02em;}
      .hf360-trust h2 em{color:#d64a38;font-style:italic;}
      .hf360-trust .tsub{text-align:center;font-size:14px;color:#5b6172;margin:0 0 26px;}
      .hf360-yt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
      @media(max-width:720px){.hf360-yt-grid{grid-template-columns:1fr;}}
      .hf360-ytc{background:#fff;border:1px solid #ece3d6;border-radius:16px;padding:17px 19px;box-shadow:0 16px 40px -34px rgba(12,30,74,.45);text-align:left;min-width:0;}
      .hf360-ytc-top{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
      .hf360-ytc-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;}
      .hf360-ytc-ini{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#606060;color:#fff;font-weight:600;font-size:16px;}
      .hf360-ytc-id{flex:1;min-width:0;}
      .hf360-ytc-h{font-size:13px;font-weight:700;color:#0C1E4A;line-height:1.2;}
      .hf360-ytc-m{font-size:11.5px;color:#94a3b8;margin-top:1px;}
      .hf360-ytbadge{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e3d9c9;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:700;color:#5b6172;white-space:nowrap;}
      .hf360-ytbadge .y{color:#FF0000;font-weight:800;}
      .hf360-ytc-t{font-size:13.5px;line-height:1.5;color:#1A1F36;margin:0 0 9px;}
      .hf360-ytc-t b{color:#0C1E4A;font-weight:700;}
      .hf360-ytc-l{font-size:12px;color:#5b6172;}
      .hf360-ytc-v{font-size:11.5px;color:#94a3b8;margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .hf360-mv{margin-top:18px;background:linear-gradient(180deg,#fff,#FFF8EF);border:1px solid #ead9c6;border-radius:18px;padding:24px 22px;}
      .hf360-mv-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
      @media(max-width:720px){.hf360-mv-row{grid-template-columns:1fr;gap:22px;}}
      .hf360-mv-c{text-align:center;}
      .hf360-mv-c img{display:block;margin:0 auto;width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px -8px rgba(12,30,74,.3);}
      .hf360-mv-s{color:#fbbf24;font-size:12px;letter-spacing:2px;margin:8px 0 5px;}
      .hf360-mv-q{font-size:13px;line-height:1.5;color:#1A1F36;margin:0 0 7px;font-style:italic;}
      .hf360-mv-q b{font-style:normal;color:#0C1E4A;font-weight:700;}
      .hf360-mv-w{font-size:12px;color:#0C1E4A;font-weight:700;}
      .hf360-mv-w span{display:block;color:#94a3b8;font-weight:500;font-size:11px;}
      .hf360-mv-feat{display:flex;gap:18px;align-items:flex-start;text-align:left;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #ead9c6;}
      .hf360-mv-feat img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #fff;box-shadow:0 6px 16px -8px rgba(12,30,74,.3);}
      .hf360-mv-feat .hf360-mv-q{font-size:14px;}
      .hf360-mv-feat-link{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:700;color:#d64a38;text-decoration:none;}
      @media(max-width:720px){.hf360-mv-feat{flex-direction:column;align-items:center;text-align:center;}}
    

    .auth-card-with-photo { position: relative; overflow: hidden; padding: 0 !important; }
    .auth-card-with-photo .auth-photo { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
    .auth-card-with-photo .auth-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.05) 100%); }
    .auth-card-with-photo > .auth-tag, .auth-card-with-photo > .auth-h3, .auth-card-with-photo > .auth-quote, .auth-card-with-photo > .hf360-audio { margin-left: 22px; margin-right: 22px; }
    .auth-card-with-photo > .auth-tag { margin-top: 22px !important; }
    .auth-card-with-photo > .hf360-audio { margin-bottom: 22px; }
  

    .bonus-fusion .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    .bonus-fusion .head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
    .bonus-fusion .pill { display: inline-block; background: #d64a38; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; }
    .bonus-fusion h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; color: #0C1E4A; }
    .bonus-fusion h2 em { color: #d64a38; font-style: italic; font-weight: 500; }
    .bonus-fusion .head p { font-size: 17px; color: #0A0F1C; font-weight: 450; line-height: 1.6; margin: 0; }

    .bonus-fusion-grid { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 1080px; margin: 0 auto; }
    @media (min-width: 880px) { .bonus-fusion-grid { grid-template-columns: 1fr 1fr; } }

    .bonus-fcard { background: #fff; border: 1px solid #E8E0D3; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; box-shadow: 0 22px 50px -28px rgba(12,30,74,.18); }
    .bonus-fcard .ftag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #FFF8EF; color: #b93d2e; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
    .bonus-fcard .ftag .ico { width: 16px; height: 16px; border-radius: 4px; background: #d64a38; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
    .bonus-fcard .ftag.yt .ico { background: #FF0000; }
    .bonus-fcard h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: #0C1E4A; margin: 0 0 12px; letter-spacing: -.01em; }
    .bonus-fcard h3 em { color: #d64a38; font-style: italic; font-weight: 600; }
    .bonus-fcard p { font-size: 15px; color: #4A5578; line-height: 1.65; margin: 0 0 12px; }
    .bonus-fcard p:last-child { margin-bottom: 0; }
    .bonus-fcard p strong { color: #0C1E4A; font-weight: 600; }
    .bonus-fcard .photo { aspect-ratio: 16/10; border-radius: 14px; background: url('/images/elisabeth-call.webp') center 30%/cover; border: 1px solid #E8E0D3; margin-bottom: 18px; }
    .bonus-fcard .sig { font-family: 'Caveat', cursive; font-size: 19px; color: #d64a38; margin-top: 14px; }

    .bonus-fcard .yt-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 18px; }
    .bonus-fcard .yt-mini { aspect-ratio: 16/9; border-radius: 8px; background-size: cover; background-position: center; box-shadow: 0 1px 0 rgba(12,30,74,.04); }
    .bonus-fcard .yt-more { aspect-ratio: 16/9; border-radius: 8px; border: 2px dashed #d4cfb8; background: #FBF7EE; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .bonus-fcard .yt-more b { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: #d64a38; line-height: 1; }
    .bonus-fcard .yt-more span { font-size: 10px; color: #4a5b80; margin-top: 4px; font-weight: 500; }

    /* Value badge + scarcity pill (added for ZF bonus) */
    .bonus-fcard .value-badge { display: inline-flex; align-items: baseline; gap: 6px; background: #fff; border: 1.5px solid #d64a38; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #b93d2e; letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start; margin-bottom: 14px; }
    .bonus-fcard .value-badge .strike { text-decoration: line-through; color: #94a3b8; font-weight: 500; }
    .bonus-fcard .value-badge .free { color: #5C7839; font-weight: 800; letter-spacing: 0.04em; }
    .bonus-fcard .scarcity-pill { display: inline-flex; align-items: center; gap: 6px; background: #FFE5E0; border: 1px solid #d64a38; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #B03A2A; letter-spacing: 0.04em; text-transform: uppercase; align-self: flex-start; margin-bottom: 14px; }

    /* ZF wide card */
    .bonus-fcard.zf-wide { background: #fff; border: 2px solid #d64a38; padding: 32px; }
    .bonus-fcard.zf-wide .ftag { background: #d64a38; color: #fff; }
    .bonus-fcard.zf-wide .ftag .ico { background: #fff; color: #d64a38; }
    .bonus-fcard.zf-wide .zf-wide-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
    @media (max-width: 780px) { .bonus-fcard.zf-wide .zf-wide-grid { grid-template-columns: 1fr; gap: 24px; } }
    .bonus-fcard.zf-wide h3 { font-size: 26px; margin-bottom: 14px; }
    .zf-wide-illu { border-radius: 14px; background: linear-gradient(135deg, #FFF8EF, #FFEEDC); border: 1px solid #E8E0D3; padding: 22px; display: flex; flex-direction: column; gap: 9px; }
    .zf-card-mini { background: #fff; border: 1px solid #E8E0D3; border-radius: 10px; padding: 9px 12px; font-family: 'Fraunces', serif; font-size: 14px; color: #0C1E4A; font-weight: 500; box-shadow: 0 4px 12px -6px rgba(12,30,74,.1); }
    .zf-card-mini.ok { background: #F0F4E6; border-color: rgba(92,120,57,.3); }
    .zf-card-mini .err { text-decoration: underline wavy #d64a38; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
    .zf-card-mini .ok-word { color: #5C7839; font-weight: 700; }
    .zf-card-mini .check-mini { float: right; color: #5C7839; font-weight: 800; }
    .zf-card-mini .play-mini { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #d64a38; color: #fff; font-size: 8px; margin-right: 6px; vertical-align: 1px; box-shadow: 0 2px 5px -2px rgba(214,74,56,.6); }
    .zf-meta-mini { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; margin-bottom: 2px; }
    .zf-meta-mini.lesson { color: #d64a38; margin-top: 4px; }

    /* ZF — enriched detail (stats + chips + features + lesson teaser) */
    .zf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 18px; }
    .zf-stat { min-width: 0; background: #FFF8EF; border: 1px solid #E8E0D3; border-radius: 12px; padding: 14px 8px; text-align: center; }
    .zf-stat .n { font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px; color: #d64a38; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
    @media (max-width: 420px) { .zf-stat .n { font-size: 23px; } }
    .zf-stat .l { font-size: 11px; color: #1A1F36; font-weight: 600; letter-spacing: 0.02em; margin-top: 6px; line-height: 1.25; }
    .zf-chips-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #1A1F36; margin: 4px 0 10px; }
    .zf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .zf-chip { display: inline-flex; align-items: baseline; gap: 6px; background: #fff; border: 1px solid #E8E0D3; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; color: #0C1E4A; font-weight: 500; line-height: 1.2; }
    .zf-chip .c { font-family: 'Fraunces', serif; font-size: 11.5px; font-weight: 700; color: #d64a38; }
    .zf-feats { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px dashed #E8E0D3; }
    .zf-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #1A1F36; line-height: 1.5; }
    .zf-feat .fic { width: 28px; height: 28px; border-radius: 50%; background: #FFE5E0; color: #d64a38; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; }
    .zf-feat strong { color: #0C1E4A; font-weight: 700; }
    .zf-lesson-mini { background: #d64a38; color: #fff; border-radius: 10px; padding: 11px 14px; box-shadow: 0 8px 16px -8px rgba(214,74,56,.5); display: flex; flex-direction: column; gap: 4px; }
    .zf-lesson-title { font-family: 'Fraunces', serif; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fff; }
    .zf-lesson-meta { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.92); display: flex; align-items: center; gap: 8px; }
    .zf-lesson-meta .pl { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; font-size: 7px; }

    /* Layout 2 cards top + 1 wide bottom — override parent grid to be vertical */
    .bonus-fusion-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; max-width: 1080px; min-width: 0; }
    @media (min-width: 880px) { .bonus-fusion-grid { grid-template-columns: minmax(0, 1fr) !important; } }
    .bonus-fusion-row-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
    .bonus-fusion-row-top > * { min-width: 0; }
    @media (min-width: 880px) { .bonus-fusion-row-top { grid-template-columns: 1fr 1fr; } }
  

    .access .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
    .access-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
    .access-head .hf360-kicker { display: inline-block; margin-bottom: 18px; }
    .access-head h2 { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: #0C1E4A; margin: 0 0 18px; letter-spacing: -0.02em; }
    .access-head p { font-size: 17px; color: #0A0F1C; font-weight: 450; line-height: 1.65; margin: 0; }

    .access-grid { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 1080px; margin: 0 auto 44px; }
    @media (min-width: 780px) { .access-grid { grid-template-columns: 1fr 1fr; } }

    .access-card { background: #FFF8EF; border: 1px solid #E8E0D3; border-radius: 20px; padding: 32px 32px 28px; box-shadow: 0 18px 38px -22px rgba(12,30,74,.14); }
    .access-card .head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
    .access-card .av { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(12,30,74,.12); background-size: cover; background-position: center; }
    .access-card .av.av-photo-e { background-image: url('/images/elisabeth-avatar.webp'); }
    .access-card .av.av-photo-m { background-image: url('/images/mathieu-hollywood.jpg'); }
    .access-card .name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: #0C1E4A; line-height: 1.2; }
    .access-card .role { font-size: 13.5px; color: #1A1F36; margin-top: 4px; line-height: 1.4; }
    .access-card h3 { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700; color: #0C1E4A; margin: 0 0 14px; line-height: 1.3; letter-spacing: -0.01em; }
    .access-card p { font-size: 15px; color: #0A0F1C; font-weight: 450; line-height: 1.65; margin: 0 0 16px; }
    .access-card p strong { color: #0C1E4A; font-weight: 600; }
    .access-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .access-card ul li { font-size: 14px; color: #0A0F1C; font-weight: 450; display: flex; gap: 10px; line-height: 1.5; }
    .access-card ul li::before { content: "✓"; color: #d64a38; font-weight: 700; flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: rgba(214,74,56,.1); border-radius: 50%; font-size: 11px; }


    .access-tag { display: block; text-align: center; margin-top: 22px; font-family: 'Caveat', cursive; font-size: 22px; color: #d64a38; }
  

    .course-testim-head { text-align: center; max-width: 720px; margin: 0 auto 48px; padding: 0 24px; }
    .course-testim-head .tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: #0C1E4A; color: #fff;
      padding: 5px 12px; border-radius: 999px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; margin-bottom: 16px;
    }
    .course-testim-head h2 { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; color: #0C1E4A; margin: 0 0 14px; letter-spacing: -0.02em; }
    .course-testim-head p { font-size: 16px; color: #0A0F1C; font-weight: 450; line-height: 1.6; margin: 0; }

    /* Masonry columns */
    .ct-masonry {
      column-count: 1;
      column-gap: 20px;
      max-width: 1232px;
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (min-width: 640px) { .ct-masonry { column-count: 2; } }
    @media (min-width: 1000px) { .ct-masonry { column-count: 3; } }

    .ct-card {
      background: #fff;
      border: 1px solid #E8E0D3;
      border-radius: 18px;
      padding: 22px 24px;
      margin: 0 0 20px;
      break-inside: avoid;
      display: block;
      position: relative;
    }
    .ct-card.featured {
      border: 2px solid #d64a38;
      background: linear-gradient(135deg, #FFF8EF 0%, #fff 55%);
      box-shadow: 0 16px 40px -16px rgba(214,74,56,.22);
    }
    .ct-card .ct-quote-mark {
      position: absolute;
      top: -8px; left: 18px;
      font-family: 'Fraunces', serif;
      font-size: 48px;
      color: rgba(214,74,56,.3);
      line-height: 1;
      font-weight: 700;
    }
    .ct-card.featured .ct-quote-mark { color: rgba(214,74,56,.5); }
    .ct-card .ct-stars {
      display: inline-flex;
      gap: 2px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #f59e0b;
    }
    .ct-card .ct-quote {
      font-size: 14.5px;
      color: #0A0F1C; font-weight: 450;
      line-height: 1.65;
      margin: 0 0 16px;
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 400;
    }
    .ct-card.featured .ct-quote {
      font-size: 17px;
      color: #0C1E4A;
      font-style: normal;
      font-weight: 500;
      line-height: 1.55;
    }
    .ct-card .ct-quote strong { color: #0C1E4A; font-weight: 700; font-style: normal; }
    .ct-card .ct-quote .highlight {
      background-image: linear-gradient(transparent 62%, rgba(214,74,56,.22) 62%);
      color: #d64a38;
      font-weight: 700;
      font-style: normal;
      padding: 0 2px;
    }

    .ct-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 12px;
      border-top: 1px solid #F0EBE0;
    }
    .ct-av {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: #d64a38;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
      flex-shrink: 0;
    }
    .ct-av.ct-av-photo {
      background-color: transparent;
      background-size: cover;
      background-position: center;
      color: transparent;
      border: 1px solid #E8E0D3;
    }

    /* Spotlight featured (photo + quote horizontal) */
    .ct-spotlight {
      max-width: 1180px;
      margin: 0 auto 32px;
      padding: 0 24px;
    }
    .ct-spotlight-card {
      background: #fff;
      border: 1px solid #E8E0D3;
      border-radius: 20px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
      box-shadow: 0 22px 48px -22px rgba(12,30,74,.18);
    }
    @media (min-width: 760px) {
      .ct-spotlight-card { grid-template-columns: 320px 1fr; }
    }
    .ct-spotlight-photo {
      background-size: cover;
      background-position: center;
      min-height: 280px;
    }
    @media (min-width: 760px) { .ct-spotlight-photo { min-height: 0; } }
    .ct-spotlight-body {
      padding: 36px 38px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .ct-spotlight-mark {
      font-family: 'Fraunces', serif;
      font-size: 56px;
      line-height: 0.6;
      color: #d64a38;
      font-weight: 600;
    }
    .ct-spotlight-quote {
      font-family: 'Fraunces', serif;
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.5;
      color: #0C1E4A;
      margin: 0;
      font-style: italic;
    }
    .ct-spotlight-quote strong {
      color: #d64a38;
      font-style: italic;
      font-weight: 600;
    }
    .ct-spotlight-quote .highlight {
      background-image: linear-gradient(transparent 62%, rgba(214,74,56,.22) 62%);
      color: #d64a38;
      font-weight: 700;
      font-style: normal;
      padding: 0 2px;
    }
    .ct-spotlight-meta {
      padding-top: 16px;
      border-top: 1px dashed #E8E0D3;
      display: flex; align-items: center; gap: 10px;
    }
    .ct-spotlight-name {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 17px;
      color: #0C1E4A;
      margin: 0;
    }
    .ct-spotlight-detail {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #6b7280;
      margin: 0;
    }
    .ct-spotlight-source {
      margin-left: auto; flex-shrink: 0;
      font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 4px 9px; border-radius: 5px;
      background: #f0fdf4; color: #15803d;
    }
    .ct-spotlight-source::before { content: "✓"; font-size: 11px; margin-right: 4px; }
    .ct-name { font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: #0C1E4A; line-height: 1.2; }
    .ct-detail { font-size: 12px; color: #1A1F36; margin-top: 2px; }
    .ct-verif {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10.5px; font-weight: 700;
      color: #15803d; background: #fff;
      border: 1px solid #bbf7d0; border-radius: 999px;
      padding: 2px 8px; white-space: nowrap;
      vertical-align: 1px;
    }
    .ct-verif::before { content: "✓"; font-size: 10px; }
    .ct-video-verif {
      display: inline-flex; align-items: center; gap: 5px;
      margin-top: 10px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: #86efac; background: rgba(134,239,172,0.1);
      border: 1px solid rgba(134,239,172,0.35);
      border-radius: 999px; padding: 3px 9px;
    }
    .ct-video-verif::before { content: "✓"; font-size: 10px; }
    .ct-flag { font-size: 18px; line-height: 1; margin-right: 1px; }
    .ct-source {
      margin-left: auto; flex-shrink: 0;
      font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 4px 9px; border-radius: 5px;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .ct-source.email { background: #dbeafe; color: #1d4ed8; }
    .ct-source.review { background: #f0fdf4; color: #15803d; }
    .ct-source.review::before { content: "✓"; font-size: 11px; }
    .ct-source.email::before { content: "✉"; font-size: 11px; }

    .ct-milestone {
      display: inline-block;
      margin-bottom: 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #d64a38;
      background: rgba(214,74,56,.1);
      padding: 4px 10px;
      border-radius: 999px;
    }
  

      .ct-video-card { background:radial-gradient(120% 140% at 100% 0%,#14306b 0%,#0C1E4A 55%); border:1px solid #16305f; border-radius:16px; padding:22px; box-shadow:0 22px 46px -26px rgba(12,30,74,.5); display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
      @media (min-width:760px) { .ct-video-card { grid-template-columns:1fr 110px; gap:28px; padding:24px 30px; } .ct-video-card--playing { grid-template-columns:1fr 240px; } }
      .ct-video-card > .ct-video-player { order:2; }
      .ct-video-card > div:not(.ct-video-player) { order:1; }
      .ct-video-player { position:relative; aspect-ratio:9/16; width:100%; max-width:110px; margin:0 auto; border-radius:12px; overflow:hidden; background:#000 center/cover no-repeat; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); }
      .ct-video-card--playing .ct-video-player { max-width:240px; }
      .ct-video-player .hero-video { position:absolute; inset:0; width:100%; height:100%; }
      .ct-video-player wistia-player { width:100%; height:100%; display:block; }
      .ct-video-player wistia-player:not(:defined) { display:block; width:100%; height:100%; }
      .ct-video-thumb { position:absolute; inset:0; width:100%; height:100%; padding:0; border:none; cursor:pointer; background-size:cover; background-position:center; z-index:2; transition:opacity .25s; }
      .ct-video-thumb::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.45) 100%); }
      .ct-video-thumb-play { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.95); margin:0 auto; box-shadow:0 10px 24px rgba(0,0,0,.4); transition:transform .25s; }
      .ct-video-thumb:hover .ct-video-thumb-play { transform:scale(1.06); }
      .ct-video-thumb-play svg { width:14px; height:14px; margin-left:2px; }
      .ct-video-thumb[hidden] { display:none; }
      .ct-video-thumb-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
      .ct-video-kicker { display:inline-flex; align-items:center; gap:11px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffb4a6; margin-bottom:14px; }
      .ct-video-kicker::before { content:""; width:26px; height:2px; background:#d64a38; flex-shrink:0; }
      .ct-video-quote { font-family:'Fraunces',serif; font-size:18px; line-height:1.5; color:#fff; margin:0 0 16px; font-style:italic; }
      .ct-video-quote strong { color:#ff8f7a; font-style:italic; font-weight:600; }
      .ct-video-author { font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:#fff; margin:0; }
    

    .not-for-you .container { max-width: 720px; margin: 0 auto; padding: 0 24px; }
    .nfy-kicker {
      display: inline-block; font-family: 'Fraunces', serif; font-style: italic;
      font-size: 13px; color: #d64a38; text-transform: uppercase; letter-spacing: 0.18em;
      margin-bottom: 18px; font-weight: 600;
    }
    .not-for-you h2 {
      font-family: 'Fraunces', serif; font-weight: 600;
      font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1;
      color: #0C1E4A; margin: 0 0 36px; letter-spacing: -0.02em;
    }
    .not-for-you h2 em {
      font-style: italic; color: #d64a38; font-weight: 600;
    }
    .nfy-prose p {
      font-size: 17.5px; line-height: 1.7; color: #0A0F1C; font-weight: 450;
      margin: 0 0 20px;
    }
    .nfy-prose p.lead { font-size: 19px; }
    .nfy-prose p strong {
      background: linear-gradient(180deg, transparent 60%, rgba(214,74,56,0.18) 60%);
      padding: 0 3px; font-weight: 600; color: #0C1E4A;
    }
    .nfy-standalone {
      font-family: 'Fraunces', serif;
      font-size: clamp(22px, 2.8vw, 28px); line-height: 1.3;
      color: #0C1E4A; text-align: center;
      margin: 36px 0; font-weight: 500;
    }
    .nfy-standalone .accent {
      color: #d64a38; font-style: italic; font-weight: 500;
    }
    .nfy-pause {
      font-family: 'Fraunces', serif; font-style: italic;
      font-size: clamp(20px, 2.4vw, 24px); line-height: 1.45;
      color: #0C1E4A;
      margin: 36px 0 12px; padding: 0 0 0 22px;
      border-left: 3px solid #d64a38;
    }
    .nfy-signature {
      margin-top: 40px; padding-top: 24px;
      border-top: 1px solid #E8E0D3;
      font-family: 'Caveat', cursive;
      font-size: 28px; color: #d64a38; line-height: 1;
    }
    @media (max-width: 760px) {
      .not-for-you h2 { font-size: 28px; }
      .nfy-prose p { font-size: 16.5px; }
    }
  

    .six-moments { padding: 72px 24px; background: var(--cream, #FBF7F0); }
    .six-moments-wrap { max-width: 1180px; margin: 0 auto; }
    .six-moments-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
    .six-moments-head .kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #d64a38; background: rgba(214,74,56,0.1); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
    .six-moments-head h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; color: #0C1E4A; margin: 0 0 14px; letter-spacing: -0.02em; }
    .six-moments-head h2 .hl { background-image: linear-gradient(transparent 60%, rgba(214,74,56,.28) 60%); padding: 0 2px; }
    .six-moments-head p { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.55; color: #6B7280; max-width: 640px; margin: 0 auto; }
    .six-moments-head p strong { color: #d64a38; font-style: normal; font-weight: 600; }
    .six-moments-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
    @media (min-width: 700px) { .six-moments-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 980px) { .six-moments-grid { grid-template-columns: repeat(3, 1fr); } }
    .six-moments-card { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #f0ece4; box-shadow: 0 22px 48px -24px rgba(12,30,74,0.18); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
    .six-moments-card:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -22px rgba(12,30,74,0.28); }
    .six-moments-card .photo { flex: 0 0 220px; background-size: cover; background-position: center; }
    .six-moments-card .body { padding: 24px 24px; flex: 1; }
    .six-moments-card .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: #d64a38; margin: 0 0 14px; }
    .six-moments-card h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; color: #0C1E4A; margin: 0 0 12px; }
    .six-moments-card h4 .win { background-image: linear-gradient(transparent 58%, rgba(214,74,56,.32) 58%); padding: 0 1px; }
    .six-moments-card p { font-size: 13.5px; line-height: 1.6; color: #2a2f3d; margin: 0; }
    .six-moments-card.comptoir .photo { background-image: url('/images/landing-360/six-moments/comptoir.jpg'); }
    .six-moments-card.table .photo { background-image: url('/images/landing-360/six-moments/table.jpg'); }
    .six-moments-card.confiance .photo { background-image: url('/images/landing-360/six-moments/confiance.jpg'); }
    .six-moments-card.film .photo { background-image: url('/images/landing-360/six-moments/film.jpg'); }
    .six-moments-card.voyage .photo { background-image: url('/images/landing-360/six-moments/voyage.jpg'); }
    .six-moments-card.famille .photo { background-image: url('/images/landing-360/six-moments/famille.jpg'); }
  

    .hf360-prefaq .pfw { max-width: 640px; margin: 0 auto; padding: 0 24px; }
    .hf360-prefaq .pf-intro { text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: #0C1E4A; margin: 0 0 16px; }
    .hf360-prefaq details { background: #fff; border: 1px solid #E8E0D3; border-radius: 12px; margin-bottom: 10px; padding: 0 18px; }
    .hf360-prefaq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 600; font-size: 15px; color: #0C1E4A; }
    .hf360-prefaq summary::-webkit-details-marker { display: none; }
    .hf360-prefaq summary::after { content: "+"; color: #d64a38; font-size: 19px; font-weight: 600; flex: none; }
    .hf360-prefaq details[open] summary::after { content: "−"; }
    .hf360-prefaq .pf-a { padding: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #1A1F36; }
    .hf360-prefaq .pf-a p { margin: 0 0 8px; }
    .hf360-prefaq .pf-a strong { color: #0C1E4A; }
  

    .hf360-gar .gar-wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
    .hf360-gar .gar-head{text-align:center;max-width:680px;margin:0 auto 40px;}
    .hf360-gar .gar-kicker{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b73a2b;margin-bottom:16px;font-family:var(--font-dm-sans),'DM Sans',sans-serif;}
    .hf360-gar .gar-kicker::before{content:"";width:26px;height:2px;background:#d64a38;}
    .hf360-gar h2{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.12;color:#0C1E4A;margin:0;letter-spacing:-.02em;}
    .hf360-gar .gar-hl{background-image:linear-gradient(transparent 60%,rgba(214,74,56,.28) 60%);padding:0 2px;}
    .hf360-gar .gar-card{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;background:#fff;border:1px solid #E8E0D3;border-radius:22px;padding:40px 44px;box-shadow:0 30px 60px -40px rgba(12,30,74,.26);}
    .hf360-gar .gar-shield{position:relative;width:172px;height:190px;margin:0 auto;display:flex;align-items:center;justify-content:center;}
    .hf360-gar .gar-shield svg{position:absolute;inset:0;width:100%;height:100%;}
    .hf360-gar .gar-zero{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:96px;color:#d64a38;line-height:1;position:relative;z-index:2;}
    .hf360-gar .gar-word{position:absolute;bottom:34px;font-family:var(--font-dm-sans),'DM Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#0C1E4A;z-index:2;}
    .hf360-gar .gar-body p{font-size:17px;line-height:1.62;color:#0A0F1C;font-weight:450;margin:0 0 24px;}
    .hf360-gar .gar-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
    .hf360-gar .gar-bullets li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#1A1F36;}
    .hf360-gar .gar-check{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(47,125,63,.12);color:#2f7d3f;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px;}
    @media(max-width:780px){.hf360-gar .gar-card{grid-template-columns:1fr;gap:28px;padding:34px 24px;text-align:center;}.hf360-gar .gar-bullets li{text-align:left;}}
  

    .faq .container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
    .faq-head { text-align: center; margin-bottom: 44px; }
    .faq-head h2 {
      font-family: 'Fraunces', serif; font-weight: 700;
      font-size: clamp(30px, 4vw, 44px); line-height: 1.1;
      color: #0C1E4A; margin: 14px 0 14px; letter-spacing: -0.02em;
    }
    .faq-head p { font-size: 17px; color: #0A0F1C; font-weight: 450; line-height: 1.6; margin: 0; }
    .faq-list { display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: #fff; border: 1px solid #E8E0D3;
      border-radius: 16px; overflow: hidden;
      transition: box-shadow .2s;
    }
    .faq-item:hover { box-shadow: 0 8px 24px -12px rgba(12,30,74,.1); }
    .faq-item summary {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none;
      font-family: 'Fraunces', serif; font-weight: 700;
      font-size: 17px; color: #0C1E4A; line-height: 1.35;
      letter-spacing: -0.01em;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+"; flex-shrink: 0;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(214,74,56,.1); color: #d64a38;
      font-size: 22px; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s;
    }
    .faq-item[open] summary::after { content: "−"; background: #d64a38; color: #fff; }
    .faq-item .answer {
      padding: 0 24px 24px;
      font-size: 15.5px; color: #0A0F1C; font-weight: 450; line-height: 1.65;
    }
    .faq-item .answer p { margin: 0 0 12px; }
    .faq-item .answer p:last-child { margin-bottom: 0; }
    .faq-item .answer strong { color: #0C1E4A; font-weight: 600; }
    .faq-foot {
      text-align: center; margin-top: 36px;
      font-family: 'Caveat', cursive;
      font-size: 22px; color: #b93d2e;
    }

  /* ============================================================
     REDESIGN COMPACT 2026-07-22 (mockup-landing360-compact-redesign)
     Utilitaires partagés des blocs compactés. Préfixe hfc- pour
     éviter toute collision avec l'existant. Placés en fin de
     fichier : ils battent la passe réduction de scroll.
     ============================================================ */
  .hfc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .hfc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hfc-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .hfc-grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  @media (max-width: 900px) {
    .hfc-grid2 { grid-template-columns: 1fr; }
    .hfc-grid3 { grid-template-columns: 1fr; }
    .hfc-grid4 { grid-template-columns: repeat(2, 1fr); }
    .hfc-grid6 { grid-template-columns: repeat(3, 1fr); }
  }
  .hfc-card { background: #fff; border: 1px solid #E8E0D3; border-radius: 16px; padding: 17px 19px; text-align: left; }
  .hfc-num { font-family: 'Fraunces', Georgia, serif; font-size: 25px; font-weight: 700; color: rgba(214,74,56,0.38); line-height: 1; margin-bottom: 8px; }
  .hfc-card-title { font-weight: 700; color: #0C1E4A; font-size: 15px; margin-bottom: 5px; }
  .hfc-card-text { font-size: 13.5px; line-height: 1.5; color: #1A1F36; margin: 0; }
  .hfc-check { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; color: #1A1F36; margin-bottom: 9px; }
  .hfc-check:last-child { margin-bottom: 0; }
  .hfc-check .c { flex: none; width: 21px; height: 21px; border-radius: 50%; background: #d64a38; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
  .hfc-stat-band { display: flex; justify-content: center; gap: 12px 34px; flex-wrap: wrap; margin: 18px 0 24px; padding: 14px 20px; background: #fff; border: 1px solid #E8E0D3; border-radius: 14px; }
  .hfc-stat-band > div { white-space: nowrap; }
  .hfc-editorial-card { background: #fff; border: 1px solid #F0E0D8; border-radius: 18px; padding: 6px 24px; }
  .hfc-editorial-item { padding: 18px 0; }
  .hfc-editorial-item + .hfc-editorial-item { border-top: 1px dashed #E8E0D3; }
  .hfc-editorial-title { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
  .hfc-editorial-title::before { content: ""; flex: none; width: 18px; height: 2px; background: #d64a38; }
  .hfc-editorial-title span { font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 600; color: #0C1E4A; }
  .hfc-details { background: #fff; border: 1px solid #E8E0D3; border-radius: 18px; padding: 16px 20px; text-align: left; }
  .hfc-details summary { cursor: pointer; font-weight: 700; color: #0C1E4A; font-size: 14.5px; }
  .hfc-details summary .soft { font-weight: 500; color: #6b7280; font-size: 13px; }

  /* Compressions ciblées (redesign compact) */
  .meet-photo { aspect-ratio: 1/1.08; border: none !important; box-shadow: none !important; border-radius: 22px !important; }
  .six-moments-card .photo { flex-basis: 170px !important; }
  .faq .container { max-width: 1232px !important; }
  .faq-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  @media (max-width: 860px) { .faq-list { grid-template-columns: 1fr; } }

  /* ============================================================
     ALIGNEMENT VISUEL SUR LE MOCKUP (retour Mathieu 22/07 soir) :
     halos pastel par section, cards blanches uniformes épurées,
     numéros Fraunces corail pâle. Le mockup validé est la spec.
     ============================================================ */
  /* Frustrations : cards épurées, sans numéro fantôme géant */
  .frust-card { background: #fff !important; border: 1px solid #E8E0D3 !important; border-radius: 16px !important; padding: 18px 20px !important; box-shadow: none !important; }
  .frust-card .ghost { display: none !important; }
  .frust-idx { flex-direction: column; align-items: flex-start !important; gap: 7px !important; margin-bottom: 6px !important; }
  .frust-idx .n { font-style: normal !important; font-weight: 700 !important; font-size: 26px !important; color: rgba(214,74,56,0.38) !important; }
  .frust-idx .n::after { content: '' !important; }
  /* Tailles remontees le 2026-08-14 (retour Mathieu : « ca doit claquer aux
     yeux, et sur mobile certains textes sont minuscules »). Le titre de carte
     passe de 15,5 a 18 px et le texte de 13,5 a 15,5 px. */
  .frust-idx .n { font-size: 30px !important; }
  .frust-idx .t { font-family: var(--font-dm-sans), 'DM Sans', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; color: #0C1E4A !important; line-height: 1.25 !important; }
  .frust-text { font-size: 15.5px !important; line-height: 1.55 !important; }

  /* Méthode : halo bleu clair + cards blanches uniformes */
  .method { background: radial-gradient(70% 62% at 50% 45%, #e4ecf2 0%, rgba(228,236,242,0) 78%), #fff !important; }
  .method-step, .method-step.warm { background: #fff !important; border: 1px solid #E8E0D3 !important; border-radius: 18px !important; box-shadow: none !important; padding: 22px !important; }
  .method-step .num-head { justify-content: flex-start !important; align-items: baseline !important; gap: 10px !important; margin-bottom: 10px !important; }
  .method-step .num-head .num, .method-step.warm .num-head .num, .method-step.last .num-head .num { font-size: 30px !important; font-style: normal !important; font-weight: 700 !important; color: rgba(214,74,56,0.4) !important; }
  .method-step .num-head .label, .method-step.warm .num-head .label { font-family: 'Fraunces', Georgia, serif !important; font-size: 19px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; color: #0C1E4A !important; padding-top: 0 !important; }
  .method-step .tag { color: #b73a2b !important; font-weight: 700 !important; font-size: 14px !important; }
  .method-head h2 .w1, .method-head h2 .w2 { color: #0C1E4A !important; }
  .method-head h2 .w3 { color: #d64a38 !important; }

  /* Fait main : halo pêche */
  .access { background: radial-gradient(75% 70% at 50% 40%, #f5e9e4 0%, rgba(245,233,228,0) 80%), #fff !important; }

  /* Six moments : halo vert d'eau */
  .six-moments { background: radial-gradient(75% 70% at 50% 40%, #deede0 0%, rgba(222,237,224,0) 80%), #fff !important; }

  /* Bloc témoignages unifié (go reco 22/07) : rangée vedette Dave + vidéo James */
  .ctu-top { max-width: 1232px; margin: 0 auto 16px; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .ctu-top > * { min-width: 0; }
  @media (max-width: 900px) { .ctu-top { grid-template-columns: 1fr; } }
  .ctu-top .ct-video-card { display: flex !important; flex-direction: column; gap: 12px; padding: 18px !important; }
  .ctu-top .ct-video-card > .ct-video-player { order: 2; max-width: 96px; margin: 0; }
  .ctu-top .ct-video-card .ct-video-quote { font-size: 13.5px !important; line-height: 1.5 !important; }
  .ct-ytb { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #6b7280; background: #fff; border: 1px solid #E8E0D3; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  .ct-ytb .y { color: #ff0000; font-size: 9px; }
  /* Le badge passe sous le nom quand la ligne est pleine (noms longs, mobile) */
  .ct-card .ct-meta { flex-wrap: wrap; row-gap: 8px; }
  .ct-card .ct-name { overflow-wrap: anywhere; }

  /* Témoignages : grille 4 tuiles uniformes (vidéo navy + 3 avis), comme le mockup */
  .ct-masonry { column-count: unset !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .ct-masonry > * { min-width: 0; }
  @media (max-width: 1000px) { .ct-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 640px) { .ct-masonry { grid-template-columns: minmax(0, 1fr) !important; } }
  .ct-masonry .ct-card { margin: 0 !important; break-inside: auto; }
  .ct-card.featured { border-color: #E8E0D3 !important; box-shadow: none !important; background: #FBFAF7 !important; }
  .ct-quote-mark { display: none !important; }
  .ct-source { display: none !important; }
  .ct-card .ct-quote { font-size: 13.5px !important; line-height: 1.55 !important; }
  .ct-masonry .ct-video-card { display: flex !important; flex-direction: column; gap: 12px; padding: 18px !important; margin: 0 !important; }
  .ct-masonry .ct-video-card > .ct-video-player { order: 2; max-width: 96px; margin: 0; }
  .ct-masonry .ct-video-card .ct-video-quote { font-size: 13.5px !important; line-height: 1.5 !important; }
  .course-testim-head .tag { background: transparent !important; color: #b73a2b !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; padding: 0 !important; border-radius: 0 !important; }
  .course-testim-head h2 { font-size: clamp(26px, 3.2vw, 38px) !important; }

  /* Frustrations : closing = citation signee Elisabeth (2026-08-14, demande
     Mathieu « mieux habiller ca comme une citation d'Elisabeth avec sa tete en
     petit »). Carte blanche discrete, guillemets en Fraunces italique, avatar
     44 px + prenom en Caveat comme partout ailleurs sur la landing. */
  .frust-close { background: #fff !important; border-left: none !important; border: 1px solid #EADDCB !important; border-radius: 20px !important; padding: 26px 30px 24px !important; text-align: center; max-width: 720px; margin: 34px auto 0 !important; box-shadow: 0 10px 30px -22px rgba(12,30,74,.35); }
  .frust-close p { font-family: 'Fraunces', Georgia, serif !important; font-style: italic; font-size: 19px !important; line-height: 1.5 !important; color: #0C1E4A !important; margin: 0 !important; }
  .frust-close p strong, .frust-close p .verdict-inline { font-style: normal; color: #b73a2b !important; font-weight: 600; }
  .frust-close .sig { justify-content: center; margin-top: 16px; }
  .frust-close .sig img { width: 44px; height: 44px; }
  .frust-close .sig .name { display: block; text-align: left; font-family: 'Caveat', cursive; font-size: 26px; line-height: 1; color: #d64a38; }
  .frust-close .sig .role { display: block; margin-top: 3px; font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #5b6472; }

  /* Méthode : kicker uppercase corail + H2 sur une ligne */
  .method-head .hf360-kicker { font-family: var(--font-dm-sans), 'DM Sans', sans-serif !important; font-style: normal !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #b73a2b !important; }
  .method-head h2 { font-size: clamp(26px, 3.4vw, 40px) !important; }

  /* ============================================================
     BLOC « C'EST QUOI LE 360 » (2026-07-22, copy Mathieu) :
     3 piliers avec visuels signature, flèches de parcours.
     ============================================================ */
  .cq-sect { position: relative; padding: 56px 24px; background: radial-gradient(75% 70% at 50% 40%, #f6efe3 0%, rgba(246,239,227,0) 80%), #fff; border-top: 1px solid #E8E0D3; }
  .cq-inner { max-width: 1184px; margin: 0 auto; text-align: center; }
  .cq-compact-intro { max-width: 680px; margin: 0 auto 30px; }
  .cq-compact-promise { max-width: 620px; margin: 0 auto 18px; font-family: 'Fraunces', Georgia, serif; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; color: #0C1E4A; }
  .cq-compact-stats { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; }
  .cq-compact-stat { position: relative; overflow: visible; min-height: 116px; margin-top: 15px; padding: 22px 14px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(255,255,255,0.94); border: 1px solid #E0D4C3; border-radius: 16px; box-shadow: 0 8px 24px rgba(12,30,74,0.07); }
  .cq-compact-stat strong { font-family: 'Fraunces', Georgia, serif; font-size: clamp(25px, 3.5vw, 34px); line-height: 1; color: #d64a38; }
  .cq-compact-stat span { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #0C1E4A; }
  .cq-compact-stat .cq-compact-part { position: absolute; z-index: 2; top: -19px; display: flex; align-items: center; gap: 7px; width: max-content; padding: 4px 10px 4px 4px; border-radius: 12px; font-size: 9.5px; font-weight: 900; letter-spacing: .09em; line-height: 1; text-transform: uppercase; box-shadow: 0 7px 16px rgba(12,30,74,.15); }
  .cq-compact-part i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-style: normal; font-weight: 800; }
  .cq-compact-part b { font: inherit; }
  .cq-compact-part-understanding { left: -8px; color: #B73A2B !important; background: #FFF5F2; border: 1px solid #EE9A8E; transform: rotate(-3deg); }
  .cq-compact-part-understanding i { color: #C73E2D; background: #FDE8E4; border: 1.5px solid #EE9A8E; }
  .cq-compact-stat-jean { background: #0C1E4A; border-color: #0C1E4A; }
  .cq-compact-stat-jean strong { font-size: clamp(20px, 2.8vw, 27px); color: #fff; }
  .cq-compact-stat-jean span { color: rgba(255,255,255,0.86); }
  .cq-compact-part-speaking { right: -8px; color: #167A43 !important; background: #F1FAF4; border: 1px solid #91C9A7; transform: rotate(2.5deg); }
  .cq-compact-part-speaking i { color: #167A43; background: #E7F5EC; border: 1.5px solid #91C9A7; }
  .cq-compact-plus { font-family: 'Fraunces', Georgia, serif; font-size: 25px; font-weight: 700; color: #d64a38; }
  .cq-compact-first { display: inline-flex; align-items: center; gap: 7px; margin: 13px auto 0; padding: 7px 12px; border-radius: 999px; background: #FFF0EC; border: 1px solid #F2C9BF; color: #8F2F23; font-size: 12.5px; font-weight: 700; }
  @media (max-width: 520px) {
    .cq-compact-intro { margin-bottom: 24px; }
    .cq-compact-promise { font-size: 19px; }
    .cq-compact-stats { grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); gap: 6px; }
    .cq-compact-stat { min-height: 112px; margin-top: 14px; padding: 22px 8px 12px; }
    .cq-compact-stat .cq-compact-part { top: -17px; gap: 5px; padding: 3px 7px 3px 3px; border-radius: 11px; font-size: 7.7px; letter-spacing: .055em; }
    .cq-compact-part i { width: 25px; height: 25px; font-size: 14px; }
    .cq-compact-part-understanding { left: -5px; }
    .cq-compact-part-speaking { right: -5px; }
    .cq-compact-stat strong { font-size: 27px; }
    .cq-compact-stat-jean strong { font-size: 19px; }
    .cq-compact-plus { font-size: 20px; }
  }
  .cq-pillars { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; gap: 10px; text-align: left; align-items: stretch; }
  @media (max-width: 860px) { .cq-pillars { grid-template-columns: 1fr; } .cq-arrow { transform: rotate(90deg); margin: -2px auto; } }
  .cq-arrow { display: flex; align-items: center; justify-content: center; color: #d64a38; font-size: 20px; font-weight: 700; }
  .cq-pillar { background: #fff; border: 1px solid #E8E0D3; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
  .cq-vis { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; gap: 10px; }
  .cq-vis.cq-v1 { background: #f5e9e4; }
  .cq-vis.cq-v1 img { width: 100%; height: 100%; object-fit: cover; }
  .cq-play { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.96); border-radius: 999px; padding: 7px 14px 7px 8px; box-shadow: 0 6px 18px rgba(12,30,74,0.25); }
  .cq-play .b { width: 26px; height: 26px; border-radius: 50%; background: #d64a38; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
  .cq-play .w { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
  .cq-play .w span { width: 3px; background: #d64a38; border-radius: 2px; }
  .cq-vis.cq-v2 { background: #eef4f8; padding: 0 16px; }
  .cq-stepper { background: #fff; border: 1px solid #E8E0D3; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 16px rgba(12,30,74,0.08); min-width: 200px; }
  .cq-st { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; }
  .cq-st .ck { width: 18px; height: 18px; border-radius: 50%; background: #f0ede6; color: #6b7280; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .cq-st.done { color: #1A1F36; }
  .cq-st.done .ck { background: #e7f3ea; color: #2f7d3f; }
  .cq-st.now { color: #0C1E4A; font-weight: 700; }
  .cq-st.now .ck { background: #d64a38; color: #fff; }
  .cq-st .badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b73a2b; background: rgba(214,74,56,0.1); border-radius: 999px; padding: 2px 7px; }
  .cq-vis.cq-v3 { background: #ecf5ee; padding: 0 14px; }
  .cq-vis.cq-v3 img { height: 120px; width: auto; flex: none; }
  .cq-bulle { background: #fff; border: 1px solid #E8E0D3; border-radius: 12px 12px 12px 3px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: #0C1E4A; box-shadow: 0 6px 16px rgba(12,30,74,0.1); }
  .cq-step { position: absolute; top: 12px; left: 12px; background: #fff; color: #b73a2b; font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(12,30,74,0.18); z-index: 2; }
  .cq-body { padding: 15px 18px 17px; flex: 1; }
  .cq-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 17.5px; font-weight: 600; color: #0C1E4A; margin: 0 0 5px; }
  .cq-body p { font-size: 13.5px; line-height: 1.55; color: #1A1F36; margin: 0; }
  .cq-body p b { color: #0C1E4A; }
  .cq-proof { max-width: 760px; margin: 24px auto 0; padding: 15px 20px 15px 15px; display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.96); border: 1px solid #E0D4C3; border-radius: 18px; box-shadow: 0 10px 28px rgba(12,30,74,0.08); text-align: left; }
  .cq-proof-photo { width: 68px; height: 68px; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(12,30,74,0.18); }
  .cq-proof-content { min-width: 0; flex: 1; }
  .cq-proof blockquote { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 16.5px; line-height: 1.45; color: #0C1E4A; }
  .cq-proof blockquote strong { color: #b73a2b; font-weight: 700; }
  .cq-proof-meta { margin-top: 9px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-family: var(--font-dm-sans), 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.2; }
  .cq-proof-verified { display: inline-flex; align-items: center; gap: 5px; color: #25643a; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
  .cq-proof-check { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #2f7d4a; color: #fff; font-size: 11px; line-height: 1; }
  .cq-proof-name { color: #0C1E4A; font-weight: 800; }
  .cq-proof-site { color: #6b7280; font-weight: 600; }

  /* FAQ : accordéons fins comme le mockup */
  .faq-item summary { padding: 13px 16px !important; font-size: 14px !important; }
  .faq-item summary::after { width: 26px !important; height: 26px !important; font-size: 18px !important; }
  .faq-item .answer { font-size: 14px !important; }

  /* Témoignages : spotlight Dave en carte horizontale compacte */
  .ct-spotlight-card { grid-template-columns: 96px 1fr !important; align-items: center; padding: 18px !important; border-radius: 18px !important; box-shadow: none !important; }
  .ct-spotlight-photo { width: 96px; height: 96px; border-radius: 14px; min-height: 0 !important; align-self: center; }
  .ct-spotlight-body { padding: 0 0 0 18px !important; gap: 8px !important; min-width: 0; }
  .ct-spotlight-meta { flex-wrap: wrap !important; gap: 8px !important; }
  .ct-spotlight-mark { display: none !important; }
  .ct-spotlight-quote { font-size: 16px !important; line-height: 1.5 !important; }
  @media (max-width: 560px) {
    .ct-spotlight-card { grid-template-columns: 1fr !important; }
    .ct-spotlight-photo { width: 64px; height: 64px; }
    .ct-spotlight-body { padding: 0 !important; }
  }
  .hf360-hero .hero-h1, .hf360-hero h1 { font-size: clamp(30px, 3.4vw, 42px) !important; }
  .hf360-hero .hero-sub { margin-bottom: 14px !important; }
  .hf360-hero .hero-price-block { margin-bottom: 14px !important; }
  .hf360-hero .hero-ctas { margin-bottom: 6px !important; }
  .hf360-hero { padding-bottom: 40px !important; }

/* ── « Le cours vu de l'intérieur » : l'iPhone en démo produit (2026-08-05) ──
   Bloc navy entre « Concrètement » et « Du vrai français » : la photo du
   lieu, le titre, « Dialogue entre X et Y », l'adresse. Fondu doux toutes
   les 3 s, les quatre éléments changent ensemble (règle de cohérence des
   démos animées). */
.ipdemo-sect { background: #0C1E4A; padding: 72px 24px; }
.ipdemo-inner {
  max-width: 1184px; margin: 0 auto;
  display: flex; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.ipdemo-txt { flex: 1; min-width: 0; color: #fff; }
.ipdemo-k { color: #F5B7A9 !important; margin-bottom: 14px; display: inline-block; }
.ipdemo-h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 14px;
}
.ipdemo-lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.87); margin: 0; max-width: 460px; }
.ipdemo-phone {
  flex: none; width: 270px; margin: 0 auto;
  background: #0B0B0F; border-radius: 44px; padding: 9px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.ipdemo-screen { position: relative; background: #FBFAF7; border-radius: 36px; overflow: hidden; }
.ipdemo-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; background: #0B0B0F; border-radius: 999px; z-index: 3; }
/* ipdemo v2 (2026-08-15) : un seul dialogue, ses 8 activités qui défilent
   (au lieu de 3 dialogues qui varient). Animation CSS pure, sans JS. */
.ipdemo-scene { height: 138px; background-size: cover; background-position: center; position: relative; }
.ipdemo-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,30,74,0) 30%, rgba(12,30,74,0.9)); }
.ipdemo-scene-cap { position: absolute; left: 15px; right: 15px; bottom: 12px; z-index: 2; color: #fff; display: flex; flex-direction: column; }
.ipdemo-scene-kick { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F0B8AE; }
.ipdemo-scene-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.2; margin-top: 3px; }
.ipdemo-scene-loc { font-size: 11px; color: rgba(255,255,255,0.86); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.ipdemo-scene-loc svg { width: 10px; height: 10px; flex: none; }
.ipdemo-prog { padding: 14px 15px 18px; background: #FBFAF7; }
.ipdemo-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.ipdemo-prog-label { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #5A6478; }
.ipdemo-prog-sub { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 13px; color: #D64A38; }
.ipdemo-bar { height: 5px; border-radius: 3px; background: #EADFCE; overflow: hidden; }
.ipdemo-bar i { display: block; height: 100%; background: #D64A38; border-radius: 3px; width: 12.5%; animation: ipdemo-bar 12s linear infinite; }
@keyframes ipdemo-bar { from { width: 12.5%; } to { width: 100%; } }
.ipdemo-groups { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.ipdemo-group-name { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9A8F7D; margin: 0 0 5px; }
.ipdemo-steps { display: flex; flex-direction: column; gap: 5px; }
.ipdemo-step { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid #E8E0D3; border-radius: 11px; padding: 7px 10px; color: #9AA3B5; }
.ipdemo-ck { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1.6px solid currentColor; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: currentColor; }
.ipdemo-em { font-size: 14px; flex: none; }
.ipdemo-lb { font-size: 12.5px; font-weight: 600; color: #0C1E4A; }
.ipdemo-step { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; }
.ipdemo-step[data-i="0"] { animation-name: ipst1; } .ipdemo-step[data-i="1"] { animation-name: ipst2; }
.ipdemo-step[data-i="2"] { animation-name: ipst3; } .ipdemo-step[data-i="3"] { animation-name: ipst4; }
.ipdemo-step[data-i="4"] { animation-name: ipst5; } .ipdemo-step[data-i="5"] { animation-name: ipst6; }
.ipdemo-step[data-i="6"] { animation-name: ipst7; } .ipdemo-step[data-i="7"] { animation-name: ipst8; }
@keyframes ipst1 { 0%,12.4% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 12.5%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst2 { 0%,12.49% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 12.5%,24.9% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 25%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst3 { 0%,24.99% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 25%,37.4% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 37.5%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst4 { 0%,37.49% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 37.5%,49.9% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 50%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst5 { 0%,49.99% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 50%,62.4% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 62.5%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst6 { 0%,62.49% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 62.5%,74.9% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 75%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst7 { 0%,74.99% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 75%,87.4% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } 87.5%,100% { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; box-shadow:none; transform:none; } }
@keyframes ipst8 { 0%,87.49% { color:#9AA3B5; background:#fff; border-color:#E8E0D3; } 87.5%,100% { color:#b73a2b; background:#fff; border-color:#D64A38; box-shadow:0 6px 16px -8px rgba(214,74,56,.7); transform:translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .ipdemo-step, .ipdemo-bar i { animation: none; }
  .ipdemo-step[data-i="0"], .ipdemo-step[data-i="1"], .ipdemo-step[data-i="2"] { color:#2f9e4d; background:#f2fbf4; border-color:#bfe0c8; }
  .ipdemo-step[data-i="3"] { color:#b73a2b; border-color:#D64A38; }
  .ipdemo-bar i { width: 50%; }
}
@media (max-width: 860px) {
  .ipdemo-inner { flex-direction: column; }
}

/* ==============================================================
   ANIMATIONS 2026-08-14 (lot valide par Mathieu sur le mockup
   mockups/mockup-anims-landing360.html) : B reveal declaratif,
   C mur des frustrations, D curseur d'etape, E fil de la methode,
   F six moments, H FAQ fluide, I fil de lecture, L bloc « c'est quoi ».

   Invariant tenu partout ici : l'etat SANS .hf360-js est l'etat final.
   Le tracker pose .hf360-js au montage, donc une page non hydratee ou
   un JS casse affiche la page complete, jamais un bloc invisible.
   ============================================================== */

/* --- B. reveal declaratif : le tracker pose deja .in sur [data-reveal],
       il ne manquait que le CSS en face. --- */
.hf360-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hf360-js [data-reveal].in { opacity: 1; transform: translateY(0); }
@media (min-width: 701px) {
  .hf360-js [data-reveal-stagger="1"].in { transition-delay: .06s; }
  .hf360-js [data-reveal-stagger="2"].in { transition-delay: .12s; }
  .hf360-js [data-reveal-stagger="3"].in { transition-delay: .18s; }
  .hf360-js [data-reveal-stagger="4"].in { transition-delay: .24s; }
  .hf360-js [data-reveal-stagger="5"].in { transition-delay: .30s; }
  .hf360-js [data-reveal-stagger="6"].in { transition-delay: .36s; }
}
/* GARDE-FOU : l'observer [data-reveal] sort avant d'agir quand le visiteur
   reduit les animations. Sans cette regle, ces blocs resteraient invisibles. */
@media (prefers-reduced-motion: reduce) {
  .hf360-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- C. mur des frustrations : le fade vient du systeme .hf360-reveal
       (.frust-card entre dans REVEAL_SELECTORS), on ajoute le chiffre
       qui glisse, le surlignage de la phrase cle et la quinconce. --- */
.hf360-js .frust-card .ghost {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease .2s, transform .8s cubic-bezier(0.22, 0.61, 0.36, 1) .2s;
}
.hf360-js .frust-card.in-view .ghost { opacity: .06; transform: none; }
.hf360-js .frust-card .frust-text b {
  background-image: linear-gradient(rgba(228,112,93,.30), rgba(228,112,93,.30));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 32%;
  padding: 0 2px;
  transition: background-size .5s cubic-bezier(0.22, 0.61, 0.36, 1) .45s;
}
.hf360-js .frust-card.in-view .frust-text b { background-size: 100% 32%; }
/* quinconce : uniquement quand la grille a plusieurs colonnes */
@media (min-width: 561px) {
  .hf360-js .frust-grid > .hf360-reveal:nth-child(2).in-view { transition-delay: .07s; }
  .hf360-js .frust-grid > .hf360-reveal:nth-child(3).in-view { transition-delay: .14s; }
  .hf360-js .frust-grid > .hf360-reveal:nth-child(4).in-view { transition-delay: .10s; }
  .hf360-js .frust-grid > .hf360-reveal:nth-child(5).in-view { transition-delay: .17s; }
  .hf360-js .frust-grid > .hf360-reveal:nth-child(6).in-view { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
  .hf360-js .frust-card .ghost { opacity: .06 !important; transform: none !important; transition: none !important; }
  .hf360-js .frust-card .frust-text b { background-size: 100% 32% !important; transition: none !important; }
}

/* --- D + L. bloc « 360 French Immersion, c'est quoi ? » --- */
/* cascade des piliers et des fleches (desktop : ils entrent ensemble) */
@media (min-width: 861px) {
  .hf360-js .cq-pillars > .hf360-reveal:nth-child(2).in-view { transition-delay: .50s; }
  .hf360-js .cq-pillars > .hf360-reveal:nth-child(3).in-view { transition-delay: .62s; }
  .hf360-js .cq-pillars > .hf360-reveal:nth-child(4).in-view { transition-delay: 1.15s; }
  .hf360-js .cq-pillars > .hf360-reveal:nth-child(5).in-view { transition-delay: 1.28s; }
}
/* pilier 1 : l'onde du bouton lecture (les 7 barres existent deja) */
.hf360-js .cq-play .w span { transform-origin: 50% 50%; }
.hf360-js .cq-pillar.in-view .cq-play .w span { animation: hf360-vbar .9s ease-in-out infinite; }
.hf360-js .cq-play .w span:nth-child(2) { animation-delay: .09s; }
.hf360-js .cq-play .w span:nth-child(3) { animation-delay: .18s; }
.hf360-js .cq-play .w span:nth-child(4) { animation-delay: .27s; }
.hf360-js .cq-play .w span:nth-child(5) { animation-delay: .36s; }
.hf360-js .cq-play .w span:nth-child(6) { animation-delay: .45s; }
.hf360-js .cq-play .w span:nth-child(7) { animation-delay: .54s; }
@keyframes hf360-vbar { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(2.4); } }
/* pilier 2 : le curseur d'etape (classes .done / .now posees par le tracker) */
.cq-st { transition: color .4s ease, font-weight .4s ease; }
.cq-st .ck { transition: background .4s ease, color .4s ease; }
/* transition courte : a 350 ms, le badge de l'etape precedente etait encore
   visible pendant que le curseur s'allumait sur la suivante (deux etapes
   actives a l'ecran en meme temps). */
.cq-st .badge { opacity: 0; transition: opacity .18s ease; }
.cq-st.now .badge { opacity: 1; }
/* le tracker pose .hf360-js sur BODY : cibler html ici rendait la regle
   toujours vraie, donc le badge restait colle a l'etape « Prononciation »
   pendant que le curseur avancait. */
body:not(.hf360-js) .cq-st .badge { opacity: 1; }
/* pilier 3 : l'aller-retour a voix haute */
/* le pilier tient dans la meme hauteur que les deux autres (170 px) : sinon
   les piliers 1 et 2 se retrouvent avec un blanc en bas de carte. */
.cq-vis.cq-v3 { height: auto; min-height: 170px; padding: 11px 12px; gap: 10px; align-items: center; }
.cq-vis.cq-v3 img { height: 70px; align-self: flex-end; }
.cq-talk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cq-bulle { display: block; padding: 7px 10px; font-size: 12px; line-height: 1.38; }
.cq-lbl { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0C1E4A; margin-bottom: 4px; }
.cq-bulle-you { background: #FFF3EF; border-color: #f2cec6; border-radius: 12px 12px 3px 12px; }
.cq-bulle-you .cq-lbl { color: #b73a2b; }
.cq-wave { display: inline-flex; align-items: center; gap: 2px; height: 11px; opacity: .28; transition: opacity .3s ease; }
.cq-wave i { width: 2.5px; height: 4px; border-radius: 2px; background: #0C1E4A; transform-origin: 50% 50%; }
.cq-bulle-you .cq-wave i { background: #d64a38; }
.hf360-js .cq-bulle.talking .cq-wave { opacity: 1; }
.hf360-js .cq-bulle.talking .cq-wave i { animation: hf360-vbar .85s ease-in-out infinite; }
.cq-wave i:nth-child(2) { animation-delay: .09s; }
.cq-wave i:nth-child(3) { animation-delay: .18s; }
.cq-wave i:nth-child(4) { animation-delay: .27s; }
.cq-wave i:nth-child(5) { animation-delay: .36s; }
.cq-live { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b73a2b; }
.cq-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #d64a38; flex: none; }
.hf360-js .cq-pillar.in-view .cq-live .dot { animation: hf360-live-pulse 1.8s ease-in-out infinite; }
@keyframes hf360-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* le tour de parole : les bulles arrivent l'une apres l'autre */
.hf360-js .cq-talk .cq-bulle,
.hf360-js .cq-talk .cq-live {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hf360-js .cq-talk .cq-bulle.shown,
.hf360-js .cq-talk .cq-live.shown { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .cq-vis.cq-v3 img { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf360-js .cq-play .w span,
  .hf360-js .cq-bulle .cq-wave i,
  .hf360-js .cq-live .dot { animation: none !important; }
  .hf360-js .cq-talk .cq-bulle,
  .hf360-js .cq-talk .cq-live { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hf360-js .cq-bulle .cq-wave { opacity: .28 !important; }
}

/* --- E. le fil qui relie Ecouter, Repeter, Reutiliser --- */
.method-steps { position: relative; }
.method-line { position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; pointer-events: none; }
.method-line svg { width: 100%; height: 2px; overflow: visible; }
.method-line path { stroke: #d64a38; stroke-width: 2; fill: none; opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* on ne cache le trait que si :has() peut le redessiner ensuite */
@supports selector(:has(*)) {
  .hf360-js .method-line path { stroke-dashoffset: 1; }
  .hf360-js .method-steps:has(.method-step.in-view) .method-line path {
    transition: stroke-dashoffset 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) .15s;
    stroke-dashoffset: 0;
  }
}
/* le numero s'allume au passage du trait. Le !important est necessaire : la
   regle d'harmonisation plus haut pose deja color: rgba(214,74,56,.4)
   !important sur .num-head .num, et sans plein corail l'effet ne se voit pas. */
.hf360-js .method-step .num-head .num { transition: color .5s ease; }
.hf360-js .method-step:not(.in-view) .num-head .num { color: #dfd6c6 !important; }
.hf360-js .method-step.in-view .num-head .num { color: #d64a38 !important; }
@media (min-width: 801px) {
  .hf360-js .method-step:nth-child(3).in-view .num { transition-delay: .42s; }
  .hf360-js .method-step:nth-child(4).in-view .num { transition-delay: .84s; }
}
@media (max-width: 800px) { .method-line { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hf360-js .method-line path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hf360-js .method-step .num-head .num,
  .hf360-js .method-step:not(.in-view) .num-head .num { color: rgba(214,74,56,0.4) !important; transition: none !important; }
}

/* --- F. six moments : la photo se pose, la phrase gagnante se surligne --- */
.six-moments-card { overflow: hidden; }
.hf360-js .six-moments-card[data-reveal] .photo {
  transform: scale(1.10);
  transition: transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.hf360-js .six-moments-card[data-reveal].in .photo { transform: scale(1); }
.hf360-js .six-moments-card .win {
  background-image: linear-gradient(rgba(228,112,93,.32), rgba(228,112,93,.32));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 34%;
  padding: 0 2px;
  transition: background-size .55s cubic-bezier(0.22, 0.61, 0.36, 1) .5s;
}
.hf360-js .six-moments-card.in .win { background-size: 100% 34%; }
@media (prefers-reduced-motion: reduce) {
  .hf360-js .six-moments-card .photo { transform: none !important; transition: none !important; }
  .hf360-js .six-moments-card .win { background-size: 100% 34% !important; transition: none !important; }
}

/* --- H. la FAQ s'ouvre en douceur, le + devient un chevron --- */
.hf360-prefaq details[open] .pf-a,
.faq-item[open] .answer { animation: hf360-answer-in .34s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes hf360-answer-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}
.hf360-prefaq summary::after,
.faq-item summary::after {
  content: '' !important;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background-color: #FFF3EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D64A38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transition: transform .32s cubic-bezier(0.22, 0.61, 0.36, 1), background-color .32s ease;
}
.faq-item summary::after { width: 26px !important; height: 26px !important; background-size: 14px; }
.hf360-prefaq details[open] summary::after,
.faq-item[open] summary::after {
  content: '' !important;
  transform: rotate(180deg);
  background-color: #d64a38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* la hauteur s'anime aussi la ou le navigateur sait le faire */
@supports (interpolate-size: allow-keywords) {
  .hf360-prefaq details, .faq-item { interpolate-size: allow-keywords; }
  .hf360-prefaq details::details-content,
  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height .34s cubic-bezier(0.22, 0.61, 0.36, 1), content-visibility .34s allow-discrete;
  }
  .hf360-prefaq details[open]::details-content,
  .faq-item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hf360-prefaq details[open] .pf-a, .faq-item[open] .answer { animation: none; }
  .hf360-prefaq summary::after, .faq-item summary::after { transition: none; }
  .hf360-prefaq details::details-content, .faq-item::details-content { transition: none; }
}

/* ==============================================================
   LISIBILITE MOBILE (2026-08-14, retour Mathieu : « sur mobile
   certains textes sont minuscules »). On remonte les corps de texte
   des deux blocs les plus lus, sans toucher aux metadonnees qui
   peuvent rester petites (kickers, badges, libelles d'onde).
   ============================================================== */
@media (max-width: 640px) {
  /* Bloc des six situations : le titre de carte doit accrocher l'oeil */
  .frust-idx .n { font-size: 28px !important; }
  .frust-idx .t { font-size: 17.5px !important; }
  .frust-text { font-size: 15.5px !important; line-height: 1.58 !important; }
  .frust-close { padding: 22px 20px 20px !important; }
  .frust-close p { font-size: 17.5px !important; line-height: 1.5 !important; }

  /* Bloc « c'est quoi le 360 » : tout le corps etait sous 14 px */
  .cq-body h3 { font-size: 18.5px !important; }
  .cq-body p { font-size: 15.5px !important; line-height: 1.6 !important; }
  .cq-st { font-size: 13.5px !important; }
  .cq-st .ck { width: 19px !important; height: 19px !important; font-size: 10px !important; }
  .cq-bulle { font-size: 13.5px !important; line-height: 1.45 !important; }
  .cq-lbl { font-size: 10px !important; }
  .cq-live { font-size: 10.5px !important; }
  .cq-proof { padding: 14px; gap: 12px; }
  .cq-proof-photo { width: 58px; height: 58px; }
  .cq-proof blockquote { font-size: 15.5px; }
  .cq-proof-meta { gap: 7px 10px; }
}

/* ==============================================================
   PASSE DE LISIBILITE — les demos produit font partie de l'argumentaire :
   elles doivent rester lisibles sans zoom, y compris sur un ecran de 390 px.
   Les tailles ci-dessous remplacent les micro-corps historiques (7,5–11 px)
   par un minimum visuel de 12 px et donnent 14–16 px aux informations utiles.
   ============================================================== */
.hf-lang-switch { font-size: 12.5px; }
.hf-signin { font-size: 14px; }
.hf360-kicker,
.method-head .hf360-kicker,
.course-testim-head .tag,
.jls-eyebrow,
.bonus-fusion .pill,
.hf360-gar .gar-kicker { font-size: 12.5px !important; letter-spacing: .1em !important; }
.hero-eyebrow-students span[style*="font-size:13px"] { font-size: 14px !important; }
.hero-price-block .hpb-total { font-size: 14px; }
.hero-photo-wrap .human-badge .small { font-size: 12.5px; opacity: 1; }
.hf360-mini-testi .mt-who,
.hero-trust-quote .htq-meta { font-size: 13px; color: #4A5578; }

/* Grille des dialogues : les libelles etaient les plus petits textes de vente. */
.themes-mosaic-kicker { font-size: 12.5px; color: #b73a2b; }
.theme-num { font-size: 12.5px; padding: 3px 7px; }
.theme-label { font-size: 14px; line-height: 1.32; }
.theme-unlock { font-size: 12px; line-height: 1.4; }
.themes-mosaic-cta { color: #b73a2b; border-color: #b73a2b; font-size: 13.5px; }

/* Apercu iPhone : conserver l'effet "ecran reel" sans sacrifier le contenu. */
.ipdemo-kicker { font-size: 12px; color: #b73a2b; }
.ipdemo-between { font-size: 13.5px; line-height: 1.4; }
.ipdemo-place { font-size: 12.5px; color: #4A5578; }
.ipdemo-cta { font-size: 14px; background: #c63f2f; }
.hf360-audio-time { font-size: 12px; }

/* Conversation orale : les statuts et le transcript sont des preuves produit. */
.jls-live-kicker,
.jls-live-status { font-size: 12px; }
.jls-live-status { color: rgba(255,255,255,.82); }
.jls-live-state-sub { font-size: 14px; color: rgba(255,255,255,.86); }
.jls-live-timer-label { font-size: 12px; color: rgba(255,255,255,.78); }
.jls-live-turn { font-size: 14px; }
.jls-live-turn-who { font-size: 12px; opacity: .9; }
.jls-live-end-btn { font-size: 13.5px; color: rgba(255,255,255,.82); }
.jls-live-transcript { height: 118px; }

/* Labels de la demo "Concretement" et metadonnees de preuves. */
.cq-st { font-size: 14px; }
.cq-lbl { font-size: 12.5px; }
.cq-live { font-size: 12px; }
.cq-st .badge { font-size: 12px; padding-left: 8px; padding-right: 8px; }
.cq-proof-verified { font-size: 12px; }
.auth-tag { font-size: 12.5px; color: #b73a2b; }
.ct-spotlight-source { font-size: 12.5px; }
.ct-detail,
.ct-ytb,
.ct-verif,
.ct-video-verif { font-size: 12.5px; }
.ct-video-kicker { font-size: 12.5px; color: #ffd9cd; }

@media (max-width: 640px) {
  .hero-price-block .hpb-total { font-size: 14px; }
  .hero-photo-wrap .human-badge .big { font-size: 16px; }
  .hero-photo-wrap .human-badge .small { font-size: 12.5px; }

  /* Deux colonnes donnent assez de largeur pour lire chaque theme. */
  .themes-mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .theme-num { font-size: 12.5px; padding: 3px 7px; }
  .theme-label { font-size: 14px; }
  .theme-unlock { font-size: 12.5px; }

  .cq-st { font-size: 14px !important; }
  .cq-lbl { font-size: 12.5px !important; }
  .cq-live { font-size: 12px !important; }
  .cq-st .badge { font-size: 12px !important; }

  .jls-live-brand { padding: 13px 16px; }
  .jls-live-kicker,
  .jls-live-status { font-size: 12px; letter-spacing: .1em; }
  .jls-live-turn { font-size: 14px; line-height: 1.55; }
  .jls-live-transcript { height: 180px; padding: 14px 16px; gap: 9px; }
}

/* ==============================================================
   REPLI « VOIR PLUS » (2026-08-15) : témoignages et six moments.
   Rien n'est supprimé du DOM (SEO + preuve sociale) ; les extras sont
   masqués par défaut et révélés sans JS via une checkbox sœur. Le
   tracker émet en plus un événement au clic (mesure).
   ============================================================== */
.ct-more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ct-extra { display: none; }
.ct-more-toggle:checked ~ .ct-masonry .ct-extra { display: block; }
.ct-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; max-width: 90%; margin: 22px auto 0; cursor: pointer;
  font: 700 14px var(--font-dm-sans), 'DM Sans', sans-serif;
  color: #0C1E4A; background: #fff; border: 1.5px solid #0C1E4A;
  border-radius: 999px; padding: 11px 22px; transition: background .2s, color .2s;
}
.ct-more-btn:hover { background: #0C1E4A; color: #fff; }
.ct-more-btn::after { content: '↓'; font-size: 13px; }
.ct-more-btn .less { display: none; }
.ct-more-toggle:checked ~ .ct-more-btn { color: #6b7280; border-color: #E8E0D3; }
.ct-more-toggle:checked ~ .ct-more-btn::after { content: '↑'; }
.ct-more-toggle:checked ~ .ct-more-btn .more,
.ct-more-toggle:not(:checked) ~ .ct-more-btn .less { display: none; }
.ct-more-toggle:checked ~ .ct-more-btn .less { display: inline; }

/* Six moments : 3 visibles, 3 repliés (même mécanique) */
.sm-more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.six-moments-card.sm-extra { display: none; }
.sm-more-toggle:checked ~ .six-moments-grid .six-moments-card.sm-extra { display: flex; }
.sm-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; max-width: 90%; margin: 22px auto 0; cursor: pointer;
  font: 700 14px var(--font-dm-sans), 'DM Sans', sans-serif;
  color: #0C1E4A; background: #fff; border: 1.5px solid #0C1E4A;
  border-radius: 999px; padding: 11px 22px; transition: background .2s, color .2s;
}
.sm-more-btn:hover { background: #0C1E4A; color: #fff; }
.sm-more-btn::after { content: '↓'; font-size: 13px; }
.sm-more-toggle:checked ~ .sm-more-btn { color: #6b7280; border-color: #E8E0D3; }
.sm-more-toggle:checked ~ .sm-more-btn::after { content: '↑'; }
.sm-more-btn .less { display: none; }
.sm-more-toggle:checked ~ .sm-more-btn .more { display: none; }
.sm-more-toggle:checked ~ .sm-more-btn .less { display: inline; }
@media (prefers-reduced-motion: reduce) { .ct-more-btn, .sm-more-btn { transition: none; } }

/* ==============================================================
   BANDEAU AUTORITÉ YOUTUBE (2026-08-15) : juste sous le hero, pour le
   trafic froid blog/SEO qui ne connaît pas Elisabeth. Chiffres réels
   repris du bloc « Enchantée ». N'ajoute rien au hero.
   ============================================================== */
/* Option A « byline » : une seule ligne dense, wrap propre en 2 lignes sur
   mobile. Bien plus court que la version empilée (retour Mathieu 15/08). */
/* !important : bat la règle globale « section, .hf360-sect { padding: 44px
   !important } » qui, sinon, rend le bandeau bien trop haut. */
.yt-authority { background: #fff; border-bottom: 1px solid #E8E0D3; padding: 11px 24px !important; }
.yt-auth-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; flex-wrap: wrap;
}
.yt-auth-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(12,30,74,0.16); flex: none; }
.yt-auth-who { font-size: 14px; color: #0C1E4A; }
.yt-auth-who b { font-weight: 700; }
.yt-auth-role { color: #5b6478; }
.yt-auth-sep { width: 1px; height: 20px; background: #E8E0D3; flex: none; }
.yt-auth-nums { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0C1E4A; }
.yt-auth-nums b { font-weight: 700; color: #b73a2b; }
.yt-auth-nums .yt-auth-dot { color: #5b6478; }
.yt-auth-logo { flex: none; margin-right: 3px; }
@media (max-width: 640px) {
  .yt-authority { padding: 14px 18px !important; }
  .yt-auth-sep { display: none; }
  /* mobile : TOUT centré, en colonne (photo, nom+rôle, chiffres), serré. */
  .yt-auth-inner { flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
  .yt-auth-ava { align-self: center; }
  .yt-auth-who, .yt-auth-nums { font-size: 13px; }
  .yt-auth-nums { margin-left: 0; }
}

/* --- I. le fil de lecture --- */
.hf360-readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: #d64a38; transform: scaleX(0); transform-origin: 0 50%;
  z-index: 60; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .hf360-readbar {
    animation: hf360-readbar-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes hf360-readbar-grow { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .hf360-readbar { display: none; } }

/* Pilier 3 (20/08) : un vrai ecran remplace l'illustration plate de Jean —
   on MONTRE la conversation au lieu de la decrire. Les bulles ne bougent pas.
   Specificite volontairement plus forte que .cq-vis.cq-v3 img (2 regles de
   taille existantes, desktop et mobile) pour que l'image remplisse le cadre. */
/* Le telephone MONTE du bord bas et se fait recadrer : sinon sa hauteur
   (213 px) depasse les 170 px du visuel et laisse un blanc sous les piliers
   1 et 2, que la grille etire a la meme hauteur (mesure : 246 vs 170). */
.cq-phone {
  position: relative; flex: none; align-self: flex-end;
  width: 74px; height: 148px; margin-bottom: -11px;
  border: 3px solid #0B0E1C; border-bottom: 0;
  border-radius: 13px 13px 0 0;
  overflow: hidden; background: #111;
  box-shadow: 0 8px 20px rgba(18, 22, 42, 0.28);
}
.cq-vis.cq-v3 .cq-phone img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
  align-self: auto;
}
@media (max-width: 900px) { .cq-phone { width: 70px; height: 140px; } }
/* Le telephone prend plus de large que l'ancienne illustration : on resserre la
   typo des bulles de CE pilier pour que la colonne tienne dans les 148 px
   disponibles (sinon le visuel passe a 212 px et etire les trois cartes). */
.cq-vis.cq-v3 .cq-bulle { font-size: 11.5px; line-height: 1.35; padding: 6px 9px; }
.cq-vis.cq-v3 .cq-lbl { font-size: 8.5px; margin-bottom: 3px; }
.cq-vis.cq-v3 .cq-talk { gap: 5px; }
.cq-vis.cq-v3 .cq-live { font-size: 10px; }

/* Parler visible AVANT le pilier 3 (20/08) : pastille micro sur les deux etapes
   toujours orales (prononciation + mise en situation ; la grammaire orale est
   conditionnelle au dialogue, donc jamais annoncee), et fil des verbes sous les
   piliers — le 3e en corail, c'est la promesse. */
.cq-mic {
  margin-left: auto; flex: none;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #b73a2b; background: #FFF0EC; border: 1px solid #F2C9BF;
  border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.cq-verbs {
  display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr;
  margin: 14px 0 0; gap: 0;
}
.cq-verbs .cq-verb {
  text-align: center; align-self: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #b73a2b;
}
.cq-verbs .cq-verb:nth-child(2) { grid-column: 3; }
.cq-verbs .cq-verb:nth-child(3) { grid-column: 5; }
.cq-verbs .is-speak {
  background: #FFF0EC; border: 1px solid #F2C9BF; border-radius: 999px; padding: 6px 0;
}
@media (max-width: 900px) {
  .cq-verbs { grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
  .cq-verbs .cq-verb:nth-child(2), .cq-verbs .cq-verb:nth-child(3) { grid-column: 1; }
}


  .hf360-ladder-sect { padding: 34px 0 6px; }
  .hf360-ladder { max-width: 900px; margin: 0 auto; text-align: center; }
  .hf360-ladder-kick {
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #b73a2b; margin: 0 0 8px;
  }
  .hf360-ladder-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: #0C1E4A;
    font-size: clamp(25px, 3.1vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px;
  }
  .hf360-ladder-sub {
    font-size: 16px; color: #1A1F36; line-height: 1.55; max-width: 560px; margin: 0 auto 26px;
  }
  .hf360-steps { display: flex; align-items: flex-end; gap: 10px; }
  .hf360-step {
    flex: 1; border: 1px solid #EBDDB8; border-bottom: none; border-radius: 12px 12px 0 0;
    background: #fff; padding: 14px 10px 16px; text-align: center;
    display: flex; flex-direction: column; gap: 5px;
  }
  .hf360-step-1 { height: 104px; background: #F3EEE2; }
  .hf360-step-2 { height: 132px; }
  .hf360-step-3 { height: 160px; }
  .hf360-step-4 { height: 192px; border-color: #d64a38; box-shadow: 0 8px 24px rgba(214,74,56,.13); }
  .hf360-step-lvl { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600; color: #0C1E4A; }
  .hf360-step-last .hf360-step-lvl { color: #d64a38; }
  .hf360-step-lbl { font-size: 12.5px; color: #6B5F57; line-height: 1.35; }
  .hf360-steps-base { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #EBDDB8, #d64a38); }
  @media (max-width: 640px) {
    .hf360-ladder-sect { padding: 24px 14px 4px; }
    .hf360-ladder-sub { font-size: 15px; margin-bottom: 20px; }
    .hf360-steps { gap: 6px; }
    .hf360-step { padding: 10px 5px 12px; }
    .hf360-step-lvl { font-size: 18px; }
    .hf360-step-lbl { font-size: 10.5px; }
    .hf360-step-1 { height: 88px; }
    .hf360-step-2 { height: 110px; }
    .hf360-step-3 { height: 134px; }
    .hf360-step-4 { height: 162px; }
  }

  .hf360-vol-sect { padding: 26px 0 30px; }
  .hf360-vol {
    max-width: 900px; margin: 0 auto;
    background: linear-gradient(180deg, #0F1B40 0%, #16264F 100%);
    border-radius: 18px; color: #fff; text-align: center;
    padding: 42px 30px 34px;
  }
  .hf360-vol-kick {
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #E8A493; margin: 0;
  }
  .hf360-vol-n {
    font-family: 'Fraunces', Georgia, serif; font-size: 126px; line-height: .85; font-weight: 700;
    letter-spacing: -.055em; color: #d64a38; margin: 14px 0 0;
    text-shadow: 0 8px 34px rgba(214, 74, 56, .3);
  }
  .hf360-vol-n sup { font-size: 36px; vertical-align: super; }
  .hf360-vol-t {
    font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 500; margin: 12px 0 0;
  }
  .hf360-vol-s {
    font-size: 14.5px; color: rgba(255, 255, 255, .7); margin: 10px auto 0; max-width: 460px;
    line-height: 1.6;
  }
  .hf360-vol-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px;
  }
  .hf360-vol-chip {
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 7px 15px;
    font-size: 13px; color: rgba(255, 255, 255, .86);
  }
  .hf360-vol-chip b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: #fff; }
  @media (max-width: 640px) {
    .hf360-vol-sect { padding: 18px 14px 22px; }
    .hf360-vol { padding: 30px 16px 26px; }
    .hf360-vol-n { font-size: 84px; }
    .hf360-vol-n sup { font-size: 24px; }
    .hf360-vol-t { font-size: 20px; }
    .hf360-vol-s { font-size: 14px; }
  }

/* ============================================================
   BLOCS REPRIS DE LA LANDING PREMIUM — septembre 2026
   Prix, engagement et CTA final uniquement. Le reste de la landing
   historique conserve sa structure et sa direction visuelle.
   ============================================================ */
.pricing .pricing-v2-annual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 44px;
  margin-top: 22px;
  padding: 38px 36px 32px;
  border: 1.5px solid #0C1E4A;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(12, 30, 74, .45);
}
.pricing .core-card.pcard.has-annual-badges {
  position: relative;
  border: 3px solid #d64a38 !important;
  box-shadow: 0 22px 48px -26px rgba(214, 74, 56, .4) !important;
}
.pricing .pricing-annual-highlights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-radius: 12px 12px 0 0;
  background: #d64a38;
}
.pricing .pricing-annual-savings {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
  color: #b73a2b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(100, 30, 20, .16);
}
.pricing .pricing-annual-savings strong { font-size: 32px; font-weight: 800; line-height: 1; }
.pricing .pricing-v2-annual-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: 999px;
  background: #0C1E4A;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 4px 14px rgba(12, 30, 74, .2);
}
.pricing .pricing-v2-kicker {
  margin: 0;
  color: #b73a2b;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}
.pricing .pricing-v2-kicker.is-muted { color: #626B82; }
.pricing .pricing-v2-offer:empty { display: none; }
.pricing .pricing-v2-offer:not(:empty)::before { content: ' · '; }
.pricing .pricing-v2-annual-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}
.pricing .pricing-v2-annual-left h3 {
  margin: 0;
  color: #0C1E4A;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.pricing .pricing-v2-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: #0C1E4A;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
}
.pricing .pricing-v2-unit {
  margin-left: -3px;
  color: #4A5578;
  font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.pricing .pricing-v2-price .old,
.pricing .pricing-v2-monthly-price s {
  color: #7A8096;
  font-size: 17px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pricing .pricing-v2-annual-line,
.pricing .pricing-v2-annual-note {
  margin: 0;
  color: #1A1F36;
  font-size: 14.5px;
  line-height: 1.55;
}
.pricing .pricing-v2-annual-line strong { color: #0C1E4A; }
.pricing .pricing-v2-annual-line b { color: #b73a2b; }
.pricing .pricing-v2-annual-note { color: #4A5578; }
.pricing .pricing-v2-annual-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  padding-left: 44px;
  border-left: 1px solid #E8E0D3;
}
.pricing .pricing-v2-steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing .pricing-v2-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #1A1F36;
  font-size: 14px;
  line-height: 1.45;
}
.pricing .pricing-v2-steps i {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid #E8E0D3;
  border-radius: 50%;
  background: #FFF8EF;
  color: #0C1E4A;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  font-style: normal;
}
.pricing .pricing-v2-steps b { color: #0C1E4A; }
.pricing .pricing-v2-steps strong { color: #2f7d3f; }
.pricing .pricing-v2-main-cta {
  width: 100%;
  justify-content: center;
  padding: 17px 22px;
  border-radius: 12px;
  text-align: center;
}
.pricing .pricing-v2-cta-foot {
  margin: 0;
  color: #6B7186;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}
.pricing .pricing-v2-monthly-wrap {
  max-width: 848px;
  margin: 22px auto 0;
  padding: 0 24px;
}
.pricing .pricing-v2-monthly {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 22px 26px 20px;
  border: 1px solid #E8E0D3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px -30px rgba(12, 30, 74, .35);
}
.pricing .pricing-v2-monthly-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
}
.pricing .pricing-v2-monthly-offer {
  align-self: flex-start;
  margin: 0;
  padding: 4px 9px;
  font-size: 11px;
}
.pricing .pricing-v2-monthly-price { font-size: 34px; }
.pricing .pricing-v2-monthly-line {
  margin: 0;
  color: #4A5578;
  font-size: 13.5px;
  line-height: 1.5;
}
.pricing .pricing-v2-line-cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1.5px solid #0C1E4A;
  border-radius: 10px;
  color: #0C1E4A;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.pricing .pricing-v2-line-cta:hover { background: #0C1E4A; color: #fff; }
.pricing .pricing-v2-monthly-facts {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 9px 22px;
  padding-top: 12px;
  border-top: 1px solid #E8E0D3;
}
.pricing .pricing-v2-monthly-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1A1F36;
  font-size: 12.5px;
}
.pricing .pricing-v2-monthly-facts b,
.pricing .pricing-v2-included li > b {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #FFF1EF;
  color: #d64a38;
  font-size: 11px;
}
.pricing .pricing-v2-included {
  max-width: 1040px;
  margin: 44px auto 0;
  padding: 32px 24px 0;
  border-top: 1px solid #E8E0D3;
}
.pricing .pricing-v2-included-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 18px;
}
.pricing .pricing-v2-included-head > span {
  flex: 1;
  min-width: 240px;
  color: #4A5578;
  font-size: 13px;
  line-height: 1.5;
}
.pricing .pricing-v2-included ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing .pricing-v2-included li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #1A1F36;
  font-size: 15px;
  line-height: 1.5;
}
.pricing .pricing-v2-included li > b { margin-top: 2px; }
.pricing .pricing-v2-included li strong { color: #0C1E4A; font-weight: 650; }
.pricing .pricing-v2-quote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  max-width: 992px;
  margin: 36px auto 0;
  padding: 18px 22px;
  border: 1px solid #E8E0D3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 34px -30px rgba(12, 30, 74, .32);
}
.pricing .pricing-v2-stars { color: #f5a623; font-size: 12px; letter-spacing: 1px; }
.pricing .pricing-v2-quote p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  color: #0C1E4A;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
}
.pricing .pricing-v2-quote small { color: #6B7186; font-size: 12.5px; }
.pricing .pcard .pricing-quote-author { display: flex; align-items: center; gap: 10px; letter-spacing: normal; text-transform: none; }
.pricing .pricing-quote-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.hf360-gar {
  padding: 78px 0;
  border-top: 1px solid #E8E0D3;
  border-bottom: 1px solid #E8E0D3;
  background: #FBFAF7;
}
.hf360-gar .gar-head { margin-bottom: 18px; }
.hf360-gar .gar-lead {
  max-width: 680px;
  margin: 0 auto 32px;
  color: #1A1F36;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}
.hf360-gar .gar-promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.hf360-gar .gar-promise-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 25px 26px;
  border: 1px solid #E8E0D3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 44px -34px rgba(12, 30, 74, .35);
}
.hf360-gar .gar-promise-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #E8E0D3;
  border-radius: 50%;
  background: #FFF8EF;
  color: #d64a38;
}
.hf360-gar .gar-promise-card h3 {
  margin: 0;
  color: #0C1E4A;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.hf360-gar .gar-promise-card p {
  margin: 7px 0 0;
  color: #1A1F36;
  font-size: 15px;
  line-height: 1.55;
}

.final-cta {
  padding: 80px 0;
  text-align: left;
}
.final-cta .final-cta-wrap {
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 24px;
}
.final-cta .final-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 64px;
  align-items: center;
}
.final-cta .final-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.final-cta .final-cta-copy h2 {
  max-width: 680px;
  margin: 0;
  color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(38px, 4.3vw, 52px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.06;
}
.final-cta .final-cta-copy h2 em {
  display: inline;
  color: #F4A28F;
  font-style: italic;
  font-weight: inherit;
}
.final-cta .final-cta-copy .final-cta-lead {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 17px;
  line-height: 1.6;
}
.final-cta .final-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.final-cta .final-cta-action .hf360-cta-primary { color: #fff; }
.final-cta .final-cta-action .final-cta-reassure {
  max-width: 540px;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 13.5px;
  line-height: 1.5;
}
.final-cta .final-cta-eval {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 9px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.final-cta .final-cta-eval a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.final-cta .final-cta-eval small { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.final-cta .final-cta-copy .sig {
  max-width: none;
  margin: 0;
  color: #F4A28F;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 27px;
  line-height: 1.25;
}
.final-cta .final-cta-photo {
  display: block;
  width: 100%;
  height: 440px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 28px 55px -32px rgba(0, 0, 0, .7);
}

@media (max-width: 980px) {
  .final-cta .final-cta-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 36px; }
}
@media (max-width: 860px) {
  .pricing .pricing-v2-annual { grid-template-columns: 1fr; gap: 26px; padding: 36px 26px 28px; }
  .pricing .pricing-v2-annual-right { padding: 26px 0 0; border-top: 1px solid #E8E0D3; border-left: 0; }
  .pricing .pricing-v2-included ul { grid-template-columns: 1fr; gap: 12px; }
  .hf360-gar .gar-promise-grid { grid-template-columns: 1fr; max-width: 620px; }
  .final-cta { padding: 58px 0; }
  .final-cta .final-cta-grid { grid-template-columns: 1fr; gap: 34px; }
  .final-cta .final-cta-photo { grid-row: 1; height: min(64vw, 430px); }
  .final-cta .final-cta-copy { grid-row: 2; }
}
@media (max-width: 560px) {
  .pricing .pricing-v2-annual { padding: 34px 20px 24px; border-radius: 18px; }
  .pricing .pricing-annual-highlights { padding: 14px 12px; gap: 10px; }
  .pricing .pricing-v2-annual-badge { padding: 12px 14px; font-size: 13px; letter-spacing: .03em; }
  .pricing .pricing-annual-savings { flex-direction: column; gap: 4px; padding: 10px 14px; font-size: 11px; }
  .pricing .pricing-annual-savings strong { font-size: 28px; }
  .pricing .pricing-v2-annual-left h3 { font-size: 27px; }
  .pricing .pricing-v2-price { font-size: 45px; }
  .pricing .pricing-v2-monthly-wrap { padding: 0 10px; }
  .pricing .pricing-v2-monthly { padding: 20px; }
  .pricing .pricing-v2-line-cta { width: 100%; }
  .pricing .pricing-v2-included { padding-right: 10px; padding-left: 10px; }
  .pricing .pricing-v2-quote { margin-right: 10px; margin-left: 10px; }
  .hf360-gar { padding: 58px 0; }
  .hf360-gar .gar-promise-card { padding: 22px 20px; }
  .final-cta .final-cta-wrap { padding: 0 20px; }
  .final-cta .final-cta-copy h2 { font-size: 36px; }
  .final-cta .final-cta-action,
  .final-cta .final-cta-action .hf360-cta-primary { width: 100%; }
  .final-cta .final-cta-action .hf360-cta-primary { justify-content: center; text-align: center; }
}

/* 360 FR/EN — reuse the former "In plain terms" background instead of cream.
   Scope the palette because Accompagnement also loads this stylesheet. */
body:has(.landing-360-scope) {
  background: #fff;
}
.landing-360-scope,
.hf360-hero.cq-hero-ivory {
  --hf360-surface-glow: radial-gradient(75% 70% at 50% 40%, #f6efe3 0%, rgba(246,239,227,0) 80%);
}
.landing-360-scope {
  --hf360-soft-background: var(--hf360-surface-glow), #fff;
  --v2-cream: #fff;
  --v2-cream-warm: #fff;
}
.landing-360-scope .lgap,
.landing-360-scope .sfear.sfear-light,
.landing-360-scope .lacts,
.landing-360-scope .alb,
.landing-360-scope .l360ds-tools,
.landing-360-scope .l360ds-compare,
.landing-360-scope .l360ds-certificate,
.landing-360-scope .hf360-mid-cta-wrap,
.landing-360-scope .pricing,
.landing-360-scope .hf-footer {
  background: var(--hf360-soft-background);
}
/* These three sections have historical inline backgrounds. */
.landing-360-scope .dialogue-samples,
.landing-360-scope .hf360-gar,
.landing-360-scope .faq {
  background: var(--hf360-soft-background) !important;
}
.landing-360-scope .cq-sect {
  background: #fff;
}
.landing-360-scope .lacts {
  --lacts-cream: #fff;
  --lacts-cream-2: #fff;
}
.landing-360-scope .l360ds {
  --ds-cream: #fff;
}
.landing-360-scope .lgap-audio-bridge,
.landing-360-scope .lgap-text-flow,
.landing-360-scope .sfear-pressure,
.landing-360-scope .hf360-mid-cta,
.landing-360-scope .alb-line,
.landing-360-scope .aio-sect .aio-card360,
.landing-360-scope .hf360-audio,
.landing-360-scope .l360ds-table,
.landing-360-scope .l360ds-cert-paper,
.landing-360-scope .cq-two-of-us,
.landing-360-scope .pcard .pquote,
.landing-360-scope .hf360-card-cream,
.landing-360-scope .pricing .pricing-v2-steps i,
.landing-360-scope .hf360-gar .gar-promise-ico {
  background: #fff;
}
.landing-360-scope .pricing-tutor-calc > div,
.landing-360-scope .pricing-team-link > a,
.landing-360-scope [data-hf-monthly-plan],
.landing-360-scope .ct-card.featured {
  background: #fff !important;
}
.landing-360-scope .alb-seg,
.landing-360-scope .l360ds-table-corner,
.landing-360-scope .l360ds-criterion,
.landing-360-scope .hf360-step-1,
.landing-360-scope .cq-v2 .ck {
  background: #f4f5f7;
}
.landing-360-scope .sfear-people span {
  border-color: #fff;
}
.landing-360-scope .cq-two-of-us::before {
  background: rgba(219,224,232,.62);
}
.landing-360-scope .hf360-social-proof {
  background: rgba(255,255,255,.98);
}

/* Preserve the background crop while allowing native lazy loading below the fold. */
.ct-spotlight-photo:has(> .hf360-lazy-cover) { position: relative; overflow: hidden; }
.hf360-lazy-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }