/*==================================================
EXTERN ISC
Feuille de style principale
Version 3.2 — corrigée et réorganisée

Sommaire
  1.  Variables
  2.  Reset / base
  3.  Typographie
  4.  Header
  5.  Hero
  6.  Pourquoi nous choisir
  7.  Formations phares
  8.  Partenaires
  9.  Footer
  10. Scroll reveal
  11. Responsive (du plus large au plus étroit)
  12. Accessibilité / prefers-reduced-motion

NOTE : toutes les media queries sont regroupées en section 11,
classées du plus large au plus étroit. Ne pas en ajouter ailleurs :
c'est ce qui cassait les breakpoints dans la version 3.1.
==================================================*/


/*==================================================
1. VARIABLES
==================================================*/

:root{
    --violet:#5B2A86;
    --violet-dark:#442063;
    --violet-light:#7D49A5;

    --rose:#D971B3;
    --bleu:#2A6DF4;

    --gris:#F6F7FB;
    --gris-fonce:#666666;

    --texte:#222222;
    --blanc:#FFFFFF;
    --rose-fond:#FDF1F7;

    --ombre:0 15px 45px rgba(0,0,0,.08);

    /* Hauteur du header fixe — utilisée par scroll-padding-top */
    --header-h:85px;
}


/*==================================================
2. RESET / BASE
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;

    /* Évite que les ancres passent sous le header fixe */
    scroll-padding-top:calc(var(--header-h) + 10px);
}

body{
    font-family:'Inter',sans-serif;
    color:var(--texte);
    background:var(--rose-fond);
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{
    width:100%;
}


/* Focus clavier visible sur tous les éléments interactifs */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
    outline:3px solid var(--rose);
    outline-offset:3px;
    border-radius:6px;
}


/*==================================================
3. TYPOGRAPHIE
==================================================*/

h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
}

h1{
    font-size:clamp(42px,5vw,68px);
    line-height:1.05;
}

h2{
    font-size:42px;
}

h3{
    font-size:22px;
}

p{
    line-height:1.8;
    color:#5E5E5E;
}


/*==================================================
4. HEADER
==================================================*/

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--header-h);

    background:#fff;

    display:grid;
    grid-template-columns:240px 1fr 240px;
    align-items:center;

    padding:0 45px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
    z-index:1000;

    transition:background .35s ease, box-shadow .35s ease;
}


/* État transparent : pendant la traversée du hero (piloté par JS) */

.site-header.transparent-hero{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 5px 25px rgba(0,0,0,.06);
}

.site-header.transparent-hero .logo span,
.site-header.transparent-hero .nav-item>a{
    color:var(--violet-dark);
}

.site-header.transparent-hero .nav-item>a:hover{
    color:var(--violet);
}

.site-header.transparent-hero .nav-item>a::after{
    background:var(--violet);
}


/*--------------------------------------------------
4.1 Logo
--------------------------------------------------*/

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    height:50px;
}

.logo span{
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    font-weight:700;
    color:var(--violet);
    transition:color .35s ease;
}


/*--------------------------------------------------
4.2 Menu
--------------------------------------------------*/

.main-nav{
    justify-self:center;
}

.main-nav>ul{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-item{
    position:relative;
}

.nav-item>a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--header-h);
    padding:0 5px;
    color:#444;
    font-weight:600;
    font-size:17px;
    transition:color .30s ease;
}

.nav-item>a:hover{
    color:var(--violet);
}

.nav-item>a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:22px;
    width:0;
    height:2px;
    background:var(--violet);
    transform:translateX(-50%);
    transition:width .30s ease;
}

.nav-item:hover>a::after{
    width:100%;
}


/*--------------------------------------------------
4.3 Sous-menu
--------------------------------------------------*/

.sub-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform-origin:top center;
    transform:translateX(-50%) translateY(30px) scale(.90);

    width:290px;
    padding:12px;

    background:white;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.10);

    display:flex;
    flex-direction:column;
    gap:6px;
    list-style:none;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.34,1.56,.64,1),
        visibility .45s;

    z-index:999;
}


/* Apparition : survol souris ET classe .is-open (JS, focus clavier inclus) */

.nav-item:hover .sub-menu,
.sub-menu.is-open{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(8px) scale(1);
}


/* Chaque ligne glisse depuis la gauche avec un léger rebond */

