/*=====================================================
   1. GLOBAL / ÉLÉMENTS COMMUNS
   =====================================================*/

:root {
    --couleur-violette: rgb(168, 144, 192);
    --couleur-rose: rgb(226, 171, 186);
    --couleur-verte: rgb(152, 199, 191);
    --couleur-jaune: rgb(205, 174, 74);
    --fond-violet: rgb(240, 227, 243);
    --fond-rose: rgb(252, 232, 236);
    --fond-vert: rgb(231, 241, 235);
    --fond-jaune: rgb(253, 239, 214);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    background: radial-gradient(
    circle at left center,
    rgb(140, 198, 230) 0%,
    rgb(222, 239, 250) 30%,
    white 100%
);
    font-family: "Inter", sans-serif;
    margin: 0;
}

.page-chiffres {
    background: radial-gradient(
        circle at left center,
        rgb(235, 220, 245) 0%,
        rgb(247, 240, 250) 30%,
        white 100%
    );
}

.page-actions {
    background: radial-gradient(
    circle at left center,
    rgb(206, 229, 219) 0%,
    rgb(233, 244, 238) 30%,
    white 100%
);
}

.page-representations {
    background: radial-gradient(
        circle at left center,
        rgb(245, 204, 216) 0%,
        rgb(252, 233, 238) 30%,
        white 100%
    );
}

.page-ressources {
    background: radial-gradient(
    circle at left center,
    rgb(247, 229, 184) 0%,
    rgb(252, 243, 221) 30%,
    white 100%
);
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 2px solid lightgray;
    margin: 0;
}

.HES {
    color: rgb(188, 160, 204);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
}

.HEI {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 50px;
    border-left: 1px solid lightgray;
    font-weight: 500;
    padding-left: 1.5px;
}

.ISC img {
    height: clamp(28px, 4vw, 55px);
    width: auto;
}

.navigation {
    flex: 1;
    min-width: 0;
}

.navigation ul {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 0;
    list-style: none;
    margin: 0;
    margin-left: 70px;
    padding: 0;
    border: 1px solid lightgray;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    font-weight: bold;
    transition: .2s;
    text-align: center;
}

.navigation li {
    display: flex;
    flex: 1 0 5px;
    min-width: 90px;
    text-align: center;
}

.navigation li:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

.navigation a {
    display: flex;
    justify-content: center;
    /* horizontal */
    align-items: center;
    /* vertical */
    width: 100%;
    padding: 16px 12px;
    text-align: center;
    color: var(--couleur-violette);
    text-decoration: none;
    font-size: clamp(10px, 1.2vw, 1.1rem);
}

.navigation li + li {
    border-left: 1px solid lightgray;
}

.navigation a.active {
    background-color: rgba(123, 66, 181, 0.12);
    color: rgb(105, 50, 160);
    font-weight: 700;
}
.hero {
    display: flex;
    margin-top: 0;
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
    background-color: rgb(250, 251, 252);
    height: clamp(520px, 47vw, 700px);
}


.message {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 10px;
    padding: clamp(0px, 4vw, 60px);
}

/* permet d'être responsive */
.message p {
    margin: 0.2rem 0;
    font-size: clamp(2px, 1.2vw, 19px);
    line-height: 1.35;
    text-align: justify;
}

.cover-wrapper {
    flex: 0 0 60%;
    min-width: 0;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}
.cover-wrapper::before {
    content: "";
    position: absolute;

    /* 5 colonnes × 4 lignes */
    width: 90px;
    height: 72px;

    top: 60px;
    right: 45px;

    background-image: radial-gradient(
        circle,
        white 2px,
        rgba(123, 66, 181, 0.25) 2.5px,
        transparent 3px
    );

    background-size: 18px 18px;

    z-index: 3;
    pointer-events: none;
}


/* Groupe de points du bas */
.cover-wrapper::after {
    content: "";
    position: absolute;

    /* 7 colonnes × 6 lignes */
    width: 126px;
    height: 108px;

    right: 100px;
    bottom: 90px;

    background-image: radial-gradient(
        circle,
        white 2px,
        rgba(123, 66, 181, 0.25) 2.5px,
        transparent 3px
    );

    background-size: 18px 18px;

    z-index: 3;
    pointer-events: none;


    background-size: 18px 18px;

    z-index: 3;
    pointer-events: none;
}

/* l'image */
.coverpic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;

    border-radius:
        180px
        0
        500px
        180px;

}

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

/* la forme colorée derrière */
.hero-shape {
    position: absolute;

    width: 80%;
    height: 120%;

    right: 0;
    bottom: 0;

    z-index: 1;

    clip-path: ellipse(85% 85% at 100% 100%);
}

