/* =============================================================================
   AlloLib — couche de finition commune
   -----------------------------------------------------------------------------
   Chargée juste après /polices/polices.css, donc AVANT le <style> propre à
   chaque page : tout ce qui suit est un plancher, jamais un plafond. Une règle
   de page l'emporte toujours. C'est ce qui permet de la greffer sur les trente
   pages sans en casser une.

   Les sélecteurs restent volontairement de faible spécificité (éléments nus,
   aucun !important) pour cette raison exacte.

   Ce fichier ne déclare AUCUNE police : Figtree, Figtree et Spline Sans Mono
   sont déjà servies par /polices/polices.css depuis le 2026-07-18.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. JETONS
   Préfixés « --al- » pour ne jamais entrer en collision avec les variables
   déjà posées par les pages (--or, --encre, --ligne…), qui restent maîtresses.
   --------------------------------------------------------------------------- */
:root {
  --al-encre:      #0B1A2E;
  --al-or:         #12B39F;
  --al-or-clair:   #2ED3BC;
  --al-or-fonce:   #0A6E61;
  --al-ligne:      #E2EAE8;
  --al-texte:      #26333F;
  --al-texte-doux: #61707F;

  /* Profondeur en deux couches : une ombre unique et large fait « plat » ;
     un contact rapproché plus une diffusion font « posé sur la page ». */
  --al-ombre-1: 0 1px 2px rgba(11,26,46,.05), 0 2px 6px -1px rgba(11,26,46,.05);
  --al-ombre-2: 0 2px 4px rgba(11,26,46,.05), 0 10px 24px -8px rgba(11,26,46,.12);

  --al-transition: 180ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
  accent-color: #12B39F;
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE — réglages fins que les pages ne posaient pas
   --------------------------------------------------------------------------- */

/* L'axe optique de Figtree (9..144) ne sert à rien s'il n'est pas activé :
   sans lui, un titre de 4 rem est rendu avec le dessin prévu pour du texte
   courant — trop épais, trop peu contrasté. C'est le réglage qui distingue
   une belle serif d'une serif seulement présente. */
h1, h2, h3, h4, h5, h6, .serif {
  font-optical-sizing: auto;
  font-synthesis-weight: none;
}

/* Un titre qui casse en laissant un mot seul sur la dernière ligne fait
   amateur, quelle que soit la police. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd  { text-wrap: pretty; }

/* Les gros corps serrent, les petits respirent — sinon le 4 rem paraît lâche
   et le 1,1 rem paraît tassé. */
h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.016em; }

/* Chiffres de même chasse partout où ils s'alignent en colonne ou changent
   sous les yeux : tableaux, prix, compteurs, minuteries. Sans cela, un
   chronomètre « fait vibrer » la ligne à chaque seconde. */
table, .prix, time, code, kbd, samp, pre,
[class*="chiffre"], [class*="compteur"], [class*="montant"], [class*="stat-valeur"] {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   3. MISE AU POINT VISIBLE
   Un anneau doré unique, présent partout, jamais retiré sans remplacement.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--al-or);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: rgba(18,179,159,.28); color: var(--al-encre); }

/* ---------------------------------------------------------------------------
   4. CONTRÔLES DE FORMULAIRE
   Un champ non stylé par sa page héritait de la police du système. Les cases
   à cocher et boutons radio sont explicitement exclus : leur imposer un
   remplissage les casse.
   --------------------------------------------------------------------------- */
