/* ==========================================================================
   ETALL — Variables du thème
   Toutes les couleurs, tailles et espacements du site sont définis ICI,
   une seule fois. Pour changer une couleur sur tout le site, il suffit de
   modifier la ligne correspondante dans ce fichier.
   ========================================================================== */

:root {

  /* --- Couleurs bleues (base : le bleu du logo ETALL, légèrement assombri) - */
  --bleu-primaire: #0031d1;   /* boutons, titres, navbar : la couleur principale */
  --bleu-profond:  #00259c;   /* bandeaux pleine largeur, pied de page, survols */
  --bleu-nuit:     #001a6e;   /* dégradés les plus sombres */
  --bleu-logo:     #003bfb;   /* le bleu exact du logo : accents, filets, focus */
  --bleu-clair:    #e9eeff;   /* fonds de cartes et de sections */
  --bleu-brume:    #f5f7ff;   /* fond de section très léger */

  /* --- Neutres ------------------------------------------------------------ */
  --blanc:         #ffffff;
  --encre:         #101731;   /* texte courant */
  --encre-douce:   #4b5473;   /* texte secondaire, légendes */
  --bordure:       #dce3f7;   /* filets et contours de cartes */
  --bordure-forte: #93a4d8;   /* quadrillage des tableaux, bien visible */

  /* --- Vert clair de la marque WhatsApp : pastille flottante et halo ------ */
  --whatsapp:        #25d366;
  --whatsapp-fonce:  #1da851;

  /* --- Vert d'écriture WhatsApp -------------------------------------------
     Le vert du logo (#25d366) est trop clair pour porter du texte : blanc
     dessus, on tombe à 2,3:1, illisible. Ce vert-ci passe à 4,95:1, aussi
     bien en texte vert sur blanc qu'en texte blanc sur fond vert. C'est lui
     qui sert dès qu'il y a des MOTS ; le vert clair reste au logo. */
  --vert-whatsapp:        #12813f;
  --vert-whatsapp-fonce:  #0d6531;
  --vert-brume:           #eef8f1;

  /* --- Ombres (teintées de bleu pour rester dans le thème) --------------- */
  --ombre-fine:   0 1px 2px rgba(0, 38, 156, .06),
                  0 2px 6px rgba(0, 38, 156, .06);
  --ombre-carte:  0 2px 4px rgba(0, 38, 156, .06),
                  0 8px 24px rgba(0, 38, 156, .09);
  --ombre-levee:  0 6px 12px rgba(0, 38, 156, .10),
                  0 18px 40px rgba(0, 38, 156, .16);
  --ombre-modale: 0 24px 70px rgba(0, 26, 110, .35);

  /* --- Rayons ------------------------------------------------------------- */
  --rayon-xs:  6px;
  --rayon-sm:  10px;
  --rayon-md:  16px;
  --rayon-lg:  22px;
  --rayon-pilule: 999px;

  /* --- Typographie -------------------------------------------------------- */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Tailles fluides : la valeur s'adapte entre mobile et grand écran.
     Le minimum du texte courant est 16 px, jamais moins (règle 7). */
  --t-xs:   0.8125rem;                                    /* 13 px — mentions  */
  --t-sm:   0.9375rem;                                    /* 15 px — légendes  */
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);     /* 16 → 17 px        */
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19 px        */
  --t-lg:   clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem); /* 19 → 22 px        */
  --t-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.875rem);  /* 22 → 30 px        */
  --t-2xl:  clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);     /* 28 → 44 px        */
  --t-3xl:  clamp(2rem, 1.55rem + 2.1vw, 3.5rem);         /* 32 → 56 px        */

  --graisse-normale: 400;
  --graisse-moyenne: 600;
  --graisse-forte:   800;

  --interligne-titre: 1.15;
  --interligne-texte: 1.65;

  /* --- Espacements -------------------------------------------------------- */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  80px;
  --e-10: 104px;

  /* Rythme vertical des sections : plus serré sur mobile, plus aéré sur PC */
  --section-y: clamp(3rem, 2rem + 5vw, 6.5rem);

  /* --- Mise en page ------------------------------------------------------- */
  --largeur-max: 1200px;
  --largeur-texte: 68ch;      /* longueur de ligne confortable à la lecture */
  --marge-laterale: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --hauteur-navbar: 68px;

  /* --- Transitions -------------------------------------------------------- */
  --transition-rapide: 160ms cubic-bezier(.4, 0, .2, 1);
  --transition-douce:  280ms cubic-bezier(.4, 0, .2, 1);
  --transition-lente:  520ms cubic-bezier(.22, .61, .36, 1);

  /* --- Plans (z-index) : rassemblés pour éviter les conflits -------------- */
  --plan-navbar:    100;
  --plan-flottant:  200;
  --plan-modale:    300;
}

/* Le menu horizontal complet demande environ 1035 px de large (logo + 5 entrées
   + bouton WhatsApp). En dessous de 1200 px on garde donc le hamburger :
   c'est ce qui garantit qu'aucune largeur de vérification ne déborde. */
@media (min-width: 1200px) {
  :root {
    --hauteur-navbar: 78px;
  }
}