.page-accueil .hero-shape {
    background-color: rgb(145, 190, 218);
}

.page-chiffres .hero-shape {
    background-color: rgb(190, 165, 225);
}

.page-representations .hero-shape {
    background-color: rgb(244, 169, 187);
}

.page-actions .hero-shape {
    background-color: rgb(151, 207, 190);
}

.page-ressources .hero-shape {
    background-color: rgb(255, 220, 120);
}

h1 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
}

/* ---------- FOOTER COMMUN ---------- */

.footer {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 60px 0;
    padding: 35px 45px;
    background: rgb(188, 160, 204);
    border-radius: 22px;
    color: white;
}

.footer-icone {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 50%;
    font-size: 34px;
}

.footer-message {
    flex: 1;
}

.footer-message h2 {
    margin: 0 0 12px;
    font-size: clamp(22px,2vw,34px);
}

.footer-message p {
    margin: 0;
    max-width: 700px;
    line-height: 1.5;
}

.footer-bouton {
    padding: 15px 30px;
    background: white;
    color: var(--couleur-violette);
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: .2s;
    text-align: center;
    flex-shrink: 1;
}

.footer-texte {
    flex: 1;
}

.footer-bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.footer-fin {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 70px;
    padding: 15px 30px;
}

.footer-fin p {
    margin: 0;

    color: rgba(123, 66, 181, 0.65);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.footer-fin span {
    margin: 0 12px;
    color: brown;
}

/*=====================================================
   2. GLOBAL / RESPONSIVE COMMUN
   Header, navigation, hero et footer
   =====================================================*/

/* TABLETTE */

@media (max-width: 1050px) {
    .header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ISC img {
        height: clamp(28px, 4vw, 45px);
        width: auto;
    }

    .navigation {
        flex-basis: 100%;
    }

    .navigation ul {
        width: 100%;
        margin-left: 0;
    }

    .navigation li {
        flex: 1;
        min-width: 0;
    }

    .navigation a {
        padding: 12px 6px;
        font-size: 14px;
    }
    .hero {
        flex-direction: column;
        height: auto;
    }

    .cover-wrapper {
        min-height: 400px;
    }

}

/* MOBILE */

@media (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        padding: 10px 15px;
        gap: 10px;
    }

    .logo img,
    .ISC img {
        height: 36px;
        width: auto;
    }

    .HEI {
        width: auto;
        height: auto;
        font-size: 13px;
    }

    .ISC {
        font-size: 28px;
        margin-left: 5px;
    }

    .navigation {
        flex-basis: 100%;
    }

    .navigation ul {
        margin-left: 0;
        width: 100%;
    }

    .navigation li {
        min-width: 0;
        flex: 1;
    }

    .navigation a {
        padding: 10px 4px;
        font-size: 11px;
        overflow-wrap: normal;
        /* Évite autant que possible de casser les mots n’importe où. */
    }
 .navigation li:nth-child(3) a {
        font-size: 0.55em;
}

    /* HERO */

    .hero {
        flex-direction: column;
         height: auto;
    }

    .message {
        padding: 30px 20px;
    }

    h1 {
        font-size: clamp(30px, 9vw, 44px);
        line-height: 1.05;
    }

    .message p {
        font-size: 15px;
        text-align: left;
    }

    .coverpic {
        min-height: 280px;
    }
    .cover-wrapper {
    min-height: 320px;
}


    .footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 30px 15px;
        padding: 30px 20px;
        text-align: center;
    }

    .footer-bouton {
        margin-left: 0;
    }
}

/*=====================================================
   3. INDEX
   =====================================================*/

.top h2 {
    text-align: center;
    display: block;
}

.top h2::after {
    content: "";
    /* crée un élément vide avec la commande afre on le crée juste après */
    text-align: center;
    display: block;
    width: 50px;
    height: 4px;
    margin: 12px auto 0;
    background-color: brown;
    border-radius: 999px;
}

.top li {
    text-decoration: none;
    list-style: none;
}

.cards ul {
    width: 100%;
    min-height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0;
    gap: 14px;
    padding: 24px 0 12px;
    box-sizing: border-box;
    text-align: center;
    color: black;
    text-decoration: none;
    flex: 1 1 0;
    min-width: 0;
    font-size: clamp(0.1px, 1.2vw, 1.1rem);
    overflow: hidden;
}

.cards li {
    display: flex;
    font-weight: 600;
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

.cards li:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(50, 30, 80, 0.12);
}

.cards li a {
    padding: 55px 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    justify-content: flex-start;
    position: relative;
}

/* Petite animation de l'icône */
.cards li .icone {
    transition: transform 0.25s ease;
}

.cards li:hover .icone {
    transform: scale(1.12);
}

