/* ==========================================================================
   ETALL — Composants : boutons, cartes, centres, modale, icône flottante
   ========================================================================== */

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  /* Zone tactile d'au moins 44 px de haut (règle 7) */
  min-height: 48px;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--rayon-pilule);
  font-size: var(--t-base);
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-rapide),
              box-shadow var(--transition-rapide),
              background-color var(--transition-rapide),
              color var(--transition-rapide),
              border-color var(--transition-rapide);
}

.bouton svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

/* Bouton principal bleu */
.bouton--primaire {
  background: var(--bleu-primaire);
  color: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.bouton--primaire:hover {
  background: var(--bleu-profond);
  box-shadow: var(--ombre-levee);
}

/* Bouton secondaire : contour bleu sur fond blanc */
.bouton--contour {
  background: var(--blanc);
  color: var(--bleu-primaire);
  border: 2px solid var(--bordure);
}
.bouton--contour:hover {
  border-color: var(--bleu-primaire);
  background: var(--bleu-brume);
  box-shadow: var(--ombre-carte);
}

/* Bouton secondaire sur fond bleu */
.bouton--fantome {
  background: rgba(255, 255, 255, .12);
  color: var(--blanc);
  border: 2px solid rgba(255, 255, 255, .55);
}
.bouton--fantome:hover {
  background: var(--blanc);
  color: var(--bleu-primaire);
  border-color: var(--blanc);
}

/* Bouton WhatsApp : tout ce qui mène à WhatsApp est vert, jamais bleu.
   Le vert devient ainsi le signal unique du site : vert = on écrit. */
.bouton--whatsapp {
  background: var(--vert-whatsapp);
  color: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.bouton--whatsapp:hover {
  background: var(--vert-whatsapp-fonce);
  box-shadow: var(--ombre-levee);
}

/* Le logo suit la couleur du texte : blanc sur le bouton plein. */
.bouton--whatsapp > svg { color: currentColor; }

/* Sur les fonds bleus (bandeau final, pied de page), le bouton s'inverse :
   fond blanc, texte vert — et le logo reprend le vert clair de la marque. */
.section--bleue .bouton--whatsapp,
.pied .bouton--whatsapp {
  background: var(--blanc);
  color: var(--vert-whatsapp);
}

.section--bleue .bouton--whatsapp > svg,
.pied .bouton--whatsapp > svg { color: var(--vert-whatsapp); }

.section--bleue .bouton--whatsapp:hover,
.pied .bouton--whatsapp:hover {
  background: var(--vert-brume);
  color: var(--vert-whatsapp-fonce);
}

.bouton--large { width: 100%; }
.bouton--petit {
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}

/* Lien fléché « En savoir plus » : en noir, pour que le vert du bouton
   WhatsApp reste la seule couleur qui appelle au clic. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  color: var(--encre);
  font-weight: var(--graisse-forte);
  text-decoration: none;
}
.lien-fleche::after {
  content: "→";
  transition: transform var(--transition-rapide);
}
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche:hover::after { transform: translateX(5px); }

/* --- Grilles de cartes ---------------------------------------------------- */

.grille {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;      /* mobile : une seule colonne (règle 7) */
}

@media (min-width: 700px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grille { gap: var(--e-6); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Quatre colonnes seulement à partir de 1100 px : en dessous, les titres
   des arguments seraient trop serrés. */
@media (min-width: 1100px) {
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Carte de service ----------------------------------------------------- */

.carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-fine);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce),
              border-color var(--transition-douce);
}

.carte:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--ombre-levee);
}

.carte__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bleu-clair);
}

.carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* jamais déformée (règle 7) */
  transition: transform var(--transition-lente);
}

.carte:hover .carte__media img { transform: scale(1.06); }

/* Pastille du logo ECL posée sur l'image de la carte Examens */
.carte__pastille {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  width: 62px;
  height: 62px;
  padding: 6px;
  background: var(--blanc);
  border-radius: 50%;
  box-shadow: var(--ombre-carte);
}
.carte__pastille img { width: 100%; height: 100%; object-fit: contain; }

