/*
 * Page d'accueil — blocs de section (src/blocks/accueil-*, Template/Blocks/).
 *
 * Chargée par wp_enqueue_block_style() : sur le site, seulement quand une
 * section est rendue ; dans l'éditeur, dans le canevas.
 *
 * Les jetons sont posés sur .mm-accueil et NON sur :root : cette feuille
 * cohabite avec macmoov.css, chargée partout, et avec les pages de vente qui
 * déclarent les leurs (.mm-vente, .mm-entreprise). Même palette, portée
 * différente.
 *
 * Le contenu est fait de blocs natifs verrouillés : les sélecteurs visent donc
 * leur balisage (.wp-block-heading, .wp-block-list, .wp-block-buttons), dont la
 * structure est garantie par le modèle du bloc.
 */

.mm-accueil {
    --vert-fonce: #14612F;
    --vert: #2C9334;
    --vert-doux: #EAF5EC;
    --vert-tres-doux: #F5FAF6;
    --gris: #575758;
    --noir: #151A17;
    --bord: #DFE9E1;
    --ombre: 0 14px 38px rgba(20, 97, 47, 0.09);
    --rayon: 16px;

    color: var(--gris);
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
}

.mm-accueil-conteneur {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

/*
 * RENDRE L'HÉRITAGE NORMAL À L'ALIGNEMENT DU TEXTE.
 *
 * macmoov.css justifie tout le site — `p:not(:has(label)), li, …`, vers la
 * ligne 1337. Dans les colonnes étroites de cette page, cela creuse des
 * rivières blanches entre les mots : une carte de 180px, une garantie de label
 * de 129px, où « Vérification des diplômes » s'étale sur toute la largeur.
 *
 * La règle vise `p` ET `li` : ne traiter que les paragraphes laissait le
 * défaut intact dans les listes, où il est le plus visible. `inherit` plutôt
 * qu'une valeur fixe, pour que chaque conteneur reste maître de son
 * alignement — centré dans une carte, au fil du texte dans le héros.
 *
 * Corrigé ici et non à la source : la règle de macmoov.css porte sur toutes
 * les pages du site, la portée du correctif doit être celle du défaut.
 */
.mm-accueil p,
.mm-accueil li {
    text-align: inherit;
}

.mm-accueil .wp-block-heading {
    color: var(--vert-fonce);
    line-height: 1.2;
}

.mm-accueil-titre .wp-block-heading {
    margin-bottom: 32px;
    text-align: center;
    font-size: clamp(22px, 2.2vw, 30px);
}

.mm-accueil .wp-block-buttons {
    gap: 14px;
}

.mm-accueil .wp-block-button__link,
.mm-accueil .mm-bouton {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 10px;
    background: var(--vert-fonce);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.mm-accueil .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link {
    background: #fff;
    border: 1px solid var(--vert-fonce);
    color: var(--vert-fonce);
}

.mm-accueil .mm-bouton-clair {
    background: #fff;
    color: var(--vert-fonce);
}

/*
 * Choix de l'icône, visible dans l'éditeur uniquement.
 *
 * Le champ est rendu dans le bloc plutôt que dans la barre latérale : sous le
 * verrou « contentOnly » de la section, le cœur masque les InspectorControls,
 * et un panneau latéral serait inatteignable. Le rendu du site passe par le
 * PHP, qui n'émet pas ce balisage : ces règles n'ont donc d'effet que dans le
 * canevas.
 */
.macmoov-editeur-carte .macmoov-editeur-icone {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 8px;
    border: 1px dashed var(--bord, #DFE9E1);
    border-radius: 8px;
    background: var(--vert-tres-doux, #F5FAF6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.macmoov-editeur-carte .macmoov-editeur-icone select {
    flex: 1;
    max-width: 220px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ presse */

.mm-presse {
    border-bottom: 1px solid #EFF2EF;
    background: linear-gradient(90deg, #FAFBFA, #F6F8F6);
}

.mm-presse-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 76px;
    flex-wrap: wrap;
}

.mm-presse-titre p {
    margin: 0;
    color: var(--noir);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mm-presse-logos {
    display: flex;
    align-items: center;
    gap: 32px;
}

.mm-presse-logos figure {
    margin: 0;
}

.mm-presse-logos img {
    max-height: 26px;
    width: auto;
}

.mm-presse-texte {
    margin-left: auto;
    font-size: 12px;
}

.mm-presse-texte p {
    margin: 0;
}

.mm-presse-lien a {
    color: var(--vert-fonce);
    font-weight: 600;
    text-decoration: underline;
}

/* -------------------------------------------------------------------- héros */

.mm-hero {
    padding-top: 40px;
    background: linear-gradient(180deg, #fff, var(--vert-tres-doux));
}

.mm-hero-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.mm-hero-badge {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--vert-doux);
    color: var(--vert-fonce);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-hero-texte h1 {
    margin: 18px 0;
    color: var(--vert-fonce);
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.15;
}

.mm-hero-texte > .wp-block-list {
    display: flex;
    gap: 28px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

/*
 * PICTOGRAMMES DES LISTES.
 *
 * Dessinés en masque et non en image de fond : la couleur vient de
 * `currentColor`, donc le tracé suit le durcissement de `prefers-contrast` et
 * la palette imposée par `forced-colors` sans règle supplémentaire. Une image
 * de fond porterait un vert figé, invisible sur un fond système sombre.
 *
 * Le tracé est posé sur l'élément par `--mm-picto` et consommé par le
 * pseudo-élément, qui en hérite : sans cela, les huit lignes de masque
 * seraient à répéter pour chacune des onze icônes.
 *
 * L'icône suit le RANG dans la liste, la maquette en donnant une par entrée.
 * Une entrée ajoutée par la suite n'en recevra pas — elle s'affichera sans
 * pictogramme, ce qui dégrade proprement : mieux vaut pas d'icône qu'une icône
 * fausse. Le jeu du sélecteur de carte (BlockService::ICONES) n'est pas touché,
 * ces tracés-là étant décoratifs et non éditoriaux.
 */
.mm-hero-texte > .wp-block-list li::before,
.mm-label-contenu .wp-block-list li::after,
.mm-chiffre::before {
    content: "";
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--mm-picto);
    mask-image: var(--mm-picto);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mm-hero-texte > .wp-block-list li::before {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    color: var(--vert-fonce);
}

.mm-hero-texte > .wp-block-list li:nth-child(1) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.mm-hero-texte > .wp-block-list li:nth-child(2) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 20v-6M11 20V8M16 20v-9M20 20V5'/%3E%3C/svg%3E");
}

.mm-hero-texte > .wp-block-list li:nth-child(3) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 100-6 3 3 0 000 6zm8 0a3 3 0 100-6 3 3 0 000 6zM3 20v-1a5 5 0 015-5h2a5 5 0 015 5v1m2-6h1a4 4 0 014 4v2'/%3E%3C/svg%3E");
}

.mm-hero-visuel {
    position: relative;
}

.mm-hero-visuel figure {
    margin: 0;
}

.mm-hero-visuel img {
    width: 100%;
    border-radius: 200px 24px 24px 200px;
    object-fit: cover;
}

/* Carte « Tiers de confiance » : posée sur la photo au-dessus de 900px, et
   simplement dessous en dessous, où la superposition masquerait le visage. */
.mm-hero-confiance {
    position: absolute;
    right: -12px;
    bottom: 28px;
    width: min(320px, 90%);
    padding: 22px;
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--ombre);
}

.mm-hero-confiance .wp-block-heading {
    margin: 0 0 14px;
    font-size: 14px;
}

.mm-hero-confiance .wp-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.mm-hero-confiance .wp-block-list li {
    padding-left: 22px;
    margin-bottom: 8px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C9334' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat left 2px / 14px 14px;
}

.mm-hero-confiance-lien a {
    color: var(--vert-fonce);
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
}

/* Barre de recherche, à cheval sur le bas du héros. */
.mm-hero-recherche {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 36px;
    margin-bottom: -36px;
    padding: 18px;
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre);
}

.mm-hero-champ {
    flex: 1;
    margin: 0;
}

.mm-hero-champ label {
    display: block;
    color: var(--noir);
    font-size: 12px;
    font-weight: 700;
}

.mm-hero-champ input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--bord);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.mm-hero-populaires {
    margin: 52px 0 0;
    font-size: 12px;
}

.mm-hero-populaires a {
    margin-right: 14px;
    color: var(--gris);
    text-decoration: underline;
}

/* ---------------------------------------------------------------- solutions */

.mm-solutions {
    padding: 72px 0 56px;
}

/*
 * Grille souple : le nombre de cartes est libre, la mise en page s'ajuste à
 * ce qu'elle reçoit.
 *
 * Flex et non grid : une grille en colonnes (`repeat(auto-fit, …)`) étire deux
 * cartes isolées sur toute la largeur, ce qui est disgracieux dès qu'on
 * s'éloigne des six de la maquette. Ici, chaque carte part de 200px, grandit
 * pour remplir la ligne, sans dépasser 280px — et la dernière ligne reste
 * centrée plutôt que collée à gauche.
 *
 * `.macmoov-editeur-grille` est le conteneur du même bloc dans l'éditeur : la
 * disposition doit y être identique, sans quoi la rédaction travaille sur une
 * présentation qui n'est pas celle du site.
 */
.mm-solutions-grille,
.macmoov-editeur-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/*
 * EN `wrap`, LES ÉLÉMENTS PASSENT À LA LIGNE AVANT DE RÉTRÉCIR. Avec une base
 * de 200px, les six cartes de la maquette réclamaient 6 × 200 + 5 × 20 =
 * 1 320px pour un conteneur de 1 180 : la sixième tombait seule à la ligne.
 *
 * LA BASE NE FIXE PAS LA LARGEUR RENDUE, seulement le seuil de passage à la
 * ligne : c'est `flex-grow` qui étale ensuite les cartes sur toute la largeur
 * disponible — 180px chacune dans un conteneur de 1 180, quelle que soit la
 * base choisie. L'abaisser ne rétrécit donc rien, elle recule seulement le
 * moment où la grille se casse.
 *
 * 140 et non 200 : à 200, les six de la maquette ne tenaient pas même en
 * 1 440, la sixième tombant seule à la ligne. Cette base ne gouverne plus que
 * les largeurs d'au moins 1 280px — en dessous, un palier explicite impose
 * trois colonnes (section responsive) — et 140 y laisse de la marge là où 160
 * n'en laissait que 52px.
 *
 * Le défaut visé est la ligne ORPHELINE, pas le retour à la ligne : le nombre
 * de cartes reste libre, et la grille s'adapte à ce qu'elle reçoit. Mais avec
 * un nombre libre, AUCUNE RÈGLE CSS NE PEUT GARANTIR DES LIGNES PLEINES pour
 * toute valeur : abaisser encore la base ne supprime pas l'orpheline, elle la
 * déplace à une autre largeur — et finit par produire des colonnes trop
 * étroites, ce que le rendu a montré. Les paliers visent les six de la
 * maquette.
 */
.mm-carte {
    flex: 1 1 140px;
    max-width: 280px;
    padding: 26px 20px;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: #fff;
    text-align: center;
}

.mm-carte-icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--vert-doux);
    color: var(--vert-fonce);
}

.mm-carte-icone .mm-icone {
    width: 26px;
    height: 26px;
}

/*
 * Casse normale et encre sombre, comme la maquette — et non les capitales
 * vertes héritées de `.mm-accueil .wp-block-heading`. En capitales, un titre
 * de deux mots occupait deux lignes dans une carte de 180px.
 */
.mm-carte .wp-block-heading {
    margin: 0 0 10px;
    color: var(--noir);
    font-size: 15px;
    font-weight: 600;
}

/* Le centrage vient de `.mm-carte`, dont le texte hérite désormais. */
.mm-carte p {
    margin: 0;
    font-size: 13px;
}

.mm-accueil-cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.mm-accueil-cta .wp-block-button__link {
    background: #fff;
    border: 1px solid var(--vert-fonce);
    color: var(--vert-fonce);
}

/* -------------------------------------------------------------------- label */

.mm-label .mm-label-grille {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    overflow: hidden;
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre);
}

