/*
Theme Name: LIZIWEB - Theme enfant Divi
Description: Theme enfant du theme Divi. Vous pouvez desormais le personnaliser sans risquer de perdre vos modifications
Author: LIZIWEB
Author URI: https://liziweb.com
Template: Divi
Version: 1.0
*/


/* ------- FONTS -----------*/

h1 {
  font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

h2 {
	font-size:35px;
	font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
	font-weight: bold;
}
h3 {
	font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
	font-size:30px;
	padding-bottom:20px;
}

p {
    line-height: 1.3em;
}




/* -------- Header et sticky menu --------------*/

/* Aligne tous les items du menu sur le même axe vertical (Divi centered) */

/* Force alignement vertical propre pour tous les items */
.et_pb_menu .et-menu {
    align-items: center;
}
.et_pb_menu--style-centered .et-menu.nav > li {
  display: flex;
  align-items: center;
}
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-bottom: 8px;
    padding-top: 8px;
}

/* Et les liens aussi */
.et_pb_menu--style-centered .et-menu.nav > li > a {
  display: flex;
  align-items: center;
}
/* Aligner le menu à droite */
.et_pb_menu--style-centered .et_pb_menu__wrap {
    justify-content: flex-end !important;
}

/* Sécurité : alignement du nav */
.et_pb_menu--style-centered .et-menu.nav {
    justify-content: flex-end !important;
}

/* ÉTAT NORMAL : section transparente */
.header-menu-nn{
  background: transparent !important;
}

/* EN STICKY : fond noir sur toute la section */
.header-menu-nn.et_pb_sticky{
  background-color: #000 !important;
}

/* EN STICKY : cacher la 1ère ligne */
.header-menu-nn.et_pb_sticky .menu-top-nn{
  display: none !important;
}

/* EN STICKY : s'assurer que la 2e ligne reste visible */
.header-menu-nn.et_pb_sticky .menu-sticky-nn{
  display: flex;
  background: transparent !important;
}
.header-menu-nn{
  transition: background-color 0.3s ease;
}
/* appliquer le dégradé au background du sticky menu*/

.et_pb_section.et_pb_section_0_tb_header.header-menu-nn.et_pb_sticky_module.et_pb_with_background.et_section_regular.et_pb_section--with-menu.et_pb_sticky.et_pb_sticky--top,
.et_pb_section.et_pb_section_0_tb_header.header-menu-nn.et_pb_sticky_module.et_pb_with_background.et_section_regular.et_pb_section--with-menu.et_pb_sticky.et_pb_sticky--top:before {

  background: 
    /* Vert – bas droit */
    linear-gradient(
      315deg,
      rgba(21,208,155,1) 0%,
      rgba(21,208,155,0.7) 18%,
      rgba(21,208,155,0) 78%
    ),
    /* Mauve – haut droit */
    linear-gradient(
      225deg,
      rgba(185,156,246,1) 0%,
      rgba(185,156,246,1) 50%,
      rgba(185,156,246,0) 90%
    ),
    /* Rose – gauche */
    linear-gradient(
      90deg,
      rgba(250,77,120,1) 0%,
      rgba(250,77,120,1) 10%,
      rgba(250,77,120,0) 52%
    ) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* modifier la fleche vers le bas par une icone maison*/
/* Supprimer l’icône Divi par défaut */
.et_pb_menu .menu-item-has-children > a:after {
  content: "" !important;
  font-family: none !important;
}

/* Ajouter ton SVG */
.et_pb_menu .menu-item-has-children > a {
  position: relative;
  padding-right: 25px !important; /* espace pour l’icône */
}

.et_pb_menu .menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);

  width: 14px;
  height: 14px;

  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/contact-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.et_pb_menu .menu-item-has-children > a::after {
    margin-top: 15px;
}

/* -------- modification sous menus ------*/
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
    background-color: #b69bdb !important;
    border-color: RGBA(255, 255, 255, 0);
}

/* ===== ITEM BOUTON ADHERER ===== */

/* Bouton Adhérer */

.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer {
  align-self: center;
}
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a {
  background: #fff;
  color: #BE99F2 !important;
  font-weight: 700;
  padding: 10px 40px 10px 18px !important; /* espace pour l'icône */
  border-radius: 6px;
  position: relative;
  transition: 0.3s ease;
  line-height: 1 !important; /* évite les différences de baseline */
  height: auto;              /* laisse Divi gérer la hauteur */

}

/* Icône SVG */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/fleche-mauve.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.3s ease;
}

/* Hover */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:hover {
  background: #BE99F2;
  color: #ffffff !important;
}

/* Animation icône */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:hover::after {
  transform: translateY(-50%) translateX(3px);
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/icon-fleche-apres.svg");
}
/* Empêche l'effet "filtre" Divi au hover (opacité / overlay) */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a,
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:hover {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Si Divi ajoute un overlay via pseudo-élément */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:before,
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:after {
  box-shadow: none !important;
}

/* Important: on garde TON icône sur ::after (donc on neutralise seulement si Divi a un overlay sur :before) */
.et_pb_menu--style-centered .et-menu.nav > li.menu-adherer > a:before {
  content: none !important;
}

/* Menu responsive */








/* -------- HERO -------------*/

/* css en attente pour désactiver des parties du menu*/
.none {
	display:none!important;
}

/* hero remonte sous le header*/
.et_pb_section.fond-hero-nn{
  margin-top: -230px;      /* ajuste selon hauteur header + submenu */
  padding-top: 230px;      /* même valeur pour ne pas cacher ton contenu */
  position: relative;
  z-index: 1;
}
/* header toujours au dessus*/
#main-header,
#top-header{
  position: relative;
  z-index: 9999;
  background: transparent !important;
}

/* style du sur menu cyber - intranet - icones rs */
.header-right {
  display: flex;
  align-items: center;        /* alignement vertical parfait */
  justify-content: flex-end;  /* tout à droite */
  gap: 18px;                  /* espace entre blocs */
}
.cyberattaque-menu,
.intranet-menu {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* évite le retour à la ligne */
}

.cyberattaque-menu a,
.intranet-menu a {
  text-decoration: none;
  font-weight: 600;
}
.cyberattaque-menu,
.intranet-menu {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* évite le retour à la ligne */
}

.cyberattaque-menu a,
.intranet-menu a {
  text-decoration: none;
  font-weight: 600;
}
.rs-header-icon ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-header-icon ul li a {
  display: flex;
  align-items: center;
}
.rs-header-icon img {
  transition: transform 0.2s ease;
}

.rs-header-icon img:hover {
  transform: scale(1.1);
}
.cyberattaque-menu a {
  display: inline-flex;
  align-items: flex-start;
  background-color: #FC4C77;
  color: white;
  padding: 10px 20px 6px 20px;       
  line-height: 1;  
  margin: 0;
  border-radius: 0 0 10px 10px;
  font-weight: normal;
  text-decoration: none;
}
.intranet-menu a {
  display: inline-flex;
  align-items: flex-start;
  background-color: none;
  color: white;
  padding: 10px 20px 6px 20px;       
  line-height: 1;  
  margin: 0;
  border-radius: 0 0 10px 10px;
  font-weight: normal;
  text-decoration: none;
}

