/* ==========================================================
   NOTA BENE — CSS COMPLET
   ========================================================== */


/* ==========================================================
   1. RÉGLAGES GÉNÉRAUX
   ========================================================== */

p {
    text-align: justify;
}


/* Masquer le titre WordPress de la page d'accueil */

body.page-id-1037 .entry-title,
body.page-id-1037 .wp-block-post-title {
    display: none !important;
}


/* Position générale de la homepage */

.entry-content {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

.entry-content::before {
    display: none !important;
}

body.page-id-1037 .entry-content {
    transform: translateY(-150px);
}


/* ==========================================================
   2. LARGEUR PRINCIPALE
   ========================================================== */

body.page-id-1037 .contenu-principal {
    width: 1200px !important;
    max-width: 1200px !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
}


body.page-id-1037
.contenu-principal
> .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


body.page-id-1037
.contenu-principal
> .wp-block-group__inner-container
> * {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================
   3. VIDÉO
   PLUS HAUTE : 360 PX
   ========================================================== */

body.page-id-1037 .video-banner {
    width: 1200px !important;
    max-width: 1200px !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-top: 40px !important;
    margin-right: 0 !important;
    margin-bottom: 70px !important;
    margin-left: 0 !important;

    box-sizing: border-box;
}


body.page-id-1037
.video-banner
.wp-block-embed__wrapper {
    width: 100% !important;
    max-width: none !important;

    height: 360px !important;

    overflow: hidden !important;
    position: relative !important;
}


body.page-id-1037
.video-banner iframe {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;

    margin: 0 !important;
}


/* ==========================================================
   4. TITRES DE RUBRIQUES
   PROJETS / EXPERTISES / CLIENTS / ETC.
   ========================================================== */

body.page-id-1037
.contenu-principal h2 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    font-size: 26px !important;
    line-height: 1.1 !important;

    /* PLUS DE BOLD */
    font-weight: 400 !important;

    /* Léger caractère éditorial */
    letter-spacing: 0.03em !important;

    padding-bottom: 20px !important;
    margin-bottom: 45px !important;

    border-bottom: 3px solid #111111 !important;

    box-sizing: border-box;
}


/* ==========================================================
   5. GALERIE PROJETS
   ========================================================== */

body.page-id-1037 .galerie-projets {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
}


body.page-id-1037
.galerie-projets
.wp-block-columns {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


body.page-id-1037
.galerie-projets
.wp-block-column {
    flex: 1 1 0 !important;

    min-width: 0 !important;
    max-width: none !important;
}


body.page-id-1037
.galerie-projets
.projet {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    overflow: hidden;

    box-sizing: border-box;
}


body.page-id-1037
.galerie-projets
.projet
.wp-block-image {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}


body.page-id-1037
.galerie-projets
.projet
.wp-block-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    transition: transform 0.4s ease;
}


/* Overlay bleu */

body.page-id-1037
.projet
.projet-info {
    position: absolute;

    inset: 0;

    margin: 0 !important;
    padding: 30px;

    display: flex;
    align-items: flex-end;

    background: rgba(2, 0, 112, 0.82) !important;

    color: #fffef8 !important;

    font-size: 20px;
    line-height: 1.25;

    opacity: 0;

    transition: opacity 0.3s ease;
}


body.page-id-1037
.projet
.projet-info p {
    color: #fffef8 !important;
}


body.page-id-1037
.projet:hover
.projet-info {
    opacity: 1;
}


body.page-id-1037
.projet:hover
.wp-block-image img {
    transform: scale(1.025);
}


/* ==========================================================
   6. CONTACT
   ========================================================== */

body.page-id-1037 .contact-notabene {
    width: 100% !important;
    max-width: none !important;

    margin: 25px 0 40px 0 !important;

    /*
       Même retrait que la citation principale
    */
    padding: 35px 0 35px 150px !important;

    box-sizing: border-box !important;

    display: flex !important;

    gap: 45px !important;

    align-items: flex-start !important;
}


/* Colonnes */

body.page-id-1037
.contact-notabene
.wp-block-column {
    margin: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;
}


body.page-id-1037
.contact-notabene
.wp-block-column:first-child {
    flex: 0 0 48% !important;

    width: 48% !important;
    max-width: 48% !important;
}


body.page-id-1037
.contact-notabene
.wp-block-column:last-child {
    flex: 0 0 42% !important;

    width: 42% !important;
    max-width: 42% !important;
}


/* Grande accroche à gauche */

body.page-id-1037
.contact-notabene
.contact-accroche {
    width: 100% !important;
    max-width: 470px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 54px !important;
    line-height: 1.02 !important;
    font-weight: 600 !important;

    letter-spacing: -0.035em;

    text-align: left !important;

    color: #111111 !important;

    transition: color 0.25s ease;
}


/* Accroche bleue au survol */

body.page-id-1037
.contact-notabene
.contact-accroche:hover {
    color: #020070 !important;
}


/* Parlons-en */

body.page-id-1037
.contact-notabene
.contact-titre {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 600 !important;

    text-align: left !important;

    color: #111111 !important;
}


/* Coordonnées */

body.page-id-1037
.contact-notabene
.contact-infos {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    text-align: left !important;

    color: #111111 !important;
}


/*
   IMPORTANT :
   aucun espace entre
   "Parlons-en." et le mail
*/

body.page-id-1037
.contact-notabene
.contact-titre + .contact-infos {
    margin-top: 0 !important;
}


/* Supprimer les marges automatiques WordPress */

body.page-id-1037
.contact-notabene p {
    margin-top: 0 !important;
}


/* Liens */

body.page-id-1037
.contact-notabene
.contact-infos a {
    color: #111111 !important;

    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;

    transition:
        color 0.25s ease,
        text-decoration-color 0.25s ease;
}


/* Email / téléphone en bleu au survol */

body.page-id-1037
.contact-notabene
.contact-infos a:hover {
    color: #020070 !important;

    text-decoration-color: #020070 !important;
}


/* ==========================================================
   7. EXPERTISES
   GRAND + À GAUCHE
   ========================================================== */

body.page-id-1037
.expertises-liste {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Ligne expertise */

body.page-id-1037
.expertises-liste
.expertise-item {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        20px 35px
        20px 82px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    transition:
        background-color 0.25s ease !important;
}


/* Grand + à gauche */

body.page-id-1037
.expertises-liste
.expertise-item::after {
    content: "+" !important;

    position: absolute !important;

    left: 30px !important;
    right: auto !important;

    top: 50% !important;

    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 200 !important;

    color: #111111 !important;

    transform:
        translateY(-50%)
        rotate(0deg) !important;

    transform-origin: center center !important;

    transition:
        color 0.25s ease,
        transform 0.3s ease !important;
}


/* Titre expertise */

body.page-id-1037
.expertises-liste
.expertise-item
.expertise-titre {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;

    letter-spacing: 0 !important;

    text-transform: uppercase !important;

    text-align: left !important;

    color: #111111 !important;

    transition:
        color 0.25s ease !important;
}


/* Détail caché */

body.page-id-1037
.expertises-liste
.expertise-item
.expertise-detail {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 0 !important;
    max-height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    text-align: left !important;

    color: #fffef8 !important;

    transition:
        opacity 0.25s ease,
        max-height 0.3s ease,
        margin-top 0.3s ease !important;
}


/* Hover bleu */

body.page-id-1037
.expertises-liste
.expertise-item:hover {
    background: #020070 !important;
}


/* Titre blanc */

body.page-id-1037
.expertises-liste
.expertise-item:hover
.expertise-titre {
    color: #fffef8 !important;

    transform: none !important;
}


/* + devient × */

body.page-id-1037
.expertises-liste
.expertise-item:hover::after {
    color: #fffef8 !important;

    transform:
        translateY(-50%)
        rotate(45deg) !important;
}


/* Détail visible */

body.page-id-1037
.expertises-liste
.expertise-item:hover
.expertise-detail {
    height: auto !important;
    max-height: 150px !important;

    overflow: visible !important;

    opacity: 1 !important;

    margin-top: 12px !important;

    color: #fffef8 !important;
}


body.page-id-1037
.expertises-liste
.expertise-item:hover
.expertise-detail p,

body.page-id-1037
.expertises-liste
.expertise-item:hover p {
    color: #fffef8 !important;
}


/* ==========================================================
   8. ATELIERS & FORMATIONS
   ========================================================== */

body.page-id-1037 .atelier {
    position: relative;

    box-sizing: border-box;

    overflow: hidden;

    background: #111111;
    color: #fffef8;

    padding: 34px;

    min-height: 500px;

    transition:
        background-color 0.35s ease,
        transform 0.35s ease;
}


body.page-id-1037
.atelier h3,

body.page-id-1037
.atelier p {
    color: #fffef8;
}


/* Image */

body.page-id-1037
.atelier
.wp-block-image {
    margin: 0 0 30px 0;

    overflow: hidden;
}


body.page-id-1037
.atelier
.wp-block-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    transition: transform 0.45s ease;
}


/* Texte */

body.page-id-1037
.atelier > p {
    margin: 0 0 38px 0;

    font-size: 18px;
    line-height: 1.2;
}


/* Titre atelier */

body.page-id-1037
.atelier h3 {
    margin: 0;

    font-size: 36px;
    line-height: 1.05;

    transition: transform 0.3s ease;
}


/* Noir → bleu */

body.page-id-1037
.atelier:hover {
    background: #020070;
}


body.page-id-1037
.atelier:hover
.wp-block-image img {
    transform: scale(1.025);
}


body.page-id-1037
.atelier:hover h3 {
    transform: translateX(8px);
}


/* Petite flèche */

body.page-id-1037
.atelier h3::after {
    content: "↗";

    display: inline-block;

    margin-left: 12px;

    font-size: 0.7em;
    font-weight: 300;

    opacity: 0;

    transform: translate(-5px, 5px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


body.page-id-1037
.atelier:hover h3::after {
    opacity: 1;

    transform: translate(0, 0);
}


/* ==========================================================
   9. ATELIERS — LIEU / DATE / PUBLIC
   ========================================================== */

body.page-id-1037
.atelier
.atelier-meta {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 30px 0 !important;
    padding: 0 !important;

    gap: 25px !important;
}


body.page-id-1037
.atelier
.atelier-meta
.wp-block-column {
    margin: 0 !important;
}


/* Labels */

body.page-id-1037
.atelier
.atelier-meta-label {
    margin: 0 0 6px 0 !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-align: left !important;

    color: rgba(255, 254, 248, 0.6) !important;
}


/* Valeurs */

body.page-id-1037
.atelier
.atelier-meta-value {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    text-align: left !important;

    color: #fffef8 !important;
}


/* ==========================================================
   10. CITATIONS
   ========================================================== */

.citation-notabene,
.citation-reseau {
    position: relative;

    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    padding: 55px 0 60px 150px !important;

    margin: 25px 0 35px 0 !important;
}


/* Trait gauche */

.citation-notabene::before,
.citation-reseau::before {
    content: "";

    position: absolute;

    left: 0;
    top: 67px;

    width: 80px;
    height: 3px;

    background: #111111;
}


.citation-notabene p,
.citation-reseau p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-weight: 400;

    text-align: left !important;

    letter-spacing: -0.02em;
}


/* Citation principale */

.citation-notabene p {
    font-size: 48px;
    line-height: 1.12;
}


/* Deuxième citation */

.citation-reseau p {
    font-size: 40px;
    line-height: 1.15;
}


/* ==========================================================
   11. À PROPOS
   ========================================================== */

body.page-id-1037
.texte-apropos {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


body.page-id-1037
.texte-apropos p {
    width: 100% !important;
    max-width: none !important;
}


/* ==========================================================
   12. SALOMÉ JEKO
   ========================================================== */

body.page-id-1037
.portrait-salome {
    width: 100% !important;
    max-width: none !important;

    background: #111111;
    color: #fffef8;

    padding: 55px !important;

    box-sizing: border-box;
}


body.page-id-1037
.portrait-salome h3,

body.page-id-1037
.portrait-salome h4,

body.page-id-1037
.portrait-salome p {
    color: #fffef8 !important;
}


/* Nom */

body.page-id-1037
.portrait-salome h3 {
    margin-top: 0 !important;
    margin-bottom: 30px !important;

    font-size: 42px;
    line-height: 1;
}


/* Bio */

body.page-id-1037
.portrait-salome p {
    margin-top: 0;

    font-size: 18px;
    line-height: 1.5;

    text-align: justify !important;
}


/* Colonnes */

body.page-id-1037
.portrait-salome
.wp-block-columns {
    gap: 55px !important;

    align-items: flex-start !important;

    margin-bottom: 0 !important;
}


/* Photo */

body.page-id-1037
.portrait-salome
.wp-block-image {
    margin: 0 !important;
}


body.page-id-1037
.portrait-salome
.wp-block-image img {
    display: block;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
}


.bio-salome {
    width: 100% !important;
    max-width: none !important;
}


/* ==========================================================
   13. TABLETTE
   ========================================================== */

@media (max-width: 1280px) {

    body.page-id-1037 .contenu-principal,
    body.page-id-1037 .video-banner {
        width: calc(100vw - 40px) !important;
        max-width: none !important;
    }
}


/* ==========================================================
   14. MOBILE
   ========================================================== */

@media (max-width: 800px) {


    /* ------------------------------------------------------
       VIDÉO
       ------------------------------------------------------ */

    body.page-id-1037
    .video-banner {
        margin-top: 25px !important;
        margin-bottom: 45px !important;
    }


    body.page-id-1037
    .video-banner
    .wp-block-embed__wrapper {
        height: 190px !important;
    }


    body.page-id-1037
    .video-banner iframe {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }


    /* ------------------------------------------------------
       TITRES DE RUBRIQUES
       ------------------------------------------------------ */

    body.page-id-1037
    .contenu-principal h2 {
        font-size: 23px !important;

        /* Toujours regular sur mobile */
        font-weight: 400 !important;

        letter-spacing: 0.03em !important;

        padding-bottom: 16px !important;
        margin-bottom: 30px !important;

        border-bottom: 3px solid #111111 !important;
    }


    /* ------------------------------------------------------
       PROJETS
       ------------------------------------------------------ */

    body.page-id-1037
    .projet-info {
        padding: 20px;

        font-size: 16px;
    }


    /* ------------------------------------------------------
       CONTACT
       ------------------------------------------------------ */

    body.page-id-1037
    .contact-notabene {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 20px 0 35px 0 !important;

        padding: 30px 0 !important;

        gap: 28px !important;

        align-items: flex-start !important;
    }


    body.page-id-1037
    .contact-notabene
    .wp-block-column:first-child,

    body.page-id-1037
    .contact-notabene
    .wp-block-column:last-child {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    body.page-id-1037
    .contact-notabene
    .contact-accroche {
        max-width: 100% !important;

        font-size: 38px !important;
        line-height: 1.04 !important;
    }


    body.page-id-1037
    .contact-notabene
    .contact-titre {
        margin: 0 !important;

        font-size: 24px !important;
    }


    body.page-id-1037
    .contact-notabene
    .contact-infos {
        margin-top: 0 !important;

        font-size: 17px !important;
    }


    /* ------------------------------------------------------
       EXPERTISES
       ------------------------------------------------------ */

    body.page-id-1037
    .expertises-liste
    .expertise-item {
        width: 100% !important;

        padding:
            17px 10px
            17px 45px !important;

        background: transparent !important;
    }


    /* + mobile */

    body.page-id-1037
    .expertises-liste
    .expertise-item::after {
        left: 5px !important;
        right: auto !important;

        font-size: 30px !important;

        color: #111111 !important;

        transform:
            translateY(-50%)
            rotate(0deg) !important;
    }


    /* Titre expertise */

    body.page-id-1037
    .expertises-liste
    .expertise-item
    .expertise-titre {
        font-size: 21px !important;
        line-height: 1.15 !important;

        color: #111111 !important;
    }


    /* Détails visibles sur mobile */

    body.page-id-1037
    .expertises-liste
    .expertise-item
    .expertise-detail {
        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        opacity: 1 !important;

        margin-top: 9px !important;

        font-size: 16px !important;
        line-height: 1.4 !important;

        color: #111111 !important;
    }


    body.page-id-1037
    .expertises-liste
    .expertise-item
    .expertise-detail p {
        color: #111111 !important;
    }


    /* Neutraliser hover sur mobile */

    body.page-id-1037
    .expertises-liste
    .expertise-item:hover {
        background: transparent !important;
    }


    body.page-id-1037
    .expertises-liste
    .expertise-item:hover
    .expertise-titre,

    body.page-id-1037
    .expertises-liste
    .expertise-item:hover
    .expertise-detail,

    body.page-id-1037
    .expertises-liste
    .expertise-item:hover p {
        color: #111111 !important;
    }


    body.page-id-1037
    .expertises-liste
    .expertise-item:hover::after {
        color: #111111 !important;

        transform:
            translateY(-50%)
            rotate(0deg) !important;
    }


    /* ------------------------------------------------------
       ATELIERS
       ------------------------------------------------------ */

    body.page-id-1037
    .atelier {
        padding: 22px;

        min-height: auto;
    }


    body.page-id-1037
    .atelier h3 {
        font-size: 30px;
    }


    body.page-id-1037
    .atelier:hover {
        background: #111111;
    }


    body.page-id-1037
    .atelier:hover
    .wp-block-image img {
        transform: none;
    }


    body.page-id-1037
    .atelier:hover h3 {
        transform: none;
    }


    body.page-id-1037
    .atelier h3::after {
        display: none;
    }


    /* Meta ateliers */

    body.page-id-1037
    .atelier
    .atelier-meta {
        gap: 15px !important;

        margin-bottom: 24px !important;
    }


    body.page-id-1037
    .atelier
    .atelier-meta-label {
        font-size: 9px !important;
    }


    body.page-id-1037
    .atelier
    .atelier-meta-value {
        font-size: 13px !important;
    }


    /* ------------------------------------------------------
       CITATIONS
       ------------------------------------------------------ */

    .citation-notabene,
    .citation-reseau {
        padding: 40px 0 !important;

        margin: 15px 0 25px 0 !important;
    }


    .citation-notabene::before,
    .citation-reseau::before {
        position: relative;

        display: block;

        left: auto;
        top: auto;

        width: 60px;
        height: 3px;

        margin-bottom: 25px;

        background: #111111;
    }


    .citation-notabene p {
        font-size: 32px;
        line-height: 1.15;
    }


    .citation-reseau p {
        font-size: 28px;
        line-height: 1.18;
    }


    /* ------------------------------------------------------
       SALOMÉ
       ------------------------------------------------------ */

    body.page-id-1037
    .portrait-salome {
        padding: 30px !important;
    }


    body.page-id-1037
    .portrait-salome
    .wp-block-columns {
        gap: 30px !important;
    }


    body.page-id-1037
    .portrait-salome h3 {
        font-size: 34px;
    }


    body.page-id-1037
    .portrait-salome p {
        font-size: 17px;
        line-height: 1.5;

        text-align: left !important;
    }


    /* ------------------------------------------------------
       LOGO
       ------------------------------------------------------ */

    body.page-id-1037
    .logo-notabene {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        overflow: visible !important;
    }


    body.page-id-1037
    .logo-notabene img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }
}
/* ==========================================================
   ATELIERS — VERSION DÉPLIABLE
   À AJOUTER À LA FIN DU CSS EXISTANT
   ========================================================== */


/* ----------------------------------------------------------
   1. CARTES ATELIERS
   Même hauteur au repos
   ---------------------------------------------------------- */

body.page-id-1037 .atelier {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 560px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* ----------------------------------------------------------
   2. IMAGES
   Même hauteur dans toutes les cartes
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.wp-block-image {
    width: 100% !important;
    height: 220px !important;

    margin: 0 0 28px 0 !important;

    overflow: hidden !important;
}


body.page-id-1037
.atelier
.wp-block-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* ----------------------------------------------------------
   3. META
   LIEU / DATE / PUBLIC
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-meta {
    min-height: 50px !important;

    margin-bottom: 25px !important;
}


/* ----------------------------------------------------------
   4. TITRES
   Même zone pour garder les cartes alignées
   ---------------------------------------------------------- */

body.page-id-1037
.atelier h3 {
    min-height: 76px !important;

    margin-top: 0 !important;
    margin-bottom: 15px !important;
}


/* ----------------------------------------------------------
   5. BLOC DÉPLIANT
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-details {
    width: 100% !important;

    /* pousse le + vers le bas de la carte */
    margin-top: auto !important;

    color: #fffef8 !important;
}


/* ----------------------------------------------------------
   6. LIGNE DU +
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-details summary {
    display: flex !important;

    width: 100% !important;

    justify-content: flex-end !important;
    align-items: center !important;

    margin: 12px 0 0 0 !important;
    padding: 8px 0 0 0 !important;

    cursor: pointer !important;

    list-style: none !important;

    color: #fffef8 !important;

    /* Cache le + écrit dans Gutenberg */
    font-size: 0 !important;
}


/* Enlever le petit triangle natif */

body.page-id-1037
.atelier
.atelier-details summary::-webkit-details-marker {
    display: none !important;
}

body.page-id-1037
.atelier
.atelier-details summary::marker {
    content: "" !important;
}


/* ----------------------------------------------------------
   7. NOTRE +
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-details summary::after {
    content: "+" !important;

    display: block !important;

    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 200 !important;

    color: #fffef8 !important;

    transform: rotate(0deg) !important;
    transform-origin: center center !important;

    transition:
        transform 0.3s ease,
        color 0.25s ease !important;
}


/* ----------------------------------------------------------
   8. QUAND ON CLIQUE :
   + devient ×
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-details[open]
summary::after {
    transform: rotate(45deg) !important;
}


/* ----------------------------------------------------------
   9. TEXTE QUI APPARAÎT
   ---------------------------------------------------------- */

body.page-id-1037
.atelier
.atelier-details
summary ~ * {
    margin-top: 18px !important;

    font-size: 17px !important;
    line-height: 1.5 !important;

    text-align: left !important;

    color: #fffef8 !important;
}


body.page-id-1037
.atelier
.atelier-details
p {
    color: #fffef8 !important;
}


/* ----------------------------------------------------------
   10. HOVER
   On garde noir → bleu
   ---------------------------------------------------------- */

body.page-id-1037
.atelier:hover {
    background: #020070 !important;
}


body.page-id-1037
.atelier:hover
.wp-block-image img {
    transform: scale(1.025);
}


/* ----------------------------------------------------------
   11. MOBILE
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    body.page-id-1037 .atelier {
        height: auto !important;
        min-height: 0 !important;

        padding: 24px !important;
    }


    body.page-id-1037
    .atelier
    .wp-block-image {
        height: 190px !important;
    }


    body.page-id-1037
    .atelier h3 {
        min-height: 0 !important;
    }


    body.page-id-1037
    .atelier
    .atelier-meta {
        min-height: 0 !important;
    }


    body.page-id-1037
    .atelier
    .atelier-details summary::after {
        font-size: 32px !important;
    }


    /* On garde le fond noir sur écran tactile */

    body.page-id-1037
    .atelier:hover {
        background: #111111 !important;
    }


    body.page-id-1037
    .atelier:hover
    .wp-block-image img {
        transform: none !important;
    }
}
/* ==========================================================
   CORRECTION ATELIERS
   Moins de vide + cartes naturelles + détails
   ========================================================== */


/* CARTE : on supprime la hauteur artificielle */

body.page-id-1037 .atelier {
    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    padding-bottom: 28px !important;
}


/* On ne réserve plus 76px au titre */

body.page-id-1037
.atelier h3 {
    min-height: 0 !important;

    margin-bottom: 22px !important;
}


/* Le texte visible ne doit pas créer trop d'espace */

body.page-id-1037
.atelier > p {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}


/* =========================================
   BLOC DÉTAILS
   ========================================= */

body.page-id-1037
.atelier
.atelier-details {
    width: 100% !important;

    /* IMPORTANT : on annule le auto précédent */
    margin-top: 10px !important;

    padding: 0 !important;

    color: #fffef8 !important;
}


/* =========================================
   +
   ========================================= */

body.page-id-1037
.atelier
.atelier-details summary {
    display: flex !important;

    justify-content: flex-end !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    cursor: pointer !important;

    list-style: none !important;

    font-size: 0 !important;
}


body.page-id-1037
.atelier
.atelier-details summary::-webkit-details-marker {
    display: none !important;
}


body.page-id-1037
.atelier
.atelier-details summary::marker {
    content: "" !important;
}


/* Notre + */

body.page-id-1037
.atelier
.atelier-details summary::after {
    content: "+" !important;

    display: block !important;

    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 200 !important;

    color: #fffef8 !important;

    transform: rotate(0deg) !important;

    transition: transform 0.3s ease !important;
}


/* + devient × */

body.page-id-1037
.atelier
.atelier-details[open]
summary::after {
    transform: rotate(45deg) !important;
}


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

body.page-id-1037
.atelier
.atelier-details[open] {
    margin-top: 10px !important;
}


body.page-id-1037
.atelier
.atelier-details
summary ~ * {
    margin-top: 18px !important;
    margin-bottom: 0 !important;

    color: #fffef8 !important;

    font-size: 17px !important;
    line-height: 1.5 !important;

    text-align: left !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    body.page-id-1037 .atelier {
        min-height: 0 !important;
        height: auto !important;

        padding-bottom: 22px !important;
    }

    body.page-id-1037
    .atelier
    .atelier-details summary::after {
        font-size: 32px !important;
    }
}
/* ==========================================================
   ATELIERS — CORRECTION FINALE DU BLOC DÉPLIANT
   ========================================================== */


/* 1. SUPPRIMER LA GRANDE HAUTEUR VIDE */

body.page-id-1037 .atelier {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 28px !important;
}


/* Le bloc détails ne doit PLUS être poussé en bas */

body.page-id-1037
.atelier
.atelier-details {
    margin-top: 12px !important;
    padding: 0 !important;

    width: 100% !important;
}


/* 2. LE BOUTON */

body.page-id-1037
.atelier
.atelier-details > summary {
    display: flex !important;

    justify-content: flex-end !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 5px 0 !important;

    cursor: pointer !important;

    list-style: none !important;

    /* cache le texte "Ils s'appuie..." */
    font-size: 0 !important;
}


/* Enlever la flèche Gutenberg */

body.page-id-1037
.atelier
.atelier-details > summary::-webkit-details-marker {
    display: none !important;
}


/* 3. AFFICHER NOTRE + */

body.page-id-1037
.atelier
.atelier-details > summary::after {
    content: "+" !important;

    display: block !important;

    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 200 !important;

    color: #fffef8 !important;

    transform: rotate(0deg) !important;

    transition: transform 0.3s ease !important;
}


/* 4. + DEVIENT × QUAND OUVERT */

body.page-id-1037
.atelier
.atelier-details[open] > summary::after {
    transform: rotate(45deg) !important;
}


/* 5. FORCER L'AFFICHAGE DU CONTENU LORSQUE OUVERT */

body.page-id-1037
.atelier
.atelier-details[open] > *:not(summary) {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    margin-top: 18px !important;

    color: #fffef8 !important;
}


/* Paragraphes du contenu déplié */

body.page-id-1037
.atelier
.atelier-details[open] p {
    display: block !important;

    margin: 0 0 15px 0 !important;

    color: #fffef8 !important;

    font-size: 17px !important;
    line-height: 1.5 !important;

    text-align: left !important;
}


/* 6. SUPPRIMER L'ESPACE ARTIFICIEL SOUS LES TITRES */

body.page-id-1037
.atelier h3 {
    min-height: 0 !important;
}


/* 7. MOBILE */

@media (max-width: 800px) {

    body.page-id-1037 .atelier {
        min-height: 0 !important;
        height: auto !important;
    }

    body.page-id-1037
    .atelier
    .atelier-details > summary::after {
        font-size: 32px !important;
    }
}
/* ==========================================================
   ATELIERS — FORCER LES 2 CARTES À LA MÊME HAUTEUR
   À AJOUTER TOUT EN BAS DU CSS
   ========================================================== */


/* La rangée Gutenberg qui contient les cartes */
body.page-id-1037
.wp-block-columns:has(.atelier) {
    align-items: stretch !important;
}


/* Chaque colonne contenant un atelier */
body.page-id-1037
.wp-block-column:has(.atelier) {
    display: flex !important;
    flex-direction: column !important;
}


/* Le groupe atelier remplit toute la hauteur de sa colonne */
body.page-id-1037
.wp-block-column:has(.atelier) > .atelier,
body.page-id-1037
.wp-block-column:has(.atelier) > .wp-block-group.atelier {
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    box-sizing: border-box !important;
}


/* Le bloc détails reste après le texte */
body.page-id-1037
.atelier
.atelier-details {
    margin-top: 15px !important;
}


/* Le + reste en bas à droite de la carte */
body.page-id-1037
.atelier
.atelier-details > summary {
    width: 100% !important;

    display: flex !important;
    justify-content: flex-end !important;
}


/* MOBILE : on libère les hauteurs */

@media (max-width: 800px) {

    body.page-id-1037
    .wp-block-columns:has(.atelier) {
        align-items: initial !important;
    }

    body.page-id-1037
    .wp-block-column:has(.atelier) {
        display: block !important;
    }

    body.page-id-1037
    .wp-block-column:has(.atelier) > .atelier,
    body.page-id-1037
    .wp-block-column:has(.atelier) > .wp-block-group.atelier {
        height: auto !important;
    }
}
/* TEST — EXPERTISES EN 38 PX */

body.page-id-1037
.expertises-liste
.expertise-item
.expertise-titre {
    font-size: 38px !important;
    line-height: 1.02 !important;
    font-weight: 400 !important;
    letter-spacing: -0.025em !important;
}
/* ==========================================================
   CLIENTS — GRILLE TYPOGRAPHIQUE
   À AJOUTER À LA FIN DU CSS
   ========================================================== */

body.page-id-1037 .clients-liste {
    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 55px !important;
    row-gap: 0 !important;

    width: 100% !important;

    margin: 0 0 70px 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Chaque nom */

body.page-id-1037
.clients-liste li {
    position: relative;

    margin: 0 !important;
    padding: 14px 0 !important;

    border-bottom: 1px solid rgba(17, 17, 17, 0.18);

    list-style: none !important;

    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #111111 !important;

    cursor: default;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


/* Supprimer les puces éventuelles */

body.page-id-1037
.clients-liste li::marker {
    content: "" !important;
}


/* Hover */

body.page-id-1037
.clients-liste li:hover {
    color: #020070 !important;
    padding-left: 8px !important;
}


/* Si certains clients sont des liens */

body.page-id-1037
.clients-liste li a {
    color: inherit !important;
    text-decoration: none !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1000px) {

    body.page-id-1037 .clients-liste {
        grid-template-columns: repeat(2, 1fr) !important;

        column-gap: 40px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    body.page-id-1037 .clients-liste {
        grid-template-columns: 1fr !important;

        margin-bottom: 50px !important;
    }

    body.page-id-1037
    .clients-liste li {
        padding: 11px 0 !important;

        font-size: 17px !important;
    }

    /* Pas de déplacement au tactile */

    body.page-id-1037
    .clients-liste li:hover {
        padding-left: 0 !important;
    }
}
/* ==========================================================
   CLIENTS — VERSION PLUS COMPACTE ET DISCRÈTE
   ========================================================== */

body.page-id-1037 .clients-liste {
    column-gap: 55px !important;

    margin-top: 0 !important;
    margin-bottom: 50px !important;
}


/* NOMS DES CLIENTS */

body.page-id-1037
.clients-liste li {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;

    /* Beaucoup moins de hauteur entre les clients */
    padding: 8px 0 !important;

    color: #111111 !important;

    /* Trait beaucoup plus discret */
    border-bottom:
        1px solid rgba(17, 17, 17, 0.10) !important;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease !important;
}


/* HOVER BLEU */

body.page-id-1037
.clients-liste li:hover {
    color: #020070 !important;

    /* mouvement très léger */
    padding-left: 4px !important;
}


/* LIENS ÉVENTUELS */

body.page-id-1037
.clients-liste li a {
    color: inherit !important;
    text-decoration: none !important;
}


/* MOBILE */

@media (max-width: 600px) {

    body.page-id-1037
    .clients-liste li {
        font-size: 14px !important;
        padding: 7px 0 !important;
    }

    body.page-id-1037
    .clients-liste li:hover {
        padding-left: 0 !important;
    }
}
/* ==========================================================
   CLIENTS — VERSION TRÈS COMPACTE
   ========================================================== */

body.page-id-1037 .clients-liste {
    column-gap: 45px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}


/* NOMS DES CLIENTS */

body.page-id-1037
.clients-liste li {
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;

    padding: 5px 0 !important;

    margin: 0 !important;

    color: #111111 !important;

    /* PLUS AUCUN TRAIT */
    border: none !important;
    border-bottom: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease !important;
}


/* HOVER : BLEU + TRÈS LÉGER DÉCALAGE */

body.page-id-1037
.clients-liste li:hover {
    color: #020070 !important;

    padding-left: 0 !important;
    transform: translateX(3px);
}


/* Si les noms sont des liens */

body.page-id-1037
.clients-liste li a {
    color: inherit !important;
    text-decoration: none !important;
}


/* MOBILE */

@media (max-width: 600px) {

    body.page-id-1037 .clients-liste {
        column-gap: 0 !important;
    }

    body.page-id-1037
    .clients-liste li {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }

    body.page-id-1037
    .clients-liste li:hover {
        transform: none !important;
    }
}
/* ==========================================================
   CLIENTS — ORDRE ALPHABÉTIQUE VERTICAL
   ========================================================== */

body.page-id-1037 .clients-liste {
    display: block !important;

    column-count: 3 !important;
    column-gap: 45px !important;

    width: 100% !important;

    margin: 0 0 40px 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Chaque client */

body.page-id-1037
.clients-liste li {
    display: block !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;

    margin: 0 !important;
    padding: 5px 0 !important;

    border: none !important;

    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;

    color: #111111 !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease !important;
}


/* Bleu + petit mouvement */

body.page-id-1037
.clients-liste li:hover {
    color: #020070 !important;

    padding-left: 0 !important;

    transform: translateX(3px);
}


/* Si certains clients sont des liens */

body.page-id-1037
.clients-liste li a {
    color: inherit !important;
    text-decoration: none !important;
}


/* TABLETTE */

@media (max-width: 1000px) {

    body.page-id-1037 .clients-liste {
        column-count: 2 !important;
        column-gap: 35px !important;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    body.page-id-1037 .clients-liste {
        column-count: 1 !important;
    }

    body.page-id-1037
    .clients-liste li {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }

    body.page-id-1037
    .clients-liste li:hover {
        transform: none !important;
    }
}
/* ==========================================================
   CLIENTS — LISTE CONTINUE ET COMPACTE
   ========================================================== */

body.page-id-1037 .clients-liste {
    display: block !important;

    column-count: auto !important;
    columns: auto !important;

    width: 100% !important;
    max-width: 950px !important;

    margin: 0 0 50px 0 !important;
    padding: 0 !important;

    list-style: none !important;

    font-size: 14px !important;
    line-height: 1.65 !important;

    text-align: left !important;
}


/* Chaque client se place à la suite du précédent */

body.page-id-1037 .clients-liste li {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;

    color: #111111 !important;

    transform: none !important;
}


/* Virgule automatique entre les clients */

body.page-id-1037 .clients-liste li:not(:last-child)::after {
    content: ", ";
}


/* Point final */

body.page-id-1037 .clients-liste li:last-child::after {
    content: ".";
}


/* Petit bleu au survol, sans mouvement */

body.page-id-1037 .clients-liste li:hover {
    color: #020070 !important;
    transform: none !important;
    padding: 0 !important;
}


/* MOBILE */

@media (max-width: 600px) {

    body.page-id-1037 .clients-liste {
        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    body.page-id-1037 .clients-liste li {
        font-size: 13px !important;
    }
}
/* =========================================
   CITATIONS — TRAIT PLUS ÉPAIS
   rappel du logo Nota Bene
   ========================================= */

body.page-id-1037 .citation-notabene::before,
body.page-id-1037 .citation-reseau::before {
    height: 7px !important;
    background: #111111 !important;
}
/* =========================================
   CITATIONS — TRAIT SIGNATURE
   ========================================= */

body.page-id-1037 .citation-notabene::before,
body.page-id-1037 .citation-reseau::before {
    width: 55px !important;
    height: 9px !important;
    background: #111111 !important;
}


/* MOBILE */

@media (max-width: 800px) {

    body.page-id-1037 .citation-notabene::before,
    body.page-id-1037 .citation-reseau::before {
        width: 45px !important;
        height: 8px !important;
    }
}
/* =========================================
   CITATIONS — TRAIT SIGNATURE FINAL
   ========================================= */

body.page-id-1037 .citation-notabene::before,
body.page-id-1037 .citation-reseau::before {
    width: 45px !important;
    height: 11px !important;
    background: #111111 !important;
}


/* MOBILE */

@media (max-width: 800px) {

    body.page-id-1037 .citation-notabene::before,
    body.page-id-1037 .citation-reseau::before {
        width: 38px !important;
        height: 9px !important;
    }
}
/* =========================================
   CITATIONS — AJUSTEMENT FINAL
   ========================================= */

/* Trait un peu plus court */
body.page-id-1037 .citation-notabene::before,
body.page-id-1037 .citation-reseau::before {
    width: 42px !important;
    height: 11px !important;
}


/* Rapprocher le trait du texte */
body.page-id-1037 .citation-notabene,
body.page-id-1037 .citation-reseau {
    column-gap: 55px !important;
    gap: 55px !important;
}


/* MOBILE */
@media (max-width: 800px) {

    body.page-id-1037 .citation-notabene::before,
    body.page-id-1037 .citation-reseau::before {
        width: 36px !important;
        height: 9px !important;
    }

    body.page-id-1037 .citation-notabene,
    body.page-id-1037 .citation-reseau {
        column-gap: 25px !important;
        gap: 25px !important;
    }
}
/* =========================================
   CONTACT — MAIL BLEU AU SURVOL
   ========================================= */

body.page-id-1037 .contact-notabene a,
body.page-id-1037 .contact-notabene a:link,
body.page-id-1037 .contact-notabene a:visited {
    color: #111111 !important;
    text-decoration-color: currentColor !important;

    transition: color 0.25s ease !important;
}


/* HOVER + CLAVIER */

body.page-id-1037 .contact-notabene a:hover,
body.page-id-1037 .contact-notabene a:focus {
    color: #020070 !important;
    text-decoration-color: #020070 !important;
}
/* CITATIONS — MÊME TYPO QUE LE RESTE DU SITE */

body.page-id-1037 .citation-notabene p,
body.page-id-1037 .citation-reseau p {
    font-family: inherit !important;

    font-weight: 400 !important;
    font-style: normal !important;

    font-size: 32px !important;
    line-height: 1.22 !important;

    letter-spacing: -0.02em !important;
}
/* =========================================
   CITATION — VERSION PLUS FINE
   ========================================= */

body.page-id-1037 .citation-notabene p,
body.page-id-1037 .citation-reseau p {
    font-family: inherit !important;

    font-size: 28px !important;
    line-height: 1.28 !important;

    font-weight: 300 !important;
    letter-spacing: -0.015em !important;

    max-width: 760px !important;
}
/* RAPPROCHER LE TRAIT DE LA CITATION */

body.page-id-1037 .citation-notabene,
body.page-id-1037 .citation-reseau {
    gap: 30px !important;
    column-gap: 30px !important;
}
/* =========================================
   CITATION — PLUS ÉDITORIALE
   ========================================= */

body.page-id-1037 .citation-notabene p,
body.page-id-1037 .citation-reseau p {
    font-family: inherit !important;

    font-size: 31px !important;
    line-height: 1.18 !important;

    font-weight: 300 !important;
    letter-spacing: -0.025em !important;

    max-width: 820px !important;
}
/* ==========================================================
   NOTA BENE — CITATION SUR VIDÉO
   ========================================================== */


/* BANNIÈRE VIDÉO */

body.page-id-1037 .hero-video-notabene {
    position: relative !important;

    min-height: 540px !important;

    display: flex !important;
    align-items: center !important;

    padding: 70px 8% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* VIDÉO PLEIN CADRE */

body.page-id-1037
.hero-video-notabene video {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* CONTENU DE LA BANNIÈRE */

body.page-id-1037
.hero-video-notabene
.wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 1050px !important;

    margin: 0 auto !important;
}


/* ==========================================================
   CITATION
   ========================================================== */

body.page-id-1037
.hero-video-notabene
.citation-notabene {
    display: flex !important;
    align-items: flex-start !important;

    gap: 32px !important;

    width: 100% !important;
    max-width: 900px !important;

    margin: 0 !important;

    color: #fff !important;
}


/* LE PETIT TRAIT */

body.page-id-1037
.hero-video-notabene
.citation-notabene::before {
    content: "" !important;

    display: block !important;
    flex: 0 0 42px !important;

    width: 42px !important;
    height: 11px !important;

    margin-top: 12px !important;

    background: #fff !important;
}


/* TEXTE */

body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    max-width: 760px !important;

    margin: 0 !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
    font-weight: 400 !important;

    letter-spacing: -0.02em !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

    body.page-id-1037 .hero-video-notabene {
        min-height: 470px !important;

        padding: 50px 25px !important;
    }


    body.page-id-1037
    .hero-video-notabene
    .citation-notabene {
        gap: 20px !important;
    }


    body.page-id-1037
    .hero-video-notabene
    .citation-notabene::before {
        flex-basis: 34px !important;

        width: 34px !important;
        height: 9px !important;

        margin-top: 8px !important;
    }


    body.page-id-1037
    .hero-video-notabene
    .citation-notabene p {
        font-size: 23px !important;
        line-height: 1.25 !important;
    }
}
/* ==========================================================
   HERO VIDÉO — VERSION PLUS HORIZONTALE
   ========================================================== */

body.page-id-1037 .hero-video-notabene {
    width: 86% !important;
    max-width: 1320px !important;

    min-height: 430px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 65px 8% !important;

    box-sizing: border-box !important;
}


/* Contenu intérieur plus large */

body.page-id-1037
.hero-video-notabene
.wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;
}


/* Citation plus large */

body.page-id-1037
.hero-video-notabene
.citation-notabene {
    width: 100% !important;
    max-width: 1000px !important;

    gap: 35px !important;

    margin: 0 !important;
}


/* Texte : beaucoup moins étroit */

body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    width: 100% !important;
    max-width: 850px !important;

    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}


/* MOBILE */

@media (max-width: 800px) {

    body.page-id-1037 .hero-video-notabene {
        width: calc(100% - 30px) !important;

        min-height: 430px !important;

        padding: 45px 25px !important;
    }

    body.page-id-1037
    .hero-video-notabene
    .citation-notabene {
        gap: 20px !important;
    }

    body.page-id-1037
    .hero-video-notabene
    .citation-notabene p {
        font-size: 23px !important;
        line-height: 1.24 !important;
    }
}
/* =========================================
   CITATION VIDÉO — TEXTE NOIR
   ========================================= */

body.page-id-1037
.hero-video-notabene
.citation-notabene,
body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    color: #111111 !important;
}


/* Trait noir également */

body.page-id-1037
.hero-video-notabene
.citation-notabene::before {
    background: #111111 !important;
}
/* ==========================================================
   HERO VIDEO NOTA BENE — BLEU + TEXTE NOIR + HOVER
   ========================================================== */


/* TEXTE NOIR */

body.page-id-1037
.hero-video-notabene
.citation-notabene,
body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    color: #111111 !important;
}


/* TRAIT NOIR */

body.page-id-1037
.hero-video-notabene
.citation-notabene::before {
    background: #111111 !important;
}


/* La superposition bleue :
   transition douce au survol */

body.page-id-1037
.hero-video-notabene
.wp-block-cover__background {
    transition: opacity 0.6s ease !important;
}


/* Au survol :
   on révèle davantage la vidéo */

body.page-id-1037
.hero-video-notabene:hover
.wp-block-cover__background {
    opacity: 0.38 !important;
}


/* La vidéo elle-même bouge très légèrement */

body.page-id-1037
.hero-video-notabene video {
    transform: scale(1.01);
    transition:
        transform 1.2s ease,
        filter 0.8s ease !important;
}


/* Au survol : très léger zoom */

body.page-id-1037
.hero-video-notabene:hover video {
    transform: scale(1.035);
}


/* MOBILE :
   pas d'effet hover inutile */

@media (max-width: 800px) {

    body.page-id-1037
    .hero-video-notabene:hover
    .wp-block-cover__background {
        opacity: inherit !important;
    }

    body.page-id-1037
    .hero-video-notabene:hover video {
        transform: scale(1.01);
    }
}
/* ==========================================================
   CITATION VIDÉO — TEXTE 400 + EFFET BLEU AU SURVOL
   ========================================================== */


/* Texte plus léger */

body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    font-weight: 400 !important;
}


/* Préparation de la bannière */

body.page-id-1037
.hero-video-notabene {
    position: relative !important;
}


/* Le calque blanc actuel évolue doucement */

body.page-id-1037
.hero-video-notabene
.wp-block-cover__background {
    transition:
        background-color 0.7s ease,
        opacity 0.7s ease !important;
}


/* AU SURVOL :
   le voile devient bleu et reste assez transparent */

body.page-id-1037
.hero-video-notabene:hover
.wp-block-cover__background {
    background-color: #020070 !important;
    opacity: 0.28 !important;
}


/* Texte toujours noir */

body.page-id-1037
.hero-video-notabene
.citation-notabene,
body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    color: #111111 !important;
}


/* Trait toujours noir */

body.page-id-1037
.hero-video-notabene
.citation-notabene::before {
    background: #111111 !important;
}


/* MOBILE :
   on garde la version claire, sans effet hover */

@media (max-width: 800px) {

    body.page-id-1037
    .hero-video-notabene:hover
    .wp-block-cover__background {
        background-color: #ffffff !important;
        opacity: 0.55 !important;
    }
}
/* =========================================
   VIDÉO — HOVER BLEU PLUS LÉGER
   ========================================= */

body.page-id-1037
.hero-video-notabene:hover
.wp-block-cover__background {
    background-color: #020070 !important;
    opacity: 0.16 !important;
}
/* =========================================
   VIDÉO — NEUTRALISER LES TONS JAUNES
   ========================================= */

body.page-id-1037
.hero-video-notabene video {
    filter: saturate(0.55) !important;
}
/* =========================================
   VIDÉO — TEXTE BLANC AU SURVOL
   ========================================= */

/* Transition douce du texte */
body.page-id-1037
.hero-video-notabene
.citation-notabene,
body.page-id-1037
.hero-video-notabene
.citation-notabene p {
    transition: color 0.45s ease !important;
}


/* Transition douce du trait */
body.page-id-1037
.hero-video-notabene
.citation-notabene::before {
    transition: background-color 0.45s ease !important;
}


/* AU SURVOL : texte blanc */
body.page-id-1037
.hero-video-notabene:hover
.citation-notabene,
body.page-id-1037
.hero-video-notabene:hover
.citation-notabene p {
    color: #ffffff !important;
}


/* AU SURVOL : trait blanc */
body.page-id-1037
.hero-video-notabene:hover
.citation-notabene::before {
    background-color: #ffffff !important;
}
/* =========================================
   VIDÉO — BLEU PLUS PRÉSENT AU SURVOL
   ========================================= */

body.page-id-1037
.hero-video-notabene:hover
.wp-block-cover__background {
    background-color: #020070 !important;
    opacity: 0.30 !important;
}
/* =========================================
   VIDÉO — BLEU AU SURVOL 60 %
   ========================================= */

body.page-id-1037
.hero-video-notabene:hover
.wp-block-cover__background {
    background-color: #020070 !important;
    opacity: 0.60 !important;
}
/* =========================================
   PHOTO SALOMÉ — ANIMATION AU SURVOL
   ========================================= */

/* Conteneur de la photo */
body.page-id-1037
.portrait-salome
.wp-block-image {
    position: relative !important;
    overflow: hidden !important;
}


/* Photo */
body.page-id-1037
.portrait-salome
.wp-block-image img {
    display: block !important;

    transform: scale(1) !important;

    transition:
        transform 0.8s ease,
        filter 0.6s ease !important;
}


/* Voile bleu */
body.page-id-1037
.portrait-salome
.wp-block-image::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background: #020070 !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transition: opacity 0.6s ease !important;
}


