/* =========================================
   VARIABLES GLOBALES — i-nanot
   =========================================
   > Les 4 variables suivantes sont injectées par Elementor :
     --e-global-color-primary
     --e-global-color-secondary
     --e-global-color-text
     --e-global-color-accent
   > Les suivantes sont personnalisées ici (non gérées par Elementor)
     mais respectent la même nomenclature.
   ========================================= */
:root {
  --e-global-color-blue-soft: #335180;
  --e-global-color-white: #ffffff;
  --e-global-color-grey-soft: #f4f4f4;
}

/* =========================================
   STRUCTURE GLOBALE – i-nanot
   ========================================= */
body.i-nanot {
  color: var(--e-global-color-text, #2C2C2C);
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

body.i-nanot a {
  color: var(--e-global-color-primary);
  text-decoration: none;
}

body.i-nanot a:hover {
  color: var(--e-global-color-accent);
}

/* =========================================
   TITRES GÉNÉRIQUES
   ========================================= */

/* === H1 standard (point accent normal) === */
body.i-nanot h1,
body.i-nanot .acf-title--h1 {
  position: relative;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  font-size: clamp(52px, 7vw, 90px);
  color: var(--e-global-color-white, #ffffff);
}

/* Accent par défaut (point rouge + cercle fin) */
body.i-nanot h1::after,
body.i-nanot .acf-title--h1::after {
  content: "";
  display: inline-block;
  width: 0.30em;
  height: 0.30em;
  margin-left: 0.1em;
  position: relative;
  border: 1px solid var(--e-global-color-accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--e-global-color-accent) 38%, transparent 40%);
}

/* === Variante H1-mini (réduction ~25%) === */
body.i-nanot h1.h1-mini,
body.i-nanot .acf-title--h1.h1-mini {
  font-size: clamp(39px, 5.25vw, 67.5px); /* ≈ 75% de la taille du H1 standard */
  line-height: 1.1;
}

/* Accent légèrement réduit pour la version mini */
body.i-nanot h1.h1-mini::after,
body.i-nanot .acf-title--h1.h1-mini::after {
  width: 0.26em;   /* réduit mais reste bien visible */
  height: 0.26em;
  margin-left: 0.11em;
}


/* === H2 === */
body.i-nanot h2, body.i-nanot .acf-title--h2 { 
    font-family: "Montserrat", system-ui, sans-serif; 
    font-weight: 700; 
    line-height: 1.22 !important; 
    margin-bottom: 0.15em !important; /* ou 0.1em si tu veux encore plus serré */ 
    font-size: clamp(36px, 4.2vw, 60px); 
    color: var(--e-global-color-primary); text-transform: uppercase; 
} 

/* Accentuation spécifique i-nanot (H2 uniquement) */ 
body.i-nanot h2 span.accent { 
    display: inline-block; 
    background-color: var(--e-global-color-blue-soft); 
    color: var(--e-global-color-white, #ffffff); 
    padding: 0 0.15em; 
    border-radius: 0px; 
    line-height: 1;   
}

/* === H3 (rectangle accent systématique) === */
body.i-nanot h3,
body.i-nanot .acf-title--h3 {
  position: relative;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  font-size: 36px;
  color: var(--e-global-color-blue-soft);
  padding-left: 1.8em;
}

/* Rectangle rouge à gauche (intégré par défaut) */
body.i-nanot h3::before,
body.i-nanot .acf-title--h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.2em;
  height: 0.5em;
  background: var(--e-global-color-accent);
  border-radius: 0px;
}

/* Variante : désactive le rectangle si besoin */
body.i-nanot h3.no-rect::before,
body.i-nanot .acf-title--h3.no-rect::before {
  content: none;
  display: none;
}
/* Supprime aussi le padding gauche quand on retire le rectangle */
body.i-nanot h3.no-rect,
body.i-nanot .acf-title--h3.no-rect {
  padding-left: 0 !important;
}

/* Neutralise les rectangles sur les titres h3 de Complianz */
summary.cmplz-service-header h3::before {
    content: none !important;
    display: none !important;
}
summary.cmplz-service-header h3 {
    padding-left: 0 !important;
}

/* Neutraliser le gras, l’italique et le souligné dans les H3 */
body.i-nanot h3 b,
body.i-nanot h3 strong {
    font-weight: inherit;
}

body.i-nanot h3 i,
body.i-nanot h3 em {
    font-style: normal;
}

body.i-nanot h3 u {
    text-decoration: none;
}

/* === H4 === */
body.i-nanot h4,
body.i-nanot .acf-title--h4 {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  font-size: 24px;
  color: var(--e-global-color-blue-soft);
}


/* Surbrillance (mot dans H2, H3, etc.) */
body.i-nanot .highlight {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-white, #ffffff);
  padding: 0.05em 0.25em;
  border-radius: 0em;
}

/* === Paragraphes === */
body.i-nanot p,
body.i-nanot .acf-text {
  margin: 0 0 1.1em;
}

/* =========================
   VARIANTES MINI (vignettes)
   ========================= */

/* Titre niveau 3 compact */
body.i-nanot .h3-mini {
  font-family: "Montserrat", system-ui, sans-serif  !important;
  font-weight: 600  !important;
  font-size: 20px  !important;
  line-height: 1.2  !important;
  color: var(--e-global-color-blue-soft)  !important;
  margin-bottom: 0.5em  !important;
  padding-left: 0em !important;
}
/* Supprime le rectangle décoratif sur les variantes mini */
body.i-nanot .h3-mini::before,
body.i-nanot .acf-title--h3.h3-mini::before {
  content: none !important;
  display: none !important;
}

/* Titre niveau 4 compact */
body.i-nanot .h4-mini {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--e-global-color-blue-soft);
  margin-bottom: 0.4em;
}

/* Paragraphe compact */
body.i-nanot .p-mini {
  font-size: 15px;
  line-height: 1.3;
  color: var(--e-global-color-text);
  margin-bottom: 0.8em;
}

/* ==================================================
   IMAGE DANS VIGNETTES ACTUALITÉ / WP / EQUIPEMENT - EFFET ROLLOVER
   ================================================== */
/* Conteneur global qui reçoit la trame + le recadrage */
body.i-nanot .image-en-BG {
  position: relative;
  overflow: hidden;
  height: 220px; /* Hauteur fixe de la zone image */
}

/* Widget image interne (Elementor) */
body.i-nanot .image-en-BG .img-bg-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Image réelle : recadrage + zoom */
/* Sélecteur renforcé pour passer devant .elementor img */
body.i-nanot .image-en-BG .img-bg-vignette img {
  display: block;
  width: 100%;
  height: 100% !important;   /* écrase height:auto d’Elementor */
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  transition: transform 0.6s ease, filter 0.4s ease;
}

/* Effet zoom arrière au survol de la carte */
body.i-nanot .card:hover .image-en-BG .img-bg-vignette img {
  transform: scale(1);
}

/* Trame PNG par-dessus l'image */
body.i-nanot .image-en-BG::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2025/10/Vignette-actu-Trame.png');
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
  transform: scale(1);
  transition: transform 0.6s ease;
}

