/* Réseau perdu côté navigateur (CAHIER-ROBUSTESSE.md, section 3) : bandeau fixe et refus d'envoi des formulaires.
   Construit par public/reseau.js. Charte : thème clair, bandeau à coins 14 px, filet gauche de la tonalité,
   pictogramme au trait en currentColor, transition de 180 ms, rien ne bouge ensuite. Les couleurs reprennent les
   jetons de style.css, avec leur valeur en repli pour une page qui ne chargerait pas cette feuille.
   Place : en bas à gauche ; la bulle de l'assistant occupe le coin droit. Un bandeau fixe recouvre toujours quelque
   chose, donc trois règles pour ne masquer aucun bouton :
     1. espace client sur grand écran : le bandeau tient dans la colonne du menu latéral (236 px), sous ses entrées,
        et ne déborde jamais sur le contenu ;
     2. ailleurs (console, pages publiques, téléphone) : <body class="reseau-ouvert"> réserve en bas de page la
        hauteur du bandeau, la fin de page reste donc atteignable en défilant ;
     3. sur téléphone : une seule ligne (titre et bouton), la phrase reste lue par les lecteurs d'écran. */
.reseau {
  position: fixed;
  z-index: 950;
  left: 24px;
  bottom: 24px;
  width: min(440px, calc(100vw - 272px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line, #ddd5cc);
  border-left: 3px solid var(--warn, #a15c07);
  border-radius: 14px;
  background: var(--warn-bg, #fbf0dc);
  color: #7a4504;
  box-shadow: 0 28px 48px -30px rgba(23, 42, 48, .5);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  animation: reseau-arrivee 180ms cubic-bezier(.2, .7, .2, 1);
}
.reseau[hidden] { display: none; }
.reseau[data-etat="retablie"] {
  border-left-color: var(--ok-line, #e6d3ba);
  background: var(--ok-bg, #f1e4d1);
  color: var(--ok, #172a30);
}
.reseau__icone { display: inline-flex; flex: 0 0 auto; }
.reseau__picto { display: block; }
.reseau__texte { flex: 1 1 auto; margin: 0; min-width: 0; }
.reseau__titre { font-weight: 700; }
.reseau__bouton {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cfc3ab;
  border-radius: 14px;
  background: var(--surface, #ffffff);
  color: var(--ink, #172a30);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(.2, .7, .2, 1), color 160ms cubic-bezier(.2, .7, .2, 1);
}
.reseau__bouton:hover { border-color: var(--ember, #c45122); color: var(--ember-d, #a83f18); }
.reseau__bouton:focus-visible { outline: 2px solid var(--ink, #172a30); outline-offset: 2px; }
.reseau__bouton:disabled { cursor: default; color: var(--soft, #4d5a5e); border-color: var(--line, #ddd5cc); }
.reseau__bouton[hidden] { display: none; }

/* Refus d'envoi : message sous le bouton du formulaire, comme une erreur de champ. */
.reseau-refus {
  margin: 12px 0 0;
  padding: 11px 16px;
  border-left: 3px solid var(--warn, #a15c07);
  border-radius: 8px;
  background: var(--warn-bg, #fbf0dc);
  color: #7a4504;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

/* Message placé après un formulaire à bouton seul ou après le cadre de la clé : même marge que les autres blocs. */
.keybox + .reseau-refus, .inline-form + .reseau-refus { margin-top: 12px; }

/* 1. Espace client avec menu latéral : le bandeau occupe la colonne du menu (grille de .shell : 1240 px au plus,
   gouttière 16 px, colonne de 236 px), jamais le contenu. */
@media (min-width: 861px) {
  body:has(.sidenav) .reseau { left: max(16px, calc((100vw - 1240px) / 2 + 16px)); width: 236px; flex-wrap: wrap; }
  body:has(.sidenav) .reseau .reseau__texte { flex-basis: calc(100% - 34px); }
  body:has(.sidenav) .reseau .reseau__bouton { margin-left: 34px; }
}
/* Fenêtre basse : le menu descend presque jusqu'au bandeau, qui se réduit alors au titre et au bouton. */
@media (min-width: 861px) and (max-height: 640px) {
  body:has(.sidenav) .reseau .reseau__phrase { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 2. Sans menu latéral, le bandeau flotte sur le contenu : la page lui réserve sa place en bas. */
body.reseau-ouvert:not(:has(.sidenav)) { padding-bottom: 112px; }

@keyframes reseau-arrivee {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  /* Le menu latéral est replié : même réserve en bas de page que sans menu. */
  body.reseau-ouvert { padding-bottom: 112px; }
}
@media (max-width: 640px) {
  .reseau { left: 16px; right: 16px; bottom: 16px; width: auto; }
  /* La bulle de l'assistant (56 px, à 20 px du bord) garde son coin : le bandeau se pose au-dessus. */
  .ardz-assistant-present .reseau { bottom: 88px; }
  body.reseau-ouvert.ardz-assistant-present { padding-bottom: 176px; }
}
@media (max-width: 480px) {
  /* 3. Une seule ligne : pictogramme, titre, bouton. La phrase reste dans l'arbre d'accessibilité. */
  .reseau { font-size: 14px; padding: 10px 12px; }
  .reseau__phrase { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .reseau { animation: none; }
  .reseau__bouton { transition: none; }
}
@media print {
  .reseau, .reseau-refus { display: none; }
}

/* =============================================================
   Revue design 2 du 20/09/2026.
   - Pages qui ont un pied de page sombre (espace client) : la place du bandeau est réservée DANS le pied, pas sous
     lui. Avant, une bande crème de 112 à 176 px apparaissait sous le pied sombre et la page semblait cassée. Les
     pages sans pied (console) gardent la réserve sur <body>.
   - Bouton « Réessayer » : 44 px de haut sous 860 px (cible tactile), centré sur la ligne du titre.
   ============================================================= */
@media (max-width: 860px) {
  body.reseau-ouvert:has(> .footer) { padding-bottom: 0; }
  body.reseau-ouvert > .footer .footer__inner { padding-bottom: 112px; }
  .reseau__bouton { min-height: 44px; }
}
@media (max-width: 640px) {
  body.reseau-ouvert.ardz-assistant-present:has(> .footer) { padding-bottom: 0; }
  body.reseau-ouvert.ardz-assistant-present > .footer .footer__inner { padding-bottom: 168px; }
}
/* Sans menu latéral sur grand écran (pages publiques) : même principe, la réserve passe dans le pied. */
@media (min-width: 861px) {
  body.reseau-ouvert:not(:has(.sidenav)):has(> .footer) { padding-bottom: 0; }
  body.reseau-ouvert:not(:has(.sidenav)) > .footer .footer__inner { padding-bottom: 112px; }
}

/* ---------- Revue design 2 du 20/09/2026, relecture ---------- */
/* Espace client (pages avec pied sombre) sur téléphone : l'assistant est passé dans la barre du haut, le bandeau reprend
   donc le bas de l'écran à 16 px du bord, et le pied ne réserve plus que sa hauteur (une ligne, 64 px) et ses marges. */
@media (max-width: 640px) {
  body:has(> .footer) .reseau, body.ardz-assistant-present:has(> .footer) .reseau { bottom: 16px; }
  body.reseau-ouvert > .footer .footer__inner, body.reseau-ouvert.ardz-assistant-present > .footer .footer__inner { padding-bottom: 96px; }
}
/* Grand écran avec menu latéral : tout en bas de page, le bandeau (colonne du menu) recouvrait le logo du pied. Le pied
   lui réserve sa hauteur tant que le bandeau est affiché. */
@media (min-width: 861px) {
  body.reseau-ouvert:has(.sidenav) > .footer .footer__inner { padding-bottom: 176px; }
}