/*
 * LMI — section « Qui sommes-nous et comment on travaille ? » de l'accueil.
 *
 * Elle est la dernière section de la maquette (1-Accueil-et-composants/Homepage.html,
 * juste avant le pied) et n'existe PAS dans le cœur : le catalogue du gabarit
 * accueil-editorial n'autorise que accroche-recherche, tuiles-rubriques,
 * carte-classement, articles-par-rubrique, cartes-article, pagination, carte-offre,
 * bloc-confiance et newsletter. Aucun composant « fondateur ».
 *
 * Elle est donc posée en additif : un Element à nous (hook generate_after_main_content,
 * accueil seulement, priorité 11 pour passer après l'accueil-bas du Studio), avec nos
 * propres classes `lmi-*` — on n'emprunte aucun marqueur [data-eld-composant], puisque
 * aucun ne correspond. Tout l'habillage est donc ici, rien n'est hérité du cœur.
 *
 * Les blocs que le client doit encore écrire (titre du récit, deux paragraphes, phrase
 * de vision, les quatre descriptions de méthode) sont en base avec un `placeholder` et
 * vides : le cœur retire les blocs vides au rendu, donc rien d'inachevé ne s'affiche.
 */

/* Les enveloppes que WordPress pose autour du contenu d'un groupe ne portent rien :
 * on les efface de la mise en page, comme le cœur le fait pour ses composants
 * ([data-eld-composant] .wp-block-group__inner-container, bibliotheque.css:243). */
.lmi-fondateur .wp-block-group__inner-container {
    display: contents;
}

/* Bandeau pleine largeur : la maquette pose un fond clair bord à bord, le contenu
 * restant centré à 1200. Même technique que l'accroche et le bandeau héros
 * (ombre portée étalée + découpe), qui ne crée aucun débordement horizontal
 * contrairement à un `width: 100vw`. */
.lmi-fondateur {
    margin: 88px 0 0;
    padding: 64px 0 80px;
    background: var(--eldorado-surface);
    box-shadow: 0 0 0 100vmax var(--eldorado-surface);
    clip-path: inset(0 -100vmax);
    color: var(--eldorado-texte);
    font-family: var(--eldorado-police-texte);
}

.lmi-fondateur-surtitre {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eldorado-accent);
}

.lmi-fondateur-corps {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* Colonne d'identité : 340 px, comme la maquette. */
.lmi-fondateur-identite {
    flex: 0 0 340px;
    max-width: 100%;
}

/* L'encart photo : tant qu'aucune image n'est posée, la maquette montre un cadre clair
 * marqué « [Votre photo] » — on le reproduit, c'est ce qui dit au client où elle ira.
 * Dès qu'une image est insérée dans ce bloc, le cadre s'efface de lui-même. */
.lmi-fondateur-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    margin: 0 0 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--eldorado-accent) 18%, var(--eldorado-fond));
    color: var(--eldorado-texte-doux);
    font-size: 0.875rem;
}

.lmi-fondateur-photo p {
    margin: 0;
}

.lmi-fondateur-photo:has(img) {
    display: block;
    min-height: 0;
    background: none;
}

.lmi-fondateur-photo:has(img) p {
    display: none;
}

.lmi-fondateur-photo img {
    display: block;
    width: 100%;
    height: 400px;
    border-radius: 16px;
    object-fit: cover;
}

.lmi-fondateur-photo figure {
    margin: 0;
}

/* Les cinq boutons de réseau : carré de 44, icône en masque, intitulé conservé pour
 * les lecteurs d'écran mais sorti de la vue. Les icônes sont dessinées au trait,
 * dans le même langage que le reste du site — pas les glyphes de marque. */
.lmi-fondateur-reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.lmi-fondateur-reseaux .lmi-reseau {
    display: block;
    width: 44px;
    height: 44px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 10px;
    background-color: var(--eldorado-fond);
    background-image: none;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
}

.lmi-fondateur-reseaux .lmi-reseau::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--eldorado-accent);
    -webkit-mask: var(--lmi-icone) center / 20px 20px no-repeat;
    mask: var(--lmi-icone) center / 20px 20px no-repeat;
}

.lmi-fondateur-reseaux .lmi-reseau:hover,
.lmi-fondateur-reseaux .lmi-reseau:focus-visible {
    border-color: var(--eldorado-accent);
}

.lmi-reseau--linkedin {
    --lmi-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><path d="M6 10v8M6 6v.5M10.5 18v-8M10.5 13.5c0-2 1.5-3.5 3.5-3.5s3.5 1.5 3.5 3.5V18"/></svg>');
}

