/* ==================================================
   BLOC — PORTES D'ENTRÉE

   Quatre ronds photo ; cliquer sur l'un mène à sa page.

   Le détail se dépliait ici, sous la rangée : un panneau
   par porte, rendu pour les quatre et masqué en attendant
   un clic. Les quatre cents lignes qui l'habillaient sont
   parties avec lui, sur les pages des portes, où ce sont
   les blocs du builder qui s'en chargent.
================================================== */

.portes_entree__head {
    margin-bottom: 28px;
}

/* --------------------------------------------------
   LES PORTES, EN ROND

   Elles étaient quatre cartes rectangulaires pleines de couleur,
   l'intitulé écrit en blanc à l'intérieur. Quatre pavés côte à
   côte se lisent comme un tableau : on les compare au lieu de
   choisir.

   Un disque ne se compare pas, il s'attrape. La photo devient donc
   ronde, cerclée de la couleur de la porte, et l'intitulé descend
   dessous en texte sombre — lisible sur le fond de la page, ce que
   le blanc sur jaune n'a jamais été.

   La couleur ne disparaît pas : elle passe de la surface au contour.
-------------------------------------------------- */

.portes_entree__portes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portes_entree__porte {
    position: relative;

    /* La teinte de la porte, posée une fois : l'anneau et l'invite la
       lisent ici plutôt que de répéter quatre sélecteurs chacun. */
    --v-porte: var(--v-orange);
}

/* Le lien porte toute la porte : la zone cliquable doit couvrir le
   disque comme le texte, sinon on vise mal.

   C'était un bouton, du temps où il dépliait un panneau. C'est un lien
   depuis qu'il mène à une page : le clic du milieu ouvre un onglet, le
   survol montre l'adresse, et le lecteur d'écran annonce un lien plutôt
   qu'un bouton — soit exactement ce qui se passe. */
.portes_entree__declencheur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Le thème souligne les liens du contenu ; celui-ci est une porte, pas
   une phrase. */
a.portes_entree__declencheur,
a.portes_entree__declencheur:hover {
    text-decoration: none;
}

.portes_entree__porte:hover .portes_entree__declencheur { transform: translateY(-3px); }

/* Le disque. Sa largeur suit la colonne, mais il ne dépasse pas une
   taille où une photo de visage se transforme en affiche. */
.portes_entree__photo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 216px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;

    /* Sans photo, le disque reste la couleur de la porte : la rangée
       garde ses quatre ronds colorés même si l'image manque. */
    background: var(--v-porte);

    /* L'anneau est un contour, pas une bordure : une bordure rognerait
       la photo de son épaisseur à chaque changement d'état, et le
       disque sauterait de quelques pixels au survol. */
    box-shadow: 0 0 0 4px var(--v-blanc), 0 0 0 8px var(--v-porte);
    transition: box-shadow 0.2s ease;
}

/* L'anneau s'épaissit au survol et au clavier. C'est ce qui remplace
   l'ancien état « ouverte » : la couleur reste le signal, elle change
   d'épaisseur au lieu de changer de surface. */
.portes_entree__porte:hover .portes_entree__photo,
.portes_entree__declencheur:focus-visible .portes_entree__photo {
    box-shadow: 0 0 0 4px var(--v-blanc), 0 0 0 12px var(--v-porte);
}

/* Le contour du navigateur se poserait sur la boîte carrée du lien, à
   distance du rond. L'anneau ci-dessus tient le rôle, mieux placé. */
.portes_entree__declencheur:focus-visible {
    outline: none;
}

/* Pastille d'icône posée en bas du disque, légèrement rentrée : sur un
   rond, un coin n'existe pas, et une pastille calée à gauche sortirait
   du cercle. */
.portes_entree__icone {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    box-shadow: 0 4px 12px rgba(56, 49, 111, 0.2);
    font-size: 1.375rem;
    color: var(--v-texte-titre);
}

.portes_entree__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portes_entree__contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    color: var(--v-texte-titre);
}

.portes_entree__intitule {
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

/* L'invite prend la couleur de la porte : c'est le seul endroit où la
   teinte revient dans le texte, et elle y désigne le lien. */
.portes_entree__invite {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-porte);
}

/* Couleurs des portes */
.portes_entree__porte--orange    { --v-porte: var(--v-orange); }
.portes_entree__porte--turquoise { --v-porte: var(--v-turquoise-400); }
.portes_entree__porte--violet    { --v-porte: var(--v-violet-700); }
.portes_entree__porte--jaune     { --v-porte: var(--v-jaune); }

/* Le jaune ne se lit pas en texte sur du papier blanc. Il reste la
   couleur de l'anneau, mais l'invite descend d'un cran. */
.portes_entree__porte--jaune .portes_entree__invite { color: #a97c00; }

@media (prefers-reduced-motion: reduce) {
    .portes_entree__declencheur,
    .portes_entree__photo { transition: none; }
    .portes_entree__porte:hover .portes_entree__declencheur { transform: none; }
}

@media (max-width: 991px) {
    .portes_entree__portes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    /* Un disque par ligne perdrait la moitié de l'écran en marge : on
       garde deux colonnes et on rétrécit les ronds. */
    .portes_entree__portes { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .portes_entree__photo { max-width: 140px; }
    .portes_entree__icone { width: 38px; height: 38px; font-size: 1rem; }
    .portes_entree__intitule { font-size: 0.9375rem; }
}