/* fond du header en dégradé sur la home page */
.et_pb_section.fond-hero-nn{
  background-color: #fb4c77;
  background-image:
    url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/carte-fond-normandie.svg"),

    /* Vert – bas droit */
    linear-gradient(
      315deg,
      rgba(21,208,155,1) 0%,
      rgba(21,208,155,0.7) 18%,
      rgba(21,208,155,0) 78%
    ),

    /* Mauve – haut droit */
    linear-gradient(
      225deg,
      rgba(185,156,246,1) 0%,
      rgba(185,156,246,1) 50%,
      rgba(185,156,246,0) 90%
    ),

    /* Rose – gauche */
    linear-gradient(
      90deg,
      rgba(250,77,120,1) 0%,
      rgba(250,77,120,1) 10%,
      rgba(250,77,120,0) 52%
    )
  ;

  /* 1 valeur par couche (SVG + 3 gradients) */
  background-size:
    597px 474px,
    cover,
    cover,
    cover;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    center,
    center,
    center,
    center;
}
/* ----------------------------------------- */
/* -------- PAGES ET ARTICLES -------------- */
/* ----------------------------------------- */

/* remonter le hero sous le menu*/
.et_pb_section.fond-hero-nn-pages-article{
  /* remonte la section sous le header */
  margin-top: -180px;

  /* compense pour que le contenu reste visible */
  padding-top: 180px;

  /* sécurité */
  padding-bottom: 0;
}

/* fond du hero sur toutes les autres pages */

.et_pb_section.fond-hero-nn-pages-article{
  background-color: #fb4c77;

  background-image:
    /* Vert – bas droit */
    linear-gradient(
      315deg,
      rgba(21,208,155,1) 0%,
      rgba(21,208,155,0.7) 18%,
      rgba(21,208,155,0) 78%
    ),

    /* Mauve – haut droit */
    linear-gradient(
      225deg,
      rgba(185,156,246,1) 0%,
      rgba(185,156,246,1) 50%,
      rgba(185,156,246,0) 90%
    ),

    /* Rose – gauche */
    linear-gradient(
      90deg,
      rgba(250,77,120,1) 0%,
      rgba(250,77,120,1) 10%,
      rgba(250,77,120,0) 52%
    );

  /* 1 valeur par gradient */
  background-size:
    cover,
    cover,
    cover;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    center,
    center,
    center;
}

/* fil ariane */
.fil-ariane a, .fil-ariane {
	color:white!important;
	font-size: 13px;
	padding-bottom:20px;
}


/* titre hero dans cadre blanc */
.titre-hero h1 {
  display: flex;
  margin:auto;
  font-size: 35px;
  font-weight: bold;
  color: white;
  padding: 10px 15px 8px 15px;
  border: 4px solid white;
  /* optionnel, pour éviter tout comportement “block” imposé par un thème */
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}



 
/* ------------------------------ */
/* -------- BOUTONS ------------- */
/* ------------------------------ */

.bouton-rose, .bouton-vert, .bouton-mauve, .bouton-vert-canard {
	border-radius:5px;
	color: white;
	border:none;
	font-size:17px;
	padding: 6px 10px 3px 10px;
}
.bouton-rose, .bouton-rose a, .et_pb_button.bouton-rose a:hover {
	background-color:#FC4C77!important;
}
.bouton-vert, .bouton-vert a, .et_pb_button.bouton-vert a:hover {
	background-color:#2AC9A3!important;
}
.bouton-mauve, .bouton-mauve a, .et_pb_button.bouton-mauve a:hover {
	background-color:#BE99F2!important;
}
.bouton-vert-canard, .bouton-vert-canard a, .et_pb_button.bouton-vert-canard a:hover{
	background-color:#003134!important;	
}

/* hover sur boutons*/

/* =========================================================
   DIVI - Boutons "bouton-rose / vert / mauve / vert-canard"
   Picto SVG 14x14 à droite au hover, animation subtile
   (classe sur le module OU directement sur le lien)
   ========================================================= */

/* 1) Ciblage factorisé (classe sur <a> ou sur parent) */
.bouton-rose.et_pb_button,
.bouton-vert.et_pb_button,
.bouton-mauve.et_pb_button,
.bouton-vert-canard.et_pb_button,
.bouton-rose .et_pb_button,
.bouton-vert .et_pb_button,
.bouton-mauve .et_pb_button,
.bouton-vert-canard .et_pb_button{
  position: relative;
  overflow: hidden;
}