.sub-menu li{
    width:100%;
    margin:4px 0;
    opacity:0;
    transform:translateX(-26px);
    transition:
        opacity .35s ease,
        transform .40s cubic-bezier(.34,1.56,.64,1);
}

.sub-menu.is-open li{
    opacity:1;
    transform:translateX(0);
}


/* Filet de sécurité : fonctionne même si le JS ne se charge pas */

.nav-item:hover .sub-menu li{
    opacity:1;
    transform:translateX(0);
}

.sub-menu li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    padding:14px 18px;
    border-radius:10px;
    color:#444;
    font-size:15px;
    font-weight:500;
    transition:background .25s ease, color .25s ease, padding .25s ease;
}


/* Flèche qui glisse à l'entrée au survol du lien */

.sub-menu li a .arrow{
    width:16px;
    height:16px;
    flex-shrink:0;
    opacity:0;
    transform:translateX(-8px);
    transition:opacity .25s ease, transform .25s ease;
}

.sub-menu li a:hover{
    background:linear-gradient(135deg,var(--violet),var(--violet-light));
    color:white;
    padding-left:24px;
}

.sub-menu li a:hover .arrow{
    opacity:1;
    transform:translateX(0);
}


/*--------------------------------------------------
4.4 Réseaux sociaux (haut droite)
--------------------------------------------------*/

.header-social{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.header-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(91,42,134,.06);
    border:1px solid rgba(91,42,134,.14);
    color:var(--violet-dark);
    transition:
        background .30s ease,
        border-color .30s ease,
        color .30s ease,
        transform .30s ease;
}

.header-social svg{
    width:17px;
    height:17px;
}

.header-social a:hover{
    background:var(--violet);
    border-color:transparent;
    color:#fff;
    transform:translateY(-2px);
}

.js-share.is-copied{
    background:#2FA36B !important;
    border-color:transparent !important;
    color:#fff !important;
}


/* Sur le hero transparent : fond assez opaque pour rester lisible sur la photo */

.site-header.transparent-hero .header-social a{
    background:rgba(255,255,255,.85);
    border-color:rgba(91,42,134,.16);
    color:var(--violet-dark);
}

.site-header.transparent-hero .header-social a:hover{
    background:var(--violet);
    border-color:transparent;
    color:#fff;
}


/*--------------------------------------------------
4.5 État sombre (traversée de « Nos formations phares »)
--------------------------------------------------*/

.site-header.header-on-dark{
    background:#40334F;
    box-shadow:0 10px 35px rgba(0,0,0,.22);
}

.site-header.header-on-dark .logo span,
.site-header.header-on-dark .nav-item>a{
    color:#fff;
}

.site-header.header-on-dark .nav-item>a:hover{
    color:#C9A9F0;
}

.site-header.header-on-dark .nav-item>a::after{
    background:#C9A9F0;
}

.site-header.header-on-dark .header-social a{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
    color:#fff;
}

.site-header.header-on-dark .header-social a:hover{
    background:var(--violet-light);
    border-color:transparent;
    color:#fff;
}


/*==================================================
5. HERO
==================================================*/

/*--------------------------------------------------
5.1 Structure
--------------------------------------------------*/

.hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:78vh;
    padding:100px 70px 60px;
    overflow:hidden;
    color:white;
}


/* Image de fond */

.hero-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    will-change:transform;
}


/* Voile dégradé */

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
        120deg,
        rgba(25,18,45,.90) 0%,
        rgba(63,35,103,.75) 45%,
        rgba(91,42,134,.50) 100%
    );
}


/* Halo lumineux */

.hero::after{
    content:"";
    position:absolute;
    z-index:2;
    width:600px;
    height:600px;
    right:-180px;
    top:-160px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(217,113,179,.18),
        transparent 70%
    );
}


/* Halo qui suit la souris (--mx / --my mis à jour en JS) */

.hero-glow{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(
        420px circle at var(--mx,50%) var(--my,50%),
        rgba(217,113,179,.35),
        transparent 60%
    );
    transition:opacity .4s ease;
}

.hero:hover .hero-glow{
    opacity:1;
}


/* Contenu */

.hero-content{
    position:relative;
    z-index:5;
    max-width:700px;
}

.eyebrow{
    display:inline-block;
    margin-bottom:20px;
    padding:8px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:white;
}

