/* LinkReport, INAH Group / Tech. Hani Walakiyim (HLB). 11/09/2026. */
/* GUIDE DU SITE (09/09/2026, question 4 validée).
   Se pose PAR-DESSUS legal.css, qui apporte déjà les couleurs, la police de
   titre auto-hébergée, le pied de page et le respect du réglage système
   "réduire les animations". Ici, seulement ce que le guide ajoute : le fil
   d'Ariane, les cartes cliquables, les captures, le fil des étapes.
   Toutes les zones cliquables font au moins 44 pixels de haut, la taille
   minimale recommandée pour être touchée au doigt sans se tromper. */

/* Le guide suit la même règle de largeur que le reste du site
   (09/09/2026) : conteneur presque pleine largeur, texte calé à gauche à
   une largeur de lecture. Voir legal.css. */
.capture.grande { margin-left: 0; }

/* Lien d'évitement : invisible tant qu'on ne navigue pas au clavier, premier
   élément atteint dès qu'on appuie sur Tab. Obligatoire pour l'accessibilité,
   même règle que sur la page d'accueil. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--nuit); color: var(--texte); padding: 12px 18px;
  border: 1px solid var(--bord); border-radius: 0 0 12px 0; text-decoration: none;
}
.evitement:focus { left: 0; }

header.tete { padding: 18px 0 10px; margin-bottom: 22px; background: transparent; }

.ariane { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ariane a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ariane a:hover { color: #fff; }
.ariane span[aria-current] { color: rgba(255, 255, 255, .62); }
.ariane .separateur { color: rgba(255, 255, 255, .4); }

h1 .pro, h3 .pro {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: var(--corps); font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: #2a1206; background: #FFC24B; padding: 3px 9px; border-radius: 999px;
}

.intro { font-size: 17px; color: var(--texte-doux); }

ul.puces { list-style: none; padding: 0; margin: 18px 0 0; }
ul.puces li { position: relative; padding-left: 26px; margin-bottom: 12px; }
ul.puces li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: #22C55E;
}

/* ---- captures ---- */
.capture { margin: 24px 0 0; }
.capture img {
  display: block; width: 100%; border-radius: 16px;
  border: 1px solid var(--bord); background: var(--verre);
}
/* Les captures sont des écrans de téléphone, donc très hautes. Au-delà de
   360 pixels de large, elles poussent tout le texte de la page sous la ligne
   de flottaison, et on ne voit plus que l'image en arrivant. */
.capture.grande { max-width: 300px; }

/* Cadre neutre tant que la vraie capture n'est pas déposée. Assumé et
   lisible, jamais une image cassée. */
.capture.attente {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 132px; padding: 18px; border-radius: 16px;
  border: 1px dashed var(--bord); background: var(--verre);
}
.capture.attente span { font-size: 12.5px; color: var(--texte-faible); line-height: 1.5; }
.capture.grande.attente { min-height: 220px; }

/* ---- cartes d'un niveau vers le suivant ---- */
.grille-guide { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 18px; }

.carte-guide {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--verre); border: 1px solid var(--bord); border-radius: 18px;
  overflow: hidden; transition: border-color .2s, transform .2s;
}
.carte-guide:hover { border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); }
.carte-guide .capture { margin: 0; }
/* Cadrage par le HAUT : sur une capture de téléphone, l'information utile
   (le titre de l'écran, la barre d'outils) est en haut. Un cadrage centré
   coupe précisément ce qui permet de reconnaître l'écran. */
.carte-guide .capture img { border: none; border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
.carte-guide .capture.attente { border: none; border-bottom: 1px dashed var(--bord); border-radius: 0; min-height: 104px; }
.carte-guide .corps { padding: 14px 16px 16px; }
.carte-guide h3 { margin: 0 0 4px; font-family: var(--display); font-size: 16.5px; }
.carte-guide p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.carte-guide .numero {
  display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; color: var(--texte-faible);
}
.carte-guide .numero::before { content: "Étape "; }

/* ---- fil des étapes ---- */
.fil { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bord); }
.compteur { font-size: 13px; color: var(--texte-faible); margin: 0 0 12px; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bord); background: var(--verre);
  color: var(--texte-doux); text-decoration: none; font-size: 13.5px; font-weight: 700;
}
.pastilles a:hover { border-color: rgba(255, 255, 255, .4); color: var(--texte); }
.pastilles a.ici { background: var(--marque); border-color: transparent; color: #fff; }

.sorties { display: grid; gap: 12px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sortie {
  display: flex; flex-direction: column; gap: 3px; min-height: 66px; justify-content: center;
  padding: 12px 16px; border-radius: 14px; border: 1px solid var(--bord);
  background: var(--verre); text-decoration: none;
  font-size: 12px; color: var(--texte-faible);
}
.sortie b { font-family: var(--display); font-size: 14.5px; font-weight: 800; color: var(--texte); }
.sortie:hover { border-color: rgba(255, 255, 255, .34); }
.sorties.seule { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bord); grid-template-columns: minmax(0, 280px); }
.sortie.retour { background: var(--marque); border-color: transparent; }
.sortie.retour, .sortie.retour b { color: #fff; }

@media (max-width: 560px) {
  .capture.grande { max-width: 100%; }
  .sorties { grid-template-columns: 1fr; }
}

/* ---- parcours complet sur la page d'une fonctionnalité (09/09/2026) ----
   Demandé explicitement : la carte du site ouvre une page où l'on suit tout
   le parcours, écran par écran, sans avoir à cliquer d'étape en étape. Les
   étapes alternent gauche et droite pour que l'oeil descende naturellement,
   et chaque titre reste un lien vers la page détaillée de l'étape. */
.parcours { display: flex; flex-direction: column; gap: 46px; margin-top: 26px; }

.etape-longue {
  display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: center;
  padding-top: 34px; border-top: 1px solid var(--bord);
}
.etape-longue:first-child { padding-top: 12px; border-top: none; }
.etape-longue:nth-child(even) { grid-template-columns: 1fr 320px; }
.etape-longue:nth-child(even) .visuel-etape { order: 2; }

.visuel-etape .capture { margin: 0; }
.visuel-etape .capture.grande { max-width: 320px; }

.texte-etape .rang {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texte-faible); margin-bottom: 6px;
}
.texte-etape h3 { font-family: var(--display); font-size: clamp(19px, 2.2vw, 25px); margin: 0 0 10px; }
.texte-etape h3 a { color: var(--texte); text-decoration: none; }
.texte-etape h3 a:hover { color: #fff; }
.texte-etape .intro { font-size: 16px; }
.texte-etape .encadre { margin: 16px 0 0; }

.detail {
  display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 700;
  color: var(--texte); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px;
}
.detail:hover { border-bottom-color: #fff; }

@media (max-width: 780px) {
  .etape-longue,
  .etape-longue:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .etape-longue:nth-child(even) .visuel-etape { order: 0; }
  .visuel-etape .capture.grande { max-width: 300px; }
}