/* === Styles généraux === */
body {
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  color: #06668C;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  font-size: 16px;
}

/* === Titres === */
h1, h2, h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #06668C;
}

h1 {
   font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* adaptatif */
  text-transform: uppercase!important;
  font-weight: 700;
  border: none;
  padding-bottom: 0;
}


h2,
h2.elementor-heading-title {
  font-size: clamp(1.8rem, 2vw + 0.5rem, 2.2rem);
  font-weight: 900;
  padding-left: 0;
  border-left: none;
  text-transform: none !important;
  color: #06668C;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* H2 avec bordure gauche uniquement si un conteneur a la classe "with-border" */
.with-border h2,
.with-border .elementor-heading-title {
  border-left: 5px solid #A4BD01;
  padding-left: 1 rem;
}

/* H2 avec bordure gauche uniquement si un conteneur a la classe "with-border" */
.with-border-large h2,
.with-border-large .elementor-heading-title {
  border-left: 5px solid #A4BD01;
  padding-left: 2ch;
}

h3 {
   font-size: clamp(1rem, 1vw + 0.4rem, 1.2rem);
  font-weight: 700;
  color: #06668C;
  border-bottom: 2px solid #A4BD01;
  padding-bottom: 0.2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* === Boutons principaux === */
/* === BOUTON PRINCIPAL PERSONNALISÉ === */
.elementor-button.btn-principal {
  background-color: #A4BD01;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border: 2px solid #A4BD01;
  font-family: 'Arial', sans-serif;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  border-radius: 6px; /* coins arrondis */
}

/* === EFFET SURVOL === */
.elementor-button.btn-principal:hover {
  background-color: #ffffff;
  color: #A4BD01 !important;
  border: 2px solid #A4BD01 !important;
  font-weight: bold;
  border-radius: 6px; /* conserver l'arrondi au survol */
}

/* === Boutons secondaires "Voir plus" === */
/* Appliquer la classe : .btn-secondaire */
.btn-secondaire,
a.btn-secondaire,
.elementor-button.btn-secondaire {
  background-color: transparent;
  color: #A4BD01;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border: 2px solid #A4BD01;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
}

.btn-secondaire:hover,
a.btn-secondaire:hover,
.elementor-button.btn-secondaire:hover {
  background-color: #A4BD01;
  color: #ffffff;
  border: 2px solid #A4BD01;
}

/* === H1 blanc pour photos === */
.white-on-photo {
  color: #fff !important;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  display: inline-block;
  padding: 0.2em 0.4em;
  border: none !important;
}

/* === Responsive === */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 0.75rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1rem;
  }

  .white-on-photo {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 13px;
    padding: 0.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 0.9rem;
  }

  .white-on-photo {
    font-size: 1.5rem;
  }
}


/* === profils css === */

.profil-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f1f1f1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s;
}

.profil-icon:hover {
    background: #e5e5e5;
}

.profil-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #a4bd01;
    object-fit: cover;
}

.profil-name {
    display: none;
}

.profil-dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    min-width: 180px;
}

.profil-dropdown-menu a {
    display: block;
    padding: 12px 16px;
    color: #06668C;
    background-color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid #f0f0f0;
}

.profil-dropdown-menu a:hover {
    background-color: #A4BD01;
    color: #ffffff;
}

@media (min-width: 768px) {
    .profil-name {
        display: inline-block;
    }
}
/* Styles spécifiques pour le bloc dans conteneur-texte-image */
.conteneur-texte-image .conteneur-flex {
  display: flex;
  flex-direction: row;
  gap: 20px; /* espace entre texte et image */
}

.conteneur-texte-image .conteneur-flex .image {
  display: flex;
  align-items: center; /* centre verticalement l'image */
  justify-content: center; /* centre horizontalement si besoin */
}

.conteneur-texte-image .conteneur-flex .image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.conteneur-texte-image .conteneur-flex .texte {
  /* Ajoute ici des styles spécifiques au texte si besoin */
}

footer .title {
  color: #A4BD01;
  font-weight: bold;
}

/* ==========================================
   Style spécial pour liens Coservio
   À appliquer uniquement dans une zone
   en ajoutant la classe .link-coservio
   ========================================== */

a.link-coservio {
   text-decoration: underline !important;
  text-decoration-color: #a4bd01 !important;
}

a.link-coservio:hover,
a.link-coservio:focus {
  text-decoration: underline !important;
  text-decoration-color: #a4bd01 !important;
}

/*=========================================
 * Style special pour la zone Pourqui de apropos
 * =======================================*/
/* ===== SECTION : fond différencié (bande légère) + carte + halo ===== */
.who-section{
  position:relative;
  padding:3.5rem 0;
  background: linear-gradient(180deg,#f8fbff 0%, #ffffff 40%, #f8fbff 100%);
  border-top:1px solid #e6f0fb;
  border-bottom:1px solid #e6f0fb;
}
.who-section .who-rays{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding:2rem 1.75rem;
  z-index:1;
}
@media (min-width:769px){
  .who-section .who-rays{ padding:2.5rem 2.25rem; }
}
/* Halo doux centré */
.who-section::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(420px 420px at 50% 50%, rgba(0,115,230,.08), transparent 70%);
}

/* ===== TITRE EXTERNE ===== */
.who-section .who-title{
  text-align:center;
  margin:0 0 1.2rem; /* base mobile */
}

/* ===== FALLBACK MOBILE (liste) ===== */
.who-section .who-rays{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  max-width:1200px;
  margin:0 auto 2rem;
  text-align:center;
}