.lmi-reseau--youtube {
    --lmi-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10 9.5v5l4.5-2.5z"/></svg>');
}

.lmi-reseau--x {
    --lmi-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><path d="M4 4l16 16M20 4L4 20"/></svg>');
}

.lmi-reseau--instagram {
    --lmi-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="16.9" cy="7.1" r="1" fill="black" stroke="none"/></svg>');
}

.lmi-reseau--tiktok {
    --lmi-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4v10.5"/><circle cx="10.5" cy="14.5" r="3.5"/><path d="M14 4c0 2.6 2 4.6 4.6 4.6"/></svg>');
}

.lmi-fondateur-nom {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
}

.lmi-fondateur-role {
    margin: 2px 0 0;
    font-size: 0.875rem;
    color: var(--eldorado-texte-doux);
}

.lmi-fondateur-recit {
    flex: 1;
    min-width: 0;
}

.lmi-fondateur-recit > h2,
.lmi-fondateur-recit h2.wp-block-heading {
    margin: 0 0 18px;
    font-family: var(--eldorado-police-titres);
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.lmi-fondateur-recit > p:not(.lmi-fondateur-vision),
.lmi-fondateur-recit > * > p:not(.lmi-fondateur-vision) {
    margin: 0 0 14px;
    font-size: 1.125rem;
    line-height: 1.75;
}

/* La phrase de vision : citation de la maquette, en Newsreader italique d'accent. */
.lmi-fondateur-recit .lmi-fondateur-vision {
    margin: 8px 0 28px;
    font-family: var(--eldorado-police-titres);
    font-style: italic;
    font-size: 1.625rem;
    line-height: 1.35;
    color: var(--eldorado-accent);
}

/* Les quatre chiffres : grille de quatre, cartes à filet sur le fond de page. */
.lmi-fondateur-chiffres {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.lmi-fondateur-chiffre {
    padding: 16px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 14px;
    background: var(--eldorado-fond);
}

.lmi-fondateur-chiffre-valeur {
    margin: 0;
    font-family: var(--eldorado-police-titres);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--eldorado-accent);
    font-feature-settings: "tnum" 1;
}

.lmi-fondateur-chiffre-legende {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--eldorado-texte-doux);
}

.lmi-fondateur .lmi-fondateur-methode-titre {
    margin: 0 0 12px;
    font-family: var(--eldorado-police-texte);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
}

.lmi-fondateur-methode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin-bottom: 28px;
}

/* Chaque point porte la coche de la maquette, posée en masque pour suivre l'accent. */
.lmi-fondateur-point {
    position: relative;
    padding-left: 34px;
}

.lmi-fondateur-point::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: var(--eldorado-accent);
    -webkit-mask: var(--lmi-icone-coche) center / contain no-repeat;
    mask: var(--lmi-icone-coche) center / contain no-repeat;
}

.lmi-fondateur {
    --lmi-icone-coche: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-10"/></svg>');
}

.lmi-fondateur-point-titre {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.lmi-fondateur-point-texte {
    margin: 2px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--eldorado-texte-doux);
}

/* Les deux boutons : le thème impose un rayon nul par variable, on la redéfinit
 * localement plutôt que de surenchérir en !important. */
.lmi-fondateur-boutons {
    --border-radius: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

.lmi-fondateur-boutons .wp-block-button__link {
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.lmi-fondateur-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    border: 1px solid var(--eldorado-en-tete-fond, #1e3a8a);
    background: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
}

.lmi-fondateur-boutons .is-style-outline .wp-block-button__link {
    border: 1px solid var(--eldorado-bordure-forte);
    background: var(--eldorado-fond);
    color: var(--eldorado-texte);
}

@media (max-width: 900px) {
    .lmi-fondateur-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lmi-fondateur-methode {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    /* En mobile la section touche les deux bords : on rentre son CONTENU de 16 px,
     * comme la section voisine (newsletter mesuree a x=16 pour 468 de large). Le
     * bandeau, lui, reste bord a bord : il vient de l'ombre portee, pas de la boite. */
    .lmi-fondateur {
        margin-top: 48px;
        padding: 40px 16px 48px;
    }

    .lmi-fondateur-corps {
        display: block;
    }

    .lmi-fondateur-identite {
        margin-bottom: 28px;
    }

    .lmi-fondateur-photo,
    .lmi-fondateur-photo img {
        min-height: 280px;
        height: 280px;
    }

    .lmi-fondateur-recit h2.wp-block-heading {
        font-size: 2rem;
    }
}