
    /* =====================================================
       VARIABLES
    ===================================================== */
    :root {
      --bleu:         #0E2A47;
      --bleu-mid:     #1F3F66;
      --ivoire:       #F4F1EA;
      --ivoire-mid:   #EBE7DC;
      --gris:         #6B7A8A;
      --or:           #C6A75E;
      --or-fade:      rgba(198,167,94,0.12);
      --or-border:    rgba(198,167,94,0.28);
      --texte:        #0E2A47;
      --texte-corps:  #2C3E50;
      --texte-doux:   #3D5166;
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'Jost', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16px;
      color: var(--texte-corps);
      background: #fff;
      -webkit-font-smoothing: antialiased;
      line-height: 1.75;
    }

    ::selection { background: var(--or-fade); color: var(--bleu); }

    h1, h2, h3, h4 {
      font-family: var(--font-display);
      color: var(--texte);
      font-weight: 400;
      line-height: 1.18;
    }

    h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
    h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
    h3 { font-size: 1.15rem; font-weight: 500; font-family: var(--font-body); color: var(--texte); }

    p { line-height: 1.85; font-size: 1rem; color: var(--texte-corps); margin-bottom: 1rem; }
    a { color: var(--bleu-mid); text-decoration: none; }
    a:hover { color: var(--or); }

    img { display: block; max-width: 100%; }

    /* =====================================================
       UTILITAIRES
    ===================================================== */
    .eyebrow {
      font-family: var(--font-body);
      font-size: 0.67rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--or);
      display: block;
    }

    .or-rule         { display: block; width: 36px; height: 1.5px; background: var(--or); }
    .or-rule-center  { margin: 0 auto; }

    .sec    { padding: 6rem 0; }
    .sec-sm { padding: 4rem 0; }
    .sec-ivoire { background: var(--ivoire); }
    .sec-blanc  { background: #fff; }

    /* =====================================================
       NAVBAR
    ===================================================== */
    .navbar-ie {
      background: var(--bleu);
      padding: 0;
      min-height: 64px;
    }
    .navbar-ie > .container { min-height: 64px; display: flex; align-items: center; flex-wrap: wrap; }

    .ie-brand {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: 1.05rem;
      color: #fff !important;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .ie-brand-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); }
    .ie-brand-sub {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--or);
      font-family: var(--font-body);
      font-weight: 400;
    }

    .ie-nav-link {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55) !important;
      padding: 0 0.9rem !important;
      transition: color 0.2s;
    }
    .ie-nav-link:hover { color: rgba(255,255,255,0.95) !important; }

    .btn-nav-rdv {
      font-family: var(--font-body);
      font-size: 0.69rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bleu) !important;
      background: var(--or);
      padding: 0.5rem 1.2rem;
      border-radius: 1px;
      transition: opacity 0.2s;
      text-decoration: none;
    }
    .btn-nav-rdv:hover { opacity: 0.88; }

    .navbar-toggler { border: none !important; box-shadow: none !important; }

    /* =====================================================
       BOUTONS GLOBAUX
    ===================================================== */
    .btn-ie {
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em;
      text-transform: uppercase;
      background: var(--bleu); color: #fff !important;
      padding: 0.9rem 2rem;
      border-radius: 1px; border: none;
      display: inline-block;
      transition: background 0.25s, transform 0.15s;
      text-decoration: none;
    }
    .btn-ie:hover { background: var(--bleu-mid); transform: translateY(-1px); }

    .btn-ie-outline {
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em;
      text-transform: uppercase;
      background: transparent; color: var(--bleu) !important;
      padding: 0.85rem 1.9rem;
      border-radius: 1px;
      border: 1px solid var(--or-border);
      display: inline-block;
      transition: background 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    .btn-ie-outline:hover { background: var(--or-fade); border-color: var(--or); }

    /* =====================================================
       HERO — NOUVEAU
    ===================================================== */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-photo-wrap {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-photo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      display: block;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        105deg,
        rgba(14,42,71,0.93) 0%,
        rgba(14,42,71,0.75) 55%,
        rgba(14,42,71,0.40) 100%
      );
    }

    .hero-line {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      z-index: 2;
      background: linear-gradient(to bottom, transparent, var(--or) 30%, var(--or) 70%, transparent);
      opacity: 0.45;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      padding: 7rem 0 5rem;
      width: 100%;
    }

    .hero-eyebrow {
      font-family: var(--font-body);
      font-size: 0.67rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--or);
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1.8rem;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 1px;
      background: var(--or);
    }

    .hero-title {
      font-family: var(--font-display);
      font-weight: 200;
      color: #fff;
      font-size: clamp(2.4rem, 5.5vw, 4.2rem);
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin-bottom: 1.6rem;
      max-width: 680px;
    }
    .hero-title em { font-style: italic; color: var(--or); }

    /* Domaines — tags sous le titre */
    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2.4rem;
    }
    .hero-tag {
      font-family: var(--font-body);
      font-size: 0.64rem;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.18);
      padding: 0.3rem 0.75rem;
      border-radius: 1px;
    }
    .hero-tag-sep {
      color: rgba(198,167,94,0.4);
      font-size: 0.7rem;
      align-self: center;
    }

    .hero-subtitle {
      color: rgba(255,255,255,0.78);
      font-size: 1.02rem;
      font-weight: 400;
      line-height: 1.9;
      max-width: 520px;
      margin-bottom: 2.8rem;
    }

    /* Deux CTA hero — colonne sur mobile */
    .hero-cta-group {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: stretch;
    }

    .btn-hero-primary {
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      background: var(--or);
      color: var(--bleu) !important;
      padding: 1rem 2.2rem;
      border-radius: 1px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: opacity 0.2s, transform 0.2s;
      text-decoration: none;
    }
    .btn-hero-primary:hover { opacity: 0.9; transform: translateY(-1px); }

    .btn-hero-secondary {
      font-family: var(--font-body);
      font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #fff !important;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.22);
      padding: 1rem 2.2rem;
      border-radius: 1px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    .btn-hero-secondary:hover { background: rgba(255,255,255,0.14); border-color: var(--or); color: #fff !important; }

    /* =====================================================
       BANDEAU RÉASSURANCE
    ===================================================== */
    .band {
      background: var(--ivoire-mid);
      border-top: 1px solid rgba(198,167,94,0.2);
      border-bottom: 1px solid rgba(198,167,94,0.2);
      padding: 1.5rem 0;
    }
    .band-item {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.9rem; font-weight: 400;
      color: var(--texte-corps); letter-spacing: 0.01em;
    }

    /* =====================================================
       LEAD MAGNET — APPEL DÉCOUVERTE
    ===================================================== */
    .lm-appel {
      background: var(--bleu);
      position: relative;
      overflow: hidden;
      padding: 6rem 0;
    }
    .lm-appel::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--or) 40%, var(--or) 60%, transparent);
      opacity: 0.35;
    }
    .lm-appel::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--or) 40%, var(--or) 60%, transparent);
      opacity: 0.35;
    }
    .lm-appel-bg-text {
      position: absolute; right: -2%; bottom: -15%;
      font-family: var(--font-display);
      font-size: clamp(80px,16vw,220px); font-weight: 200;
      color: rgba(255,255,255,0.03);
      user-select: none; pointer-events: none; line-height: 1;
    }

    /* Formulaire appel */
    .form-lm {
      background: #fff;
      border-radius: 2px;
      padding: 2.5rem;
      box-shadow: 0 24px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(198,167,94,0.15);
    }

    .form-lm .form-label {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--texte-doux);
      margin-bottom: 0.4rem;
    }

    .form-lm .form-control,
    .form-lm .form-select {
      border: 1px solid rgba(14,42,71,0.15);
      border-radius: 1px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--texte);
      padding: 0.65rem 0.9rem;
      background: #fff;
      transition: border-color 0.2s;
    }
    .form-lm .form-control:focus,
    .form-lm .form-select:focus {
      border-color: var(--or);
      box-shadow: 0 0 0 3px var(--or-fade);
      outline: none;
    }
    .form-lm .form-control::placeholder { color: rgba(44,62,80,0.35); }

    .btn-form-submit {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      background: var(--or);
      color: var(--bleu) !important;
      border: none;
      padding: 1rem 2rem;
      border-radius: 1px;
      width: 100%;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
    }
    .btn-form-submit:hover { opacity: 0.9; transform: translateY(-1px); }

    /* Points de réassurance appel */
    .appel-bullet {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.6rem;
    }
    .appel-bullet-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(198,167,94,0.12);
      border: 1px solid rgba(198,167,94,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--or);
    }
    .appel-bullet-title {
      font-family: var(--font-body);
      font-size: 0.97rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.2rem;
    }
    .appel-bullet-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin: 0;
    }

    /* =====================================================
       LEAD MAGNET — CONFÉRENCES
    ===================================================== */
    .lm-conf {
      background: var(--ivoire);
      padding: 6rem 0;
      position: relative;
    }

    /* Card conférence */
    .conf-card {
      background: #fff;
      border: 1px solid rgba(198,167,94,0.2);
      border-radius: 2px;
      overflow: hidden;
      transition: box-shadow 0.3s, transform 0.2s;
      height: 100%;
    }
    .conf-card:hover { box-shadow: 0 16px 48px rgba(14,42,71,0.1); transform: translateY(-2px); }

    .conf-card-header {
      background: var(--bleu);
      padding: 1.5rem;
      position: relative;
    }
    .conf-card-date {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 300;
      color: var(--or);
      line-height: 1;
    }
    .conf-card-month {
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-top: 0.25rem;
    }
    .conf-card-tag {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-family: var(--font-body);
      font-size: 0.58rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--bleu);
      background: var(--or);
      padding: 0.25rem 0.6rem;
      border-radius: 1px;
    }

    .conf-card-body { padding: 1.6rem; }
    .conf-card-title {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 400;
      color: var(--texte);
      line-height: 1.3;
      margin-bottom: 0.6rem;
    }
    .conf-card-desc {
      font-size: 0.9rem;
      color: var(--texte-doux);
      line-height: 1.75;
      margin-bottom: 1.2rem;
    }
    .conf-card-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      color: var(--gris);
      margin-bottom: 1.4rem;
    }

    .btn-conf {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--bleu) !important;
      border: 1px solid var(--or-border);
      background: transparent;
      padding: 0.7rem 1.4rem;
      border-radius: 1px;
      display: inline-block;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      width: 100%;
      text-align: center;
    }
    .btn-conf:hover { background: var(--or-fade); border-color: var(--or); }

    /* Modal / overlay inscription conférence */
    .modal-ie .modal-content {
      border: 1px solid rgba(198,167,94,0.2);
      border-radius: 2px;
      box-shadow: 0 32px 80px rgba(14,42,71,0.25);
    }
    .modal-ie .modal-header {
      background: var(--bleu);
      border-bottom: none;
      padding: 1.8rem 2rem;
    }
    .modal-ie .modal-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 300;
      color: #fff;
    }
    .modal-ie .modal-body { padding: 2rem; }
    .modal-ie .btn-close { filter: invert(1) opacity(0.6); }

    /* =====================================================
       CARDS (section Pourquoi)
    ===================================================== */
    .card-ie {
      background: #fff;
      border: 1px solid rgba(198,167,94,0.18);
      border-radius: 2px;
      padding: 2rem 1.8rem;
      height: 100%;
      position: relative;
      transition: box-shadow 0.3s, transform 0.2s;
    }
    .card-ie::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 2px; height: 0;
      background: var(--or);
      transition: height 0.3s ease;
    }
    .card-ie:hover { box-shadow: 0 12px 40px rgba(14,42,71,0.07); transform: translateY(-2px); }
    .card-ie:hover::before { height: 100%; }
    .card-icon-wrap { width: 36px; height: 36px; margin-bottom: 1.1rem; color: var(--or); }
    .card-ie h3 { font-size: 1rem; font-weight: 600; color: var(--texte); margin-bottom: 0.6rem; font-family: var(--font-body); }
    .card-ie p  { font-size: 0.95rem; color: var(--texte-corps); line-height: 1.75; margin: 0; }

    /* =====================================================
       SECTION ENFANT — SPLIT PHOTO
    ===================================================== */
    .split-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 640px;
    }

    .split-photo {
      position: relative;
      min-height: 500px;
      overflow: hidden;
    }

    .split-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .split-photo-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent 65%, var(--ivoire) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .split-content {
      background: var(--ivoire);
      padding: 5rem 4rem 5rem 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* =====================================================
       SECTION PARENTS — PHOTO ENCART
    ===================================================== */
    .parents-photo-encart {
      position: relative;
      border-radius: 2px;
      overflow: hidden;
      height: 480px;
      box-shadow: 0 20px 60px rgba(14,42,71,0.15);
    }

    .parents-photo-encart img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }

    .parents-photo-encart::after {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(198,167,94,0.35);
      pointer-events: none;
      z-index: 2;
    }

    .photo-badge {
      position: absolute;
      bottom: 2rem;
      left: -1.5rem;
      z-index: 3;
      background: #fff;
      border-left: 3px solid var(--or);
      padding: 1rem 1.5rem;
      box-shadow: 0 8px 24px rgba(14,42,71,0.12);
    }
    .photo-badge-value {
      font-family: var(--font-display);
      font-size: 1.5rem; font-weight: 300;
      color: var(--bleu); line-height: 1;
    }
    .photo-badge-label {
      font-size: 0.7rem; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--gris);
      font-weight: 400; margin-top: 0.25rem;
    }

    /* =====================================================
       SECTION DÉROULEMENT — PHOTO DE FOND
    ===================================================== */
    .deroulement-section { position: relative; }

    .deroulement-bg-wrap {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .deroulement-bg-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
      filter: saturate(0.3) brightness(1.15);
    }

    .deroulement-bg-overlay {
      position: absolute;
      inset: 0;
      background: rgba(244, 241, 234, 0.92);
      z-index: 1;
    }

    .deroulement-content {
      position: relative;
      z-index: 2;
      padding: 6rem 0;
    }

    /* =====================================================
       STEPS
    ===================================================== */
    .step-item {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 0 1.5rem;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(198,167,94,0.15);
      align-items: start;
    }
    .step-item:last-child { border-bottom: none; }
    .step-num {
      font-family: var(--font-display);
      font-size: 2.2rem; font-weight: 300;
      color: var(--or); line-height: 1;
      text-align: right;
    }
    .step-content h3 {
      font-size: 1.05rem; font-weight: 600;
      font-family: var(--font-body);
      color: var(--texte); margin-bottom: 0.5rem;
    }
    .step-content p {
      font-size: 0.97rem;
      color: var(--texte-corps);
      margin: 0; line-height: 1.8;
    }

    /* =====================================================
       FAQ
    ===================================================== */
    .faq-photo-wrap {
      position: relative;
      border-radius: 2px;
      overflow: hidden;
      height: 260px;
      margin-bottom: 2rem;
    }

    .faq-photo-wrap img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }

    .faq-photo-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(14,42,71,0.55) 0%, transparent 60%);
      z-index: 1;
      pointer-events: none;
    }

    .faq-photo-caption {
      position: absolute;
      bottom: 1rem; left: 1rem; right: 1rem;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1rem;
      color: rgba(255,255,255,0.85);
      z-index: 2;
      line-height: 1.4;
    }

    /* =====================================================
       QUOTES
    ===================================================== */
    .pullquote {
      position: relative;
      padding: 2.5rem 2.5rem 2.5rem 3.5rem;
    }
    .pullquote::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--or), rgba(198,167,94,0.2));
    }
    .pullquote blockquote {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.5vw, 1.7rem);
      font-weight: 300; font-style: italic;
      color: var(--texte);
      line-height: 1.5; margin: 0 0 1rem;
    }
    .pullquote cite {
      font-family: var(--font-body);
      font-size: 0.78rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--gris);
      font-style: normal; font-weight: 400;
    }

    /* =====================================================
       CHECK LIST
    ===================================================== */
    .check-list { list-style: none; padding: 0; margin: 0; }
    .check-list li {
      display: flex; gap: 1rem; align-items: flex-start;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(198,167,94,0.12);
      font-size: 0.97rem;
      color: var(--texte-corps);
      line-height: 1.7;
    }
    .check-list li:last-child { border-bottom: none; }
    .check-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
    .check-list strong {
      display: block; font-weight: 600;
      color: var(--texte); font-size: 0.97rem;
      margin-bottom: 0.25rem;
    }

    /* =====================================================
       FAQ ACCORDION
    ===================================================== */
    .accordion-ie .accordion-item {
      background: transparent; border: none;
      border-bottom: 1px solid rgba(14,42,71,0.1);
    }
    .accordion-ie .accordion-button {
      background: transparent;
      font-family: var(--font-body);
      font-size: 1rem; font-weight: 500;
      color: var(--texte); padding: 1.3rem 0;
      box-shadow: none; letter-spacing: 0;
    }
    .accordion-ie .accordion-button:not(.collapsed) { color: var(--bleu); background: transparent; box-shadow: none; }
    .accordion-ie .accordion-button::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23C6A75E' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-size: 14px; width: 14px; height: 14px;
    }
    .accordion-ie .accordion-body {
      font-size: 0.97rem;
      color: var(--texte-corps);
      line-height: 1.85; padding: 0 0 1.3rem;
    }

    /* =====================================================
       SECTION RDV
    ===================================================== */
    .rdv-section {
      background: var(--bleu);
      padding: 6rem 0;
      position: relative; overflow: hidden;
    }
    .rdv-section::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--or) 40%, var(--or) 60%, transparent);
      opacity: 0.35;
    }
    .rdv-section::after {
      content: ''; position: absolute;
      bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--or) 40%, var(--or) 60%, transparent);
      opacity: 0.35;
    }
    .rdv-bg-text {
      position: absolute; right: -1%; bottom: -10%;
      font-family: var(--font-display);
      font-size: clamp(100px,18vw,240px); font-weight: 200;
      color: rgba(255,255,255,0.025);
      user-select: none; pointer-events: none; line-height: 1;
    }
    .iframe-shell {
      background: #fff; border-radius: 2px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(198,167,94,0.15);
    }

    /* =====================================================
       FOOTER
    ===================================================== */
    footer {
      background: #0B1E30;
      color: rgba(255,255,255,0.4);
      padding: 4rem 0 2.5rem; font-size: 0.82rem;
    }
    .footer-brand {
      font-family: var(--font-display);
      font-size: 1.3rem; font-weight: 300;
      color: rgba(255,255,255,0.85); margin-bottom: 0.4rem;
    }
    .footer-heading {
      font-family: var(--font-body);
      font-size: 0.64rem; letter-spacing: 0.16em;
      text-transform: uppercase; color: rgba(255,255,255,0.28);
      margin-bottom: 1.1rem;
    }
    footer ul { list-style: none; padding: 0; margin: 0; }
    footer ul li { margin-bottom: 0.55rem; }
    footer a { color: rgba(255,255,255,0.42); text-decoration: none; transition: color 0.2s; }
    footer a:hover { color: var(--or); }
    .footer-rule { border: none; border-top: 1px solid rgba(198,167,94,0.12); margin: 2.5rem 0 1.5rem; }

    /* Success state */
    .form-success {
      display: none;
      text-align: center;
      padding: 3rem 1rem;
    }
    .form-success-icon {
      width: 56px;
      height: 56px;
      background: var(--or-fade);
      border: 1px solid var(--or-border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      color: var(--or);
    }

    /* =====================================================
       GHL BOOKING IFRAME SHELL
    ===================================================== */
    .ghl-shell {
      background: #fff;
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(198,167,94,0.15);
      /* Hauteur min pour éviter l'effondrement avant que le widget charge */
      min-height: 600px;
    }
    .ghl-shell iframe {
      width: 100%;
      min-height: 600px;
      border: none;
      display: block;
    }
    @media (max-width: 767px) {
      .ghl-shell,
      .ghl-shell iframe { min-height: 520px; }
    }
    @media (max-width: 575px) {
      .ghl-shell,
      .ghl-shell iframe { min-height: 480px; }
    }

    /* ── Shell iframe conférence GHL (inline, pas de modal) ── */
    .ghl-conf-shell {
      background: #fff;
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(14,42,71,0.1), 0 0 0 1px rgba(198,167,94,0.15);
    }
    .ghl-conf-shell iframe {
      display: block;
      width: 100%;
      height: 725px;
      border: none;
    }
    @media (max-width: 575px) {
      .ghl-conf-shell iframe { height: 780px; } /* un peu plus de hauteur pour les petits écrans */
    }

    /* ── Bannière conférence responsive ── */
    .conf-banner-btn { white-space: nowrap; }
    @media (max-width: 575px) {
      .conf-banner-wrap { padding: 1.5rem !important; flex-direction: column; align-items: flex-start !important; }
      .conf-banner-btn { width: 100%; justify-content: center; white-space: normal; }
    }

    /* =====================================================
       RESPONSIVE — COMPLET (Android · iOS · Tablette · Desktop)
    ===================================================== */

    /* ── Éviter tout overflow horizontal sur mobile ── */
    html, body {
      overflow-x: hidden;
      width: 100%;
    }

    /* ── Tablette large : 992px → 1199px ── */
    @media (max-width: 1199px) {
      .split-content { padding: 4rem 2.5rem 4rem 2rem; }
      .lm-appel-bg-text { display: none; } /* évite overflow horizontal */
    }

    /* ── Tablette : ≤991px (Bootstrap lg breakpoint) ── */
    @media (max-width: 991px) {

      /* Sections padding réduit */
      .sec    { padding: 4rem 0; }
      .sec-sm { padding: 3rem 0; }
      .lm-appel  { padding: 4rem 0; }
      .lm-conf   { padding: 4rem 0; }
      .deroulement-content { padding: 4rem 0; }

      /* HERO : hauteur auto, pas de 100vh sur tablette portrait */
      .hero { min-height: 85vh; }
      .hero-content { padding: 5rem 0 3.5rem; }
      .hero-subtitle { max-width: 100%; }

      /* SPLIT SECTION → empilée */
      .split-section { grid-template-columns: 1fr; }
      .split-photo {
        min-height: 300px;
        height: 300px;        /* hauteur fixe pour que l'image s'affiche */
        position: relative;
      }
      .split-photo img {
        position: absolute;
        inset: 0; width: 100%; height: 100%;
        object-fit: cover;
      }
      .split-photo-fade {
        background: linear-gradient(to bottom, transparent 50%, var(--ivoire) 100%);
      }
      .split-content { padding: 2.5rem 1.5rem; }

      /* PARENTS : encart photo réduit */
      .parents-photo-encart { height: 280px; margin-bottom: 2.5rem; }
      .photo-badge { left: 0; bottom: 0.75rem; }

      /* FORMULAIRE APPEL : padding réduit */
      .form-lm { padding: 1.8rem 1.5rem; }

      /* BANNIÈRE CONFÉRENCES : colonne */
      .lm-conf .d-flex.align-items-center { flex-direction: column; align-items: flex-start !important; gap: 1.2rem; }

      /* NAVBAR : dropdown plein-largeur propre */
      .navbar-collapse {
        background: var(--bleu);
        padding: 1rem 0 1.2rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        margin-top: 0;
      }
      .navbar-collapse .navbar-nav { padding: 0 1rem; gap: 0.2rem; }
      .ie-nav-link {
        padding: 0.6rem 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: block;
        width: 100%;
      }
      .navbar-collapse .ms-lg-3 { margin-top: 0.8rem; padding: 0 1rem; }
      .btn-nav-rdv { display: block; text-align: center; padding: 0.7rem 1rem; }

      /* PHOTO BADGE : pas de left négatif (sort du cadre sur mobile) */
      .photo-badge { left: 0 !important; }
    }

    /* ── Grand smartphone : ≤767px (Bootstrap md breakpoint) ── */
    @media (max-width: 767px) {

      /* Hero */
      .hero { min-height: 100svh; } /* svh = safe viewport height (iOS Safari) */
      .hero-content { padding: 4.5rem 0 3rem; }
      .hero-eyebrow { margin-bottom: 1.2rem; }

      /* Tags héros : retirer les séparateurs · visuellement trop denses */
      .hero-tag-sep { display: none; }
      .hero-tags { gap: 0.4rem; }

      /* Boutons héros empilés */
      .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
      }
      .btn-hero-primary,
      .btn-hero-secondary {
        justify-content: center;
        text-align: center;
        width: 100%;
      }

      /* Sections */
      .sec { padding: 3rem 0; }
      .lm-appel  { padding: 3rem 0; }
      .lm-conf   { padding: 3rem 0; }

      /* Formulaire appel */
      .form-lm { padding: 1.5rem 1.2rem; }
      .form-lm h3 { font-size: 1.2rem !important; }

      /* Appel bullets : texte plus petit */
      .appel-bullet-desc { font-size: 0.84rem; }

      /* Conférence cards : plein-largeur */
      .conf-card { margin-bottom: 0; }

      /* Déroulement steps */
      .step-item {
        grid-template-columns: 36px 1fr;
        gap: 0 0.9rem;
        padding: 1.5rem 0;
      }
      .step-num { font-size: 1.6rem; }

      /* FAQ : colonne unique, photo masquée */
      .faq-photo-wrap { height: 200px; }

      /* Parents encart */
      .parents-photo-encart { height: 240px; }

      /* CTA final : boutons empilés */
      .sec-sm .d-flex { flex-direction: column; align-items: center; }
      .sec-sm .btn-hero-primary,
      .sec-sm .btn-hero-secondary { width: 100%; max-width: 340px; justify-content: center; }

      /* Modal : plein écran sur petits mobiles */
      .modal-ie .modal-dialog { margin: 0.5rem; }
      .modal-ie .modal-body { padding: 1.5rem 1.2rem; }
      .modal-ie .modal-header { padding: 1.3rem 1.5rem; }
    }

    /* ── Smartphone standard : ≤575px (Bootstrap sm breakpoint) ── */
    @media (max-width: 575px) {

      /* Hero title */
      .hero-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
      .hero-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }

      /* Bandeau réassurance : 1 colonne */
      .band { padding: 1.2rem 0; }
      .band-item { font-size: 0.85rem; }

      /* Eyebrow */
      .eyebrow { font-size: 0.62rem; letter-spacing: 0.18em; }

      /* h2 sections */
      h2 { font-size: 1.6rem !important; }

      /* NAVBAR : brand plus petit pour éviter troncature */
      .ie-brand { font-size: 0.92rem; gap: 8px; }
      .ie-brand-divider, .ie-brand-sub { display: none; } /* libère espace brand sur ≤375px */

      /* Sections padding */
      .sec    { padding: 2.5rem 0; }
      .sec-sm { padding: 2rem 0; }
      .lm-appel, .lm-conf { padding: 2.5rem 0; }

      /* Formulaire : champs empilés, pas de row */
      .form-lm .row.g-3 > .col-sm-6 { flex: 0 0 100%; max-width: 100%; }

      /* Appel bullets */
      .appel-bullet { gap: 0.8rem; margin-bottom: 1.2rem; }
      .appel-bullet-icon { width: 34px; height: 34px; flex-shrink: 0; }

      /* Cards approche : 1 colonne */
      .card-ie { padding: 1.5rem 1.2rem; }

      /* Split photo hauteur réduite */
      .split-photo { height: 220px; min-height: 220px; }

      /* Steps */
      .step-item { grid-template-columns: 32px 1fr; gap: 0 0.75rem; }
      .step-num { font-size: 1.4rem; }
      .step-content h3 { font-size: 0.97rem; }
      .step-content p  { font-size: 0.9rem; }

      /* Pullquote */
      .pullquote { padding: 1.5rem 1.5rem 1.5rem 2rem; }
      .pullquote blockquote { font-size: 1.15rem; }

      /* Photo badge : recentré */
      .photo-badge { left: 0.5rem !important; bottom: 0.5rem; padding: 0.75rem 1rem; }
      .photo-badge-value { font-size: 1.2rem; }

      /* FAQ photo */
      .faq-photo-wrap { height: 160px; }

      /* Footer : texte plus petit */
      footer { padding: 3rem 0 2rem; font-size: 0.78rem; }
    }

    /* ── Très petit écran : ≤375px (iPhone SE, Android bas de gamme) ── */
    @media (max-width: 375px) {
      .hero-title { font-size: 1.85rem !important; }
      .btn-hero-primary, .btn-hero-secondary { font-size: 0.65rem; padding: 0.85rem 1.4rem; }
      .btn-form-submit { font-size: 0.65rem; padding: 0.85rem 1rem; letter-spacing: 0.1em; }
      .form-lm { padding: 1.2rem 1rem; }
      .conf-card-body { padding: 1.2rem; }
      .hero-content { padding: 4rem 0 2.5rem; }
    }

    /* ── Correctif iOS Safari : 100vh trop haut avec barre d'adresse ── */
    @supports (height: 100svh) {
      .hero { min-height: 100svh; }
    }

    /* ── Correctif tap highlight Android/iOS ── */
    a, button { -webkit-tap-highlight-color: transparent; }

    /* ── Éviter le zoom auto iOS sur les inputs (font-size ≥ 16px) ── */
    .form-lm .form-control,
    .form-lm .form-select {
      font-size: 16px; /* iOS ne zoome pas si ≥ 16px */
    }

  