/* =========================================================
   Apprentissage BFC — UI Pro (clean)
   Palette & tokens attendus dans style.css :
   --brand-primary:#8A1538; --brand-secondary:#0B1E3D;
   --brand-text:#0B1E3D; --brand-muted:#6B7280;
   --surface:#fff; --border:#E5E7EB;
   --font-headings:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   --font-body:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   ========================================================= */

/* ========== 0) Base & accessibilité ========== */
html, body { background:#fff; overflow-x:hidden; }
body{
  font-family:var(--font-body);
  color:var(--brand-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5rem; letter-spacing:.2px; color:var(--brand-secondary);
  font-family:var(--font-headings);
}
h1{font-weight:800;font-size:clamp(28px,3vw,40px)}
h2{font-weight:800;font-size:clamp(22px,2vw,28px)}
h3{font-weight:700;font-size:clamp(18px,1.6vw,22px)}
a{color:var(--brand-primary);text-decoration:none}
a:hover{text-decoration:underline}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ========== 1) Variables dérivées & overrides Kadence ========== */
:root{
  --cma-bordeaux: var(--brand-primary);
  --cma-marine:   var(--brand-secondary);
  --cma-cream:    #F6F8FB;
  --cma-border:   #E5E7EB;

  /* pousse Kadence à utiliser nos couleurs primaires */
  --global-palette1:var(--brand-primary)!important;
  --global-palette2:var(--brand-secondary)!important;
}

/* ========== 2) Mise en page globale (supprime la sidebar) ========== */
.sidebar, #secondary, .widget-area { display:none !important; }
.content-sidebar-wrap, .sidebar-content-wrap {
  display:grid !important; grid-template-columns:1fr !important; column-gap:0 !important;
}
.site, .site-container, .content-container, .wrap, .container,
.site-main, .content-area, .entry-content-wrap, .entry-content{
  width:100% !important; max-width:none !important; margin:0 auto !important;
}
.page-wrap{ width:min(96vw, 1500px); margin-inline:auto; }

/* ========== 3) Grilles accueil ========== */
.cma-layout{ display:grid; gap:22px; }
@media (min-width:1100px){ .cma-layout{ grid-template-columns:minmax(0,1fr) 360px; } }
@media (min-width:1440px){ .cma-layout{ grid-template-columns:minmax(0,1fr) 380px; } }

/* slab (colonne contenu) */
.slab{
  background:var(--cma-cream);
  border:1px solid var(--cma-border);
  border-radius:10px;
  padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.section-title{ text-align:center; color:var(--cma-marine); font-weight:800; margin:12px 0 8px; }

/* ========== 4) CTA du hero ========== */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0 2px; }
.cta-row .button,
.cta-row .wp-block-button__link,
.cta-row button,
.cta-row input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:10px 16px; border-radius:10px;
  border:1px solid var(--cma-marine); background:var(--cma-marine); color:#fff;
  font-weight:700; transition:background .18s, border-color .18s;
}
.cta-row .button:hover,
.cta-row .wp-block-button__link:hover,
.cta-row button:hover,
.cta-row input[type=submit]:hover{
  background:var(--cma-bordeaux); border-color:var(--cma-bordeaux);
}

