/* ===================================================================
   InGeTel-BET — Charte SOMBRE · couche composants (Twenty Twenty-Five)
   -------------------------------------------------------------------
   theme.json gère palette + typo + boutons/liens par défaut.
   Ce fichier ne fait QUE styler des composants que theme.json ne couvre
   pas finement (cartes, eyebrow, chips, sections, logo sur sombre).
   Il s'appuie sur les variables de preset générées par WordPress :
     var(--wp--preset--color--<slug>)
     var(--wp--preset--font-family--<slug>)
   Aucun HTML à injecter : on cible les classes natives des blocs.
   =================================================================== */

/* ---------- Polices ----------
   DM Sans (300-700) + DM Mono SELF-HÉBERGÉES (assets/fonts/, fontFace dans
   theme.json) — aucune requête Google (RGPD). @import retiré. */

/* ---------- Alias locaux lisibles ---------- */
:root {
  --ig-bg:        var(--wp--preset--color--base);
  --ig-bg-soft:   var(--wp--preset--color--surface-soft);
  --ig-surface:   var(--wp--preset--color--surface);
  --ig-line:      var(--wp--preset--color--line);
  --ig-contrast:  var(--wp--preset--color--contrast);
  --ig-ink-700:   var(--wp--preset--color--ink-700);
  --ig-ink-500:   var(--wp--preset--color--ink-500);
  --ig-accent:    var(--wp--preset--color--accent);
  --ig-accent-tx: var(--wp--preset--color--accent-text);
  --ig-radius-lg: 14px;
  --ig-shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --ig-shadow-2:  0 10px 34px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.3);
}

/* ---------- Raffinement (plus moderne, plus fin) ----------
   Titres allégés : DM Sans 300/400 au lieu de 600. Reproduit dans
   theme.json (elements.heading) ; rappel ici pour les blocs Heading. */
.wp-block-heading, h1, h2, h3 { font-weight: 400; letter-spacing: -.025em; }
h1, .wp-block-heading.has-xx-large-font-size { font-weight: 300; letter-spacing: -.04em; }

/* ---------- Titres : text-wrap pretty + tracking ---------- */
h1,h2,h3,h4,
.wp-block-heading { text-wrap: pretty; }

/* ---------- Données chiffrées en DM Mono ----------
   Ajouter la classe "is-data" sur un bloc (réglages → CSS class) pour
   afficher chiffres/références en mono. */
.is-data, .is-style-mono { font-family: var(--wp--preset--font-family--mono) !important; }

/* ---------- Carte (Group avec classe "ig-card") ----------
   Le client applique "ig-card" à un bloc Groupe depuis l'éditeur. */
.ig-card {
  background: var(--ig-surface);
  border: 1px solid var(--ig-line);
  border-radius: var(--ig-radius-lg);
  box-shadow: var(--ig-shadow-1);
  padding: 28px;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ig-card:hover {
  border-color: color-mix(in oklab, var(--ig-line) 60%, var(--ig-contrast));
  box-shadow: var(--ig-shadow-2);
  transform: translateY(-2px);
}

/* ---------- Eyebrow (surtitre) — classe "ig-eyebrow" ---------- */
.ig-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ig-accent-tx);
}
.ig-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ig-accent);
}

/* ---------- Chip — classe "ig-chip" (contour fin) ---------- */
.ig-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ig-accent-tx) 38%, transparent);
  color: var(--ig-accent-tx);
  font: 500 12px/1 var(--wp--preset--font-family--sans);
}

/* ---------- Bouton secondaire — style de bloc "Contour" ----------
   Dans l'éditeur : bouton → style "Outline" (natif) ; on le reskinne. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ig-contrast);
  border: 1px solid var(--ig-line);
  border-radius: 999px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--ig-contrast);
}

/* ---------- Sections alternées ----------
   Le rythme se fait par la couleur de fond des blocs Groupe via la
   palette (base / surface-soft). Classe utilitaire "ig-section-soft". */