.hero h1{
    color:white;
    font-size:clamp(34px,4vw,56px);
    line-height:1.1;
    margin-bottom:22px;
}

.hero p{
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.90);
    max-width:620px;
    margin-bottom:35px;
}


/*--------------------------------------------------
5.2 Boutons
--------------------------------------------------*/

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:10px;
    color:white;
    font-weight:600;
    transition:background .35s ease, color .35s ease, transform .35s ease;
}

.btn-primary{
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(125,73,165,.45),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(217,113,179,.20),
            transparent 35%
        ),
        var(--violet);

    box-shadow:0 10px 25px rgba(91,42,134,.35);
}

.btn-primary:hover{
    background:var(--violet-dark);
    transform:translateY(-4px);
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.70);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.btn-secondary:hover{
    background:white;
    color:var(--violet);
    transform:translateY(-4px);
}


/* Ripple au clic (élément injecté par le JS) */

.ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transform:scale(0);
    animation:rippleAnim .6s ease-out;
    pointer-events:none;
}

@keyframes rippleAnim{
    to{
        transform:scale(2.6);
        opacity:0;
    }
}


/*--------------------------------------------------
5.3 Animations d'entrée
--------------------------------------------------*/

.hero-content>*{
    opacity:0;
    transform:translateY(25px);
    animation:fadeHero .8s forwards;
}

.hero-content .eyebrow{ animation-delay:.15s; }
.hero-content h1{ animation-delay:.35s; }
.hero-content p{ animation-delay:.55s; }
.hero-content .hero-buttons{ animation-delay:.75s; }

@keyframes fadeHero{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/*==================================================
6. POURQUOI NOUS CHOISIR
==================================================*/

/*--------------------------------------------------
6.1 Section
--------------------------------------------------*/

.why-section{
    padding:110px 70px;
    background:var(--rose-fond);
}

.why-section .container{
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:70px;
    align-items:stretch;
}

.section-tag{
    display:inline-block;
    padding:7px 18px;
    margin-bottom:18px;
    border-radius:30px;
    background:#F0E1F9;
    color:var(--violet);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1.5px;
}

.why-left h2{
    margin-bottom:22px;
}

.why-left h2 span{
    color:var(--violet);
}

.why-left p.intro{
    max-width:520px;
    margin-bottom:44px;
}


/*--------------------------------------------------
6.2 Cartes
--------------------------------------------------*/

.cards-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    max-width:720px;
    margin-left:0;
    margin-right:auto;
}


/* Image pointillée en arrière-plan */

.cards-grid::before{
    content:"";
    position:absolute;
    top:-100px;
    left:-65px;
    width:calc(100% + 80px);
    height:calc(100% + 50px);
    z-index:0;
    pointer-events:none;

    background-image:url("../images/image-animer/pointillee.png");
    background-repeat:no-repeat;
    background-position:left center;
    background-size:520px auto;

    opacity:.55;
    animation:pointilleeMove 8s linear infinite;
}

@keyframes pointilleeMove{
    0%  { transform:translateX(-35px); }
    50% { transform:translateX(35px); }
    100%{ transform:translateX(-35px); }
}

.why-card{
    position:relative;
    z-index:1;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:22px 18px;
    min-height:190px;

    background:white;
    border:1.5px dashed #D9BFEE;
    border-radius:18px;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .30s ease,
        box-shadow .30s ease;
}

.why-card:hover{
    background:linear-gradient(135deg,var(--violet),var(--violet-light));
    border-color:transparent;
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(91,42,134,.35);
}


/* Icône géante décorative révélée au survol */

.card-bg-icon{
    position:absolute;
    top:-22px;
    right:-22px;
    z-index:0;
    width:150px;
    height:150px;
    color:white;
    opacity:0;
    transform:scale(.75) rotate(-10deg);
    transition:opacity .40s ease, transform .40s ease;
    pointer-events:none;
}

.card-bg-icon svg{
    width:100%;
    height:100%;
}

.why-card:hover .card-bg-icon{
    opacity:.18;
    transform:scale(1) rotate(-10deg);
}


/* Spot lumineux qui suit la souris (--mx / --my mis à jour en JS) */

.why-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(
        200px circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,.30),
        transparent 70%
    );
    transition:opacity .35s ease;
}

.why-card:hover::after{
    opacity:1;
}