.carte__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
}

.carte__titre { color: var(--bleu-profond); }

.carte__texte {
  flex: 1;
  color: var(--encre-douce);
}

/* --- Carte d'argument (Pourquoi ETALL) ------------------------------------ */

.atout {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-5);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-fine);
  transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

/* « focus-visible » : celui qui circule au clavier voit l'encadré se soulever
   exactement comme celui qui le survole à la souris. */
.atout:hover,
.atout:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--ombre-levee);
}

.atout__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--bleu-clair);
  border-radius: var(--rayon-md);
  color: var(--bleu-primaire);
}
.atout__icone svg { width: 27px; height: 27px; }

.atout__titre { color: var(--bleu-profond); }
.atout__texte { font-size: var(--t-sm); color: var(--encre-douce); }

/* --- Chiffres mis en avant ------------------------------------------------ */

.chiffres {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--e-7);
}

@media (min-width: 700px) {
  .chiffres { grid-template-columns: repeat(4, 1fr); gap: var(--e-5); }
}

.chiffre {
  padding: var(--e-4) var(--e-3);
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}

.chiffre__valeur {
  display: block;
  font-size: var(--t-2xl);
  font-weight: var(--graisse-forte);
  line-height: 1;
  color: var(--bleu-primaire);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.chiffre__libelle {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

/* --- Liste des centres ---------------------------------------------------- */

.centres {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .centres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .centres { grid-template-columns: repeat(3, 1fr); } }

.centre {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-5);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-fine);
  transition: transform var(--transition-douce),
              box-shadow var(--transition-douce),
              border-color var(--transition-douce);
}

.centre:hover {
  transform: translateY(-4px);
  border-color: var(--bleu-clair);
  box-shadow: var(--ombre-carte);
}

.centre__nom {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  line-height: 1.3;
}

.centre__nom svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--bleu-primaire);
}

.centre__lieu {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.centre .bouton { margin-top: auto; }

/* --- Icône WhatsApp flottante --------------------------------------------- */

/* Icône flottante : la pastille ronde est verte — c'est le logo WhatsApp.
   Le libellé qui l'accompagne reste sur fond blanc, écrit en vert. */
.flottant {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  /* Même précaution que pour le menu : on ajoute la zone réservée par le
     téléphone en bas de l'écran, pour que l'icône ne se glisse pas sous la
     barre du navigateur ou sous la barre de gestes. */
  bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom));
  z-index: var(--plan-flottant);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: 60px;
  padding: 0 20px 0 0;
  background: var(--blanc);
  border-radius: var(--rayon-pilule);
  box-shadow: 0 8px 30px rgba(0, 26, 110, .26);
  color: var(--vert-whatsapp);
  font-weight: var(--graisse-forte);
  text-decoration: none;
  transition: background-color var(--transition-rapide),
              transform var(--transition-rapide),
              box-shadow var(--transition-rapide);
}

.flottant:hover {
  background: var(--vert-brume);
  color: var(--vert-whatsapp-fonce);
  transform: scale(1.05);
  box-shadow: 0 12px 38px rgba(0, 26, 110, .32);
}

.flottant__rond {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  /* Vert un cran plus soutenu que celui du logo : sur mobile le libellé
     disparaît et ce rond porte seul le message, il doit donc se détacher
     nettement du blanc de la page (3,1:1 au lieu de 2:1). */
  background: var(--whatsapp-fonce);
  color: var(--blanc);
  transition: background-color var(--transition-rapide);
}

.flottant:hover .flottant__rond { background: var(--vert-whatsapp); }

.flottant__rond svg { width: 32px; height: 32px; }

.flottant__texte { display: none; font-size: var(--t-sm); white-space: nowrap; }

/* Le libellé n'apparaît qu'à partir de 700 px : sur mobile, l'icône seule
   reste compacte et ne masque aucun contenu (règle 7). */
@media (min-width: 700px) {
  .flottant__texte { display: block; }
}