.ig-section-soft { background: var(--ig-bg-soft); }

/* Filet de séparation fin entre sections */
.ig-divider { border: 0; border-top: 1px solid var(--ig-line); margin: 0; }

/* ---------- En-tête : logo dans cartouche blanc ----------
   Le logo officiel est en couleur → sur fond sombre, l'envelopper.
   Appliquer la classe "logo-plate" au bloc Image/Logo du site. */
.logo-plate, .ig-logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 12px 18px;
}
.wp-block-site-logo.logo-plate img { display: block; }

/* Item de menu actif : soulignement vert */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a { color: var(--ig-contrast); }

/* ---------- Icônes (conteneur) — classe "ig-ico" (contour fin) ---------- */
.ig-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ig-accent-tx) 30%, transparent);
  color: var(--ig-accent-tx);
}
.ig-ico svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ---------- Champs de formulaire (sombre) ---------- */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  background: var(--ig-surface) !important;
  color: var(--ig-contrast) !important;
  border: 1px solid var(--ig-line) !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: var(--ig-ink-500) !important; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ig-accent-tx) !important; outline-offset: 1px;
}

/* ---------- Sélection texte ---------- */
::selection { background: rgba(67,203,142,.30); color: #fff; }

/* ===================================================================
   ERGONOMIE & INTERACTIONS (cf. charte — inspiration SaaS B2B)
   Tout est pilotable depuis l'éditeur via des classes CSS, sans HTML
   brut. Le scroll-reveal s'active avec le petit JS ingetel-ergo.js.
   =================================================================== */

/* ---------- 1. CTA collant « Nous contacter » ----------
   Méthode recommandée : créer un Pattern « CTA flottant » (un bloc
   Bouton dans un Groupe avec la classe "ig-sticky-cta") inséré une fois
   dans le Template (pied de page). Il flotte en bas à droite ; sur
   mobile il passe en barre pleine largeur. */
.ig-sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  margin: 0 !important;
}
.ig-sticky-cta .wp-block-button__link,
.ig-sticky-cta a {
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(45,184,122,.35);
  padding: 14px 22px;
}
@media (max-width: 600px) {
  .ig-sticky-cta { left: 16px; right: 16px; bottom: 16px; }
  .ig-sticky-cta .wp-block-button__link,
  .ig-sticky-cta a { display: block; text-align: center; }
}

/* ---------- 2. Parcours guidé « Comment ça marche » ----------
   Un bloc Liste (ou Groupe de Groupes) avec la classe "ig-flow".
   Chaque étape = un enfant direct ; on dessine le fil + les pastilles
   numérotées en CSS (compteur). Aucun HTML supplémentaire. */
.ig-flow { position: relative; padding-left: 38px; counter-reset: igflow; list-style: none; }
.ig-flow::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--ig-accent-tx), var(--ig-line));
  opacity: .6;
}
.ig-flow > * { position: relative; padding-bottom: 26px; }
.ig-flow > *::before {
  counter-increment: igflow; content: counter(igflow);
  position: absolute; left: -38px; top: 0;
  width: 27px; height: 27px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ig-accent-tx) 40%, transparent);
  background: var(--ig-bg); color: var(--ig-accent-tx);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 11px/1 var(--wp--preset--font-family--mono);
}

/* ---------- 3. Apparition au scroll ----------
   Ajouter la classe "ig-reveal" à n'importe quel bloc. Le JS retire
   "is-out" quand l'élément entre dans le viewport. Sans JS / en
   reduced-motion : le contenu est visible par défaut (pas de FOUC). */
.ig-reveal.is-out {
  opacity: 0; transform: translateY(12px);
}
.ig-reveal {
  opacity: 1; transform: none;
  transition: opacity .24s ease-out, transform .24s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ig-reveal, .ig-reveal.is-out { opacity: 1 !important; transform: none !important; }
}

/* ---------- 4. Micro-interactions ----------
   Survol lien fléché (classe "ig-arrow" sur un lien contenant ↗/→). */
