/* Styles de la page de téléchargement. */
body {
  padding-top: 0;
  /* Sous le pied de page, le même air que sur les côtés : 5rem laissaient un
     grand vide sous « L'équipe Paul Emploi ». */
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

main {
  max-width: 46rem;
}

/* ── En-tête ────────────────────────────────────────────────────── */
header {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 2.5rem 0 1.5rem;
}

/* Le logo a la hauteur des LETTRES voisines, du haut de « Paul Emploi » au
   pied de « UT2 / UT3 / N7 », et non celle de leurs lignes : les interlignes
   le faisaient dépasser en haut et en bas. Mesuré à l'écran le 01/10/2026.
   Les lettres ne sont pas centrées dans leur bloc - il reste plus de place
   sous « N7 » qu'au-dessus de « Paul » : la marge basse remonte le logo
   d'autant. */
.icone {
  --cote-icone: 3.2rem;
  width: var(--cote-icone);
  height: var(--cote-icone);
  margin-bottom: .33rem;
  border-radius: calc(var(--cote-icone) * .23);
  flex: 0 0 auto;
  box-shadow: var(--ombre);
  background: var(--surface-2);
}

.identite h1 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.editeur {
  color: var(--accent);
  font-weight: 600;
  margin: .3rem 0 .15rem;
}

/* ── Bandeau de chiffres ────────────────────────────────────────── */
.faits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  margin: 1.25rem 0 1.75rem;
}

.fait {
  padding: .9rem .5rem;
  text-align: center;
  border-right: 1px solid var(--trait);
}

.fait:last-child {
  border-right: 0;
}

.fait .v {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.fait .l {
  color: var(--doux);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
}

/* Les trois faits restent sur UNE ligne, jusque sur les petits écrans : ce
   qui retrecit, c'est le texte, pas la grille. */
@media (max-width: 30rem) {
  .fait {
    padding: .8rem .25rem;
  }

  .fait .v {
    font-size: .92rem;
  }

  .fait .l {
    font-size: .62rem;
    letter-spacing: .03em;
  }
}

/* ── Bouton ─────────────────────────────────────────────────────── */
.actions {
  display: grid;
  gap: .6rem;
  justify-items: center;
}

.bouton {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  background: var(--accent);
  color: var(--accent-texte);
  text-decoration: none;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  cursor: pointer;
}

.bouton[aria-disabled="true"] {
  background: var(--doux);
  pointer-events: none;
}

.sous-bouton {
  color: var(--doux);
  font-size: .85rem;
}

/* ── Sections ───────────────────────────────────────────────────── */
section {
  margin-top: 2.75rem;
}

h2 {
  font-size: 1.2rem;
  margin: 0 0 .9rem;
  letter-spacing: -.01em;
}

p {
  margin: 0 0 .9rem;
}

/* Titre qui mène ailleurs : le libellé à gauche, le chevron en face. Toute la
   ligne est cliquable, pas seulement la flèche - une cible de 44 px de haut,
   comme le veut le pouce. */
.titre-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  /* Au doigt, le navigateur peinturlure la ligne entière le temps de l'appui,
     et un appui un peu long sélectionné le titre. Ni l'un ni l'autre : la
     fleche suffit a dire que c'est cliquable. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* L'anneau de focus reste, lui : il ne s'affiche qu'au clavier, et c'est le
   seul repere de qui navigue sans souris. */
.titre-lien:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.titre-lien h2 {
  margin: 0;
}

/* La flèche vit dans un cercle : une cible visible, qui dit « ça s'ouvre »
   sans avoir besoin d'un libellé. `flex: 0 0 auto` l'empêche de s'aplatir
   quand le titre est long. */
.titre-lien .fleche {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: var(--surface);
  color: var(--doux);
}

/* Le dessin suit la couleur du cercle (`fill="currentColor"`) et n'a donc
   rien à changer au survol. */
.titre-lien .fleche .icone-fleche {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
}

/* Ni couleur ni mouvement : la fleche ne bouge pas plus au survol qu'a
   l'appui. Au doigt, le survol reste colle après le tap - la fleche serait
   restee decalee sur la page qu'on quitte.
*/

/* Revenu d'une page de détail, on atterrit sur la section d'ou l'on est
   parti : sans cette marge, son titre colle au bord haut de l'ecran. */
#a-propos,
#donnees {
  scroll-margin-top: 1.25rem;
}

/* Ce qui suit le titre reprend l'air qu'il avait sous lui - un paragraphe
   pour « A propos », une carte pour « Sécurité des données » : le même
   ecart dans les deux cas. */
.titre-lien+p,
.titre-lien+.carte {
  margin-top: .9rem;
}

a {
  color: var(--accent);
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--ombre);
}

.carte+.carte {
  margin-top: .75rem;
}

/* ── Sécurité des données ───────────────────────────────────────── */
.securite {
  display: grid;
  gap: .75rem;
}

