/* La base : la page, la coquille (bandeau, menu, contenu), le texte, le focus.

   Aucune ressource extérieure : les polices du système (la CSP, la vie privée, l'usage hors ligne).
   Aucun défilement horizontal de la page, jusqu'à 375 px de large (conception § 12.2). */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fond); color: var(--texte); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
code, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em; }

/* Le focus se voit toujours, au clavier comme à la souris dans un champ. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1:focus, h1:focus-visible { outline: none; }

/* Caché à l'œil, lu par les lecteurs d'écran. */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le lien d'évitement : premier arrêt du clavier, visible quand il a le focus. */
.evitement {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--accent); padding: .5rem 1rem; border-radius: .5rem;
  box-shadow: var(--ombre); min-height: 2.75rem;
}
.evitement:focus { top: .5rem; }

/* --- La coquille ---------------------------------------------------------------------------- */
.bandeau-haut {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 20;
}
.bandeau-haut .marque {
  font-weight: 700; font-size: 1.05rem; color: var(--texte); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
}
.bandeau-haut .marque::before {
  content: ""; width: .85rem; height: .85rem; border-radius: .2rem; background: var(--accent); flex: none;
}
.bandeau-haut .recherche-globale { flex: 1 1 16rem; display: flex; gap: .5rem; max-width: 34rem; margin-left: auto; }
.bandeau-haut .recherche-globale input { flex: 1; min-width: 0; }
.bandeau-haut .outils-compte { display: flex; gap: .5rem; align-items: center; }
.bandeau-haut .bouton-menu { display: none; }

.coquille { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: calc(100vh - 3.75rem); }
.menu-principal {
  background: var(--surface); border-right: 1px solid var(--bordure); padding: 1rem .75rem;
}
.menu-principal h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret);
  margin: 1.25rem .5rem .25rem;
}
.menu-principal h2:first-child { margin-top: 0; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; }
.menu-principal a {
  display: flex; align-items: center; min-height: 2.75rem; padding: .25rem .75rem;
  border-radius: .5rem; color: var(--texte); text-decoration: none;
}
.menu-principal a:hover { background: var(--surface-2); }
.menu-principal .deconnexion-menu { display: none; }
.menu-principal a[aria-current="page"] {
  background: var(--surface-2); font-weight: 650; box-shadow: inset 4px 0 0 var(--accent);
}
#contenu { padding: 1.25rem 1.5rem 3rem; min-width: 0; max-width: 78rem; }
#contenu:focus { outline: none; }

/* Les bandeaux d'information : accès de To The Top, secours en cours, avis. */
.bandeaux:empty { display: none; }
.bandeau-info {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding: .5rem 1rem; background: var(--alerte-fond); color: var(--alerte); border-bottom: 1px solid var(--bordure);
}
.bandeau-info p { margin: 0; flex: 1 1 20rem; }

/* La page sans session (connexion, liens) : une carte au centre. */
.page-seule { display: grid; place-items: start center; padding: 2rem 1rem; min-height: 100vh; }
.page-seule > .carte { width: 100%; max-width: 28rem; }

/* --- Le téléphone et la tablette -------------------------------------------------------------- */
@media (max-width: 56rem) {
  .coquille { grid-template-columns: minmax(0, 1fr); }
  .bandeau-haut .bouton-menu { display: inline-flex; }
  .menu-principal { display: none; border-right: 0; border-bottom: 1px solid var(--bordure); }
  .menu-principal.ouvert { display: block; }
  #contenu { padding: 1rem 1rem 6rem; }
}
@media (max-width: 40rem) {
  .bandeau-haut .recherche-globale { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; }
  /* Sur un téléphone, « Mon compte » et « Se déconnecter » sont dans le menu : le bandeau garde
     une ligne (et la recherche la suivante). */
  .bandeau-haut .outils-compte { display: none; }
  .menu-principal .deconnexion-menu { display: inline-flex; margin: 1rem .5rem 0; }
  h1 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}