/* ============================================================
   Mot du Directeur — page éditoriale (lettre ouverte du CEO)
   ------------------------------------------------------------
   Parti pris : une seule colonne centrée, beaucoup de blanc,
   aucune bordure décorative. Toute la hiérarchie repose sur la
   taille, la graisse et l'espacement. Feuille scopée sous
   .mot_directeur (comme les autres pages SPA) : aucun conflit
   même si toutes les feuilles sont actives en même temps.
   NB : le reset global impose font-size 13px à tous les éléments
   -> chaque règle redéclare explicitement sa taille.
   ============================================================ */
.mot_directeur{
    display: flex;
    justify-content: center;
    padding: 0 24px 6%;
    /* Gabarit de la colonne auteur : largeur et gouttière définies une
       seule fois ici. La marge négative de l'aside et sa neutralisation
       en dessous de 1100px s'en déduisent. */
    --md-auteur: 200px;
    --md-gouttiere: 56px;
    --md-decalage: calc(var(--md-auteur) + var(--md-gouttiere));
}

/* Colonne de lecture : largeur calée sur ~70 caractères. Elle reste
   centrée comme avant : seule la colonne auteur déborde dans la marge
   (cf. .md_auteur), rien d'autre ne se déplace. */
.mot_directeur .sections{
    width: 100%;
    max-width: 760px;
    padding-top: 3%;
}
.mot_directeur .sections > div + div{
    margin-top: var(--espace-rubriques);
}

/* ============================================================
   En-tête éditorial
   ============================================================ */
.mot_directeur .md_surtitre{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #2e9b8a;
}
/* Petit trait de marque après le surtitre */
.mot_directeur .md_surtitre::after{
    content: "";
    flex: 1;
    height: 1px;
    background: #e3e3e3;
}

.mot_directeur .md_titre{
    margin: 0 0 20px;
    font-family: "Switzer Light", "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.16;
    letter-spacing: -.01em;
    color: #1f2b2a;
}

.mot_directeur .md_chapo{
    margin: 0 0 38px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #9a9a9a;
}

/* ============================================================
   Colonne auteur (aside gauche) : portrait, nom, fonction.
   Sticky sous l'en-tête fixe, comme la barre d'ancres des
   autres pages, pour rester visible pendant la lecture.
   ============================================================ */
.mot_directeur .md_corps{
    display: flex;
    align-items: flex-start;
    gap: var(--md-gouttiere);
}
.mot_directeur .md_auteur{
    flex: 0 0 var(--md-auteur);
    /* Marge négative : l'aside sort de la colonne de lecture et occupe
       le blanc à sa gauche, sans décaler le texte d'un pixel. */
    margin-inline-start: calc(-1 * var(--md-decalage));
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 110px;
}
.mot_directeur .md_lettre{
    flex: 1 1 auto;
    min-width: 0;
}

/* Portrait — placeholder monogramme, mêmes dimensions qu'une photo */
.mot_directeur .md_monogramme,
.mot_directeur .md_portrait{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 16px;
}
.mot_directeur .md_monogramme{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eefaf8;
    font-family: "Switzer Bold", Arial, Helvetica, sans-serif;
    font-size: 34px;
    letter-spacing: .04em;
    color: #2e9b8a;
}
.mot_directeur .md_portrait{
    display: block;
    object-fit: cover;
}
.mot_directeur .md_auteur_nom{
    font-family: "Switzer Bold", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #2b2b2b;
}
.mot_directeur .md_auteur_role{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #9a9a9a;
}

/* ============================================================
   Corps de la lettre
   ============================================================ */
.mot_directeur .md_lettre p{
    margin: 0 0 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: #4f4f4f;
}
.mot_directeur .md_lettre .md_salutation{
    font-family: "Switzer Bold", Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #2b2b2b;
}

/* Lettrine du premier paragraphe : seule fantaisie de la page */
.mot_directeur .md_premier::first-letter{
    float: left;
    margin: 6px 12px 0 0;
    font-family: "Switzer Light", Arial, Helvetica, sans-serif;
    font-size: 62px;
    line-height: .78;
    color: #2e9b8a;
}

/* Citation mise en exergue : centrée, sans filet ni encadré */
.mot_directeur .md_citation{
    margin: 46px 0;
    padding: 0 6%;
    text-align: center;
}
.mot_directeur .md_citation::before{
    content: "\201C";
    display: block;
    margin-bottom: -14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    line-height: 1;
    color: #cfe9e4;
}
.mot_directeur .md_lettre .md_citation p{
    margin: 0;
    font-family: "Switzer Light", "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 25px;
    line-height: 1.45;
    color: #2e9b8a;
}

/* ============================================================
   Prolongements (fin de page)
   ============================================================ */
/* Alignés à gauche sur la colonne de lecture. « start » plutôt que
   « left » : bascule seul à droite en arabe (RTL). */
.mot_directeur .md_suite{
    text-align: start;
}
.mot_directeur .md_suite_txt{
    margin: 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #9a9a9a;
}
.mot_directeur .md_liens{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
}
/* Bouton principal : c'est la classe .bouton_slide du slider d'accueil
   (couleur, arrondi, texte blanc) — une seule source dans style.css.
   Seul le padding est repris ici : la règle globale l'exprime en % de
   la largeur du parent, ce qui donnerait un bouton plus étroit dans
   cette colonne de texte que dans le slider. */
.mot_directeur .bouton_slide{
    display: inline-block;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.mot_directeur .md_lien{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #2e9b8a;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.mot_directeur .md_lien:hover{
    border-bottom-color: #2e9b8a;
}

/* ============================================================
   Arabe (RTL) : la lettrine change de côté
   ============================================================ */
[dir="rtl"] .mot_directeur .md_premier::first-letter{
    float: right;
    margin: 6px 0 0 12px;
}

/* ============================================================
   Petits écrans
   ============================================================ */
/* Sous 1100px, plus de place pour une colonne latérale : le bloc
   auteur repasse dans le flux, au-dessus de la lettre. */
@media (max-width: 1100px){
    .mot_directeur{
        --md-auteur: auto;
        --md-decalage: 0px;
    }
    .mot_directeur .md_corps{
        display: block;
    }
    /* Portrait à gauche, nom au-dessus de la fonction : la grille
       évite un conteneur supplémentaire autour des deux textes. */
    .mot_directeur .md_auteur{
        position: static;
        margin-inline-start: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        row-gap: 3px;
        align-content: center;
        margin-bottom: 38px;
        padding-top: 26px;
        border-top: 1px solid #ededed;
    }
    .mot_directeur .md_monogramme,
    .mot_directeur .md_portrait{
        grid-row: 1 / span 2;
        align-self: center;
        width: 64px;
        height: 64px;
        margin-bottom: 0;
    }
    .mot_directeur .md_monogramme{ font-size: 19px; }
    .mot_directeur .md_auteur_nom{ align-self: end; }
    .mot_directeur .md_auteur_role{ align-self: start; }
}

@media (max-width: 720px){
    .mot_directeur{ padding: 0 20px 12%; }
    .mot_directeur .md_titre{ font-size: 30px; }
    .mot_directeur .md_chapo{ font-size: 15px; }
    .mot_directeur .md_lettre p{ font-size: 16px; line-height: 1.8; }
    .mot_directeur .md_citation{
        margin: 34px 0;
        padding: 0;
    }
    .mot_directeur .md_lettre .md_citation p{ font-size: 20px; }
    .mot_directeur .md_liens{ flex-direction: column; align-items: flex-start; }
}