.mje-org{ color:#002d4f; font-size:13px; margin-top:2px; }
.mje-page{max-width:720px;margin:0 auto;padding:20px 14px 40px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.mje-header{text-align:center;margin-bottom:14px}
.mje-name{font-size:20px;line-height:1.2;margin:0 0 4px;font-weight:700}
.mje-job{font-size:13px;color:#6F7B78;margin:0}
.mje-qr{display:flex;justify-content:center;margin:18px 0 8px}
.mje-qr img{width:180px;height:auto}
.mje-actions-center{display:flex;justify-content:center;margin:8px 0 18px}
.mje-pill{display:inline-flex;align-items:center;gap:10px;border:2px solid #21A58D;border-radius:999px;padding:10px 16px;text-decoration:none;color:#0B2E2A;font-weight:600;background:#fff; font-size:20px}
.mje-portrait{display:flex;justify-content:center;margin:6px 0 6px}
.mje-photo{width:180px;height:180px;object-fit:cover;border-radius:999px}
.mje-card{background:#F2F4F3;border-radius:16px;padding:16px;margin:12px 0}
.mje-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mje-list li{display:flex;gap:10px;align-items:center;font-size:14px}
.mje-links ul{list-style:none;padding:0;margin:10px 0 4px;display:grid;gap:8px}
.mje-links a{color:#0B2E2A}
.mje-brand{display:flex;justify-content:center;margin:8px 0 10px}
.mje-brand img{height:36px;width:auto}
@media (min-width: 992px){
  .mje-brand img{height:44px}
}

/* ---- Title (Name) ---- */
.mje-name{
  color:#002d4f;         /* couleur du nom/prénom */
  font-size:20px;        /* mobile */
  font-weight:700;
  line-height:1.15;
  letter-spacing:.2px;
  margin:0 0 6px;
  text-align:center;
}

/* ---- Subtitle (Job title) ---- */
.mje-job{
  color:#002d4f;         /* gris/bleuté du sous-titre */
  font-size:15px;        /* mobile */
  font-weight:500;
  line-height:1.2;
  margin:0;
  text-align:center;
}

/* Desktop */
@media (min-width: 992px){
  .mje-name{ font-size:24px; !important }
  .mje-job{  font-size:16px; }
}

/* Fond de la zone fiche */
.single-employee .mje-page{
  background:#ecebe8;        /* ta couleur */
  border-radius:16px;        /* option : angles arrondis comme la maquette */
  padding:24px 20px;         /* espace interne */
  box-shadow: 0 1px 0 rgba(0,0,0,.02); /* léger relief, optionnel */
}

/* (optionnel) cadrer la largeur comme sur le visuel */
@media (min-width: 768px){
  .single-employee .mje-page{ max-width:460px; }
}

.mje-optin .mje-optin-row{ display:flex; gap:12px; align-items:flex-start; }
.mje-bullet{
  width: 16px; height:16px; border:2px solid #21A58D; border-radius:50%;
  margin-top: 6px; flex:0 0 auto;
}
.edir-alert-box{ margin:0; }
.edir-alert-box .edir-email{
  display:block; width:100%; padding:8px 10px;
  border:1px solid #d7ddda; border-radius:10px;
}
.edir-alert-box .edir-sub-btn{
  margin-top:8px; border:2px solid #21A58D; border-radius:999px;
  background:#fff; padding:12px 18px; cursor:pointer; font-weight:600;
}

/* ---------- Adresses : 3 lignes ----------- */
.mje-address { align-items:flex-start; }
.mje-addr-lines > div{ line-height:1.35; }        /* Correction 3: interligne plus généreux */
.mje-addr-lines .l1{ font-weight:600; }           /* Organization en bold léger */
.mje-addr-lines .l2{ }
.mje-addr-lines .l3{ }

/* ---------- Espacement entre blocs ----------- */
.mje-card, .mje-links, .mje-content, .mje-portrait, .mje-qr,
.mje-actions-center, .mje-optin{
  margin-bottom: 24px;                            /* Correction 3: double espace entre blocs */
}

/* ---------- Liens : couleur marque ----------- */
.mje-links a, .mje-card a, .mje-content a{
  color:#002d4f;                                  /* Correction 4 */
  text-decoration:none;
  font-weight:600; 
}
.mje-links a:hover, .mje-card a:hover, .mje-content a:hover{
  filter:saturate(1.1);
  color:#00a882;
}

/* ---------- Bloc socials : icônes + hover zoom ----------- */
/* Structure: <li><span class="mje-ico mje-ico-ig|globe|li"></span><a>...</a></li> */
.mje-links ul{ gap:12px; }                        /* Correction 3: interligne interne */
.mje-links li{
  display:flex; align-items:center; gap:10px;
}
.mje-ico{
  width:22px; height:22px; display:inline-block; flex:0 0 22px;
}
/* --- Icônes de contact personnalisées --- */
.mje-ico-phone {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-block;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_tel_bleu.png");
}

.mje-ico-mobile {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-block;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_mobile_bleu.png");
}

.mje-ico-mail {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-block;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_mail_bleu.png");
}







/* Icône épingle (adresse) */
.mje-ico-pin{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-block;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_plan_bleu.png");
}

/* Assure l’alignement en haut pour l’adresse multi-lignes */
.mje-address{ align-items: flex-start; }





/* Icône Instagram */
/*.mje-ico-ig{
  background: center/contain no-repeat url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103A43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>\
  <rect x='3' y='3' width='18' height='18' rx='5' ry='5'/>\
  <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/>\
  <line x1='17.5' y1='6.5' x2='17.5' y2='6.5'/></svg>");
}
*/

.mje-ico-ig{
  width: 36px; 
  height: 36px;
  display: inline-block;
  flex: 0 0 36px;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_instagram_bleu.png") !important;
}


/* Icône Globe (site) 
.mje-ico-globe{
  background: center/contain no-repeat url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103A43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>\
  <circle cx='12' cy='12' r='9'/>\
  <path d='M2.5 12h19M12 2.5c3 3.5 3 15.5 0 19M12 2.5c-3 3.5-3 15.5 0 19'/></svg>");
}
*/

/* Globe = icône PNG fournie */
.mje-ico-globe{
  width: 36px;
  height: 36px;
  display: inline-block;
  flex: 0 0 36px;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_web_bleu.png") !important;
}


/* Icône LinkedIn 
.mje-ico-li{
  background: center/contain no-repeat url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23103A43'>\
  <path d='M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0zM.5 8.5h4.9V24H.5zM9 8.5h4.7v2.1h.1c.7-1.3 2.4-2.6 5-2.6C22.9 8 24 10.1 24 13.7V24h-5V14.7c0-2.2-.8-3.6-2.7-3.6-1.5 0-2.4 1-2.8 2-.1.3-.1.8-.1 1.3V24H9z'/></svg>");
}
*/

.mje-ico-li{
  width: 36px;
  height: 36px;
  display: inline-block;
  flex: 0 0 36px;
  background: center / contain no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_linkedin_bleu.png") !important;
}


/* Hover "agrandi" sur les liens sociaux */
.mje-links li a{
  display:inline-block; transform-origin:left center; transition:transform .15s ease;
}
.mje-links li a:hover{ transform:scale(1.05); }    /* Correction 2 */

/* Option: harmoniser la taille du texte dans socials */
.mje-links li a, .mje-links li span{ font-size:15px; }


/* === Annuaire employés — alignement icône/texte === */
:root{
  --ed-gap: 12px;     /* écart icône ↔ texte (à ajuster si besoin) */
  --ed-ico: 22px;     /* largeur/hauteur de la colonne d'icône */
}

/* Conteneurs des 3 blocs */
.ed-contact, .ed-address, .ed-socials{
  display: grid;
  row-gap: 10px;               /* espace entre lignes à l’intérieur d’un bloc */
}

/* Chaque ligne (icône + texte) */
.ed-row{
  display: grid;
  grid-template-columns: var(--ed-ico) 1fr;   /* icône fixe + texte fluide */
  column-gap: var(--ed-gap);
  align-items: start;          /* adresse sur plusieurs lignes bien alignée */
}

/* Boîte de l’icône */
.ed-ico{
  width: var(--ed-ico);
  height: var(--ed-ico);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ed-ico);
}

/* Icônes (SVG, images ou font-icons) à l’intérieur */
.ed-ico svg,
.ed-ico img,
.ed-ico i{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Texte à droite (supprime les marges parasites) */
.ed-text{
  margin: 0;
  line-height: 1.6;
}

/* Optionnel : même écart dans le bloc “socials” quand le nom du réseau est du texte cliquable */
.ed-socials .ed-row a{
  display: inline-block;
}

/* Optionnel mobile : un peu plus d’air si tu veux */
@media (max-width: 480px){
  :root{ --ed-gap: 10px; }
}

/* === Annuaire employés — même retrait à gauche pour tous les blocs === */
:root{
  --ed-leftpad: 18px; /* ajuste la valeur qui te plaît */
}

/* normalise le padding/marge à gauche */
.ed-contact,
.ed-address,
.ed-socials{
  margin-left: 0 !important;
  padding-left: var(--ed-leftpad) !important;
  box-sizing: border-box;
}

/* si un bloc est dans une “boîte” (fond arrondi) qui ajoutait son propre padding,
   on l’annule pour ne garder que le retrait commun ci-dessus */
.ed-contact *[class*="box"],
.ed-address *[class*="box"],
.ed-socials *[class*="box"]{
  padding-left: 0 !important;
}

/* === Annuaire — CTAs === */
:root{
  --edir-green: #00a882;
}

.mje-ctas{
  display: grid;
  row-gap: 14px;            /* espace vertical entre les 2 boutons */
  margin: 8px 0 20px 0;     /* espace autour du bloc */
}

.mje-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 2px solid var(--edir-green);
  border-radius: 999px;     /* pills */
  text-decoration: none;
  color: var(--edir-green);
  font-weight: 700;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease;
}

.mje-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.mje-cta .mje-ico{
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.mje-cta .mje-label{
  white-space: nowrap;
}

/* === Annuaire — Style final des CTAs === */
:root{
  --edir-green: #00a882;  /* fond des boutons */
  --edir-text:  #ecebe8;  /* texte */
  --edir-blue:  #002d4f;  /* icônes */
}

/* Boutons */
.mje-ctas .mje-cta{
  background: var(--edir-green) !important;
  color: var(--edir-text) !important;
  border: 2px solid var(--edir-green) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Icônes (indépendantes du texte) */
.mje-ctas .mje-cta .mje-ico,
.mje-ctas .mje-cta .mje-ico svg,
.mje-ctas .mje-cta .mje-ico i{
  color: var(--edir-blue) !important;
  fill: currentColor;
  stroke: currentColor;
  width: 20px;
  height: 20px;
}

/* Texte du bouton */
.mje-ctas .mje-cta .mje-label{
  color: var(--edir-text) !important;
  line-height: 1;
  white-space: nowrap;
}

/* Effets au survol */
.mje-ctas .mje-cta:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* Effet actif */
.mje-ctas .mje-cta:active{
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Focus visible pour accessibilité */
.mje-ctas .mje-cta:focus-visible{
  outline: 2px solid var(--edir-blue);
  outline-offset: 2px;
}

/* === CTAs pleine largeur (même largeur que les blocs de texte) === */
.mje-ctas{
  display: grid;
  row-gap: 14px;
}

.mje-ctas .mje-cta{
  display: flex;          /* au lieu de inline-flex */
  width: 100%;            /* prend toute la largeur de la colonne */
  box-sizing: border-box; /* padding inclus dans la largeur */
  justify-content: center;
  align-items: center;
}

/* si un thème impose une largeur auto aux liens, neutralise */
.mje-ctas .mje-cta:link,
.mje-ctas .mje-cta:visited{
  width: 100%;
}

/* laisser le label aller à la ligne si besoin (bouton large) */
.mje-ctas .mje-cta .mje-label{
  white-space: normal;
  text-align: center;
}

/* === Bouton d’alerte : mêmes couleurs que les CTAs === */
:root{
  --edir-green: #00a882; /* fond / bordure */
  --edir-text:  #ecebe8; /* texte */
}

/* cible large : selon le markup de ton formulaire */
.mje-optin .mje-cta,
.mje-optin button,
.mje-optin input[type="submit"]{
  background: var(--edir-green) !important;
  color: var(--edir-text) !important;
  border: 2px solid var(--edir-green) !important;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;             /* pleine largeur comme les autres boutons */
  box-sizing: border-box;
  appearance: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.mje-optin .mje-cta:hover,
.mje-optin button:hover,
.mje-optin input[type="submit"]:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.mje-optin .mje-cta:active,
.mje-optin button:active,
.mje-optin input[type="submit"]:active{
  transform: translateY(0);
  filter: brightness(0.95);
}

.mje-optin .mje-cta:focus-visible,
.mje-optin button:focus-visible,
.mje-optin input[type="submit"]:focus-visible{
  outline: 2px solid #002d4f; /* anneau d’accessibilité */
  outline-offset: 2px;
}
/* === Bouton "Add to contact list" (.mje-pill) === */
:root{
  --edir-green:#00a882; /* fond / bordure */
  --edir-text:#ecebe8;  /* texte      */
  --edir-blue:#002d4f;  /* icônes     */
}

.mje-pill{
  background: var(--edir-green) !important;
  color: var(--edir-text) !important;
  border: 2px solid var(--edir-green) !important;
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 80%;                 /* pleine largeur comme les autres */
  box-sizing: border-box;
  font-weight: 600;
  font-size:12px;
  text-transform: uppercase;   /* MAJUSCULES */
  letter-spacing: .5px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Couleur de l’icône dans le bouton */
.mje-pill .mje-ico,
.mje-pill svg,
.mje-pill i{
  color: var(--edir-blue) !important;
  fill: currentColor;
  stroke: currentColor;
  width: 20px;
  height: 20px;
}

/* Hover / active / focus */
.mje-pill:hover{ filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.1); }
.mje-pill:active{ filter: brightness(.95); transform: translateY(0); }
.mje-pill:focus-visible{ outline: 2px solid var(--edir-blue); outline-offset: 2px; }



/* === Centrer horizontalement tous les boutons === */


/* groupe des CTAs */
.mje-ctas{
  display: grid;
  row-gap: 14px;
  justify-items: center;   /* centre les boutons dans la colonne */
}

/* CTAs verts */
.mje-ctas .mje-cta{
  width: var(--edir-btn-w);
  max-width: 60%;
  justify-content: center;
}

/* Bouton “Add to contact list” */
.mje-pill{
  width: var(--edir-btn-w);
  max-width: 75%;
  justify-content: center;
  margin-left: auto;        /* centre via marges auto */
  margin-right: auto;
}

/* Bouton d’alerte */
.mje-optin .mje-cta,
.mje-optin button,
.mje-optin input[type="submit"]{
  width: var(--edir-btn-w);
  max-width: 70%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* (optionnel) sur tout petit écran, pleine largeur mais toujours centré visuellement */
@media (max-width: 420px){
  .mje-ctas .mje-cta,
  .mje-pill,
  .mje-optin .mje-cta,
  .mje-optin button,
  .mje-optin input[type="submit"]{
    width: 100%;
  }
}

/* Icône du bouton "Add to contact list" — plus grande */
.mje-pill .mje-ico-add{
  width: 48px;              /* ← ajuste 26–32px selon ton goût */
  height: 48px;
  flex: 0 0 48px;
  background: center/100% 100% no-repeat
    url("https://www.munksjo.com/wp-content/uploads/2025/10/Munksjo_contact_list_beige.png");
  display: inline-block;
}

/* un peu plus d'espace entre icône et texte */
.mje-pill{ gap: 10px; }



/*MOBIL 1LIGNE*/
/* --- Boutons : pas de retour à la ligne sur smartphone --- */
@media (max-width: 520px){
  /* CTAs verts */
  .mje-ctas .mje-cta,
  .mje-ctas .mje-cta .mje-label{
    white-space: nowrap !important;
  }

  /* Bouton "Add to contact list" */
  .mje-pill{ 
    white-space: nowrap !important;
  }

  /* Bouton d'alerte */
  .mje-optin .mje-cta,
  .mje-optin button,
  .mje-optin input[type="submit"]{
    white-space: nowrap !important;
  }

  /* un peu moins de padding et d'espace pour éviter tout débordement */
  .mje-ctas .mje-cta,
  .mje-pill,
  .mje-optin .mje-cta,
  .mje-optin button,
  .mje-optin input[type="submit"]{
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
  }

  /* icône un chouïa plus petite si besoin */
  .mje-ctas .mje-cta .mje-ico,
  .mje-pill .mje-ico-add{
    width: 28px; height: 28px; flex-basis: 28px;
  }

  /* optionnel : taille de police adaptative pour tenir en une ligne */
  .mje-ctas .mje-cta,
  .mje-pill,
  .mje-optin .mje-cta,
  .mje-optin button,
  .mje-optin input[type="submit"]{
    font-size: clamp(14px, 3.8vw, 16px);
  }
}