/* =========================
   VARIABLES GLOBALES
========================= */
:root {
    --font-display: "Gambetta", serif;
    --font-script: "Kaushan Script", cursive;
    --font-body: "Outfit", sans-serif;

    --teal: oklch(0.58 0.10 215);
    --blue:oklch(0.54 0.11 217);
    --blue-soft: oklch(0.52 0.12 233 / 0.32);
    --coral: #de6a4d;
    --ink: oklch(0.24 0.02 250);
    --paper: oklch(0.985 0.004 230);
    --card: #fff;
    --line: oklch(0.90 0.01 235);
    --hairline: oklch(0.88 0.016 238);
    --muted: oklch(0.52 0.015 250);

    

    /* — ajouts footer — */
    --navy:#14324a;
    --coral-soft:#e98a72;
    --rose:#e87fa0;
    --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(9 13) rotate(18) scale(.5)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3Cpath transform='translate(18.5 6) rotate(-12) scale(.26)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3C/svg%3E");
}

/* ===== FOOTER ===== */
.ill-footer{position:relative;background:var(--navy);color:#fff;margin-top:70px;padding:0;font-family:var(--font-body)}
.ill-footer .container{max-width:1280px;margin:0 auto;padding:0 40px}

/* étincelle décorative au-dessus, à gauche */
.ill-footer .top-spark{position:absolute;top:46px;left:7%;width:30px;height:30px;background:var(--coral);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;opacity:.85}

/* zone haute : marque à gauche, panneau corail en absolute à droite */
.ill-footer .ftop{position:relative;display:flex;align-items:center;min-height:330px;padding:48px 0}

/* marque — centrée verticalement à gauche */
.ill-footer .fbrand{padding:8px 0}
.ill-footer .fbrand .logo{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.01em;display:flex;align-items:center;gap:.18em}
.ill-footer .fbrand .logo .spark{width:.46em;height:.46em;background:var(--coral);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;display:inline-block}
.ill-footer .fbrand .tag{font-family:var(--font-script);color:var(--coral-soft);font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1;margin:16px 0 0}

/* panneau corail — position absolute, débordant au-dessus et à droite */
.ill-footer .fpanel{position:absolute;top:-70px;right:0;width:64%;
  background:linear-gradient(125deg,var(--coral-soft) 0%,#eb95a4 100%);
  border-radius:22px;overflow:hidden;padding:48px 52px;min-height:300px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 34px 64px -34px rgba(8,30,40,.55)}
.ill-footer .fpanel-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.ill-footer .fcol h4{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);margin:0 0 16px}
.ill-footer .fcol a,.ill-footer .fcol p{display:block;color:#fff;text-decoration:none;font-size:1.18rem;line-height:1.55;margin:0 0 4px;font-weight:500}
.ill-footer .fcol a:hover{text-decoration:underline}
.ill-footer .socials{display:flex;gap:14px;margin-top:26px;grid-column:1 / -1}
.ill-footer .socials a{width:50px;height:50px;border-radius:50%;border:1.6px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;color:#fff}
.ill-footer .socials a:hover{background:#fff;color:var(--coral)}
.ill-footer .socials svg{width:21px;height:21px;fill:currentColor}

/* motif étincelles en filigrane à droite du panneau */
.ill-footer .fpanel .motif{position:absolute;inset:0 0 0 auto;width:42%;z-index:1;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff'%3E%3Cpath transform='translate(9 13) rotate(18) scale(.5)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3Cpath transform='translate(18.5 6) rotate(-12) scale(.26)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:66px 66px;-webkit-mask:linear-gradient(90deg,transparent,#000 48%);mask:linear-gradient(90deg,transparent,#000 48%)}

/* barre du bas — pleine largeur */
.ill-footer .fbar{border-top:1px solid rgba(255,255,255,.13);margin-top:54px}
.ill-footer .fbar-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;flex-wrap:wrap}
.ill-footer .fbar .copy{color:rgba(255,255,255,.7);font-size:1rem}
.ill-footer .fbar nav{display:flex;gap:40px;flex-wrap:wrap}
.ill-footer .fbar nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:1rem;transition:color .2s}
.ill-footer .fbar nav a:hover{color:#fff}

@media(max-width:880px){
  .ill-footer{margin-top:0;padding-top:48px}
  .ill-footer .ftop{flex-direction:column;align-items:stretch;gap:34px;min-height:0;padding:0 0 12px}
  .ill-footer .fbrand{text-align:center;display:flex;flex-direction:column;align-items:center}
  .ill-footer .fpanel{position:static;width:auto;padding:36px 30px;min-height:0}
  .ill-footer .fpanel-grid{grid-template-columns:1fr;gap:24px}
  .ill-footer .fpanel .motif{width:58%;opacity:.3}
  .ill-footer .fbar{margin-top:40px}
  .ill-footer .fbar-grid{flex-direction:column;text-align:center;gap:16px}
}

/* =========================
   HERO — FORME SYMPA
========================= */
.ll-forme {
    position: relative;
    width: 100%;
    height: 500px
}

.ll-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: url(#formeSympa);
    display: block
}

.ll-veil {
    position: absolute;
    inset: 0;
    background: #478da096;
    opacity: 0.38;
    clip-path: url(#formeSympa);
    pointer-events: none
}

.ll-sweep {
    position: absolute;
    inset: 0;
    clip-path: url(#formeSympa);
    overflow: hidden;
    pointer-events: none
}

.ll-beam,
.ll-halo {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen
}

.ll-beam {
    background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0.75px, transparent 1.3px);
    background-size: 6.5px 6.5px;
    -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 64%);
    mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 64%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24% 60%;
    mask-size: 24% 60%;
    animation: llPhareMask 20s ease-in-out infinite
}

.ll-halo {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 62%);
    background-repeat: no-repeat;
    background-size: 26% 54%;
    filter: blur(8px);
    animation: llPhareBg 20s ease-in-out infinite
}

@keyframes llPhareMask {
    0% { -webkit-mask-position: 6% 28%; mask-position: 6% 28% }
    20% { -webkit-mask-position: 92% 12%; mask-position: 92% 12% }
    40% { -webkit-mask-position: 96% 82%; mask-position: 96% 82% }
    62% { -webkit-mask-position: 58% 96%; mask-position: 58% 96% }
    80% { -webkit-mask-position: 8% 88%; mask-position: 8% 88% }
    100% { -webkit-mask-position: 6% 28%; mask-position: 6% 28% }
}

@keyframes llPhareBg {
    0% { background-position: 6% 28% }
    20% { background-position: 92% 12% }
    40% { background-position: 96% 82% }
    62% { background-position: 58% 96% }
    80% { background-position: 8% 88% }
    100% { background-position: 6% 28% }
}

@media (prefers-reduced-motion:reduce) {
    .ll-sweep { display: none }
}

.ll-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8%;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    pointer-events: none
}

.ll-caption h1 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.ll-brand { font-size: clamp(34px, 5vw, 62px) }
.ll-tag { font-size: clamp(15px, 1.9vw, 24px); font-weight: 500 }

/* === BOUTON RETOUR EN HAUT (avion en papier) — à droite === */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1070;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgba(31, 58, 82, .55);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s, box-shadow .25s;
}
.to-top:hover { background: var(--teal); transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(31, 58, 82, .6); }
.to-top:active { transform: translateY(-1px); }
.to-top svg { width: 24px; height: 24px; transform: rotate(-45deg) translate(1px, 1px); }
.to-top svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) {
    .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* =========================
   NOS PROGRAMMES — EN-TÊTE
========================= */
.programmes { padding: 100px 0 24px; position: relative; overflow: hidden; }
.programmes .container { position: relative; z-index: 2 }
.programmes .eyebrow {
    font-family: var(--font-script);
    color: var(--coral);
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    line-height: 1;
    margin: 0 0 10px;
}
.programmes .title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.7vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}
.programmes .title .nb { white-space: nowrap; }
.programmes .title-rule { width: 64px; height: 4px; border-radius: 4px; background: var(--coral); margin: 20px 0 0; }
.programmes .intro {
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.5;
    margin: 20px 0 0;
    max-width: 56ch;
    text-wrap: balance;
}

