/* =====================================================================
   TECHINTERLAB – Réglages communs
   Fichiers chargés dans cet ordre par base.layout.tpl, après Bootstrap :
   0-base.css      bases communes (éléments HTML, contenu de l'administration)
   1-reglages.css  couleurs, tailles et repères communs (aucune règle d'affichage)
   2-bandeau.css   menu, menu mobile, recherche, menu « Produits »
   3-communs.css   éléments présents sur toutes les pages
   4-accueil.css   sections de la page d'accueil
   5-pages.css     pages intérieures
   6-connexion.css pages de l'espace connexion (chargé par
                   views/profil/base.layout.tpl, avec 0-base.css et ce
                   fichier seulement)
   L'ordre compte : à force égale, la règle chargée en dernier l'emporte.
   Les numéros de version (?v=…) sont ajoutés automatiquement : rien à
   modifier dans les gabarits après un changement de ces fichiers.

   Ce fichier ne contient que des variables : changer une valeur ici la
   change partout où elle est utilisée (var(--nom) dans les autres fichiers).
   Les autres fichiers n'écrivent plus aucune couleur, taille de texte ni
   arrondi en dur : pour une nouvelle valeur, l'ajouter ici d'abord.
   ===================================================================== */


:root {

    /* -----------------------------------------------------------------
       COULEURS DE LA CHARTE
       Le bleu est celui du logo ; avec le violet, il forme le dégradé des
       liserés, des traits de survol et des pastilles.
       ----------------------------------------------------------------- */
    --bleu: #19b5fe;                  /* bleu de référence (celui du logo) */
    --bleu-fonce: #0a9be0;            /* survol des liens et boutons */
    --bleu-texte: #0a8fd0;            /* texte bleu sur fond bleu clair : plus foncé pour rester lisible */
    --bleu-clair: #e6f7ff;            /* fonds bleutés (survol, pastilles) */
    --bleu-nuit: #24456b;             /* fin du dégradé du panneau « Produits » */
    --violet: #9870fc;                /* second ton du dégradé */
    --degrade: linear-gradient(90deg, var(--bleu) 0%, var(--violet) 100%);  /* liserés et traits */

    /* Textes, du plus foncé au plus clair */
    --encre: #0f1e33;                 /* titres ; aussi la teinte des ombres et des voiles sombres */
    --texte: #2c3a4d;                 /* texte courant */
    --texte-moyen: #46566b;
    --texte-doux: #5b6b80;            /* textes secondaires */
    --texte-discret: #7a8799;         /* dates, mentions, petits intitulés */
    --gris-clair: #9aa5b4;
    --gris-pale: #b3bcc8;

    /* Traits et fonds */
    --lisere: #c8ced6;                /* liseré sous le bandeau, traits verticaux */
    --bordure: #e3e8ef;               /* contours des cartes et séparateurs */
    --fond-doux: #f6f8fb;             /* fonds clairs : sections, survols, étiquettes, attente des photos */
    --blanc: #ffffff;
    --noir: #000000;


    /* -----------------------------------------------------------------
       TRANSPARENCES
       Les mêmes couleurs, écrites « rouge, vert, bleu » pour les ombres,
       voiles et reflets : rgba(var(--encre-rgb), 0.12).
       À GARDER EN ACCORD : si une couleur ci-dessus change, changer aussi
       sa version « -rgb » ci-dessous.
       ----------------------------------------------------------------- */
    --encre-rgb: 15, 30, 51;          /* = --encre : ombres et voiles sombres */
    --bleu-rgb: 25, 181, 254;         /* = --bleu */
    --violet-rgb: 152, 112, 252;      /* = --violet */
    --blanc-rgb: 255, 255, 255;       /* = --blanc : reflets et bordures sur fond sombre */
    --noir-rgb: 0, 0, 0;              /* = --noir : ombres portées du texte sur les photos */


    /* -----------------------------------------------------------------
       HORS CHARTE, EN ATTENTE DU REDESIGN
       Couleurs de l'ancien thème encore utilisées par les boutons des
       pages de connexion (6-connexion.css). À remplacer par des couleurs
       de la charte quand ces pages seront redessinées, puis à supprimer.
       ----------------------------------------------------------------- */
    --connexion-bleu-survol: #32bdfe;  /* survol du bouton d'envoi */
    --connexion-cyan: #5bc0de;         /* bouton « Retour » */
    --connexion-cyan-survol: #46b8da;


    /* -----------------------------------------------------------------
       TAILLES DE TEXTE
       Le nombre est l'équivalent en pixels pour un navigateur réglé par
       défaut (1rem = 16 px). Les valeurs en rem suivent la taille de texte
       choisie par le visiteur dans son navigateur.
       ----------------------------------------------------------------- */
    --taille-11: 0.6875rem;
    --taille-12: 0.75rem;
    --taille-13: 0.8125rem;
    --taille-14: 0.875rem;
    --taille-15: 0.9375rem;
    --taille-16: 1rem;
    --taille-17: 1.0625rem;
    --taille-18: 1.125rem;
    --taille-20: 1.25rem;
    --taille-22: 1.375rem;
    --taille-24: 1.5rem;
    --taille-28: 1.75rem;
    --taille-30: 1.875rem;
    --taille-32: 2rem;
    --taille-36: 2.25rem;


    /* -----------------------------------------------------------------
       MISE EN PAGE
       ----------------------------------------------------------------- */
    --largeur-contenu: 1240px;        /* largeur du menu et des sections */
    --arrondi: 8px;                   /* arrondi des angles, le même partout (cartes,
                                         blocs, images, boutons, champs) ; seuls les
                                         ronds (50 %) et les traits fins y échappent */
}


/* ---------------------------------------------------------------------
   POINTS DE RUPTURE (pour mémoire)
   Les variables CSS ne fonctionnent pas dans les media queries : les
   largeurs sont donc écrites en toutes lettres. Ce sont celles de Bootstrap :
      téléphones          jusqu'à 575.98px
      petites tablettes   jusqu'à 767.98px
      tablettes           jusqu'à 991.98px   (au-delà : menu complet)
      petits ordinateurs  jusqu'à 1199.98px
   et deux repères propres au bandeau : 1263.98px et 1365.98px.

   Exception voulue : max-width: 768px (image de titre, dans 3-communs.css
   et 4-accueil.css). Ces deux blocs corrigent des règles du thème d'origine,
   reprises en tête de ces deux fichiers et écrites elles-mêmes avec
   max-width: 768px ; ils doivent s'appliquer aux mêmes largeurs, 768 px
   compris (iPad en portrait). Ne les passer à 767.98px qu'avec ces règles.
   --------------------------------------------------------------------- */