/* HOVER : léger zoom */
body.page-id-1037
.portrait-salome
.wp-block-image:hover img {
    transform: scale(1.035) !important;
}


/* HOVER : apparition très légère du bleu */
body.page-id-1037
.portrait-salome
.wp-block-image:hover::after {
    opacity: 0.18 !important;
}


/* MOBILE : pas d'effet hover */
@media (max-width: 800px) {

    body.page-id-1037
    .portrait-salome
    .wp-block-image:hover img {
        transform: none !important;
    }

    body.page-id-1037
    .portrait-salome
    .wp-block-image:hover::after {
        opacity: 0 !important;
    }
}
/* ==========================================================
   NOTA BENE — MENU + / VERSION PROPRE
   ========================================================== */


/* ----------------------------------------------------------
   BLOC DETAILS
   ---------------------------------------------------------- */

body.page-id-1037 .menu-notabene {
    position: absolute !important;
    top: 32px !important;
    left: 42px !important;
    z-index: 999 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
}


/* ----------------------------------------------------------
   BOUTON +
   ---------------------------------------------------------- */

body.page-id-1037 .menu-notabene > summary {
    position: relative !important;

    display: block !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    list-style: none !important;
    cursor: pointer !important;

    /* On cache le + tapé dans Gutenberg */
    font-size: 0 !important;
    line-height: 0 !important;

    transform: none !important;
}


