/* ==================================================
   BLOC — LIEN MIS EN AVANT

   Une carte cernée, cliquable d'un bout à l'autre.

   Le plus petit des blocs d'action, dessiné pour se
   répéter : rien de plein, rien de criard, un cadre et
   une flèche. Les trois tons colorés ne teintent que le
   filet et la pastille — le fond reste blanc, sans quoi
   deux cartes à la suite feraient un damier.
================================================== */

.carte_lien__carte {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-carte-lien-filet);
    border-radius: var(--v-radius-lg);

    /* Le thème souligne les liens du contenu. Celui-ci est une carte. */
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.carte_lien__carte:hover,
.carte_lien__carte:focus-visible {
    text-decoration: none;
    border-color: var(--v-carte-lien-teinte);
    box-shadow: 0 6px 20px rgba(56, 49, 111, 0.1);
    transform: translateY(-2px);
}

/* Le contour du navigateur se poserait au ras du filet, où on ne le
   distingue plus. Un anneau posé à distance se voit. */
.carte_lien__carte:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--v-blanc), 0 0 0 5px var(--v-carte-lien-teinte);
}

.carte_lien__icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--v-radius-pill);
    background: var(--v-carte-lien-pastille);
    font-size: 1.25rem;
    color: var(--v-carte-lien-teinte);
}

.carte_lien__contenu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;

    /* La carte est un lien : sans cela, son texte hériterait de la
       couleur des liens et l'intitulé passerait en orange. */
    color: var(--v-texte-titre);
}

.carte_lien__intitule {
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.carte_lien__texte {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-meta);
}

/* La flèche avance au survol. C'est le seul mouvement de la carte, et il
   dit la même chose que la carte : ça continue par là. */
.carte_lien__fleche {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--v-carte-lien-teinte);
    transition: transform 0.2s ease;
}

.carte_lien__carte:hover .carte_lien__fleche,
.carte_lien__carte:focus-visible .carte_lien__fleche {
    transform: translateX(4px);
}

/* --------------------------------------------------
   LES TONS

   Trois variables par ton, posées sur la section : le
   filet, la teinte de l'icône et de la flèche, et le
   fond de la pastille. Le reste du bloc les lit — aucun
   sélecteur n'est répété d'un ton à l'autre.
-------------------------------------------------- */

.carte_lien {
    --v-carte-lien-filet: var(--v-bordure);
    --v-carte-lien-teinte: var(--v-texte-titre);
    --v-carte-lien-pastille: var(--v-papier-100);
}

.carte_lien--violet {
    --v-carte-lien-filet: var(--v-violet-500);
    --v-carte-lien-teinte: var(--v-violet-700);
    --v-carte-lien-pastille: #ece9f7;
}

.carte_lien--turquoise {
    --v-carte-lien-filet: var(--v-turquoise-500);
    --v-carte-lien-teinte: var(--v-turquoise-700);
    --v-carte-lien-pastille: var(--v-turquoise-100);
}

/* Le jaune ne se lit pas en texte sur du blanc : il reste la couleur du
   filet et du fond de pastille, mais la flèche et l'icône descendent sur
   le brun, qui est sa teinte lisible dans tout le thème. */
.carte_lien--jaune {
    --v-carte-lien-filet: var(--v-jaune-500);
    --v-carte-lien-teinte: var(--v-brun-700);
    --v-carte-lien-pastille: var(--v-jaune-100);
}

@media (prefers-reduced-motion: reduce) {
    .carte_lien__carte,
    .carte_lien__fleche { transition: none; }
    .carte_lien__carte:hover { transform: none; }
    .carte_lien__carte:hover .carte_lien__fleche { transform: none; }
}

@media (max-width: 575px) {
    /* La flèche part la première : à cette largeur, elle mange la place
       de l'intitulé pour ne rien dire que la carte ne dise déjà. */
    .carte_lien__carte { gap: 16px; padding: 18px 20px; }
    .carte_lien__fleche { display: none; }
    .carte_lien__icone { width: 40px; height: 40px; font-size: 1.0625rem; }
    .carte_lien__intitule { font-size: 1rem; }
}