@import url("/static/polices.css");

/* ==========================================================================
   Dépose-minute Beth Mena'hem — feuille unique.

   Tous les tokens sont dans :root. Pour changer une couleur, un espacement ou
   une graisse, c'est ce bloc et nulle part ailleurs : aucun composant plus bas
   n'écrit de valeur en dur.

   PARTI PRIS : un seul thème, blanc. Le logo de l'école est un dessin sur fond
   blanc, avec un bleu pétrole et un corail. Un thème sombre trahirait cette
   identité, donc il n'y en a pas, et `color-scheme: light` empêche le
   navigateur d'assombrir les champs de formulaire sur un téléphone en mode nuit.

   Le blanc est le fond de la page ET des surfaces. Ce qui sépare les blocs,
   ce sont des filets d'un pixel et de l'air, pas des cadres gris : c'est ce qui
   donne l'impression de légèreté du logo.
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- marque, relevée dans le logo officiel --- */
  --petrole:        #00889f;
  --petrole-fonce:  #056b7e;
  --petrole-nuit:   #04424e;
  --petrole-voile:  #e8f4f7;
  --petrole-souffle:#f4fafb;
  --corail:         #f89068;
  --corail-fonce:   #c25a24;
  --corail-voile:   #fdf1eb;
  --corail-souffle: #fef8f5;

  /* --- neutres très légèrement tirés vers le pétrole --- */
  --encre:          #10262d;
  --encre-douce:    #4c6a74;
  --encre-tenue:    #8aa3ac;
  --trait:          #e3edf0;
  --trait-fin:      #f0f6f7;
  --blanc:          #ffffff;
  --blanc-casse:    #fafcfd;

  /* --- états, volontairement distincts de la marque --- */
  --ok:             #0e7d57;
  --ok-voile:       #e8f6f0;
  --tiede:          #8a6314;
  --tiede-voile:    #fdf5e6;
  --rate:           #b32d21;
  --rate-voile:     #fdeeec;

  /* --- typographie --- */
  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-micro: 10.5px;
  --t-mini:  11.5px;
  --t-petit: 12.5px;
  --t-base:  14px;
  --t-moyen: 15.5px;
  --t-grand: 20px;

  /* --- rythme --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 22px; --e6: 32px;

  --arrondi-s: 10px;
  --arrondi-m: 14px;
  --arrondi-l: 20px;
  --arrondi-plein: 999px;

  /* Ombres très diffuses, presque invisibles : elles posent les blocs sans
     les cerner. Une ombre franche ferait « carte » et alourdirait le blanc. */
  --ombre-1: 0 1px 2px rgba(16, 38, 45, .04);
  --ombre-2: 0 1px 3px rgba(16, 38, 45, .04), 0 8px 24px rgba(16, 38, 45, .05);
  --ombre-3: 0 2px 6px rgba(16, 38, 45, .05), 0 20px 48px rgba(16, 38, 45, .09);

  --tactile: 42px;
  --transition: 150ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--blanc); }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tactile) + var(--e6) + env(safe-area-inset-bottom));
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
a { color: var(--petrole-fonce); }
:focus-visible { outline: 2px solid var(--petrole); outline-offset: 2px; border-radius: var(--e1); }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }

.page { max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------- barre d'app */
.barre-app {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--trait-fin);
}
/* Le sigle est le dessin du logo, sans cadre : sur du blanc il se pose seul. */
.sigle { flex: 0 0 auto; display: block; }
.sigle img { width: 34px; height: 34px; object-fit: contain; display: block; }
.barre-app .identite { flex: 1; min-width: 0; }
.barre-app .identite b {
  display: block; font-size: var(--t-moyen); font-weight: 600; letter-spacing: -.018em;
}
.barre-app .identite span { font-size: var(--t-mini); color: var(--encre-tenue); }

