/* ==========================================================================
   styles-espace.css : Ton Espace.

   L'idée tient en une phrase : un en-tête qui te nomme et dit l'état du
   jour, puis un tableau en deux colonnes, une d'appui et une de cartes.
   Chaque carte porte son propre fond, tiré de la palette : on reconnaît son
   rôle avant de lire son titre.

   La ligne du temps, l'agenda et le bilan ont été retirés le 3 septembre
   2026 sur décision de Valentin. Leur code est dans l'historique git, au
   commit « Les trois cartes au format large de la photo 3 ».

   Ce qui est banni ici, et pourquoi :
     - aucune bande de capitales au-dessus d'un titre (un titre porte son
       propre poids) ;
     - aucun filet de couleur épais sur le côté d'une carte ;
     - aucune flèche collée en fin de lien ;
     - un seul rayon d'arrondi ne s'applique pas à tout : il suit la
       hiérarchie de l'élément ;
     - une seule entrée animée, pas le même fondu-montée sur chaque bloc ;
     - aucun soulèvement au survol par réflexe.

   Aucune couleur en dur : tout vient de design-tokens.css.
   ========================================================================== */

.espace {
  padding: var(--esp-6) 0 var(--esp-12);
}

/* Même largeur que l'en-tête et la landing : le site ne change jamais de
   gabarit d'une page à l'autre. */
.largeur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

/* --------------------------------------------------------------------------
   1. L'en-tête de page

   Le titre à gauche, la pastille du plan à droite, sur la même ligne. Le nom
   porte l'orange écrit de la charte (--orange-texte) : l'orange vif tombe à
   2,6:1 sur le papier crème, il serait illisible.
   -------------------------------------------------------------------------- */

.bienvenue {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
  flex-wrap: wrap;
}

.bienvenue-texte { min-width: 0; }

.bienvenue-titre {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: var(--graisse-titre);
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.bienvenue-nom { color: var(--orange-texte); }

/* L'accroche dit l'état du jour, elle n'est pas un slogan : poids normal,
   elle ne dispute rien au titre. */
.bienvenue-phrase {
  margin: var(--esp-1) 0 0;
  font-size: var(--t-corps);
  font-weight: var(--graisse-corps);
  color: var(--muted);
  line-height: 1.5;
  max-width: 60ch;
}

/* La pastille du plan. Gélule, comme tous les boutons de la charte. */
.pastille-plan {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-bouton);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  text-decoration: none;
  transition: border-color var(--dur-court) var(--ease-sortie),
              background-color var(--dur-court) var(--ease-sortie);
}

/* Le point du plan : bleu, comme les deux points du logo. */
.pastille-plan::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.pastille-plan:hover { border-color: var(--metal); background: var(--surface-survol); }
.pastille-plan:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Le tableau : colonne d'appui à gauche, trois cartes à droite
   -------------------------------------------------------------------------- */

.tableau {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  margin-bottom: var(--esp-6);
}

@media (max-width: 1020px) {
  .tableau { grid-template-columns: minmax(0, 1fr); }
  /* Empilé, ce qui agit passe devant ce qui aide : sinon on ouvre son
     téléphone sur un dépôt de CV fermé avant de voir ses relances. */
  .colonne-droite { order: -1; }
}

/* La colonne d'appui : deux blocs sobres, aucun n'est urgent. */
.rail {
  display: grid;
  gap: var(--esp-2);
}

.rail-carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panneau);
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
}

.rail-titre {
  margin: 0 0 var(--esp-1);
  font-size: 1rem;
  font-weight: var(--graisse-titre);
  letter-spacing: -0.01em;
}

.rail-texte {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: var(--interligne-corps);
}

.rail-note {
  margin: var(--esp-1) 0 0;
  font-size: 0.8125rem;
  color: var(--muted-doux);
  line-height: 1.45;
}

/* La zone de dépôt. Elle est éteinte et le dit : le trait discontinu et le
   gris disent « pas encore », l'aire n'accepte rien et ne prétend pas le
   contraire. */
.depot {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: var(--esp-3) var(--esp-2);
  border: 1.5px dashed var(--metal);
  border-radius: var(--r-carte);
  background: var(--surface-creuse);
  text-align: center;
}

.depot-icone {
  fill: none;
  stroke: var(--muted-doux);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.depot-texte {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-doux);
}