.cards h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    text-align: center;
}

.cards p {
    margin: 0;
}

.fleche {
    margin-top: 6px;
    line-height: 1.2;
    text-decoration: none;
    /* évite que ça souligne le lien (la flèche) */
    color: inherit;
    /* le texte garde la même couleur quand le lien a été visité */
}

.chiffres {
    background-color: var(--fond-violet);
}

.représentations {
    background-color: var(--fond-rose);
}

.actions {
    background-color: var(--fond-vert);
}

.ressources {
    background-color: var(--fond-jaune);
}

.cards .chiffres h3,
.cards .chiffres .fleche {
    color: rgb(139, 89, 192);
}

.cards .représentations h3,
.cards .représentations .fleche {
    color: var(--couleur-rose);
}

.cards .actions h3,
.cards .actions .fleche {
    color: var(--couleur-verte);
}

.cards .ressources h3,
.cards .ressources .fleche {
    color: var(--couleur-jaune);
}

.icone {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid #b18be0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    /* centre les icones proportionnellement par rapport à la largeur */
}

.chiffres .icone {
    color: rgb(139, 89, 192);
    border-color: rgb(139, 89, 192);
}

.représentations .icone {
    color: var(--couleur-rose);
    border-color: var(--couleur-rose);
}

.actions .icone {
    color: var(--couleur-verte);
    border-color: var(--couleur-verte);
}

.ressources .icone {
    color: var(--couleur-jaune);
    border-color: var(--couleur-jaune);
}

.apercu {
    display: flex;
    border-top: 1px solid lightgray;
}

.bloc-apercu {
    flex: 1;
    min-width: 0;
    padding: clamp(25px, 4vw, 60px);
}

.bloc-apercu + .bloc-apercu {
    border-left: 1px solid lightgray;
}

.bloc-apercu h2 {
    margin-top: 0;
}

.bloc-apercu h2::after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin-top: 10px;
    background-color: brown;
}

.stats {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.stat-lien {
    display: block;
    flex: 1;
    min-width: 0;

    text-decoration: none;
    color: inherit;
}

.stat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    gap: 15px;
    align-items: center;

    background-color: var(--fond-violet);
    border: 1px solid rgba(123, 66, 181, 0.08);
    border-radius: 18px;

    padding: 22px 20px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);

    /* Pour le hover */
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* HOVER DE LA CARTE */

.stat-lien:hover .stat {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(50, 30, 80, 0.12);
}


/* ICÔNE */

.stat-icone {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

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

    border-radius: 50%;
    border: 1px solid var(--couleur-violette);

    /* Animation */
    transition: transform 0.25s ease;
}


/* L'icône grossit légèrement au hover */

.stat-lien:hover .stat-icone {
    transform: scale(1.12);
}


.stat h3 {
    margin: 0 0 25px;
    font-size: clamp(15px, 2vw, 32px);
    text-align: center;
}


.stat p {
    margin: 0;
    line-height: 1.4;
    text-align: center;
}
.liste-representations {
    padding: 0;
    margin: 30px 0;
    list-style: none;
}


/* Chaque ligne */
.liste-representations li {
    margin-bottom: 14px;

    border: 1px solid rgb(92, 29, 29);
    border-radius: 12px;
    background-color: var(--fond-rose);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Le lien prend toute la surface */
.liste-representations li a {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 100%;
    padding: 15px;

    color: inherit;
    text-decoration: none;

    box-sizing: border-box;
}


/* Hover de toute la ligne */
.liste-representations li:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(50, 30, 80, 0.12);
    cursor: pointer;
}


/* Numéro */
.numero {
    width: 30px;
    height: 30px;
    flex-shrink: 0;

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

    color: white;
    background-color: brown;
    border-radius: 50%;

    transition: transform 0.25s ease;
}


/* Petite animation du numéro */
.liste-representations li:hover .numero {
    transform: scale(1.10);
}