/* Contenu au-dessus des décorations */

.icon-box,
.why-card h3,
.why-card p,
.why-card .counter{
    position:relative;
    z-index:2;
}

.icon-box{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:18px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--violet),var(--violet-light));
    box-shadow:0 10px 20px rgba(91,42,134,.25);
    transition:background .35s ease;
}

.why-card:hover .icon-box{
    background:white;
}

.icon-box svg{
    width:24px;
    height:24px;
    color:white;
    transition:color .35s ease, transform .3s ease;
}

.why-card:hover .icon-box svg{
    color:var(--violet);
}

.why-card h3{
    margin-bottom:8px;
    font-size:18px;
    transition:color .35s ease;
}

.why-card:hover h3{
    color:white;
}

.why-card p{
    font-size:14.5px;
    line-height:1.6;
    margin:0;
    transition:color .35s ease;
}

.why-card:hover p{
    color:rgba(255,255,255,.90);
}


/* Compteur chiffré */

.counter{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:20px;
    color:var(--violet);
    transition:color .35s ease;
}

.why-card:hover .counter{
    color:white;
}


/* Impulsion d'icône (classe ajoutée par le JS) */

.icon-pulse{
    animation:iconPulse .5s ease;
}

@keyframes iconPulse{
    0%  { transform:scale(1) rotate(0); }
    50% { transform:scale(1.15) rotate(8deg); }
    100%{ transform:scale(1) rotate(0); }
}


/*--------------------------------------------------
6.3 Illustration
--------------------------------------------------*/

.why-right{
    position:relative;
    display:flex;
    align-items:stretch;
    justify-content:center;
}

.why-right::before{
    content:"";
    position:absolute;
    z-index:0;
    width:220px;
    height:220px;
    top:-50px;
    right:0;
    border-radius:50%;
    background:radial-gradient(circle,rgba(217,113,179,.28),transparent 70%);
}

.illustration-card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:440px;
    border-radius:0;
    overflow:hidden;
    box-shadow:var(--ombre);
    will-change:transform;
    transition:transform .35s ease, box-shadow .35s ease;
}

.illustration-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* Tilt / suivi souris (piloté par le JS) */

.tilt-card{
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .15s ease-out, box-shadow .3s ease;
}


/*==================================================
7. FORMATIONS PHARES
==================================================*/

/*--------------------------------------------------
7.1 Section + décor dynamique au scroll
--------------------------------------------------*/

.formations-vedettes{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:110px 70px 70px;
    background:var(--rose-fond);

    /* Intensité du fond sombre, pilotée par le JS (0 → 1) */
    --formations-darkness:0;

    transition:background-color .8s cubic-bezier(.22,1,.36,1);
}


/* Fond sombre — violet profond mais lumineux */

.formations-vedettes::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(137,104,190,.38),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(217,113,179,.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 35%,
            rgba(157,126,205,.18),
            transparent 55%
        ),
        #40334F;

    opacity:var(--formations-darkness);
    transition:opacity .8s cubic-bezier(.22,1,.36,1);
}


/* Lumière supplémentaire */

.formations-vedettes::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:radial-gradient(
        ellipse at 50% 0%,
        rgba(255,255,255,.12),
        transparent 48%
    );

    opacity:var(--formations-darkness);
    transition:opacity .9s cubic-bezier(.22,1,.36,1);
}


/* En-tête */

.formations-header{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.formations-header h2{
    margin-bottom:18px;
    font-size:clamp(34px,4vw,48px);
    line-height:1.15;
}

.formations-header h2 span{
    color:var(--violet);
}

.formations-header p{
    max-width:650px;
    margin:0 auto;
    font-size:16px;
    line-height:1.8;
}

.formations-vedettes .formations-header h2,
.formations-vedettes .formations-header p{
    transition:color .7s ease;
}


/* Texte lisible sur le fond sombre */

.formations-vedettes.formations-dark .formations-header h2{
    color:white;
}

.formations-vedettes.formations-dark .formations-header p{
    color:rgba(255,255,255,.78);
}


/* Le mot accentué du titre : le violet devient illisible sur #40334F */

.formations-vedettes.formations-dark .formations-header h2 span{
    color:#C9A9F0;
}


/* Grille */

.cartes-formations{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/*--------------------------------------------------
7.2 Cartes
--------------------------------------------------*/

.carte-formation{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;

    background:var(--blanc);
    border:1px solid rgba(91,42,134,.10);
    border-radius:22px;
    box-shadow:0 15px 45px rgba(0,0,0,.07);

    will-change:transform;

    transition:
        box-shadow .35s ease,
        border-color .35s ease;
}

.carte-formation:hover{
    border-color:rgba(91,42,134,.25);
    box-shadow:0 25px 60px rgba(91,42,134,.18);
}


/* Image */

.carte-image{
    position:relative;
    width:100%;
    aspect-ratio:3 / 2;
    overflow:hidden;
    background:#eee;
}

.carte-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.16,.8,.24,1);
}

