/* ==================================================================
   style.css — structure de la page support.neweb.pro
   ------------------------------------------------------------------
   Ce fichier consomme les variables définies dans theme.css :
   remplacer theme.css suffit à changer l'apparence complète.
   Aucune dépendance externe, aucune police distante, aucun tracker.
   Hiérarchie : bloc « télécharger » = action principale (panneau teinté,
   bouton large) ; bloc « connexion » = fiche technique (panneau de code) ;
   bloc « aide » = panneau secondaire teinté.
   Les sélecteurs utilisés par le JavaScript (.bouton-copier, #lien-principal,
   #systeme-detecte, #note-detection, #cle-publique, #chaine-config,
   .lien-telechargement[data-os], ancres #telechargement-*) sont conservés
   à l'identique.
   ================================================================== */

/* ------------------------------ Base ------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

/* Défilement doux vers les ancres « macOS / Linux », seulement si
   l'utilisateur n'a pas demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--corps-texte);
  line-height: 1.55;
}

/* Focus clavier net et visible sur tous les éléments interactifs
   (contour ambré : 4,2:1 sur blanc, 3,4:1 sur le bandeau — seuil 3:1). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Les titres et les groupes atteints par une ancre gardent un peu d'air
   au-dessus lors du saut. */
h1, h2, h3, .carte, .groupe { scroll-margin-top: 1.25rem; }

/* Colonne de lecture centrale. */
.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--retrait);
}

/* ---------------------------- En-tête ----------------------------- */
/* Bandeau navy, filet bleu de 4 px en bas : l'identité « NetWebPro /
   support » tient dans ce cadre et dans le pied de page. */
.entete {
  background: var(--fond-en-tete);
  color: var(--texte-en-tete);
  padding: 2rem 0 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 4px solid var(--accent);
}

.entete h1 {
  margin: 0 0 0.5rem;
  font-family: var(--police-titre);
  font-size: var(--corps-titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.entete .chapo {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  opacity: 0.92;
}

/* ---------------------------- Cartes ------------------------------ */
.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: var(--retrait);
  margin-bottom: 1.5rem;
}

.carte h2 {
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--accent);
  font-family: var(--police-titre);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.carte h3 {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--police-titre);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.carte p { margin: 0.5rem 0; }

/* Les paragraphes restent sur une largeur de lecture confortable. */
.carte > p { max-width: 70ch; }

/* --------------------- Bouton principal OS ------------------------ */
/* Le bloc d'action le plus important de la page : panneau teinté,
   filet bleu à gauche, pastille de système détecté, bouton large. */
.principal {
  background: var(--accent-frisson);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: var(--retrait);
  margin-bottom: 1.5rem;
}

.systeme {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.75rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texte);
}

.principal .note { margin-bottom: 0; }

/* ---------------------------- Boutons ----------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background-color var(--duree) ease,
              border-color var(--duree) ease,
              box-shadow var(--duree) ease,
              transform var(--duree) ease;
}

/* État enfoncé : le bouton s'enfonce d'un pixel (aucun déplacement
   provoqué au survol). */
.bouton:active { transform: translateY(1px); }

.bouton-principal {
  background: var(--accent);
  color: var(--accent-sur-clone);
  border-color: var(--accent);
  box-shadow: var(--ombre-bouton);
  font-size: 1.0625rem;
  padding: 0.85rem 1.75rem;
}

.bouton-principal:hover {
  background: var(--accent-survol);
  border-color: var(--accent-survol);
}

.bouton-copier {
  background: var(--fond-carte);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  min-height: 44px;
  white-space: nowrap;
}

.bouton-copier:hover { background: var(--accent-frisson); }

/* Aligné sur la valeur qu'il accompagne : le bouton épouse la hauteur de
   la ligne (44 px minimum), donc aucun décalage de bord quand la valeur
   se replie sur deux lignes. */
.avec-bouton .bouton-copier { align-self: stretch; }

/* ------------------------ Listes de liens ------------------------- */
.groupe { margin-bottom: 1.25rem; }

.groupe h3 {
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--bordure-forte);
}

.liste-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-liens li {
  padding: 0.5rem 0.5rem;
  margin: 0 -0.5rem;
  border-bottom: 1px solid var(--bordure);
  border-radius: var(--rayon-fin);
}

.liste-liens li:last-child { border-bottom: none; }

.liste-liens li:hover { background: var(--fond-survol); }

.lien-telechargement {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.lien-telechargement:hover { text-decoration: underline; }

.detail {
  display: block;
  color: var(--texte-secondaire);
  font-size: 0.875rem;
  /* Lignes équilibrées : le séparateur « · » ne reste pas orphelin
     en fin de ligne. */
  text-wrap: balance;
}

/* --------------------- Paramètres du serveur ---------------------- */
/* Fiche technique : panneau teinté, libellés secondaires, valeurs en
   pastille de code blanche pour bien détacher les valeurs. */
.params {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.6rem 1.25rem;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: var(--fond-code);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  align-items: baseline;
}

.params dt {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texte-secondaire);
}

