/* ============================================================
   Section Expertises — version minimaliste

   Une liste, rien d'autre. Pas de media, pas de vignette, pas de
   script. Au survol, seul le titre prend la couleur de sa categorie :
   aucun element ne se deplace, aucun n'apparait.

   La couleur est posee par ligne en style inline (--expertise-color),
   ce qui evite quatre regles quasi identiques.
   ============================================================ */

.expertises {
    width: 100%;
    background-color: var(--backgroundaccueil);
    /* Bloc pleine largeur : le passage de --espacecote en pourcentage
       au-dela de 2000px est ici le comportement voulu. */
    padding-inline: var(--espacecote);
    padding-bottom: 3rem;
}

.expertises__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #000000;
}

/* Deux colonnes : le titre colle au bord gauche, la description est ferree
   au bord droit. Les descriptions ne demarrent donc plus sur la meme
   verticale, elles FINISSENT dessus, ce qui ne depend plus du tout de la
   longueur des titres. */
.expertise {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.35rem;
    border-bottom: 1px solid #000000;
    text-decoration: none;
}

.expertise__name {
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: var(--police);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

/* police.css met les <p> en blanc : forcer la couleur ici. */
.expertise__desc {
    margin: 0;
    padding: 0;
    min-width: 0;
    color: #55554f;
    font-family: var(--police);
    font-size: 0.9rem;
    line-height: 1.4;
    justify-self: end;
    text-align: right;
}

/* ---------- Survol ---------- */
/* Le seul effet de la section. Rien ne bouge : c'est une couleur qui
   change, pas une position. */

.expertise:hover .expertise__name,
.expertise:focus-visible .expertise__name {
    color: var(--expertise-color);
}

.expertise:focus-visible {
    outline: 2px solid var(--expertise-color);
    outline-offset: -2px;
}

/* ---------- Mobile ---------- */

/* Sous 768px le titre et la description ne tiennent plus cote a cote
   (CHARACTER fait deja ~200px a lui seul) : on empile, et la description
   repasse a gauche, un texte ferre a droite sur toute une ligne etant
   penible a lire. */
@media (max-width: 768px) {
    .expertise {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
        padding-block: 1.15rem;
    }

    .expertise__name {
        font-size: 1.75rem;
    }

    .expertise__desc {
        justify-self: start;
        text-align: left;
    }
}

/* ---------- Accessibilite ---------- */

@media (prefers-reduced-motion: reduce) {
    .expertise__name {
        transition: none;
    }
}