/* =====================================================================
   RPNA — PAGES FORMATIONS (WPBakery) — v2.1 responsive
   À coller dans : Apparence > Personnaliser > CSS additionnel
   (remplace entièrement la version précédente)
   ---------------------------------------------------------------------
   Toutes les règles ne s'appliquent qu'aux éléments portant une classe
   « rpna-… » (champ « Nom de classe supplémentaire » de WPBakery).
   Les autres pages du site ne sont pas modifiées.

   CLASSES DISPONIBLES
   Rangées (Row)        : rpna-hero · rpna-section · rpna-section-douce
                          rpna-cocon (variante Cocon, à ajouter en plus)
   Colonnes (Column)    : rpna-sticky · rpna-fiche-carte
   Blocs de texte       : rpna-titre · rpna-tags · rpna-carte · rpna-prix
                          rpna-infos · rpna-objectifs · rpna-sessions
                          rpna-encart · rpna-chiffre · rpna-contact
                          rpna-info · rpna-ancres
   Boutons              : rpna-btn · rpna-btn-contour
   Accordéon (TTA)      : rpna-accordeon
   ===================================================================== */

/* ---------- 1. RÉGLAGES (couleurs + mise en page) ---------- */
:root{
  /* Couleurs — provisoires, à caler sur la charte */
  --rpna-accent:#6b2c7e;
  --rpna-accent-fonce:#4a1d58;
  --rpna-fond:#f4eef7;
  --rpna-bordure:#e6e1ea;
  --rpna-texte:#26232a;
  --rpna-gris:#5f5966;            /* contraste ≥ 4,5:1 sur blanc */
  --rpna-vert:#2f7d4f;
  --rpna-rayon:12px;

  /* Mise en page */
  --rpna-largeur:1200px;          /* largeur maximale du contenu */
  --rpna-marge-gauche:50px;       /* marge en plus du décalage déjà prévu par le thème pour sa barre latérale */
  --rpna-marge-droite:80px;       /* place laissée aux icônes flottantes à droite */
  --rpna-sticky-haut:30px;        /* distance du haut pour l'encadré latéral fixe */
}
/* Quand la barre latérale du thème disparaît (version tablette/mobile du thème).
   ⚠ Ajuster 1024px à la largeur exacte où le thème passe en menu mobile. */
@media (max-width:1024px){
  :root{--rpna-marge-gauche:20px;--rpna-marge-droite:20px}
}

/* Variante Cocon : ajouter « rpna-cocon » à une rangée, une colonne ou un bloc */
.rpna-cocon{
  --rpna-accent:#1f8a8a;          /* couleur Cocon — provisoire */
  --rpna-accent-fonce:#156565;
  --rpna-fond:#e8f5f4;
}