.params dd { margin: 0; min-width: 0; }

.params code {
  background: var(--fond-carte);
}

code {
  font-family: var(--police-code);
  font-size: 0.9em;
  background: var(--fond-code);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-fin);
  padding: 0.1rem 0.4rem;
  /* Casser au besoin, mais jamais au milieu d'un mot court : les valeurs
     « support.neweb.pro » ou « rustdesk --config » restent lisibles ; seule
     une chaîne plus longue que la ligne (clé, config) se replie. Le repli n'a
     d'effet que si le conteneur est lui-même contraint (min-width: 0 sur les
     éléments de grille/flex : sinon la taille min-content déborde la page). */
  word-break: normal;
  overflow-wrap: break-word;
  color: var(--texte);
}

/* Bloc de valeur suivi d'un bouton « Copier » : encadré teinté,
   valeur en pastille blanche, bouton aligné à droite. */
.avec-bouton {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--fond-code);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.avec-bouton code {
  flex: 1 1 16rem;
  min-width: 0;
  /* Même hauteur que le bouton « Copier » voisin (44 px) : les deux
     contrôles d'une même ligne restent alignés bord à bord. Conteneur en
     colonne — le texte garde la largeur du bloc et peut se replier (en
     rangée, l'élément anonyme garderait sa largeur au contenu et déborderait). */
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fond-carte);
}

/* --------------------------- Listes ------------------------------- */
.etapes {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.etapes li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
  max-width: 70ch;
}

.etapes li::marker { color: var(--accent); font-weight: 700; }

/* Les valeurs en code des étapes ne se coupent pas en deux : le drapeau
   « --config » ne doit jamais se retrouver partagé entre deux lignes.
   La largeur naturelle (334 px) tient dans la moindre colonne à partir de
   641 px ; en dessous, on autorise le repli normal (coupe aux espaces). */
.etapes code { white-space: nowrap; }

.note {
  color: var(--texte-secondaire);
  font-size: 0.9375rem;
  margin: 0.75rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--bordure-forte);
  /* Lignes équilibrées : pas de mot coupé en fin de ligne (« F-Droid »). */
  text-wrap: balance;
}

/* --------------------- Bloc « aide » (tertiaire) ------------------ */
/* Panneau teinté : lisible, mais visuellement en retrait du bloc
   d'action principal. */
#aide {
  background: var(--accent-frisson);
  border-color: transparent;
}

/* --------------------------- Pied de page ------------------------- */
.pied {
  background: var(--fond-pied);
  color: var(--texte-pied);
  border-top: 4px solid var(--accent);
  padding: 1.5rem 0 2rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.pied p { margin: 0; }

/* ------------------- Composition des blocs ------------------------ */
/* Une seule colonne à toutes les largeurs : trois blocs empilés, du plus
   important au plus secondaire. Une mise en deux colonnes a été essayée
   puis retirée (voir le rapport) : le bloc « Aide courte » est trop court
   pour tenir à côté de la fiche « connexion », et la colonne restait vide.
   La largeur de lecture est bornée par --largeur-max. */

/* ------------- Groupes de téléchargement en fiche ----------------- */
/* À partir de 760 px : libellé du système à gauche, liste à droite —
 * on compare d'un coup d'œil ; empilé en dessous. */
@media (min-width: 760px) {
  #telecharger .groupe {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  #telecharger .groupe h3 {
    grid-column: 1;
    margin: 0.35rem 0 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1rem;
    color: var(--texte-secondaire);
  }

  #telecharger .groupe .liste-liens { grid-column: 2; }

  /* Les notes d'un groupe repassent sur toute la largeur. */
  #telecharger .groupe > *:not(h3):not(.liste-liens) {
    grid-column: 1 / -1;
  }
}

/* -------------------------- Mobile ≤ 640 px ----------------------- */
@media (max-width: 640px) {
  :root { --retrait: 1.25rem; }

  .entete {
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 1.5rem;
  }

  .carte h2 { font-size: 1.2rem; }

  .params {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
    padding: 0.85rem 1rem;
  }

  .params dt { margin-top: 0.65rem; }
  .params dd { margin-bottom: 0.35rem; }

  /* Le libellé du bouton reste sur une ligne à 375 px. */
  .bouton-principal {
    display: block;
    width: 100%;
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }

  /* Le bloc de valeur et son bouton s'empilent : en mise en page flex sur
     un axe vertical, l'élément garde sa largeur au contenu et déborde.
     Passage en mise en page standard — le bloc prend la largeur du
     conteneur et la longue chaîne se replie proprement. */
  .avec-bouton { display: block; }
  .avec-bouton code { display: flex; margin-bottom: 0.5rem; }
  .avec-bouton .bouton-copier { display: flex; width: 100%; }

  /* Repli de la césure : à cette largeur la commande des étapes ne tient
     pas sur une seule ligne, elle se coupe aux espaces. */
  .etapes code { white-space: normal; }
}

/* ------------- Mouvement réduit (accessibilité) ------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}