/* ============================================================================
   SOCLE GRAPHIQUE CAMÉLÉON CONSEILS
   Source unique de la police, de la palette et du traitement de la marque,
   destinée à être servie à l'identique par cameva.fr, cameleonconseils.fr et
   alexandre-righini.fr.

   CE QUE CE FICHIER PORTE, ET CE QU'IL NE PORTE PAS
   Il porte ce qui doit être identique partout : la police, les couleurs, la
   façon d'écrire le nom. Il ne porte pas les mises en page, qui n'ont aucune
   raison d'être les mêmes : une page produit et une page de conseil ne se
   construisent pas pareil. Mettre les mises en page ici reviendrait à ne plus
   pouvoir toucher un site sans toucher les trois.

   MISE À JOUR
   Ce fichier est la version de référence. Il se recopie tel quel dans les
   trois sites ; il ne se modifie jamais dans un site en particulier, sinon
   les trois divergent et l'intérêt disparaît.

   Version 1 — 28/10/2026
   ========================================================================= */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-variable.woff2') format('woff2');
}

:root{
  /* --- jetons communs, repris de la palette CAMEVA V6 ------------------- */
  --nuit:#0E1C2C;          /* fonds sombres, titres sur fond clair */
  --nuit-profond:#081422;  /* en-tête, bandeaux pleine largeur */
  --nuit2:#152838;
  --cyan:#2196D4;          /* accent sur fond clair */
  --cyan-vif:#33C8FF;      /* accent sur fond sombre : le cyan normal y manque
                              de contraste pour du petit texte */
  --ambre:#D9891F;         /* appel à l'action */
  --teal:#1FA88A;
  --rouge:#C2453A;
  --encre:#0E1C2C;
  --doux:#5D6B7D;          /* texte secondaire */
  --faible:#93A1B1;
  --fond:#F2F6F9;
  --blanc:#FFFFFF;
  --trait:#E4EBF1;

  /* --- alias historiques du site maintenance ----------------------------
     Conservés pour que la refonte ne casse pas les centaines d'usages
     existants. Ils pointent sur les jetons communs : changer un jeton
     change les trois sites, comme demandé. */
  --navy:var(--nuit);
  --deep:var(--nuit-profond);
  --orange:var(--ambre);
  --ink:var(--encre);
  --muted:var(--doux);
  --line:var(--trait);
  --pale:var(--fond);
  --white:var(--blanc);
}

body{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,
    'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Interlettrage négatif sur les titres : c'est ce qui donne à CAMEVA son
   allure, bien plus que la taille des caractères. */
h1{letter-spacing:-.028em;font-weight:700}
h2{letter-spacing:-.025em;font-weight:700}
h3{letter-spacing:-.014em;font-weight:650;line-height:1.35}

/* --- la marque, écrite de la même façon sur les trois sites -------------- */
.marque,.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  flex-shrink:0;line-height:1}
.marque__signe,.brand img{width:40px;height:40px;flex:none}
.marque__nom{display:block;font-weight:700;font-size:1.12rem;
  letter-spacing:-.03em;line-height:1}
.marque__tag{display:block;font-size:.62rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faible);margin-top:4px}
header .marque__nom{color:var(--nuit)}
footer .marque__nom{color:#fff}
footer .marque__tag{color:#6D839A}
@media(max-width:620px){
  .marque__signe,.brand img{width:34px;height:34px}
  .marque__nom{font-size:1rem}
  .marque__tag{font-size:.56rem}
}

/* --- l'en-tete ne doit jamais deborder --------------------------------
   Entre la bascule du menu mobile et le grand ecran, la place manque. On
   retire d'abord la ligne de specialite de l'en-tete, ou elle fait doublon
   avec le menu, puis on resserre le nom. Le pied, qui a toute la largeur,
   garde les deux lignes. */
@media(max-width:1100px){
  header .marque__tag{display:none}
  header .marque__nom{font-size:1.04rem}
}
@media(max-width:900px){
  header .marque__nom{font-size:.98rem}
  .marque__signe,.brand img{width:36px;height:36px}
}

/* Dans le pied, la colonne est etroite et « MAINTENANCE INDUSTRIELLE » se
   coupait en deux lignes sous le nom, ce qui se lit mal. On resserre
   l'interlettrage juste assez pour que la ligne tienne, sans toucher a
   l'en-tete ou la place ne manque pas. */
footer .marque__tag{letter-spacing:.06em;font-size:.58rem;white-space:nowrap}