/* Bouton */
.bouton-apercu {
    display: block;
    width: max-content;
    margin: 30px auto 0;
    padding: 12px 25px;

    color: white;
    background-color: brown;
    border-radius: 6px;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.bouton-apercu:hover {
    background-color: rgb(140, 30, 30);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/*=====================================================
   4. INDEX / RESPONSIVE
   =====================================================*/

/* TABLETTE */

@media (max-width: 1050px) {
    .stats {
        flex-direction: column;
        gap: 24px;
    }

    .stat {
        width: 100%;
        align-items: flex-start;
    }

    .stat > div:last-child {
        flex: 1;
        min-width: 0;
    }
        .texte-graphique p {
    text-align: justify;
    line-height: 1.55;
}
}

/* MOBILE */

@media (max-width: 768px) {
    .cards ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        width: auto;
        padding: 25px 15px;
        overflow: visible;
        font-size: 14px;
    }

    .cards li {
        min-height: 170px;
        padding: 55px 12px 18px;
    }

    .cards li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        color: inherit;
        text-decoration: none;
        justify-content: flex-start;
        position: relative;
    }

    .cards h3 {
        font-size: 16px;
    }

    .cards p {
        font-size: 13px;
        line-height: 1.3;
    }

    /* APERÇU */

    .apercu {
        flex-direction: column;
    }

    .bloc-apercu {
        padding: 30px 20px;
    }

    .bloc-apercu + .bloc-apercu {
        border-left: none;
        border-top: 1px solid lightgray;
    }

    .stats {
        flex-direction: column;
        gap: 25px;
    }

    .stat {
        width: 100%;
    }

    .stat h3 {
        font-size: 25px;
    }

    .liste-representations li {
        padding: 12px;
    }
}

/*=====================================================
   5. CHIFFRES
   =====================================================*/

/* Chiffres */

.section-graphiques {
    padding: clamp(25px, 4vw, 60px);
}

.section-graphiques > h2 {
    margin-top: 0;
}


/* Conteneur général */
.grille-graphiques {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 30px;
}


/* Chaque ligne = graphique + texte */
.ligne-graphique {
    display: grid;
    grid-template-columns: minmax(0, 65%) minmax(220px, 35%);
    align-items: center;
    gap: clamp(30px, 4vw, 60px);

    width: 100%;
    box-sizing: border-box;
    margin-bottom: 100px;
}


/* Deuxième ligne inversée */
.ligne-graphique-inversee {
    grid-template-columns: minmax(220px, 35%) minmax(0, 65%);
}


/* Graphiques */
.carte-graphique {
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
    box-sizing: border-box;
}


.carte-graphique img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}


/* Texte à côté */
.texte-graphique {
    max-width: 430px;
}

.texte-graphique h3 {
    margin: 0 0 25px;

    color: rgb(123, 66, 181);
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.2;
}
.texte-graphique h3::after {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    margin-top: 12px;
    background-color: rgb(123, 66, 181);
    border-radius: 3px;
}

.texte-graphique p {
    margin: 0 0 18px;

    line-height: 1.65;
    text-align: justify;
}


/* Bloc "À retenir" */
.carte-retenir {
    width: 65%;
    align-self: flex-end;

    box-sizing: border-box;
    padding: 30px;

    background: linear-gradient(
        135deg,
        rgb(247, 241, 252),
        rgb(238, 221, 246)
    );

    border-radius: 16px;
}

/*=====================================================
   6. CHIFFRES / RESPONSIVE
   =====================================================*/

@media (max-width: 768px) {
    .carte-graphique,
    .carte-retenir {
        width: 100%;
        align-self: stretch;
    }

     .section-graphiques {
        padding: 20px 15px;
    }

    .grille-graphiques {
        gap: 40px;
        margin-top: 20px;
    }

    .ligne-graphique,
    .ligne-graphique-inversee {
        display: flex;
        flex-direction: column;
        gap: 25px;

        width: 100%;
        margin-bottom: 60px;
    }

    .carte-graphique {
        width: 100%;
        order: 1;
    }

    .texte-graphique {
        width: 100%;
        max-width: none;
        order: 2;
    }

    .texte-graphique h3 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .texte-graphique p {
        text-align: left;
        line-height: 1.55;
    }

    .texte-graphique p {
    text-align: justify;
    line-height: 1.55;
}
}


/*=====================================================
   7. REPRÉSENTATIONS
   =====================================================*/

/*=====================================================
   PAGE : LES REPRÉSENTATIONS
   =====================================================*/

.representation-page {
    width: 100%;
}

/* INTRODUCTION */

.representation-introduction {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(45px, 7vw, 90px)
        clamp(20px, 6vw, 70px);
    text-align: center;
}

