/* Écrans d'authentification : la vérification est une étape calme, jamais une alerte opaque.
   Repris aux jetons de la direction (`docs/maquettes/overhaul/DIRECTION.md`) — plus de
   `--md-sys-color-*`/`--pas-*` hérités de Material, cet écran suit `kc-admin.css`. */

body.theme-md .ecran-securite {
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
}

/* « Mes appareils » occupe toute la largeur disponible (grille de cartes), pas la colonne
   resserrée des portes d'entrée. */
body.theme-md .ecran-appareils.ecran-securite {
  max-width: none;
}

/* ====================== Arrière-plan de la porte de connexion ======================
   Seule la page de connexion (classe dédiée posée par `connexion.html`, jamais partagée
   avec le second facteur ou l'acceptation d'invitation) habille son fond de page : une
   texture abstraite générée (lignes de niveau, aucun texte/kanji), choisie pour rester
   calme au centre, là où repose `.kc-porte`. `image-set` choisit la résolution WebP selon
   la densité d'écran ; `background-image` posé une première fois reste le repli JPEG pour
   les navigateurs sans `image-set()`, recouvert par la règle `image-set` juste après quand
   elle est supportée. Couleur de repli `--kc-color-primary-800` pendant le chargement ou
   en cas d'échec réseau. */
body.theme-md.kc-public--connexion .kc-public-page {
  background-color: var(--kc-color-primary-800);
  background-image: url("fond-connexion.jpg");
  background-image: image-set(
    url("fond-connexion-1280.webp") 1x,
    url("fond-connexion-2560.webp") 2x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sous 640 px, la carte occupe presque toute la largeur : la texture ne laisse qu'une
   mince marge visible, pas assez pour se lire, et coûterait un téléchargement inutile sur
   un réseau mobile. Dégradé seul, repris du panneau de marque pour rester cohérent. */
@media (max-width: 639.98px) {
  body.theme-md.kc-public--connexion .kc-public-page {
    background-image: var(--kc-color-sidebar-grad);
  }
}

/* ====================== Porte d'entrée (connexion, second facteur) ======================
   Bruno veut une porte de niveau produit SaaS : un panneau de marque en dégradé subtil côté
   bureau, la carte de formulaire aérée à côté — jamais un simple formulaire centré sur fond
   uni. Sous 768 px, le panneau de marque passe en bandeau compact au-dessus du formulaire :
   un empilement propre, pas une colonne étroite qui répète le dégradé plein écran. */
body.theme-md .kc-porte {
  display: grid;
  width: 100%;
  max-width: 64rem;
  overflow: hidden;
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border);
  border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-3);
  animation: kc-entree-douce var(--kc-dur-lente) var(--kc-ease-sortie) both;
}

@media (min-width: 768px) {
  body.theme-md .kc-porte {
    grid-template-columns: minmax(16rem, 0.85fr) minmax(20rem, 1.15fr);
  }
}

body.theme-md .kc-porte__marque {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--kc-space-4);
  padding: var(--kc-space-6) var(--kc-space-5);
  background: var(--kc-color-sidebar-grad);
  color: var(--kc-color-sidebar-text);
}

/* Logotype B entier (sceau + « Kizyun »), jamais le seul sceau ici : assez de place sur ce
   panneau de porte pour que le mot se lise, contrairement au rail étroit de la barre
   latérale (`.kc-marque-symbole`, `kc-admin.css`). Rapport largeur/hauteur du SVG
   (377.751×100) gardé par `height: auto`, jamais étiré. */
body.theme-md .kc-porte__marque-logotype {
  display: block;
  margin: 0;
  width: 220px;
  max-width: 100%;
}

body.theme-md .kc-porte__marque-logotype svg {
  display: block;
  width: 100%;
  height: auto;
}

body.theme-md .kc-porte__marque-accroche {
  margin: 0;
  color: var(--kc-color-sidebar-text);
  font-size: var(--kc-font-size-md);
  line-height: var(--kc-line-height-normal);
}

body.theme-md .kc-porte__marque-points {
  display: grid;
  gap: var(--kc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--kc-font-size-sm);
  color: var(--kc-color-sidebar-text-muted);
}

body.theme-md .kc-porte__marque-points li {
  position: relative;
  padding-left: var(--kc-space-4);
}

body.theme-md .kc-porte__marque-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kc-color-primary);
}

body.theme-md .kc-porte__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-4);
  padding: var(--kc-space-6) var(--kc-space-5);
}