.mm-label-visuel {
    display: grid;
    place-items: center;
    align-self: stretch;
    padding: 28px;
    background: var(--vert-fonce);
}

.mm-label-visuel figure {
    margin: 0;
}

.mm-label-contenu {
    padding: 28px 32px;
}

.mm-label-contenu .wp-block-heading {
    margin: 0 0 10px;
    font-size: 20px;
}

.mm-label-contenu > p {
    margin: 0 0 20px;
    font-size: 14px;
}

/*
 * Même raisonnement que pour les cartes : le minimum du `minmax` ne fixe pas
 * la largeur des colonnes — `1fr` les étale — mais le nombre qui tient.
 *
 * À 140px, la colonne de contenu (856px en 1 440) n'en plaçait que cinq de
 * 158px, la sixième garantie tombant seule. À 120, les six tenaient en 1 440
 * mais retombaient à 5 + 1 dès 1 280, où la colonne se réduit à 788px. À 112,
 * six colonnes demandent 752px et passent aussi à cette largeur.
 *
 * Le nombre n'est pas figé à six : la liste est modifiable dans l'éditeur, et
 * `auto-fit` suit ce qu'on lui donne.
 */
.mm-label-contenu .wp-block-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 16px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    text-align: center;
}

/*
 * Ici la maquette pose le pictogramme SUR une pastille pâle, d'où deux
 * pseudo-éléments : `::before` porte la pastille, `::after` le tracé par-dessus.
 * Un seul ne suffirait pas — le masque découpe aussi la couleur de fond, et la
 * pastille disparaîtrait avec lui.
 */
