/* ============================================================
   PAGE À PROPOS
   ------------------------------------------------------------
   Chargée uniquement sur le modèle a-propos.php, comme work.css
   l'est sur travailler-avec-moi.php. Ces règles vivaient dans
   main.css : elles étaient donc téléchargées et analysées sur
   toutes les pages du site, y compris l'accueil, pour une seule
   page qui s'en sert.

   Rappel : la typographie est gérée par les rôles de
   typographie.css. Ici, uniquement couleur, marges et mise en page.
   ============================================================ */

/* Le surtitre de la page à propos : la petite ligne en capitales posée
   AU-DESSUS du titre. Elle prend le rôle .ldk-surtitre (typographie.css)
   et n'a besoin ici que de sa couleur et de son espacement.
   Le bloc HTML à coller dans l'éditeur WordPress est indiqué dans la
   réponse qui accompagne cette modification. */
.ldk-about-surtitre {
    color: #ff1400 !important;
    margin-bottom: 12px;
}

/* Même respiration que le titre de « Travailler avec moi ». */
/* La coupure après le prénom est un choix de mise en page : elle se règle
   donc en CSS, pas avec un <br> dans le HTML. Sur petit écran (voir
   responsive.css) le prénom repasse en inline et le nom se replace tout
   seul, avec une vraie espace entre les mots — ce qu'un <br> masqué ne
   permet pas : il aurait collé « Lucie » et « Der ». */
.ldk-about-title .ldk-prenom {
    display: block;
}

.ldk-about-title {
    /* Typographie : rôle « titre de page » — voir typographie.css
       ATTENTION : cette classe portait jusqu'ici un style de surtitre
       (petit, en capitales). C'est bien un <h1> dans le contenu de la
       page : il prend donc désormais la taille d'un titre de page.
       Le surtitre de cette page se pose avec .ldk-surtitre. */
    color: #ff1400 !important;
    margin-bottom: 70px;
}

.ldk-about-wrapper {
    max-width: 1000px;
    margin: 100px auto 120px auto;
    padding: 0 40px;
}

/* Le texte d'introduction, colonne de droite du bloc d'ouverture.
   L'espacement sous le bloc est porté par .ldk-intro-grid (main.css) :
   c'est la grille entière qui se détache du reste, pas ce seul texte.
   Pour un paragraphe façon manifeste, utiliser la classe .ldk-exergue. */
.ldk-about-intro p {
    margin-bottom: 18px;
}

.ldk-about-intro p:last-child {
    margin-bottom: 0;
}

/* Le surtitre est aligné sur la première ligne du texte d'intro. */
.ldk-about-surtitre {
    padding-top: 4px;
}

/* LA BOÎTE QUI GÈRE LA TAILLE ET LA COULEUR DE FOND */
/* La photo occupe la colonne LARGE, seule sur sa rangée : elle démarre donc
   exactement au même bord gauche que le texte d'introduction et que tout le
   contenu qui suit. Sous le titre, la page n'a plus qu'une seule verticale.
   Le texte ne vient jamais à côté d'elle : il commence à la rangée suivante.
   Le max-width l'empêche de remplir toute la colonne, ce qui en ferait un
   bloc de près de 900 px de haut. */
.ldk-about-image-wrapper {
    grid-column: 2;
    width: 100%;
    max-width: 380px;
    margin: 0;
    background-color: #eeeae2;
    display: block;
}

/* L'IMAGE QUI S'ADAPTE À LA BOÎTE ET APPLIQUE LE FILTRE */
.ldk-about-image {
    width: 100%;
    height: auto; 
    object-fit: cover; 
    display: block;
    mix-blend-mode: multiply; /* la magie opère ici ! */
}

/* la grille pour les deux colonnes centrales */
.ldk-about-grid {
    display: flex;
    gap: 80px;
    margin-bottom: 100px;
}

.ldk-about-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Les sous-titres de la page à propos.
   Typographie et rythme : rôle « titre de section » — voir typographie.css.
   Seul l'alignement dans la colonne flex se règle ici : c'est de la mise
   en page, elle ne doit pas voyager avec le rôle typographique. */
.ldk-about-label {
    align-self: flex-start;
}

/* le texte standard */
.ldk-about-text {
    line-height: 1.8;
}

/* Deux paragraphes qui se suivent avaient jusqu'ici zéro espace entre
   eux : le texte se lisait d'un bloc. */
.ldk-about-text + .ldk-about-text {
    margin-top: 1.2em;
}

/* Remplace les style="margin-top:60px" qui étaient répétés en dur
   sur chaque intertitre du contenu. */
.ldk-about-footer .ldk-about-label:not(:first-child) {
    margin-top: 60px;
}

/* La flèche de fin est décorative (aria-hidden dans le gabarit). */
.ldk-about-fleche {
    font-size: 30px;
    line-height: 1px;
    position: relative;
    top: 5px;
}

/* Le contenu occupe la colonne LARGE de .ldk-intro-grid, à la rangée
   suivante. Il démarre donc exactement à l'aplomb du texte d'introduction.

   Le bloc reste étroit — c'est ce à quoi Lucie tient — mais sa largeur vient
   maintenant de la colonne (2fr, soit ~570 px, la bonne mesure de lecture)
   et non plus d'un max-width centré. La page tient sur deux verticales :
   le bord gauche pour le titre et l'image, le tiers pour tout le texte. */
.ldk-about-footer {
    grid-column: 2;
    margin: 0;
    display: flex;
    flex-direction: column;
}