/* Suppression de la flèche native */

body.page-id-1037
.menu-notabene > summary::-webkit-details-marker {
    display: none !important;
}

body.page-id-1037
.menu-notabene > summary::marker {
    content: "" !important;
}


/* ----------------------------------------------------------
   + FABRIQUÉ EN CSS
   ---------------------------------------------------------- */

/* Trait horizontal */

body.page-id-1037
.menu-notabene > summary::before {
    content: "" !important;

    position: absolute !important;

    width: 30px !important;
    height: 4px !important;

    left: 0 !important;
    top: 13px !important;

    background-color: #111111 !important;

    opacity: 1 !important;

    transition:
        background-color 0.25s ease,
        transform 0.3s ease !important;
}


/* Trait vertical */

body.page-id-1037
.menu-notabene > summary::after {
    content: "" !important;

    position: absolute !important;

    width: 4px !important;
    height: 30px !important;

    left: 13px !important;
    top: 0 !important;

    background-color: #111111 !important;

    opacity: 1 !important;

    transition:
        background-color 0.25s ease,
        opacity 0.3s ease !important;
}


/* ----------------------------------------------------------
   HOVER DU +
   ---------------------------------------------------------- */

body.page-id-1037
.menu-notabene > summary:hover::before,

body.page-id-1037
.menu-notabene > summary:hover::after {
    background-color: #020070 !important;
}


