/* rlogic.dev — page « Mes Missions ». Complète assets/style.css. */

.fil{margin:0 0 26px;font-size:13.5px;color:var(--gris)}
.fil a{color:var(--clair);text-decoration:none}
.fil a:hover{text-decoration:underline}
.fil span{margin:0 8px;opacity:.5}

/* — Fiche signalétique — */

.fiche{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.fiche li{
  padding:16px 18px;
  border:1px solid var(--trait);border-radius:12px;
  background:var(--carte);
}
.fiche span{
  display:block;margin-bottom:5px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
}
.fiche strong{font-size:15px;font-weight:600;color:var(--blanc)}

/* — Capture d'ouverture — */

.capture-phare{margin:52px 0 0}
.capture-phare img{
  display:block;width:100%;height:auto;
  border:1px solid var(--trait);border-radius:14px;
  background:#0B2038;
}
.capture-phare figcaption{margin-top:12px;font-size:13.5px;color:var(--gris)}

/* — Sections de la galerie — */

.bloc{margin-top:72px}
.bloc h2{
  margin:0 0 10px;padding-bottom:12px;
  border-bottom:1px solid var(--trait);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--clair);
}
.bloc .intro{margin:0 0 28px;max-width:68ch;font-size:15px;color:var(--gris)}

.galerie{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.vignette{margin:0}
.vignette figcaption{margin-top:10px;font-size:13.5px;color:var(--gris)}

/* Le bouton porte la vignette : cliquable au clavier comme à la souris. */
.loupe{
  display:block;width:100%;padding:0;
  border:1px solid var(--trait);border-radius:12px;
  background:#0B2038;overflow:hidden;cursor:zoom-in;
  transition:border-color .18s ease, transform .18s ease;
}
.loupe img{
  display:block;width:100%;height:auto;
  /* Les captures vont du bandeau 1600x300 à la boîte de dialogue 436x507.
     « contain » montre chaque fenêtre entière plutôt que d'en rogner les bords ;
     le cadre garde une proportion constante pour que la grille reste régulière. */
  aspect-ratio:16/10;object-fit:contain;object-position:center;
  padding:10px;box-sizing:border-box;
}
.loupe:hover{border-color:rgba(127,197,245,.45);transform:translateY(-2px)}
.loupe:focus-visible{outline:2px solid var(--clair);outline-offset:3px}

/* — Visionneuse — */

body.fige{overflow:hidden}

.visionneuse{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:32px 68px;
  background:rgba(3,12,22,.93);
  backdrop-filter:blur(3px);
}
.visionneuse[hidden]{display:none}

.visionneuse figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%;
}
.visionneuse img{
  max-width:100%;max-height:calc(100vh - 130px);
  width:auto;height:auto;
  border:1px solid var(--trait);border-radius:12px;background:#0B2038;
}
.visionneuse figcaption{font-size:14px;color:var(--texte);text-align:center}

.visionneuse .fermer,
.visionneuse .nav{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--trait);border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--blanc);
  cursor:pointer;line-height:1;
  transition:background .18s ease;
}
.visionneuse .fermer{top:22px;right:24px;width:42px;height:42px;font-size:26px}
.visionneuse .nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:30px}
.visionneuse .prec{left:14px}
.visionneuse .suiv{right:14px}
.visionneuse .fermer:hover,
.visionneuse .nav:hover{background:rgba(127,197,245,.18)}
.visionneuse .fermer:focus-visible,
.visionneuse .nav:focus-visible{outline:2px solid var(--clair);outline-offset:2px}

@media (max-width:640px){
  .bloc{margin-top:54px}
  .galerie{grid-template-columns:1fr;gap:18px}
  .visionneuse{padding:20px 12px 12px}
  .visionneuse .nav{width:38px;height:38px;font-size:24px}
  .visionneuse .prec{left:4px}
  .visionneuse .suiv{right:4px}
}

/* — Galerie de captures de téléphone (portrait) — */

.galerie.mobile{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:26px 22px;
}
.galerie.mobile .loupe{border-radius:22px}
.galerie.mobile .loupe img{
  /* Captures Pixel 7 (1080x2400) : le cadre épouse leur proportion,
     rien n'est rogné ni entouré de vide. */
  aspect-ratio:9/20;object-fit:cover;object-position:top center;padding:0;
}

