/* =========================================================================
   SEEMI ISOLANTS — THÈME
   Toutes les couleurs, polices, rayons, ombres et espacements du site.
   Pour re-thémer le site, il suffit en général de changer les 2 premières
   variables (--brand-primary et --brand-accent) : tout le reste en découle
   grâce à color-mix().
   ========================================================================= */

/* --- Polices hébergées sur le site (assets/fonts/, sous-ensemble latin) -----
   Plus aucun appel à Google Fonts (performance + RGPD).
   Inter Tight est une police variable : un seul fichier (téléchargé une fois)
   couvre toutes les graisses de 100 à 900, y compris les intermédiaires.
   Les 2 fichiers critiques sont préchargés dans le <head> de chaque page. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900; /* police variable : toutes les graisses, y compris intermédiaires (470…) */
  font-display: swap;
  src: url("../assets/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Couleurs de marque (prises sur le logo) ------------------------- */
  --brand-primary: #4A6994;   /* bleu de marque : base des titres, liens, surfaces fortes */
  --brand-accent: #FC7414;    /* orange de marque : accents et boutons d'action (avec parcimonie) */

  /* --- Fond et texte de base ------------------------------------------- */
  --color-bg: #FFFFFF;        /* fond principal des pages */
  --color-text: #16202E;      /* couleur du texte courant */

  /* --- Couleurs dérivées (ne pas modifier sauf besoin précis) ---------- */
  --color-primary: var(--brand-primary);                                       /* bleu de marque : en-tête, icônes, liens */
  --color-primary-dark: color-mix(in srgb, var(--brand-primary) 45%, #050A14); /* bleu marine profond : bandeaux, pied de page */
  --color-primary-deep: color-mix(in srgb, var(--brand-primary) 30%, #03060C); /* marine encore plus sombre : survols sur fond marine */
  --color-primary-ink: color-mix(in srgb, var(--brand-primary) 62%, #0A1220);  /* bleu lisible pour titres sur fond clair (contraste AA) */
  --color-primary-soft: color-mix(in srgb, var(--brand-primary) 9%, var(--color-bg));  /* teinte bleutée très claire : pastilles, fonds d'icônes */
  --color-accent: var(--brand-accent);                                         /* orange : traits d'accent, puces */
  --color-accent-strong: color-mix(in srgb, var(--brand-accent) 60%, #3A1500); /* orange foncé : boutons (texte blanc lisible) */
  --color-accent-hover: color-mix(in srgb, var(--brand-accent) 55%, #2A0F00);  /* orange au survol des boutons */
  --color-accent-soft: color-mix(in srgb, var(--brand-accent) 10%, var(--color-bg));   /* orange très clair : fonds de notes */

  --color-surface: color-mix(in srgb, var(--brand-primary) 10%, var(--color-bg));     /* gris-bleu : sections alternées (bien distinct du blanc) */
  --color-surface-2: color-mix(in srgb, var(--brand-primary) 14%, var(--color-bg));   /* gris-bleu : cartes, champs */
  --color-line: color-mix(in srgb, var(--brand-primary) 18%, var(--color-bg));        /* filets fins (bordures, séparateurs) */
  --color-line-strong: color-mix(in srgb, var(--brand-primary) 34%, var(--color-bg)); /* filets plus marqués */
  --color-text-muted: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));     /* texte secondaire (contraste AA) */
  --color-text-faint: color-mix(in srgb, var(--color-text) 64%, var(--color-bg));     /* micro-libellés */

  --color-on-dark: #FFFFFF;                                                     /* texte sur fond marine */
  --color-on-dark-muted: color-mix(in srgb, #FFFFFF 74%, var(--color-primary-dark)); /* texte secondaire sur fond marine */
  --color-on-dark-line: color-mix(in srgb, #FFFFFF 16%, var(--color-primary-dark));  /* filets sur fond marine */
  --color-on-dark-grid: color-mix(in srgb, #FFFFFF 7%, var(--color-primary-dark)); /* quadrillage discret des bandeaux marine */
  --color-on-accent: #FFFFFF;                                                   /* texte des boutons orange */
  --color-white: #FFFFFF;                                                       /* blanc pur (fonds des photos détourées) */
  --color-overlay: color-mix(in srgb, var(--color-primary-deep) 72%, transparent); /* voile sur les photos */
  --color-focus: var(--brand-accent);                                           /* contour de focus clavier */

  /* --- Typographie ----------------------------------------------------- */
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* police principale */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;       /* petits libellés techniques */
  --fs-base: 1rem;            /* taille du texte courant */
  --fs-small: 0.875rem;       /* petits textes */
  --fs-micro: 0.8rem;         /* micro-libellés en monospace (≈ 13 px) */
  --fs-h1: clamp(2.1rem, 3.7vw, 3.5rem);   /* grand titre d'accueil */
  --fs-h2: clamp(1.75rem, 3.2vw, 2.6rem);  /* titres de section */
  --fs-h3: 1.2rem;            /* titres de cartes */
  --lh-base: 1.65;            /* interligne du texte */
  --fw-bold: 700;             /* graisse des titres */
  --fw-body: 470;             /* graisse du texte courant (police variable) */

  /* --- Formes ---------------------------------------------------------- */
  --radius-sm: 2px;           /* petits éléments (boutons, champs) */
  --radius-md: 4px;           /* cartes */
  --radius-lg: 6px;           /* grands blocs */
  --radius-tile: 14px;        /* tuiles arrondies (valeurs, secteurs) */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 8%, transparent);    /* ombre légère */
  --shadow-md: 0 8px 28px -12px color-mix(in srgb, var(--color-primary-dark) 28%, transparent); /* ombre de survol */

  /* --- Espacements et mise en page ------------------------------------- */
  --space: 8px;               /* unité d'espacement de base (tout est multiple) */
  --container: 1240px;        /* largeur maximale du contenu */
  --gutter: clamp(16px, 4vw, 40px);        /* marge latérale */
  --section-y: clamp(44px, 5.5vw, 80px);   /* espacement vertical des sections */
  --header-h: 72px;           /* hauteur de l'en-tête */
}