/* ----------------------------------------------------------
   MENU OUVERT
   + devient —
   ---------------------------------------------------------- */

body.page-id-1037
.menu-notabene[open] > summary::before {
    background-color: #020070 !important;
}

body.page-id-1037
.menu-notabene[open] > summary::after {
    opacity: 0 !important;
}


/* ----------------------------------------------------------
   CONTENU DU MENU
   ---------------------------------------------------------- */

body.page-id-1037
.menu-notabene > *:not(summary) {
    margin-left: 0 !important;
}


/* Paragraphes */

body.page-id-1037
.menu-notabene p {
    margin: 8px 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}


/* Liens */

body.page-id-1037
.menu-notabene a {
    display: inline-block !important;

    color: #111111 !important;

    text-decoration: none !important;

    transition:
        color 0.25s ease,
        transform 0.25s ease !important;
}


/* Liens au hover */

body.page-id-1037
.menu-notabene a:hover {
    color: #020070 !important;

    transform: translateX(4px) !important;
}


/* ----------------------------------------------------------
   DÉFILEMENT DOUX VERS LES SECTIONS
   ---------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}


/* ----------------------------------------------------------
   MOBILE
   Le menu + disparaît complètement
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    body.page-id-1037 .menu-notabene {
        display: none !important;
    }

}
/* =========================================
   MENU + — TRAITS PLUS FINS
   ========================================= */

