/* ════════════════════════════════════════════════════════════════
   CHARTE GRAPHIQUE — « Le point de connexion »
   D'apres la proposition 1 de la planche d'identite.

   Nuit profonde pour l'autorite, orange pour le mouvement et la
   chaleur, gris clair et bleu-gris en appui. Univers de cercles et
   d'arcs : les angles sont plus doux que sur la charte precedente.

   Seul fichier a modifier pour changer l'identite du site.
   Utilise par index.html ET admin.html.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── couleurs de marque ──
     Les noms « slate » et « brass » viennent de la charte
     precedente. Ils sont conserves pour ne pas avoir a reecrire
     les quatre feuilles de style : seules les valeurs changent. */

  --slate:#16294C;          /* nuit : titres, header, pied de page */
  --slate-soft:#26406B;
  --slate-deep:#0E1C36;

  --brass:#B8480F;          /* orange LISIBLE en petit texte (5.6:1) */
  --brass-bright:#EC6A32;   /* orange vif : filets, points, aplats */
  --brass-pale:#FDF1E9;     /* fond du bloc « offert » */
  --brass-line:#F6DAC6;

  --brass-on-dark:#F59460;  /* orange eclairci, lisible sur la nuit */
  --brass-titre:#DE5A22;    /* orange des grands titres : plus vif que
                               l'orange de petit texte, et largement
                               au-dessus du seuil a cette taille */

  --bleu-gris:#A3BDD4;      /* bleu-gris de la planche, en appui */

  /* ── boutons pleins ──
     L'orange vif de la planche ne passe pas le seuil de lisibilite
     avec du texte blanc (3,0:1). On garde donc un orange un cran
     plus profond pour les aplats de bouton : 4,6:1, conforme, et
     l'ecart visuel avec l'orange de marque reste imperceptible. */
  --btn:#C44E18;            /* blanc dessus : 4,7:1 — conforme */
  --btn-hover:#A83F11;
  --btn-ink:#FFFFFF;

  /* ── fonds et textes ── */
  --paper:#EDF0F5;          /* gris clair : fond de page et blocs
                               alternes. Remplace l'ancien creme :
                               plus de beige nulle part. */
  --surface:#FFFFFF;        /* cartes, formulaires */
  --surface-alt:#F6F8FB;
  --ink:#16294C;            /* texte principal */
  --muted:#5B6B7E;          /* texte secondaire, gris bleute */
  --rule:#DDE3EA;           /* filets, gris froids */
  --rule-strong:#C1C9D3;
  --placeholder:#E3E8EE;    /* cadre des portraits sans photo */
  --focus:#D2541C;

  /* ── couleurs de statut (dashboard) ──
     Volontairement distinctes de l'orange de marque : elles
     portent une information, pas l'identite. */
  --ok:#1F6B4A;      --ok-bg:#E8F3ED;
  --warn:#8A6410;    --warn-bg:#FBF3E0;
  --alert:#9B2C2C;   --alert-bg:#F9EAEA;
  --info:#2A5F8F;    --info-bg:#E9F1F8;

  /* ── portrait des cartes ──
     4/5 d'origine, hauteur reduite de 25% : 4/3.75 = 16/15.
     Les photos sont toujours produites en 480x600, le cadrage
     « cover » se charge du reste. */
  --portrait-ratio:16/15;

  /* ── rayons ──
     Univers de cercles et d'arcs : on arrondit davantage que la
     charte precedente, sans jamais aller jusqu'a la pilule. */
  --r-sm:5px; --r-md:8px; --r-lg:14px;

  /* ── typographie ──
     Manrope, comme sur la planche : SemiBold pour les titres,
     Regular pour les textes. Une seule famille.
     Le serif ne sert qu'a une chose : les phrases que les
     professionnels ecrivent a la premiere personne. */
  --sans:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* ── rythme ── */
  --gut:24px;
  --sec-y:clamp(64px,8vw,104px);
  --header-h:72px;
}