.carte-formation:hover .carte-image img{
    transform:scale(1.045);
}


/* Contenu */

.carte-contenu{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:27px 28px 30px;
}

.badge-niveau{
    align-self:flex-start;
    margin-bottom:12px;
    color:var(--violet);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.carte-contenu h3{
    margin-bottom:12px;
    color:var(--texte);
    font-size:23px;
    line-height:1.25;
}

.carte-contenu h3 span{
    display:block;
    color:var(--violet);
}

.carte-contenu p{
    margin-bottom:25px;
    color:var(--gris-fonce);
    font-size:14.5px;
    line-height:1.7;
}


/* Flèche décorative — état initial (manquait en v3.1) */

.formation-arrow{
    opacity:0;
    transform:translateX(-8px);
    transition:opacity .25s ease, transform .30s ease;
}

.carte-formation:hover .formation-arrow{
    opacity:1;
    transform:translateX(0);
}


/*--------------------------------------------------
7.3 Couleurs par formation
--------------------------------------------------*/

.formation-violet{
    --formation-color:#5B2A86;
    --formation-color-light:#7D49A5;
}

.formation-bleu{
    --formation-color:var(--bleu);
    --formation-color-light:#4F86F7;
}

.formation-rose{
    --formation-color:var(--rose);
    --formation-color-light:#E58FC4;
}

.carte-formation .badge-niveau .niveau,
.carte-formation .badge-niveau .duree{
    color:var(--formation-color);
}

.carte-formation h3 span{
    color:var(--formation-color);
}


/* Lien « Découvrir la formation » */

.carte-formation .lire-plus{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:auto;
    color:var(--formation-color);
    font-weight:600;
    transition:color .30s ease, gap .30s ease;
}

.carte-formation .lire-plus::after{
    content:"";
    width:7px;
    height:7px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:rotate(45deg) translateX(-3px);
    opacity:0;
    transition:opacity .25s ease, transform .30s ease;
}

.carte-formation:hover .lire-plus{
    color:var(--formation-color-light);
    gap:11px;
}

.carte-formation:hover .lire-plus::after{
    opacity:1;
    transform:rotate(45deg) translateX(2px);
}


/*==================================================
8. PARTENAIRES
==================================================*/

.partenaires-section{
    position:relative;
    width:100%;
    margin:0;
    padding:40px 0 0;
    background:var(--rose-fond);
    overflow:hidden;
}


/*--------------------------------------------------
8.1 Titre
--------------------------------------------------*/

.partenaires-header{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:850px;
    margin:0 auto 20px;
    padding:0 20px;
}

.partenaires-header .section-tag{
    margin-bottom:14px;
}

.partenaires-header h2{
    margin-bottom:12px;
    font-size:clamp(30px,3.5vw,46px);
    line-height:1.15;
}

.partenaires-header h2 span{
    color:var(--violet);
}

.partenaires-header p{
    max-width:680px;
    margin:0 auto;
    font-size:16px;
    line-height:1.7;
}


/*--------------------------------------------------
8.2 Bloc mauve / lavande + fondu des bords
--------------------------------------------------*/

.partenaires-card{
    position:relative;
    width:100%;
    margin:0;
    padding:35px 40px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(255,255,255,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(225,215,245,.20),
            transparent 55%
        ),
        linear-gradient(
            120deg,
            #7656A3 0%,
            #8068AA 30%,
            #927DB8 55%,
            #A99AC8 75%,
            #8570AE 100%
        );

    /* Fondu des bords du carrousel */
    -webkit-mask-image:linear-gradient(
        90deg,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
    );
    mask-image:linear-gradient(
        90deg,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}


/*--------------------------------------------------
8.3 Décorations lumineuses
--------------------------------------------------*/

.partenaires-card::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    right:-280px;
    top:-430px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 0 80px rgba(255,255,255,.10);
    pointer-events:none;
}

.partenaires-card::after{
    content:"";
    position:absolute;
    left:45px;
    top:35px;
    width:190px;
    height:150px;
    opacity:.30;
    pointer-events:none;

    background-image:radial-gradient(
        circle,
        rgba(255,255,255,.75) 1.5px,
        transparent 1.5px
    );
    background-size:14px 14px;
}


/*--------------------------------------------------
8.4 Pistes et groupes
--------------------------------------------------*/

.partenaires-track{
    position:relative;
    z-index:5;
    display:flex;
    width:max-content;
    gap:0;
    will-change:transform;
}

.partenaires-groupe{
    display:flex;
    align-items:stretch;
    flex-shrink:0;
    gap:0;
    padding:0;
    margin:0;
}


/*--------------------------------------------------
8.5 Cases collées
--------------------------------------------------*/

.partenaire-logo{
    position:relative;
    flex:0 0 180px;
    width:180px;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.75);
    border-right:0;
    border-radius:0;
    overflow:visible;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}