.mm-label-contenu .wp-block-list li {
    position: relative;
}

.mm-label-contenu .wp-block-list li::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border-radius: 8px;
    background: var(--vert-doux);
}

.mm-label-contenu .wp-block-list li::after {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    color: var(--vert-fonce);
}

.mm-label-contenu .wp-block-list li:nth-child(1) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-4 10 4-10 4z M6 11.5V16c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4.5'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-list li:nth-child(2) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-list li:nth-child(3) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M5 9h14M7 9l-2 5a3 3 0 006 0L9 9M17 9l-2 5a3 3 0 006 0l-2-5'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-list li:nth-child(4) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3H9zM9 4.5H6V21h12V4.5h-3M9 14l2 2 4-4'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-list li:nth-child(5) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 11-2.3-5.7M20 3v5h-5'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-list li:nth-child(6) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16M6 17l9.5-9.5 2.5 2.5L8.5 19.5 5 20z M14 6l3-3 2.5 2.5-3 3'/%3E%3C/svg%3E");
}

.mm-label-contenu .wp-block-buttons {
    justify-content: flex-end;
}

/* ----------------------------------------------------------------- chiffres */

.mm-chiffres {
    padding: 48px 0;
}

.mm-chiffres-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 26px;
    border-radius: var(--rayon);
    background: var(--vert-tres-doux);
}

