/* ─────────────────────────────────────────────────────────────────────────────
   Feuille propre au site — FLEC (ZwcSDGJywzFF)

   Servie par inc/css.php?p=site, APRÈS maincss (voir __commonv3/_css.php).
   Elle ne fait que ce que cfg.site.php ne sait pas faire : les couleurs restent
   dans cfg.site.php, onglet Paramètres généraux.

   Principe (cadrage du 2026-09-25) : le site garde l'âme du RWS. On applique de
   la charte FLEC (C:\Claude\flec\README.md) ce qui passe par peu de CSS :
   la police Exo 2, les formes nettes (rayon 8 px, pas de pilule), les couleurs
   des trois pôles, les styles « label » et « tech ». Plus les deux conflits du
   socle déjà rencontrés chez JRMV (accent foncé + texte foncé, TODO §2 bis).

   ⚠️ L'@import DOIT RESTER LA PREMIÈRE INSTRUCTION. Placé plus bas, il est
   ignoré sans message, et le site retombe sur les polices du socle.
   ⚠️ Un url() relatif se résout depuis inc/ : écrire « url("../img/…") ».
   ⚠️ Ce fichier est lu, jamais exécuté : aucun PHP n'y a d'effet.
   ───────────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400..800;1,700..800&display=swap");

/* ─── Police — une seule famille, Exo 2 (charte) ─────────────────────────────── */
:root {
  --default-font: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --heading-font: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --nav-font: "Exo 2", "Segoe UI", system-ui, sans-serif;
}

/* ─── Les trois pôles ─────────────────────────────────────────────────────────
   Posée sur un conteneur (une page, une étiquette), la classe redéfinit l'ACCENT
   pour tout ce qu'il contient : boutons, liens et pictogrammes du RWS prennent la
   couleur du pôle, puisque maincss.php les dessine avec var(--accent-color).
   Valeurs du thème clair de la charte ; texte blanc dessus ≥ 5:1.
   ⚠️ Charte : une couleur de pôle n'apparaît JAMAIS sans le nom du pôle. */
.flec-pole-informatique { --accent-color: #0A64C2; }
.flec-pole-audiovideo   { --accent-color: #C2410C; }
.flec-pole-web          { --accent-color: #0B7A5C; }

/* ─── Étiquette de pôle — style « label » de la charte ─────────────────────── */
.flec-etiquette {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  background-color: var(--accent-color);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Style « tech » — références, marques, noms de domaine, adresses ─────── */
.flec-tech {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* ─── Bouton d'action — pages et fragments ────────────────────────────────────
   maincss.php ne dessine « .btn-primary » que dans .hero et .pricing : ailleurs
   il sortirait en bleu Bootstrap. Accent + contraste, style « label », rayon
   8 px. Survol : accent assombri de 8 %, texte inchangé (charte). */
.flec-btn {
  display: inline-block;
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--contrast-color);
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-family: var(--nav-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.flec-btn:hover,
.flec-btn:focus {
  background-color: color-mix(in srgb, var(--accent-color), black 8%);
  border-color: color-mix(in srgb, var(--accent-color), black 8%);
  color: var(--contrast-color);
}
.flec-btn-contour {
  background-color: transparent;
  color: var(--accent-color);
}
.flec-btn-contour:hover,
.flec-btn-contour:focus {
  color: var(--contrast-color);
}

/* ─── Pictogramme dans un carré teinté — formes nettes, pas de disque ──────── */
.flec-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 8px;
  font-size: 1.6rem;
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
}

/* ─── Bandeau « Nos autres métiers » en bas des pages ─────────────────────── */
.flec-poles a { color: var(--default-color); text-decoration: none; }
.flec-poles .flec-pastille { color: var(--contrast-color); background-color: var(--accent-color); }
.flec-poles a:hover .flec-pastille,
.flec-poles a:focus .flec-pastille { background-color: color-mix(in srgb, var(--accent-color), black 8%); }

/* ─── Cartes « réalisations » (fragment html1) ────────────────────────────── */
.flec-reference {
  background-color: var(--surface-color);
  color: var(--default-color);
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.flec-reference:hover,
.flec-reference:focus {
  color: var(--default-color);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06), 0 4px 12px rgba(13, 27, 46, 0.12) !important;
}
.flec-reference h3 { color: var(--heading-color); }
.flec-reference img { aspect-ratio: 8 / 5; object-fit: cover; }

/* ─── Formes nettes sur les boutons du thème ──────────────────────────────────
   Le thème dessine ses boutons en pilule (50px) ; la charte réserve la pilule aux
   pastilles de statut. Rayon 8 px, rien d'autre ne change. */
.header .btn-getstarted,
.hero .btn-primary,
.call-to-action-2 .cta-btn { border-radius: 8px; }

/* ─── Anneau de focus — charte : 2 px plein, décalé de 2 px ────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ─── « Contraste » dans les cartes — même correctif que JRMV ─────────────────
   maincss.php emploie --contrast-color pour DEUX choses opposées : le texte posé
   SUR L'ACCENT (boutons), et le texte des cartes posées SUR LES SURFACES CLAIRES
   (services, cards, faq, testimonials). L'accent #0A64C2 étant foncé, le
   contraste doit être blanc — et ces cartes sortiraient blanc sur blanc.
   Dans ces quatre sections, le contraste reprend donc la couleur des titres.
   ⚠️ Même spécificité que .light-background, posée sur le même élément : c'est
   l'ordre de chargement qui décide, d'où ce fichier APRÈS maincss.
   ⚠️ À retirer le jour où le socle séparera les deux usages (TODO §2 bis). */
.services,
.features-cards,
.faq,
.testimonials { --contrast-color: var(--heading-color); }

/* ─── Titre du carrousel — même correctif que JRMV ────────────────────────────
   maincss.php impose « .intro-slider h2 { color: var(--default-color) !important } »
   — ici l'encre #0D1B2E, posée sur une PHOTO. Le titre reprend --contrast-color
   (#FFFFFF à la racine). !important obligatoire pour passer devant celui du socle.
   ⚠️ Lisibilité à remesurer avec les vraies photos (voile rgba 0.45). */
.intro-slider h2 { color: var(--contrast-color) !important; }