/* Trait horizontal */
body.page-id-1037
.menu-notabene > summary::before {
    height: 3px !important;
}

/* Trait vertical */
body.page-id-1037
.menu-notabene > summary::after {
    width: 3px !important;
    left: 13.5px !important;
}
/* ==========================================================
   RÉSEAUX SOCIAUX — HAUT À DROITE
   ========================================================== */

body.page-id-1037 .social-notabene {
    position: absolute !important;

    top: 39px !important;
    right: 42px !important;

    z-index: 999 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: auto !important;
}


/* Paragraphe */

body.page-id-1037
.social-notabene p {
    display: flex !important;
    align-items: center !important;

    gap: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    letter-spacing: 0.03em !important;
}


/* Liens */

body.page-id-1037
.social-notabene a {
    display: inline-block !important;

    color: #111111 !important;
    text-decoration: none !important;

    transition:
        color 0.25s ease,
        transform 0.25s ease !important;
}


/* HOVER */

body.page-id-1037
.social-notabene a:hover {
    color: #020070 !important;

    transform: translateY(-2px) !important;
}


/* ==========================================================
   MOBILE
   On les enlève du haut
   ========================================================== */

@media (max-width: 800px) {

    body.page-id-1037 .social-notabene {
        display: none !important;
    }
}
/* =========================================
   MENU + — PLUS DISCRET
   aligné visuellement avec les réseaux
   ========================================= */

