/* L'accueil : la photo et le nom, puis quatre cartes aux coins arrondis, une par
   activité (la quatrième, Le Mot Fin, depuis le 19 octobre 2026). Sur grand écran elles
   sont côte à côte, sur écran moyen deux par deux, sur téléphone l'une sous l'autre. */

.accueil { --accent: var(--rouge); }
.accueil .colonne { max-width: 80rem; }

/* ── Qui ──────────────────────────────────────────────────────────────────── */
.bonjour { display: flex; align-items: center; gap: 1.1rem; padding-top: clamp(1.4rem, 3.6vw, 2.8rem); padding-bottom: clamp(1.6rem, 3.6vw, 2.6rem); }
.bonjour-portrait { width: clamp(4.5rem, 7vw, 5.8rem); border-radius: 50%; clip-path: circle(49.2%); }
.bonjour h1 { margin: 0; font-weight: 800; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.005em; }
.bonjour p { margin: 0; color: var(--discret); font-size: .98rem; }

/* ── Les trois cartes ─────────────────────────────────────────────────────── */
.vitrines {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.vitrine {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; min-height: 25rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--trait); border-radius: 1.2rem;
  color: var(--texte); text-decoration: none;
  transition: border-color .25s;
}
.vitrine--romans { --accent: var(--rouge); --accent-fond: #cf3f2e; --sur-accent: #fff; }
.vitrine--gbg { --accent: var(--ambre); --accent-fond: var(--ambre); --sur-accent: #0f1115; }
.vitrine--ensino { --accent: var(--azur); --accent-fond: var(--azur); --sur-accent: #0f1115; }
.vitrine--lmf { --accent: #f2ebdf; --accent-fond: #f2ebdf; --sur-accent: #16120f; }
.vitrine:hover, .vitrine:focus-visible { border-color: var(--accent); }
.vitrine:focus-visible { outline-offset: 4px; }

/* l'image occupe le haut de la carte et se fond dans le bas, où est le texte */
.vitrine-image {
  position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 56%;
  object-fit: cover; object-position: 62% 60%;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.vitrine--romans .vitrine-image { object-position: 80% 45%; }
.vitrine--ensino .vitrine-image { object-position: 74% 72%; }
.vitrine--lmf .vitrine-image { object-position: 50% 50%; }
.vitrine:hover .vitrine-image, .vitrine:focus-visible .vitrine-image { transform: scale(1.04); }
.vitrine::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21, 25, 32, 0) 30%, rgba(21, 25, 32, .82) 48%, #151920 56%);
}

.vitrine h2 { margin: .9rem 0 .4rem; font-size: clamp(1.6rem, 2.2vw, 1.95rem); }
.vitrine h2 img { width: min(100%, 16rem); margin: .15rem 0 .25rem; }
.vitrine p:not(.etat) { margin: 0 0 1.2rem; color: var(--doux); }
.vitrine .bouton { align-self: flex-start; font-size: .92rem; white-space: nowrap; }
.vitrine-texte { display: flex; flex-direction: column; }

/* ── Écrans moyens : deux par deux ; étroits : l'une sous l'autre ─────────── */
@media (max-width: 1240px) {
  .vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vitrines { grid-template-columns: minmax(0, 1fr); }
  .vitrine { aspect-ratio: auto; min-height: 25rem; }
}