.partenaires-groupe .partenaire-logo:last-child{
    border-right:1px solid rgba(255,255,255,.75);
}


/*--------------------------------------------------
8.6 Logos
--------------------------------------------------*/

.partenaire-logo img{
    position:relative;
    z-index:4;
    display:block;

    width:125px;
    height:92px;
    max-width:125px;
    max-height:92px;
    padding:12px;

    object-fit:contain;
    background:#FFFFFF;
    border:1px solid rgba(255,255,255,.95);
    border-radius:9px;
    box-shadow:0 8px 25px rgba(45,15,80,.15);

    transform-origin:center center;

    transition:
        transform .45s cubic-bezier(.16,.8,.24,1),
        box-shadow .45s ease,
        border-color .35s ease;
}


/*--------------------------------------------------
8.7 Halo au survol
--------------------------------------------------*/

.partenaire-logo::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:220px;
    height:220px;
    z-index:2;
    pointer-events:none;

    transform:translate(-50%,-50%) scale(.35);
    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.95) 8%,
        rgba(255,255,255,.70) 20%,
        rgba(255,255,255,.42) 35%,
        rgba(245,220,255,.22) 50%,
        transparent 72%
    );

    filter:blur(12px);
    opacity:0;

    transition:
        opacity .40s ease,
        transform .55s cubic-bezier(.16,.8,.24,1);
}

.partenaire-logo::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,.20),
        transparent 65%
    );
    transition:opacity .35s ease;
}


/*--------------------------------------------------
8.8 Survol
--------------------------------------------------*/

.partenaire-logo:hover{
    z-index:50;
    background:transparent;
    border-color:transparent;
}

.partenaire-logo:hover img{
    transform:scale(1.32);
    border-color:transparent;
    background:#FFFFFF;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.35),
        0 0 20px rgba(255,255,255,.95),
        0 0 45px rgba(255,255,255,.75),
        0 0 85px rgba(255,255,255,.40),
        0 18px 40px rgba(55,15,90,.28);
}

.partenaire-logo:hover::before{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.partenaire-logo:hover::after{
    opacity:1;
}


/*--------------------------------------------------
8.9 Défilement

Le défilement ne s'arrête JAMAIS, y compris au survol
d'un logo : pas de animation-play-state ici.

-33.333333 % suppose exactement TROIS groupes identiques
par piste. Ajouter ou retirer un groupe casse la boucle.
--------------------------------------------------*/

.partenaires-ligne-1{
    margin:0;
    padding:0;
    animation:partenairesVersDroite 35s linear infinite;
}

.partenaires-ligne-2{
    margin:0;
    padding:0;
    animation:partenairesVersGauche 35s linear infinite;
}

@keyframes partenairesVersDroite{
    from{ transform:translateX(-33.333333%); }
    to  { transform:translateX(0); }
}

@keyframes partenairesVersGauche{
    from{ transform:translateX(0); }
    to  { transform:translateX(-33.333333%); }
}


/*==================================================
9. FOOTER
==================================================*/

.site-footer{
    position:relative;
    padding:70px 70px 0;
    background:var(--violet-dark);
    color:white;
    overflow:hidden;
}


/* Halos décoratifs */

.site-footer::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    left:-180px;
    bottom:-220px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(217,113,179,.25),
        transparent 70%
    );
    pointer-events:none;
}

