/* ==========================================================================
   Tracelle — site vitrine (tracelle.fr), E17-05 #793
   Feuille propre au site. Elle s'appuie sur les jetons et les composants de css/tracelle.css (le système de
   design de l'application, repris à l'identique) et n'ajoute que les composants du site : bandeau d'accueil,
   illustration, cartes « Pour qui », fonctions numérotées, principes, encadré « À savoir », appel final,
   pied du site, pages de texte, page d'attente. Aucune couleur nouvelle : chaque couple texte/fond est un
   couple déjà mesuré dans 02-systeme-de-design.md. Aucun style en ligne, aucun script (CSP de l'application).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête du site : le logo (« l'appel de source », texte vectorisé), quatre ancres vers l'accueil, « Se connecter »
   -------------------------------------------------------------------------- */
.entete__actions { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.site .navigation { flex-grow: 0; }
.site .marque[aria-current="page"] { pointer-events: none; }
/* Le logo hérite la couleur du texte (encre) ; le point est en pétrole. La viewBox monte jusqu'au haut du point
   (#841) : 27 px de haut dans l'en-tête, soit 125 px de large, le mot à la même taille qu'avant. */
.logo { display: block; height: 27px; width: auto; color: var(--encre); }
.logo__point { fill: var(--accent); }
.marque-seule { display: block; height: 64px; width: auto; color: var(--encre); }

/* --------------------------------------------------------------------------
   2. Gabarit de l'accueil : sections espacées, titres de section un cran au-dessus de l'application
   -------------------------------------------------------------------------- */
.principal--site > * + * { margin-top: var(--e-12); }
.section > h2, .appel h2 { font-size: var(--t-22); }
.section > h2 { margin-bottom: var(--e-6); }
.section h3 { font-size: var(--t-16); }

/* --------------------------------------------------------------------------
   3. Bandeau d'accueil : le texte figé, deux actions, l'illustration
   -------------------------------------------------------------------------- */
.bandeau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-10); align-items: start; padding-top: var(--e-6); }
.bandeau__texte { min-width: 0; padding-top: var(--e-10); }
.bandeau h1 { font-size: var(--t-34); max-width: 22ch; }
.bandeau__intro { margin-top: var(--e-5); font-size: var(--t-18); color: var(--encre-2); max-width: 58ch; }
.bandeau__actions { margin-top: var(--e-8); }

/* Illustration : un extrait de la revue, encadré, toujours légendé « Illustration ». Jamais présenté comme un écran réel. */
.illustration { margin: 0; padding: var(--e-3); background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-3); box-shadow: var(--ombre-2); min-width: 0; }
.illustration__legende { display: flex; align-items: center; gap: 6px; padding: 0 var(--e-1) var(--e-3); font-size: var(--t-13); font-weight: 600; color: var(--encre-2); }
.illustration__legende .icone { color: var(--encre-3); }
.illustration__ecran { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-2); }
.illustration__titre .surtitre { margin-bottom: 2px; }
.illustration__adresse { display: block; font-weight: 600; font-size: var(--t-16); }
.synthese--illustration { padding: var(--e-2) var(--e-3); }
.illustration .rubrique { box-shadow: none; }
.illustration .rubrique__titre { margin: 0; }
/* Dans un cadre étroit, une ligne de trace se lit en continu (texte, date, suite) plutôt qu'en boîtes flexibles. */
.illustration .trace li { display: inline; }
.illustration .trace li .icone { margin-right: 6px; }

/* --------------------------------------------------------------------------
   4. « Pour qui » : trois cartes, une icône, un métier, une phrase
   -------------------------------------------------------------------------- */
.publics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.public { display: flex; flex-direction: column; gap: var(--e-2); }
.public > * + * { margin-top: 0; }
.public__icone { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--e-1); }
.public p { color: var(--encre-2); }

/* --------------------------------------------------------------------------
   5. « Ce que fait Tracelle » : six fonctions numérotées, le numéro dans un cercle en encre
   -------------------------------------------------------------------------- */
.fonctions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-8); }
.fonction { display: flex; gap: var(--e-3); align-items: flex-start; min-width: 0; }
.fonction__numero { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--encre); background: var(--surface); color: var(--encre); font-size: var(--t-14); font-weight: 600; font-variant-numeric: tabular-nums; }
.fonction h3 { padding-top: 4px; }
.fonction p { margin-top: var(--e-2); font-size: var(--t-14); color: var(--encre-2); }

/* --------------------------------------------------------------------------
   5 b. « Comment ça se passe » : cinq étapes, le texte à gauche, la capture à droite ; une colonne sous 1024 px
   -------------------------------------------------------------------------- */
.parcours { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-10); }
.etape-site { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--e-6); align-items: start; min-width: 0; }
.etape-site__texte { display: flex; gap: var(--e-3); align-items: flex-start; }
.etape-site h3 { font-size: var(--t-18); padding-top: 3px; }
.etape-site p { margin-top: var(--e-2); color: var(--encre-2); }
.capture { margin: 0; min-width: 0; }
.capture img { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); box-shadow: var(--ombre-1); }
.capture figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); font-size: var(--t-13); color: var(--encre-3); }
/* La pastille « Illustration » marque une maquette à la place d'une capture réelle ; elle disparaît avec les maquettes. */
.capture__marque { font-size: var(--t-12); }

/* --------------------------------------------------------------------------
   6. « Comment Tracelle travaille » : quatre principes ; le repère est une icône ou la pastille du produit
   -------------------------------------------------------------------------- */
.principes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.principe { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); box-shadow: var(--ombre-1); min-width: 0; }
.principe__repere { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--e-2);
  border-radius: var(--r-2); background: var(--surface-2); color: var(--accent); }