.ig-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ig-accent-tx); }
.ig-arrow svg, .ig-arrow .arrow { transition: transform .18s ease; }
.ig-arrow:hover svg, .ig-arrow:hover .arrow { transform: translateX(3px); }

/* Cibles tactiles : min 44px (accessibilité) */
.wp-block-button__link, .wp-block-navigation-item a, a.ig-arrow { min-height: 44px; display: inline-flex; align-items: center; }

/* ===================================================================
   MOTIF HEXAGONAL (signature de marque — nid d'abeille)
   Ratio 1 : 1.1547, pointe en haut. Toutes les briques sont pilotables
   par classes CSS posées depuis l'éditeur — aucun HTML brut.
   =================================================================== */

/* Brique de base : appliquer "ig-hex" à un bloc Image, Groupe ou Colonne.
   Régler la taille via --hex-w (style en ligne autorisé dans l'éditeur :
   panneau Avancé n'expose pas les vars → définir des tailles utilitaires). */
.ig-hex {
  --hex-w: 104px;
  width: var(--hex-w); height: calc(var(--hex-w) * 1.1547);
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}
.ig-hex img { width: 100%; height: 100%; object-fit: cover; }
/* tuile photo teintée (voile vert de marque) */
.ig-hex.is-tinted::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ig-accent) 52%, transparent);
}
.ig-hex.is-solid { background: var(--ig-accent); color: #06120D; }
.ig-hex .ig-hex__label { position: relative; z-index: 1; color:#fff; font: 500 13px/1.2 var(--wp--preset--font-family--sans); text-align:center; }

/* tailles utilitaires */
.ig-hex--sm { --hex-w: 64px; } .ig-hex--md { --hex-w: 104px; } .ig-hex--lg { --hex-w: 124px; }

/* conteneur d'icône hexagonal à fil fin (hairline) */
.ig-hexbox {
  --hex-w: 56px;
  width: var(--hex-w); height: calc(var(--hex-w) * 1.1547);
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--ig-accent-tx);
}
.ig-hexbox::before, .ig-hexbox::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ig-hexbox::before { background: color-mix(in oklab, var(--ig-accent-tx) 42%, transparent); }
.ig-hexbox::after  { inset: 1.5px; background: var(--ig-surface); }
.ig-hexbox > * { position: relative; z-index: 1; }

/* Grille nid d'abeille : un Groupe "ig-honeycomb" contenant des rangées
   "ig-hexrow" (la 2e en "ig-hexrow--offset"). Les rangées se chevauchent. */
.ig-honeycomb { --hex-w: 120px; display: flex; flex-direction: column; align-items: flex-start; }
.ig-hexrow { display: flex; gap: 10px; }
.ig-hexrow + .ig-hexrow { margin-top: calc(var(--hex-w) * 1.1547 * -0.25 + 10px); }
.ig-hexrow--offset { margin-left: calc(var(--hex-w) / 2 + 5px); }
.ig-honeycomb .ig-hex { --hex-w: 120px; transition: transform .18s ease; }
.ig-honeycomb .ig-hex:hover { transform: scale(1.04); }

/* Boutons d'action flottants hexagonaux (tél / mail) — Pattern à insérer
   une fois dans le template. Pile fixe en bas à droite. */
.ig-fabs { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.ig-fab {
  --hex-w: 56px; width: var(--hex-w); height: calc(var(--hex-w) * 1.1547);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ig-accent); color: #06120D;
  box-shadow: 0 8px 22px rgba(45,184,122,.32); transition: transform .15s;
}
.ig-fab:hover { transform: translateY(-2px) scale(1.03); }
.ig-fab.is-ghost { background: var(--ig-surface); color: var(--ig-accent-tx); box-shadow: var(--ig-shadow-1); }
@media (max-width: 600px) { .ig-fabs { right: 14px; bottom: 14px; } }

/* ===================================================================
   MENU HAMBURGER (overlay plein écran)
   TT5 fournit le bloc Navigation natif avec un menu "off-canvas"
   responsive. Ces règles reskinnent l'overlay natif aux couleurs de
   marque + nav numérotée. Forcer l'overlay à TOUTES les tailles :
   réglage du bloc Navigation → « Toujours afficher l'icône de menu ».
   =================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
  background: color-mix(in oklab, var(--ig-bg-deep, #070B0C) 94%, transparent) !important;
  backdrop-filter: blur(14px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  font: 300 clamp(21px, 3.4vw, 29px)/1 var(--wp--preset--font-family--sans);
  letter-spacing: -.03em; color: var(--ig-contrast);
  padding: 14px 0; border-bottom: 1px solid var(--ig-line);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
  color: var(--ig-accent-tx);
}
/* bouton hamburger (déclencheur) aux couleurs de marque */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--ig-contrast) !important; }
/* (numérotation auto retirée — pas de "01/02…" devant les items) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::before { content: none !important; }

/* ===================================================================
   ÉCO-ÉNERGIE
   Fond sombre par défaut (moins d'émission lumineuse sur écrans OLED).
   En IMPRESSION, repasser sur fond clair pour économiser l'encre.
   =================================================================== */