/*
 * Pictogramme à gauche, valeur et libellé empilés à droite, comme la maquette.
 *
 * En grille plutôt qu'en flex : le groupe contient DEUX paragraphes frères,
 * qu'un `display: flex` mettrait côte à côte. Ici le pseudo-élément occupe la
 * première colonne sur les deux lignes, et chaque paragraphe garde la sienne.
 */
.mm-chiffre {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
}

.mm-chiffre::before {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    color: var(--vert-fonce);
}

.mm-chiffre:nth-child(1) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V6l7-3v18M12 21V10l7 3v8'/%3E%3C/svg%3E");
}

.mm-chiffre:nth-child(2) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 100-6 3 3 0 000 6zm8 0a3 3 0 100-6 3 3 0 000 6zM3 20v-1a5 5 0 015-5h2a5 5 0 015 5v1m2-6h1a4 4 0 014 4v2'/%3E%3C/svg%3E");
}

.mm-chiffre:nth-child(3) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v15H4zM4 10h16M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
}

.mm-chiffre:nth-child(4) {
    --mm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l2.5 5.1 5.5.8-4 3.9.9 5.6L12 16.8 7.1 19.4l.9-5.6-4-3.9 5.5-.8z'/%3E%3C/svg%3E");
}

.mm-chiffre:not(:last-child) {
    border-right: 1px solid var(--bord);
}

.mm-chiffre-valeur {
    margin: 0;
    color: var(--vert-fonce);
    font-size: 26px;
    font-weight: 700;
}

.mm-chiffre-libelle {
    margin: 4px 0 0;
    font-size: 13px;
}

/* ---------------------------------------------------------------- praticien */

.mm-praticien {
    padding: 24px 0 64px;
}

.mm-praticien-grille {
    display: grid;
    grid-template-columns: 280px 1fr auto;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    padding: 28px;
    border-radius: var(--rayon);
    background: var(--vert-fonce);
    color: #fff;
}

.mm-praticien-grille .wp-block-heading,
.mm-praticien-grille p,
.mm-praticien-grille li {
    color: #fff;
}

.mm-praticien-visuel figure {
    margin: 0;
}

.mm-praticien-visuel img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.mm-praticien-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-praticien-contenu .wp-block-heading {
    margin: 14px 0;
    font-size: 24px;
}

.mm-praticien-contenu .wp-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.mm-praticien-contenu .wp-block-list li {
    margin-bottom: 6px;
    padding-left: 22px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat left 3px / 14px 14px;
}

.mm-praticien-actions {
    text-align: center;
}

.mm-praticien-connexion {
    margin: 12px 0 0;
    font-size: 12px;
}

