/* =============================================================
   Sylow & Co — charte des écrans
   Transposition web de documents/sty/sylow.sty (charte v4.0).

   SOURCE UNIQUE : charte-web/. Les copies de importer/static/charte,
   saisie/static/charte et client-custom/charte se régénèrent par
       python3 charte-web/distribuer.py
   et test_charte.py échoue si elles divergent, ou si la palette
   s'écarte de sylow.sty.
   ============================================================= */

@font-face { font-family: "Goldman Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GoldmanSans_Rg.woff2") format("woff2"); }
@font-face { font-family: "Goldman Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/GoldmanSans_Md.woff2") format("woff2"); }
@font-face { font-family: "Goldman Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/GoldmanSans_Bd.woff2") format("woff2"); }

:root {
  /* Palette — valeurs de \definecolor dans sylow.sty */
  --sylow-bleu: #103A60;     /* sylowblue  */
  --sylow-rouge: #8D281E;    /* sylowred   */
  --sylow-sombre: #0A2540;   /* sylowdark  */
  --sylow-profond: #6E1E16;  /* sylowdeep  */
  --sylow-encre: #1C1C1C;    /* sylowink   */
  --sylow-moyen: #5A6E80;    /* sylowmid   */
  --sylow-filet: #C8CDD3;    /* sylowrule  */
  --sylow-clair: #EAF0F6;    /* sylowlight */
  --sylow-gris: #F4F4F4;     /* sylowgray  */
  --sylow-ok: #1A6B3A;       /* sylowok    */

  /* Dérivés propres à l'écran */
  --sylow-fond: #FBFCFD;
  --sylow-filet-doux: #DFE3E8;
  --sylow-rouge-pale: #FBF1EF;
  --sylow-ok-pale: #EDF5F0;
  --sylow-focus: rgba(16, 58, 96, .16);

  --sylow-police: "Goldman Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --sylow-chasse: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sylow-rayon: 2px;   /* la charte est à angles vifs : tcolorbox arc=0pt */
}

/* ── Base : tout ce qui suit ne s'applique que sous <body class="sylow"> ── */
.sylow { margin: 0; background: var(--sylow-fond); color: var(--sylow-encre);
  font: 400 15px/1.55 var(--sylow-police); -webkit-font-smoothing: antialiased; }
.sylow *, .sylow *::before, .sylow *::after { box-sizing: border-box; }
.sylow a { color: var(--sylow-bleu); text-underline-offset: 2px; }
.sylow a:hover { color: var(--sylow-rouge); }
.sylow :focus-visible { outline: 2px solid var(--sylow-rouge); outline-offset: 2px; }
.sylow strong { font-weight: 700; }

/* Titres : capitales interlettrées en bleu ; trait rouge court (\sylowtick) */
.sylow h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: .05em; text-transform: uppercase; color: var(--sylow-bleu); }
.sylow h1::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 10px;
  background: var(--sylow-rouge); }
/* Rubriques : filet rouge sous le titre (\titlerule) */
.sylow h2 { margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--sylow-rouge);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sylow-bleu); }

/* ── En-tête d'application : monogramme, nom, double filet bleu / rouge ── */
.sy-entete { display: flex; align-items: center; gap: 16px; padding: 12px 28px; background: #fff; }
.sy-entete img { display: block; height: 30px; width: auto; }
.sy-appli { padding-left: 16px; border-left: 1px solid var(--sylow-filet); font-size: 12px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sylow-moyen); }
.sy-droite { margin-left: auto; font-size: 13px; color: var(--sylow-moyen); }

/* Menu de bascule entre les écrans : importer, dossiers, fiches clients, suivi.
   Même balisage dans l'importer et dans l'écran de saisie ; l'écran courant
   porte aria-current="page". */
.sy-menu { display: flex; flex-wrap: wrap; gap: 4px; }
.sy-menu a { padding: 6px 11px; border: 1px solid transparent; border-radius: var(--sylow-rayon);
  font: 500 12.5px/1.2 var(--sylow-police); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--sylow-moyen); white-space: nowrap; }
.sy-menu a:hover { color: var(--sylow-bleu); background: var(--sylow-clair); }
.sy-menu a[aria-current="page"] { color: #fff; background: var(--sylow-bleu); border-color: var(--sylow-bleu); }
.sy-compte { font-size: 12.5px; }
/* \sylowrule : bleu 1,2 pt, respiration, rouge 0,5 pt */
.sy-filet { height: 4px; background: linear-gradient(to bottom, var(--sylow-bleu) 0 2px,
  transparent 2px 3px, var(--sylow-rouge) 3px 4px); }

/* ── Formulaires ── */
.sy-champ { margin-bottom: 16px; }
.sy-etiquette { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--sylow-moyen); }
.sylow input[type=text], .sylow input[type=password], .sylow input[type=email],
.sylow input[type=date], .sylow select, .sylow textarea {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--sylow-encre); background: #fff;
  border: 1px solid var(--sylow-filet); border-radius: var(--sylow-rayon);
  transition: border-color .15s, box-shadow .15s; }
.sylow input:focus, .sylow select:focus, .sylow textarea:focus {
  outline: none; border-color: var(--sylow-bleu); box-shadow: 0 0 0 3px var(--sylow-focus); }
