@charset "utf-8";
/* ===========================================================================
 * Fichier : public/assets/css/accueil.css
 * Projet  : Escape Cards v2
 * Lot     : IMP-003 — l'infographie interactive de la page d'accueil
 * ---------------------------------------------------------------------------
 * Chargée UNIQUEMENT par public/index.php : rien d'autre sur le site ne s'en
 * sert, et les cinquante-neuf autres pages n'ont pas à la télécharger.
 *
 * CE QUE FAIT CETTE FEUILLE
 * Elle pose, PAR-DESSUS l'image des trois cartes (images/accueil-cartes.png),
 * trois calques transparents :
 *   1. les zones des trois cartes, qui s'éclairent au survol ;
 *   2. la rose des vents de la boussole, redécoupée dans l'image d'origine
 *      et reposée au même endroit, qui tourne ;
 *   3. un petit cache opaque sur le chronomètre imprimé « 24:59 », remplacé
 *      par un vrai décompte.
 * L'image, elle, n'est pas retouchée : si le JavaScript ne s'exécute pas, on
 * la voit telle quelle et la page reste complète.
 *
 * Les couleurs de ce fichier sont celles de l'IMAGE (bleu d'encre #074768,
 * papier #f8f6ef), et non celles de la charte du site : les calques doivent se
 * fondre dans le dessin, pas s'accorder au reste de la page.
 * ======================================================================== */

.infographie {
  --info-encre:  #074768;   /* le bleu des traits de l'illustration */
  --info-papier: #f8f6ef;   /* le blanc cassé des cartes            */
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1100 / 749;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;      /* la page doit rester scrollable au doigt */
}

.infographie > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* --- 1. Les trois cartes -------------------------------------------------
   Les zones suivent les bordures INTÉRIEURES réellement imprimées sur chaque
   carte. Les deux cartes latérales passent DERRIÈRE la carte centrale : leur
   zone est donc rognée à la limite de celle-ci, sans quoi une bordure
   fantôme repasserait par-dessus. */
.infographie-cartes {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;     /* seules les formes elles-mêmes réagissent */
}

.infographie-carte { pointer-events: auto; }

.infographie-carte rect {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transition: fill 180ms ease, stroke 180ms ease, filter 220ms ease;
}

.infographie-carte:hover rect,
.infographie-carte.est-active rect {
  fill: rgba(255, 255, 255, .10);
  stroke: rgba(255, 255, 255, .78);
  filter: drop-shadow(0 2px 4px rgba(7, 71, 104, .10));
}

/* Un bref éclat à l'arrivée sur la page, carte après carte : il signale que
   l'illustration réagit, sans qu'on ait à le dire. */
.infographie-carte--1 { animation: infographie-eclat 760ms 250ms ease-out both; }
.infographie-carte--2 { animation: infographie-eclat 760ms 440ms ease-out both; }
.infographie-carte--3 { animation: infographie-eclat 760ms 630ms ease-out both; }

/* --- 2. La boussole ------------------------------------------------------
   La rose des vents (images/accueil-boussole.png) a été DÉCOUPÉE dans l'image
   d'origine : c'est exactement le même dessin, en vignette transparente. Un
   petit disque couleur papier recouvre la rose imprimée, la vignette se pose
   dessus au pixel près, et c'est elle qui tourne. Le double cercle et ses
   quatre perles, eux, restent ceux de l'image et ne bougent pas, comme sur une
   vraie boussole.

   Pourquoi le cadre est-il plus grand que le disque ? Parce qu'un carré qui
   tourne balaie un cercle plus large que lui : le cadre fait exactement la
   diagonale de la vignette (√2 fois son côté), si bien que la rose ne sort
   jamais de sa boîte, quel que soit l'angle. */
.infographie-boussole {
  position: absolute;
  z-index: 7;
  left: 41.847%;
  top: 23.407%;
  width: 15.942%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* Le disque couleur papier qui masque la rose imprimée : 70,711 % du cadre,
     c'est-à-dire le disque inscrit dans le carré de la vignette. */
  background: radial-gradient(circle closest-side at 50% 50%,
              var(--info-papier) 0 70.4%, rgba(0, 0, 0, 0) 71%);
  cursor: grab;
  touch-action: none;
}
.infographie-boussole:active { cursor: grabbing; }