.pastille-credits {
  flex: 0 0 auto; text-align: right; text-decoration: none;
  font-family: var(--mono); line-height: 1.2;
}
.pastille-credits b {
  display: block; font-size: var(--t-petit); font-weight: 600;
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.pastille-credits span {
  font-size: var(--t-micro); color: var(--encre-tenue); letter-spacing: .07em;
}
.pastille-credits.bas b { color: var(--corail-fonce); }
.pastille-credits.inconnu b { color: var(--encre-tenue); }

/* ------------------------------------------------------------------ rubans */
.ruban {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4);
  font-size: var(--t-petit);
  text-decoration: none; color: inherit;
}
.ruban .point-ruban { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; }
.ruban b { font-weight: 600; }
.ruban .fleche { margin-left: auto; font-weight: 600; white-space: nowrap; opacity: .8; }
.ruban.attention { background: var(--corail-souffle); color: var(--corail-fonce); }
.ruban.attention .point-ruban { background: var(--corail); }
.ruban.essai { background: var(--petrole-souffle); color: var(--petrole-fonce); }
.ruban.essai .point-ruban { background: var(--petrole); }

/* ------------------------------------------------------------- mois et nav */
.mois-nav {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e5) var(--e4) var(--e4);
}
.mois-nav h1 {
  flex: 1; font-size: var(--t-grand); font-weight: 600; letter-spacing: -.026em;
  line-height: 1.15;
}
.mois-nav h1::first-letter { text-transform: uppercase; }
/* Un filet corail sous le compte de matins : c'est le seul rappel décoratif
   du cercle corail du logo, et il tient en trois pixels. */
.mois-nav h1 small {
  display: inline-block; margin-top: 5px;
  padding-bottom: 4px; border-bottom: 2px solid var(--corail);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue);
}
.rond {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: var(--arrondi-plein);
  background: var(--blanc); color: var(--encre-douce);
  font-size: var(--t-moyen); text-decoration: none; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.rond:hover { border-color: var(--petrole); color: var(--petrole); box-shadow: var(--ombre-1); }
.rond[aria-disabled="true"] { opacity: .3; pointer-events: none; }

/* ---------------------------------------------------------------- l'agenda */
.agenda { padding: 0 var(--e2) var(--e2); }
.agenda-entetes,
.agenda-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.agenda-entetes { padding: 0 0 var(--e2); }
.agenda-entetes span {
  text-align: center; font-family: var(--mono);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em;
  color: var(--encre-tenue);
}

.case {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 70px; padding: 6px 5px 7px;
  border: 1px solid var(--trait-fin); border-radius: var(--arrondi-s);
  background: var(--blanc); color: inherit;
  font-family: var(--sans); text-align: left; text-decoration: none;
  cursor: pointer; overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.case:hover { border-color: var(--petrole); box-shadow: var(--ombre-1); }
.case:active { transform: scale(.97); }
.case .tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); }
.case .numero {
  font-family: var(--mono); font-size: var(--t-petit); font-weight: 500;
  color: var(--encre-douce); font-variant-numeric: tabular-nums;
}
/* Chaque famille tient sur UNE ligne, tronquée proprement si besoin.
   Sans ça, « AOUIZERAT » se couperait en « AOUIZERA / T ». */