body.page-id-1037
.menu-notabene > summary {
    width: 26px !important;
    height: 26px !important;
}


/* Trait horizontal */
body.page-id-1037
.menu-notabene > summary::before {
    width: 21px !important;
    height: 2px !important;

    left: 0 !important;
    top: 10px !important;
}


/* Trait vertical */
body.page-id-1037
.menu-notabene > summary::after {
    width: 2px !important;
    height: 21px !important;

    left: 9.5px !important;
    top: 0 !important;
}
/* =========================================
   CLIENTS — NOMS EN BLEU NOTA BENE
   ========================================= */

body.page-id-1037 .clients-liste li,
body.page-id-1037 .clients-liste li a {
    color: #020070 !important;
}
body.page-id-1037 .clients-liste li:hover,
body.page-id-1037 .clients-liste li:hover a {
    color: #111111 !important;
}
/* =========================================
   ATELIERS — LIEN INSCRIPTION
   ========================================= */

/* Lien blanc et bold */
.atelier-card a,
.ateliers a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;

    display: inline-block !important;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease !important;
}


/* Petite flèche ajoutée automatiquement */
.atelier-card a::after,
.ateliers a::after {
    content: " ↗" !important;

    display: inline-block !important;
    margin-left: 5px !important;

    transition: transform 0.25s ease !important;
}


/* HOVER */
.atelier-card a:hover,
.ateliers a:hover {
    color: #ffffff !important;
    opacity: 1 !important;

    transform: translateX(3px) !important;
}


/* La flèche bouge légèrement */
.atelier-card a:hover::after,
.ateliers a:hover::after {
    transform: translate(3px, -3px) !important;
}


/* Pendant le clic */
.atelier-card a:active,
.ateliers a:active {
    color: #ffffff !important;
    transform: translateX(3px) scale(0.97) !important;
}


/* Empêche le lien visité de devenir gris/noir */
.atelier-card a:visited,
.ateliers a:visited {
    color: #ffffff !important;
}
/* =========================================
   CLIENTS — TRAIT SOUS LE TITRE
   ========================================= */

.clients-titre {
    position: relative !important;
    margin-bottom: 55px !important;
    padding-bottom: 16px !important;
}

.clients-titre::after {
    content: "" !important;
    display: block !important;

    width: 100% !important;
    height: 3px !important;

    background: #111111 !important;

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
}
/* Citation Designers — même largeur de texte que celle du haut */

body.page-id-1037 .citation-designers .wp-block-columns {
    width: 100% !important;
}

body.page-id-1037 .citation-designers .wp-block-column:last-child {
    flex-basis: 720px !important;
    max-width: 720px !important;
}
/* =========================================
   CITATION DESIGNERS — VERSION FINALE
   ========================================= */

body.page-id-1037 .citation-designers-texte {
    /* largeur qui fonctionne */
    width: 100% !important;
    max-width: 850px !important;

    /* même typo que le reste du site */
    font-family: inherit !important;
    font-weight: 400 !important;

    /* nécessaire pour replacer le trait */
    position: relative !important;
}


/* TRAIT À GAUCHE */

body.page-id-1037 .citation-designers-texte::before {
    content: "" !important;

    position: absolute !important;

    width: 46px !important;
    height: 7px !important;

    background: #111111 !important;

    /* placement à gauche du texte */
    left: -165px !important;
    top: 14px !important;
}
/* CITATION DESIGNERS — TRAIT IDENTIQUE À CELUI DU HAUT */

body.page-id-1037 .citation-designers-texte::before {
    content: "" !important;

    position: absolute !important;
    left: -165px !important;
    top: 10px !important;

    width: 42px !important;
    height: 11px !important;

    background: #111111 !important;
}
/* =========================================
   CITATION DESIGNERS — HOVER ÉPURÉ
   ========================================= */

body.page-id-1037 .citation-designers-texte {
    transition:
        color 0.35s ease,
        transform 0.35s ease !important;
}

/* Texte bleu + léger mouvement */
body.page-id-1037 .citation-designers-texte:hover {
    color: #020070 !important;
    transform: translateX(6px) !important;
}

/* Trait */
body.page-id-1037 .citation-designers-texte::before {
    transition:
        background-color 0.35s ease,
        transform 0.35s ease !important;
}

/* Trait bleu au hover */
body.page-id-1037 .citation-designers-texte:hover::before {
    background-color: #020070 !important;
    transform: translateX(-6px) !important;
}
/* ==========================================================
   NOTA BENE — CORRECTIONS MOBILE
   ========================================================== */

@media (max-width: 800px) {


    /* -------------------------------------------------------
       1. MENU + : LE RÉAFFICHER SUR MOBILE
       ------------------------------------------------------- */

    body.page-id-1037 .menu-notabene {
        display: block !important;

        position: absolute !important;
        top: 18px !important;
        left: 20px !important;

        z-index: 9999 !important;
    }


    /* + légèrement plus petit sur mobile */

    body.page-id-1037
    .menu-notabene > summary {
        width: 26px !important;
        height: 26px !important;
    }

    body.page-id-1037
    .menu-notabene > summary::before {
        width: 21px !important;
        height: 2px !important;

        left: 0 !important;
        top: 10px !important;
    }

    body.page-id-1037
    .menu-notabene > summary::after {
        width: 2px !important;
        height: 21px !important;

        left: 9.5px !important;
        top: 0 !important;
    }



    /* -------------------------------------------------------
       2. LOGO : NE PLUS LE COUPER
       ------------------------------------------------------- */

    body.page-id-1037
    .wp-block-image img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* Si ton logo est la première image de la page */

    body.page-id-1037
    main > .wp-block-image:first-of-type {
        width: 78% !important;
        max-width: 340px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        overflow: visible !important;
    }

    body.page-id-1037
    main > .wp-block-image:first-of-type img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }



    /* -------------------------------------------------------
       3. EXPERTISES : BLEU AU TOUCHER
       ------------------------------------------------------- */

    /*
       Sur téléphone il n'existe pas réellement de hover.
       On utilise donc :active pour obtenir le bleu
       lorsque l'utilisateur touche une expertise.
    */

    body.page-id-1037
    .expertise-card:active {
        background-color: rgba(2, 0, 112, 0.82) !important;
        color: #ffffff !important;
    }

    body.page-id-1037
    .expertise-card:active * {
        color: #ffffff !important;
    }



    /* -------------------------------------------------------
       4. CITATION DESIGNERS
       ------------------------------------------------------- */

    body.page-id-1037
    .citation-designers-texte {
        position: relative !important;

        width: auto !important;
        max-width: none !important;

        margin-left: 55px !important;
        margin-right: 20px !important;

        overflow: visible !important;
    }


    /* Remettre le trait devant la citation */

    body.page-id-1037
    .citation-designers-texte::before {
        content: "" !important;

        display: block !important;
        position: absolute !important;

        left: -55px !important;
        top: 8px !important;

        width: 32px !important;
        height: 7px !important;

        background-color: #111111 !important;
    }

}
/* ==========================================================
   MOBILE — EXPERTISE OUVERTE = BLEU
   ========================================================== */

@media (max-width: 800px) {

    /* Expertise ouverte */
    body.page-id-1037 details[open] {
        background-color: rgba(2, 0, 112, 0.82) !important;
        color: #ffffff !important;

        transition:
            background-color 0.35s ease,
            color 0.35s ease !important;
    }

    /* Tout le texte devient blanc */
    body.page-id-1037 details[open] summary,
    body.page-id-1037 details[open] p,
    body.page-id-1037 details[open] h2,
    body.page-id-1037 details[open] h3,
    body.page-id-1037 details[open] h4,
    body.page-id-1037 details[open] a {
        color: #ffffff !important;
    }

}
/* =========================================
   MOBILE — EXPERTISE BLEUE AU TOUCHER
   ========================================= */