.infographie-rose {
  display: block;
  width: 70.711%;
  height: 70.711%;
  will-change: transform;
}

/* --- 3. Le chronomètre ---------------------------------------------------
   Le cache opaque recouvre EXACTEMENT les chiffres imprimés « 24:59 », et
   rien d'autre : ni le pictogramme du chronomètre, ni la mention « TEMPS
   RESTANT », ni le cadre blanc arrondi, qui restent ceux de l'image. */
.infographie-chrono {
  position: absolute;
  z-index: 8;
  left: 72.65%;
  top: 82.25%;
  width: 20.35%;
  height: 9.2%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--info-papier);
  overflow: hidden;
  pointer-events: none;
}
.infographie-chrono span {
  display: block;
  color: var(--info-encre);
  font-family: var(--ec-police-interface);
  font-size: clamp(14px, 4.15cqw, 40px);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
/* Le chiffre est dimensionné d'après la largeur de l'infographie elle-même
   (« cqw »), et non d'après celle de la fenêtre : dans une colonne étroite
   d'un grand écran, un « vw » l'aurait fait déborder de son cache. */
.infographie { container-type: inline-size; }

.infographie-chrono span.bat { animation: infographie-battement 220ms ease-out; }
.infographie-chrono.est-fini span { animation: infographie-fin 900ms ease-in-out 2; }

@keyframes infographie-eclat {
  0%, 100% { opacity: 1; }
  45%      { opacity: .68; }
}
@keyframes infographie-battement {
  from { opacity: .72; transform: translateY(2px); }
  to   { opacity: 1;   transform: translateY(0); }
}
@keyframes infographie-fin {
  50% { opacity: .45; }
}

/* Sur un écran tactile, il n'y a pas de survol : la carte touchée reste
   éclairée, et le trait est un peu plus marqué pour rester visible. */
@media (hover: none), (pointer: coarse) {
  .infographie-carte.est-active rect {
    fill: rgba(255, 255, 255, .13);
    stroke: rgba(255, 255, 255, .82);
  }
}

/* Réglage « animations réduites » du système : plus rien ne bouge tout seul.
   Le décompte, lui, continue d'afficher l'heure juste — il change simplement
   de chiffre sans battement, et la boussole se cale sans transition. */
@media (prefers-reduced-motion: reduce) {
  .infographie-carte--1,
  .infographie-carte--2,
  .infographie-carte--3,
  .infographie-chrono span,
  .infographie-chrono.est-fini span { animation: none !important; }
  .infographie-carte rect { transition: none; }
}

/* ===========================================================================
   IMP-018 (30/09/2026) — LE LIEN DE LA BARRE LATÉRALE
   ===========================================================================
   La barre latérale bleue de l'accueil porte désormais un lien (« Licence
   payante pour un usage commercial »). Il était écrit sur le serveur avec un
   attribut « style="color:#FFFFFF" » : la couleur revient ici, où se trouve
   toute la charte, et le lien reçoit un soulignement.

   POURQUOI LE SOULIGNEMENT. Sur ce fond bleu, tout le texte est déjà blanc :
   un lien blanc non souligné ne se distingue en RIEN du texte qui l'entoure.
   La couleur seule ne doit jamais être le seul indice d'un lien — c'est le
   critère 1.4.1 du WCAG, et c'est le genre de détail que le contrôle
   d'accessibilité du projet relève.
   ======================================================================== */
.barre-laterale .lien-barre-laterale {
  color: #fff;
  text-decoration: underline;
}
.barre-laterale .lien-barre-laterale:hover,
.barre-laterale .lien-barre-laterale:focus {
  color: var(--ec-jaune, #efad2b);
}
.barre-laterale .lien-barre-laterale:focus-visible {
  outline: 3px solid var(--ec-jaune, #efad2b);
  outline-offset: 2px;
}