.case .noms {
  font-size: 10px; font-weight: 600; line-height: 1.32;
  letter-spacing: -.01em; min-width: 0;
}
.case .noms, .case .noms i {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case .noms i { font-style: normal; font-weight: 500; color: var(--encre-douce); }

.case.vide { background: transparent; border-color: transparent; cursor: default; }
.case.conge {
  background: var(--blanc-casse); border-color: transparent; cursor: default;
}
.case.conge .numero { color: var(--encre-tenue); font-weight: 400; }

/* Aujourd'hui : un anneau corail, en écho au cercle du logo. Il ne peut pas
   se confondre avec la sélection, qui est un aplat pétrole. */
.case.aujourdhui {
  border-color: var(--corail);
  box-shadow: inset 0 0 0 1px var(--corail);
}
.case.aujourdhui .numero { color: var(--corail-fonce); font-weight: 600; }
.case.douteux { background: var(--corail-souffle); border-color: var(--corail-voile); }
.case.annule { opacity: .45; }
.case.annule .noms { text-decoration: line-through; }
.case.choisie {
  background: var(--petrole); border-color: var(--petrole);
  box-shadow: var(--ombre-2);
}
.case.choisie .numero, .case.choisie .noms { color: var(--blanc); }
.case.choisie .noms i { color: rgba(255, 255, 255, .78); }
.case.choisie .point { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

.point { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--encre-tenue); }
.point.ok      { background: var(--ok); }
.point.venu    { background: var(--ok); box-shadow: 0 0 0 2.5px var(--ok-voile); }
.point.absent  { background: var(--rate); }
.point.rate    { background: var(--rate); }
.point.simule  { background: var(--corail); }
.point.attente { background: #cbdae0; }
.point.douteux { background: var(--corail); }
.point.annule,
.point.conge   { background: transparent; }

.legende {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  padding: var(--e3) var(--e4) var(--e5);
  font-size: var(--t-micro); color: var(--encre-tenue);
}
.legende span { display: inline-flex; align-items: center; gap: 5px; }

/* ----------------------------------------------------------- tiroir du jour */
.tiroir {
  margin: 0 var(--e2) var(--e5);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-l);
  box-shadow: var(--ombre-2);
  overflow: hidden;
}
.tiroir-tete {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--e4) var(--e5) var(--e3);
}
.tiroir-tete h2 { font-size: var(--t-grand); font-weight: 600; letter-spacing: -.026em; }
.tiroir-tete h2::first-letter { text-transform: uppercase; }
.tiroir-tete .quand {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--encre-tenue); letter-spacing: .04em;
}
@media (min-width: 440px) {
  .tiroir-tete { flex-direction: row; align-items: baseline; gap: var(--e2); }
  .tiroir-tete .quand { margin-left: auto; text-align: right; }
}

.famille { padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--trait-fin); }
.famille .nom { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.famille .nom b { font-size: var(--t-moyen); font-weight: 600; letter-spacing: -.02em; }
.famille .nom span { font-size: var(--t-mini); color: var(--encre-douce); }
.famille .nom .quota {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-micro);
  color: var(--encre-tenue); white-space: nowrap;
}

.tels { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.tel {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 13px 0 11px;
  border: 1px solid var(--petrole-voile); border-radius: var(--arrondi-plein);
  background: var(--petrole-souffle);
  color: var(--petrole-fonce);
  font-family: var(--mono); font-size: var(--t-petit); font-weight: 500;
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.tel:hover { border-color: var(--petrole); }
.tel:active { background: var(--petrole-voile); }
.tel svg { flex: 0 0 auto; opacity: .7; }

.etats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); }
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--arrondi-plein);
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
}
.puce::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.puce.ok      { background: var(--ok-voile);      color: var(--ok); }
.puce.attente { background: var(--trait-fin);     color: var(--encre-douce); }
.puce.simule  { background: var(--corail-voile);  color: var(--corail-fonce); }
.puce.tiede   { background: var(--tiede-voile);   color: var(--tiede); }
.puce.rate    { background: var(--rate-voile);    color: var(--rate); }
.puce.nue::before { display: none; }
.horodatage { font-family: var(--mono); font-size: var(--t-micro); color: var(--encre-tenue); }