@media (max-width: 800px) {

    body.page-id-1037 .expertise-card {
        transition:
            background-color 0.35s ease,
            color 0.35s ease !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Au toucher */
    body.page-id-1037 .expertise-card:active,
    body.page-id-1037 .expertise-card:focus-within {
        background-color: rgba(2, 0, 112, 0.82) !important;
        color: #ffffff !important;
    }

    /* Tout le contenu passe en blanc */
    body.page-id-1037 .expertise-card:active *,
    body.page-id-1037 .expertise-card:focus-within * {
        color: #ffffff !important;
    }
}
/* ==========================================================
   EXPERTISES — ACCORDÉONS MOBILE
   ========================================================== */


/* Sur ordinateur : cacher la version accordéon */
.expertise-mobile {
    display: none !important;
}


@media (max-width: 800px) {

    /* Afficher les accordéons sur mobile */
    body.page-id-1037 .expertise-mobile {
        display: block !important;

        margin: 0 0 8px 0 !important;
        padding: 0 !important;

        border: none !important;
        background: transparent !important;

        transition:
            background-color 0.35s ease,
            color 0.35s ease !important;
    }


    /* -----------------------------------------
       TITRE
       ----------------------------------------- */

    body.page-id-1037
    .expertise-mobile > summary {
        position: relative !important;

        display: block !important;

        padding: 18px 20px 18px 52px !important;

        list-style: none !important;
        cursor: pointer !important;

        color: #111111 !important;

        font-size: 18px !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;

        transition:
            color 0.35s ease,
            background-color 0.35s ease !important;
    }


    /* Enlever la flèche native */
    body.page-id-1037
    .expertise-mobile > summary::-webkit-details-marker {
        display: none !important;
    }

    body.page-id-1037
    .expertise-mobile > summary::marker {
        content: "" !important;
    }


    /* -----------------------------------------
       NOTRE +
       ----------------------------------------- */

    body.page-id-1037
    .expertise-mobile > summary::before {
        content: "+" !important;

        position: absolute !important;

        left: 20px !important;
        top: 50% !important;

        transform: translateY(-52%) !important;

        color: #111111 !important;

        font-size: 26px !important;
        line-height: 1 !important;
        font-weight: 300 !important;

        transition:
            color 0.35s ease,
            transform 0.35s ease !important;
    }


    /* -----------------------------------------
       EXPERTISE OUVERTE = BLEU
       ----------------------------------------- */

    body.page-id-1037
    .expertise-mobile[open] {
        background-color: #020070 !important;
    }


    body.page-id-1037
    .expertise-mobile[open] > summary {
        color: #ffffff !important;
    }


    /* + devient × */
    body.page-id-1037
    .expertise-mobile[open] > summary::before {
        color: #ffffff !important;

        transform:
            translateY(-52%)
            rotate(45deg) !important;
    }


    /* -----------------------------------------
       TEXTE QUI APPARAÎT
       ----------------------------------------- */

    body.page-id-1037
    .expertise-mobile[open] > *:not(summary) {
        color: #ffffff !important;
    }


    body.page-id-1037
    .expertise-mobile p {
        margin: 0 !important;

        padding:
            0
            20px
            22px
            52px !important;

        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
    }

}
/* EXPERTISES MOBILE — TITRES MÊME TAILLE QUE DESKTOP */

@media (max-width: 800px) {

    body.page-id-1037
    .expertise-mobile > summary {
        font-size: inherit !important;
    }

}
/* EXPERTISES MOBILE — TITRES PLUS PROCHES DU DESKTOP */

@media (max-width: 800px) {

    body.page-id-1037 .expertise-mobile > summary {
        font-size: 32px !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
    }

    /* + proportionné au titre */
    body.page-id-1037 .expertise-mobile > summary::before {
        font-size: 32px !important;
    }
}
/* EXPERTISES MOBILE — TITRES */

@media (max-width: 800px) {

    body.page-id-1037 .expertise-mobile > summary {
        font-size: 32px !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;

        text-transform: uppercase !important;
    }

    body.page-id-1037 .expertise-mobile > summary::before {
        font-size: 32px !important;
    }
}
/* MOBILE — cacher les anciennes expertises */

@media (max-width: 800px) {

    body.page-id-1037 .expertises-liste {
        display: none !important;
    }

}
/* =========================================
   ATELIERS — EFFET BLEU SUR MOBILE
   ========================================= */

@media (max-width: 800px) {

    body.page-id-1037 .atelier-card {
        transition:
            background-color 0.35s ease,
            color 0.35s ease !important;

        -webkit-tap-highlight-color: transparent;
    }

    /* Au toucher */
    body.page-id-1037 .atelier-card:active {
        background-color: #020070 !important;
        color: #ffffff !important;
    }

    /* Tout le contenu passe en blanc */
    body.page-id-1037 .atelier-card:active *,
    body.page-id-1037 .atelier-card:active a {
        color: #ffffff !important;
    }
}/* ==========================================================
   ATELIERS — BLEU LORSQU'ILS SONT OUVERTS
   ========================================================== */

@media (max-width: 800px) {

    /* Animation */
    body.page-id-1037 .atelier-notabene {
        transition:
            background-color 0.35s ease,
            color 0.35s ease !important;
    }


    /* Atelier ouvert */
    body.page-id-1037 .atelier-notabene[open] {
        background-color: #020070 !important;
        color: #ffffff !important;
    }


    /* Tout le contenu devient blanc */
    body.page-id-1037 .atelier-notabene[open] *,
    body.page-id-1037 .atelier-notabene[open] a,
    body.page-id-1037 .atelier-notabene[open] summary {
        color: #ffffff !important;
    }


    /* Le lien inscription reste bien blanc */
    body.page-id-1037 .atelier-notabene[open] a:visited,
    body.page-id-1037 .atelier-notabene[open] a:hover,
    body.page-id-1037 .atelier-notabene[open] a:active {
        color: #ffffff !important;
    }

}
/* ==========================================================
   ATELIERS — CORRECTIONS FINALES
   ========================================================== */


/* ----------------------------------------------------------
   ATELIERS DESKTOP — PHOTOS STRICTEMENT EN 4:3
   ---------------------------------------------------------- */

@media (min-width: 801px) {

    body.page-id-1037 .atelier .wp-block-image {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        overflow: hidden !important;
        margin-bottom: 30px !important;
    }

    body.page-id-1037 .atelier .wp-block-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;

        max-width: none !important;
    }

}
/* ----------------------------------------------------------
   MOBILE — TOUTE LA CARTE DEVIENT BLEUE QUAND ELLE EST OUVERTE
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    /* Carte fermée = noire */
    body.page-id-1037 .atelier {
        background-color: #111111 !important;

        transition:
            background-color 0.35s ease !important;
    }


    /* Dès que le bloc Détails est ouvert :
       toute la carte devient bleue */
    body.page-id-1037
    .atelier:has(.atelier-details[open]) {
        background-color: #020070 !important;
    }


    /* Le bloc qui se déplie ne doit PAS avoir
       son propre rectangle bleu */
    body.page-id-1037
    .atelier .atelier-details,
    body.page-id-1037
    .atelier .atelier-details[open] {
        background-color: transparent !important;
    }

}
/* ==========================================================
   MOBILE — LOGO NOTA BENE NON COUPÉ
   ========================================================== */

@media (max-width: 800px) {

    body.page-id-1037 .logo-notabene {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        overflow: visible !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.page-id-1037 .logo-notabene img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }
}
@media (max-width: 800px) {

    body.page-id-1037 .logo-notabene {
        margin-top: 40px !important;
    }

}
/* MOBILE — DÉCALER LE LOGO VERS LE BAS */

@media (max-width: 800px) {

    body.page-id-1037 .logo-home {
        padding-top: 40px !important;
        box-sizing: border-box !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }

}
/* ==========================================================
   PORTFOLIO — DESKTOP / MOBILE
   ========================================================== */

/* Desktop */
.portfolio-desktop {
    display: block !important;
}

.portfolio-mobile {
    display: none !important;
}


/* ==========================================================
   PORTFOLIO — CARROUSEL MOBILE
   ========================================================== */