.representation-surtitle {
    margin: 0 0 12px;
    color: var(--couleur-rose);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.representation-introduction h1 {
    margin: 0 0 28px;
    color: rgb(34, 34, 66);
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.08;
}

.representation-introduction > p:not(.representation-surtitle) {
    max-width: 790px;
    margin: 12px auto;
    color: rgb(48, 48, 72);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
}

/* LIGNES PRINCIPALES */

.representation-ligne {
    --couleur-theme: var(--couleur-violette);
    display: grid;
    grid-template-columns: minmax(300px, 42%)
        minmax(400px, 58%);
    align-items: stretch;
    gap: clamp(35px, 6vw, 90px);
    padding: clamp(35px, 5vw, 65px)
        clamp(20px, 6vw, 80px);
    border-top: 4px solid rgba(220, 220, 225, 0.55);
    box-sizing: border-box;
}

/* COULEURS DES TROIS BLOCS */

.representation-violette {
    --couleur-theme: var(--couleur-violette);
    --fond-theme: rgb(238, 225, 247);
    --fond-carte: rgb(247, 241, 252);
}

.representation-rose {
    --couleur-theme: var(--couleur-verte);
    --fond-theme: rgb(233, 244, 238);
    --fond-carte: rgb(255, 242, 247);
}

.representation-orange {
    --couleur-theme: rgb(220, 145, 15);
    --fond-theme: rgb(253, 239, 210);
    --fond-carte: rgb(255, 248, 232);
}

/* PARTIE EXPLICATIVE À GAUCHE */

.representation-explication {
    min-width: 0;
}

.representation-titre {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: clamp(18px, 2.5vw, 30px);
    margin-bottom: 22px;
}

.representation-icone {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--couleur-theme);
    background-color: var(--fond-theme);
    border-radius: 50%;
    font-size: 32px;
}

.representation-titre h2 {
    margin: 5px 0 0;
    color: var(--couleur-theme);
    font-size: clamp(22px, 2.1vw, 31px);
    line-height: 1.35;
}

.representation-titre h2 span {
    display: block;
}

.representation-paragraphes {
    max-width: 600px;
}

.representation-paragraphes p {
    margin: 0 0 13px;
    color: rgb(36, 37, 67);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.55;
}

/* CARTE DU TÉMOIGNAGE */

.representation-temoignage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 250px;
    padding: clamp(55px, 5vw, 75px)
        clamp(30px, 5vw, 65px)
        clamp(30px, 4vw, 45px);
    background: radial-gradient(
            circle at top left,
            var(--fond-theme) 0%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            var(--fond-carte) 0%,
            rgba(255, 255, 255, 0.9) 100%
        );
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.representation-guillemets {
    position: absolute;
    top: 26px;
    left: clamp(30px, 5vw, 65px);
    color: var(--couleur-theme);
    font-size: 36px;
}

.representation-temoignage blockquote {
    margin: 18px 0 30px;
    color: rgb(26, 28, 64);
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 600;
    line-height: 1.4;
}

/* SÉPARATEUR SOUS LA CITATION */

.representation-separateur {
    position: relative;
    width: 100%;
    height: 1px;
    margin-bottom: 22px;
    background-color: color-mix(
        in srgb,
        var(--couleur-theme) 24%,
        transparent
    );
}

.representation-separateur::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 55px;
    height: 3px;
    background-color: var(--couleur-theme);
    border-radius: 99px;
}

/* INFORMATIONS SUR L’ÉTUDIANTE */

.representation-etudiante {
    display: flex;
    align-items: center;
    gap: 18px;
}

.representation-profil {
    width: 38px;
    flex-shrink: 0;
    color: var(--couleur-theme);
    font-size: 34px;
    text-align: center;
}

.representation-label {
    margin: 0 0 4px;
    color: var(--couleur-theme);
    font-size: 18px;
    font-weight: 700;
}

.representation-formation {
    margin: 0;
    color: rgb(43, 45, 75);
    font-size: 14px;
    line-height: 1.35;
}

/*=====================================================
   8. REPRÉSENTATIONS / RESPONSIVE
   =====================================================*/

/*=====================================================
   RESPONSIVE : PAGE REPRÉSENTATIONS
   =====================================================*/

/* TABLETTE */

