/* =========================================================
   Thème Institut — CSS propre et commenté
   - Variables
   - Base
   - Header (logo + nav + hamburger)
   - Sections (Hero, Stats, Features, Pages)
   - Footer (grid + socials)
   - Responsive (nav mobile, grilles, logo)
   ========================================================= */

/* ========== Variables ========== */
:root{
  --radius:16px;
  --primary:#0C6870;
  --secondary:#C17D39;
  --accent:#4CE0B3;
  --muted:#F5F5F5;
  --text:#111111;
  --bg:#FFFFFF;

  /* Brand colors socials */
  --fb:#1877F2;   /* Facebook */
  --in:#0A66C2;   /* LinkedIn */
  --ig:#E4405F;   /* Instagram */
  --tt:#000000;   /* TikTok */
  --wa:#25D366;   /* WhatsApp */
}

/* ========== Base ========== */
*{box-sizing:border-box}
body{margin:0;font-family:Poppins,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* =========================================================
   HEADER
   ========================================================= */
.ivp-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;gap:12px;align-items:center}
.site-title{font-weight:700;color:#111}

/* Logo (l’image a la classe .logo) */
.logo{
  max-height:170px;     /* desktop */
  min-height:100px;
  height:auto;
  width:auto;
  object-fit:contain;
  border-radius:8px;
}

/* Navigation (desktop) */
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.main-nav li a{padding:8px 10px;border-radius:8px}
.main-nav li a:hover{background:var(--muted)}

/* Boutons / CTA */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:0;font-weight:600;transition:.2s transform,.2s opacity}
.btn-cta{background:var(--secondary);color:#fff}
.btn-cta:hover{opacity:.95;transform:translateY(-1px)}
.btn-secondary{background:var(--accent);color:#fff}

/* Hamburger (masqué par défaut, affiché en mobile) */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center;border-radius:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:#111;transition:.2s}

/* Animation hamburger → croix */
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* =========================================================
   SECTIONS
   ========================================================= */
/* Hero */
.hero{position:relative;min-height:68vh;background-size:cover;background-position:center}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.55))}
.hero-inner{position:relative;padding:120px 0;color:#fff;max-width:900px}
.hero h1{font-size:48px;margin:0 0 12px}
.hero .lead{font-size:20px;opacity:.9;margin-bottom:24px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Stats */
.stats{background:var(--muted);padding:32px 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:#fff;border-radius:var(--radius);padding:22px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.stat .count{font-size:40px;font-weight:700;display:block}

/* Features & Grids */
.features{padding:56px 0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.center{text-align:center}
.mt-32{margin-top:32px}
.mt-16{margin-top:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* Pages */
.page{padding:40px 0}
.page h1{margin-top:0}
.team-card img{width:100%;height:auto;border-radius:50%}
.notice{background:#E6FFED;border-left:4px solid #34D399;padding:12px;border-radius:8px;margin:12px 0}
.faq details{background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 8px 24px rgba(0,0,0,.05)}

/* =========================================================
   FOOTER (NETTOYÉ)
   ========================================================= */
.ivp-footer{
  background:#1C2A2E;
  color:#C7D2DA;
  margin-top:48px;
  padding:28px 0 18px;                 /* bandeau plus compact */
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;  /* Vision • Liens • Contact • Suivez-nous */
  gap:28px;
  align-items:start;
}
.ivp-footer h4,.ivp-footer h5{color:#fff;margin:0 0 10px}
.ivp-footer p{margin:0 0 10px;line-height:1.6;max-width:48ch}
.footer-vision{margin:0;line-height:1.7;opacity:.95;max-width:52ch}

/* Liens: pas d’indent, style simple */
.ivp-footer .menu,
.ivp-footer .menu ul{list-style:none;margin:0;padding:0}
.ivp-footer .menu li{margin:6px 0}
.ivp-footer .menu a{color:#C7D2DA;text-decoration:none}
.ivp-footer .menu a:hover{text-decoration:underline}

/* Contact */
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{margin-bottom:6px}

/* Ligne copyright */
.footer-copy{padding-top:12px;border-top:1px solid rgba(255,255,255,.12);text-align:center;margin-top:16px}

/* ===== Suivez-nous — carrés colorés empilés ===== */

/* Icônes réseaux en ligne */
.socials--stack {
  display: flex;
  gap: 8px; /* espace horizontal */
  flex-wrap: wrap; /* passe à la ligne si pas assez de place */
}
.socials--stack li {
  margin: 0; /* plus d'espacement vertical */
}


/* carré coloré + icône blanche */
.social{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:48px; height:48px;            /* carré */
  padding:0;
  border-radius:12px;                  /* carré doux (mettre 4px pour plus carré) */
  color:#fff;                          /* icône blanche */
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.social svg{width:20px;height:20px;fill:currentColor}

/* couleurs de marque */
.social--facebook { background:#1877F2; }
.social--linkedin { background:#0A66C2; }
.social--instagram{ background:#E4405F; }
.social--tiktok    { background:#000000; }
.social--whatsapp  { background:#25D366; }

.social:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  filter:brightness(1.05);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Nav mobile / panneau latéral + hamburger visible */
@media (max-width:900px){
  .nav-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-left:auto;
  }

  /* cache la nav par défaut en mobile */
  .main-nav{display:none}

  /* nav ouverte = panneau fixe à droite */
/* nav ouverte = panneau fixe à droite, calé sous le header */
.main-nav.is-open{
  display:flex;
  position:fixed; right:0; 
  top: var(--header-h, 120px);
  width:85%; max-width:320px;
  height: calc(100vh - var(--header-h, 120px));
  background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.08);
  padding:16px; flex-direction:column; gap:12px; z-index:1000;
}
  body.admin-bar .main-nav.is-open{top:calc(64px + 32px);height:calc(100vh - 96px)}
  .main-nav ul{flex-direction:column;gap:10px}
  .main-nav .btn-cta{align-self:flex-start}
  body.menu-open{overflow:hidden}

  /* header/texte plus compacts */
  .header-wrap{padding:10px 0}
  .site-title{font-size:16px}
}

/* Grilles / hero responsives */
@media (max-width:900px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero-inner{padding:80px 0}
  .hero h1{font-size:32px}
  .logo{max-height:76px;min-height:56px}  /* logo + petit sur mobile */
}
@media (max-width:420px){
  .logo{max-height:78px;min-height:56px}
}

/* ===== Section Événements Accueil ===== */
.events-home{padding:56px 0}
.events-home h2{font-size:2rem;margin-bottom:32px}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.event-card{position:relative;overflow:hidden;border-radius:12px;display:block;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.event-card img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .35s ease}
.event-card:hover img{transform:scale(1.04)}
.event-card-title{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));color:#fff}
.event-card-title .event-meta{font-size:.9rem;opacity:.9;margin-bottom:4px}
.event-card-title .event-title{font-size:1.15rem;font-weight:700;line-height:1.3}
@media (max-width:900px){.events-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.events-grid{grid-template-columns:1fr}}

/* ===== Scroll reveal (animations légères, SEO safe) ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform}
.reveal.reveal-in{opacity:1;transform:translateY(0)}

/* --- Footer socials : icônes carrées, empilées, sans label --- */
.ivp-footer .socials.socials--stack{
 
  list-style:none; margin:8px 0 0 0; padding:0;
}
.ivp-footer .socials.socials--stack li{ margin:0; }

.ivp-footer .socials.socials--stack .social{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:48px !important; height:48px !important;   /* carré */
  padding:0 !important;
  border-radius:10px !important;                    /* adouci – mets 4px pour plus “carré” */
  color:#fff !important;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.ivp-footer .socials.socials--stack .social svg{
  width:20px !important; height:20px !important; fill:currentColor;
}
.ivp-footer .socials.socials--stack .social:hover{
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); filter:brightness(1.05);
}

/* couleurs “brand” */
.ivp-footer .social--facebook { background:#1877F2 !important; }
.ivp-footer .social--linkedin { background:#0A66C2 !important; }
.ivp-footer .social--instagram{ background:#E4405F !important; }
.ivp-footer .social--tiktok    { background:#000000 !important; }
.ivp-footer .social--whatsapp  { background:#25D366 !important; }

/* cacher le texte si tu ne veux que les icônes */
.ivp-footer .social-label{ display:none !important; }

/* footer plus compact */
.ivp-footer{ padding:28px 0 18px !important; }
.footer-copy{ margin-top:14px; padding-top:10px; }
/* === Palette étendue harmonisée (à partir de ta charte) === */
:root{
  /* base déjà utilisée */
  --primary:#0C6870;      /* pétrole IPLAP */
  --secondary:#C17D39;    /* brun académique */
  --accent:#4CE0B3;       /* vert menthe */
  --info:#279AF1;         /* bleu vif */
  --muted:#F5F5F5;        /* gris clair */
  --text:#111111;
  --bg:#FFFFFF;

  /* teintes complémentaires issues de ta palette fournie */
  --blue-soft:#6D98BA;    /* bleu doux */
  --plum:#8B728E;         /* prune */
  --sand:#CCAF91;         /* sable */

  /* variantes utiles pour les états */
  --primary-700:#0A4E55;
  --primary-600:#0B5B62;
  --secondary-700:#8E5E2B;
  --secondary-600:#A66A2E;
  --accent-700:#2CB792;
  --accent-600:#3BD8A9;
  --neutral-900:#1C2A2E;  /* pour fonds sombres */
}

/* === Liens globaux cohérents === */
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-600); text-decoration:underline; }
a:focus-visible{ outline:3px solid color-mix(in srgb, var(--info) 40%, transparent); outline-offset:2px; border-radius:6px; }

/* === Boutons : états normal / hover / focus / active === */
.btn{ transition:.2s transform,.2s opacity,.2s box-shadow; }
.btn-cta{ background:var(--secondary); color:#fff; }
.btn-cta:hover{ background:var(--secondary-600); transform:translateY(-1px); }
.btn-cta:active{ transform:translateY(0); box-shadow:inset 0 2px 8px rgba(0,0,0,.15); }
.btn-cta:focus-visible{ outline:3px solid color-mix(in srgb, var(--secondary) 40%, transparent); outline-offset:2px; }

.btn-secondary{ background:var(--accent); color:#fff; }
.btn-secondary:hover{ background:var(--accent-600); transform:translateY(-1px); }
.btn-secondary:active{ transform:translateY(0); box-shadow:inset 0 2px 8px rgba(0,0,0,.15); }
.btn-secondary:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px; }

/* === Navigation : survol & focus harmonisés === */
.main-nav li a{ color:var(--text); }
.main-nav li a:hover{ background:var(--muted); color:var(--primary-700); }
.main-nav li a:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset:3px; }

/* === Titres : tailles et poids cohérents (optionnel mais conseillé) === */
h1{ font-size:clamp(28px, 4.2vw, 48px); line-height:1.15; }
h2{ font-size:clamp(22px, 3vw, 32px);  line-height:1.2; }
h3{ font-size:clamp(18px, 2.2vw, 24px);line-height:1.25; }

/* === Cartes / blocs : hover léger standardisé === */
.card, .event-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .event-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* === Badges/étiquettes (si besoin rapide) === */
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:.85rem; }
.badge--info{ background: color-mix(in srgb, var(--info) 16%, #fff); color: var(--info); }
.badge--accent{ background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--accent); }

/* --- Boutons : jamais soulignés, même au hover --- */
.btn,
.btn:hover,
.btn:active,
.btn:focus {
  text-decoration: none !important;
}

/* --- Variante moderne pour les boutons “Inscription” --- */
/* Idéal si tu peux ajouter la classe .btn-inscription aux CTAs “Inscription” */
.btn-inscription{
  --bg1: var(--secondary);
  --bg2: var(--secondary-700, #8E5E2B);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  box-shadow: 0 8px 22px rgba(0,0,0,.18),
              0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn-inscription::after{
  content:"→";
  font-weight:800;
  transform: translateX(0);
  transition: transform .18s ease;
}
.btn-inscription:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.btn-inscription:hover::after{ transform: translateX(3px); }
.btn-inscription:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.18) inset; }
.btn-inscription:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--secondary) 40%, transparent);
  outline-offset: 2px;
}


/* Option : version “clair/ghost” si besoin sur fond sombre (ex: hero) */
.btn-inscription--ghost{
  background: rgba(255,255,255,.1);
  color:#fff;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.22) inset;
}
.btn-inscription--ghost:hover{ background: rgba(255,255,255,.16); }


/* --- Bouton “Inscription” version moderne --- */
.btn-inscription {
  --bg1: var(--secondary);
  --bg2: var(--secondary-700, #8E5E2B);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  box-shadow: 0 8px 22px rgba(0,0,0,.18),
              0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.btn-inscription::after {
  content: "→";
  font-weight: 800;
  transform: translateX(0);
  transition: transform .18s ease;
}

.btn-inscription:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.btn-inscription:hover::after {
  transform: translateX(3px);
}

.btn-inscription:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.18) inset;
}

.btn-inscription:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--secondary) 40%, transparent);
  outline-offset: 2px;
}

/* ===== Fix: ne jamais styliser les boutons comme des liens normaux ===== */

/* 1) Le hover global des liens NE s'applique pas aux boutons */
a:not(.btn):not(.btn-cta):not(.btn-secondary):not(.btn-inscription):hover {
  color: var(--primary-600);
  text-decoration: underline;
}

/* 2) Dans la nav, ne change la couleur qu'aux liens non-boutons */
.main-nav li a:not(.btn):hover {
  background: var(--muted);
  color: var(--primary-700);
}

/* 3) Boutons : couleur toujours blanche + jamais souligné */
.btn,
.btn-cta,
.btn-secondary,
.btn-inscription,
.btn:hover,
.btn-cta:hover,
.btn-secondary:hover,
.btn-inscription:hover,
.btn:focus,
.btn-cta:focus,
.btn-secondary:focus,
.btn-inscription:focus {
  color: #fff !important;
  text-decoration: none !important;
}

/* 4) Sécurité : même si un style externe cible 'a:hover' */
a.btn:hover,
a.btn-cta:hover,
a.btn-secondary:hover,
a.btn-inscription:hover {
  color: #fff !important;
  text-decoration: none !important;
}
/* Contrainte douce sur les images des contenus d'événements */
.single-evenement .entry-content img,
.single-evenement .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
/* === Single Événement === */
.single-event .event-title{
  margin: 0 0 8px;
}
.single-event .event-meta{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text);
}
.single-event .event-meta .meta-label{
  font-weight: 600;
  opacity: .9;
  margin-right: 6px;
}
.single-event .meta-phone{
  color: var(--primary);
  text-decoration: none;
}
.single-event .meta-phone:hover{
  text-decoration: underline;
}

.single-event .event-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.single-event .event-media{
  position: relative;
}
.single-event .event-thumb{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  object-fit: cover;
}
.single-event .event-content p{
  line-height: 1.75;
}

/* Responsive */
@media (max-width: 1024px){
  .single-event .event-layout{
    grid-template-columns: 1fr; /* image au-dessus, contenu en-dessous */
  }
}

/* === Single Événement (mise en page + bouton WhatsApp) === */
.single-event .event-title{ margin:0 0 8px; }
.single-event .event-meta{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; gap:16px; flex-wrap:wrap; color:var(--text);
}
.single-event .event-meta .meta-label{ font-weight:600; opacity:.9; margin-right:6px; }
.single-event .meta-phone{ color:var(--primary); text-decoration:none; }
.single-event .meta-phone:hover{ text-decoration:underline; }

.single-event .event-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
.single-event .event-media{ position:relative; }
.single-event .event-thumb{
  width:100%; height:auto; display:block; object-fit:cover;
  border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.single-event .event-content p{ line-height:1.75; }

@media (max-width:1024px){
  .single-event .event-layout{ grid-template-columns:1fr; }
}

/* Bouton WhatsApp (look moderne, harmonisé) */
.btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  color:#fff !important; text-decoration:none !important;
  background: linear-gradient(135deg, #25D366, #1DA851);
  box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn-whatsapp:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.btn-whatsapp:active{ transform:translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.18) inset; }
.btn-whatsapp:focus-visible{
  outline:3px solid rgba(37,211,102,.35); outline-offset:2px;
}

/* === Archive Événements : filtres + pagination === */
.archive-events .archive-head { margin-bottom: 16px; }
.archive-events .archive-sub { opacity:.9; }

.events-filters {
  background: var(--muted);
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0 24px;
}
.events-filters .filter-row {
  display: grid;
  grid-template-columns: 150px 170px 1fr auto;
  gap: 12px;
  align-items: end;
}
.events-filters .filter-item { display:flex; flex-direction:column; gap:6px; }
.events-filters .filter-item span { font-size:.9rem; opacity:.85; }
.events-filters select,
.events-filters input[type="month"],
.events-filters input[type="search"] {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.events-filters .filter-actions { display:flex; gap:10px; }

@media (max-width: 900px){
  .events-filters .filter-row {
    grid-template-columns: 1fr 1fr;
  }
  .events-filters .filter-actions { grid-column: 1 / -1; }
}

.events-pagination {
  display:flex;
  justify-content:center;
  margin-top: 24px;
}
.events-pagination .page-numbers {
  display:inline-block; margin:0 4px; padding:8px 12px;
  border-radius: 8px; background:#fff; border:1px solid #e5e7eb;
}
.events-pagination .page-numbers.current {
  background: var(--primary); color:#fff; border-color: transparent;
}
.events-pagination a.page-numbers:hover { background: var(--muted); }
/* Icônes métadonnées événements */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 4px;
}
.event-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.event-meta .meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
}

/* ==== Meta ligne dans single-evenement ==== */
.event-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px 28px;
  align-items:center;
  list-style:none;
  margin: 8px 0 18px 0;
  padding:0;
}
.meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
}
.meta-icon svg{
  width:18px; height:18px; display:block; fill: currentColor;
  color: var(--primary);
}
.meta-label{
  font-weight:600; color:#333;
}
.meta-value{ color:#111; }
.meta-value.link{ color: var(--primary); text-decoration: none; }
.meta-value.link:hover{ color: var(--primary); text-decoration: underline; }

/* Responsive resserré si besoin */
@media (max-width: 640px){
  .event-meta-row{ gap:12px 20px; }
  .meta-item{ font-size:15px; }
  .meta-icon svg{ width:17px; height:17px; }
}

.event-meta-row{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center;
  list-style:none; margin:8px 0 18px 0; padding:0;
}
.meta-item{ display:flex; align-items:center; gap:8px; font-size:16px; }
.meta-icon svg{ width:18px; height:18px; fill:currentColor; color:var(--primary); }
.meta-label{ font-weight:600; color:#333; }
.meta-value{ color:#111; }
.meta-value.link{ color:var(--primary); text-decoration:none; }
.meta-value.link:hover{ text-decoration:underline; }
@media (max-width:640px){
  .event-meta-row{ gap:12px 20px; }
  .meta-item{ font-size:15px; }
  .meta-icon svg{ width:17px; height:17px; }
}

/* Meta ligne + icônes */
.event-meta{
  display:flex; flex-wrap:wrap; gap:18px 28px;
  list-style:none; margin:8px 0 18px; padding:0;
}
.event-meta .meta-item{
  display:flex; align-items:center; gap:8px; font-size:16px;
}
.event-meta .meta-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--primary);
}
.event-meta .meta-icon svg{
  width:18px; height:18px; fill:currentColor; display:block;
}
.event-meta .meta-label{ font-weight:600; margin-right:4px; }
.event-meta .meta-phone{ color:var(--primary); text-decoration:none; }
.event-meta .meta-phone:hover{ text-decoration:underline; }
.archive-filters {
    margin-bottom: 20px;
}
.archive-filters a {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.archive-filters a.active {
    background: var(--secondary);
}
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.event-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.event-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.event-info {
    padding: 15px;
}
.event-title {
    margin: 0 0 10px;
    font-size: 18px;
}
.event-date, .event-location {
    font-size: 14px;
    color: #555;
    margin: 0 0 5px;
}
.btn.btn-primary {
    display: inline-block;
    padding: 8px 12px;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.btn.btn-primary:hover {
    background: var(--secondary);
}
/* Filtres */
.archive-filters {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.archive-filters .filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}
.archive-filters .filter-btn.active,
.archive-filters .filter-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Grille responsive */
.events-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte événement */
.event-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.event-card:hover {
    transform: translateY(-5px);
}
.event-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.event-card:hover .event-image img {
    transform: scale(1.05);
}
.event-info {
    padding: 15px;
}
.event-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* Animation reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.reveal-in {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Archive Événements ===== */
.archive-evenements .archive-header{margin:18px 0 24px}
.archive-evenements .archive-title{margin:0 0 6px;font-size:clamp(28px,4vw,42px)}
.archive-evenements .archive-subtitle{margin:0 0 14px;opacity:.8}

.archive-evenements .archive-filters{display:flex;gap:10px;flex-wrap:wrap}
.archive-evenements .filter-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:var(--muted);color:var(--text);
  text-decoration:none;font-weight:600;
  transition:transform .15s ease, background .15s ease;
}
.archive-evenements .filter-btn:hover{transform:translateY(-1px)}
.archive-evenements .filter-btn.active{
  background:var(--secondary);color:#fff;
}

/* grille & cartes */
.archive-evenements .events-grid{
  display:grid;gap:18px;grid-template-columns:1fr 1fr;
}
@media (max-width:900px){.archive-evenements .events-grid{grid-template-columns:1fr}}

.archive-evenements .event-card{
  display:grid;grid-template-columns:260px 1fr;gap:16px;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
@media (max-width:640px){.archive-evenements .event-card{grid-template-columns:1fr}}

.archive-evenements .event-image img{
  width:100%;height:100%;min-height:200px;object-fit:cover;display:block;
}
.archive-evenements .event-info{padding:16px}
.archive-evenements .event-title{margin:0 0 6px;font-size:1.2rem}
.archive-evenements .event-date,.archive-evenements .event-location{
  margin:2px 0 8px;opacity:.9
}
.archive-evenements .no-events{margin:24px 0;opacity:.8}

/* pagination simple */
.archive-evenements .pagination{margin:22px 0;display:flex;gap:8px;flex-wrap:wrap}

/* === Contact page === */
.contact-hero{
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, #fff), #fff 40%, color-mix(in srgb, var(--accent) 10%, #fff));
  padding: 56px 0 36px;
  text-align: center;
}
.contact-hero h1{ margin:0 0 8px; font-size: clamp(28px,4.2vw,44px); }
.contact-hero .lead{ margin:0; opacity:.85; }

.contact-cards .cards-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1024px){ .contact-cards .cards-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:600px){ .contact-cards .cards-grid{ grid-template-columns: 1fr;} }

.c-card{
  background:#fff; border-radius:16px; padding:20px; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.c-card:hover{ transform: translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.c-card h3{ margin:10px 0 6px; }
.c-card p{ margin:0; opacity:.9; }
.c-card a{ color:var(--primary); text-decoration:none; }
.c-card a:hover{ text-decoration:underline; }

.c-icon{
  width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; color:#fff;
}
.c-icon svg{ width:26px; height:26px; }
.c-grad-pink{   background: radial-gradient(circle at 30% 30%, #ff7096, #e4405f); }
.c-grad-blue{   background: radial-gradient(circle at 30% 30%, #5aa8ff, #0a66c2); }
.c-grad-green{  background: radial-gradient(circle at 30% 30%, #36e27f, #1da851); }
.c-grad-purple{ background: radial-gradient(circle at 30% 30%, #a78bfa, #7c3aed); }

.contact-form-wrap .two-cols{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start;
  margin: 16px auto 0;
}
@media (max-width:1024px){ .contact-form-wrap .two-cols{ grid-template-columns:1fr; } }

.contact-form h2{ margin:0 0 10px; }
.contact-form .grid{
  display:grid; gap:12px; grid-template-columns: 1fr 1fr;
}
.contact-form .field--full{ grid-column: 1 / -1; }
@media (max-width:700px){ .contact-form .grid{ grid-template-columns:1fr; } }

.contact-form label{ font-weight:600; font-size:.95rem; margin-bottom:6px; display:block; }
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:12px;
  font: inherit;
}
.contact-form textarea{ resize: vertical; }

.alert{ border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.alert.success{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert.error{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.map-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06); margin-bottom:16px;
}
.map-grad{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px; color:#fff;
  background: linear-gradient(90deg, #25D366, #1DA851);
}
.map-grad svg{ width:30px; height:30px; margin-bottom:8px; }
.map-embed iframe{ width:100%; height:300px; border:0; display:block; }

.visit-card{
  background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.visit-card h3{ margin:0 0 6px; }
.visit-card p{ margin:0 0 10px; }

/* ===== Page Contact ===== */
.contact-hero{
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, #fff), #fff);
  padding: 48px 0 24px;
}
.contact-hero h1{ margin:0 0 6px; font-size: clamp(28px,4vw,42px); }
.contact-hero .lead{ opacity:.9; margin:0; }

/* Cartes infos (4) */
.contact-cards{
  display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin:24px 0 8px;
}
@media (max-width: 1000px){ .contact-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .contact-cards{ grid-template-columns: 1fr; } }

.contact-card{
  background:#fff; border-radius:16px; padding:20px; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ transform: translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.contact-card h3{ margin:10px 0 6px; }
.contact-card p{ margin:0; opacity:.95; }
.contact-card a{ color:var(--primary); }

/* Icônes rondes dégradées */
.card-icon{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:8px;
}
.card-icon svg{ width:26px; height:26px; }
.icon-gradient.pink{   background: linear-gradient(135deg, #FF6A88, #FF99AC); }
.icon-gradient.blue{   background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.icon-gradient.green{  background: linear-gradient(135deg, #22C55E, #34D399); }
.icon-gradient.purple{ background: linear-gradient(135deg, #8B5CF6, #A78BFA); }


.card{
  background:#fff; border-radius:16px; padding:18px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.contact-form h2{ margin:0 0 12px; }
.notice{ border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.notice.success{ background:#E7F9EF; border:1px solid #34D399; }
.notice.error{ background:#FDECEC; border:1px solid #EF4444; }

/* Champs formulaire */
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.form-field input, .form-field textarea{
  padding:12px 12px; border:1px solid #e5e7eb; border-radius:10px; font: inherit;
}

/* Map + Visite */
.map-card.gradient{
  border-radius:16px; padding:0; overflow:hidden;
  background: linear-gradient(135deg, #22C55E, #3B82F6);
  color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.map-head{ display:flex; align-items:center; gap:10px; padding:16px; }
.map-head svg{ width:22px; height:22px; }
.map-embed{ background:#fff; }
.map-embed iframe{ display:block; width:100%; height:260px; border:0; }
.map-addr{ padding:12px 16px 16px; margin:0; }

.visit-card p{ margin:6px 0 12px; }

/* FAQ */
.contact-faq{ background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--primary) 6%, #fff)); padding:36px 0; margin-top:10px; }
.contact-faq .subtitle{ opacity:.85; margin:6px 0 18px; }
.faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 900px){ .faq-grid{ grid-template-columns: 1fr; } }
.faq-card h4{ margin:0 0 8px; }



.contact-card,
.map-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Form */
.contact-card .card-inner {
  padding: 18px;
}

/* Carte */
.map-card .map-head {
  padding: 14px 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(135deg, #2ecc71, #2575fc);
}
.map-card .map-body {
  padding: 0;
}
.map-card iframe {
  display: block;
  width: 100%;
  height: 320px;  /* ajuste si besoin */
  border: 0;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}



.contact-form button.btn {
  width: 100%;
  margin-top: 1rem;
}

/*
.contact-form{ background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--primary) 6%, #fff)); padding:36px 0; margin-top:10px; }
.contact-faq .subtitle{ opacity:.85; margin:6px 0 18px; }
*/
.contact-form.card, .contact-side{ width:100%; }

.contact-form .form-row{
  display:grid; gap:12px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px){
  .contact-form .form-row{ grid-template-columns: 1fr; }
}

.contact-form .form-field input,
.contact-form .form-field textarea{
  width:100%;
}

.contact-form .btn{ width:100%; margin-top:10px; }

.contact-side{ display:flex; flex-direction:column; gap:16px; }

.map-card{ width:100%; }
.map-embed iframe{ width:100% !important; height:360px; border:0; display:block; }



  .contact-side {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .map-card {
    flex: 1; /* Prend tout l'espace vertical */
    display: flex;
    flex-direction: column;
  }

  .map-embed {
    flex: 1; /* Fait grandir la carte */
  }

  .map-embed iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }



/* Colonne droite : la carte occupe toute la hauteur disponible */
.page.contact-page .contact-side{
  display: flex;
  flex-direction: column;
}

.page.contact-page .map-card{
  flex: 1;                         /* prend tout l'espace vertical */
  display: flex;
  flex-direction: column;
}

.page.contact-page .map-embed{
  flex: 1;
}

.page.contact-page .map-embed iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Grille des 4 cartes du haut bien réparties et centrées */
.page.contact-page .contact-cards{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}

@media (max-width: 1100px){
  .page.contact-page .contact-cards{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .page.contact-page .contact-cards{ grid-template-columns: 1fr; }
}


/* colonne droite en pile, prend bien la hauteur */
.page.contact-page .contact-side{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* la carte ne doit PAS se centrer ni avoir de largeur fixe */
.page.contact-page .map-card{
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* l’iframe occupe 100% de la carte */
.page.contact-page .map-embed{ flex: 1 1 auto; }
.page.contact-page .map-embed iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

body {
  background: linear-gradient(
    to bottom,
    var(--primaire) 0%,
    var(--accent) 50%,
    var(--muted) 100%
  );
}







/* Colonne droite en pile, pleine largeur */
.page.contact-page .contact-side{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

/* La carte occupe 100% de sa colonne, pas de centrage */
.page.contact-page .map-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  flex:1 1 auto !important;
}

/* L’iframe remplit la carte */
.page.contact-page .map-embed{ flex:1 1 auto !important; }
.page.contact-page .map-embed iframe{
  display:block !important;
  width:100% !important;
  height:100% !important;  /* la carte prend toute la hauteur dispo de .map-card */
  border:0 !important;
}







/* la carte occupe bien la hauteur disponible */
.page.contact-page .contact-side{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}
.page.contact-page .map-card{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.page.contact-page .map-embed{ flex: 1 1 auto; }
.page.contact-page .map-embed iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}
/* ====== PISTE FINALE : grille Contact centrée et symétrique ======
   - 2 colonnes IDENTIQUES centrées (form + carte)
   - pas de largeur forcée ailleurs
   - pile verticale en < 1140px
--------------------------------------------------------------- */
.page.contact-page .contact-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 560px)) !important; /* 2 colonnes égales */
  justify-content:center !important;  /* centre l'ensemble dans .container */
  align-items:stretch !important;
  gap:24px !important;
}
.page.contact-page .contact-grid > .contact-form,
.page.contact-page .contact-grid > .contact-side{
  max-width:560px !important;
  width:100% !important;
  margin:0 !important;
  min-width:0 !important;
}
.page.contact-page .contact-side{display:flex;flex-direction:column;gap:16px}
.page.contact-page .map-card{flex:1 1 auto;display:flex;flex-direction:column}
.page.contact-page .map-embed{flex:1 1 auto}
.page.contact-page .map-embed iframe{width:100% !important;height:100% !important;border:0;display:block}

/* FAQ section en bas de page Contact */
.contact-faq{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--primary) 6%,#fff));padding:36px 0;margin-top:10px}
.contact-faq .subtitle{opacity:.85;margin:6px 0 18px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faq-card h4{margin:0 0 8px}

/* ========== Responsive ========== */
@media (max-width:900px){
  /* Nav mobile en panneau */
  .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:auto}
  .main-nav{display:none}
  .main-nav.is-open{display:flex;position:fixed;right:0;top:64px;width:85%;max-width:320px;height:calc(100vh - 64px);background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.08);padding:16px;flex-direction:column;gap:12px;z-index:1000}
  body.admin-bar .main-nav.is-open{top:calc(64px + 32px);height:calc(100vh - 96px)}
  .main-nav ul{flex-direction:column;gap:10px}
  .main-nav .btn-cta{align-self:flex-start}

  /* Grilles */
  .feature-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .form-row{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid-3,.feature-grid{grid-template-columns:1fr}
  .hero-inner{padding:80px 0}
  .hero h1{font-size:32px}
  .logo{max-height:76px;min-height:56px}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:1140px){
  /* Contact : pile verticale en écrans plus étroits */
  .page.contact-page .contact-grid{
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
  }
}
@media (max-width:1024px){
  .single-event .event-layout{grid-template-columns:1fr}
}

/* Optionnel : titres de sections dans le formulaire d’inscription */
.inscription-page h3{
  margin: 18px 0 8px;
  font-size: 1.05rem;
  opacity: .9;
}

/* Alignement langues : libellé + niveaux sur une ligne */
.lang-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lang-row .lang-label{ min-width:140px; }
.lang-row .levels{ display:flex; gap:16px; flex-wrap:wrap; }
.lang-row .levels label{ display:inline-flex; align-items:center; gap:6px; }

/* Langues : aligner label (gauche) + niveaux (droite) */
.lang-row{ display:flex; gap:14px; align-items:center; margin-bottom:8px; }
.lang-label{ min-width:140px; }
.lang-levels .inline-radios{ flex-wrap:wrap; }

/* Cases à cocher : texte sur la même ligne */
.inline-check{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
@media (max-width: 560px){ .inline-check{ white-space:normal; } }

/* Bouton final (différent de btn-cta) */
.btn-final{ background:var(--info); color:#fff; }
.btn-final:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Bouton Supprimer expérience */
.xp-actions .btn{ min-width:140px; }

/* Alignement libellé langue / niveaux (même ligne) */
.lang-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  align-items:center;
  gap:12px;
  margin:8px 0;
}
.lang-levels{ min-width:0; }
@media (max-width:700px){
  .lang-row{ grid-template-columns: 1fr; }
}

/* Bouton de validation finale, couleur distincte du thème */
.btn-final{ background: var(--info); color:#fff; }
.btn-final:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* Cases à cocher sur 1 ligne (si place) */
.inline-check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
@media (max-width:560px){
  .inline-check{ white-space:normal; }
}

.progress-text {
  text-align: center;
  font-weight: bold;
  margin-top: 4px;
  color: #333; /* ou couleur de ta charte */
}

.pi-progress-text{
  text-align:center;
  margin-top:6px;
  font-weight:700;
  color:#333; /* tu peux ajuster selon ta palette */
  font-size:0.95rem;
}

/* === Devise (motto) === */
.motto {
  --motto-bg: var(--primary, #0C6870);
  --motto-fg: #fff;
  --motto-accent: var(--secondary, #C17D39);
  background: linear-gradient(135deg, var(--motto-bg) 0%, #0a5258 100%);
  color: var(--motto-fg);
  border-radius: 16px;
  padding: 28px 22px;
  overflow: hidden;
  position: relative;
}
.motto::before{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(1200px 1200px at var(--x,80%) var(--y,20%), rgba(255,255,255,.08), transparent 40%);
  pointer-events:none;
  transition: opacity .3s ease;
  opacity:.8;
}
.motto__wrap{ max-width:1100px; margin:0 auto; }

.motto__words{
  display:flex; gap:12px; align-items:baseline;
  font-weight:800; font-size:clamp(26px, 5vw, 44px); letter-spacing:.02em; line-height:1.1;
}
.motto__word{
  background: linear-gradient(90deg,#fff,rgba(255,255,255,.9));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position:relative; display:inline-block;
  opacity:0; transform: translateY(10px) scale(.98);
  animation: mottoIn .8s ease forwards;
}
.motto__word:nth-of-type(1){ animation-delay:.05s; }
.motto__word:nth-of-type(3){ animation-delay:.25s; }
.motto__word:nth-of-type(5){ animation-delay:.45s; }

.motto__dot{ color:rgba(255,255,255,.6); font-weight:700; transform:translateY(2px);
  opacity:0; animation: mottoIn .8s ease .15s forwards; }

.motto__desc{
  margin-top:8px; color:rgba(255,255,255,.85); font-size:clamp(14px, 1.8vw, 16px);
}

/* soulignement fluide au survol */
.motto__word::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background: linear-gradient(90deg, var(--motto-accent), #ffd29a, var(--motto-accent));
  border-radius:999px; transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.motto__word:hover::after{ transform:scaleX(1); }

@keyframes mottoIn{ to{ opacity:1; transform:translateY(0) scale(1);} }

@media (prefers-reduced-motion: reduce){
  .motto::before{ display:none; }
  .motto__word, .motto__dot{ animation:none; opacity:1; transform:none; }
  .motto__word::after{ transition:none; }
}

/* --- Devise (About) --- */
.about-motto {
  margin: 28px auto 40px;
  padding: 28px 16px;
  background: linear-gradient(180deg, rgba(12,104,112,.06), rgba(12,104,112,.02));
  border: 1px solid rgba(12,104,112,.12);
  border-radius: 16px;
}

.motto-list {
  display: grid;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .motto-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.motto-item {
  background: #fff;
  border: 1px solid #eef2f3;
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.motto-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.motto-key {
  display: inline-block;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .3px;
  color: var(--primary);
  position: relative;
  padding-bottom: 8px;
}

.motto-key::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--secondary);
  border-radius: 2px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}

.motto-desc {
  display: block;
  color: #324b50;
  opacity: .9;
  margin-top: 8px;
  line-height: 1.4;
}

/* Effets d’apparition — même esprit que la home */
.reveal { 
  opacity: 0;
  transform: translateY(14px) scale(.985);
}
.reveal.reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1),
    transform .6s cubic-bezier(.22,1,.36,1);
}
/* souligné s’anime quand l’item apparaît */
.reveal.reveal-in .motto-key::after { width: 36%; }

/* Respecte P.R.M. */
@media (prefers-reduced-motion: reduce) {
  .motto-item, .reveal, .reveal.reveal-in, .motto-key::after {
    transition: none !important;
    transform: none !important;
  }
  .reveal { opacity: 1; }
  .motto-key::after { width: 36%; }
}

/* Header quasi opaque, sans flou */
.ivp-header.is-scrolled{
  background-color: rgba(255, 255, 255, 0.9) !important; /* très léger voile */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}



/* Liens du menu en noir, sauf le bouton d'inscription */
.ivp-header.is-scrolled .main-nav a:not(.btn-inscription),
.ivp-header.is-scrolled .site-title { color:#111 !important; }


/* Bouton inscription conserve son style 
.ivp-header.is-scrolled .btn-inscription{
  background:#C17D39 !important;
  color:#fff !important;
}
.ivp-header.is-scrolled .btn-inscription:hover{
  filter:brightness(0.95);
}*/

/* ===== Formations & Activités — grilles ===== */
.prog-grid,
.act-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  justify-content: center;          /* centre les colonnes si peu d’items */
}

/* Quand il n’y a qu’une seule carte, on évite l’effet “plein écran” */
.prog-card,
.act-card{
  max-width: 420px;                 /* limite la largeur visuelle d’un item seul */
  margin: 0 auto;                   /* centre la carte si colonne unique */
}

/* Médias & corps */
.prog-card__media img{ width:100%; height:auto; border-radius:12px; }

/* Tête carte avec bouton à droite */
.prog-card__head,
.act-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 8px;
}

.prog-card__title,
.act-card__title{ margin:0; font-size: 1.15rem; line-height:1.25; }

/* Bouton d’inscription à droite */
.btn-insc-right{
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Liste de points forts (optionnelle) */
.prog-card__bullets{
  margin: 10px 0 0; padding-left: 1.2rem;
  display: grid; gap: 6px;
}
.prog-card__bullets li{ list-style: disc; }

/* Petits helpers */
.mt-32{ margin-top: 32px; }
.muted{ opacity:.8; }

/* ===== Formations / Activités — grille & cartes ===== */
.prog-wrap { margin-top: 12px; }
.prog-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
  gap: 16px;
}

/* Carte générique */
.card--prog, .card--activ {
  position: relative;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card--prog:hover, .card--activ:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Media ratio 16/9 + hover soft */
.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f7f9;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}
.card--prog:hover .card-media img { transform: scale(1.06); }

/* Corps */
.card-body { padding: 14px 14px 10px; }
.card-body h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.25; }
.card-body p { margin: 0 0 8px; opacity: .9; }

/* Points forts */
.bullets {
  list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px;
}
.bullets li {
  padding-left: 24px; position: relative;
}
.bullets li::before {
  content:""; position: absolute; left: 0; top: .35em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .9;
}

/* Pied de carte : CTA alignés à droite */
.card-foot {
  padding: 12px 14px 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #f0f0f0;
}
.btn-ghost {
  background: transparent;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 600;
}
.btn-ghost:hover { filter: brightness(.95); }
.btn-cta--small {
  background: var(--secondary);
  color: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
  font-weight: 600;
}
.btn-cta--small:hover { filter: brightness(.95); }

/* Sections titres */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 18px 0 8px;
}
.section-head h2 { margin: 0; }

/* Reveal comme la home */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .45s ease, transform .45s ease; }
.reveal.reveal-in { opacity:1; transform: translateY(0); }

/* Activités (pas d’image ? pas grave) */
.card--activ .card-media { display: none; } /* masqué si tu n’as pas d’images */

/* ===== Formations (CPT) ===== */
.Formations-page .page-head .lead { opacity:.85; }

.prog-section { margin: 18px 0 26px; }
.prog-subhead { text-align:center; margin-bottom: 10px; }
.prog-subhead .sublead { opacity:.8; }

.prog-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Desktop: 2 colonnes */
@media (min-width: 980px){
  .prog-grid{ grid-template-columns: 1fr 1fr; }
}

/* Carte formation/activité */
.prog-card{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  border:1px solid #e8e8e8;
  border-radius:16px;
  background:#fff;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}



@media (max-width: 640px){
  .prog-card{ grid-template-columns: 1fr; }
}

/* Image */
.prog-media { overflow:hidden; border-radius:12px; }
.prog-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Corps */
.prog-body{ display:grid; gap:8px; align-content:start; }

/* Head: Titre + CTA à droite */
.prog-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.prog-title{ margin:0; font-size: 1.15rem; }
.prog-cta{ display:flex; gap:8px; align-items:center; }

/* Description + features */
.prog-desc{ margin:0; opacity:.9; }
.prog-features{
  list-style:none; padding:0; margin:0; display:grid; gap:6px;
}
.prog-features li{
  position:relative; padding-left:22px;
}
.prog-features li::before{
  content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:50%;
  background: var(--secondary, #C17D39);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Boutons cohérents avec le thème */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; }
.btn-cta{ background: var(--secondary, #C17D39); color:#fff; }
.btn-cta:hover{ filter: brightness(.95); }
.btn-ghost{ background: transparent; color: var(--secondary, #C17D39); border:2px solid var(--secondary, #C17D39); }
.btn-ghost:hover{ filter: brightness(.95); }

/* Reveal (réutilise ta logique d’IntersectionObserver) */
.reveal{ opacity:0; transform:translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal.reveal-in{ opacity:1; transform:translateY(0); }


/* =========================
   PATCH Formations / Activités
   - Grille centrée, colonnes “cartes”
   - 1 item ≠ plein écran
   - Boutons alignés à droite (déjà OK)
   ========================= */

/* 1) On annule les contraintes contradictoires */
.prog-card,
.act-card{
  max-width: none !important;
  margin: 0 !important;
}

/* 2) Grille en colonnes de cartes centrées
   - auto-fit crée 1..n colonnes
   - min 320px, max 360px ≈ “carte” lisible
   - justifiée au centre pour éviter l’effet “plein écran” quand il y a 1 seul item
*/
.prog-grid,
.act-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px)) !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* 3) Médias des cartes */
.card-media,
.prog-card__media{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f7f9;
  border-radius: 12px;
}
.card-media img,
.prog-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}
.card--prog:hover .card-media img,
.prog-card:hover .prog-card__media img{ transform: scale(1.06); }

/* 4) Activités sans image (si tu n’en mets pas) : on laisse la grille gérer */
.card--activ .card-media{ display: none; }

/* 5) Petites tailles : 1 colonne fluide */
@media (max-width: 640px){
  .prog-grid, .act-grid{
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }
}

/* ===== Page Formations : forcer 2 colonnes ===== */
body.page-template-page-Formations .prog-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px;              /* ajuste si besoin */
  justify-content: center;
}

@media (max-width: 980px){
  body.page-template-page-Formations .prog-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 1) Fond global uniforme (passe en premier) */
html, body {
  background: var(--muted) !important;
}

/* 2) Les enveloppes doivent être transparentes pour laisser voir le fond 
main, .page, .container, section {
  background: transparent !important;
}*/

/* 3) Spécifique page Contact : on désactive les dégradés/fonds locaux */
.page.contact-page .contact-hero,
.page.contact-page .contact-faq,
.page.contact-page .events-home,
.page.contact-page .features,
.page.contact-page .stats {
  background: transparent !important;
}

/* 4) Les cartes/blocs internes gardent leur fond blanc (lisibilité) */
.card,
.contact-card,
.map-card,
.notice,
.faq details,
.form-field,
.event-card {
  background: #fff; /* volontairement blanc à l’intérieur des cartes */
}

.about-alt__txt {
  text-align: center;          /* centre le texte */
  display: flex;               /* transforme en flexbox */
  flex-direction: column;      /* conserve l’ordre vertical */
  justify-content: center;     /* centre verticalement dans la colonne */
  align-items: center;         /* centre horizontalement */
}
.about-alt__txt h2,
.about-alt__txt p {
  max-width: 640px;            /* optionnel : largeur max pour lisibilité */
}

.form-fields-vertical {
  display: flex;
  flex-direction: column; /* force chaque bloc en colonne */
  gap: 20px;              /* espace vertical entre les champs */
}

.form-fields-vertical > div,
.form-fields-vertical > fieldset,
.form-fields-vertical > .form-field {
  width: 100%;            /* chaque bloc occupe toute la ligne */
}


/* === FIX Partenaires : centrage + couleur + taille === */
.partners { padding: 28px 0; }

.partners .partners-marquee{
  --logo-h: 90px;            /* ← ajuste la taille ici (ex : 90–110px) */
  overflow: hidden;
}

.partners .partners-track{
  /* centre la piste malgré width:max-content + animation */
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  margin: 0 auto;            /* ← centrage */
  padding: 0;
  list-style: none;
  animation: partnersScroll var(--speed, 40s) linear infinite;
}


.partners .partner img:hover{ transform: scale(1.06); }

/* mobile : un peu plus petit */
@media (max-width: 640px){
  .partners .partners-marquee{ --logo-h: 64px; }
}

/* assure l’animation continue (déjà présente dans ton CSS) */
@keyframes partnersScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === Grilles unifiées (même rendu que .fq-grid) === */
.fq-grid,
.acts-grid,
.events-grid,
.partners-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: 16px;
  justify-content: center;
  align-items: stretch;
}

/* === Cartes unifiées (même rendu que .fq-card) === */
.fq-card,
.act-card,
.event-card,
.partner-card {
  display:grid;
  grid-template-rows: auto 1fr auto;
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  max-width: 360px;
}
.fq-card:hover,
.act-card:hover,
.event-card:hover,
.partner-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* === Slots image / corps / pied (mêmes noms que FQ) === */
.fq-media, .act-media, .event-media, .partner-media {
  aspect-ratio: 16 / 9;
  background:#f6f7f9;
}
.fq-media img, .act-media img, .event-media img, .partner-media img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.fq-body, .act-body, .event-body, .partner-body {
  padding: 12px 14px;
  display:grid; gap:8px; align-content:start;
}

.fq-title, .act-title, .event-title, .partner-title {
  margin:0; font-size:1.1rem; line-height:1.25;
}

/* excerpt optionnel avec troncature douce */
.fq-excerpt, .act-excerpt, .event-excerpt, .partner-excerpt {
  margin:0;
  display:-webkit-box; 
  
  -webkit-box-orient: vertical; overflow:hidden;
}

.fq-foot, .act-foot, .event-foot, .partner-foot {
  padding: 12px 14px 14px;
  display:flex; justify-content:flex-end; border-top:1px solid #f0f0f0;
}

/* === Partenaires : logos ronds et nets === */
.partners-track { gap: 28px; }


/* Effet au survol */
.partner a:hover img,
.partner img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Responsive */
@media (max-width: 600px){
  .partner img{ width: 56px; height: 56px; padding: 8px; }
}

/* Utilitaires “carte douce” */
.soft-card {
  background: #fff;
  border: 1px solid #eef2f3;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  padding: 16px;
}
.soft-card .h { margin: .25rem 0 .5rem; line-height: 1.25; }
.soft-card .meta { opacity: .7; font-size: .95rem; }

/* Grille responsive cohérente */
.soft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* ========================
   Partenaires — style cercles
   ======================== */
.partners-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.partners-track {
  display: flex;
  gap: var(--gap, 40px);
  animation: partners-scroll var(--speed, 40s) linear infinite;
}

.partners-track:hover {
  animation-play-state: paused; /* pause au survol */
}

.partner {
  flex: 0 0 auto;
  width: 120px;   /* diamètre du cercle */
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}

.partner:hover {
  transform: scale(1.08);
}

.partner img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* image nette et recadrée */
  border-radius: 50%; /* rond parfait */
  image-rendering: -webkit-optimize-contrast;
}

/* Défilement continu gauche → droite */
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Partenaires — cercles propres, nets, défilement ===== */
.partners { padding: 28px 0; }

/* Marquee */
.partners .partners-marquee{
  --gap: 40px;           /* espace entre pastilles si pas fourni en inline */
  --speed: 40s;          /* vitesse si pas fournie en inline */
  --size: 150px;         /* ← DIAMÈTRE du cercle (agrandis ici) */
  overflow: hidden;
  position: relative;
}

.partners .partners-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: partners-scroll var(--speed) linear infinite;
}
.partners .partners-track:hover{ animation-play-state: paused; }

.partners .partner{
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;              /* l’image reste bien dans le cercle */
  background: #fff;              /* fond blanc propre */
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.partners .partner:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Image — PAS de padding, PAS de background : fini le “double cercle” */
.partners .partner img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* logo entier, non rogné → rendu net */
  display: block;
  image-rendering: auto;
  border-radius: 0;              /* inutile de la rendre ronde elle aussi */
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.partners .partner a:hover img{ transform: scale(1.04); opacity: 1; }

/* Défilement infini gauche ← droite (la piste est dupliquée dans ton PHP) */
@keyframes partners-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Mobile : cercle un peu plus petit */
@media (max-width: 640px){
  .partners .partners-marquee{ --size: 92px; --gap: 28px; }
}

/* ===== Single formation (mise en page + précédent) ===== */
.single-formation .prog-topline{
  margin: 8px 0 12px;
}

.back-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.back-chip:hover{ transform: translateY(-1px); background: #ececec; }

/* Layout 2 colonnes (image gauche / texte droite) */
.single-formation .prog-layout{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: start;
}

/* Image : format fixe pour uniformiser le rendu */
.prog-thumb{
  width: 100%;
  height: 420px;                 /* ← hauteur fixe : image non “maîtresse” */
  object-fit: cover;             /* on remplit sans déformer */
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.prog-thumb--placeholder{
  background: #f3f4f6;
  border: 1px dashed #e5e7eb;
}

/* Titre + description + CTA */
.single-formation .prog-title{
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
}
.single-formation .prog-desc p{ line-height: 1.75; }
.single-formation .prog-cta-row{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Le bouton WhatsApp reprend ton style unifié déjà présent */
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 18px; border-radius: 999px; font-weight:700;
  color:#fff !important; text-decoration: none !important;
  background: linear-gradient(135deg, #25D366, #1DA851);
  box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn-whatsapp:hover{ transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 28px rgba(0,0,0,.22); }

/* Responsive */
@media (max-width: 1024px){
  .single-formation .prog-layout{ grid-template-columns: 1fr; }
  .prog-thumb{ height: 320px; }
}
@media (max-width: 640px){
  .prog-thumb{ height: 240px; }
}

/* ===== Single formation : layout & media ===== */
.single-formation .prog-layout{
  display:grid;
  grid-template-columns: 1fr 1.1fr;   /* image gauche / texte droite */
  gap:24px;
  align-items:start;
}

.single-formation .prog-media{
  position:relative;
  height:100%;             /* prend la hauteur de la colonne (la plus grande) */
  min-height:420px;        /* garantit une belle présence de l’image */
  max-height:780px;        /* garde un plafond raisonnable sur grands écrans */
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.single-formation .prog-media img{
  width:100%;
  height:100%;
  object-fit:cover;        /* remplit la hauteur → recadrage sans déformation */
  display:block;
  transform:scale(1.02);   /* léger zoom pour éviter bords vides */
}

/* Option sympa : image “collante” pendant la lecture */
@media (min-width: 1024px){
  .single-formation .prog-media{
    position:sticky;
    top:24px;              /* reste visible en scroll, donne un effet haut de gamme */
  }
}

/* Colonne texte */
.single-formation .prog-content{
  display:grid;
  gap:14px;
}

/* Boutons en bas, bien groupés */
.single-formation .prog-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
}

/* Responsive : pile verticale */
@media (max-width: 900px){
  .single-formation .prog-layout{ grid-template-columns: 1fr; }
  .single-formation .prog-media{ min-height:300px; max-height:520px; }
}


/* Animation uniquement pour les H2.section-title */
h2.section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
  text-align: center;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  color: #0C6870;
  margin: 0 auto 50px;
  display: block;
}

h2.section-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

h2.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: #C17D39;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Titre des événements */
.event-title {
  color: #0C6870;   /* ta couleur primaire (vert-bleu de la charte) */
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Rejouer visuellement l’état hover du bouton Inscription */
.btn-inscription.is-flashing {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

/* Déclenche aussi la petite flèche comme en :hover */
.btn-inscription.is-flashing::after {
  transform: translateX(3px);
}

/* (Optionnel) léger “pulse” très court */
@keyframes ping-cta {
  0%   { transform: translateY(-2px) scale(1); }
  50%  { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(-2px) scale(1); }
}
.btn-inscription.is-flashing {
  animation: ping-cta 0.6s ease-out;
}

/* === Liens du footer (tous) === */
.ivp-footer a {
  color: #C7D2DA;                 /* même teinte que le texte du footer */
  text-decoration: none;
}
.ivp-footer a:hover {
  color: #FFFFFF;                  /* blanc = contraste max sur #1C2A2E */
  text-decoration: underline;      /* visibilité assurée */
}
.ivp-footer a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* === Cas explicite : téléphone & email === */
.ivp-footer a[href^="tel:"],
.ivp-footer a[href^="mailto:"] {
  color: #C7D2DA;                  /* aligné avec le texte */
  font-weight: 600;                /* un peu plus lisible */
  text-decoration: none;
}
.ivp-footer a[href^="tel:"]:hover,
.ivp-footer a[href^="mailto:"]:hover {
  color: #FFFFFF;                  /* contraste fort au survol */
  text-decoration: underline;
}

/* (Optionnel) si tu utilises des pastilles opérateur dans le footer */
.footer-phones .footer-phone { color: #C7D2DA; }
.footer-phones .footer-phone:hover { color: #FFFFFF; }


/* ==============================
   Footer – liens texte, tel, mail
   ============================== */

/* Définis des couleurs de base pour le footer */
.ivp-footer {
  --footer-text: #C7D2DA;   /* couleur du texte du footer */
  --footer-hover: #FFFFFF;  /* couleur au survol (blanc = contraste max) */
   text-decoration: none;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Tous les liens textes du footer (hors icônes sociaux) */
.ivp-footer a,
.ivp-footer a:visited {
  color: var(--footer-text);
  text-decoration: none;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Cas explicites : téléphone & email */
.ivp-footer a[href^="tel:"],
.ivp-footer a[href^="mailto:"] {
  color: var(--footer-text);
  font-weight: inherit; /* évite le gras si une règle globale met les <a> en 600/700 */
}

/* Survol/focus : couleur très visible + souligné */
.ivp-footer a:hover,
.ivp-footer a:focus,
.ivp-footer a:focus-visible {
  color: var(--footer-hover);
  text-decoration: underline;
  outline: none;
}

/* Variante si tu préfères l’accent de ta charte au survol :
.ivp-footer a:hover,
.ivp-footer a:focus { color: #C17D39; text-decoration: underline; }
*/

/* Bloc numéros compact si tu en as un */
.ivp-footer .footer-phones .footer-phone,
.ivp-footer .footer-phones .footer-phone:visited {
  color: var(--footer-text);
}
.ivp-footer .footer-phones .footer-phone:hover,
.ivp-footer .footer-phones .footer-phone:focus {
  color: var(--footer-hover);
  text-decoration: underline;
}

/* Ne pas toucher aux boutons/icônes sociaux (gardent leurs couleurs) */
.ivp-footer .socials a,
.ivp-footer .socials a:hover { color: inherit; }

.contact-form .grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.contact-form .form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.contact-form label .req { color:#C17D39; font-weight:600; font-size: .9em; }

.form-alert { padding:12px 14px; border-radius:10px; margin-bottom:16px; }
.form-alert.error { background:#fff3f0; border:1px solid #ffd6cc; color:#7a1f00; }
.form-alert.success { background:#f0fff7; border:1px solid #c9f0da; color:#0b5b2b; }

/* --- Hard stop: pas de scroll horizontal sur mobile --- */
html, body { overflow-x: hidden; }

/* Évite les dépassements par défaut */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

/* Conteneur fluide sans dépassement */
.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ===============================
   Section "Pourquoi nous rejoindre"
   =============================== */

/* Grille robuste qui ne dépasse jamais */
.why-grid, .pourquoi-grid, .why-cards {
  display: grid;
  grid-template-columns: 1fr;           /* 1 colonne mobile */
  gap: 12px;
}
@media (min-width: 480px) {
  .why-grid, .pourquoi-grid, .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .why-grid, .pourquoi-grid, .why-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Les cartes ne doivent pas forcer de largeur */
.why-card, .pourquoi-card, .why-cards .card {
  min-width: 0;                /* clé anti-overflow en grid/flex */
  overflow-wrap: break-word;   /* casse les mots/URLs trop longs */
  word-break: break-word;
}

/* Évite les marges/padding latéraux qui dépassent sur mobile */
.why-card .inner, .pourquoi-card .inner, .why-cards .card .inner {
  padding: clamp(12px, 3vw, 16px);
}

/* Icônes/images dans les cartes */
.why-card img, .pourquoi-card img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ===============================
   Footer
   =============================== */

.ivp-footer, footer, .site-footer {
  overflow: hidden;                    /* coupe toute animation qui dépasse */
}

.footer-inner, .footer-cols, .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .footer-inner, .footer-cols, .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .footer-inner, .footer-cols, .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Liens et textes longs qui pouvaient pousser la largeur */
.site-footer a, .ivp-footer a, .site-footer p, .ivp-footer p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Bandes/partenaires & carrousels éventuels */
.partners-band, .partners-viewport { overflow: hidden; }
.partners-track { display: flex; gap: 20px; will-change: transform; }
.partners-track img { height: auto; max-height: 56px; width: auto; max-width: 100%; }

/* Listes de réseaux sociaux (évite les nowrap qui débordent) */
.footer-social, .social-list {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.footer-social a, .social-list a {
  display: inline-flex; align-items: center;
  max-width: 100%;
}

/* Boutons/éléments inline qui forcent une largeur */
button, .btn { max-width: 100%; }

/* Si une carte avait des ombres/cadres qui débordent, on limite */
.card { max-width: 100%; }


/* Empêcher toute disparition involontaire sur mobile */
@media (max-width: 768px) {
  .formations-diplomantes,
  .formations-diplomantes .cards,
  .formations-diplomantes .card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Grille responsive sans débordement */
.formations-diplomantes .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .formations-diplomantes .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .formations-diplomantes .cards {
    grid-template-columns: 1fr;
  }
}

/* Cartes : pas de largeur minimale rigide */
.formations-diplomantes .card {
  min-width: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* Images fluides */
.formations-diplomantes img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Supprimer tout scroll horizontal parasite */
.formations-diplomantes,
.formations-diplomantes .cards {
  overflow-x: hidden;
}
html, body { overflow-x: hidden; }

.formations-diplomantes .swiper-slide,
.formations-diplomantes .slick-slide {
  width: auto !important;
  min-width: 0 !important;
}

/* Fallback reveal sur mobile : toujours visible */
@media (max-width: 768px) {
  .reveal { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}

.fq-grid {
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px;
}
@media (min-width: 640px){ .fq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .fq-grid { grid-template-columns: repeat(3, 1fr); } }

/* CONTACT — "Pourquoi nous choisir" : 1 colonne en mobile */
.page-template-page-contact .why-grid,
.page-template-page-contact .why-cards {
  display: grid;
  grid-template-columns: 1fr;   /* 1 card per row on small screens */
  gap: 16px;
}

/* Make sure cards can shrink and don’t force a second column */
.page-template-page-contact .why-grid .card,
.page-template-page-contact .why-cards .card {
  width: 100%;
  min-width: 0;                 /* override any min-width that causes overflow */
}

/* Responsive up: 2 cols tablet, 3 cols desktop (adjust if you prefer) */
@media (min-width: 640px) {
  .page-template-page-contact .why-grid,
  .page-template-page-contact .why-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .page-template-page-contact .why-grid,
  .page-template-page-contact .why-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Defensive: images/text should never cause horizontal scrolling */
.page-template-page-contact .why-grid img,
.page-template-page-contact .why-cards img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-template-page-contact .why-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.page-template-page-contact .why-cards .card { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px)  { .page-template-page-contact .why-cards .card { flex-basis: calc(50% - 16px); } }
@media (min-width: 1024px) { .page-template-page-contact .why-cards .card { flex-basis: calc(33.333% - 16px); } }

/* FAQ (page Contact) : 1 carte par ligne en mobile */
@media (max-width: 768px) {
  .contact-faq .container.faq-grid {
    /* force la grille en 1 colonne, même si un style précédent met 2 colonnes */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .contact-faq .faq-grid .faq-card {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  .contact-faq .container.faq-grid {
    flex-wrap: nowrap !important;
  }
  .contact-faq .container.faq-grid > * {
    flex: 0 0 100% !important; /* chaque carte prend toute la largeur */
  }
}

/* Boutons du formulaire d'inscription en responsive */
.pi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.pi-actions button {
  flex: 1 1 100%; /* Par défaut sur mobile : occupe toute la largeur */
}

/* Sur écrans plus larges (tablette/desktop) : alignement horizontal */
@media (min-width: 768px) {
  .pi-actions button {
    flex: initial;
    min-width: 120px;
  }
  .pi-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .pi-actions .btn-danger {
    margin-right: auto; /* Annuler à gauche */
  }
}

/* Pré-inscription : actions du formulaire */
.preinscription-page .pi-actions {
  display: flex;
  flex-direction: column;      /* pile verticale sur mobile */
  gap: 10px;
}

.preinscription-page .pi-actions > * {
  width: 100%;                 /* le bloc gauche ET le bloc droit prennent toute la largeur */
}

.preinscription-page .pi-actions-right {
  display: flex;
  flex-direction: column;      /* "Précédent" puis "Continuer" l’un sous l’autre */
  gap: 10px;
  align-items: stretch;
}

.preinscription-page .pi-actions .btn {
  width: 100%;                 /* tous les boutons même largeur */
  display: flex;               /* centrage propre du texte */
  justify-content: center;
  align-items: center;
}

/* Desktop : on rétablit l’horizontal avec alignement gauche/droite */
@media (min-width: 768px) {
  .preinscription-page .pi-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .preinscription-page .pi-actions > * {
    width: auto;
  }
  .preinscription-page .pi-actions-right {
    flex-direction: row;
  }
  .preinscription-page .pi-actions .btn {
    width: auto;
  }
}

/* Header fixé en haut */
.ivp-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
  /* léger fond transparent, lisible sur tout visuel */
  background: rgba(12, 104, 112, 0.25); /* #0C6870 à ~25% */
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Quand on scrolle un peu : fond plus dense + ombre */
.ivp-header.is-scrolled {
  background: rgba(12, 104, 112, 0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Évite que le contenu passe sous le header */
body{
  padding-top: var(--header-h, 120px);
}
/* Optionnel : transparence plus légère sur grands écrans */
@media (min-width: 992px) {
  .ivp-header { background: rgba(12, 104, 112, 0.18); }
  .ivp-header.is-scrolled { background: rgba(12, 104, 112, 0.8); }
}

.ivp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(12, 104, 112, 0.25);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.ivp-header.is-scrolled {
  background: rgba(12, 104, 112, 0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* === FIX: header fixe + contenu décalé proprement === */
:root{ --header-h: 96px; } /* fallback */

.ivp-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1100;
}

/* le contenu commence sous le header */
html{ scroll-padding-top: var(--header-h); }      /* ancres */
body{ padding-top: var(--header-h) !important; }  /* contenu */

/* menu mobile : panneau calé sous le header, quelle que soit sa hauteur */
.main-nav.is-open{
  top: var(--header-h) !important;
  height: calc(100vh - var(--header-h)) !important;
}

/* Header : blanc quasi-opaque dès le départ, donc pas de teinte bleue du hero */
.ivp-header{
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* Au scroll : très léger renforcement + ombre */
.ivp-header.is-scrolled{
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

/* Par sécurité, on neutralise tout overlay qui teinterait le header */
.ivp-header::before{ background: none !important; }

/* Carte chiffres : réserve l'espace de l'image en haut */
.stats .stat{
  --pad: 22px;           /* ton padding latéral/bas */
  --h-img: 180px;        /* hauteur de l'image (ajuste à 160/200 si besoin) */

  position: relative;
  overflow: hidden;      /* coins arrondis OK */
  padding: var(--h-img) var(--pad) var(--pad); /* top = hauteur image */
  border-radius: 16px;   /* si défini ailleurs, garde celui du thème */
}

/* Image en plein cadre, centrée, non déformée */
.stats .stat > img{
  position: absolute;
  inset: 0 auto auto 0;  /* top:0; left:0; */
  width: 100%;
  height: var(--h-img);
  object-fit: cover;
  object-position: center 20%; /* change en 'center 20%' si tu veux remonter le cadrage */
  display: block;
}

/* Texte/compteur : plus de marge-top bricolée */
.stats .stat .count,
.stats .stat p{
  position: relative;
  z-index: 1; /* par-dessus l'image */
  margin-top: 0;
}

/* Responsive (optionnel) */
@media (max-width: 600px){
  .stats .stat{ --h-img: 140px; }
}



.why-join .why-item{
  --pad: 22px;           /* ton padding latéral/bas */
  --h-img: 180px;        /* hauteur de l'image (ajuste à 160/200 si besoin) */

  position: relative;
  overflow: hidden;      /* coins arrondis OK */
  padding: var(--h-img) var(--pad) var(--pad); /* top = hauteur image */
  border-radius: 16px;   /* si défini ailleurs, garde celui du thème */
}

/* Image en plein cadre, centrée, non déformée */
.why-join .why-item > img{
  position: absolute;
  inset: 0 auto auto 0;  /* top:0; left:0; */
  width: 100%;
  height: var(--h-img);
  object-fit: cover;
  object-position: center 20%; /* change en 'center 20%' si tu veux remonter le cadrage */
  display: block;
}

/* Texte/compteur : plus de marge-top bricolée */
.why-join.why-item .count,
.why-join .why-item p{
  position: relative;
  z-index: 1; /* par-dessus l'image */
  margin-top: 0;
}

/* Responsive (optionnel) */
@media (max-width: 600px){
  .why-join .stawhy-itemt{ --h-img: 140px; }
}