/* présence : un choix à deux branches, pas une case à cocher ambiguë */
.presence { display: flex; gap: var(--e2); margin-top: var(--e4); }
.presence form { flex: 1; display: flex; }
.presence button {
  flex: 1; min-height: 38px;
  border: 1px solid var(--trait); border-radius: var(--arrondi-plein);
  background: var(--blanc); color: var(--encre-douce);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.presence button:hover { border-color: var(--encre-tenue); color: var(--encre); }
.presence .venu[aria-pressed="true"] { background: var(--ok-voile); border-color: var(--ok); color: var(--ok); }
.presence .absent[aria-pressed="true"] { background: var(--rate-voile); border-color: var(--rate); color: var(--rate); }

.note-jointe {
  margin: var(--e3) 0 0; padding: var(--e2) var(--e3);
  background: var(--tiede-voile); border-radius: var(--arrondi-s);
  font-size: var(--t-petit); color: var(--tiede);
}

/* actions du tiroir */
.actions {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--trait-fin);
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 var(--e4);
  border: 1px solid var(--trait); border-radius: var(--arrondi-plein);
  background: var(--blanc); color: var(--encre);
  font-family: var(--sans); font-size: var(--t-petit); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: all var(--transition);
}
.bouton:hover { border-color: var(--petrole); color: var(--petrole-fonce); box-shadow: var(--ombre-1); }
.bouton.fort {
  background: var(--petrole); border-color: var(--petrole); color: var(--blanc);
  box-shadow: 0 1px 2px rgba(0, 136, 159, .28);
}
.bouton.fort:hover { background: var(--petrole-fonce); border-color: var(--petrole-fonce); color: var(--blanc); }
.bouton.discret { border-color: transparent; background: transparent; color: var(--encre-douce); }
.bouton.discret:hover { background: var(--trait-fin); box-shadow: none; }
/* Un bouton désactivé doit se voir comme tel : sinon on croit que l'app est
   cassée alors qu'elle explique juste qu'une condition manque. */
.bouton:disabled,
.bouton.fort:disabled {
  background: var(--trait-fin); border-color: var(--trait);
  color: var(--encre-tenue); box-shadow: none; cursor: not-allowed;
}
.bouton:disabled:hover { border-color: var(--trait); color: var(--encre-tenue); }

details.replier { border-top: 1px solid var(--trait-fin); }
details.replier > summary {
  padding: var(--e3) var(--e5); cursor: pointer; list-style: none;
  font-size: var(--t-petit); font-weight: 600; color: var(--petrole-fonce);
}
details.replier > summary::-webkit-details-marker { display: none; }
details.replier > summary::after { content: " ↓"; font-family: var(--mono); opacity: .6; }
details.replier[open] > summary::after { content: " ↑"; }
details.replier .contenu { padding: 0 var(--e5) var(--e5); display: grid; gap: var(--e4); }

.champ {
  width: 100%; min-height: 40px; padding: 0 var(--e3);
  border: 1px solid var(--trait); border-radius: var(--arrondi-s);
  background: var(--blanc); color: var(--encre);
  font-family: var(--sans); font-size: var(--t-base);
}
.champ::placeholder { color: var(--encre-tenue); }
select.champ { appearance: none; padding-right: var(--e5); }
.etiquette {
  display: block; font-family: var(--mono); font-size: var(--t-micro);
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-tenue); margin-bottom: 6px;
}

/* -------------------------------------------------------------- listes */
/* Pas de cadre autour des sections : un titre en petites capitales et des
   filets suffisent à grouper. C'est ce qui garde la page blanche et aérée. */
.section { margin: 0 0 var(--e5); }
.section > h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
  padding: 0 var(--e4) var(--e2);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-tenue);
}
.section > h2 span,
.section > h2 a {
  font-family: var(--sans); font-size: var(--t-mini); letter-spacing: 0;
  text-transform: none; font-weight: 600; text-decoration: none;
}

.rangs { display: flex; flex-direction: column; border-top: 1px solid var(--trait-fin); }
.rang {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3);
  min-height: var(--tactile); padding: var(--e2) var(--e4);
  border-bottom: 1px solid var(--trait-fin);
  color: inherit; text-decoration: none;
  transition: background var(--transition);
}
.rang:hover { background: var(--petrole-souffle); }
.rang .date-courte {
  font-family: var(--mono); font-size: var(--t-mini); color: var(--encre-tenue);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 60px;
}
.rang .principal { min-width: 0; font-size: var(--t-petit); font-weight: 600; letter-spacing: -.012em; }
.rang .principal small { display: block; font-weight: 400; color: var(--encre-tenue); font-size: var(--t-mini); }
.rang.actif { background: var(--petrole-voile); }