body.theme-md .kc-porte__panneau h1 {
  margin: 0;
  font-size: var(--kc-font-size-2xl);
  line-height: var(--kc-line-height-tight);
  font-weight: var(--kc-weight-bold);
  color: var(--kc-color-text);
}

body.theme-md .kc-porte__panneau .kc-page-header-sous-titre {
  margin: 0;
}

/* Plus de dérogation de surface ici (règle 2 du système de surfaces : `.kc-card` est la
   SEULE surface, sans variante propre à cet écran) — l'animation d'entrée douce reste
   discrète sur une carte isolée, centrée, sans grille qui la ferait cascader. */

@media (max-width: 767.98px) {
  body.theme-md .kc-porte__marque {
    padding: var(--kc-space-5) var(--kc-space-4);
  }

  /* Bandeau compact en mobile : le nom et l'accroche suffisent, la liste de garanties
     resterait du texte d'aide superflu sous le pli. */
  body.theme-md .kc-porte__marque-points {
    display: none;
  }

  body.theme-md .kc-porte__panneau {
    padding: var(--kc-space-5) var(--kc-space-4);
  }
}

body.theme-md .securite-details {
  display: grid;
  gap: var(--kc-space-2);
  margin: 0;
}

body.theme-md .securite-details div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
  gap: var(--kc-space-3);
  padding: var(--kc-space-2) 0;
  border-bottom: 1px solid var(--kc-color-border-soft);
}

body.theme-md .securite-details dt {
  color: var(--kc-color-text-soft);
  font-weight: var(--kc-weight-medium);
}

body.theme-md .securite-details dd {
  min-width: 0;
  margin: 0;
  color: var(--kc-color-text);
}

body.theme-md .securite-cle {
  display: block;
  overflow-wrap: anywhere;
  padding: var(--kc-space-2);
  background: var(--kc-color-surface-3);
  border: 1px solid var(--kc-color-border);
  border-radius: var(--kc-radius-md);
  color: var(--kc-color-text);
  font-variant-numeric: tabular-nums;
}

body.theme-md .ecran-securite input,
body.theme-md .ecran-securite button {
  min-height: 44px;
}

body.theme-md .ecran-securite input:focus-visible,
body.theme-md .ecran-securite button:focus-visible {
  outline: 2px solid var(--kc-color-primary);
  outline-offset: 2px;
}

/* Sortie d'une porte : la session n'y est pas ouverte, donc aucune coquille ne propose la
   déconnexion ailleurs. Détachée visuellement du formulaire principal pour ne jamais se lire
   comme son action par défaut. */
body.theme-md .porte-sortie {
  margin-block-start: var(--kc-space-4);
  padding-block-start: var(--kc-space-3);
  border-top: 1px solid var(--kc-color-border-soft);
  text-align: center;
}

@media (max-width: 640px) {
  body.theme-md .securite-details div {
    grid-template-columns: 1fr;
    gap: var(--kc-space-1);
  }
}

/* Le code QR : du SVG en ligne, donc c'est la feuille qui décide de sa taille.

   Un code trop petit ne se scanne pas, et l'échec est **muet** : l'appareil ne dit pas « trop
   petit », il ne trouve simplement rien.

   Mesuré sur la charge réelle - `otpauth://totp/<émetteur>:<compte>?secret=...&issuer=...` avec
   correction « M » - le symbole fait **57 modules** de côté. Les bornes en découlent :

   Largeurs rendues, mesurées au navigateur sur cette charge :

   - 1400 px de fenêtre → code de 320 px → **5,6 px par module** ;
   -  768 px de fenêtre → code de 320 px → **5,6 px par module** ;
   -  390 px de fenêtre → code de 292 px → **5,1 px par module**.

   Le plafond de 320 px évite l'inverse du code trop petit : un symbole plein écran sur grand
   moniteur sort du champ d'une caméra tenue à distance de lecture.

   Le plancher de 200 px (3,5 px par module) **n'est atteint sur aucun écran courant** : à 390 px
   la carte rend déjà 292 px — y compris dans le panneau de marque à deux colonnes de la porte
   d'entrée, dont la colonne de formulaire ne descend jamais sous 20 rem. Il garde un conteneur
   plus étroit que tout téléphone actuel, au cas où cet écran serait un jour inséré ailleurs.

   Une première version avait retenu 180 px « pour un symbole de version 3, 29 modules ». Le
   chiffre était supposé, pas mesuré : la charge en produit 57, donc cette borne aurait rendu des
   modules de 3,1 px. Corrigé après lecture de la boîte de vue réelle.

   Fond blanc explicite : les modules sont noirs, et un thème sombre les rendrait invisibles sur
   une surface sombre. Le contraste d'un code QR n'est pas décoratif, c'est sa condition de
   lecture. La marge du cadre sert de « zone calme », que la norme exige autour du symbole. */