.rail-action {
  margin-top: var(--esp-2);
  width: 100%;
  font-family: var(--police);
  font-size: 0.8125rem;
  font-weight: var(--graisse-moyen);
  color: var(--muted-doux);
  background: var(--surface-creuse);
  border: 1px solid var(--line);
  border-radius: var(--r-bouton);
  padding: 8px 12px;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Les trois cartes

   Format large : le texte et son bouton à gauche, le décor au milieu, les
   chiffres à droite. Elles s'empilent, elles ne se serrent pas en trois
   colonnes : à trois de front, chacune ferait 240 px et redeviendrait un
   carré.

   Chacune a son fond, tiré de la palette : on reconnaît son rôle avant de
   lire son titre.
   -------------------------------------------------------------------------- */

.cartes {
  display: grid;
  gap: var(--esp-2);
}

.carte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--esp-3);
  min-height: 172px;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--r-panneau);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

@media (max-width: 720px) {
  /* Empilée, la carte se lit de haut en bas : le texte, le décor, les
     chiffres. Le décor ne disparaît pas, il descend. */
  .carte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-2);
    padding: var(--esp-3);
  }
}

.carte-corps {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.carte-titre {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: var(--graisse-titre);
  letter-spacing: -0.02em;
}

.carte-texte {
  margin: 0 0 var(--esp-2);
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: var(--interligne-corps);
  max-width: 34ch;
}

/* Le bouton de la carte. Gélule, comme tous les boutons de la charte, et
   sans flèche accrochée à la fin : le bouton dit où il mène, la flèche ne
   l'apprend à personne. */
.carte-bouton {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--r-bouton);
  font-size: 0.9375rem;
  font-weight: var(--graisse-moyen);
  text-decoration: none;
  background: var(--blue);
  color: var(--sur-bleu);
  border: 1px solid var(--blue);
  transition: background-color var(--dur-court) var(--ease-sortie);
}
.carte-bouton:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.carte-bouton:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Éteint : il dit pourquoi, il ne se grise pas pour faire joli. */
.carte-bouton-eteint {
  background: var(--surface-creuse);
  border-color: var(--line);
  color: var(--muted-doux);
  cursor: default;
}

/* --- Carte 1 : la seule surface sombre de la page --- */
.carte-suivi {
  background: var(--ink);
  border-color: var(--ink);
}

.carte-suivi .carte-titre { color: var(--paper); }
.carte-suivi .carte-texte { color: var(--metal); }
.carte-suivi .carte-bouton {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.carte-suivi .carte-bouton:hover { background: var(--metal-light); border-color: var(--metal-light); }

/* Le paraphe de la marque, tracé en fond de la carte. Très discret : il
   signe la carte, il ne la décore pas. */
.carte-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.28;
  pointer-events: none;
}

.carte-paraf {
  position: relative;
  z-index: 1;
  width: 92px;
  height: auto;
  align-self: end;
  margin-bottom: calc(var(--esp-3) * -1);
}

@media (max-width: 720px) {
  .carte-paraf { justify-self: start; margin-bottom: 0; width: 76px; }
  /* Le paraphe de fond est tracé pour une carte large. Étiré sur une carte
     haute, il devient une bande épaisse qui traverse les chiffres : sur
     téléphone, il se retire plutôt que de se déformer. */
  .carte-fond { display: none; }
}

/* Les deux chiffres, à droite. Sous-cartes sur le bleu profond de la
   charte, rayon plus petit que celui de la carte qui les porte. */
.mesures {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: var(--esp-1);
}

.mesure {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: var(--esp-2);
  border-radius: var(--r-carte);
  background: var(--clip);
  text-decoration: none;
  transition: background-color var(--dur-court) var(--ease-sortie);
}
a.mesure:hover { background: var(--blue-darker); }
a.mesure:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.mesure-nombre {
  font-family: var(--police-chiffres);
  font-size: 2.25rem;
  font-weight: var(--graisse-titre);
  line-height: 1;
  color: var(--paper);
}

.mesure-mot {
  font-size: 0.75rem;
  color: var(--metal);
  line-height: 1.3;
}

/* Le retard s'allume seulement s'il y en a : un zéro en couleur d'alerte est
   une fausse alerte, et on finit par ne plus la voir. */
.mesure-allumee .mesure-nombre { color: var(--orange); }

/* Les chiffres d'une carte qui n'a pas encore de données : ils gardent la
   place, ils n'inventent rien. */
