/* THEME DIAMANTS pour Leto V3.
 *
 * POURQUOI CE FICHIER EXISTE. Zineb tient DEUX outils pour un seul travail et son courriel du
 * 31 aout dit lequel elle prefere : RATIO, le plus ancien. Les fonctions manquantes ont ete
 * corrigees le 1er septembre, donc ce qui reste n'est plus fonctionnel, c'est la CONFIANCE.
 * RATIO ressemble a SA garderie : le nom de la garderie ecrit a la main, son adresse, un filet
 * dore, un papier creme. Leto ressemblait a un tableau de bord de logiciel. Ce fichier ne change
 * aucun comportement, aucune donnee, aucune route : il rhabille.
 *
 * PORTEE. Il ne se charge que pour la garderie Diamants (attribut data-theme="diamants" pose sur
 * <html>). Toute autre garderie garde le bleu de Leto, donc rien de ce fichier ne peut casser un
 * autre client.
 *
 * REGLE. Aucune couleur en dur hors de ce bloc :root. Tout passe par les jetons que app.html
 * declare deja, de sorte qu'un composant non repris ici suive quand meme la marque.
 */
@import url('https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap');

html[data-theme="diamants"]{
  /* Palette relevee sur diamantsdesomerled.com et deja utilisee par RATIO, pour qu'un aller-retour
   * entre les deux outils ne ressemble pas a un changement de logiciel. */
  /* Anas, 26 sept 2026: « no more gold ever on anything leto ». Le creme et l'or sont morts;
   * blanc et noir. Ne jamais remettre d'or ni de papier creme ici. */
  --accent:#111111; --accent-2:#333333; --accent-soft:rgba(0,0,0,.06);
  --ink:#111111; --ink-2:#333333; --muted:#6b6b6b; --faint:#9a9a9a;
  --line:#e7e7e7; --line-2:#f1f1f1;
  --bg:#ffffff; --panel:#ffffff; --panel-2:#fafafa; --panel-3:#f0f0f0;
  --good:#1a7f37; --warn:#b42318; --bad:#c62828;
  --shadow-sm:0 1px 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px -14px rgba(0,0,0,.18);
  --shadow-lg:0 2px 4px rgba(0,0,0,.04),0 26px 52px -22px rgba(0,0,0,.22);
  --hand:"Love Ya Like A Sister","Comic Sans MS",cursive;
}

/* Le lavis bleu fixe derriere toute la page devient un lavis creme et dore. Sans cette regle, le
 * fond garde un voile bleu par-dessus le papier et l'ensemble tire au gris-vert. */
html[data-theme="diamants"] body::before{
  background:none;
}
/* Meme raison : le color-mix des cartes melange du bleu dans le blanc casse. */
html[data-theme="diamants"] .panel,
html[data-theme="diamants"] .set,
html[data-theme="diamants"] .rc,
html[data-theme="diamants"] .gg,
html[data-theme="diamants"] .vcard{background:var(--panel)}

/* ── L'EN-TETE IMPRIME ──────────────────────────────────────────────────────
 * C'est LE morceau qui fait la difference, et il ne coute rien. RATIO ouvre sa semaine par le nom
 * de la garderie ecrit a la main, l'adresse, une ligne en italique, un filet dore. On lit une
 * feuille qu'on afficherait au mur. Leto ouvrait par un fil d'ariane et un titre de logiciel. */
html[data-theme="diamants"] .dhead{
  /* display:block est load-bearing. Le conteneur de la vue est en flex, donc sans cette ligne le
   * logo, le titre et l'adresse se posent sur une seule rangee et l'en-tete perd exactement ce
   * qu'il vient chercher : la forme d'une feuille imprimee. */
  /* MESURE. A 1512x950 la premiere version prenait 266 px, soit 28 % de l'ecran, et le garde-fou
   * plafonne a 20 %. Le seuil n'a pas ete desserre: c'est l'en-tete qui a maigri, parce que la
   * ligne qui porte la reconnaissance est le NOM de la garderie et le reste est du decor autour.
   * Rien n'a ete retire, tout a ete resserre. */
  display:block; width:100%; text-align:center; padding:8px 20px 8px; margin:0 0 10px;
}
html[data-theme="diamants"] .dhead > *{display:block;width:100%}
html[data-theme="diamants"] .dhead .dh-logo{height:32px;width:auto;margin:0 auto 5px;display:block}
html[data-theme="diamants"] .dhead h2{
  font-family:var(--hand); font-weight:400; font-size:27px; letter-spacing:.005em;
  color:var(--ink-2); margin:0 0 5px; line-height:1.2;
}
html[data-theme="diamants"] .dhead .dh-sub{font-size:13.5px;color:var(--ink-2);margin:0 0 2px}
html[data-theme="diamants"] .dhead .dh-adr{font-size:12px;color:var(--faint);margin:0 0 6px}
html[data-theme="diamants"] .dhead .dh-note{font-size:12.5px;color:var(--muted);font-style:italic;margin:0 auto;max-width:440px;line-height:1.5}
html[data-theme="diamants"] .dhead .dh-rule{
  height:1px;margin:9px auto 0;max-width:1040px;
  background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent);
  opacity:.75;
}