.mm-praticien-connexion a {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------------------- confiance */

.mm-confiance {
    padding: 8px 0 72px;
}

.mm-confiance-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 44px;
    margin-bottom: 40px;
}

.mm-confiance-logos figure {
    margin: 0;
}

.mm-confiance-logos img {
    max-height: 30px;
    width: auto;
    opacity: 0.75;
}

.mm-confiance-temoignages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.mm-temoignage {
    padding: 22px;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: #fff;
    font-size: 13px;
}

.mm-temoignage p {
    margin: 0 0 10px;
}

.mm-temoignage-auteur {
    margin: 0;
    color: var(--vert-fonce);
    font-weight: 600;
}

/* ------------------------------------------------------------------ éditeur */

/*
 * Ce que le canevas ne peut pas reproduire, et ce qu'on lui rend.
 *
 * Dans l'éditeur, une section rend ses enfants À PLAT : les enveloppes
 * intermédiaires (`mm-accueil-conteneur`, `mm-*-grille`, `mm-*-texte`) sont
 * posées par Template/Blocks au rendu du site et n'existent pas ici. Les
 * classes du site portées par l'enveloppe (src/blocks/_shared/section.js)
 * suffisent pour les jetons, les couleurs, les titres et les boutons — c'est
 * l'essentiel. Les mises en page en grille, elles, réclament le niveau absent.
 *
 * On ne le simule QUE là où les enfants directs s'y prêtent réellement.
 * « confiance » n'a besoin de rien : son modèle est déjà fait de groupes qui
 * portent les bonnes classes. Le héros, le label et le praticien répartissent
 * leurs contenus sur deux ou trois colonnes ; reconstituer cela depuis une
 * liste plate donnerait une présentation FAUSSE, ce qui trompe le rédacteur
 * plus sûrement qu'une présentation sobre. On leur rend donc leur fond et leur
 * couleur, jamais une géométrie inventée.
 */

/* Les quatre groupes `.mm-chiffre` sont les enfants directs : la grille du
   site se transpose sans rien supposer. */
.macmoov-editeur-section.mm-chiffres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 26px;
    border-radius: var(--rayon);
    background: var(--vert-tres-doux);
}

/* La barre de presse est une simple suite en ligne, ici comme sur le site. */
.macmoov-editeur-section.mm-presse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    min-height: 76px;
}

/* Le bandeau praticien se reconnaît à son fond vert et à son texte blanc, pas
   à ses trois colonnes : on rend le premier, on laisse tomber les secondes. */
.macmoov-editeur-section.mm-praticien {
    padding: 28px;
    border-radius: var(--rayon);
    background: var(--vert-fonce);
    color: #fff;
}

.macmoov-editeur-section.mm-praticien .wp-block-heading,
.macmoov-editeur-section.mm-praticien p,
.macmoov-editeur-section.mm-praticien li {
    color: #fff;
}