@media (max-width: 950px) {
    .representation-ligne {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 45px
            30px;
    }

    .representation-paragraphes {
        max-width: none;
    }

    .representation-temoignage {
        width: 100%;
        min-height: auto;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .representation-ligne {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 35px
            18px;
    }

    /* TITRE + ICÔNE */

    .representation-titre {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .representation-icone {
        width: 52px;
        height: 52px;
        font-size: 23px;
    }

    .representation-titre h2 {
        margin-top: 0;
        font-size: 23px;
        line-height: 1.25;
    }

    /* PARAGRAPHES */

    .representation-paragraphes {
        width: 100%;
        max-width: none;
    }

    .representation-paragraphes p {
        font-size: 15px;
        line-height: 1.55;
        /* Sur téléphone le texte justifié crée souvent
        de très grands espaces entre les mots. */
        text-align: left !important;
    }

    /* CARTE TÉMOIGNAGE */

    .representation-temoignage {
        width: 100%;
        min-height: auto;
        padding: 55px
            22px
            25px;
        border-radius: 16px;
    }

    .representation-guillemets {
        top: 20px;
        left: 22px;
        font-size: 30px;
    }

    .representation-temoignage blockquote {
        margin: 10px
            0
            25px;
        font-size: 18px;
        line-height: 1.4;
    }

    .representation-temoignage blockquote p {
        margin: 0
            0
            12px;
    }

    /* PROFIL */

    .representation-etudiante {
        gap: 12px;
    }

    .representation-profil {
        width: 30px;
        font-size: 27px;
    }

    .representation-label {
        font-size: 15px;
    }
}

/*=====================================================
   9. ACTIONS
   =====================================================*/

/*=====================================================
   PAGE : LES ACTIONS
   =====================================================*/

/* SECTION GÉNÉRALE */

.actions-section,
.actions-propositions {
    padding: clamp(45px, 6vw, 80px)
        clamp(20px, 5vw, 70px);
    box-sizing: border-box;
}

/*=====================================================
   TITRES DES SECTIONS
   =====================================================*/

.actions-titre-section {
    max-width: 900px;
    margin-bottom: 40px;
}

.actions-surtitle {
    margin: 0 0 8px;
    color: var(--couleur-verte);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.actions-titre-section h2 {
    margin: 0 0 18px;
    color: rgb(28, 32, 45);
    font-size: clamp(28px, 3.5vw, 46px);
    line-height: 1.15;
}

.actions-titre-section > p:last-child {
    max-width: 800px;
    margin: 0;
    color: rgb(53, 56, 68);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
}

/*=====================================================
   ACTIONS EXISTANTES
   =====================================================*/

.actions-section {
    background-color: rgba(255, 255, 255, 0.7);
}

.actions-grille {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

/* UNE CARTE */

.action-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 28px
        22px;
    background: linear-gradient(
            145deg,
            rgb(246, 252, 249),
            white
        );
    border: 1px solid
        rgb(210, 231, 220);
    border-radius: 18px;
    text-align: center;
    box-sizing: border-box;
    transition: transform .2s ease,
        box-shadow .2s ease;
}

.action-carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px
        rgba(0, 0, 0, 0.08);
}

/* ICÔNE */

.action-icone {
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: rgb(65, 139, 109);
    background-color: rgb(225, 241, 233);
    border-radius: 50%;
    font-size: 25px;
}

/* TITRE CARTE */

.action-carte h3 {
    margin: 0
        0
        15px;
    color: rgb(47, 112, 86);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.3;
}

/* TEXTE CARTE */

.action-carte p {
    margin: 0;
    color: rgb(52, 55, 67);
    font-size: 14px;
    line-height: 1.55;
}

/* PETIT LABEL EN BAS */

.action-carte .action-exemple {
    margin-top: auto;
    padding-top: 20px;
    color: var(--couleur-verte);
    font-size: 13px;
    font-weight: 700;
}

/*=====================================================
   PROPOSITIONS EXPERTS
   =====================================================*/

.actions-propositions {
    border-top: 1px solid
        rgb(220, 228, 224);
    background: linear-gradient(
            180deg,
            rgba(233, 244, 238, 0.8),
            rgba(255, 255, 255, 0.7)
        );
}

/* GRILLE 2 COLONNES */

.propositions-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
        30px;
}

/* UNE PROPOSITION */

.proposition {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid
        rgba(94, 162, 134, 0.25);
    border-radius: 15px;
    box-sizing: border-box;
}

/* NUMÉRO */

.proposition-numero {
    flex-shrink: 0;
    color: var(--couleur-verte);
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 700;
}

/* CONTENU */

.proposition-contenu {
    min-width: 0;
}

.proposition h3 {
    margin: 0
        0
        8px;
    color: rgb(39, 91, 71);
    font-size: clamp(18px, 1.5vw, 22px);
}

.proposition p {
    margin: 0;
    color: rgb(53, 56, 68);
    font-size: 15px;
    line-height: 1.55;
}

/*=====================================================
   BLOC FINAL
   =====================================================*/

.actions-conclusion {
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 1000px;
    margin: 45px
        auto
        0;
    padding: 28px
        35px;
    background: linear-gradient(
            135deg,
            rgb(222, 239, 230),
            rgb(244, 250, 247)
        );
    border-radius: 18px;
    box-sizing: border-box;
}

.actions-conclusion-icone {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(65, 139, 109);
    border: 2px solid
        var(--couleur-verte);
    border-radius: 50%;
    font-size: 26px;
}

.actions-conclusion h3 {
    margin: 0
        0
        8px;
    color: rgb(47, 112, 86);
    font-size: 23px;
}

.actions-conclusion p {
    margin: 0;
    color: rgb(53, 56, 68);
    line-height: 1.55;
}

/*=====================================================
   10. ACTIONS / RESPONSIVE
   =====================================================*/

/*=====================================================
   RESPONSIVE ACTIONS
   =====================================================*/

@media (max-width: 1100px) {
    .actions-grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .actions-section,
    .actions-propositions {
        padding: 40px
            20px;
    }

    .actions-grille {
        grid-template-columns: 1fr;
    }

    .propositions-grille {
        grid-template-columns: 1fr;
    }

    .proposition {
        padding: 20px;
    }

    .actions-conclusion {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }
}

/*=====================================================
   11. RESSOURCES
   =====================================================*/

/*=====================================================
   PAGE : RESSOURCES
   =====================================================*/

.ressources-section {
    padding: clamp(40px, 5vw, 70px)
        clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    background: linear-gradient(
            180deg,
            rgba(255,255,255,.75),
            rgba(255,255,255,.95)
        );
}

/*=====================================================
   TITRE
   =====================================================*/

.ressources-introduction {
    margin-bottom: 35px;
    text-align: center;
}

.ressources-introduction h2 {
    margin: 0;
    color: rgb(30, 30, 45);
    font-size: clamp(25px, 2.5vw, 37px);
    line-height: 1.2;
}

.ressources-introduction h2::after {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    margin: 14px
        auto
        0;
    background: var(--couleur-jaune);
    border-radius: 100px;
}

/*=====================================================
   GRILLE DES RESSOURCES
   =====================================================*/

.ressources-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/*=====================================================
   CARTE
   =====================================================*/

.ressource-carte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid
        rgb(232, 229, 220);
    border-radius: 16px;
    box-shadow: 0 5px 18px
        rgba(0, 0, 0, .05);
    transition: transform .2s ease,
        box-shadow .2s ease;
}