.site-footer::after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-240px;
    top:-300px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(125,73,165,.35),
        transparent 70%
    );
    pointer-events:none;
}


/*--------------------------------------------------
9.1 Grille principale
--------------------------------------------------*/

.footer-top{
    position:relative;
    z-index:1;
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:55px;
    padding-bottom:55px;
}


/*--------------------------------------------------
9.2 Colonne marque
--------------------------------------------------*/

.footer-logo{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.footer-logo img{
    height:46px;
    width:auto;
}

.footer-logo span{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;
    font-weight:700;
    color:white;
}

.footer-brand p{
    max-width:330px;
    margin-bottom:22px;
    color:rgba(255,255,255,.70);
    font-size:14.5px;
    line-height:1.75;
}


/* Mention réglementaire */

.footer-mention{
    display:inline-block;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:8px;
    color:rgba(255,255,255,.60);
    font-size:12px;
    line-height:1.5;
}


/*--------------------------------------------------
9.3 Colonnes de liens
--------------------------------------------------*/

.footer-col h4{
    margin-bottom:22px;
    color:white;
    font-family:'Space Grotesk',sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.footer-col ul{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.footer-col a{
    display:inline-block;
    color:rgba(255,255,255,.72);
    font-size:14.5px;
    line-height:1.5;
    transition:color .28s ease, transform .28s ease;
}

.footer-col a:hover{
    color:white;
    transform:translateX(5px);
}


/*--------------------------------------------------
9.4 Coordonnées
--------------------------------------------------*/

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:rgba(255,255,255,.72);
    font-size:14.5px;
    line-height:1.6;
}

.footer-contact svg{
    flex-shrink:0;
    width:17px;
    height:17px;
    margin-top:2px;
    color:var(--rose);
}

.footer-contact a{
    color:rgba(255,255,255,.72);
    transition:color .28s ease;
}

.footer-contact a:hover{
    color:white;
}

.footer-contact strong{
    color:white;
    font-weight:600;
}


/* Réseaux sociaux */

.footer-social{
    display:flex;
    gap:11px;
    margin-top:24px;
}

.footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    color:white;
    transition:
        background .30s ease,
        border-color .30s ease,
        transform .30s ease;
}

.footer-social svg{
    width:18px;
    height:18px;
}

.footer-social a:hover{
    background:var(--violet);
    border-color:transparent;
    transform:translateY(-3px);
}


/*--------------------------------------------------
9.5 Barre légale
--------------------------------------------------*/

.footer-legal{
    position:relative;
    z-index:1;
    max-width:1300px;
    margin:0 auto;
    padding:22px 0 26px;
    border-top:1px solid rgba(255,255,255,.12);

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
}

.footer-legal p{
    margin:0;
    color:rgba(255,255,255,.60);
    font-size:13.5px;
    line-height:1.6;
}

.footer-legal ul{
    display:flex;
    flex-wrap:wrap;
    gap:26px;
}

.footer-legal a{
    color:rgba(255,255,255,.60);
    font-size:13.5px;
    transition:color .28s ease;
}

.footer-legal a:hover{
    color:white;
}


/*==================================================
10. SCROLL REVEAL
   Une seule déclaration (elle était écrite 3 fois en v3.1,
   ce qui supprimait la transition du flou).
==================================================*/

.reveal{
    opacity:0;
    transform:translate3d(0,55px,0);
    filter:blur(5px);

    transition:
        opacity .85s ease-out,
        transform .85s cubic-bezier(.22,1,.36,1),
        filter .85s ease-out;

    will-change:opacity, transform;
}

.reveal.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
}


/* Variantes par type d'élément */

.section-tag.reveal{
    transform:translate3d(0,25px,0);
}

.intro.reveal{
    transform:translate3d(0,30px,0);
}

.why-card.reveal{
    transform:translate3d(0,50px,0) scale(.98);
}

.carte-formation.reveal{
    transform:translate3d(0,60px,0) scale(.97);
}

.why-card.reveal,
.carte-formation.reveal{
    transition:
        opacity .9s ease-out,
        transform .9s cubic-bezier(.22,1,.36,1),
        filter .9s ease-out;
}