.ligne {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.puce {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  background: var(--vert-fond);
  color: var(--vert);
}

/* La pastille se cale sur la ligne du TITRE, jamais au centre du bloc : en
   détail, centree sur l'ensemble, elle se retrouverait au milieu du
   paragraphe ; en résumé, l'alignement par le haut garde les deux colonnes
   d'aplomb quand un intitule tient sur deux lignes. Les 26 px de la pastille
   repondent aux 25,6 px de la ligne de titre. */
.securite .ligne {
  align-items: flex-start;
}

.puce.info {
  background: var(--surface-2);
  color: var(--doux);
}

/* Les puces portent un dessin, plus une lettre : il suit la couleur de la
   pastille (`fill="currentColor"`). */
.puce svg {
  display: block;
  width: 17px;
  height: 17px;
}

/* PLUS GRAS. Ces dessins sont des surfaces pleines, sans trait : on ne peut
   pas en augmenter l'epaisseur. Les border d'un contour de la même couleur,
   c'est epaissir la forme elle-meme.
   LA RÈGLE PORTE SUR LE <svg>, ET NON SUR LE <path> : `stroke` et
   `stroke-width` s'heritent, et c'est la seule facon d'atteindre un dessin
   appelé par <use> - un selecteur ne traverse pas son arbre. Les pages qui
   ecrivent leurs puces en dur comme celles qui passent par un sprite sont
   ainsi couvertes par la même ligne.
   1,1 sur une grille de 24 : au-dela, les deux barres de la corbeille se
   rejoignent. */
.puce svg {
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* En gras des deux côtés : en détail, l'intitule doit se detacher de son
   paragraphe. */
.ligne .t {
  font-weight: 700;
}

/* EN RESUME, pas de gras : la liste est une enumeration d'intitules, et le
   gras partout ne met plus rien en avant. Il reste sur la page de détail, ou
   chaque intitule coiffe un paragraphe. */
.securite:not([data-detail="1"]) .ligne .t {
  font-weight: 400;
}

.ligne .d {
  color: var(--doux);
  font-size: .92rem;
}

/* ── Fonctionnalités ────────────────────────────────────────────── */
.fonctions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.fonctions .carte+.carte {
  margin-top: 0;
}

.fonction .t {
  font-weight: 650;
  margin-bottom: .15rem;
}

.fonction .d {
  color: var(--doux);
  font-size: .92rem;
}

/* ── Étapes ─────────────────────────────────────────────────────── */
ol.etapes {
  counter-reset: e;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol.etapes li {
  counter-increment: e;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

ol.etapes li::before {
  content: counter(e);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--texte);
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
}

ol.etapes .d {
  color: var(--doux);
  font-size: .93rem;
}

/* ── Détails techniques ─────────────────────────────────────────── */
dl.tech {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.5rem;
  margin: 0;
}

dl.tech dt {
  color: var(--doux);
  font-size: .92rem;
}

dl.tech dd {
  margin: 0;
  font-size: .92rem;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  dl.tech {
    grid-template-columns: 1fr;
    gap: .1rem;
  }

  dl.tech dd {
    margin-bottom: .6rem;
  }
}

.discret {
  color: var(--doux);
  font-size: .88rem;
}

p,
.fonction .d,
.ligne .d,
.etapes .d {
  text-align: justify;
  hyphens: auto;
}

/* NOTES DE VERSION : une puce par ligne.
   Elles arrivent en texte brut, chaque puce séparée par un retour a la ligne.
   HTML replie tout espace blanc : sans `pre-line`, les puces se suivaient sur
   une seule ligne. La justification est ecartee, elle etirait des lignes
   courtes jusqu'à la marge. */
.sous-bouton {
  text-align: center;
}
/* ── Captures ───────────────────────────────────────────────────── */
/* Une bande qui défile de côté, comme sur une boutique : environ quatre
   images visibles sur un téléphone, le reste au glissé. */
#captures {
  margin-top: 1.75rem;
}

.bande {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* La bande déborde jusqu'aux bords de l'écran, sans décaler la page. */
  margin: 0 -1.25rem;
  padding: 0 1.25rem .25rem;
  scroll-padding: 0 1.25rem;
}

.bande::-webkit-scrollbar {
  display: none;
}

.vignette {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.vignette img {
  display: block;
  height: 10.5rem;
  width: auto;
}

.vignette:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Visionneuse plein écran ────────────────────────────────────── */
#visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
}

#visionneuse[hidden] {
  display: none;
}

/* Une image par écran, sur une piste que le script décale (voir index.js).
   Le défilement natif est coupé : même aimanté, un lancer rapide y
   traversait plusieurs images d'un coup. */
#visionneuse .defile {
  display: flex;
  height: 100%;
  touch-action: none;
  transition: transform .3s ease;
}

/* Pendant que le doigt tire la piste, elle le suit sans retard. */
#visionneuse .defile.tiree {
  transition: none;
}

#visionneuse .defile img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* Page figée sous la visionneuse : sans cela, elle défilait derrière. */
body.visionneuse-ouverte {
  overflow: hidden;
}

#visionneuse .precedente,
#visionneuse .suivante {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
}

/* Les flèches ne servent qu'à la souris : au doigt, on glisse. */
#visionneuse .precedente,
#visionneuse .suivante {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  line-height: 1;
}

#visionneuse .precedente {
  left: .75rem;
}

#visionneuse .suivante {
  right: .75rem;
}

@media (hover: none) {

  #visionneuse .precedente,
  #visionneuse .suivante {
    display: none;
  }
}