.sylow input[type=radio], .sylow input[type=checkbox] { accent-color: var(--sylow-bleu); }

/* ── Boutons : aplat bleu, capitales interlettrées ── */
/* Spécificité : « .sylow a » (0,1,1) l'emportait sur « .sy-bouton » (0,1,0) et
   rendait le texte bleu sur fond bleu — un bouton plein écrit comme un lien
   (« Nouvelle personne ») s'affichait vide. */
.sylow button, .sylow .sy-bouton {
  display: inline-block; padding: 10px 20px; font: 500 12.5px/1.2 var(--sylow-police);
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--sylow-bleu); border: 1px solid var(--sylow-bleu);
  border-radius: var(--sylow-rayon); cursor: pointer; transition: background-color .15s, border-color .15s; }
.sylow button:hover, .sylow .sy-bouton:hover { color: #fff; background: var(--sylow-sombre); border-color: var(--sylow-sombre); }
.sylow button:disabled { opacity: .4; cursor: not-allowed; }
.sylow button.second, .sylow .sy-bouton.second { color: var(--sylow-bleu); background: #fff; }
.sylow button.second:hover, .sylow .sy-bouton.second:hover { color: var(--sylow-bleu); background: var(--sylow-clair); }
.sylow button.alerte, .sylow .sy-bouton.alerte { background: var(--sylow-rouge); border-color: var(--sylow-rouge); }
.sylow button.alerte:hover, .sylow .sy-bouton.alerte:hover { background: var(--sylow-profond); border-color: var(--sylow-profond); }
.sy-plein { width: 100%; }

/* ── Encadrés ── */
.sy-avis, .sy-info, .sy-succes { padding: 11px 14px; border: 1px solid; border-left-width: 3px;
  border-radius: var(--sylow-rayon); font-size: 14px; }
.sy-avis   { background: var(--sylow-rouge-pale); border-color: var(--sylow-rouge-pale); border-left-color: var(--sylow-rouge); }
.sy-info   { background: var(--sylow-clair); border-color: var(--sylow-clair); border-left-color: var(--sylow-bleu); }
.sy-succes { background: var(--sylow-ok-pale); border-color: var(--sylow-ok-pale); border-left-color: var(--sylow-ok); }
.sy-erreur { margin: 12px 0 0; font-size: 14px; color: var(--sylow-rouge); }

/* ── Tableaux : en-tête bleu pâle, filets gris ── */
.sylow table { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--sylow-filet); font-size: 14px; }
.sylow th, .sylow td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--sylow-filet-doux); }
.sylow th { background: var(--sylow-clair); border-bottom: 1px solid var(--sylow-bleu); color: var(--sylow-bleu);
  font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.sylow tr:last-child td { border-bottom: 0; }

/* Puces : carré rouge, comme l'itemize de la charte */
.sylow ul { padding-left: 18px; }
.sylow li::marker { color: var(--sylow-rouge); }

/* ── Cartes et page de connexion ── */
.sy-carte { background: #fff; border: 1px solid var(--sylow-filet); border-radius: var(--sylow-rayon); padding: 18px 20px; }
.sy-connexion { max-width: 400px; margin: 9vh auto 0; padding: 0 20px; }
.sy-connexion .sy-logo { display: block; width: 230px; height: auto; margin: 0 auto 28px; }
.sy-connexion .sy-carte { padding: 26px 26px 24px; border-top: 3px solid var(--sylow-bleu);
  box-shadow: 0 12px 32px rgba(10, 37, 64, .06); }
.sy-pied { margin: 32px 0 24px; text-align: center; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sylow-moyen); }

/* ── Téléphones et petites tablettes ───────────────────────────────────────
   L'en-tête s'empile, le menu occupe sa propre ligne et défile s'il le faut ;
   les champs passent à 16 px, en deçà desquels iOS zoome à chaque saisie.
   Les règles portent sur .sylow pour l'emporter sur la mise en page propre à
   chaque application, chargée après la charte. */
@media (max-width: 760px) {
  .sy-entete { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .sy-entete img { height: 24px; }
  .sy-appli { padding-left: 12px; font-size: 11px; letter-spacing: .1em; }
  .sy-droite { font-size: 12px; }
  .sy-menu { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .sy-menu a { padding: 7px 10px; }
  .sylow main { padding: 20px 16px 40px; }
  .sylow h1 { font-size: 19px; }
  .sylow h2 { margin-top: 24px; }
  .sylow input[type=text], .sylow input[type=password], .sylow input[type=email],
  .sylow input[type=date], .sylow select, .sylow textarea { font-size: 16px; }
  .sylow th, .sylow td { padding: 7px 9px; font-size: 13px; }
  .sylow button, .sylow .sy-bouton { padding: 11px 16px; }
  .sy-connexion { margin-top: 5vh; }
}

/* Téléphones étroits : les quatre entrées du menu tiennent sans coupure. */
@media (max-width: 430px) {
  .sy-menu { gap: 2px; }
  .sy-menu a { padding: 7px 7px; font-size: 11.5px; letter-spacing: .02em; }
  .sy-entete { padding: 10px 10px; }
  .sylow main { padding: 18px 12px 36px; }
}