/* ============ FILTRES ============ */
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 44px; }
.filter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--blue-soft);
    border-radius: 999px;
    padding: 11px 20px 11px 17px;
    transition: color .2s, border-color .2s, box-shadow .2s;
}
.filter .ic { width: 19px; height: 19px; flex: none; color: var(--blue); opacity: .75; transition: opacity .2s; }
.filter:hover { border-color: var(--blue); }
.filter.active {
    color: oklch(1 0 0);
    font-weight: 600;
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
    background-color: var(--blue);
}
.active.filter .ic { color: #fff; }
.filter.active .ic { opacity: 1; }

/* ============ GRILLE ============ */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; }
.prog-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(31, 58, 82, .04);
    transition: transform .34s cubic-bezier(.2, .7, .2, 1), box-shadow .34s, border-color .34s;
}
.prog-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -26px rgba(31, 58, 82, .42); border-color: var(--line); }
.prog-card .media { position: relative; aspect-ratio: 4 / 2.2; overflow: hidden; }
.prog-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.prog-card:hover .media img { transform: scale(1.06); }
.prog-card .media .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 30, 40, .92) 0%, rgba(8, 30, 40, .62) 24%, rgba(8, 30, 40, .16) 52%, transparent 78%); }
.prog-card .media .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; }
.prog-card .kicker { font-family: var(--font-script); color: #fff; font-size: 1.32rem; line-height: 1.05; opacity: .95; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); margin-bottom: 1px; }
.prog-card .media h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
    text-wrap: balance;
}
.prog-card .body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 20px; }
.prog-card .tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    color: var(--blue);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 11px;
}
.prog-card .tag .ic { width: 16px; height: 16px; flex: none; }
.prog-card .desc { color: var(--muted); font-size: 0.97rem; line-height: 1.5; margin: 0; }
.prog-card .foot { margin-top: auto; }
.prog-card .flags { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 15px; margin-top: 16px; border-top: 1px solid var(--hairline); }
.prog-card .flag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.83rem; font-weight: 500; color: var(--ink); }
.prog-card .flag img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); display: block; }
.prog-card .more { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; font-size: 0.97rem; margin-top: 16px; }
.prog-card .more .arr { width: 19px; height: 19px; transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.prog-card:hover .more .arr { transform: translateX(6px); }

/* icônes duotone */
.programmes .ic .df { fill: currentColor; opacity: .15; stroke: none; }
.programmes .ic .ds { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.programmes .arr { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ====== SÉLECTEUR DE TYPOGRAPHIE — OUTIL DE PRÉVISUALISATION ======
   👉 À RETIRER EN PRODUCTION. */
.typo-switch { position: fixed; top: 18px; right: 18px; z-index: 1080; }
.typo-toggle {
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 16px; font-family: var(--font-body); font-size: .9rem; font-weight: 600;
    color: var(--ink); cursor: pointer; box-shadow: 0 8px 22px -12px rgba(31, 58, 82, .5);
}
.typo-toggle .aa { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.typo-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 264px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px;
    box-shadow: 0 26px 54px -20px rgba(0, 0, 0, .42); display: none; max-height: 74vh; overflow: auto;
}
.typo-panel.open { display: block; }
.typo-panel h4 { margin: 6px 8px 9px; font-family: var(--font-body); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.topt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
    text-align: left; background: transparent; border: 1.5px solid transparent; border-radius: 11px;
    padding: 9px 12px; cursor: pointer; color: var(--ink); transition: background .15s, border-color .15s;
}
.topt+.topt { margin-top: 2px; }
.topt:hover { background: oklch(0.96 0.005 240); }
.topt.active { border-color: var(--blue); background: oklch(0.97 0.012 233); }
.topt-name { font-size: 1.16rem; line-height: 1.1; }
.topt-script { font-size: 1.34rem; color: var(--coral); line-height: 1; white-space: nowrap; }

/* Icône étincelle */
.spark {
    display: inline-block;
    vertical-align: -0.1em;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.16em;
    background-color: var(--ink);
    -webkit-mask: var(--spark) center / contain no-repeat;
    mask: var(--spark) center / contain no-repeat;
}
.eyebrow .spark { background-color: var(--coral); }
/* ====== /OUTIL DE PRÉVISUALISATION ====== */

/* ===================== ÉTAPES — FRISE ANIMÉE ===================== */
.etapes{--blue:#007d98;--coral:#de6a4d;
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(9 13) rotate(18) scale(.5)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3Cpath transform='translate(18.5 6) rotate(-12) scale(.26)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3C/svg%3E");
  background:var(--blue);color:#fff;padding:100px 0;overflow:hidden;position:relative}
.etapes::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:
    radial-gradient(ellipse 640px 340px at 90% 22%, rgba(255,120,160,0.34) 0%, rgba(255,120,160,0.18) 35%, transparent 72%),
    radial-gradient(ellipse 600px 320px at 28% 86%, rgba(255,140,175,0.24) 0%, rgba(255,140,175,0.13) 35%, transparent 72%),
    radial-gradient(ellipse 460px 240px at 54% 50%, rgba(255,130,165,0.15) 0%, rgba(255,130,165,0.08) 35%, transparent 72%),
    radial-gradient(ellipse 420px 220px at 8% 30%, rgba(255,125,170,0.2) 0%, rgba(255,125,170,0.11) 35%, transparent 72%);
  pointer-events:none;z-index:0;filter:blur(60px);
  animation:auroraRose 22s ease-in-out infinite}
.etapes::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:
    radial-gradient(ellipse 520px 260px at 62% 14%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 35%, transparent 72%),
    radial-gradient(ellipse 620px 320px at 86% 84%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.13) 35%, transparent 72%),
    radial-gradient(ellipse 440px 230px at 14% 40%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.07) 35%, transparent 72%),
    radial-gradient(ellipse 480px 250px at 44% 92%, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.09) 35%, transparent 72%);
  pointer-events:none;z-index:0;filter:blur(60px);
  animation:auroraWhite 17s ease-in-out infinite}
