/* =========================================================
   Hypnocoon — compléments au design d'origine
   (menu mobile, accessibilité, finitions WordPress)
   ========================================================= */

/* ---------- Corrections en-tête : logo & bouton ---------- */
/* Le bouton RDV ne doit jamais passer à la ligne (sinon il se déforme en gros cercle) */
.btn{white-space:nowrap}
/* Le logo garde sa taille d'origine, jamais étiré */
.brand img{height:46px;width:auto;max-width:none;object-fit:contain}
@media(max-width:600px){ .brand img{height:38px} }

/* ---------- Bouton menu mobile (hamburger) ---------- */
.nav-toggle{
  display:none;
  background:transparent;border:1.5px solid rgba(30,42,71,.22);
  border-radius:12px;width:46px;height:42px;cursor:pointer;
  align-items:center;justify-content:center;padding:0;transition:.2s;
}
.nav-toggle:hover{border-color:var(--navy)}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--navy);position:relative;transition:.25s}
.nav-toggle .bar::before,.nav-toggle .bar::after{
  content:'';position:absolute;left:0;width:22px;height:2px;background:var(--navy);transition:.25s}
.nav-toggle .bar::before{top:-7px}
.nav-toggle .bar::after{top:7px}
.nav-toggle[aria-expanded="true"] .bar{background:transparent}
.nav-toggle[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg)}

/* ---------- Accessibilité : focus visible ---------- */
a:focus-visible,button:focus-visible,.card:focus-visible,
summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;z-index:300}
.skip-link:focus{left:0}

/* Cartes cliquables = vrais liens accessibles au clavier */
a.card{text-decoration:none;color:inherit;display:block}
a.card h3{color:var(--navy)}

/* Lien actif dans le menu */
nav.links a.current,nav.links a[aria-current="page"]{color:var(--terra-deep);opacity:1}
nav.links a.current::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--terra)}

/* ---------- Responsive : menu déroulant mobile ---------- */
@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{position:relative}
  nav.links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid rgba(30,42,71,.1);
    box-shadow:var(--shadow);padding:8px 0;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .3s ease,opacity .25s ease,visibility .25s;
  }
  nav.links.open{max-height:70vh;opacity:1;visibility:visible;overflow:auto}
  nav.links a{padding:14px 28px;font-size:16px;opacity:1;border-bottom:1px solid rgba(30,42,71,.06)}
  nav.links a:last-child{border-bottom:none}
  /* on garde le bouton RDV visible à droite du hamburger */
  .nav .btn-primary{padding:10px 16px;font-size:13px}
}

/* ---------- Bouton RDV flottant sur mobile ---------- */
.mobile-cta{display:none}
@media(max-width:640px){
  .mobile-cta{
    display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
    justify-content:center;
  }
  .mobile-cta .btn{width:100%;justify-content:center;box-shadow:0 14px 30px -10px rgba(237,138,30,.6)}
  body{padding-bottom:76px}
}

/* ---------- Fil d'Ariane (articles) ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.breadcrumb a{color:var(--terra-deep);font-weight:600}
.breadcrumb span{margin:0 6px;opacity:.5}

/* ---------- Articles liés ---------- */
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:14px}
@media(max-width:640px){.related{grid-template-columns:1fr}}

/* ---------- Contenu d'article édité dans WordPress ---------- */
.article .wp-block-image,.article figure{margin:22px 0}
.article ul,.article ol{margin:18px 0 18px 22px;color:var(--ink)}
.article li{margin:6px 0;font-size:17px}
.article blockquote{border-left:4px solid var(--gold);padding:6px 0 6px 20px;margin:22px 0;
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--navy)}
.article h3{font-size:21px;color:var(--navy);margin:26px 0 8px}

/* ---------- Grille de certifications (alignée, gérable) ---------- */
.certgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  align-items:stretch;max-width:980px;margin:0 auto;
}
@media(max-width:820px){ .certgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .certgrid{grid-template-columns:1fr} }
.cert-card{
  background:var(--white);border:1px solid rgba(30,42,71,.07);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:26px 20px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  text-align:center;transition:.3s;
}
a.cert-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.cert-logo{height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.cert-logo img{max-height:96px;width:auto;max-width:100%;object-fit:contain}
.cert-name{font-family:var(--serif);font-size:19px;color:var(--navy);line-height:1.2}
.cert-sub{font-size:13px;color:var(--muted);line-height:1.35}

/* ---------- Formulaire : message de confirmation ---------- */
.form-alert{padding:12px 16px;border-radius:12px;font-size:14px;margin-bottom:14px}
.form-alert.ok{background:#e7f5ef;color:#0C4744;border:1px solid #b9e2cf}
.form-alert.err{background:#fae9e6;color:#9b2d1f;border:1px solid #f0c4bb}

/* ---------- Sous-menus déroulants (ex. « Mes créations ») ---------- */
nav.links li{position:relative;list-style:none}
nav.links li.menu-item-has-children > a::after{
  content:'';display:inline-block;width:6px;height:6px;margin-left:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.7;
}
nav.links .sub-menu{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:210px;background:var(--cream,#f6f1ea);
  border:1px solid rgba(30,42,71,.1);border-radius:14px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:.2s;z-index:120;
}
nav.links li.menu-item-has-children:hover > .sub-menu,
nav.links li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px);
}
nav.links .sub-menu li{display:block}
nav.links .sub-menu a{
  display:block;padding:10px 14px;border-radius:9px;font-size:14px;
  white-space:nowrap;opacity:.9;
}
nav.links .sub-menu a:hover{background:rgba(30,42,71,.06);opacity:1}

/* Sous-menus en mobile : affichés en retrait sous le parent */
@media(max-width:900px){
  nav.links .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:transparent;border:none;box-shadow:none;
    padding:0;border-radius:0;
  }
  nav.links li.menu-item-has-children > a::after{transform:rotate(45deg)}
  nav.links .sub-menu a{
    padding:12px 28px 12px 44px;font-size:15px;opacity:.85;
    border-bottom:1px solid rgba(30,42,71,.06);border-radius:0;
  }
}