/* ========== 5) Panneau bleu ========== */
.panel{
  background:var(--cma-marine); color:#fff;
  border-radius:12px; padding:14px;
  box-shadow:0 18px 44px rgba(10,22,40,.28);
}
.panel h3,.panel h4{ color:#fff; margin:0 0 8px; }
.panel a{ color:#fff; text-decoration:underline; }
.panel--emphasis{ position:sticky; top:18px; }
.panel-actions { display: grid; gap: 10px; margin: 6px 0 14px; }
.panel-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#fff !important;
}
.panel-btn:hover{ background:rgba(255,255,255,.12); }
.panel-btn--primary{ background:var(--cma-bordeaux) !important; border-color:var(--cma-bordeaux) !important; }

/* Variante : boutons blancs -> bordeaux au survol */
.panel-btn.panel-btn--white{
  background:#fff !important; color:var(--cma-marine) !important; border:1px solid #dbe3ea !important;
  height:40px; border-radius:10px; font-weight:800; justify-content:center;
}
.panel-btn.panel-btn--white:hover{
  background:var(--cma-bordeaux) !important; border-color:var(--cma-bordeaux) !important; color:#fff !important;
}
.panel-subtitle{ color:#fff; font-weight:800; margin:14px 0 8px; letter-spacing:.2px; }
.panel-quick{ display:grid; gap:12px; }

/* Cartes compactes dans le panneau */
.panel-card{
  background:#fff; border:1px solid #dbe3ea; border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.10); overflow:hidden;
}
.panel-card__head{
  display:flex; gap:10px; align-items:flex-start;
  background:#fff; padding:12px 12px 10px; border-bottom:1px solid #e9eef3;
}
.panel-card__head .dot{
  flex:0 0 8px; height:8px; margin-top:8px; border-radius:50%; background:var(--cma-bordeaux, #8A1538);
}
.panel-card__head .kicker{ font-size:12px; font-weight:400; color:#6b7280; margin-bottom:2px; }
.panel-card__head .title{ font-size:16px; font-weight:600; color:#0b1e3d; line-height:1.25; margin:0; }
.panel-card__body{ padding:12px; background:#fff; }
.panel-card__body .login-embed input[type=text],
.panel-card__body .login-embed input[type=email],
.panel-card__body .login-embed input[type=password]{
  width:100%; height:42px; border:1px solid var(--cma-border, #E5E7EB); border-radius:10px; padding:8px 12px;
}
.panel-card__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.panel-card__actions .pill{ height:34px; padding:0 12px; font-size:14px; }

/* ========== 6) Cartes “accès rapides” (version fixe, sans accordéon) ========== */
.grid-roles.no-accordion{
  display:grid; justify-content:center; gap:18px;
  grid-template-columns:repeat(1, minmax(340px, 420px));
}
@media (min-width:980px){
  .grid-roles.no-accordion{ grid-template-columns:repeat(3, minmax(340px, 420px)); }
}
.role-static{
  padding:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.role-static__head{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; background:#fff; border-bottom:1px solid var(--border);
}
.role-static__head .dot{ flex:0 0 8px; height:8px; border-radius:50%; background:var(--cma-bordeaux); margin-top:8px; }
.role-static__head .kicker{ font-size:12px; font-weight:400; color:var(--brand-muted); margin-bottom:2px; }
.role-static__head .title{ font-size:18px; font-weight:800; color:var(--cma-marine); line-height:1.3; margin:0; }
.role-static__body{ padding:12px 14px 14px; background:#fff; }

/* Inputs login propres */
.role-static .login-embed input[type=text],
.role-static .login-embed input[type=email],
.role-static .login-embed input[type=password]{
  width:100%; height:42px; border:1px solid var(--cma-border); border-radius:10px; padding:8px 12px;
  transition:border-color .2s, box-shadow .2s; background:#fff;
}
.role-static .login-embed input:focus{
  border-color:var(--cma-bordeaux); box-shadow:0 0 0 3px rgba(138,21,56,.18);
}
.role-static .login-embed input::placeholder{ color:#9AA4B2; }
.role-static .login-embed input[type=submit],
.role-static .login-embed .button{ height:42px; padding:0 14px; border-radius:10px; font-weight:700; }

/* Boutons sous les formulaires (pills) */
.role-static .quick-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pill, .linkbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--cma-border);
  background:#fff; color:var(--cma-marine); font-weight:700;
}
.pill--primary{ background:var(--cma-bordeaux); border-color:var(--cma-bordeaux); color:#fff; }

/* ========== 7) Ressources utiles ========== */
.links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.links .linkbtn{ height:36px; padding:0 12px; border-radius:999px; }

/* ========== 8) Détails visuels utiles ========== */
.page-band{ height:8px; background:var(--cma-bordeaux); border-radius:0 0 10px 10px; }
.title--cma{ text-align:center; text-transform:uppercase; letter-spacing:.6px; font-weight:800; color:var(--cma-marine); margin:18px 0 8px; }
.card:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.08); border-color:#E0E4EA; }

/* === Panneau bleu : accordéons (version consolidée) === */
.panel-acc{ border-top:1px solid rgba(255,255,255,.15); padding-top:10px; }
.panel-acc > summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer; user-select:none;
}
.panel-acc > summary::-webkit-details-marker{ display:none; }
.panel-acc[open] > summary{ background:rgba(255,255,255,.12); }
.panel-acc .chev{ transform:rotate(-90deg); transition:transform .2s ease; opacity:.9; }
.panel-acc[open] .chev{ transform:rotate(0deg); }

.panel-acc__body{
  background:transparent !important;
  padding-top:12px;
}
.panel-acc__body .login-embed,
.panel-acc__body .login-embed form{
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
.panel-acc__body .login-embed p{
  margin:8px 0 !important; padding:0 !important; background:transparent !important; border:0 !important;
}
.panel-acc__body .login-embed label{
  display:block; font-size:13px; color:#e6edf6; margin-bottom:6px; font-weight:500;
}
.panel-acc__body .login-embed input[type="text"],
.panel-acc__body .login-embed input[type="email"],
.panel-acc__body .login-embed input[type="password"]{
  box-sizing:border-box; width:100%; max-width:100%;
  height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.22);
  background:#fff; color:var(--cma-marine); padding:8px 12px; line-height:1.25; box-shadow:none; margin:0; display:block;
}
.panel-acc__body .login-embed input:focus{
  outline:none; border-color:var(--cma-bordeaux); box-shadow:0 0 0 3px rgba(138,21,56,.18);
}
.panel-acc__body .login-embed input[type="checkbox"]{ width:auto; height:auto; margin-right:6px; }
.panel-acc__body .login-embed .forgetmenot,
.panel-acc__body .login-embed .rememberme{
  display:flex; align-items:center; gap:6px; margin:10px 0 8px !important; color:#dbe6f4; font-size:13px;
}
.panel-acc__body .login-embed input[type="submit"],
.panel-acc__body .login-embed .button{
  height:42px; padding:0 16px; border-radius:12px; border:0; background:var(--cma-bordeaux); color:#fff;
  font-weight:800; box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.panel-acc__body .login-embed input[type="submit"]:hover{ filter:brightness(.97); }

/* ===== HERO plein bordeaux (sans dégradé) ===== */
.abfc-hero{
  margin:14px 0 10px; border-radius:18px; padding:42px 22px; color:#fff;
  background:var(--cma-bordeaux);
  box-shadow:0 20px 46px rgba(10,22,40,.18);
  border:1px solid rgba(255,255,255,.14);
}
.abfc-hero__inner{ max-width:980px; margin:0 auto; text-align:center; }
.abfc-hero__title{
  margin:0 0 6px; font-weight:900; letter-spacing:.2px; font-size:clamp(26px, 3.4vw, 44px); color:#fff;
}
.abfc-hero__subtitle{
  margin:0 0 16px; font-size:clamp(14px, 1.5vw, 18px); color:#fff; opacity:.95;
}

/* CTA “pills” dans le hero (blanc -> marine au survol) */
.abfc-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.cta-pill{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px;
  background:#fff; color:var(--cma-marine);
  border:1px solid rgba(255,255,255,.55); border-radius:12px; font-weight:800; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.cta-pill:hover{ background:var(--cma-marine); border-color:var(--cma-marine); color:#fff; }
.cta-pill.cta-pill--light{ background:#fff; color:var(--cma-marine); border-color:#fff; }
.cta-pill.cta-pill--light:hover{ background:#f2f6fb; }

/* ==== Bandeau visuel d'accueil (full-bleed) ==== */
.abfc-top-visual{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  height:clamp(220px, 32vw, 420px);
  background:center/cover no-repeat var(--hero); position:relative;
  box-shadow:0 18px 40px rgba(10,22,40,.16); isolation:isolate;
}
/* Supprime le voile bordeaux partout */
.abfc-top-visual::after{
  content: none !important;
  background: none !important;
}

/* Overflow guard en pleine largeur */
body, .site, .page-wrap { overflow-x: clip; }

/* Harmonisation login dans panneau (rappels) */
.panel-login input[type=text],
.panel-login input[type=email],
.panel-login input[type=password]{ width:100% !important; height:40px; border-radius:10px; }

/* CFA : bannière hero bleu marine */
.page-template-page-trouver-un-cfa-abfc .abfc-hero{
  background: var(--cma-marine) !important; /* #0B1E3D par défaut */
  border: 1px solid rgba(255,255,255,.14);
}

/* CTA lisibles sur fond marine */
.page-template-page-trouver-un-cfa-abfc .abfc-hero__ctas .cta-pill{
  background:#fff; color: var(--cma-marine); border-color:#fff;
}
.page-template-page-trouver-un-cfa-abfc .abfc-hero__ctas .cta-pill:hover{
  background: var(--cma-marine); color:#fff; border-color: var(--cma-marine);
}