@media (max-width: 699px) {
  .flottant { padding: 0; }
}

/* --- Modale de choix du centre -------------------------------------------- */

/* Même piège que pour le menu mobile, et il est ici plus grave encore : la
   fenêtre est collée en bas de l'écran, et c'est tout en bas que se trouve
   le bouton « Ouvrir WhatsApp ». Ancrée sur la hauteur barre d'adresse
   masquée, elle glissait sous la barre du navigateur — le bouton devenait
   inatteignable, et c'est toute la raison d'être du site. */
.modale {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: var(--plan-modale);
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgba(2, 10, 40, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-douce), visibility var(--transition-douce);
}

.modale[data-ouverte="true"] {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 700px) {
  .modale { place-items: center; padding: var(--e-5); }
}

.modale__boite {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(88vh, 780px);
  max-height: min(88dvh, 780px);
  background: var(--blanc);
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
  box-shadow: var(--ombre-modale);
  transform: translateY(28px);
  transition: transform var(--transition-douce);
}

.modale[data-ouverte="true"] .modale__boite { transform: translateY(0); }

@media (min-width: 700px) {
  .modale__boite { border-radius: var(--rayon-lg); }
}

.modale__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--bordure);
}

/* Toute la fenêtre de choix sert à écrire sur WhatsApp : elle est donc
   habillée de vert, pas de bleu. */
.modale__titre {
  flex: 1;
  font-size: var(--t-lg);
  color: var(--vert-whatsapp);
}

.modale__sous-titre {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  font-weight: var(--graisse-normale);
  color: var(--encre-douce);
}

.modale__fermer {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vert-brume);
  color: var(--encre-douce);
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}
.modale__fermer:hover { background: var(--vert-brume); color: var(--vert-whatsapp-fonce); }
.modale__fermer svg { width: 20px; height: 20px; }

.modale__liste {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-3) var(--e-4);
  -webkit-overflow-scrolling: touch;
}

/* Une ligne de centre dans la modale = un vrai bouton radio accessible */
.choix {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  transition: background-color var(--transition-rapide);
}

.choix:hover { background: var(--vert-brume); }

.choix input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--vert-whatsapp);
}

.choix__nom {
  display: block;
  font-weight: var(--graisse-forte);
  color: var(--encre);
}

.choix__lieu {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--encre-douce);
}

/* Le centre choisi : fond vert léger ET liseré vert, pour que la sélection
   reste visible même quand la souris survole une autre ligne. */
.choix:has(input:checked) {
  background: var(--vert-brume);
  box-shadow: inset 0 0 0 2px var(--vert-whatsapp);
}

.modale__pied {
  padding: var(--e-4) var(--e-5) calc(var(--e-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordure);
  background: var(--vert-brume);
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
}

.modale__pied .bouton { width: 100%; }

.modale__note {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--encre-douce);
}

/* Bloque le défilement de la page derrière la modale ouverte */
body.modale-ouverte { overflow: hidden; }

/* --- Fenêtre d'information ------------------------------------------------
   Une petite fenêtre au milieu de l'écran, avec une croix pour fermer.
   Bâtie sur l'élément <dialog> du navigateur, qui gère seul le piège au
   clavier, la touche Échap et la mise à l'écart du reste de la page.
   Comme partout ailleurs, la hauteur suit l'écran RÉELLEMENT visible (dvh),
   sans quoi le bas de la fenêtre passerait sous la barre du navigateur.
   -------------------------------------------------------------------------- */

.fenetre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  max-width: none;
  max-height: none;
  padding: var(--marge-laterale);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.fenetre[open] {
  display: grid;
  place-items: center;
}

.fenetre::backdrop {
  background: rgba(2, 10, 40, .62);
  backdrop-filter: blur(3px);
}

/* Mode de repli, quand le navigateur refuse la vraie fenêtre modale :
   le fond sombre est alors porté par la fenêtre elle-même. */
.fenetre--repli {
  z-index: var(--plan-modale);
  background: rgba(2, 10, 40, .62);
  backdrop-filter: blur(3px);
}