/* Le canevas est plus étroit que le site : les mêmes seuils y valent. */
@media (max-width: 900px) {
    .macmoov-editeur-section.mm-chiffres {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .macmoov-editeur-section.mm-chiffres {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------- contraste renforcé */

/*
 * Deux mécanismes distincts, à ne pas confondre.
 *
 * `prefers-contrast: more` : le visiteur demande davantage de contraste, mais
 * nos couleurs restent en vigueur. On durcit donc ce qui est mesurément trop
 * faible — relevé du 13 septembre 2026 : la bordure des cartes plafonne à
 * 1,24:1, et le vert clair sur blanc à 3,94:1, sous le seuil de 4,5 exigé
 * pour du texte. Le reste de la palette tient déjà (texte courant 7,22,
 * titres 7,55).
 *
 * `forced-colors: active` : le système IMPOSE sa palette et ignore la nôtre.
 * Il ne s'agit plus de choisir des couleurs mais de garantir que les repères
 * survivent — bordures explicites là où une carte n'était délimitée que par
 * une nuance de fond, qui disparaît.
 */
@media (prefers-contrast: more) {
    .mm-accueil {
        --gris: #2E2E2F;
        --bord: #5A6B5E;
        --vert: #14612F; /* le vert clair ne sert plus pour du texte */
    }

    .mm-carte,
    .mm-temoignage,
    .mm-hero-champ input {
        border-width: 2px;
    }

    .mm-hero-confiance,
    .mm-hero-recherche {
        border: 2px solid var(--bord);
        box-shadow: none; /* une ombre ne délimite rien quand on cherche du contraste */
    }

    .mm-accueil .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link,
    .mm-accueil-cta .wp-block-button__link {
        border-width: 2px;
    }

    /* Les atténuations d'opacité retirent du contraste : elles sautent. */
    .mm-confiance-logos img {
        opacity: 1;
    }

    .mm-hero-populaires a,
    .mm-presse-lien a,
    .mm-hero-confiance-lien a {
        text-decoration-thickness: 2px;
    }
}

@media (forced-colors: active) {
    /*
     * Les surfaces distinguées par une simple nuance de fond deviennent
     * invisibles : carte, témoignage, pastille d'icône, bandeau praticien.
     * Une bordure les rétablit, dans la couleur imposée par le système.
     */
    .mm-carte,
    .mm-temoignage,
    .mm-chiffres-grille,
    .mm-label .mm-label-grille,
    .mm-praticien-grille,
    .mm-hero-confiance,
    .mm-hero-recherche {
        border: 1px solid CanvasText;
    }

    .mm-carte-icone {
        border: 1px solid CanvasText;
        background: Canvas;
    }

    /* Le tracé des icônes suit currentColor : il reste donc visible. */
    .mm-carte-icone .mm-icone {
        forced-color-adjust: auto;
    }

    .mm-confiance-logos img {
        opacity: 1;
    }
}

/* --------------------------------------------------------------- responsive */

/*
 * Paliers à lignes pleines — UN SEUL SEUIL POUR LES DEUX GRILLES.
 *
 * Laissées à elles-mêmes, elles donnaient des lignes bancales : 5 + 1 à 1 024
 * pour les cartes, 5 + 1 à 1 200, 1 100 et 900 pour les garanties du label. Un
 * nombre de colonnes explicite règle le cas des six éléments de la maquette :
 * 6, puis 3, puis 2 — toujours des lignes pleines.
 *
 * LE SEUIL VIENT DU RENDU, PAS DU CALCUL. La base flex laissait six cartes
 * tenir jusqu'à 1 100px, mais à 157px (1 200) puis 141px (1 100) leurs titres
 * passaient sur deux lignes et les descriptions s'étiraient en colonnes de huit
 * lignes : six colonnes trop étroites ne valent pas mieux qu'une orpheline. Le
 * label bascule à la même largeur, sa colonne de contenu étant amputée des
 * 260px du visuel — 716px à 1 200px de fenêtre.
 */
@media (max-width: 1279px) {
    .mm-label-contenu .wp-block-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /*
     * 33,333% moins la part de gouttière revenant à chaque carte (20px × 2/3).
     *
     * `max-width` n'est pas levé ici : à 1 200, trois cartes s'étaleraient
     * sinon à 333px. Plafonnées à 280, elles se centrent — `justify-content`
     * est déjà posé sur la grille.
     */
    .mm-solutions-grille .mm-carte,
    .macmoov-editeur-grille .mm-carte {
        flex-basis: calc(33.333% - 14px);
    }
}

@media (max-width: 900px) {
    .mm-hero-grille,
    .mm-label .mm-label-grille,
    .mm-praticien-grille {
        grid-template-columns: 1fr;
    }

    /* La carte de confiance passe sous la photo : superposée sur un écran
       étroit, elle couvrirait le visuel entier. */
    .mm-hero-confiance {
        position: static;
        width: auto;
        margin-top: -40px;
    }

    .mm-hero-visuel img {
        border-radius: var(--rayon);
        max-height: 280px;
    }

    .mm-hero-recherche {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0;
    }

    .mm-hero-populaires {
        margin-top: 20px;
    }

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

    .mm-chiffre:not(:last-child) {
        border-right: none;
    }

    .mm-praticien-actions {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .mm-presse-texte {
        margin-left: 0;
    }

    .mm-hero-texte > .wp-block-list {
        flex-direction: column;
        gap: 10px;
    }

    /* Relais du palier à trois colonnes : sans cette règle, les six garanties
       restaient sur trois colonnes jusqu'en 400px de fenêtre, soit une
       centaine de pixels chacune. La maquette mobile en montre deux de front. */
    .mm-label-contenu .wp-block-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Deux colonnes d'icônes, sans description : la maquette mobile ne garde
       que le titre de chaque solution. En flex, cela se dit par la largeur de
       base des cartes, et non par un nombre de colonnes. */
    .mm-solutions-grille .mm-carte,
    .macmoov-editeur-grille .mm-carte {
        flex-basis: calc(50% - 10px);
        max-width: none;
    }

    .mm-carte p {
        display: none;
    }

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