.jauge { width: 56px; }
.jauge .barre { height: 5px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.jauge .barre i { display: block; height: 100%; background: var(--petrole); border-radius: inherit; }
.jauge.trop .barre i { background: var(--corail); }
.jauge.peu .barre i { background: #b9ccd3; }
.jauge .chiffre {
  display: block; margin-top: 4px; text-align: right;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
}

.compteurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  border-top: 1px solid var(--trait-fin);
}
.compteurs > div {
  padding: var(--e3) var(--e4) var(--e4);
  border-bottom: 1px solid var(--trait-fin);
  border-right: 1px solid var(--trait-fin);
}
.compteurs b {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 600;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.compteurs span { display: block; font-size: var(--t-micro); color: var(--encre-tenue); line-height: 1.3; margin-top: 3px; }
.compteurs .alerte b { color: var(--corail-fonce); }
.compteurs .reussi b { color: var(--ok); }

/* --------------------------------------------------------- barre du bas */
.nav-bas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--trait-fin);
}
.nav-bas a {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--tactile); padding: 8px 0 6px;
  color: var(--encre-tenue); text-decoration: none;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .01em;
}
.nav-bas a svg { display: block; }
.nav-bas a[aria-current="page"] { color: var(--petrole); }
/* un trait pétrole au-dessus de l'onglet actif, plutôt qu'un fond coloré */
.nav-bas a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 0 0 2px 2px; background: var(--petrole);
}
.nav-bas .compteur-nav {
  position: absolute; top: 4px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--arrondi-plein);
  background: var(--corail); color: var(--blanc);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  line-height: 16px; text-align: center;
}

/* ---------------------------------------------------------------- divers */
.vide-message { padding: var(--e6) var(--e4); text-align: center; color: var(--encre-tenue); font-size: var(--t-petit); line-height: 1.7; }
.discret { font-size: var(--t-petit); color: var(--encre-douce); }
.recherche-barre { display: flex; gap: var(--e2); padding: var(--e4) var(--e4) var(--e3); }
.segments { display: flex; gap: var(--e2); padding: var(--e4) var(--e4) var(--e4); }
.segments a {
  flex: 1; text-align: center; min-height: 36px; line-height: 34px;
  border: 1px solid var(--trait); border-radius: var(--arrondi-plein);
  background: var(--blanc); color: var(--encre-douce);
  font-size: var(--t-petit); font-weight: 600; text-decoration: none;
}
.segments a[aria-current="true"] { background: var(--petrole-souffle); border-color: var(--petrole); color: var(--petrole-fonce); }

/* connexion : le logo horizontal en entier, c'est la page qui a la place */
.connexion { max-width: 340px; margin: 13vh auto; padding: var(--e5); text-align: center; }
.connexion img { width: 100%; max-width: 250px; height: auto; margin-bottom: var(--e6); }
.connexion h1 { font-size: var(--t-grand); font-weight: 600; letter-spacing: -.026em; margin-bottom: var(--e1); }
.connexion p { color: var(--encre-douce); font-size: var(--t-petit); margin: 0 0 var(--e5); }
.connexion .champ { text-align: center; font-family: var(--mono); letter-spacing: .06em; margin-bottom: var(--e2); min-height: 44px; }
.connexion .bouton { width: 100%; min-height: 44px; }
.erreur { color: var(--rate); font-size: var(--t-petit); margin-bottom: var(--e2); }

@media (min-width: 620px) {
  .case { min-height: 84px; }
  .case .noms { font-size: 11px; }
}