/* Zoom léger de la trame PNG au survol */
body.i-nanot .card:hover .image-en-BG::after {
  transform: scale(1.05);
}

/* =========================================
   Texte blanc forcé (compatible ACF, Elementor et variantes mini)
   Projet : i-nanot
   ========================================= */

/* Cas 1 : classe posée directement sur un élément */
body.i-nanot h1.custom-white,
body.i-nanot h2.custom-white,
body.i-nanot h3.custom-white,
body.i-nanot h4.custom-white,
body.i-nanot h5.custom-white,
body.i-nanot h6.custom-white,
body.i-nanot p.custom-white,
body.i-nanot span.custom-white,
body.i-nanot div.custom-white,
body.i-nanot .h1-mini.custom-white,
body.i-nanot .h2-mini.custom-white,
body.i-nanot .h3-mini.custom-white,
body.i-nanot .h4-mini.custom-white,
body.i-nanot .p-mini.custom-white,
body.i-nanot .elementor-widget-heading.custom-white .elementor-heading-title,
body.i-nanot .elementor-widget-text-editor.custom-white p,
body.i-nanot .elementor-widget-text-editor.custom-white h1,
body.i-nanot .elementor-widget-text-editor.custom-white h2,
body.i-nanot .elementor-widget-text-editor.custom-white h3,
body.i-nanot .elementor-widget-text-editor.custom-white h4,
body.i-nanot .elementor-widget-text-editor.custom-white h5,
body.i-nanot .elementor-widget-text-editor.custom-white h6 {
  color: var(--e-global-color-white, #ffffff) !important;
}

/* Cas 2 : classe posée sur un conteneur parent (colonne, shortcode, wrapper ACF, etc.) */
body.i-nanot .custom-white h1,
body.i-nanot .custom-white h2,
body.i-nanot .custom-white h3,
body.i-nanot .custom-white h4,
body.i-nanot .custom-white h5,
body.i-nanot .custom-white h6,
body.i-nanot .custom-white p,
body.i-nanot .custom-white span,
body.i-nanot .custom-white div {
  color: var(--e-global-color-white, #ffffff) !important;
}

/* Cas 3 : compatibilité spécifique avec Elementor Shortcode / ACF */
.elementor-shortcode.custom-white,
.elementor-shortcode.custom-white h1,
.elementor-shortcode.custom-white h2,
.elementor-shortcode.custom-white h3,
.elementor-shortcode.custom-white h4,
.elementor-shortcode.custom-white h5,
.elementor-shortcode.custom-white h6,
.elementor-shortcode.custom-white p,
.elementor-shortcode.custom-white span,
.elementor-shortcode.custom-white div,
.elementor-shortcode .custom-white,
.elementor-shortcode .custom-white h1,
.elementor-shortcode .custom-white h2,
.elementor-shortcode .custom-white h3,
.elementor-shortcode .custom-white h4,
.elementor-shortcode .custom-white h5,
.elementor-shortcode .custom-white h6,
.elementor-shortcode .custom-white p,
.elementor-shortcode .custom-white span,
.elementor-shortcode .custom-white div {
  color: var(--e-global-color-white, #ffffff) !important;
}



/* =========================================
   TITRE SECTION DYNAMIQUE (fond blanc ou gris)
   ========================================= */
body.i-nanot .h2-highlight-white,
body.i-nanot .h2-highlight-grey {
  position: relative;
  display: inline;
  padding: 0.1em 0.5em;
  line-height: 1.50;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 0em;
}

body.i-nanot .h2-highlight-white {
  background: var(--e-global-color-white, #ffffff);
}

body.i-nanot .h2-highlight-grey {
  background: var(--e-global-color-grey-soft); /* gris clair */
}

/* =========================================
   🔘 BOUTON GÉNÉRIQUE — i-nanot (.btn)
   ========================================= */

body.i-nanot .btn {
  display: inline-block;
  background-color: var(--e-global-color-blue-soft); /* bleu doux */
  color: var(--e-global-color-white, #fff);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 999px; /* arrondi complet */
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

body.i-nanot .btn:hover,
body.i-nanot .btn:focus {
  background-color: var(--e-global-color-accent, #EE3220);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

body.i-nanot .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*   🔘 Compatibilité Gutenberg — Boutons i-nanot */

body.i-nanot .wp-block-button__link {
  display: inline-block;
  background-color: var(--e-global-color-blue-soft);
  color: var(--e-global-color-white, #fff);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  letter-spacing: 0.5px;
  cursor: pointer;
}

body.i-nanot .wp-block-button__link:hover,
body.i-nanot .wp-block-button__link:focus {
  background-color: var(--e-global-color-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

body.i-nanot .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



/* =========================================
   SECTION I-NANOT — STRUCTURE + EFFET VISUEL
   ========================================= */
body.i-nanot .i-nanot-bg {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Image de fond inversée (calque bas) */
body.i-nanot .i-nanot-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(var(--invert-amount, 0)) brightness(1.1) contrast(1);
  transition: filter 0.4s linear;
  z-index: 0;
}

/* Overlay bleu au-dessus */
body.i-nanot .i-nanot-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--e-global-color-blue-soft) 100%, transparent);   
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* Contenu (titre, texte, bouton) */
body.i-nanot .i-nanot-bg .i-nanot-content {
  position: relative;
  z-index: 2;
  color: var(--e-global-color-white, #ffffff);
}

/* =========================================================
   🟦 i-nanot-bg-blue — Version bleue à fusion "multiply"
   ---------------------------------------------------------
   - À utiliser sur un conteneur Elementor avec image dynamique
   - Applique un voile bleu doux en mélange multiply
   - Compatible avec toutes les images ACF ou "à la une"
   ========================================================= */
body.i-nanot .i-nanot-bg-blue {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* évite les interférences avec les overlays Elementor */
}

body.i-nanot .i-nanot-bg-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--e-global-color-blue-soft, #335180);
  mix-blend-mode: multiply;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   🧩 i-nanot — Bloc texte superposé sur image
   --------------------------------------------------------- */
body.i-nanot .over-bg-card {
  position: relative;
  padding: 60px;
  color: #fff;
  z-index: 1;
  isolation: isolate; /* ✅ évite les conflits d’animation Elementor */
  overflow: hidden;   /* ✅ protège la couche floutée si on arrondit */
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

/* ✅ Couche réelle de flou + voile foncé */
body.i-nanot .over-bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 55, 0.35); /* bleu profond semi-transparent */
  z-index: -1;
  border-radius: 0; /* adaptable si tu veux adoucir plus tard */
}

/* 🟦 Titre */
body.i-nanot .over-bg-card .over-bg-title {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
}

/* 🟨 Texte */
body.i-nanot .over-bg-card .over-bg-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 24px;
}



/* =========================================== */
/* Floaty Box – Zones contextuelles flottantes */
/* =========================================== */

body.i-nanot .floaty-box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 260px;
  margin-left: auto;
  gap: 0.5em;
}

/* ----- Titre standard (fond clair, texte bleu) ----- */
body.i-nanot .floaty-box .floaty-title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #3a6ed8);
  background: rgba(255, 255, 255, 0.9);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 1px 4px;
  display: inline;
  white-space: normal;
}

/* ----- Texte contextuel standard ----- */
body.i-nanot .floaty-box .floaty-text {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #fff;
  opacity: 0.9;
  max-width: 220px;
  text-align: right;
}

/* =========================================================
   🌐 i-nanot — Hover global sur les cartes (.card)
   ---------------------------------------------------------
   - Étend le survol global aux enfants (widgets Elementor)
   - Déclenche aussi les effets de survol sur :
       .image-en-BG (fond animé)
       .etiquette (bandeau haut, fond coloré, etc.)
   ========================================================= */

/* 1️⃣ Propagation générale du hover à tous les éléments internes */
body.i-nanot .card:hover .elementor-element,
body.i-nanot .card:hover .elementor-widget-container {
  pointer-events: auto !important;
}

/* Cas particulier : conteneur avec image de fond Elementor */
body.i-nanot .card:hover .image-en-BG {
  background-size: 100% !important; /* déclenche l'état "Au survol" Elementor */
}

/* hover global de la vignette */
body.i-nanot .card:hover .etiquette {
  background-color: var(--e-global-color-accent) !important;
  color: var(--e-global-color-white, #fff) !important;
}

/* Titre de l'étiquette de la carte */
body.i-nanot .card .etiquette .titre-etiquette {
  font-weight: 700;
  text-align: right;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0px;
}

/* Empêche la trame PNG de passer au-dessus du bandeau-titre */
body.i-nanot .etiquette {
    position: relative !important;
    z-index: 5 !important; /* devant la trame (z-index:2) */
}

/* ============================================
   🤝 i-nanot — Logos Partenaires par Work Package
   ============================================ */

body.i-nanot .liste-logos-wp {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 32px;
}

body.i-nanot .liste-logos-wp .logo-partenaire {
  flex: 0 1 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  transition: transform 0.2s ease;
}

body.i-nanot .liste-logos-wp .logo-partenaire img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

body.i-nanot .liste-logos-wp .logo-partenaire:hover img {
  transform: scale(1.04);
}

/* ==================================================
/* EQUIPEMENT
   ================================================== */

/* BLOC FABRICANT */
body.i-nanot .nom-fabricant {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: var(--e-global-color-blue-soft, #284b63);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ==================================================
   VIGNETTE PARTENAIRE — LOGO + ZOOM FLUIDE
   ================================================== */
body.i-nanot .vignette-partenaire {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Logo du partenaire */
body.i-nanot .vignette-partenaire .logo-partenaire img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transform: scale(1.05);
  transition: transform 0.6s cubic-bezier(0.25, 1.25, 0.5, 1);
  will-change: transform;
}

/* Effet au survol — zoom arrière fluide */
body.i-nanot .vignette-partenaire:hover .logo-partenaire img {
  transform: scale(1);
}


/* ==================================================
   CAROUSEL LOGOS PARTENAIRE
   ================================================== */

/* Logo du partenaire dans le carousel */
body.i-nanot .logo-carousel-partenaire img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ==================================================
   PAGE PARTENAIRE - LOGOS EN ENTÊTE
   ================================================== */

/* Logo du partenaire */
body.i-nanot .logo-page-partenaire img {
  max-height: 120px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* =========================================================
   🧭 i-nanot — Fil d’Ariane
   ---------------------------------------------------------
   Style clair, lisible, compatible avec fond blanc ou clair
   Couleurs : bleu doux et accent au survol
   Typo : Montserrat (harmonisée au reste du site)
   ========================================================= */
body.i-nanot .fil-ariane {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: rgba(10, 30, 55, 0.7); /* bleu-gris doux */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  line-height: 1.4;
}

/* Liens du fil */
body.i-nanot .fil-ariane a {
  color: var(--e-global-color-blue-soft, #284b63);
  text-decoration: none;
  transition: color 0.3s ease;
}

body.i-nanot .fil-ariane a:hover {
  color: var(--e-global-color-accent, #EE3220);
}

/* Séparateur (chevron ou slash) */
body.i-nanot .fil-ariane a::after {
  content: "›";
  margin: 0 0.35em;
  color: var(--e-global-color-blue-soft, #284b63);
  font-size: 1em;
}

/* Cache le chevron sur le dernier élément */
body.i-nanot .fil-ariane span::before {
  content: "›";
  margin: 0 0.35em;
  color: var(--e-global-color-blue-soft, #284b63);
  display: none;
}

/* Élément actif (page courante) */
body.i-nanot .fil-ariane span {
  color: var(--e-global-color-accent, #EE3220);
  font-weight: 600;
}

/* Optionnel : légère marge basse pour respiration */
body.i-nanot .fil-ariane {
  margin-bottom: 10px;
}

/* =========================================================
   🤝 i-nanot — Listes de partenaires / consortiums
   ---------------------------------------------------------
   Une fonction PHP se charge de récupérer les champs Relation ACF
   et de les présenter sous forme de liste ou de blocs individuels.
   Ce style s’adapte automatiquement selon le HTML généré :
   - <ul><li>...</li></ul> (via [acf_relation_liste])
   - <div class="acf-item">...</div> (via [acf_relation_directe])
   --------------------------------------------------------- */
/* =========================================================
   🤝 i-nanot — Listes de partenaires / consortiums
   ========================================================= */

body.i-nanot .liste-partners {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--e-global-color-text); /* Couleur par défaut → texte global */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Élément individuel (gère <li> et .acf-item) */
body.i-nanot .liste-partners li,
body.i-nanot .liste-partners .acf-item {
  position: relative;
  padding-left: 18px;
}

/* Pastille rouge à gauche */
body.i-nanot .liste-partners li::before,
body.i-nanot .liste-partners .acf-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.70em;
  width: 8px;
  height: 4px;
  background: var(--e-global-color-accent, #EE3220);
}

/* 🔵 Liens actifs = bleu */
body.i-nanot .liste-partners a {
  color: var(--e-global-color-blue-soft, #284b63);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* 🔥 Hover = rouge */
body.i-nanot .liste-partners a:hover {
  color: var(--e-global-color-accent);
}

/* ⚫ Éléments sans lien = couleur texte globale */
body.i-nanot .liste-partners li:not(:has(a)),
body.i-nanot .liste-partners .acf-item:not(:has(a)) {
  color: var(--e-global-color-text);
}



/* ============================================
   👥 i-nanot — Fiches Membre
   ============================================ */

/*
 * 1) Conteneur FLEX FLUIDE
 *    → s’empile si colonne étroite
 *    → passe en ligne si la largeur le permet
 */
body.i-nanot .liste-membres-wp,
body.i-nanot .liste-membres-consortium {
  display: flex;
  flex-wrap: wrap;          /* permet de passer en ligne si possible */
  gap: 20px 40px;           /* spacing horizontal/vertical */
  align-items: flex-start;  /* évite les décalages verticaux */
  justify-content: flex-start;
}

/*
 * 2) Carte flexible
 *    - Minimum = 280px (ou ajustable)
 *    - Maximum = 100% si espace réduit
 *    - AUCUN FILET
 */
body.i-nanot .id-card-vertical {
  flex: 0 1 280px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  min-height: 120px;
  gap: 14px;
  padding: 12px 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  transition: transform 0.2s ease;
}

/* Comportement hover */
body.i-nanot .id-card-vertical:hover {
  transform: translateY(-2px);
}

/* PHOTO */
body.i-nanot .id-card-vertical .id-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.i-nanot .id-card-vertical .id-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(100%);
  transition: filter 0.3s;
}

body.i-nanot .id-card-vertical:hover .id-photo img {
  filter: none;
}

/* INFOS */
body.i-nanot .id-card-vertical .id-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

body.i-nanot .id-card-vertical .id-name {
  font-weight: 600;
  color: var(--e-global-color-blue-dark, #24324A);
}

body.i-nanot .id-card-vertical .id-role {
  font-size: 14px;
  color: var(--e-global-color-blue-soft, #3c5672);
}

body.i-nanot .id-card-vertical .id-entreprise {
  font-size: 13.5px;
  color: #777;
}

body.i-nanot .id-card-vertical .id-email a {
  font-size: 13.5px;
  color: var(--e-global-color-accent, #EE3220);
  white-space: nowrap; /* On empêche le passage à la ligne forcé */
  overflow-wrap: normal;
  word-break: normal;
}

/* ✂️ Abréviation automatique des emails trop longs (cartes membres) */
body.i-nanot .id-card-vertical .id-email a {
  display: inline-block;
  max-width: 180px;        /* Ajuste si besoin */
  white-space: nowrap;     /* Empêche le retour à la ligne */
  overflow: hidden;        /* Cache le surplus */
  text-overflow: ellipsis; /* Ajoute "…" automatiquement */
  vertical-align: middle;
}


/* =========================================================
   📱 i-nanot — RESPONSIVE DESIGN
   ---------------------------------------------------------
   Points de rupture basés sur les réglages Elementor :
   - Mobile : max-width 767px
   - Tablette : min-width 768px et max-width 1024px
   - Desktop : min-width 1025px
   ---------------------------------------------------------
   Structure :
   1️⃣ TABLETTE (entre 768px et 1024px)
   2️⃣ MOBILE (en dessous de 767px)
   --------------------------------------------------------- */


/* =======================================
   1️⃣ TABLETTE — Adaptations spécifiques
   ======================================= */
@media (max-width: 1024px) and (min-width: 768px) {

  body.i-nanot h1,
  body.i-nanot .acf-title--h1 {
    font-size: clamp(42px, 6vw, 70px);
  }

  body.i-nanot h2,
  body.i-nanot .acf-title--h2 {
    font-size: clamp(28px, 3.8vw, 45px);
  }

  body.i-nanot .floaty-box {
    max-width: 200px;
  }

  /* Exemple : resserrer les listes partenaires */
  body.i-nanot .liste-partners {
    font-size: 14px;
    gap: 4px;
  }

  body.i-nanot h3,
  body.i-nanot .acf-title--h3 {
    font-size: 30px;
    padding-left: 1.6em; /* un peu moins large */
  }

  body.i-nanot h3::before,
  body.i-nanot .acf-title--h3::before {
    width: 1em;
    height: 0.45em;
    top: 0.38em; /* recadrage visuel */
  }
}

/* =======================================
   2️⃣ MOBILE — Adaptations spécifiques
   ======================================= */
@media (max-width: 767px) {

  body.i-nanot h1,
  body.i-nanot .acf-title--h1 {
    font-size: clamp(32px, 8vw, 52px);
  }

  body.i-nanot h2,
  body.i-nanot .acf-title--h2 {
    font-size: clamp(24px, 6vw, 40px);
  }

  body.i-nanot h3,
  body.i-nanot .acf-title--h3 {
    font-size: 24px;
    padding-left: 1.5em;
  }

  /* Listes partenaires plus lisibles */
  body.i-nanot .liste-partners {
    font-size: 14px;
    gap: 3px;
  }
  body.i-nanot .liste-partners li,
  body.i-nanot .liste-partners .acf-item {
    padding-left: 14px;
  }
  body.i-nanot .liste-partners li::before,
  body.i-nanot .liste-partners .acf-item::before {
    top: 0.5em;
    width: 5px;
    height: 5px;
  }
  body.i-nanot h1.h1-mini,
  body.i-nanot .acf-title--h1.h1-mini {
    font-size: clamp(29px, 4vw, 50px);
    line-height: 1.1;
  }

  body.i-nanot h1.h1-mini::after,
  body.i-nanot .acf-title--h1.h1-mini::after {
    width: 0.22em;
    height: 0.22em;
    margin-left: 0.10em;
  }

  body.i-nanot .fil-ariane {
    font-size: 12px;
    gap: 0.35em;
    line-height: 1.2;
  }
}







/* =========================================
   FORMULAIRE DE CONTACT — i-nanot
   ========================================= */

/* Structure générale */
body.i-nanot .inanot-form {
  max-width: 900px;
  margin: 0 auto;
}

/* Groupes en deux colonnes */
body.i-nanot .inanot-form .row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

body.i-nanot .inanot-form .row-inline p {
  flex: 1 1 calc(50% - 10px);
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
}

/* Champs standards */
body.i-nanot .inanot-form p {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
}

/* Label latéral (champs normaux) */
body.i-nanot .inanot-form label {
  background-color: var(--e-global-color-secondary);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  min-width: 130px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin: 0;
}

/* Champs */
body.i-nanot .inanot-form input[type="text"],
body.i-nanot .inanot-form input[type="email"],
body.i-nanot .inanot-form textarea {
  flex: 1;
  border: 1px solid rgba(0,0,0,0.1);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  font-size: 16px;
  color: var(--e-global-color-text, #2C2C2C);
  background: var(--e-global-color-white);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

/* Focus */
body.i-nanot .inanot-form input:focus,
body.i-nanot .inanot-form textarea:focus {
  border-color: var(--e-global-color-secondary);
  box-shadow: 0 0 0 3px rgba(51, 81, 128, 0.15);
  outline: none;
}

/* ================================
   TEXTAREA — Label centré au-dessus
   ================================ */
body.i-nanot .inanot-form p:has(textarea) {
  display: block;
  text-align: center;
  margin-bottom: 24px;
}

body.i-nanot .inanot-form p:has(textarea) label {
  display: inline-block;
  margin-bottom: 6px;
  background: none;
  color: var(--e-global-color-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
  pointer-events: none;
}

/* Zone de saisie */
body.i-nanot .inanot-form textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 14px 18px;
  resize: vertical;
  background: var(--e-global-color-white);
  box-sizing: border-box;
}

/* =========================================
   CONTACT - BOUTON du formulaire
   ========================================= */
body.i-nanot .inanot-form .submit-wrap {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 20px 0 0 0 !important;
}

body.i-nanot .inanot-form p:has(input[type="submit"]) {
  display: block !important;
  width: 100%;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.i-nanot .inanot-form input[type="submit"] {
  display: inline-block !important;
  margin: 0 auto !important;
  float: none !important;
}

/* =========================================
   CF7 Spinner — neutralisation d’alignement
   ========================================= */
body.i-nanot .inanot-form .wpcf7-spinner {
  position: absolute !important;
  right: 50%;
  transform: translateX(50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-block;
}

/* Optionnel : réduire ou adapter son apparence */
body.i-nanot .inanot-form .wpcf7-spinner::before {
  width: 18px;
  height: 18px;
}


/* =========================================
   CONTACT - MESSAGES (erreurs & succès)
   ========================================= */

/* Cache les erreurs locales sous les champs */
body.i-nanot .wpcf7-not-valid-tip {
  display: none !important;
}

/* Message d’erreur global (validation échouée) */
body.i-nanot .inanot-form .wpcf7-response-output.wpcf7-validation-errors {
  background: #fff7e5; /* ton plus doux, proche du beige clair */
  border: 1px solid #e3b23c;
  color: #7a4c00;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  margin: 15px auto 0;
  max-width: 600px;
  box-sizing: border-box;
}

/* Message de succès */
body.i-nanot .inanot-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #e9f9ec;
  border: 1px solid #6ac97a;
  color: #256833;
}

/* =========================================
   OPACITÉ DYNAMIQUE DES LABELS — i-nanot
   ========================================= */

/* Labels par défaut : légèrement atténués */
body.i-nanot .inanot-form label {
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

/* Quand un champ est actif (focus), son label passe à 100% */
body.i-nanot .inanot-form input:focus + label,
body.i-nanot .inanot-form textarea:focus + label,
body.i-nanot .inanot-form p:has(input:focus) label,
body.i-nanot .inanot-form p:has(textarea:focus) label {
  opacity: 1;
}

/* =========================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ========================================= */
@media (max-width: 1024px) {

  /* Neutralise les retours à la ligne invisibles dans les <p> */
  body.i-nanot .inanot-form p {
    font-size: 0; /* supprime la largeur des text-nodes */
  }

  body.i-nanot .inanot-form p > * {
    font-size: initial; /* rétablit la taille de police normale pour les enfants */
  }

  /* Permet au champ de prendre toute la largeur restante */
  body.i-nanot .inanot-form p > span.wpcf7-form-control-wrap {
    flex: 1 1 auto;
    width: 100%;
  }
}

  /* Labels plus compacts sur tablette */
  body.i-nanot .inanot-form label {
    min-width: 90px;    /* ← au lieu de 130px */
    padding: 0 14px;    /* ← réduit le padding horizontal */
    font-size: 13px;    /* ← tu l’as déjà mais on confirme */
  }

/* =========================================
   RESPONSIVE — MOBILE (≤ 768px)
   ========================================= */
@media (max-width: 768px) {

  /* Une seule colonne */
  body.i-nanot .inanot-form .row-inline {
    flex-direction: column;
    gap: 18px;
  }

  body.i-nanot .inanot-form .row-inline p {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Structure verticale */
  body.i-nanot .inanot-form p {
    flex-direction: column;
    margin-bottom: 18px;
  }

  /* Label au-dessus */
  body.i-nanot .inanot-form label {
    display: block;
    width: 100%;
    background-color: var(--e-global-color-secondary);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    border-radius: 6px 6px 0 0;
  }

  /* Champs en-dessous du label */
  body.i-nanot .inanot-form input:not([type="submit"]),
  body.i-nanot .inanot-form textarea {
    border-radius: 0 0 6px 6px !important;
    border-left: 1px solid rgba(0,0,0,0.12);
    border-top: none;
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
  }

  /* Hauteur du textarea */
  body.i-nanot .inanot-form textarea {
    min-height: 140px;
  }

  /* Label du textarea */
  body.i-nanot .inanot-form p:has(textarea) label {
    background-color: var(--e-global-color-secondary) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    border-radius: 6px 6px 0 0 !important;
    text-align: left;
  }

  /* Bouton centré (style global conservé) */
  body.i-nanot .inanot-form p:has(input[type="submit"]) {
    text-align: center;
    margin-top: 20px;
  }
}

/* =========================================
   LIGNE DE CONSENTEMENT RGPD — i-nanot
   ========================================= */

body.i-nanot .inanot-form .consent-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 10px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--e-global-color-text);
  opacity: 0.8; /* même discrétion que tes labels */
}

/* Checkbox */
body.i-nanot .inanot-form .consent-line input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  flex-shrink: 0;
}

/* Lien Politique de confidentialité */
body.i-nanot .inanot-form .consent-line a {
  color: var(--e-global-color-secondary);
  text-decoration: underline;
}

body.i-nanot .inanot-form .consent-line a:hover {
  opacity: 1;
  text-decoration: none;
}

body.i-nanot .inanot-form .consent-line .wpcf7-list-item-label {
  margin-left: 8px; /* ajustable : 6–10px selon ton goût */
  display: inline-block;
}

/* Mobile : empiler proprement */
@media (max-width: 768px) {
  body.i-nanot .inanot-form .consent-line {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
  }

  body.i-nanot .inanot-form .consent-line input[type="checkbox"] {
    margin-top: 2px;
  }
}
/* Neutralise les styles "label" sur la ligne de consentement */
body.i-nanot .inanot-form .consent-line label,
body.i-nanot .inanot-form .consent-line .wpcf7-list-item-label {
  background: none !important;
  color: var(--e-global-color-text) !important;
  padding: 0 !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}






/* ==============================
   FILTRE DE TAXONOMIES ACCUEIL ACTUALITES
   ============================== */

.post-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  justify-content: center;
  margin-bottom: 2em;
}

.post-filter .filter-link {
  font-size: 0.9em; /* légèrement plus petit que <p> */
  color: var(--e-global-color-secondary);
  text-decoration: none;
  border: 1px solid var(--e-global-color-secondary);
  padding: 0.35em 0.9em;
  border-radius: 4px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  line-height: 1.4;
}

.post-filter .filter-link:hover {
  background: var(--e-global-color-blue-soft);
  color: #fff;
  border-color: var(--e-global-color-blue-soft);
  /* pas de font-weight ici */
}

.post-filter .filter-link.active {
  background: var(--e-global-color-blue-soft);
  color: #fff;
  border-color: var(--e-global-color-blue-soft);
  font-weight: 600; /* ✅ gras uniquement sur l’actif */
}