@media print {
  body { background: #fff !important; color: #111 !important; }
  h1,h2,h3,h4 { color: #0F1517 !important; }
}

/* ===================================================================
   INTÉGRATION INGETEL (ajouts non couverts par le handoff)
   =================================================================== */

/* En-tête STICKY + compact — porter le sticky sur le WRAPPER du
   template-part (enfant direct de .wp-site-blocks), pas le groupe interne.
   PAS de backdrop-filter ici : cela piégerait le menu overlay (fixed). */
.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
}
.ig-header {
  border-bottom: 1px solid var(--ig-line);
  background: var(--wp--preset--color--base) !important;
}
.ig-header .wp-block-site-logo.logo-plate { padding: 8px 12px; }

/* Icône hamburger personnalisée : 4 barres, les extrêmes plus larges
   que les 2 du milieu. On masque le SVG natif et on dessine au CSS. */
.wp-block-navigation__responsive-container-open svg { display: none !important; }
.wp-block-navigation__responsive-container-open {
  width: 30px; height: 20px; padding: 0;
  background-color: transparent;
  color: var(--ig-contrast);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 30px 2px, 18px 2px, 18px 2px, 30px 2px;   /* extrêmes 30px, milieu 18px */
  background-position: center 0, center 6px, center 12px, center 18px;
}

/* Boutons Fluent Forms alignés sur l'accent charte (pill, texte sombre). */
.fluentform .ff-btn-submit,
.frm-fluent-form .ff-btn-submit,
.fluentform button[type="submit"] {
  background: var(--ig-accent) !important;
  color: #0E1517 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 22px !important;
  font: 500 14px/1 var(--wp--preset--font-family--sans) !important;
  transition: background .15s, transform .12s;
}
.fluentform .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--ig-accent-tx) !important; transform: translateY(-1px);
}

/* --- Grille de projets (page Références + CPT projet) --- */
.ig-projets .wp-block-post-template { gap: 20px; }
.ig-projets .wp-block-post-template > li {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px; overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.ig-projets .wp-block-post-template > li:hover {
  transform: translateY(-3px); border-color: var(--wp--preset--color--accent);
}
.ig-projet-thumb { margin: 0; }
.ig-projet-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ig-projets .wp-block-post-title { margin: 12px 14px 16px; }
.ig-projets .wp-block-post-title a {
  color: var(--wp--preset--color--contrast); text-decoration: none;
  font: 400 15px/1.3 var(--wp--preset--font-family--sans); letter-spacing: -.01em;
}
.ig-projets .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-text); }

/* --- Badge Qualiopi (page Formation) --- */
.ig-qualiopi { margin: 8px 0 24px; }
.ig-qualiopi img { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ig-qualiopi a { display: inline-block; transition: transform .15s ease; }
.ig-qualiopi a:hover { transform: translateY(-2px); }