.fenetre__boite {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  max-height: 86dvh;
  overflow: hidden;
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-modale);
}

.fenetre__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--bordure);
}

.fenetre__titre {
  flex: 1;
  font-size: var(--t-lg);
  color: var(--bleu-profond);
}

.fenetre__fermer {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bleu-brume);
  color: var(--encre-douce);
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}
.fenetre__fermer:hover { background: var(--bleu-clair); color: var(--bleu-profond); }
.fenetre__fermer svg { width: 20px; height: 20px; }

.fenetre__corps {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-5);
}

.fenetre__intro {
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.fenetre__pied {
  padding: var(--e-4) var(--e-5) calc(var(--e-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordure);
  background: var(--bleu-brume);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --- Les quatre compétences évaluées -------------------------------------- */

.competences {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.competence {
  padding: var(--e-4);
  background: var(--bleu-brume);
  border-radius: var(--rayon-sm);
}

.competence__nom {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
}

.competence__allemand {
  font-size: var(--t-sm);
  font-weight: var(--graisse-normale);
  color: var(--encre-douce);
}
.competence__allemand::before { content: "— "; }

.competence__texte {
  margin: var(--e-2) 0 0;
  line-height: 1.65;
  color: var(--encre-douce);
}

/* --- Le plan d'un centre --------------------------------------------------
   Une vignette cliquable, posée entre le nom du centre et son adresse, qui
   ouvre Google Maps dans un nouvel onglet.

   Rien n'est chargé chez Google : ni carte interactive, ni image distante.
   Une page qui appellerait un service extérieur serait plus lente, dépendrait
   d'un tiers pour s'afficher, et déposerait des traceurs chez le visiteur —
   sur un domaine allemand, cela demanderait en plus un bandeau de
   consentement. La vignette est donc soit une image du site, soit le dessin
   ci-dessous.
   -------------------------------------------------------------------------- */
.centre__carte {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bordure);
  background: var(--bleu-clair);
  transition: border-color var(--transition-rapide),
              box-shadow var(--transition-rapide);
}

.centre__carte:hover,
.centre__carte:focus-within {
  border-color: var(--bleu-primaire);
  box-shadow: var(--ombre-fine);
}

/* La carte elle-meme. Elle ne recoit pas les clics : c'est le lien pose
   par-dessus qui les prend, pour que la vignette entiere reste un lien et
   que le doigt ne se retrouve pas piege a faire glisser la carte. */
.centre__carte-plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.centre__carte-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le lien qui recouvre toute la vignette. */
.centre__carte-couvre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

/* Le plan dessiné, faute de vignette : un fond de verdure, deux réseaux de
   voies qui se croisent en biais, et l'épingle au milieu. Il ne prétend pas
   representer le quartier — il annonce ce qui s'ouvrira au clic. */
.centre__carte-dessin {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(64deg,  transparent 0 22px, #ffffff 22px 28px),
    repeating-linear-gradient(-27deg, transparent 0 34px, #ffffff 34px 39px),
    #e8efe4;
}

.centre__carte-epingle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -60%);
  /* Le rouge des repères de carte, reconnaissable au premier coup d'oeil. */
  color: #d93b30;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.centre__carte-note {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  color: var(--blanc);
  font-size: var(--t-xs);
  font-weight: var(--graisse-moyenne);
}

/* --- Bandeau d'actualité ---------------------------------------------------
   Une bande pleine largeur sous la barre du haut, pour une nouvelle qui ne
   dure qu'un temps.

   Elle vit dans le CONTENU de l'accueil, et non dans le gabarit : une annonce
   périmée s'enlève ainsi en supprimant un seul bloc par langue, sans toucher
   aux vingt-quatre autres pages ni risquer de l'oublier quelque part.
   -------------------------------------------------------------------------- */
.bandeau-actu {
  background: var(--bleu-profond);
  color: var(--blanc);
}

.bandeau-actu__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding-top: var(--e-3);
  padding-bottom: var(--e-3);
}

.bandeau-actu__etiquette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px var(--e-3);
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .16);
  font-size: var(--t-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Le point qui précède le mot : un voyant rouge qui clignote, pour que
   l'annonce attire l'oeil sans bouger le reste de la bande.
   L'animation part et revient a pleine opacite : si le visiteur a demande
   moins de mouvement, elle s'arrete sur un point net, pas sur un point
   a moitie efface. */
.bandeau-actu__etiquette::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5347;
  animation: clignote-actu 1.4s ease-in-out infinite;
}

.bandeau-actu__texte {
  margin: 0;
  min-width: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.bandeau-actu__lien {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.bandeau-actu__lien:hover,
.bandeau-actu__lien:focus-visible { text-decoration-thickness: 2px; }

/* --- Encadré entièrement cliquable -----------------------------------------
   Les quatre encadrés « Pourquoi ETALL » de l'accueil mènent chacun à la
   section qui développe le sujet. C'est le bloc ENTIER qui est le lien, et
   non un mot souligné à la fin : au doigt, viser une carte de la taille d'une
   carte postale est autrement plus facile que viser trois mots.
   -------------------------------------------------------------------------- */
/* Rien d'autre que la couleur et le soulignement : « .atout » a déjà tout
   réglé, y compris le relief au survol.
   PIÈGE ÉVITÉ DE JUSTESSE : il y avait ici « display: block ». Le poids de
   « .atout--lien » est le même que celui de « .atout », et il est écrit plus
   bas dans le fichier : c'est donc lui qui gagnait, et le « display: flex »
   de l'encadré ne s'appliquait plus. L'icône, le titre et le texte se
   collaient les uns aux autres. Un lien devient de toute façon un bloc dès
   qu'il est posé dans une grille : la ligne ne servait à rien. */
.atout--lien {
  color: inherit;
  text-decoration: none;
}

/* La flèche prévient qu'on va quelque part, au lieu de laisser croire à un
   simple encadré de lecture. */
.atout--lien .atout__titre::after {
  content: " \2192";
  color: var(--bleu-primaire);
  white-space: nowrap;
}

/* --- Chiffre entièrement cliquable -----------------------------------------
   Les quatre chiffres de l'accueil mènent chacun à la section qui les
   explique. Même principe que les encadrés : c'est le bloc entier qui est le
   lien, et non le chiffre seul, qui ferait une cible minuscule au doigt.
   -------------------------------------------------------------------------- */
.chiffre--lien {
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.chiffre--lien:hover,
.chiffre--lien:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ombre-levee);
}

/* --- Plusieurs photos au même endroit --------------------------------------
   « pile-photos » ne dessine aucun cadre. Elle se pose SUR un cadre qui
   existe déjà — celui du hero, d'une carte, d'un encadré, d'une case de
   mosaïque — et se contente d'y faire passer les photos à tour de rôle, au
   même endroit. Un emplacement qui ne montrait qu'une seule photo peut donc
   en montrer quatre sans que rien d'autre ne bouge dans la page.

   Les petits traits en bas à droite disent combien il y a de photos et
   laquelle est en train de passer. Sans eux, le visiteur verrait l'image
   changer sans comprendre pourquoi.

   Tout se fait en CSS, sans une ligne de script. Un navigateur qui ignore
   les animations affiche la première photo et s'arrête là : rien ne casse.
   -------------------------------------------------------------------------- */

/* Temps d'affichage d'une photo. Se règle bandeau par bandeau si besoin,
   en posant « --pile-pas » sur le cadre. */
.pile-photos { --pile-pas: 4.5s; }

.pile-photos__vue {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Filet de sécurité : sans animation, c'est la première photo qui reste. */
.pile-photos__vue:first-child { opacity: 1; }

.pile-photos--2 .pile-photos__vue { animation-name: pile-fondu-2; animation-duration: calc(var(--pile-pas) * 2); }
.pile-photos--3 .pile-photos__vue { animation-name: pile-fondu-3; animation-duration: calc(var(--pile-pas) * 3); }
.pile-photos--4 .pile-photos__vue { animation-name: pile-fondu-4; animation-duration: calc(var(--pile-pas) * 4); }

/* Chacune attend son tour. La première part tout de suite, la deuxième un
   temps plus tard, et ainsi de suite. */
.pile-photos__vue:nth-child(2) { animation-delay: var(--pile-pas); }
.pile-photos__vue:nth-child(3) { animation-delay: calc(var(--pile-pas) * 2); }
.pile-photos__vue:nth-child(4) { animation-delay: calc(var(--pile-pas) * 3); }

/* Les traits repères, posés sur la photo */
.pile-photos__jauge {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 6px 8px;
  border-radius: var(--rayon-pilule);
  background: rgba(15, 23, 42, .45);
}

.pile-photos__trait {
  position: relative;
  overflow: hidden;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}

/* Le trait blanc vif se pose par-dessus le trait terne, au même rythme que
   sa photo : les deux animations partagent les mêmes réglages. */
.pile-photos__trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanc);
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.pile-photos--2 .pile-photos__trait::after { animation-name: pile-fondu-2; animation-duration: calc(var(--pile-pas) * 2); }
.pile-photos--3 .pile-photos__trait::after { animation-name: pile-fondu-3; animation-duration: calc(var(--pile-pas) * 3); }
.pile-photos--4 .pile-photos__trait::after { animation-name: pile-fondu-4; animation-duration: calc(var(--pile-pas) * 4); }

.pile-photos__trait:first-child::after { opacity: 1; }
.pile-photos__trait:nth-child(2)::after { animation-delay: var(--pile-pas); }
.pile-photos__trait:nth-child(3)::after { animation-delay: calc(var(--pile-pas) * 2); }
.pile-photos__trait:nth-child(4)::after { animation-delay: calc(var(--pile-pas) * 3); }

/* Les pourcentages ne sont pas décoratifs : chaque photo occupe exactement
   sa part du tour (la moitié à deux, le tiers à trois, le quart à quatre),
   et la suivante apparaît pendant que la précédente s'efface. C'est ce
   chevauchement qui évite le clignotement blanc entre deux photos. */
@keyframes pile-fondu-2 {
  0%    { opacity: 0; }
  6%    { opacity: 1; }
  50%   { opacity: 1; }
  56%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes pile-fondu-3 {
  0%      { opacity: 0; }
  4%      { opacity: 1; }
  33.33%  { opacity: 1; }
  37.33%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes pile-fondu-4 {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  25%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Celui qui a demandé à son téléphone de limiter les animations garde une
   image fixe. Rien à écrire ici : animations.css coupe déjà toutes les
   animations du site dans ce cas, et les deux lignes ci-dessus — première
   photo visible, premier trait allumé — sont exactement ce qui reste. */

/* --- La mosaïque -----------------------------------------------------------
   Plusieurs photos côte à côte, de tailles différentes : une grande qui
   donne le ton, quatre petites autour. Sur téléphone la grande prend toute
   la largeur et les petites se rangent deux par deux ; sur ordinateur, la
   grande occupe un carré de deux cases sur deux.
   -------------------------------------------------------------------------- */
.mosaique {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--e-6);
}

.mosaique__case {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-md);
  background: var(--bleu-clair);
  box-shadow: var(--ombre-carte);
}

.mosaique__case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lente);
}

.mosaique__case:hover img { transform: scale(1.06); }

/* La grande case : toute la largeur sur téléphone, un carré double sur
   ordinateur. */
.mosaique__case--large {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

@media (min-width: 700px) {
  .mosaique { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .mosaique__case--large { grid-row: span 2; aspect-ratio: auto; }
}

/* La légende est posée sur la photo, sur un voile sombre qui monte du bas :
   sans ce voile, un texte blanc disparaîtrait sur une photo claire. */
.mosaique__legende {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--e-5) var(--e-3) var(--e-3);
  color: var(--blanc);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  line-height: 1.3;
  background: linear-gradient(to top, rgba(15, 23, 42, .78), rgba(15, 23, 42, 0));
}