.ressource-carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px
        rgba(0, 0, 0, .09);
}

/*=====================================================
   IMAGE
   =====================================================*/

.ressource-image {
    display: block;
    height: 180px;
    margin: 18px
        18px
        0;
    overflow: hidden;
    border-radius: 10px;
    background: rgb(247, 247, 247);
}

.ressource-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.ressource-carte:hover .ressource-image img {
    transform: scale(1.03);
}

/*=====================================================
   CONTENU
   =====================================================*/

.ressource-contenu {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.ressource-contenu h3 {
    margin: 0
        0
        8px;
    color: rgb(35, 33, 67);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.3;
}

.ressource-auteur {
    margin: 0
        0
        14px !important;
    color: rgb(110, 105, 125);
    font-size: 14px !important;
    font-weight: 500;
}

.ressource-contenu > p {
    margin: 0
        0
        20px;
    color: rgb(55, 55, 68);
    font-size: 15px;
    line-height: 1.5;
}

/*=====================================================
   BAS DE CARTE
   =====================================================*/

.ressource-bas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

/* LABEL */

.ressource-label {
    padding: 6px
        10px;
    border-radius: 7px;
    font-size: 12px;
    white-space: nowrap;
}

.ressource-label-vert {
    color: rgb(58, 133, 103);
    background: rgb(229, 243, 236);
}

.ressource-label-violet {
    color: var(--couleur-violette);
    background: rgb(241, 233, 248);
}

.ressource-label-orange {
    color: rgb(202, 126, 30);
    background: rgb(255, 239, 219);
}

.ressource-label-jaune {
    color: rgb(190, 141, 35);
    background: rgb(255, 245, 216);
}

.ressource-label-rose {
    color: var(--couleur-rose);
    background: var(--fond-rose);
}

/* LIEN */

.ressource-lien {
    color: var(--couleur-violette);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: right;
}

.ressource-lien i {
    margin-left: 5px;
    font-size: 11px;
}

.ressource-lien:hover {
    text-decoration: underline;
}

/*=====================================================
   VOIR TOUTES LES RESSOURCES
   =====================================================*/

.ressources-tout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: max-content;
    margin: 35px
        auto
        0;
    padding: 12px
        25px;
    color: var(--couleur-violette);
    background: white;
    border: 1px solid
        var(--couleur-violette);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}

.ressources-tout:hover {
    color: white;
    background: var(--couleur-violette);
    transform: translateY(-2px);
}

/*=====================================================
   QUESTIONNAIRE
   =====================================================*/

.ressources-questionnaire {
    display: grid;
    grid-template-columns: minmax(260px, 30%)
        minmax(0, 70%);
    gap: 40px;
    margin: 0
        0px
        60px;
    padding: clamp(30px, 4vw, 50px);
    background: linear-gradient(
            135deg,
            rgb(249, 244, 252),
            rgb(245, 238, 249)
        );
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
}

/* INTRO QUESTIONNAIRE */