.mesures-eteintes .mesure {
  background: var(--surface);
  border: 1px solid var(--metal-light);
}
.mesures-eteintes .mesure-nombre { color: var(--muted-doux); font-size: 1.75rem; }
.mesures-eteintes .mesure-mot { color: var(--muted-doux); }

/* --- Carte 2 : le CV, sur le lavande de la charte --- */
.carte-cv {
  background: var(--fond-neutre);
  border-color: var(--fond-neutre);
}

/* Les deux feuilles prennent la place de Paraf : même colonne, même rôle. */
.cv-dessin {
  position: relative;
  z-index: 1;
  width: 104px;
  height: auto;
  align-self: end;
  margin-bottom: calc(var(--esp-3) * -1);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  .cv-dessin { justify-self: start; margin-bottom: 0; width: 88px; }
}

.cv-feuille-arriere { stroke: var(--metal); }
.cv-feuille-avant { stroke: var(--blue); }
/* La feuille de devant est pleine, sinon celle de derrière la traverse. */
.cv-feuille-avant path:first-child { fill: var(--fond-neutre); }

/* --- Carte 3 : l'emplacement libre --- */
.carte-libre {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: 120px;
  background: none;
  border-style: dashed;
  border-color: var(--metal);
}

.carte-libre-texte {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-doux);
}

/* --------------------------------------------------------------------------
   Le premier jour, et l'erreur de lecture
   -------------------------------------------------------------------------- */

.debut { text-align: center; padding-top: var(--esp-6); }

.debut-paraf {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto var(--esp-4);
}

.debut-texte,
.erreur-texte {
  margin: 0 auto var(--esp-5);
  max-width: 46ch;
  font-size: var(--t-corps);
  color: var(--muted);
  line-height: var(--interligne-corps);
}

.erreur { padding-top: var(--esp-4); }

.salutation {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-section);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
  line-height: var(--interligne-titre);
}

/* --------------------------------------------------------------------------
   Le bouton unique
   -------------------------------------------------------------------------- */

.btn-large {
  font-size: var(--t-sous-titre);
  font-weight: var(--graisse-moyen);
  padding: 14px var(--esp-4);
}

/* --------------------------------------------------------------------------
   Les raccourcis : du texte, pas des cartes.
   -------------------------------------------------------------------------- */

.raccourcis {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-8);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--line);
}

.raccourcis-titre {
  font-size: var(--t-interface);
  color: var(--muted-doux);
}

.raccourcis a {
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--metal);
  transition: border-color var(--dur-court) var(--ease-sortie);
}

.raccourcis a:hover { border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   Le chargement

   Chaque bloc gris a la taille de ce qui va le remplacer : quand les
   données arrivent, rien ne saute.
   -------------------------------------------------------------------------- */

.squelette {
  background: var(--surface-creuse);
  border-radius: var(--r-carte);
  animation: pulsation 1.4s ease-in-out infinite;
}

.squelette-phrase { height: 78px; max-width: 34ch; margin-bottom: var(--esp-5); }
.squelette-rail { height: 300px; }
.squelette-cartes { height: 224px; }
.squelette-ligne { height: 130px; margin-bottom: var(--esp-6); }
.squelette-agenda { height: 260px; }
.squelette-cote { height: 220px; }

@keyframes pulsation {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .espace { padding: var(--esp-4) 0 var(--esp-8); }

  /* Paraf passe sous la phrase, à droite : côte à côte, il ne resterait que
     quelques mots par ligne. */
  .ouverture {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-2);
  }
  .ouverture-phrase { max-width: none; }
  .ouverture-paraf {
    grid-column: 1;
    grid-row: auto;
    width: 76px;
    justify-self: end;
    margin-top: calc(var(--esp-2) * -1);
  }

  /* Le dessin est deux fois plus petit, les marques gardent leur taille :
     on leur redonne de l'air en haut et on limite la largeur de l'étiquette
     pour qu'elle ne sorte pas de l'écran. */
  .ouverture { margin-bottom: var(--esp-2); }
  .ligne { margin-bottom: var(--esp-5); }
  .ligne-scene { padding-top: 58px; }
  .ligne-marques { top: 58px; }
  /* L'étiquette a moins de place : elle passe sur deux lignes plutôt que de
     couper le nom de l'entreprise. */
  .ligne-carte { max-width: 72vw; white-space: normal; }

  /* Au pouce, une cible pleine largeur est plus sûre qu'un bouton centré. */
  .btn-large { display: block; text-align: center; }
}