.why-right.reveal{
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(.22,1,.36,1),
        filter 1s ease-out;
}

.section-tag.reveal.is-visible,
.intro.reveal.is-visible{
    transform:translate3d(0,0,0);
}

.why-card.reveal.is-visible,
.carte-formation.reveal.is-visible{
    transform:translate3d(0,0,0) scale(1);
}


/*==================================================
11. RESPONSIVE
   Ordre décroissant obligatoire : à spécificité égale,
   c'est la dernière règle qui gagne.
==================================================*/

/*--------------------------------------------------
11.1 ≤ 1050px — large tablette
--------------------------------------------------*/

@media (max-width:1050px){

    .hero{
        padding:100px 40px 60px;
    }

    .why-section{
        padding:90px 40px;
    }

    .formations-vedettes{
        padding:95px 40px 105px;
    }

    .cartes-formations{
        grid-template-columns:repeat(2,1fr);
    }

}


/*--------------------------------------------------
11.2 ≤ 900px — tablette
--------------------------------------------------*/

@media (max-width:900px){

    /* Header compact */
    .site-header{
        grid-template-columns:auto 1fr;
        padding:0 20px;
    }

    .header-social{
        display:none;
    }

    .main-nav>ul{
        gap:24px;
    }

    .nav-item>a{
        font-size:15px;
    }

    .logo span{
        font-size:19px;
    }

    /* Section « Pourquoi » sur une colonne */
    .why-section .container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .why-right{
        order:-1;
        margin-bottom:20px;
    }

    .cards-grid{
        grid-template-columns:1fr 1fr;
        max-width:none;
    }

    /* Footer : marque en pleine largeur, colonnes en dessous */
    .site-footer{
        padding:55px 40px 0;
    }

    .footer-top{
        grid-template-columns:repeat(3,1fr);
        gap:40px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

    .footer-brand p{
        max-width:520px;
    }

}


/*--------------------------------------------------
11.3 ≤ 700px — mobile large
--------------------------------------------------*/

@media (max-width:700px){

    .hero{
        padding:120px 22px 60px;
        min-height:auto;
    }

    .why-section{
        padding:70px 22px;
    }

    .formations-vedettes{
        padding:80px 20px 90px;
    }

    .formations-header{
        margin-bottom:40px;
    }

    .cartes-formations{
        grid-template-columns:1fr;
        max-width:520px;
    }

    .partenaires-section{
        padding-top:50px;
    }

    .partenaires-card{
        padding:45px 20px;
    }

    .partenaire-logo{
        flex-basis:135px;
        width:135px;
        height:115px;
    }

    .partenaire-logo img{
        width:100px;
        height:72px;
        max-width:100px;
        max-height:72px;
        padding:8px;
    }

    .site-footer{
        padding:45px 22px 0;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:34px;
        padding-bottom:40px;
    }

    .footer-legal{
        justify-content:flex-start;
    }

    /* Animations d'apparition plus discrètes */
    .reveal{
        transform:translate3d(0,35px,0);
    }

    .carte-formation.reveal{
        transform:translate3d(0,40px,0) scale(.98);
    }

}


/*--------------------------------------------------
11.4 ≤ 520px — mobile
--------------------------------------------------*/

@media (max-width:520px){

    .cards-grid{
        grid-template-columns:1fr;
    }

    .cards-grid::before{
        display:none;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:32px;
    }

    .footer-legal ul{
        gap:18px;
    }

}


/*--------------------------------------------------
11.5 ≤ 480px — petit mobile
--------------------------------------------------*/

@media (max-width:480px){

    h2{
        font-size:32px;
    }

    .formations-header h2{
        font-size:34px;
    }

    .carte-contenu{
        padding:24px 22px 27px;
    }

    .carte-contenu h3{
        font-size:21px;
    }

}


/*==================================================
12. ACCESSIBILITÉ — PREFERS-REDUCED-MOTION
   Coupe aussi les animations infinies (carrousel
   partenaires, pointillés), oubliées en v3.1.
==================================================*/

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    html{
        scroll-behavior:auto;
    }

    .reveal,
    .reveal.is-visible,
    .hero-content>*,
    .hero-buttons{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }

    .partenaires-ligne-1,
    .partenaires-ligne-2,
    .cards-grid::before{
        animation:none !important;
    }

}