.questionnaire-introduction {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.questionnaire-icone {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--couleur-violette);
    background: var(--fond-jaune);
    border-radius: 50%;
    font-size: 35px;
}

.questionnaire-introduction h2 {
    margin: 0
        0
        18px;
    color: rgb(34, 32, 65);
    font-size: clamp(25px, 2.5vw, 34px);
}

.questionnaire-introduction p {
    margin: 0
        0
        15px;
    color: rgb(55, 55, 68);
    line-height: 1.5;
}

.questionnaire-important {
    font-weight: 700;
}

/*=====================================================
   ZONE RÉSERVÉE AU FUTUR QUESTIONNAIRE
   =====================================================*/

.questionnaire-zone {
    min-height: 260px;
    padding: 28px 32px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px dashed rgb(218, 202, 230);
    border-radius: 18px;

    box-sizing: border-box;
}


/* =====================================================
   QUESTIONS
   ===================================================== */

.question {
    display: none;
}

.question.active {
    display: block;
}

.question-number {
    margin: 0 0 10px;

    font-size: 0.9rem;
    font-weight: 600;

    color: rgb(139, 89, 192);
}

.question h3 {
    margin: 0 0 22px;

    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.35;

    color: #10194d;
}


/* =====================================================
   CHOIX / BOUTONS RADIO
   ===================================================== */

.question label {
    display: flex;
    align-items: center;

    width: 100%;
    margin-bottom: 10px;
    padding: 12px 14px;

    background: rgba(247, 243, 250, 0.9);

    border: 1px solid transparent;
    border-radius: 10px;

    box-sizing: border-box;

    cursor: pointer;

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

.question label:hover {
    background: rgb(244, 237, 249);
    border-color: rgb(218, 202, 230);

    transform: translateX(3px);
}

.question input[type="radio"] {
    margin-right: 10px;

    accent-color: rgb(139, 89, 192);

    cursor: pointer;
}


/* =====================================================
   TEXTAREA
   ===================================================== */

.question textarea {
    width: 100%;
    min-height: 125px;

    padding: 14px 16px;

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;

    color: #10194d;

    background: rgba(250, 248, 252, 0.9);

    border: 1px solid rgb(218, 202, 230);
    border-radius: 12px;

    box-sizing: border-box;

    resize: vertical;

    outline: none;

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

.question textarea:focus {
    border-color: rgb(139, 89, 192);

    box-shadow:
        0 0 0 3px rgba(139, 89, 192, 0.12);
}


/* =====================================================
   BOUTONS
   ===================================================== */

.questionnaire-next,
.questionnaire-submit {
    display: block;

    margin-top: 20px;
    margin-left: auto;

    padding: 11px 20px;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;

    color: white;

    background: rgb(139, 89, 192);

    border: none;
    border-radius: 9px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.questionnaire-next:hover,
.questionnaire-submit:hover {
    background: rgb(124, 74, 177);

    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(139, 89, 192, 0.2);
}


/* =====================================================
   CONFIRMATION
   ===================================================== */

.questionnaire-confirmation {
    display: none;

    min-height: 190px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;
}

.questionnaire-confirmation h3 {
    margin-bottom: 8px;

    font-size: 1.4rem;

    color: #10194d;
}

.questionnaire-confirmation p {
    margin: 0;

    color: #555;
}

/*
   Pour éviter les bots place une partie du formulaire hors écran que le bot va vouloir remplir 
   */
.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
/*=====================================================
   12. RESSOURCES / RESPONSIVE
   =====================================================*/

/*=====================================================
   RESSOURCES - RESPONSIVE TABLETTE
   =====================================================*/

@media (max-width: 1050px) {
    .ressources-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ressources-questionnaire {
        grid-template-columns: 1fr;
    }

    .questionnaire-zone {
        min-height: 200px;
    }
}

/*=====================================================
   RESSOURCES - RESPONSIVE MOBILE
   =====================================================*/

@media (max-width: 650px) {
    .ressources-section {
        padding: 40px
            18px;
    }

    /* CARTES */

    .ressources-grille {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ressource-image {
        height: 190px;
    }

    .ressource-contenu {
        padding: 18px;
    }

    .ressource-contenu h3 {
        font-size: 19px;
    }

    /* BAS DE CARTE */

    .ressource-bas {
        align-items: flex-end;
    }

    /* QUESTIONNAIRE */

    .ressources-questionnaire {
        margin: 0
            12px
            40px;
        padding: 28px
            20px;
        gap: 25px;
    }

    .questionnaire-introduction {
        flex-direction: column;
        gap: 18px;
    }

    .questionnaire-icone {
        width: 58px;
        height: 58px;
        font-size: 27px;
    }

    .questionnaire-zone {
        min-height: 170px;
    }
}