body.theme-md .code-qr-cadre {
  display: flex;
  justify-content: center;
  padding: var(--kc-space-3);
  margin-block-end: var(--kc-space-3);
  background: #fff;
  border-radius: var(--kc-radius-lg);
}

body.theme-md .code-qr-cadre .code-qr {
  inline-size: 100%;
  min-inline-size: 200px;
  max-inline-size: 320px;
  block-size: auto;
  shape-rendering: crispEdges;
}

/* « Mes appareils » : une carte par appareil (`.kc-grid--2` de `kc-admin.css`), pas un
   tableau large — le tableau de l'administration est pensé pour six colonnes dont une liste
   d'appartenances, hors de propos ici. */
body.theme-md .appareil-renommer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--kc-space-2);
  align-items: end;
}

body.theme-md .appareil-renommer label {
  grid-column: 1 / -1;
  font-size: var(--kc-font-size-sm);
  font-weight: var(--kc-weight-medium);
  color: var(--kc-color-text);
}

body.theme-md .appareil-renommer input {
  padding: var(--kc-space-2) var(--kc-space-3);
  border: 1px solid var(--kc-color-border);
  border-radius: var(--kc-radius-md);
  font: var(--kc-font-size-sm) var(--kc-font);
  color: var(--kc-color-text);
  background: var(--kc-color-surface);
}

body.theme-md .appareil-renommer input:focus-visible {
  outline: none;
  border-color: var(--kc-color-primary);
  box-shadow: 0 0 0 3px var(--kc-color-primary-soft);
}

@media (max-width: 480px) {
  body.theme-md .appareil-renommer {
    grid-template-columns: 1fr;
  }
}

/* ====================== Saisie d'une réponse ======================
   `saisie.html` est migré au système de surfaces (`kc-stack`/`kc-card`) : l'écart vertical
   vient désormais du `gap` de la pile de page, plus de marge propre à poser ici. Seul le
   rythme interne du formulaire reste réglé par cette feuille. */
body.theme-md .ecran-saisie .kc-panel__formulaire {
  gap: var(--kc-space-3);
}

/* ====================== Portail auditeur : titres d'exigence/SoA ======================
   Refs #136 : à 390 px, un long libellé d'exigence (« 4.1 Compréhension de l'organisation
   et de son contexte ») était coupé en plein mot, sans points de suspension. Cause réelle :
   `.kc-list > li > a, .kc-list > li > span:first-child` (`ecrans-tableaux-de-bord.css`,
   destinée à « À faire maintenant »/« Preuves qui expirent », une seule ligne tronquée à
   l'ellipse) n'est pas scopée à son propre écran — elle s'applique, sans le vouloir, à
   TOUT `.kc-list` du produit, y compris ici. Plutôt que de modifier cette règle partagée
   depuis la feuille d'un autre écran, celui du portail auditeur (admin comme page publique
   remise à l'auditeur) pose ici son propre repli, plus spécifique (le `section[…]` ciblé),
   qui l'emporte sur cet écran SEUL : le libellé repasse en texte normal, multi-ligne,
   capable de se couper à n'importe quel caractère plutôt que déborder (`overflow-wrap:
   anywhere`, jamais seulement entre mots — un mot isolé plus large que la carte déborderait
   quand même), et s'étire sur toute la largeur de la ligne (`align-self: stretch`,
   nécessaire car `.kc-list > li` passe en colonne avec `align-items: flex-start` sous
   480 px — sans cela le libellé garde sa largeur intrinsèque et rien ne le force à
   s'envelopper). */
@media (max-width: 639.98px) {
  section[aria-labelledby="titre-apercu-exigences"] .kc-list > li > span:first-child,
  section[aria-labelledby="titre-apercu-soa"] .kc-list > li > span:first-child,
  section[aria-labelledby="titre-audit-exigences"] .kc-list > li > span:first-child,
  section[aria-labelledby="titre-audit-soa"] .kc-list > li > span:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    align-self: stretch;
  }
}