/* Block : fle2026/centres-moteur */

.cm {
    --cm-accent:       color-mix(in srgb, var(--cm-red) 30%, transparent);
    --cm-dark:         var(--wp--preset--color--noir);
    --cm-grey:         #6b6b6b;
    --cm-red:          var(--wp--preset--color--rouge);
    --cm-border:       #d0d0d0;
    --cm-bg-term:      color-mix(in srgb, var(--wp--preset--color--rouge) 8%, white);
    --cm-avatar-size:  150px;
    --cm-cols:         4;
    --cm-gap:          1.5rem;
    font-family: inherit;
}

/* Quand le bloc est alignfull, contraindre le contenu interne à wide */
.cm.alignfull > * {
    max-width: var(--wp--style--global--wide-size, 1340px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Les wrappers de section sont pleine largeur — la contrainte wide descend sur leur enfant */
#cm-termes-wrap,
#cm-options-wrap,
#cm-grille-wrap {
    max-width: none;
    margin-inline: 0;
}

#cm-termes-wrap  { border-bottom: 1px solid var(--cm-border); }
#cm-options-wrap { border-bottom: 1px solid var(--cm-border); }

/* Contenu interne contraint à wide */
.cm__termes,
.cm__options,
.cm__grille {
    max-width: var(--wp--style--global--wide-size, 1340px);
    margin-inline: auto;
}

/* ① Barre familles — masquée, les termes sont le filtre principal */
.cm__familles { display: none; }

/* Typo partagée : termes + options + footer */
#cm-termes-wrap,
.cm__options,
.cm__tris-label,
.cm__search,
.cm__show-all {
    font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    text-transform: uppercase;
}

/* ② Barre termes — filtre principal avec icônes cercle checkmark */
.cm__termes {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.5rem 0;
    align-items: center;
    overflow: visible;
    cursor: default;
    min-height: auto;
}

/* Propriétés partagées : tous les liens de filtre/tri sont des <a> */
.cm__terme,
.cm__tri,
.cm__tri--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: var(--cm-grey);
    line-height: 1;
    transition: color 0.2s ease;
}

.cm__terme {
    flex-shrink: 0;
}

.cm__terme::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border: 1px solid var(--cm-border);
    border-radius: 50%;
    flex-shrink: 0;
    color: transparent;
    transition: border-color 0.2s, color 0.2s;
    padding: .1em;
}

.cm__terme--active,
.cm__terme:hover { 
    color: var(--cm-dark); 
    font-weight: 500;
}

.cm__terme--active::before {
    content: "✓";
    border-color: var(--cm-dark);
    color: var(--cm-dark);
}

.cm__terme:hover::before {
    content: "✓";
    border-color: var(--cm-grey);
    color: var(--cm-grey);
}

/* ③ Titre — masqué */
.cm__titre { display: none; }

/* ④ Options de tri + CTA */
.cm__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-bottom: 0;
}

.cm__tris {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.cm__tri--active { color: var(--cm-dark); font-weight: 700; cursor: default; }
a.cm__tri:hover  { color: var(--cm-dark); }
a.cm__tri        { cursor: pointer; }

.cm__tri--toggle { cursor: pointer; }

.cm__tri--toggle::before {
    content: "−";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border: 1px solid var(--cm-border);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--cm-grey);
    line-height: 0;
    transition: border-color 0.2s, color 0.2s;
    padding: .4em;
}

.cm__tri--toggle:hover { color: var(--cm-dark); }
.cm__tri--toggle:hover::before {
    border-color: var(--cm-grey);
    color: var(--cm-dark);
}

.cm__search {
    color: #fff;
    background: #808080;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 4.4rem;
    outline: none;
    text-align: center;
    transition: background 0.2s, opacity 0.2s;
    cursor: pointer;
}
.cm__search:hover,
.cm__search:focus { opacity: 0.85; }

.cm__tris-label {
    margin-right: 1.5rem;
}

.cm__tri-sep {
    color: var(--cm-border);
    padding: 0 0.4rem;
    font-size: var(--wp--preset--font-size--label);
}

.cm__cta {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--cm-dark);
    color: #fff;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.cm__cta:hover { opacity: 0.8; color: #fff; }

/* ⑤ Grille continue — 4 colonnes */
.cm__grille {
    display: grid;
    grid-template-columns: repeat(var(--cm-cols), 1fr);
    gap: var(--cm-gap);
    padding: 0 0 0.75rem;
    margin-top: 1.5rem;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

/* Cellule-lettre : masquée, grille sans séparateurs */
.cm__lettre { display: none; }

/* Carte : colonne (inner + bouton +) */
.cm__carte {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Gradient de survol — glisse depuis le bas */
.cm__carte::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, transparent 40%, var(--wp--preset--color--rose) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: -1;
    border-radius: 20px;
}
.cm__carte:hover::before { opacity: 1; }

/* Rangée interne : avatar à gauche + texte à droite */
.cm__carte-inner {
    display: flex;
    flex-direction: row;
    gap: 0.65rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.cm__carte-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 10px;
}

/* Ville — en couleur accent */
.cm__carte-ville {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    color: var(--cm-red);
    margin: 0;
    line-height: 1.2;
}

.cm__carte-nom {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.25;
}
.cm__carte-nom a {
    color: var(--cm-dark);
    text-decoration: none;
    transition: color 0.15s;
}
/* Stretched link : l'<a> couvre toute la carte */
.cm__carte-nom a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cm__carte-nom a:hover { color: var(--cm-dark); }

.cm__carte-desc {
    font-size: var(--wp--preset--font-size--medium);
    color: var(--cm-grey);
    line-height: 1.45;
    margin: 0;
}

/* Bouton + expand — au-dessus du stretched link */
.cm__carte-expand {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 100;
    color: var(--cm-grey);
    cursor: pointer;
    align-self: center;
    margin-top: 0.75rem;
    padding: 0 0.5rem;
    line-height: 1;
    transition: color 0.15s;
}
.cm__carte-expand:hover { color: var(--cm-accent); }

/* ⑥ Footer */
.cm__footer {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid var(--cm-border);
}
.cm__show-all {
    background: none;
    border: none;
    letter-spacing: 0.1em;
    color: var(--cm-grey);
    cursor: pointer;
    transition: color 0.15s;
}
.cm__show-all:hover { color: black; }

.cm__vide {
    padding: 2rem 0;
    color: var(--cm-grey);
    font-style: italic;
}

/* État de chargement AJAX */
.cm--loading {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

@keyframes cm-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cm--anim {
    animation: cm-fadein 0.3s ease both;
}

@media (max-width: 1024px) { .cm { --cm-cols: 3; } }
@media (max-width: 768px) {
    .cm { --cm-cols: 2; }
    .cm__termes   { gap: 1.2rem; }
    .cm__options  { flex-direction: column; align-items: flex-start; }
    .cm__options,
    .cm__grille {
        padding-inline: var(--wp--style--root--padding-right);
    }
}
@media (max-width: 480px) { .cm { --cm-cols: 1; } }

.guide-selection-site a {
    border: 1px solid var(--wp--preset--color--gris);
    font-weight: bold;
    color: var(--wp--preset--color--gris);
    font-size: var(--wp--preset--font-size--small);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
}