/* ===== ÉLÉMENTS (catégories) ===== */
.who-section .who-item{
  position:relative;
  max-width:520px;
  padding-left:1rem;   /* place pour la barre verte à GAUCHE */
}
/* Barre verte (toujours à GAUCHE) */
.who-section .who-item::before{
  content:"";
  position:absolute;
  left:.25rem;
  top:.35rem;
  bottom:.35rem;
  width:2px;
  background:#a4bd01;
  border-radius:2px;
}

/* Chip (contour + texte verts) */
.who-section .who-chip{
  display:inline-block;
  background:#fff;
  color:#a4bd01;
  border:2px solid #a4bd01;
  border-radius:20px;
  padding:.55rem 1rem;
  font-weight:700;
  line-height:1.2;
  margin-bottom:.4rem;
  transition:box-shadow .25s ease, background .25s ease;
  position:relative;          /* pour la boule */
  margin-left:.25rem;         /* petit décalage depuis la barre */
}
.who-section .who-chip:hover{
  background:#f9fdf1;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
/* Boule verte (toujours à GAUCHE) */
.who-section .who-chip::before{
  content:"";
  position:absolute;
  left:-.65rem;
  top:50%;
  transform:translateY(-50%);
  width:.55rem; height:.55rem;
  border-radius:50%;
  background:#a4bd01;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px #a4bd0122;
}

/* Descriptions (métier) en bleu du thème */
.who-section .who-desc{
  margin:0;
  color:var(--e-global-color-primary, #0073e6);
  font-size:1rem;
  line-height:1.55;
  font-weight:500;
  letter-spacing:.1px;
}

/* ===== CENTRE (H2) : pastille blanche + contour/texte bleus + 4 boules bleues ===== */
.who-section .who-center{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
}
.who-section .who-center-chip.elementor-heading-title{
  display:inline-block;
  background:#fff;
  color:var(--e-global-color-primary, #0073e6);
  border:3px solid var(--e-global-color-primary, #0073e6);
  padding:1.1rem 2.2rem;      /* “fond plus gros” */
  border-radius:44px;
  margin:0;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  font-weight:800;
  line-height:1.15;           /* parfait pour "Vraiment<br>pour tous" */
  text-align:center;
  position:relative;          /* pour boules G/D */
  white-space:normal;
}
/* Boules bleues gauche/droite (sur le H2) */
.who-section .who-center-chip.elementor-heading-title::before,
.who-section .who-center-chip.elementor-heading-title::after{
  content:"";
  position:absolute;
  width:.7rem; height:.7rem;
  border-radius:50%;
  background:var(--e-global-color-primary, #0073e6);
  box-shadow:0 0 0 3px #e6f0fb;
  top:50%; transform:translateY(-50%);
}
.who-section .who-center-chip.elementor-heading-title::before{ left:-1.2rem; }
.who-section .who-center-chip.elementor-heading-title::after{ right:-1.2rem; }
/* Boules bleues haut/bas (sur le conteneur centre) */
.who-section .who-center::before,
.who-section .who-center::after{
  content:"";
  position:absolute; left:50%;
  width:.7rem; height:.7rem;
  border-radius:50%;
  background:var(--e-global-color-primary, #0073e6);
  box-shadow:0 0 0 3px #e6f0fb;
  transform:translateX(-50%);
}
.who-section .who-center::before{ top:-1.2rem; }
.who-section .who-center::after{ bottom:-1.2rem; }

/* ===== ORDI & TABLETTE (>=769px) : layout radial "autour du centre" ===== */
@media (min-width: 769px){
  .who-section .who-rays{
    display:grid;
    grid-template-columns: minmax(360px, 1.25fr) auto minmax(360px, 1.25fr);
    grid-template-rows: auto auto auto;
    gap:2rem 3rem;
    align-items:center;
    text-align:center;
    max-width:1200px;
    margin:0 auto 2.5rem;
  }

  /* Placement des 8 éléments autour du centre */
  .who-section .pos-tl{ grid-column:1; grid-row:1; text-align:right; }
  .who-section .pos-tc{ grid-column:2; grid-row:1; }
  .who-section .pos-tr{ grid-column:3; grid-row:1; text-align:left; }

  .who-section .pos-ml{ grid-column:1; grid-row:2; text-align:right; }
  .who-section .who-center{ grid-column:2; grid-row:2; } /* centre */
  .who-section .pos-mr{ grid-column:3; grid-row:2; text-align:left; }

  .who-section .pos-bl{ grid-column:1; grid-row:3; text-align:right; }
  .who-section .pos-bc{ grid-column:2; grid-row:3; }
  .who-section .pos-br{ grid-column:3; grid-row:3; text-align:left; }

  /* Largeurs : colonnes G/D plus larges ; haut/bas plus sages */
  .who-section .pos-tl,
  .who-section .pos-tr,
  .who-section .pos-ml,
  .who-section .pos-mr,
  .who-section .pos-bl,
  .who-section .pos-br{ max-width:560px; }
  .who-section .pos-tc,
  .who-section .pos-bc{ max-width:460px; }

  /* Plus d’espace sous le titre externe */
  .who-section .who-title{ margin-bottom:2.5rem; }
}

/* ===== SMARTPHONE (<=768px) : liste simple, sans pastille centrale ===== */
@media (max-width: 768px){
  .who-section .who-center{ display:none; }    /* pastille centrale masquée en mobile */
  .who-section .who-rays{
    display:flex;               /* fallback colonne */
    flex-direction:column;
    gap:1.25rem;
    padding:0 1rem;
  }
  .who-section .who-item{ max-width:100%; }
}