/* PATNUC Cyber IT — feuille commune à la landing (FR/EN) et aux pages légales.
   Charte PATNUC Cyber : marine, bleu secondaire, or d'apparat, fond perle.
   Fontes : celles de l'application, copiées dans assets/fonts au montage du
   site (flutter_app/tool/build-site.sh) ; repli Georgia / système sinon. */

@font-face {
  font-family: 'SourceSerif4';
  src: url('fonts/SourceSerif4-VariableFont.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'PublicSans';
  src: url('fonts/PublicSans-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --primaire: #1B2A4A;
  --primaire-encre: #131E36;
  --secondaire: #35558A;
  --accent: #9C7A1E;
  --accent-vif: #D3AC4A;
  --accent-texte: #7A5F14;
  --fond: #F5F6F8;
  --surface: #FFFFFF;
  --surface-douce: #EDF0F5;
  --texte: #1F2937;
  --texte-doux: #4F5968;
  --filet: #D8DEE7;
  --lien: #35558A;
  /* Héro et appel final : toujours un champ marine. */
  --champ: #1B2A4A;
  --champ-texte: #FFFFFF;
  --champ-doux: #C9D4E6;
  --champ-filet: rgba(255, 255, 255, 0.18);
  /* Les quatre sections du test. */
  --s-socle: #9C7A1E;
  --s-gouv: #1B2A4A;
  --s-app: #35558A;
  --s-res: #6E92C8;
  --ombre: 0 1px 2px rgba(19, 30, 54, 0.06), 0 8px 24px rgba(19, 30, 54, 0.08);
  --ombre-forte: 0 2px 4px rgba(10, 16, 30, 0.18), 0 18px 48px rgba(10, 16, 30, 0.32);
  --serif: 'SourceSerif4', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'PublicSans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rayon: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primaire: #8DB3E2;
    --primaire-encre: #0B1220;
    --secondaire: #6E92C8;
    --accent: #D3AC4A;
    --accent-vif: #D3AC4A;
    --accent-texte: #D3AC4A;
    --fond: #10192B;
    --surface: #17233A;
    --surface-douce: #1C2A44;
    --texte: #E9EDF4;
    --texte-doux: #AEBBD0;
    --filet: #2A3A57;
    --lien: #8DB3E2;
    --champ: #0B1220;
    --champ-texte: #E9EDF4;
    --champ-doux: #B7C5DB;
    --champ-filet: rgba(141, 179, 226, 0.22);
    --s-socle: #D3AC4A;
    --s-gouv: #8DB3E2;
    --s-app: #6E92C8;
    --s-res: #4C6FA6;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
    --ombre-forte: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lien); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: rgba(141, 179, 226, 0.45); color: inherit; }
:focus-visible { outline: 3px solid var(--secondaire); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fond); }
::-webkit-scrollbar-thumb { background: var(--filet); border-radius: 5px; border: 2px solid var(--fond); }

.contenu { max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .contenu { padding: 0 1.5rem; } }

.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--surface); color: var(--texte); padding: 0.6rem 1rem;
  border-radius: 8px; box-shadow: var(--ombre); font-weight: 600;
}
.evitement:focus { top: 0.5rem; }

/* — Barre de langue — */
.langue { background: var(--primaire-encre); font-size: 0.875rem; }
.langue .contenu { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.5rem; }
.langue .domaine { color: #A9B8CF; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langue nav { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.langue nav a, .langue nav span {
  color: #DCE4F0; text-decoration: none; font-weight: 600;
  padding: 0.3rem 0.6rem; border-radius: 6px; line-height: 1.2;
}
.langue nav span { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.langue nav a:hover { background: rgba(255, 255, 255, 0.08); }
.langue :focus-visible { outline-color: #D3AC4A; }

/* — Bandeau officiel : document d'origine, toujours sur blanc — */
.officiel { background: #FFFFFF; border-bottom: 1px solid #D8DEE7; }
.officiel img { width: 100%; max-width: 70rem; margin: 0 auto; height: auto; padding: 0.6rem 1rem; }
@media (min-width: 640px) { .officiel img { padding: 0.75rem 1.5rem; } }

/* — Boutons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 650; text-decoration: none; line-height: 1.2;
  min-height: 3rem; padding: 0.8rem 1.4rem; border-radius: 12px; font-size: 1.03rem;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.btn svg { flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }
.btn-or {
  background: #D3AC4A; color: #131E36;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(211, 172, 74, 0.28);
}
.btn-or:hover { background: #DDB95C; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 22px rgba(211, 172, 74, 0.36); }
.btn-contour { color: var(--champ-texte); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.btn-contour:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
@media (max-width: 479px) { .actions .btn { width: 100%; } }

/* — Pied de page — */
footer.pied { background: var(--primaire-encre); color: #A9B8CF; font-size: 0.875rem; padding: 2.25rem 0 2.5rem; }
footer.pied .contenu { display: grid; gap: 1rem; }
footer.pied .programme { color: #DCE4F0; font-weight: 600; max-width: 60ch; }
footer.pied .mentions { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
footer.pied .mentions span { overflow-wrap: anywhere; }
footer.pied nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
footer.pied a { color: #C9D7EC; }
footer.pied :focus-visible { outline-color: #D3AC4A; }

/* ===================== Pages légales ===================== */
.entete-legal { background: var(--champ); color: var(--champ-texte); position: relative; }
.entete-legal::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #9C7A1E, #D3AC4A 45%, #9C7A1E);
}
.entete-legal .contenu { max-width: 48rem; padding-top: 2.25rem; padding-bottom: 2.5rem; }
.entete-legal a.retour { color: var(--champ-doux); font-size: 0.925rem; font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.entete-legal a.retour:hover { color: #FFFFFF; text-decoration: underline; }
.entete-legal :focus-visible { outline-color: #D3AC4A; }
.entete-legal h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15; letter-spacing: -0.01em; margin-top: 0.9rem; text-wrap: balance;
}
.entete-legal .sous-titre { color: var(--champ-doux); margin-top: 0.6rem; max-width: 60ch; }

.legal { padding: 2.5rem 0 4rem; }
.legal .contenu { max-width: 48rem; }
.legal .maj {
  display: inline-block; color: var(--texte-doux); font-size: 0.9rem;
  background: var(--surface-douce); border-radius: 8px; padding: 0.35rem 0.75rem; margin-bottom: 1.25rem;
}
.legal h2 {
  font-family: var(--serif); font-weight: 600; color: var(--primaire);
  font-size: 1.3rem; line-height: 1.3; margin: 2.25rem 0 0.6rem; text-wrap: balance;
}
.legal h2:first-of-type { margin-top: 0.5rem; }
.legal p { margin-bottom: 0.9rem; max-width: 68ch; }
.legal ul { margin: 0 0 1rem 1.25rem; max-width: 66ch; }
.legal li { margin-bottom: 0.45rem; padding-left: 0.2rem; }
.legal li::marker { color: var(--accent); }
.legal strong { font-weight: 650; }
.legal .encart {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.legal .encart p:last-child, .legal .encart ul:last-child { margin-bottom: 0; }