/* 2) Texte : léger mouvement au hover (si span présent) */
.bouton-rose.et_pb_button span,
.bouton-vert.et_pb_button span,
.bouton-mauve.et_pb_button span,
.bouton-vert-canard.et_pb_button span,
.bouton-rose .et_pb_button span,
.bouton-vert .et_pb_button span,
.bouton-mauve .et_pb_button span,
.bouton-vert-canard .et_pb_button span{
  display: inline-block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

/* 3) Picto */
.bouton-rose.et_pb_button::after,
.bouton-vert.et_pb_button::after,
.bouton-mauve.et_pb_button::after,
.bouton-vert-canard.et_pb_button::after,
.bouton-rose .et_pb_button::after,
.bouton-vert .et_pb_button::after,
.bouton-mauve .et_pb_button::after,
.bouton-vert-canard .et_pb_button::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;

  /* arrive depuis la droite + invisible au départ */
  transform: translateY(-50%) translateX(-12px);
  opacity: 0;

  background: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/icon-fleche-apres.svg") no-repeat center / contain;

  transition: opacity .35s cubic-bezier(.4,0,.2,1),
              transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

/* 4) Hover (desktop) */

.et_pb_button:hover, .et_pb_module .et_pb_button:hover {
	 border: none!important;}

@media (hover:hover){

  /* Décoller la flèche du texte : on laisse 15px + marge de confort */
  .bouton-rose.et_pb_button:hover,
  .bouton-vert.et_pb_button:hover,
  .bouton-mauve.et_pb_button:hover,
  .bouton-vert-canard.et_pb_button:hover,
  .bouton-rose .et_pb_button:hover,
  .bouton-vert .et_pb_button:hover,
  .bouton-mauve .et_pb_button:hover,
  .bouton-vert-canard .et_pb_button:hover{
    padding-right: 44px !important; /* 14px (picto) + ~15px (gap) + marges */
  }

  /* Texte glisse très légèrement */
  .bouton-rose.et_pb_button:hover span,
  .bouton-vert.et_pb_button:hover span,
  .bouton-mauve.et_pb_button:hover span,
  .bouton-vert-canard.et_pb_button:hover span,
  .bouton-rose .et_pb_button:hover span,
  .bouton-vert .et_pb_button:hover span,
  .bouton-mauve .et_pb_button:hover span,
  .bouton-vert-canard .et_pb_button:hover span{
    transform: translateX(-6px);
  }

  /* Picto apparaît + petit slide */
  .bouton-rose.et_pb_button:hover::after,
  .bouton-vert.et_pb_button:hover::after,
  .bouton-mauve.et_pb_button:hover::after,
  .bouton-vert-canard.et_pb_button:hover::after,
  .bouton-rose .et_pb_button:hover::after,
  .bouton-vert .et_pb_button:hover::after,
  .bouton-mauve .et_pb_button:hover::after,
  .bouton-vert-canard .et_pb_button:hover::after{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}


/* Hover */
@media (hover:hover) {

  /* Le texte glisse légèrement */
  .bouton-vert-canard.et_pb_button:hover span,
  .bouton-vert-canard .et_pb_button:hover span {
    transform: translateX(-6px);
  }

  /* La flèche apparaît subtilement */
  .bouton-vert-canard.et_pb_button:hover::after,
  .bouton-vert-canard .et_pb_button:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

}








/* ------------------------------ */
/* ------- ACCUEIL -------------- */
/* ------------------------------ */

/* =========================
   TEXTE CHANGEANT "machine à écrire"
   + cadre auto (s’adapte au mot) avec animation
   - 3 mots, 1 à la fois
   - écriture gauche->droite (2s) / pause (3s) / effacement droite->gauche (2s)
   - curseur clignotant
   - cadre 4px blanc + padding 15px, largeur auto selon le mot
   ========================= */

:root{
  --in: 2s;
  --hold: 3s;
  --out: 2s;

  --step: calc(var(--in) + var(--hold) + var(--out)); /* 7s */
  --cycle: calc(var(--step) * 3);                     /* 21s */

  --letters: 12;

  --b: 4px;
  --pad: 15px 15px 5px 15px;
  --cursor-w: 2px;

  --w1: 9ch;   /* accélérer */
  --w2: 4ch;   /* unir */
  --w3: 11ch;  /* Transformer */
}

/* ---- hero accueil : CENTRAGE GLOBAL ------------ */

/* Centre le contenu (h2) dans la largeur du module/colonne */
.titre-home{
  text-align: center;
}

/* H2 ne prend que la largeur de son contenu */
.titre-home h2{
  display: inline-flex;
  align-items: center;
  justify-content: center; /* sécurité */
  gap: 12px;               /* petit espace entre texte fixe et mot dynamique */
  font-size: 35px;
  font-weight: bold;
  color: white;
  padding: 15px 15px 8px 25px;
  border: 4px solid white;
  /* optionnel, pour éviter tout comportement “block” imposé par un thème */
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* CADRE (mot dynamique) */
.mot-dynamique{
  display: block;          /* devient un vrai bloc */
  width: fit-content;      /* largeur = contenu */
  margin: 0 auto;          /* centrage horizontal */
  position: relative;
  padding: var(--pad);
  border: var(--b) solid #fff;
  box-sizing: border-box;
  border-bottom: none; 
  color: white;
  font-size: 35px;
  font-style: italic;
}

/* ZONE MASQUÉE */
.mot-dynamique .masque{
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.2em;
  width: var(--w1);
  animation: boxWidth var(--cycle) ease-in-out infinite;
}

@keyframes boxWidth{
  0%       { width: var(--w1); }
  33.3333% { width: var(--w1); }

  33.3334% { width: var(--w2); }
  66.6666% { width: var(--w2); }

  66.6667% { width: var(--w3); }
  100%     { width: var(--w3); }
}

/* MOTS SUPERPOSÉS */
.mot-dynamique .mot{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation-name: typeCycle;
  animation-duration: var(--cycle);
  animation-timing-function: steps(var(--letters), end);
  animation-iteration-count: infinite;
}

.mot-dynamique .m1{ animation-delay: 0s; }
.mot-dynamique .m2{ animation-delay: var(--step); }
.mot-dynamique .m3{ animation-delay: calc(var(--step) * 2); }

@keyframes typeCycle{
  0%       { clip-path: inset(0 100% 0 0); }
  9.5238%  { clip-path: inset(0 0 0 0); }
  23.8095% { clip-path: inset(0 0 0 0); }
  33.3333% { clip-path: inset(0 0 0 100%); }
  100%     { clip-path: inset(0 0 0 100%); }
}

/* CURSEUR */
.mot-dynamique .mot::after{
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  right: 0;
  width: var(--cursor-w);
  background: currentColor;
  animation-name: cursorBlink, cursorVisible;
  animation-duration: 1s, var(--cycle);
  animation-timing-function: steps(1, end), linear;
  animation-iteration-count: infinite, infinite;
}

@keyframes cursorBlink{ 50% { opacity: 0; } }

@keyframes cursorVisible{
  0%       { opacity: 0; }
  1%       { opacity: 1; }
  23.8095% { opacity: 1; }
  33.3333% { opacity: 0; }
  100%     { opacity: 0; }
}

.mot-dynamique .m1::after{ animation-delay: 0s, 0s; }
.mot-dynamique .m2::after{ animation-delay: 0s, var(--step); }
.mot-dynamique .m3::after{ animation-delay: 0s, calc(var(--step) * 2); }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .mot-dynamique .masque{ animation: none; width: auto; }
  .mot-dynamique .mot{ animation: none; clip-path: none; position: static; }
  .mot-dynamique .mot::after{ display: none; }
  .mot-dynamique .m2, .mot-dynamique .m3{ display: none; }
}

/* ---- hero accueil ------------ */

.titre-home h2{
  display: inline-flex;
  align-items: center;
  font-size: 35px;
  font-weight: bold;
  color: white;
  padding: 15px 15px 8px 25px;
  border: 4px solid white;
  border-left: none; 
}
/*effet sur l'image du hero*/
/* 1) Aligne l'image à droite dans le module Divi */
.et_pb_image.cadre-decale{
  text-align: right !important;
}

/* 2) Le wrap doit être inline-block pour prendre la taille de l'image */
.et_pb_image.cadre-decale .et_pb_image_wrap{
  display: inline-block;
  position: relative;
  overflow: visible;
}

/* 3) (optionnel mais recommandé) éviter les bizarreries d'espacement */
.et_pb_image.cadre-decale img{
  display: block;
}

/* 4) Le cadre décalé */
.et_pb_image.cadre-decale .et_pb_image_wrap::after{
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 100%;
  height: 100%;
  border: 4px solid #fff;
  z-index: -1;
}

/* ------- 3 activité Home --------*/
.activite-home {
	padding: 0px 50px 0 30px !important;
}
.activite-home h3{
	font-size:28px;
}

/* faire remonter sur section au dessus*/
.bloc-3-activites-home, .bloc-haut-article {
  margin-top: -150px;
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) {
  .bloc-3-activites-home, .bloc-haut-article {
    margin-top: -100px;
  }
}

@media (max-width: 767px) {
  .bloc-3-activites-home, .bloc-haut-article {
    margin-top: -50px;
  }
}

/* bloc des actions pour donner de l'elan*/

.titre-cadre-vert h4{
  display: inline-flex;
  align-items: center;
  justify-content: center; /* sécurité */
  gap: 12px;               /* petit espace entre texte fixe et mot dynamique */
  font-size: 35px;
  color: #003134;
  padding: 15px 15px 8px 25px;
  border: 4px solid #003134;
  /* optionnel, pour éviter tout comportement “block” imposé par un thème */
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.bloc-actions-home {
	
}
.bloc-actions-home {
  position: relative;
  display: block;
  /* le texte occupe ~90% */
  padding-right: 40px;
  text-decoration: none; /* si c’est un <a> */
}
.bloc-actions-home h3 {
	font-size:28px;
	font-weight: bold;
}
.bloc-actions-home p {
	padding-bottom:20px!important;
}


/* picto décoratif */
.bloc-actions-home::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 23px;
  background: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/fleche-verte.svg") center / contain no-repeat;
  pointer-events: none; /* clic transmis au lien */
}
.bloc-actions-home::after {
  transition: transform 0.25s ease;
}

.bloc-actions-home:hover::after {
  transform: translateY(-50%) translateX(6px);
}


/* ---- partie blog home page------*/

.titre-actus-home {
  display: flex;
  align-items: center;      /* alignement vertical */
  justify-content: center;  /* centrage horizontal */
  gap: 16px;                /* espace entre les deux textes */
}

.titre-actus-home h2 {
  margin: 0;
}

.sous-titre-actus {
  font-size: 16px;
  opacity: 0.8;
}
a.more-link {
    color: white !important;
    text-decoration: underline!important;
    font-size: 16px!important;
}

/* =========================
   MODULE BLOG HOME (GRID + FULLWIDTH)
   ========================= */

.module-blog-home {
}

/* --- Ajustements grid (tes règles salvattore) --- */
.module-blog-home .column.size-1of3 {
  width: 33% !important;
  margin-right: 0% !important;
  border: none !important;
}

.module-blog-home .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column .et_pb_post {
  background-color: transparent;
  border: none !important;
}

/* --- Typo --- */
.module-blog-home .et_pb_blog_grid h2,
.module-blog-home .et_pb_blog h2 {
  font-size: 20px;
  color: white;
  font-weight: bold;
}

.module-blog-home .post-content-inner p {
  color: white !important;
  font-size: 16px !important;
}

/* --- Image --- */
.module-blog-home .et_pb_image_container img,
.module-blog-home .et_pb_post a img {
  border: 4px solid white;
}

/* Évite un espace sous l'image */
.module-blog-home .et_pb_post .entry-featured-image-url {
  margin-bottom: 0px !important;
}

/* =========================
   MODULE BLOG HOME (GRID + FULLWIDTH)
   ========================= */

.module-blog-home {}

/* --- Ajustements grid (salvattore) --- */
.module-blog-home .column.size-1of3{
  width: 33% !important;
  margin-right: 0% !important;
  border: none !important;
}

.module-blog-home .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column .et_pb_post{
  background-color: transparent;
  border: none !important;
}

/* --- Typo --- */
.module-blog-home .et_pb_blog_grid h2,
.module-blog-home .et_pb_blog h2{
  font-size: 20px;
  color: white;
  font-weight: bold;
}

.module-blog-home .post-content-inner p{
  color: white !important;
  font-size: 16px !important;
}

/* --- Image --- */
.module-blog-home .et_pb_image_container img,
.module-blog-home .et_pb_post a img{
  border: 4px solid white;
}

.module-blog-home .et_pb_post .entry-featured-image-url{
  margin-bottom: 0 !important;
}

/* =========================
   1) ORDRE D'AFFICHAGE
   Catégorie -> Titre -> Extrait
   (sans casser grid/fullwidth)
   ========================= */

/* Chaque article en colonne */
.module-blog-home .et_pb_blog_grid .et_pb_post,
.module-blog-home .et_pb_blog .et_pb_post{
  display: flex;
  flex-direction: column;
}

/* Image */
.module-blog-home .et_pb_blog_grid .entry-featured-image-url,
.module-blog-home .et_pb_blog .entry-featured-image-url{
  order: 0;
}

/* Catégorie / meta */
.module-blog-home .et_pb_blog_grid .post-meta,
.module-blog-home .et_pb_blog .post-meta{
  order: 1;
}

/* Titre */
.module-blog-home .et_pb_blog_grid .entry-title,
.module-blog-home .et_pb_blog .entry-title{
  order: 2;
}

/* Extrait */
.module-blog-home .et_pb_blog_grid .post-content,
.module-blog-home .et_pb_blog .post-content{
  order: 3;
}

/* =========================
   2) CARTOUCHE CATÉGORIE
   - à cheval sur l'image (50/50)
   - entre image et titre
   - sans absolute (robuste)
   ========================= */

.module-blog-home .et_pb_image_container {
    margin: 0px -20px 0px;
}

.module-blog-home .et_pb_blog_grid .post-meta,
.module-blog-home .et_pb_blog .post-meta{
  /* style cartouche */
  display: inline-flex;
  align-self: flex-start; /* à gauche du post */
  background: #2AC9A3;
  color: #fff;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;

  /* chevauchement 50/50 */
  transform: translateY(-50%);

  /* au-dessus de l'image */
  position: relative;
  z-index: 5;

  /* évite les marges parasites */
  margin: 0 0 0px 0px;  /* décale depuis la gauche + espace avant le titre */
}

/* Liens dans le cartouche */
.module-blog-home .et_pb_blog_grid .post-meta a,
.module-blog-home .et_pb_blog .post-meta a{
  color: inherit;
  text-decoration: none;
}
/* Optionnel : si tu veux que chaque catégorie ait son mini-cartouche
   (au lieu d'un seul cartouche global) */
.module-blog-home .et_pb_blog_grid .post-meta a,
.module-blog-home .et_pb_blog .post-meta a{
  background: transparent;
  padding: 0;
}

/* =========================
   COULEUR DES CARTOUCHES
   1 = rouge | 2 = noir | 3 = blanc
   ========================= */

/* Rouge */
.module-blog-home .column:nth-child(3n+1) .post-meta {
  background: #BE99F2;
  color: #fff;
}

/* Noir */
.module-blog-home .column:nth-child(3n+2) .post-meta {
  background: #FC4C77;
  color: #fff;
}

/* Blanc */
.module-blog-home .column:nth-child(3n+3) .post-meta {
  background: #2AC9A3;
  color: #000;
}



/* =========================
   Responsive (optionnel)
   ========================= */
@media (max-width: 767px){
  .module-blog-home .et_pb_blog_grid .post-meta,
  .module-blog-home .et_pb_blog .post-meta{
    margin-left: 10px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }
}


/* ------- bloc fond dégrade mauve et vert ---------*/
.fond-degrade-mauve-vert {
  
}

/* rejoignez-nous témoignage*/
.temoignage{
  background-color: #fff;

  /* image décorative en haut à gauche */
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/picto-temoignage.svg");
  background-repeat: no-repeat;
  background-position: 15px 15px;
  background-size: 120px auto; /* <-- taille en px */
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Texte principal */
.temoignage__texte{
  margin: 0 0 18px 0;
  line-height: 1.6;
}

/* Ligne auteur (photo + infos) */
.temoignage__auteur{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Photo cercle ~20% */
.temoignage__photo{
  width: 20%;
  max-width: 90px;   /* garde une taille raisonnable */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Infos ~80% */
.temoignage__infos{
  width: 80%;
}

/* Deux lignes de texte */
.temoignage__nom{
  font-weight: 700;
  line-height: 1.2;
}

.temoignage__role{
  margin-top: 4px;
  opacity: 0.8;
  line-height: 1.2;
}
@media (max-width: 767px){
  .temoignage{
    background-size: 90px auto;
    padding: 22px;
  }

  .temoignage__photo{
    width: 64px;
    max-width: none;
  }

  .temoignage__infos{
    width: auto;
  }
}

/* ------ Nos partenaires slider logos */

.dipl_logo_slider_0 .swiper-slide img {
    max-height: 70px;
	width:auto!important;
}
.dipl_logo_slider_0 .dipl_swiper_navigation .swiper-button-prev::after, .dipl_logo_slider_0 .dipl_swiper_navigation .swiper-button-next::after {
    font-weight: bold!important;
    color: white;
    font-size: 18px!important;
}

.dipl_logo_slider_0 .dipl_swiper_navigation .swiper-button-prev, .dipl_logo_slider_0 .dipl_swiper_navigation .swiper-button-next {
    border-radius: 5px;
}
.dipl_logo_slider_0 .dipl_swiper_navigation .swiper-button-next {
    background-color: #2AC9A3!important;
}


/* -------------------------------------------------------- */
/* ------- PAGE S ACTUS ET CAT2GORIES ACTUS --------------- */
/* -------------------------------------------------------- */

.nn-cat-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}

.nn-cat-buttons li{ margin:0; }

.nn-cat-buttons a{
  display: inline-block;
    padding: 10px 18px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    line-height: 1;
    background-color: white;
    color: black;
    font-weight: normal;
}
.nn-cat-buttons a:hover {
	background-color:#BE99F2;
	color:white;
}
.nn-cat-btn.is-active{
	background-color:#BE99F2;
	color:white;
}

/* Supprimer complètement les puces */
.nn-cat-buttons{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.nn-cat-buttons li{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* affichage des posts de blog sur pages actus et catégories d'actus*/
/* ====== DIVI : Premier article en 2 colonnes (image gauche / texte droite) ====== */
/* Classe à mettre sur le module Blog : blog-featured-nn */

/* Layout 2 colonnes */
.blog-featured-nn .et_pb_post{
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: stretch;
}

/* Colonne gauche : image à la une */
.blog-featured-nn .et_pb_post .entry-featured-image-url{
  grid-column: 1;
  grid-row: 1 / span 10;
  margin: 0;
}

.blog-featured-nn .et_pb_post .entry-featured-image-url img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 4px solid #E6D9FB;
}

/* Colonne droite : forcer tous les éléments texte dans la 2e colonne */
.blog-featured-nn .et_pb_post .post-meta,
.blog-featured-nn .et_pb_post h2.entry-title,
.blog-featured-nn .et_pb_post .post-content{
  grid-column: 2;
}

/* Padding & espacements */
.blog-featured-nn .et_pb_post .post-meta{
  padding: 0px 0px 0 40px;
  margin: 0;
}

.blog-featured-nn .et_pb_post h2.entry-title{
  padding: 10px 0px 0 40px;
  margin: 0;
}

.blog-featured-nn .et_pb_post .post-content{
  padding: 15px 0px 40px 40px;
  margin: 0;
}

/* Forcer l’ordre visuel : catégorie > titre > extrait + lire plus */
.blog-featured-nn .et_pb_post .post-meta{ order: 1; }
.blog-featured-nn .et_pb_post h2.entry-title{ order: 2; }
.blog-featured-nn .et_pb_post .post-content{ order: 3; }

/* Bouton "Lire plus" */
.blog-featured-nn .et_pb_post .more-link{
  display: inline-block;
  margin-top: 20px;
}

/* ====== Catégories en badges ====== */

/* Conteneur */
.blog-featured-nn .post-meta{
  font-size: 0; /* supprime l’espace et la virgule visuelle */
}

/* Chaque catégorie */
.blog-featured-nn .post-meta a{
  display: inline-block;
  background: #003134;
  color: #fff !important;
  text-transform: uppercase;
  font-size: 16px;
	font-weight:bold;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  margin: 0 8px 8px 0;
  text-decoration: none;
  line-height: 1;
}
/* bouton lire plus*/
.blog-featured-nn .et_pb_post .more-link {
    display: inline-block;
    margin-top: 20px;
    background-color: #2AC9A3;
    padding: 10px 15px;
    font-weight: bold;
    text-decoration: none !important;
}


/* ====== Responsive : empiler sur mobile ====== */
@media (max-width: 980px){
  .blog-featured-nn .et_pb_post{
    grid-template-columns: 1fr;
  }

  .blog-featured-nn .et_pb_post .entry-featured-image-url{
    grid-column: 1;
    grid-row: auto;
  }

  .blog-featured-nn .et_pb_post .post-meta,
  .blog-featured-nn .et_pb_post h2.entry-title,
  .blog-featured-nn .et_pb_post .post-content{
    grid-column: 1;
  }

  .blog-featured-nn .et_pb_post .post-meta{
    padding: 20px 20px 0 20px;
  }

  .blog-featured-nn .et_pb_post h2.entry-title{
    padding: 10px 20px 0 20px;
  }

  .blog-featured-nn .et_pb_post .post-content{
    padding: 15px 20px 20px 20px;
  }
}

/* --------- affichage des articles en blog sur les pages de contenu hors page accueil ------*/ 

/* =========================================================
   MODULE BLOG – VARIANTE PAGES
   Fond clair / textes foncés
   Classe : module-blog-pages
   ========================================================= */

/* --- Ajustements grid (salvattore) --- */
.module-blog-pages .column.size-1of3{
  width: 33% !important;
  margin-right: 0% !important;
  border: none !important;
}

.module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column .et_pb_post{
  background-color: #ffffff;
  border: none !important;
}

/* --- Typo --- */
.module-blog-pages .et_pb_blog_grid h2,
.module-blog-pages .et_pb_blog h2{
  font-size: 20px;
  color: #003134;
  font-weight: bold;
}

.module-blog-pages .post-content-inner p{
  color: #003134 !important;
  font-size: 16px !important;
}

.module-blog-pages a.more-link {
    color: black!important;
    text-decoration: underline !important;
    font-weight: bold;
}

.module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column .et_pb_post {
    background-color: #ffffff;
    border: none !important;
    margin-bottom: 0px;
}

/* changer texte de la paginatio net style */
/* Divi Blog pagination — module ciblé par ta classe perso */
.module-blog-pages .pagination {
  display: flex;
  justify-content: center;   /* centre au milieu */
  align-items: center;
  gap: 14px;                 /* espace entre les 2 boutons */
  margin-top: 30px;
}

/* Divi met souvent alignleft/alignright : on neutralise */
.module-blog-pages .pagination .alignleft,
.module-blog-pages .pagination .alignright {
  float: none !important;
  margin: 0 !important;
}
/* ---------------------------------------------------
/* Style bouton */
/* ---------------------------------------------------*/
.module-blog-pages .pagination a {
     display: inline-block;
    padding: 12px 18px;
    border: none;
    background-color: #2AC9A3;
    color: white;
    border-radius: 0pc;
    text-decoration: none;
    line-height: 1.2;
    font-weight: normal;
    transition: transform .15s ease, opacity .15s ease;
}
/* ICONES SVG – pagination module-blog-pages /*

/* base commune aux icônes */
.module-blog-pages .pagination a::before,
.module-blog-pages .pagination a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.15em;
}

/* Bouton gauche : icône AVANT le texte */
.module-blog-pages .pagination .alignleft a::before {
  margin-right: .6em;
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/icon-fleche-avant.svg");
}

/* on évite une icône après */
.module-blog-pages .pagination .alignleft a::after {
  content: none;
}

/*  Bouton droit : icône APRÈS le texte */
.module-blog-pages .pagination .alignright a::after {
  margin-left: .6em;
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/icon-fleche-apres.svg");
}

/* on évite une icône avant */
.module-blog-pages .pagination .alignright a::before {
  content: none;
}

/* Hover sympa */
.module-blog-pages .pagination a:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* Optionnel : sur mobile, on peut passer en colonne si besoin */
@media (max-width: 767px) {
  .module-blog-pages .pagination {
    flex-direction: column;
    gap: 10px;
  }
  .module-blog-pages .pagination a {
    width: 100%;
    text-align: center;
  }
}

/* --- Image --- */
.module-blog-pages .et_pb_image_container img,
.module-blog-pages .et_pb_post a img{
  border: 4px solid #E6D9FB;
}

.module-blog-pages .et_pb_post .entry-featured-image-url{
  margin-bottom: 0 !important;
}

/* =========================
   1) ORDRE D'AFFICHAGE
   Catégorie -> Titre -> Extrait
   ========================= */

/* Chaque article en colonne */
.module-blog-pages .et_pb_blog_grid .et_pb_post,
.module-blog-pages .et_pb_blog .et_pb_post{
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* Image */
.module-blog-pages .et_pb_blog_grid .entry-featured-image-url,
.module-blog-pages .et_pb_blog .entry-featured-image-url{
  order: 0;
}

/* Catégorie / meta */
.module-blog-pages .et_pb_blog_grid .post-meta,
.module-blog-pages .et_pb_blog .post-meta{
  order: 1;
}

/* Titre */
.module-blog-pages .et_pb_blog_grid .entry-title,
.module-blog-pages .et_pb_blog .entry-title{
  order: 2;
}

/* Extrait */
.module-blog-pages .et_pb_blog_grid .post-content,
.module-blog-pages .et_pb_blog .post-content{
  order: 3;
}

/* =========================
   2) CARTOUCHE CATÉGORIE
   ========================= */

.module-blog-pages .et_pb_image_container {
  margin: 0px -20px 0px;
}

.module-blog-pages .et_pb_blog_grid .post-meta,
.module-blog-pages .et_pb_blog .post-meta{
  display: inline-flex;
  align-self: flex-start;
  background: #2AC9A3;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;

  transform: translateY(-50%);
  position: relative;
  z-index: 5;

  margin: 0;
}

/* Ajoute l’espace entre les catégories */
.post-meta a + a {
    margin-left: 0.6em;
}

/* Liens dans le cartouche */
.module-blog-pages .et_pb_blog_grid .post-meta a,
.module-blog-pages .et_pb_blog .post-meta a{
  color: inherit;
  text-decoration: none;
  background: transparent;
  padding: 0;
}

/* =========================
   COULEUR DES CARTOUCHES
   tout en vert foncé
   ========================= */


.module-blog-pages .column:nth-child(3n+1) .post-meta {
  background: #003134;
  color: #ffffff;
}

/* Rose */
.module-blog-pages .column:nth-child(3n+2) .post-meta {
  background: #003134;
  color: #ffffff;
}

/* Vert  */
.module-blog-pages .column:nth-child(3n+3) .post-meta {
  background: #003134;
  color: #fff;
}

/* =========================================================
   FORCER UN VRAI GRID (désactive l'effet masonry Salvattore)
   -> images alignées en lignes de 3
   ========================================================= */

.module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns]{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px; /* espace entre cartes */
}

/* On "retire" les colonnes Salvattore du flux */
.module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: contents; /* clé: les posts deviennent items du grid */
}

/* Chaque post prend toute la cellule et s'étire */
.module-blog-pages .et_pb_blog_grid .et_pb_post{
  height: 100%;
}

/* Responsive */
@media (max-width: 980px){
  .module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns]{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px){
  .module-blog-pages .et_pb_blog_grid .et_pb_salvattore_content[data-columns]{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 767px){
  .module-blog-pages .et_pb_blog_grid .post-meta,
  .module-blog-pages .et_pb_blog .post-meta{
    margin-left: 10px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }
}




/* --------------------------------------------------- */
/* -------- MISE EN PAGE DES ARTICLES DE BLOG ----------*/

.section-titre-article .et_pb_title_container {
  display: flex;
  flex-direction: column;
}

/* On inverse l'ordre */
.section-titre-article .et_pb_title_container .entry-title {
  order: 2;
}

.section-titre-article .et_pb_title_container .et_pb_title_meta_container {
  order: 1;
}

/* bouton pour la catégorie au dessu du titre*/

p.et_pb_title_meta_container a {
  display: inline-block!important;   
  padding: 8px 14px!important;
  border-radius: 0px!important;
	background-color:#003134!important;
	color:white!important;
	text-transform:uppercase!important;	
}
p.et_pb_title_meta_container {
	padding-bottom:20px!important;
}

/* ------------------------------------------------ */
/* ------ Formulaires gravity form ---------------- */
/* ------------------------------------------------ */

/* cacher les champs pour utiliser apparence -> Espace réservé*/
.gform_legacy_markup_wrapper .top_label .gfield_label {
	display:none;
}

/* Conteneur du formulaire */
.formulaire-nn {
  /* Image de fond */
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/fond-degrade-mauve-vert.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* étire en largeur + hauteur */
  
/* Un peu de confort visuel */
  padding: 30px;
}
body .gform_legacy_markup_wrapper .top_label div.ginput_container {
    margin-top: 28px;
}
/* Ombre sur les champs */
.formulaire-nn .gform_wrapper input[type="text"],
.formulaire-nn .gform_wrapper input[type="email"],
.formulaire-nn .gform_wrapper input[type="tel"],
.formulaire-nn .gform_wrapper input[type="url"],
.formulaire-nn .gform_wrapper input[type="number"],
.formulaire-nn .gform_wrapper input[type="password"],
.formulaire-nn .gform_wrapper input[type="search"],
.formulaire-nn .gform_wrapper textarea,
.formulaire-nn .gform_wrapper select {
  box-shadow: 10px 10px 0 #E6D9FB; /* ombre “pleine” verte */
  border: none;                   /* optionnel */
  padding: 12px 14px;             /* optionnel */
  background: rgba(255,255,255,0.95); /* optionnel si ton fond est chargé */
}

/* font case de consentement*/
label.gform-field-label.gform-field-label--type-inline.gfield_consent_label {
    font-size: 14px;
    line-height: 18px !important;
}

/* aspect bouton formulaire*/
.formulaire-nn .gform_button {
    background-color: #003134;
    padding: 10px 15px;
    border: none;
    color: white;
    font-weight: bold;
	border-radius : 5px;
}
/* effet hover sur le bouton*/
/* Footer reste pleine largeur, mais le contenu (le bouton) ne s'étire pas */
.formulaire-nn .gform_legacy_markup_wrapper .gform_footer{
  width: 100%;
  display: flex;
  justify-content: flex-start; /* ou center si tu veux centrer le bouton */
  align-items: center;
}

/* On crée une référence de position SUR LE BOUTON */
.formulaire-nn .gform_legacy_markup_wrapper input.gform_button{
  position: relative;
  padding-right: 38px !important; /* place pour le picto */
  transition: transform .2s ease;
}

/* On place l'icône via un pseudo-élément... mais sur input c'est impossible.
   => on utilise un "background" en second calque, activé au hover */
.formulaire-nn .gform_legacy_markup_wrapper input.gform_button{
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  /* état normal : pas d'icône */
  background-image: none;
}

/* Hover : on affiche l'icône + petit effet d'arrivée */
@media (hover:hover){
  .formulaire-nn .gform_legacy_markup_wrapper input.gform_button:hover{
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/icon-fleche-apres.svg");
    animation: nn-picto-in .25s ease both;
    transform: scale(1.03);
  }
}

/* Animation : petit "slide" (effet d'arrivée) */
@keyframes nn-picto-in{
  from { background-position: right 20px center; }
  to   { background-position: right 14px center; }
}

/* ------------------------------------ */
/* -------- PAGE ANNUAIRES MEMBRES ---- */
/* ------------------------------------ */

/* affichage des membres sur 5 colonnes */
.module-blog-5-colonnes {
    display: flex;
    flex-wrap: wrap;
	align-content: flex-start;
}

.module-blog-5-colonnes .entry-featured-image-url {
    flex: 0 1 calc(20%);
    margin: 0px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s;
}

.module-blog-5-colonnes .entry-featured-image-url:hover {
    transform: scale(1.05);
}

.module-blog-5-colonnes h2.entry-title {
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    padding-top: 20px;
	padding-bottom:30px;
}

.module-blog-5-colonnes img {
    vertical-align: bottom;
    padding: 20px;
    min-height: 160px;
}

/* Pour tablette (3 colonnes) */
@media (min-width: 768px) and (max-width: 1024px) {
    .module-blog-5-colonnes .entry-featured-image-url {
        flex: 0 1 calc(33.33%);
    }

    .module-blog-5-colonnes img {
        padding: 15px;
        min-height: 120px;
    }

    .module-blog-5-colonnes h2.entry-title {
    font-size: 16px;
    font-weight: normal;
    padding-top: 20px;
	padding-bottom:25px;
    }
}

@media (min-width: 768px) and (max-width: 980px) {
    .module-blog-5-colonnes h2.entry-title {
        font-size: 16px !important;
    }
}

/* Pour téléphone (2 colonnes) */
@media (max-width: 768px) {
    .module-blog-5-colonnes .entry-featured-image-url {
        flex: 0 1 calc(50%);
    }

    .module-blog-5-colonnes img {
        padding: 10px;
        min-height: 100px;
    }

    .module-blog-5-colonnes h2.entry-title {
    font-size: 14px;
    font-weight: normal;
    padding-top: 10px;
	padding-bottom:20px;
    }
}

/* ajout des bordures centrales mais pas sur les bords*/


.module-blog-5-colonnes {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 1400px;   /* largeur max souhaitée */
  margin: 0 auto;      /* centrage horizontal */
  width: 100%;         /* évite les bugs flex */
	padding: 20px;
}

.module-blog-5-colonnes .entry-featured-image-url {
  flex: 0 0 20%;
  margin: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s;

  /* quadrillage interne */
  border-right: 4px solid #F9F6FE;
  border-bottom: 4px solid #F9F6FE;
}

.module-blog-5-colonnes .entry-featured-image-url:hover {
  transform: scale(1.05);
}

/* enlever la bordure droite des items en fin de ligne (5e, 10e, 15e...) */
.module-blog-5-colonnes .entry-featured-image-url:nth-child(5n) {
  border-right: none;
}

/* enlever la bordure du bas sur la dernière ligne (⚠️ approximation: on enlève aux 5 derniers) */
.module-blog-5-colonnes .entry-featured-image-url:nth-last-child(-n+5) {
  border-bottom: none;
}


/* =========================
   TABLETTE : 3 colonnes
   ========================= */
@media (min-width: 768px) and (max-width: 1024px) {

  .module-blog-5-colonnes .entry-featured-image-url {
    flex: 0 0 33.333%;
  }

  /* reset des règles desktop */
  .module-blog-5-colonnes .entry-featured-image-url:nth-child(5n) {
    border-right: 4px solid #F9F6FE;
  }
  .module-blog-5-colonnes .entry-featured-image-url:nth-last-child(-n+5) {
    border-bottom: 4px solid #F9F6FE;
  }

  /* fin de ligne en 3 colonnes */
  .module-blog-5-colonnes .entry-featured-image-url:nth-child(3n) {
    border-right: none;
  }

  /* dernière ligne (on enlève aux 3 derniers) */
  .module-blog-5-colonnes .entry-featured-image-url:nth-last-child(-n+3) {
    border-bottom: none;
  }

  .module-blog-5-colonnes img {
    padding: 15px;
    min-height: 120px;
  }

  .module-blog-5-colonnes h2.entry-title {
    font-size: 16px;
    font-weight: normal;
    padding-top: 20px;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .module-blog-5-colonnes h2.entry-title {
    font-size: 16px !important;
  }
}


/* =========================
   TELEPHONE : 2 colonnes
   ========================= */
@media (max-width: 768px) {

  .module-blog-5-colonnes .entry-featured-image-url {
    flex: 0 0 50%;
  }

  /* reset des règles tablette (et desktop) */
  .module-blog-5-colonnes .entry-featured-image-url:nth-child(3n) {
    border-right: 4px solid #F9F6FE;
  }
  .module-blog-5-colonnes .entry-featured-image-url:nth-last-child(-n+3) {
    border-bottom: 4px solid #F9F6FE;
  }

  /* fin de ligne en 2 colonnes */
  .module-blog-5-colonnes .entry-featured-image-url:nth-child(2n) {
    border-right: none;
  }

  /* dernière ligne (on enlève aux 2 derniers) */
  .module-blog-5-colonnes .entry-featured-image-url:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .module-blog-5-colonnes img {
    padding: 10px;
    min-height: 100px;
  }

  .module-blog-5-colonnes h2.entry-title {
    font-size: 14px;
    font-weight: normal;
    padding-top: 10px;
  }
}

/* -------------------------------------- */
/* aspect des filtres de tri des membres */
/* Conteneur global */
.filtres-wrapper{
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: flex-end;
    gap: 40px; /* espace entre les deux */
    margin-bottom: 40px;
    flex-wrap: wrap; /* permet le responsive */
}

/* Chaque bloc label + select */
.filtre-bloc{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Label */
.titre-filtres{
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Select */
.filtre-select{
    min-width: 250px;
    padding: 12px 16px;
    border: 2px solid #000;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}
/* Wrapper de la barre (background ici, sans toucher aux cards) */
.barre-filtres-nwx{
  /* Ton fond image */
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/degrade-fond.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 18px 20px;
  margin-bottom: 30px; /* espace avant les cards */
}

/* Contenu centré */
.barre-filtres-nwx__inner{
  display: flex;
  align-items: center;
  justify-content: center; /* centre le groupe sur la page */
  gap: 18px;
  flex-wrap: wrap; /* pour éviter de casser en petit écran */
  max-width: 1200px;
  margin: 0 auto;
}

/* Texte fixe */
.barre-filtres-nwx__label{
  font-size: 16px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

/* Selects */
.barre-filtres-nwx__select{
  min-width: 240px;
  padding: 10px 14px;
  border: 2px solid #000;
  background: rgba(255,255,255,0.92);
  font-size: 16px;
  cursor: pointer;
}

/* Mobile: les éléments se mettent proprement en 2 lignes si besoin */
@media (max-width: 600px){
  .barre-filtres-nwx__select{
    min-width: 0;
    width: 100%;
    max-width: 420px;
  }
}
/* Reset commun aux 2 selects */
.barre-filtres-nwx__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 12px 50px 12px 16px; /* espace à droite pour le picto */
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;

  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}

/* =========================
   SELECT VILLES
   ========================= */

#filtre-ville-select {
  background-color: #BE99F2;
  color: #ffffff;

  /* flèche blanche SVG */
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/contact-icon.svg");
}

/* =========================
   SELECT SECTEURS
   ========================= */

#filtre-secteur-select {
  background-color: #FC4C77;
  color: #ffffff;

  /* flèche blanche SVG */
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/contact-icon.svg");
}

/* Focus propre */
.barre-filtres-nwx__select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}

/* Option dropdown (limité par le navigateur) */
.barre-filtres-nwx__select option {
  color: #000;
}
/* modif apparence liste déroulante sélect*/
.barre-filtres-nwx__select option {
  color: #000;
  background: #fff;
}



/* --------------------------------------- */
/* ------ AFFICHAGE CPT FICHE MEMBRE ----- */
/* --------------------------------------- */

.profil-membre-first{
  display: flex !important;
  justify-content: flex-end !important;
}

.profil-membre-first .et_pb_image_wrap{
  display: block;
}

.profil-membre-first img{
  padding: 0;              /* ou moins */
  margin-left: auto;       /* si wrapper en block */
  margin-right: 0;
  border-radius: 500px;
  width: 70%!important;
}
.membre-col-gauche{
  text-align: right !important;
}

.membre-col-gauche {
    background-color: #ffffff;
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/degrade-fond.jpg");
    background-repeat: no-repeat;
    background-position: center 150px;
    background-size: cover;
}

.profil-membre-centre {
	text-align: right!important;
	text-transform:uppercase;
	font-size:23px;
	font-weight:bold;
}
.et_pb_gutters3 .et_pb_column_1_3 .et_pb_module  {
	margin-bottom:15px!important;
}


p.fonction-membre {
	font-size:18px;
	text-align: right;
	font-weight:normal;
	padding-bottom:20px!important;
}
.profil-membre-centre p.tel, .profil-membre-centre p.mail, .profil-membre-centre p.site, .profil-membre-last p.adresse, .profil-membre-last p.adresse2{
	text-align: right!important;
	font-size:15px;
	font-weight:normal;
	position: relative;
    padding-right: 25px; /* espace pour l'icône */
}
.profil-membre-last p.adresse {
	padding-bottom:0px;
}
p.site a {
    text-transform: none;
    color: black;
}

/* les icones de la première colonne */

.profil-membre-centre p.tel::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/picto-cyber.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.profil-membre-centre p.mail::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/picto-cyber.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.profil-membre-centre p.site::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/picto-site-web.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.profil-membre-last p.adresse::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/picto-adresse.svg");
    background-size: contain;
    background-repeat: no-repeat;
}




/* les badges de secteurs et compétences*/

p.secteurs-principal, p.secteurs-secondaire {
    background-color: #BE99F2;
    padding: 10px 20px 10px 20px !important;
    border-radius: 500px;
    text-align: center;
    color: white;
}
.badge-titre {
	background-color: #2AC9A3;
    padding: 10px 20px 10px 20px !important;
    border-radius: 500px;
    text-align: center;
    color: white;
}


/* ------------------------------ */
/* ----- ASPECT POPUP ----------- */

.bloc-maintenance {
  background-image: url("https://liziweb-dev.fr/normandienumerique/wp-content/uploads/2026/02/degrade-fond.jpg");
  background-size: cover;        /* cover */
  background-position: center;   /* centré */
  background-repeat: no-repeat;

  padding: 120px 20px;           /* espace autour du contenu */
  text-align: center;            /* centre le texte */
  color: #000;               
}
.bloc-maintenance .et_pb_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

/* Sécurise les pseudo-éléments Divi (icônes/effets) */
.bloc-maintenance .et_pb_button:before,
.bloc-maintenance .et_pb_button:after {
  display: none !important;
  content: none !important;
}


/* ------------------------------ */
/* ------ FOOTER ---------------- */
/* ------------------------------ */

.menu-footer h3 {
	color: #00A19F;
	text-transform:uppercase;
	font-weight:bold;
	font-size:17px;
}
.menu-footer a, .menu-footer p {
	color:white;
	text-decoration:none;
	font-size:16px;
	line-height:1.3em;
}

.suivez-nous {
    display: inline-block;
    color: white;
    padding-right: 10px;
}
.menu-footer .rs-header-icon {
    display: inline-block;
}


.sous-footer a, .sous-footer {
	color:white;
	font-size:13px;
}