/* ==============================================================================
   Pages secondaires : mentions légales, confidentialité, votre retour.

   Elles abandonnent Bricolage Grotesque et reviennent à Plus Jakarta Sans :
   un texte juridique se lit, il ne se met pas en scène. L'identité
   typographique du site s'arrête donc à la porte de ces pages — la marque,
   elle, reste (bleu, logo, mot-symbole).

   Chargé APRÈS styles.css, dont il reprend les jetons de couleur.
   ============================================================================ */

.page-texte {
  font-family: var(--texte);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 44px clamp(18px, 5vw, 28px) 80px;
}

.page-texte-corps {
  width: 100%;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

/* Le bouton de retour, en pilule de verre — le même vocabulaire que la navbar
   de l'accueil, dont ces pages n'ont pas besoin par ailleurs. */
.retour-accueil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.retour-accueil:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.retour-accueil svg { width: 15px; height: 15px; flex: none; }

.page-tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 40px 0 46px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--verre-bord);
}
.page-tete .marque { width: 30px; height: 30px; color: var(--accent); margin-bottom: 8px; }
.page-tete h1 {
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.14;
}
.page-tete .maj {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.page-tete .chapeau {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  max-width: 62ch;
}

/* ─── Le corps du texte ─────────────────────────────────────────────────── */

.texte-legal { display: flex; flex-direction: column; gap: 40px; }
.texte-legal section { display: flex; flex-direction: column; gap: 14px; }

.texte-legal h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--accent);
}

.texte-legal p,
.texte-legal li {
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.66);
}

.texte-legal ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.texte-legal strong { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
.texte-legal a { color: var(--accent); text-decoration: none; }
.texte-legal a:hover { text-decoration: underline; }
.texte-legal code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent-doux);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--verre-bord);
  border-radius: 6px;
  padding: 1px 6px;
}

/* Un bloc mis en avant, pour la phrase qui résume une section entière. */
.encadre {
  border-left: 2px solid var(--accent);
  background: rgba(127, 168, 236, 0.07);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}
.encadre p { color: rgba(255, 255, 255, 0.82); }
.encadre p + p { margin-top: 10px; }

/* Le tableau des autorisations et celui des accès réseau. Un tableau, ici,
   n'est pas de la décoration : ce sont des couples (ce qui est demandé → ce
   qui en est fait), et la lecture en colonnes est la seule honnête. */
.table-enveloppe { overflow-x: auto; }

.table-donnees {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table-donnees th,
.table-donnees td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--verre-bord);
  line-height: 1.6;
}
.table-donnees thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.table-donnees tbody th {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.table-donnees td { color: rgba(255, 255, 255, 0.66); }
.table-donnees tbody tr:last-child th,
.table-donnees tbody tr:last-child td { border-bottom: none; }

/* ─── Formulaire « Votre retour » ───────────────────────────────────────── */

.formulaire { display: flex; flex-direction: column; gap: 26px; margin-top: 8px; }

.champ-groupe { display: flex; flex-direction: column; gap: 9px; }

.champ-groupe > label,
.groupe-titre {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.champ-aide {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.choix-type { display: flex; flex-wrap: wrap; gap: 10px; }
.choix-type input { position: absolute; opacity: 0; pointer-events: none; }
.choix-type label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.choix-type label:hover { border-color: rgba(255, 255, 255, 0.24); color: #FFFFFF; }
.choix-type input:checked + label {
  background: var(--accent);
  border-color: transparent;
  color: var(--nuit-1);
}
.choix-type input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.saisie,
textarea.saisie {
  width: 100%;
  font-family: var(--texte);
  font-size: 0.97rem;
  line-height: 1.65;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--verre-bord);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color 200ms ease, background 200ms ease;
}
.saisie::placeholder { color: rgba(255, 255, 255, 0.34); }
.saisie:hover { border-color: rgba(255, 255, 255, 0.2); }
.saisie:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}
textarea.saisie { min-height: 168px; resize: vertical; }

.compteur {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.compteur.trop { color: #FFA8A8; }

.case-a-cocher {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 0.87rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.case-a-cocher input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.depot {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px dashed var(--verre-bord);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.depot:hover { border-color: var(--accent-line, rgba(127, 168, 236, 0.4)); background: rgba(255, 255, 255, 0.05); }
.depot svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.depot input { position: absolute; opacity: 0; width: 0; height: 0; }
.depot .nom-fichier { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }

.bouton-envoi {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--nuit-1);
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.bouton-envoi:hover:not(:disabled) {
  background: var(--accent-doux);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--halo);
}
.bouton-envoi:disabled { opacity: 0.45; cursor: not-allowed; }

/* Les messages d'issue. Ils occupent la place seulement quand ils parlent :
   un bandeau vide en permanence dirait qu'il manque quelque chose. */
.message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.65;
  border: 1px solid;
}
.message b { display: block; margin-bottom: 3px; }
.message--succes { background: rgba(92, 190, 149, 0.1); border-color: rgba(92, 190, 149, 0.35); color: #A8E3C8; }
.message--echec { background: rgba(207, 160, 155, 0.1); border-color: rgba(207, 160, 155, 0.35); color: #E9C2BE; }
.message--info { background: rgba(127, 168, 236, 0.09); border-color: var(--accent-line, rgba(127, 168, 236, 0.32)); color: var(--accent-doux); }
.message a { color: inherit; font-weight: 700; }

/* ─── Pied des pages secondaires ────────────────────────────────────────── */

.pied-simple {
  max-width: 760px;
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--verre-bord);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
}
.pied-simple nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pied-simple a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.pied-simple a:hover { color: #FFFFFF; }
.pied-simple .copy { font-family: var(--mono); font-size: 12px; }

@media (max-width: 560px) {
  .choix-type label { flex: 1; justify-content: center; }
  .bouton-envoi { align-self: stretch; justify-content: center; }
}