.principe__repere > .icone { width: 22px; height: 22px; }
.principe p { margin-top: var(--e-2); font-size: var(--t-14); color: var(--encre-2); }

/* --------------------------------------------------------------------------
   7. Encadré « À savoir » : la même famille que la mention obligatoire de l'application (.mention)
   -------------------------------------------------------------------------- */
.a-savoir { padding: var(--e-5) var(--e-6); border: 1px solid var(--accent-filet); border-left: 4px solid var(--accent); background: var(--accent-clair); color: var(--encre); border-radius: var(--r-1); }
.a-savoir h2 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-16); margin-bottom: var(--e-2); }
.a-savoir h2 .icone { color: var(--accent); }
.a-savoir p { font-size: var(--t-14); font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Appel final : la démonstration, et la vérification d'un document émis (un dépliant sans script : details/summary)
   -------------------------------------------------------------------------- */
.appel { text-align: center; padding: var(--e-10) var(--e-6); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-3); }
.appel p { margin-top: var(--e-3); color: var(--encre-2); }
.appel__actions { justify-content: center; margin-top: var(--e-6); }
.verifier { display: inline-block; margin-top: var(--e-5); text-align: left; max-width: 100%; }
.verifier summary { display: list-item; min-height: var(--cible-min); padding: 10px var(--e-2); color: var(--accent); font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; border-radius: var(--r-1); }
.verifier summary:hover { color: var(--accent-fonce); }
.verifier summary .icone { margin-right: 6px; }
.verifier p { margin: var(--e-1) 0 0; padding: var(--e-2) var(--e-3); font-size: var(--t-14); color: var(--encre); background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-1); }

/* --------------------------------------------------------------------------
   9. Pied du site : une ligne, trois liens
   -------------------------------------------------------------------------- */
.pied__contenu--site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-6); padding-bottom: var(--e-6); }
.pied__liens { display: flex; flex-wrap: wrap; align-items: center; }
.pied__liens a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--e-3); color: var(--accent); }
.pied__liens a + a { border-left: 1px solid var(--filet-fort); }
.pied__liens a[aria-current="page"] { color: var(--encre); text-decoration: none; font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Pages de texte : mentions légales, confidentialité ; les champs à renseigner restent visibles
   -------------------------------------------------------------------------- */
.mentions { display: grid; gap: var(--e-4); }
.mentions__ligne { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--e-1) var(--e-6); }
.mentions dt { color: var(--encre-3); font-weight: 600; font-size: var(--t-14); }
.mentions dd { margin: 0; }
.confidentialite { display: grid; gap: var(--e-4); padding-left: 1.1em; }
.confidentialite li { padding-left: 2px; }
/* Un texte entre crochets que Skynder doit remplacer : la couleur du bandeau de démonstration, un trait en tirets. Il ne doit pas survivre à la publication. */
.a-renseigner { padding: 1px 6px; background: var(--demo-fond); color: var(--demo-texte); border: 1px dashed var(--demo-filet); border-radius: var(--r-1); font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* --------------------------------------------------------------------------
   11. Page d'attente : un seul écran, centré
   -------------------------------------------------------------------------- */
.attente { flex-grow: 1; display: grid; place-items: center; padding: var(--e-8) var(--gouttiere); }
.attente__carte { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: var(--e-4); text-align: center; }
.attente__glyphe { width: 56px; height: 56px; color: var(--accent); margin-bottom: var(--e-2); }
.attente__titre { font-size: var(--t-28); font-weight: 500; }
.attente__titre strong { font-weight: 700; }
.attente__sous-titre { font-size: var(--t-18); color: var(--encre-2); }
.attente__contact { margin-top: var(--e-4); }
.attente__liens { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--t-14); }
.attente__liens a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--e-3); }
.attente__liens a + a { border-left: 1px solid var(--filet-fort); }

/* --------------------------------------------------------------------------
   12. Largeurs : 1180, 768, 375
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bandeau { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
  .bandeau__texte { padding-top: 0; }
  .illustration { max-width: 640px; }
  .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-6); }
  .etape-site { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .capture { max-width: 760px; }
}

@media (max-width: 900px) {
  .publics { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .principal--site > * + * { margin-top: var(--e-10); }
  .bandeau { padding-top: var(--e-2); }
  .bandeau h1 { font-size: var(--t-28); }
  .bandeau__intro { font-size: var(--t-16); }
  .site .entete__contenu { padding-bottom: 0; }
  .site .navigation { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
  .site .navigation a { min-height: var(--cible-min); }
  .entete__actions { margin-left: auto; }
  .principes { grid-template-columns: minmax(0, 1fr); }
  .appel { padding: var(--e-8) var(--e-4); }
  .pied__contenu--site { flex-direction: column; align-items: flex-start; }
  .attente__titre { font-size: var(--t-22); }
}

@media (max-width: 640px) {
  .fonctions { grid-template-columns: minmax(0, 1fr); }
  .mentions__ligne { grid-template-columns: minmax(0, 1fr); }
  .bandeau__actions .bouton { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .logo { height: 22px; }
  .marque-seule { height: 48px; }
  .pied__liens { flex-direction: column; align-items: flex-start; }
  .pied__liens a { padding-left: 0; }
  .pied__liens a + a { border-left: 0; }
  .bandeau h1 { font-size: var(--t-22); }
  .illustration { padding: var(--e-2); }
  .illustration__ecran { padding: var(--e-3); }
  .principe { padding: var(--e-4); gap: var(--e-3); }
}

@media print {
  .illustration { box-shadow: none; }
  .entete__actions, .verifier { display: none; }
}