/* ── LA BARRE LATERALE ──────────────────────────────────────────────────────
 * Chez RATIO chaque entree porte un carre arrondi de couleur, ce qui la rend reperable au coup
 * d'oeil plutot qu'a la lecture. Les traits gris de Leto se ressemblaient tous. On garde les
 * icones existantes et on leur pose le carre autour, donc aucun SVG n'est retouche. */
html[data-theme="diamants"] aside .nav .ico{
  width:26px;height:26px;padding:5px;border-radius:8px;stroke-width:1.9;
  background:var(--nc,var(--accent-soft));color:#fff;stroke:#fff;box-sizing:border-box;
}
html[data-theme="diamants"] aside .nav:nth-of-type(1) .ico{--nc:#111111}
html[data-theme="diamants"] aside .nav:nth-of-type(2) .ico{--nc:#3D8BFD}
html[data-theme="diamants"] aside .nav:nth-of-type(3) .ico{--nc:#C56060}
html[data-theme="diamants"] aside .nav:nth-of-type(4) .ico{--nc:#9A7FB0}
html[data-theme="diamants"] aside .nav:nth-of-type(5) .ico{--nc:#A2B568}
html[data-theme="diamants"] aside .nav:nth-of-type(6) .ico{--nc:#8CACB1}
html[data-theme="diamants"] aside .nav:nth-of-type(7) .ico{--nc:#555555}
html[data-theme="diamants"] aside .nav:nth-of-type(8) .ico{--nc:#7D9440}
html[data-theme="diamants"] aside .nav.active{background:var(--accent-soft);color:var(--ink)}
html[data-theme="diamants"] .brand{font-family:var(--hand);font-weight:400;font-size:19px;letter-spacing:0}

/* Les titres de section restent en sans : une police manuscrite sur des heures et des ratios se
 * lit mal a sept heures du matin, et cet ecran sert a decider. Seul le nom de la garderie et la
 * marque passent a la main. */
html[data-theme="diamants"] h1,
html[data-theme="diamants"] h3{font-family:inherit}

/* Le bouton Publier en bleu Apple sur un papier creme est la seule tache froide qui restait. */
html[data-theme="diamants"] .btn{background:var(--accent);border-color:var(--accent)}
html[data-theme="diamants"] .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}

/* ── L'EN-TETE SUR TELEPHONE ────────────────────────────────────────────────
 * MESURE, pas estimation: a 393x852 l'en-tete complet occupait 345 px, soit 40 % de son ecran, et
 * le tableau commençait a 1050 px de defilement. C'est exactement le defaut deja paye une fois
 * dans ce produit, quand la barre du haut mangeait 184 px de 852. Elle ouvre son telephone le
 * matin pour LIRE UN HORAIRE, donc l'en-tete garde ce qui porte la reconnaissance, le nom de la
 * garderie, et rend le reste a l'ecran: l'adresse et la regle des departs sont deja imprimees sur
 * la version bureau et sur le document qu'elle affiche au mur. */
@media (max-width:760px){
  html[data-theme="diamants"] .dhead{padding:12px 14px 10px;margin:0 0 10px}
  html[data-theme="diamants"] .dhead .dh-logo{height:30px;margin-bottom:6px}
  html[data-theme="diamants"] .dhead h2{font-size:20px;line-height:1.2;margin-bottom:4px}
  html[data-theme="diamants"] .dhead .dh-sub{font-size:12px;margin-bottom:0}
  html[data-theme="diamants"] .dhead .dh-adr,
  html[data-theme="diamants"] .dhead .dh-note{display:none}
  html[data-theme="diamants"] .dhead .dh-rule{margin-top:9px}
}