@media (max-width:640px){
  .galerie.mobile{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .galerie.mobile .loupe{border-radius:16px}
}

/* — Cartes sur deux colonnes fixes (pages d'application) —
   Avec auto-fit, huit cartes se rangeraient en 3 + 3 + 2 ; deux colonnes
   gardent la grille régulière quel que soit leur nombre (pair). */

.cartes.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
  .cartes.deux{grid-template-columns:1fr}
}

/* — Mentions légales — */

.identite{
  display:grid;
  grid-template-columns:minmax(190px,auto) 1fr;
  gap:1px;
  margin:0;
  border:1px solid var(--trait);border-radius:12px;
  background:var(--trait);          /* la couleur des filets transparaît entre les cases */
  overflow:hidden;
}
.identite dt,
.identite dd{margin:0;padding:13px 18px;background:#0B2038}
.identite dt{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);align-self:center;
}
.identite dd{color:var(--blanc);font-size:15px}
.identite a{color:var(--clair)}

.bloc p + p{margin-top:14px}
.bloc p{max-width:72ch;font-size:15px;color:var(--texte)}
.bloc p a{color:var(--clair)}

@media (max-width:640px){
  .identite{grid-template-columns:1fr;gap:0}
  .identite dt{padding-bottom:0;background:#0B2038}
  .identite dd{padding-top:6px;border-bottom:1px solid var(--trait)}
  .identite dd:last-child{border-bottom:0}
}

/* Une capture qui n'a pas la proportion d'un écran de téléphone — une boîte de
   dialogue, par exemple — s'affiche entière dans le cadre plutôt que rognée. */
.galerie.mobile .loupe.entiere img{object-fit:contain;padding:10px}

/* Captures « pleine page » (étirées à la hauteur du contenu) : la vignette
   montre le haut de la page, le plus parlant ; la visionneuse montre tout. */
.galerie.haut .loupe img{object-fit:cover;object-position:top center;padding:0}

/* Capture d'ouverture plus haute que large : on la resserre plutôt que de la
   rogner, pour qu'elle reste entière sans occuper tout l'écran. */
.capture-phare.etroite{max-width:760px;margin-left:auto;margin-right:auto}

/* — Téléchargement d'une version d'évaluation — */

.telechargement-carte{
  padding:24px 26px;
  border:1px solid rgba(127,197,245,.32);border-radius:14px;
  background:rgba(27,111,212,.08);
}
.telechargement-action{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.telechargement-meta{margin:0;font-size:14px;color:var(--gris)}
.telechargement-points{margin:20px 0 0;padding-left:20px;font-size:14.5px;color:var(--texte)}
.telechargement-points li{margin-bottom:9px}
.telechargement-points strong{color:var(--blanc)}
.telechargement-points code,
.empreinte code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  color:var(--clair);
}
.empreinte{margin:16px 0 0;font-size:12.5px;color:var(--gris)}
/* L'empreinte fait 64 caractères sans espace : sur sa propre ligne, elle tient
   d'un seul tenant ; sur un écran étroit, elle se coupe où il faut. */
.empreinte code{display:block;margin-top:4px;word-break:break-all}

/* La licence, sous le téléchargement : même gabarit de carte, mais sans le bleu,
   pour que le bouton reste le point d’attention de la section. */
.licence-carte{
  margin-top:18px;padding:24px 26px;
  border:1px solid var(--trait);border-radius:14px;
  background:var(--carte);
}
.licence-carte h3{margin:0;font-size:17px;font-weight:600;color:var(--blanc)}
.licence-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:12px 0 0}
.licence-prix strong{font-size:25px;font-weight:600;color:var(--clair)}
.licence-prix span{font-size:14px;color:var(--gris)}
.licence-points{margin:18px 0 0;padding-left:20px;font-size:14.5px;color:var(--texte)}
.licence-points li{margin-bottom:9px}
.licence-points strong{color:var(--blanc)}
.licence-points em{font-style:normal;color:var(--clair)}

@media (max-width:640px){
  .telechargement-carte{padding:20px 18px}
  .telechargement-action .bouton{width:100%;justify-content:center}
  .licence-carte{padding:20px 18px}
}