/* ---------- 2. RANGÉES : marges latérales et espacements ---------- */
body:not(#rpna-z) .vc_row.rpna-hero,
body:not(#rpna-z) .vc_row.rpna-section,
body:not(#rpna-z) .vc_row.rpna-section-douce{
  box-sizing:border-box;
  margin-left:0 !important;margin-right:0 !important;margin-bottom:0 !important;
  /* centre le contenu sur --rpna-largeur, sans jamais passer sous la barre du thème */
  padding-left:max(var(--rpna-marge-gauche), calc((100% - var(--rpna-largeur)) / 2)) !important;
  padding-right:max(var(--rpna-marge-droite), calc((100% - var(--rpna-largeur)) / 2)) !important;
}
body:not(#rpna-z) .vc_row.rpna-hero{background:var(--rpna-fond);padding-top:32px !important;padding-bottom:32px !important}
body:not(#rpna-z) .vc_row.rpna-section{padding-top:24px !important;padding-bottom:8px !important}
body:not(#rpna-z) .vc_row.rpna-section-douce{background:var(--rpna-fond);padding-top:32px !important;padding-bottom:16px !important}

/* Supprime les 35 px ajoutés par WPBakery en haut des colonnes et sous les éléments */
body:not(#rpna-z) .vc_row.rpna-hero .vc_column-inner,
body:not(#rpna-z) .vc_row.rpna-section .vc_column-inner,
body:not(#rpna-z) .vc_row.rpna-section-douce .vc_column-inner{padding-top:0 !important}
body:not(#rpna-z) .vc_row.rpna-hero .wpb_content_element,
body:not(#rpna-z) .vc_row.rpna-section .wpb_content_element,
body:not(#rpna-z) .vc_row.rpna-section-douce .wpb_content_element,
body:not(#rpna-z) .vc_row.rpna-hero .vc_btn3-container,
body:not(#rpna-z) .vc_row.rpna-section .vc_btn3-container,
body:not(#rpna-z) .vc_row.rpna-section-douce .vc_btn3-container{margin-bottom:16px}
body:not(#rpna-z) .vc_row.rpna-hero .vc_row.vc_inner,
body:not(#rpna-z) .vc_row.rpna-section .vc_row.vc_inner,
body:not(#rpna-z) .vc_row.rpna-section-douce .vc_row.vc_inner{margin-bottom:0 !important}

/* Les rangées « hauteur égale » passent à la ligne proprement */
body:not(#rpna-z) .vc_row.rpna-section.vc_row-flex,
body:not(#rpna-z) .vc_row.rpna-section-douce.vc_row-flex{flex-wrap:wrap}

/* ---------- 3. BANDEAU ---------- */
body:not(#rpna-z) .vc_row.rpna-hero h1{
  color:var(--rpna-accent-fonce);font-weight:800;line-height:1.15;
  font-size:clamp(26px, 2.6vw + 10px, 40px);margin:0 0 .35em;
}
body:not(#rpna-z) .vc_row.rpna-hero p{font-size:1.05em;color:var(--rpna-gris);margin-bottom:0}
body:not(#rpna-z) .vc_row.rpna-hero .wpb_single_image{margin-bottom:0}
body:not(#rpna-z) .vc_row.rpna-hero .wpb_single_image img{
  width:100%;max-height:300px;object-fit:cover;border-radius:var(--rpna-rayon);display:block;
}
body:not(#rpna-z) .vc_row.rpna-hero .vc_btn3-container{display:inline-block;margin-right:10px}

/* ---------- 4. TITRES DE SECTION ---------- */
.rpna-titre{margin-top:28px;margin-bottom:12px !important;scroll-margin-top:20px}
.vc_column-inner > .wpb_wrapper > .rpna-titre:first-child{margin-top:0}
.rpna-titre h2,.rpna-titre h3,
h2.rpna-titre,h3.rpna-titre{
  color:var(--rpna-accent) !important;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  font-size:clamp(20px, 1.2vw + 12px, 26px);
  margin:0 0 .4em;
}
.rpna-titre p{margin:0}

/* ---------- 5. ÉTIQUETTES (liste à puces → pastilles) ---------- */
.rpna-tags ul{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:8px}
.rpna-tags li{
  list-style:none !important;margin:0 !important;padding:6px 12px;border-radius:999px;
  background:#fff;color:var(--rpna-accent);border:1px solid var(--rpna-bordure);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.2;
}
.rpna-tags li::before{display:none !important}
.rpna-tags li strong{color:#7a4f00}
.rpna-tags li:has(strong){background:#fff4d6;border-color:#f3e2b3}   /* puce en gras = pastille jaune (DPC) */

/* ---------- 6. CARTES « INFOS CLÉS » ---------- */
.rpna-carte{
  background:#fff;border:1px solid var(--rpna-bordure);border-radius:10px;
  padding:14px 16px;font-size:14px;color:var(--rpna-gris);
}
.rpna-carte p{margin:0 !important}
.rpna-carte strong{display:block;font-size:22px;line-height:1.3;color:var(--rpna-accent)}

/* ---------- 7. ENCADRÉ LATÉRAL : PRIX + LISTE D'INFOS ---------- */
.vc_row .rpna-prix{
  background:var(--rpna-accent);color:#fff;
  border-radius:var(--rpna-rayon) var(--rpna-rayon) 0 0;
  padding:18px 22px;margin-bottom:0 !important;
}
.rpna-prix p{margin:0 !important;color:#fff;font-size:13px}
.rpna-prix strong{display:block;font-size:28px;line-height:1.2;color:#fff}

.rpna-infos{
  background:#fff;border:1px solid var(--rpna-bordure);border-top:0;
  border-radius:0 0 var(--rpna-rayon) var(--rpna-rayon);
  padding:4px 20px;
}
.rpna-infos p{
  display:flex;justify-content:space-between;gap:14px;
  margin:0 !important;padding:9px 0;border-bottom:1px solid var(--rpna-bordure);
  font-size:14px;font-weight:600;text-align:right;line-height:1.4;
}
.rpna-infos p:last-child{border-bottom:0}
.rpna-infos p strong{font-weight:400;color:var(--rpna-gris);text-align:left;flex:none}
.rpna-sticky .vc_btn3-container{margin-bottom:10px !important}

/* ---------- 8. OBJECTIFS (liste à puces → coches) ---------- */
.rpna-objectifs ul{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:8px}
.rpna-objectifs li{
  list-style:none !important;position:relative;margin:0 !important;
  background:var(--rpna-fond);border-radius:10px;padding:11px 14px 11px 48px;line-height:1.45;
}
.rpna-objectifs li::before{
  content:"✓";position:absolute;left:14px;top:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--rpna-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}

/* ---------- 9. SESSIONS (liste à puces → lignes) ---------- */
/* Saisie : « 12 mars 2027 » en gras, le lieu, puis la disponibilité en italique */
.rpna-sessions ul{list-style:none !important;margin:0 0 12px !important;padding:0 !important;border-top:2px solid var(--rpna-bordure)}
.rpna-sessions li{
  list-style:none !important;margin:0 !important;padding:12px 4px;border-bottom:1px solid var(--rpna-bordure);
  display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
}
.rpna-sessions li::before{display:none !important}
.rpna-sessions li strong{min-width:140px;color:var(--rpna-texte)}
.rpna-sessions li em{font-style:normal;font-size:13px;font-weight:700;color:var(--rpna-vert)}
.rpna-sessions li em::before{content:"● "}

/* ---------- 10. ENCART (accessibilité, mise en avant) ---------- */
.rpna-encart{
  border-left:4px solid var(--rpna-accent);background:var(--rpna-fond);
  padding:14px 18px;border-radius:0 10px 10px 0;
}
.rpna-encart p{margin:0 0 .6em !important}
.rpna-encart p:last-child{margin-bottom:0 !important}

/* ---------- 11. CHIFFRES CLÉS ---------- */
.rpna-chiffre{
  background:#fff;border:1px solid var(--rpna-bordure);border-radius:var(--rpna-rayon);
  padding:18px 20px;
}
.rpna-chiffre p{margin:0 !important;line-height:1.4}
.rpna-chiffre strong{display:block;font-size:clamp(28px, 2vw + 10px, 34px);line-height:1.1;font-weight:800;color:var(--rpna-accent);margin-bottom:4px}
.rpna-chiffre em{display:block;font-style:normal;font-size:12px;color:var(--rpna-gris);border-top:1px dashed var(--rpna-bordure);padding-top:8px;margin-top:8px}

/* ---------- 12. CONTACTS ET BLOCS D'INFOS ---------- */
.rpna-contact,.rpna-info{
  border:1px solid var(--rpna-bordure);border-radius:10px;background:#fff;
  padding:14px 16px;font-size:14px;line-height:1.5;
}
.rpna-contact p,.rpna-info p{margin:0 !important}
.rpna-contact{color:var(--rpna-gris)}
.rpna-contact strong{display:block;color:var(--rpna-texte);font-size:15px}
.rpna-info{font-size:15px}
.rpna-info strong{
  display:block;margin-bottom:4px;color:var(--rpna-accent);
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- 13. BARRE D'ANCRES ---------- */
.rpna-ancres{border-bottom:1px solid var(--rpna-bordure);margin-bottom:8px !important}
.rpna-ancres ul{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:0 22px}
.rpna-ancres li{list-style:none !important;margin:0 !important}
.rpna-ancres li::before{display:none !important}
.rpna-ancres a{display:inline-block;padding:10px 0;text-decoration:none !important;color:var(--rpna-gris) !important;font-weight:600;font-size:14px;white-space:nowrap}
.rpna-ancres a:hover,.rpna-ancres a:focus{color:var(--rpna-accent) !important}

/* ---------- 14. CARTES DU CATALOGUE (colonne) ---------- */
.rpna-fiche-carte{margin-bottom:24px}
.rpna-fiche-carte > .vc_column-inner > .wpb_wrapper{
  background:#fff;border:1px solid var(--rpna-bordure);border-radius:var(--rpna-rayon);
  overflow:hidden;height:100%;display:flex;flex-direction:column;padding-bottom:16px;
  transition:box-shadow .2s, transform .2s;
}
.rpna-fiche-carte > .vc_column-inner > .wpb_wrapper:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(40,20,50,.1)}
.rpna-fiche-carte .wpb_single_image{margin-bottom:14px !important}
.rpna-fiche-carte .wpb_single_image img{width:100%;height:170px;object-fit:cover;display:block}
.rpna-fiche-carte .wpb_text_column,
.rpna-fiche-carte .vc_btn3-container{padding:0 18px}
.rpna-fiche-carte .wpb_text_column{margin-bottom:10px !important}
.rpna-fiche-carte .vc_btn3-container{margin-top:auto;margin-bottom:0 !important}
.rpna-fiche-carte h3{font-size:17px;line-height:1.3;margin:0 0 8px}
.rpna-fiche-carte p{font-size:13px;color:var(--rpna-gris);margin:0 0 4px}
.rpna-fiche-carte p strong{color:var(--rpna-texte)}

/* ---------- 15. BOUTONS (élément « Bouton » WPBakery) ---------- */
.rpna-btn .vc_btn3,
.rpna-btn-contour .vc_btn3{
  border-radius:999px !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;font-size:13px !important;line-height:1.3 !important;
  padding:12px 22px !important;
  background-image:none !important;box-shadow:none !important;
  transition:background-color .2s, color .2s;
}
.rpna-btn .vc_btn3{background-color:var(--rpna-accent) !important;color:#fff !important;border:2px solid var(--rpna-accent) !important}
.rpna-btn .vc_btn3:hover,.rpna-btn .vc_btn3:focus{background-color:var(--rpna-accent-fonce) !important;border-color:var(--rpna-accent-fonce) !important}
.rpna-btn-contour .vc_btn3{background-color:transparent !important;color:var(--rpna-accent) !important;border:2px solid var(--rpna-accent) !important}
.rpna-btn-contour .vc_btn3:hover,.rpna-btn-contour .vc_btn3:focus{background-color:var(--rpna-accent) !important;color:#fff !important}
.rpna-btn .vc_btn3:focus-visible,.rpna-btn-contour .vc_btn3:focus-visible{outline:3px solid var(--rpna-accent-fonce);outline-offset:3px}

/* ---------- 16. ACCORDÉON (élément « Accordéon » WPBakery) ---------- */
.vc_tta.rpna-accordeon .vc_tta-panel{margin-bottom:8px !important}
.vc_tta.rpna-accordeon .vc_tta-panel .vc_tta-panel-heading{
  background:#fff !important;border:1px solid var(--rpna-bordure) !important;border-radius:10px !important;
}
.vc_tta.rpna-accordeon .vc_tta-panel.vc_active .vc_tta-panel-heading{border-radius:10px 10px 0 0 !important;border-bottom-color:transparent !important}
.vc_tta.rpna-accordeon .vc_tta-panel-title > a{color:var(--rpna-texte) !important;font-weight:700;padding:14px 18px !important;line-height:1.35}
.vc_tta.rpna-accordeon .vc_tta-panel-title > a:hover{color:var(--rpna-accent) !important}
.vc_tta.rpna-accordeon .vc_tta-controls-icon::before,
.vc_tta.rpna-accordeon .vc_tta-controls-icon::after{border-color:var(--rpna-accent) !important}
.vc_tta.rpna-accordeon .vc_tta-panel-body{
  background:#fff !important;border:1px solid var(--rpna-bordure) !important;border-top:0 !important;
  border-radius:0 0 10px 10px !important;padding:0 18px 14px !important;
}
.vc_tta.rpna-accordeon .vc_tta-panel-body p:last-child{margin-bottom:0}

/* ---------- 17. COLONNE LATÉRALE FIXE (grand écran uniquement) ---------- */
@media (min-width:1200px){
  .rpna-sticky > .vc_column-inner > .wpb_wrapper{position:sticky;top:var(--rpna-sticky-haut);align-self:flex-start}
  .rpna-sticky{padding-left:20px !important}
}

/* ---------- 18. TABLETTE ET PETITS ÉCRANS (moins de 1200 px) ---------- */
@media (max-width:1199px){
  /* L'encadré prix/infos passe AU-DESSUS du contenu détaillé */
  body:not(#rpna-z) .vc_row.rpna-section.vc_row-flex > .rpna-sticky{order:-1}
  .rpna-sticky > .vc_column-inner{max-width:560px}
  .rpna-sticky{margin-bottom:12px}
  /* Barre d'ancres : défilement horizontal au lieu de passer sur 2 lignes */
  .rpna-ancres ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0 18px;padding-bottom:2px !important}
}

/* ---------- 19. MOBILE (moins de 768 px) ---------- */
@media (max-width:767px){
  body:not(#rpna-z) .vc_row.rpna-hero{padding-top:22px !important;padding-bottom:22px !important}
  body:not(#rpna-z) .vc_row.rpna-section{padding-top:16px !important}
  body:not(#rpna-z) .vc_row.rpna-section-douce{padding-top:22px !important;padding-bottom:8px !important}
  .rpna-titre{margin-top:22px}

  /* Sessions : date sur sa propre ligne */
  .rpna-sessions li strong{min-width:0;width:100%}

  /* Infos latérales : libellé au-dessus de la valeur si trop long */
  .rpna-infos p{flex-wrap:wrap}

  /* Boutons du bandeau pleine largeur */
  body:not(#rpna-z) .vc_row.rpna-hero .vc_btn3-container{display:block;margin-right:0}
  body:not(#rpna-z) .vc_row.rpna-hero .vc_btn3{display:block;text-align:center}

  .rpna-fiche-carte .wpb_single_image img{height:150px}
}