@media (max-width: 800px) {

    /* On cache le portfolio desktop */
    body.page-id-1037 .portfolio-desktop {
        display: none !important;
    }

    /* On affiche le portfolio mobile */
    body.page-id-1037 .portfolio-mobile {
        display: block !important;
        width: 100% !important;
    }


    /* Les 9 projets sur une seule ligne */
    body.page-id-1037 .portfolio-mobile .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        gap: 14px !important;

        width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        padding: 0 35px 10px 0 !important;
    }

    body.page-id-1037
    .portfolio-mobile .wp-block-columns::-webkit-scrollbar {
        display: none;
    }


    /* Chaque projet = une slide */
    body.page-id-1037
    .portfolio-mobile .wp-block-column {
        flex: 0 0 86% !important;

        width: 86% !important;
        min-width: 86% !important;
        max-width: 86% !important;

        margin: 0 !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }


    /* Images */
    body.page-id-1037
    .portfolio-mobile .wp-block-image {
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-id-1037
    .portfolio-mobile .wp-block-image img {
        display: block !important;

        width: 100% !important;

        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
}
/* ==========================================================
   PORTFOLIO MOBILE — CARROUSEL SWIPE
   ========================================================== */

@media (max-width: 800px) {

    /* Conteneur des 9 projets */
    body.page-id-1037
    .portfolio-mobile > .wp-block-columns {

        display: flex !important;
        flex-flow: row nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;

        /* IMPORTANT : ne pas bloquer le geste tactile */
        touch-action: auto !important;

        padding: 0 35px 12px 0 !important;

        scrollbar-width: none !important;
    }

    body.page-id-1037
    .portfolio-mobile > .wp-block-columns::-webkit-scrollbar {
        display: none !important;
    }


    /* Chaque colonne = une slide */
    body.page-id-1037
    .portfolio-mobile > .wp-block-columns > .wp-block-column {

        flex: 0 0 86% !important;

        width: 86% !important;
        min-width: 86% !important;
        max-width: 86% !important;

        margin: 0 !important;

        scroll-snap-align: start !important;
    }


    /* Ne surtout pas empêcher le swipe dans les projets */
    body.page-id-1037
    .portfolio-mobile .projet {

        width: 100% !important;

        touch-action: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }


    /* Images non déplaçables par le navigateur */
    body.page-id-1037
    .portfolio-mobile img {

        width: 100% !important;

        -webkit-user-drag: none !important;
        user-select: none !important;
    }


/* Texte caché au repos */
body.page-id-1037
.portfolio-mobile .projet-info {
    opacity: 0 !important;
    pointer-events: none !important;

    background: rgba(2, 0, 112, 0.82) !important;

    transition: opacity 0.3s ease !important;
}


/* TAP sur un projet = bleu + texte */
body.page-id-1037
.portfolio-mobile .projet:focus-within .projet-info {
    opacity: 1 !important;
}


/* Texte blanc */
body.page-id-1037
.portfolio-mobile .projet:focus-within .projet-info,
body.page-id-1037
.portfolio-mobile .projet:focus-within .projet-info p {
    color: #ffffff !important;
}
}
/* ==========================================================
   PORTFOLIO MOBILE — PROJET OUVERT
   ========================================================== */

@media (max-width: 800px) {

    /* Texte/voile caché par défaut */
    body.page-id-1037 .portfolio-mobile .projet-info {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    /* Projet activé par un tap */
    body.page-id-1037 .portfolio-mobile .projet.projet-ouvert .projet-info {
        opacity: 1 !important;
        color: #fff !important;
    }

    /* Fond bleu */
    body.page-id-1037 .portfolio-mobile .projet.projet-ouvert {
        background-color: #020070 !important;
    }

    /* Si ton bleu est un calque/overlay existant */
    body.page-id-1037 .portfolio-mobile .projet.projet-ouvert::after {
        opacity: 1 !important;
    }
}
/* ==========================================================
   PORTFOLIO MOBILE — BLEU AU TOUCHER
   ========================================================== */

@media (max-width: 800px) {

    /* Projet */
    body.page-id-1037 .portfolio-mobile .projet {
        position: relative !important;
    }

    /* Informations cachées normalement */
    body.page-id-1037 .portfolio-mobile .projet .projet-info {
        opacity: 0 !important;
        pointer-events: none !important;

        transition: opacity 0.2s ease !important;
    }

    /* Maintien du doigt = apparition du bleu + texte */
    body.page-id-1037 .portfolio-mobile .projet:active .projet-info {
        opacity: 1 !important;
        color: #ffffff !important;
    }

    body.page-id-1037 .portfolio-mobile .projet:active {
        background-color: #020070 !important;
    }

    body.page-id-1037 .portfolio-mobile .projet:active .projet-info,
    body.page-id-1037 .portfolio-mobile .projet:active .projet-info * {
        color: #ffffff !important;
    }
}
/* ==========================================================
   RÉSEAUX SOCIAUX — FOOTER MOBILE
   ========================================================== */

.social-mobile {
    display: none !important;
}

@media (max-width: 800px) {

    body.page-id-1037 .social-mobile {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;

        margin-top: 60px !important;
        padding: 35px 0 45px !important;

        border-top: 3px solid #111111 !important;

        box-sizing: border-box !important;
    }

    /* Bloc d'icônes Gutenberg */
    body.page-id-1037 .social-mobile .wp-block-social-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 22px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Supprimer le fond rond Gutenberg */
    body.page-id-1037 .social-mobile .wp-social-link {
        background: transparent !important;
    }

    /* Taille des icônes */
   body.page-id-1037 .social-mobile .wp-social-link svg {
    width: 40px !important;
    height: 40px !important;
    fill: #111111 !important;
}

    /* Petit effet au toucher */
    body.page-id-1037 .social-mobile .wp-social-link:active svg {
        fill: #020070 !important;
    }
}
/* RÉSEAUX DESKTOP — TAILLE */

@media (min-width: 801px) {

    body.page-id-1037 .social-notabene a {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

}
/* ==========================================================
   RÉSEAUX EN BAS — AFFICHER AUSSI SUR DESKTOP
   ========================================================== */

@media (min-width: 801px) {

    body.page-id-1037 .social-mobile {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        box-sizing: border-box !important;

        margin-top: 60px !important;
        padding: 35px 0 45px !important;

        border-top: 3px solid #111111 !important;
    }

    body.page-id-1037 .social-mobile .wp-block-social-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 24px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-id-1037 .social-mobile .wp-social-link {
        background: transparent !important;
    }

    body.page-id-1037 .social-mobile .wp-social-link svg {
        width: 30px !important;
        height: 30px !important;
        fill: #111111 !important;
    }

    body.page-id-1037 .social-mobile .wp-social-link:hover svg {
        fill: #020070 !important;
    }
}
/* ==========================================================
   RÉSEAUX — ICÔNES EN HAUT À DROITE DESKTOP
   ========================================================== */

@media (min-width: 801px) {

    body.page-id-1037 .social-notabene {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    body.page-id-1037 .social-notabene .wp-block-social-links {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Pas de ronds/fonds colorés */
    body.page-id-1037 .social-notabene .wp-social-link {
        background: transparent !important;
    }

    /* Taille et couleur */
    body.page-id-1037 .social-notabene .wp-social-link svg {
        width: 24px !important;
        height: 24px !important;
        fill: #111111 !important;

        transition: fill 0.2s ease !important;
    }

    /* Bleu au survol */
    body.page-id-1037 .social-notabene .wp-social-link:hover svg {
        fill: #020070 !important;
    }
}
/* ==========================================================
   ATELIERS DESKTOP — OUVERTURE INDÉPENDANTE DES CARTES
   ========================================================== */

@media (min-width: 801px) {

    /* Ne plus forcer les deux colonnes à la même hauteur */
    body.page-id-1037 .wp-block-columns:has(.atelier) {
        align-items: flex-start !important;
    }

    /* Chaque colonne garde sa propre hauteur */
    body.page-id-1037 .wp-block-column:has(.atelier) {
        align-self: flex-start !important;
        height: auto !important;
    }

    /* Chaque atelier s'agrandit uniquement selon son contenu */
    body.page-id-1037 .atelier {
        height: auto !important;
        min-height: 0 !important;
    }
}
/* ==========================================================
   PORTFOLIO — TITRES CENTRÉS AU SURVOL
   ========================================================== */

@media (min-width: 801px) {

    body.page-id-1037 .galerie-projets .projet-info {
        text-align: center !important;
    }

    body.page-id-1037 .galerie-projets .projet-info p {
        width: 100% !important;
        text-align: center !important;
    }
}
/* ==========================================================
   PORTFOLIO DESKTOP — TITRE CENTRÉ DANS LE BLEU
   ========================================================== */

@media (min-width: 801px) {

    body.page-id-1037 .galerie-projets .projet-info {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        padding: 30px !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================================
   PORTFOLIO — VOIR PLUS
   ========================================================== */

body.page-id-1037 .portfolio-plus {
    width: 100% !important;
    margin: 35px 0 60px !important;
}


/* Bouton VOIR PLUS */
body.page-id-1037 .portfolio-plus > summary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;

    padding: 18px 0 !important;
    margin: 0 0 35px !important;

    list-style: none !important;
    cursor: pointer !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;

    color: #111111 !important;

    transition: color 0.25s ease !important;
}


/* Enlever le petit triangle natif */
body.page-id-1037
.portfolio-plus > summary::-webkit-details-marker {
    display: none !important;
}

body.page-id-1037
.portfolio-plus > summary::marker {
    content: "" !important;
}


/* Ajouter notre + */
body.page-id-1037 .portfolio-plus > summary::after {
    content: "+" !important;

    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    transition:
        transform 0.3s ease,
        color 0.25s ease !important;
}


/* Bleu au survol */
body.page-id-1037 .portfolio-plus > summary:hover {
    color: #020070 !important;
}


/* + devient × quand ouvert */
body.page-id-1037
.portfolio-plus[open] > summary::after {
    transform: rotate(45deg) !important;
}


/* Petite apparition des projets */
body.page-id-1037
.portfolio-plus[open] > *:not(summary) {
    animation: portfolioApparition 0.4s ease;
}


@keyframes portfolioApparition {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* IMAGE QUI CHANGE AU SURVOL */

.image-hover {
    position: relative;
    overflow: hidden;
}

.image-hover .image-normale,
.image-hover .image-survol {
    margin: 0 !important;
}

.image-hover .image-normale img,
.image-hover .image-survol img {
    display: block;
    width: 100%;
    height: auto;
}

.image-hover .image-survol {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.image-hover .image-normale {
    transition: opacity 0.35s ease;
}

.image-hover:hover .image-survol {
    opacity: 1;
}

.image-hover:hover .image-normale {
    opacity: 0;
}
/* CORRECTION LOGO DESKTOP */
@media (min-width: 801px) {
    body.page-id-1037 .logo-home {
        transform: translateY(55px) !important;
    }
}
/* PORTFOLIO — laisser les images/liens cliquables */
body.page-id-1037 .galerie-projets .projet-info {
    pointer-events: none !important;
}
/* LOGO GLOBAL — TAILLE + CENTRAGE */
.site-logo,
.custom-logo-link {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.site-logo img,
.custom-logo {
    display: block !important;
    width: 450px !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 0 auto !important;
}
/* MOBILE — masquer le Voir plus du portfolio desktop */
@media (max-width: 800px) {
    body.page-id-1037 .portfolio-plus {
        display: none !important;
    }
}
/* PORTFOLIO MOBILE — BANDEAU BLEU FIXE + TITRE + */
@media (max-width: 800px) {

    body.page-id-1037 .portfolio-mobile .projet {
        overflow: hidden !important;
    }

    body.page-id-1037 .portfolio-mobile .projet-info {
        position: static !important;
        inset: auto !important;

        display: flex !important;
        align-items: flex-start !important;

        width: 100% !important;
        height: 90px !important;
        box-sizing: border-box !important;

        opacity: 1 !important;
        visibility: visible !important;

        background: #020070 !important;
        color: #ffffff !important;

        padding: 16px 45px 16px 16px !important;
        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
        text-align: left !important;

        pointer-events: none !important;

        position: relative !important;
    }

    /* Petit + en bas à droite */
    body.page-id-1037 .portfolio-mobile .projet-info::after {
        content: "+" !important;

        position: absolute !important;
        right: 16px !important;
        bottom: 12px !important;

        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: 300 !important;
        line-height: 1 !important;
    }

    /* Pas d'effet hover sur l'image en mobile */
    body.page-id-1037 .portfolio-mobile .projet:hover .wp-block-image img {
        transform: none !important;
    }
}
/* PORTFOLIO MOBILE — FORCER LES BANDEAUX TOUJOURS VISIBLES */
@media (max-width: 800px) {

    body.page-id-1037 .portfolio-mobile .projet .projet-info,
    body.page-id-1037 .portfolio-mobile .projet:hover .projet-info,
    body.page-id-1037 .portfolio-mobile .projet:active .projet-info,
    body.page-id-1037 .portfolio-mobile .projet:focus .projet-info {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        background: #020070 !important;
        color: #ffffff !important;
    }
}
/* PORTFOLIO MOBILE — ALIGNER TOUS LES BANDEAUX */
@media (max-width: 800px) {

    body.page-id-1037 .portfolio-mobile .projet {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-id-1037 .portfolio-mobile .projet .wp-block-image {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body.page-id-1037 .portfolio-mobile .projet .wp-block-image img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        margin: 0 !important;
    }

    body.page-id-1037 .portfolio-mobile .projet-info {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}