.etapes > *{position:relative;z-index:2}
.etapes .container{position:relative;z-index:2;max-width:1240px}
.etapes .et-eyebrow{font-family:"Kaushan Script",cursive;font-size:2rem;line-height:1;margin:0 0 10px;opacity:.92}
.etapes .et-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.015em;margin:0;max-width:38ch;text-wrap:balance}
.etapes .et-title .spark{display:inline-block;width:.78em;height:.78em;margin-left:.12em;vertical-align:.1em;background:var(--coral);-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
.etapes .etp-tl{position:relative;margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.etapes .etp-rail{position:absolute;left:30px;right:30px;top:30px;height:2px;background:rgba(255,255,255,.4)}
.etapes .etp-rail::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.85);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.etapes .etp-tl.is-in .etp-rail::after{transform:scaleX(1)}
.etapes .etp-col{position:relative;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.etapes .etp-col.is-show{opacity:1;transform:none}
.etapes .etp-node{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Kaushan Script';font-weight:700;font-size:1.4rem;color:var(--blue);background:#fff;border:2px solid #fff;box-shadow:0 0 0 6px var(--blue),0 0 0 8px rgba(255,255,255,.35);position:relative;z-index:2}
.etapes .etp-col.key .etp-node{color:#fff;background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 6px var(--blue),0 0 0 8px rgba(222,106,77,.45)}
.etapes .etp-body{margin-top:30px}
.etapes .etp-k{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.66;margin:0 0 7px}
.etapes .etp-titre{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;min-height:2.5em}
.etapes .etp-titre .etp-ic{width:24px;height:24px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.etapes .etp-titre h3{font-family:"Playfair Display",serif;font-weight:700;font-size:1.24rem;line-height:1.16;letter-spacing:-.01em;margin:0}
.etapes .etp-col p{font-size:.96rem;line-height:1.56;margin:0 0 16px;opacity:.88;max-width:30ch}
.etapes .etp-more{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:.88rem;font-weight:600;color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:8px 16px;transition:background .2s,color .2s,border-color .2s}
.etapes .etp-more:hover{background:#fff;color:var(--blue);border-color:#fff}
@media(prefers-reduced-motion:reduce){
  .etapes .etp-col{opacity:1;transform:none;transition:none}
  .etapes .etp-rail::after{transform:scaleX(1);transition:none}
}
@media(max-width:880px){
  .etapes{padding:72px 0}
  .etapes .etp-tl{grid-template-columns:1fr;gap:0;margin-top:48px}
  .etapes .etp-rail{left:30px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .etapes .etp-col{display:grid;grid-template-columns:60px 1fr;gap:20px;padding-bottom:36px}
  .etapes .etp-col:last-child{padding-bottom:0}
  .etapes .etp-body{margin-top:0;padding-top:6px}
  .etapes .etp-col p{max-width:none}
}

/* ===================== ANIMATIONS AURORE — ROSE & BLANC CROISÉES ===================== */
@keyframes auroraRose{
  0%   {transform:translate(0,0) rotate(0deg) scale(0.9)}
  25%  {transform:translate(14%,-8%) rotate(10deg) scale(1.28)}
  50%  {transform:translate(-12%,6%) rotate(-9deg) scale(0.86)}
  75%  {transform:translate(10%,-5%) rotate(9deg) scale(1.32)}
  100% {transform:translate(0,0) rotate(0deg) scale(0.9)}
}
@keyframes auroraWhite{
  0%   {transform:translate(0,0) rotate(0deg) scale(1.1)}
  25%  {transform:translate(-14%,9%) rotate(-11deg) scale(0.82)}
  50%  {transform:translate(12%,-7%) rotate(10deg) scale(1.3)}
  75%  {transform:translate(-10%,6%) rotate(-8deg) scale(0.9)}
  100% {transform:translate(0,0) rotate(0deg) scale(1.1)}
}
@media (prefers-reduced-motion: reduce) {
    .prog-card, .prog-card .media img, .prog-card .more .arr, .filter, .topt { transition: none; }
}

/* =========================
   RÉUNION D'INFORMATION — moderne
========================= */
.reunion{padding:100px 0;position:relative}
.reunion .container{max-width:1240px;margin:0 auto;padding:0 40px}
.reunion .rn-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center}
.reunion .rn-visual{position:relative;isolation:isolate}
.reunion .rn-frame{position:relative;z-index:2;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(31,58,82,.45);aspect-ratio:4/3.4}
.reunion .rn-frame img{width:100%;height:100%;object-fit:cover;display:block}
.reunion .rn-visual::before{content:"";position:absolute;left:-30px;bottom:-30px;width:66%;height:72%;background:var(--coral);border-radius:26px;z-index:1;opacity:.18;transform:rotate(-5deg)}
.reunion .rn-visual::after{content:"";position:absolute;right:-22px;top:-22px;width:110px;height:110px;background:radial-gradient(circle, var(--blue) 0%, transparent 70%);opacity:.16;border-radius:50%;z-index:1}
.reunion .rn-badge{position:absolute;right:-22px;bottom:30px;z-index:3;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 22px 44px -20px rgba(31,58,82,.5)}
.reunion .rn-badge .dot{width:42px;height:42px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.reunion .rn-badge .dot svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reunion .rn-badge b{display:block;font-family:var(--font-display);font-size:1.12rem;line-height:1;color:var(--ink)}
.reunion .rn-badge span{font-size:.82rem;color:var(--muted)}
.reunion .eyebrow{font-family:var(--font-script);color:var(--coral);font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1;margin:0 0 10px}
.reunion .title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.7vw,2.4rem);line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
.reunion .title em{font-style:italic;color:inherit}
.reunion .title .t-spark{display:inline-block;width:.66em;height:.66em;margin-right:.18em;vertical-align:.06em;background:var(--ink);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
.reunion .intro{color:var(--muted);font-size:1.12rem;line-height:1.5;margin:20px 0 0;max-width:54ch;text-wrap:pretty}
.reunion .checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.reunion .checks li{display:flex;align-items:flex-start;gap:13px;font-size:1rem;line-height:1.45;color:var(--ink)}
.reunion .checks .ic{width:24px;height:24px;flex:none;border-radius:50%;background:color-mix(in oklab, var(--blue) 14%, white);display:flex;align-items:center;justify-content:center;margin-top:1px}
.reunion .checks .ic svg{width:14px;height:14px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.reunion .checks strong{font-weight:600}
.reunion .cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:999px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s;box-shadow:0 16px 30px -14px rgba(31,58,82,.6)}
.reunion .cta:hover{background:var(--teal);transform:translateY(-3px);box-shadow:0 22px 40px -16px rgba(31,58,82,.6)}
.reunion .cta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:880px){
  .reunion .rn-grid{grid-template-columns:1fr;gap:48px}
  .reunion .rn-visual{max-width:520px}
}

/* =========================
   PRÉSENTATION · TÉMOIGNAGES · FAQ · CONTACT
========================= */

.temoignages, .faq,  .eyebrow {

    font-size: 2.4rem!important;
   
}
 .faq p.eyebrow{
 color: var(--coral)!important;
 }
   
.presentation,.temoignages,.faq,.contactband{
  --spark2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(9 13) rotate(18) scale(.5)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3Cpath transform='translate(18.5 6) rotate(-12) scale(.26)' d='M0 -12c.9 8 3.1 11 12 12-8.9 1-11.1 4-12 12-.9-8-3.1-11-12-12 8.9-1 11.1-4 12-12Z'/%3E%3C/svg%3E");
}
.presentation .container,.temoignages .container,.faq .container,.contactband .container{max-width:1240px;margin:0 auto;padding:0 40px}
.presentation .eyebrow,.temoignages .eyebrow,.faq .eyebrow{font-family:var(--font-script);color:var(--coral);font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1;margin:0 0 10px;display:flex;align-items:center;gap:.3em}
.presentation .eyebrow .spark,.temoignages .eyebrow .spark,.faq .eyebrow .spark{width:.62em;height:.62em;background:var(--coral);-webkit-mask:var(--spark2) center/contain no-repeat;mask:var(--spark2) center/contain no-repeat;display:inline-block}
.presentation .h2,.temoignages .h2,.faq .h2,.contactband .h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.8vw,2.6rem);line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
.presentation .h2 .spark,.contactband .h2 .spark{display:inline-block;width:.6em;height:.6em;margin-right:.16em;vertical-align:.04em;background:var(--ink);-webkit-mask:var(--spark2) center/contain no-repeat;mask:var(--spark2) center/contain no-repeat}
.presentation{padding:104px 0}
.presentation .h2{color:#111}
.presentation .grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:70px;align-items:center}
.presentation .lead{font-size:1.18rem;line-height:1.55;color:var(--ink);margin:22px 0 16px;text-wrap:pretty}
.presentation .body p{color:var(--muted);font-size:1.02rem;line-height:1.62;margin:0 0 13px;max-width:58ch}
.presentation .body p strong{color:var(--ink);font-weight:600}
.presentation .sign{font-family:var(--font-script);color:var(--coral);font-size:1.7rem;line-height:1;margin:22px 0 0}
.presentation .visual{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center}
.presentation .pphoto{position:relative;z-index:2;width:min(380px,82%);aspect-ratio:1;border-radius:50%;overflow:hidden;background:color-mix(in oklab,var(--blue) 10%,white);box-shadow:0 30px 70px -32px rgba(31,58,82,.55);outline:8px solid #fff;outline-offset:0}
.presentation .pphoto img{width:100%;height:100%;object-fit:cover;display:block}
.presentation .pphoto .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,color-mix(in oklab,var(--blue) 16%,white),color-mix(in oklab,var(--coral) 12%,white));color:var(--muted);text-align:center;padding:0 24px}
.presentation .pphoto .ph .ic{font-size:2.4rem}
.presentation .badge{position:absolute;right:2%;bottom:6%;z-index:3;background:#fff;border-radius:16px;padding:13px 18px;box-shadow:0 22px 44px -20px rgba(31,58,82,.5);display:flex;align-items:center;gap:12px}
.presentation .badge .n{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--blue);line-height:1}
.presentation .badge .t{font-size:.82rem;color:var(--muted);max-width:12ch}
.temoignages{padding:104px 0;background:var(--blue);color:#fff;position:relative;overflow:hidden}
.temoignages .eyebrow{color:#fff}
.temoignages .eyebrow .spark{background:#fff}
.temoignages .h2{color:#fff}
.temoignages .head{max-width:62ch;margin-bottom:52px}
.temoignages .head p{color:rgba(255,255,255,.85);font-size:1.12rem;line-height:1.5;margin:16px 0 0}
.tslider{position:relative}
.tviewport{overflow:hidden}
.ttrack{display:flex;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.tslide{flex:0 0 100%;display:flex;justify-content:center;padding:8px 6px}
.tcard{background:#fff;color:var(--ink);border-radius:20px;padding:38px 40px;display:flex;flex-direction:column;box-shadow:0 30px 60px -40px rgba(8,30,40,.6);max-width:760px;width:100%}
.tcard .stars{display:flex;gap:3px;margin-bottom:18px;color:var(--coral)}
.tcard .stars svg{width:20px;height:20px;fill:currentColor}
.tcard .quote{font-family:var(--font-display);font-weight:600;font-size:1.42rem;line-height:1.38;letter-spacing:-.01em;margin:0 0 24px;text-wrap:pretty}
.tcard .who{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:20px;border-top:1px solid var(--hairline)}
.tcard .av{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;color:#fff;background:var(--blue);overflow:hidden}
.tcard .av img{width:100%;height:100%;object-fit:cover}
.tslide:nth-child(2) .av{background:var(--coral)}
.tslide:nth-child(3) .av{background:var(--teal)}
.tcard .who b{display:block;font-size:.98rem;font-weight:600}
.tcard .who span{font-size:.84rem;color:var(--muted)}
.tnav{position:absolute;top:calc(50% - 24px);transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:none;background:#fff;color:var(--blue);cursor:pointer;box-shadow:0 14px 30px -12px rgba(8,30,40,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.tnav:hover{background:var(--paper);transform:translateY(-50%) scale(1.06)}
.tnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tnav.prev{left:-16px}
.tnav.next{right:-16px}
.tdots{display:flex;gap:9px;justify-content:center;margin-top:34px}
.tdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:width .3s,background .3s}
.tdot.active{background:#fff;width:28px;border-radius:5px}
.faq{padding:104px 0}

.faq .grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:64px;align-items:start}
.faq .aside p{font-size:1.06rem;line-height:1.55;margin:18px 0 0;max-width:34ch}
.faq .aside .ask{display:inline-flex;align-items:center;gap:9px;margin-top:24px;color:var(--blue);font-weight:600;text-decoration:none;font-size:1rem}
.faq .aside .ask svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.faq .aside .ask:hover svg{transform:translateX(5px)}
.faq .list{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-family:var(--font-display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:22px;height:22px;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .3s,opacity .3s}
.faq summary .pm::before{top:10px;left:0;width:22px;height:2px}
.faq summary .pm::after{top:0;left:10px;width:2px;height:22px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--blue)}
.faq .ans{overflow:hidden;color:var(--muted);font-size:1.02rem;line-height:1.6;padding:0 4px 24px;max-width:62ch}
.contactband{padding:96px 0;background:#fff !important}
.contactband .inner{position:relative;overflow:hidden;border-radius:30px;background:var(--blue);color:#fff;padding:72px 64px;isolation:isolate}
.contactband .inner::before{content:"";position:absolute;right:-60px;top:-80px;width:360px;height:360px;background:var(--spark2);background-size:contain;background-repeat:no-repeat;opacity:.08;z-index:0}
.contactband .inner::after{content:"";position:absolute;left:-40px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:.3;z-index:0}
.contactband .row{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.contactband .h2 em{font-style:italic;color:#fff;opacity:.92}
.contactband .sub{color:rgba(255,255,255,.85);font-size:1.14rem;line-height:1.5;margin:16px 0 26px;max-width:46ch}
.contactband .meta{display:flex;flex-wrap:wrap;gap:10px 26px}
.contactband .meta a{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1rem;font-weight:500}
.contactband .meta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.contactband .cta-wrap{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.contactband .cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;white-space:nowrap;background:#fff;color:var(--blue);font-weight:700;font-size:1.02rem;padding:17px 26px;border-radius:999px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;box-shadow:0 18px 36px -16px rgba(0,0,0,.4)}
.contactband .cta:hover{transform:translateY(-3px);box-shadow:0 26px 46px -18px rgba(0,0,0,.45)}
.contactband .cta.ghost{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.5);box-shadow:none}
.contactband .cta.ghost:hover{background:rgba(255,255,255,.1)}
.contactband .cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .presentation .grid,.faq .grid,.contactband .row{grid-template-columns:1fr;gap:48px}
  .tcard{padding:30px 26px}
  .tcard .quote{font-size:1.2rem}
  .tnav.prev{left:-6px}
  .tnav.next{right:-6px}
  .contactband .inner{padding:48px 30px}
}