input, select, textarea, button { font-family: inherit; font-size: inherit; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  transition: border-color var(--al-transition), box-shadow var(--al-transition);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
select:focus, textarea:focus {
  border-color: var(--al-or);
  box-shadow: 0 0 0 3px rgba(18,179,159,.16);
  outline: none;
}
textarea { resize: vertical; }

/* Le remplissage automatique de Chrome repeint le champ en bleu pâle et
   ignore background-color : seule une ombre interne le recouvre. C'est ce
   bleu qui abîmait l'écran de connexion de l'espace client. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--al-texte);
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  box-shadow: 0 0 0 40px #fff inset;
  transition: background-color 6000s ease-in-out 0s;
  caret-color: var(--al-texte);
}

::placeholder { color: #9AA7B4; opacity: 1; }

button, [role="button"], summary { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--al-or); }

/* ---------------------------------------------------------------------------
   5. BARRES DE DÉFILEMENT
   Celle du système, large et grise, jurait dans le bandeau marine de
   l'administration.
   --------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(11,26,46,.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11,26,46,.20);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(11,26,46,.34); background-clip: content-box;
}
/* Sur fond sombre, un pouce foncé est invisible. */
.sidebar ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
  background: rgba(196,232,226,.26); background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   6. DÉTAILS DE FINITION
   --------------------------------------------------------------------------- */
/* Un lien souligné à ras du texte coupe les jambages des g, j, p, q. */
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

/* Ancre atteinte par un lien interne : sans marge, l'entête collante la cache
   et le visiteur atterrit sur un titre invisible. */
:target { scroll-margin-top: 96px; }

hr { border: 0; border-top: 1px solid var(--al-ligne); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ---------------------------------------------------------------------------
   7. COHÉRENCE DES VIGNETTES DE CARTE
   Les cartes « services » et « métiers » portent leur pictogramme dans une
   pastille porcelaine de 48 px ; les cartes « secteurs » de /pour-qui ne
   l'avaient pas, et leur icône flottait, seule et minuscule, au-dessus du
   titre. Même composant, même traitement.
   --------------------------------------------------------------------------- */
/* Spécificité volontairement portée à trois classes : la page déclare
   « .secteur .ico{display:block} » dans un <style> qui vient APRÈS cette
   feuille. À égalité, c'est elle qui gagnerait, et la pastille resterait un
   carré vide avec l'icône coincée dans le coin. */
.secteurs-grille .secteur > .ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #F4F8F7;
  border: 1px solid var(--al-ligne);
  display: grid; place-items: center;
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   8. MOUVEMENT RÉDUIT — respecte le réglage du système
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   9. IMPRESSION
   Les contrats, fiches et documents clients sortent de ces pages. Sans ces
   règles, l'entête collant, le bouton d'appel flottant et les ombres partent
   à l'impression.
   --------------------------------------------------------------------------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  header, nav, footer, .btn, button,
  [class*="burger"], [class*="flottant"], [class*="appbar"], .barre {
    display: none !important;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .82em; color: #555; }
  h1, h2, h3 { break-after: avoid-page; }
  table, figure, blockquote { break-inside: avoid; }
  * { box-shadow: none !important; }
}

/* ---------------------------------------------------------------------------
   10. LOGO
   Le logo n'est plus dessiné dans la page : c'est un fichier SVG servi depuis
   /marque/. On le dimensionne par sa HAUTEUR et jamais par sa largeur — c'est
   la hauteur qui doit s'accorder à celle de la barre de navigation ; la
   largeur suit toute seule et le rapport reste juste.

   Les attributs width/height du <img> portent les dimensions du fichier, pas
   celles à l'écran : ils servent au navigateur à réserver la place avant que
   le SVG n'arrive. Sans eux, l'entête sursaute au chargement.
   --------------------------------------------------------------------------- */
.logo img, .login-logo img, .side-logo img, .brand img, .marque img {
  height: 34px; width: auto; display: block;
}
@media (max-width: 640px) {
  .logo img, .login-logo img, .side-logo img, .brand img, .marque img { height: 28px; }
}

/* Le nom de la société est désormais DANS l'image : l'espacement qui séparait
   la pastille du mot n'a plus d'objet et laissait un trou à droite du logo. */
.logo, .login-logo, .side-logo { gap: 10px; }

/* Suffixe d'application (« Team », « École Réception ») : il nomme l'outil à
   côté de la marque sans jamais rivaliser avec elle. */
.logo-suffixe {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; opacity: .62; white-space: nowrap; align-self: center;
}