/*
Theme Name: JCB — L'Architecte du Possible
Theme URI: https://www.jeancyrillebado.com
Author: Wazimu
Description: Thème sur mesure pour le site personnel de Jean Cyrille Bado — design bespoke (Fraunces/Sora, navy/bordeaux/or), optimisé pour la performance (mobile 3G). Contenu éditable via champs ACF ; ateliers et inscriptions gérés par le plugin « JCB — Ateliers de l'Influence ».
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jcb
*/

/* ============ Design tokens ============ */
:root{
  --navy:#2B3A67;--navy-deep:#1E2B52;--ink:#151E3A;--deep:#0E1525;
  --bordeaux:#7A1E3A;--bordeaux-deep:#5E1730;
  --gold:#C8A44A;--gold-light:#D4B85E;--gold-pale:#F5EDD6;--gold-deep:#8A6D2A;
  --cream:#FAF8F2;--white:#F8F6F0;--text:#2C2C2C;--ink-body:#555;--ink-muted:#6a6a6a;
  --surface:#1A2442;--surface2:#243155;
  --serif:'Fraunces',Georgia,serif;--sans:'Sora',system-ui,sans-serif;
  --maxw:1160px;
  --ease:cubic-bezier(.16,.7,.3,1);
  --shadow-sm:0 4px 14px -8px rgba(14,21,37,.30);
  --shadow-md:0 20px 44px -26px rgba(14,21,37,.48);
  --shadow-lg:0 40px 72px -40px rgba(14,21,37,.60);
  --radius:2px;
}

/* ============ Composants réutilisables : élévation au survol/focus ============ */
.jcb-lift{transition:transform .45s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease)}
.jcb-lift:hover,.jcb-lift:focus-within{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow-md)}
.jcb-lift--sm{transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease)}
.jcb-lift--sm:hover,.jcb-lift--sm:focus-within{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-md)}
.jcb-lift--dark{transition:box-shadow .45s var(--ease)}
.jcb-lift--dark:hover,.jcb-lift--dark:focus-within{box-shadow:var(--shadow-lg)}
@media(prefers-reduced-motion:reduce){.jcb-lift,.jcb-lift--sm,.jcb-lift--dark{transition:border-color .3s}.jcb-lift:hover,.jcb-lift--sm:hover,.jcb-lift:focus-within,.jcb-lift--sm:focus-within{transform:none}}

/* ============ Transitions de page ============ */
/* Fondu-montée du contenu à chaque chargement (comme les héros de la V0) */
@keyframes jcbEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main#main{animation:jcbEnter .6s var(--ease) both}
/* + crossfade natif entre pages sur les navigateurs compatibles */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){main#main{animation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ============ Reset léger ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
img,picture,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);line-height:1.14;margin:0}
p{margin:0}

/* ============ Helpers ============ */
.jcb-container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}
.jcb-section{padding:clamp(4rem,8vw,6rem) 0}
.jcb-eyebrow{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0 0 1rem}
.jcb-h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:700;line-height:1.08}
.jcb-h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;line-height:1.16}
.jcb-lead{font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.85;color:var(--ink-body);font-weight:300;max-width:44rem}
.jcb-btn{display:inline-block;position:relative;overflow:hidden;background:var(--gold);color:var(--ink);border:1.5px solid var(--gold);padding:14px 32px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease)}
.jcb-btn:hover{background:transparent;color:var(--gold)}
/* Reflet qui balaie le bouton au survol (comme V0) */
.jcb-btn::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none}
.jcb-btn:hover::after{animation:shineSweep .85s ease}
@keyframes shineSweep{from{left:-130%}to{left:150%}}
@media(prefers-reduced-motion:reduce){.jcb-btn:hover::after{animation:none}}
.jcb-btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.jcb-btn--ghost:hover{background:var(--navy);color:#fff}
/* Bouton secondaire « contour » sur fond sombre (survol : bordure + texte or) */
.jcb-btn--line{display:inline-block;background:transparent;color:#fff;border:1px solid rgba(248,246,240,.28);padding:14px 32px;font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:border-color .28s var(--ease),color .28s var(--ease)}
.jcb-btn--line:hover{border-color:var(--gold);color:var(--gold)}

/* ============ Nav ============ */
.jcb-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem clamp(1.2rem,4vw,3rem);background:rgba(14,21,37,.96);border-bottom:1px solid rgba(200,164,74,.16)}
.jcb-nav a,.jcb-nav .menu-item a{color:rgba(248,246,240,.85);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.jcb-nav a:hover{color:var(--gold)}
.jcb-nav__logo img{height:clamp(44px,4vw,54px);width:auto}
.jcb-menu{display:flex;gap:clamp(1rem,2vw,2rem);list-style:none;margin:0;padding:0}
.jcb-nav__cta{background:var(--gold);color:var(--ink);padding:9px 22px;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.jcb-nav__cta:hover{background:transparent;color:var(--gold)}
.jcb-nav__presse{color:rgba(248,246,240,.7);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:color .25s var(--ease)}
.jcb-nav__presse:hover{color:var(--gold)}
@media(max-width:880px){.jcb-nav__presse{display:none}}
main{padding-top:0}

/* ============ Footer (3 étages équilibrés) ============ */
.jcb-footer{background:var(--deep);color:rgba(248,246,240,.6);position:relative;overflow:hidden}
.jcb-footer__inner{max-width:1200px;margin:0 auto;padding:clamp(3.4rem,6vw,5rem) clamp(1.5rem,5vw,4rem)}
.jcb-footer__brand{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.4rem 3rem;align-items:center;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.08)}
.jcb-footer__mission{font-size:.9rem;line-height:1.75;font-weight:300;color:rgba(248,246,240,.62);max-width:36rem}
.jcb-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:2.4rem 2rem;padding:2.6rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.jcb-footer__grid h4{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;font-weight:600}
.jcb-footer__grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.jcb-footer__grid a{color:rgba(248,246,240,.62);font-size:.85rem;font-weight:300;transition:color .2s}
.jcb-footer__grid a:hover{color:var(--gold)}
.jcb-footer__socials{display:flex;gap:.6rem;flex-wrap:wrap}
.jcb-footer__socials a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:rgba(248,246,240,.6);transition:all .25s}
.jcb-footer__socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.jcb-contact-socials{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.jcb-contact-socials a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);color:rgba(248,246,240,.7);transition:all .25s var(--ease)}
.jcb-contact-socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.jcb-footer__legal{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.6rem;font-size:.68rem;color:rgba(248,246,240,.5)}

/* ============ Atelier (single) ============ */
.jcb-atelier-hero{padding:clamp(7.5rem,13vh,9.5rem) 0 0}
.jcb-atelier-hero .jcb-container{max-width:820px}
.jcb-atelier-meta{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bordeaux);font-weight:600;margin:.5rem 0 1.8rem}
.jcb-atelier-body{font-size:1.05rem;line-height:1.85;color:#4a4a4a;font-weight:300}
.jcb-atelier-band{background:var(--ink);color:#fff;text-align:center}
.jcb-atelier-band .jcb-price{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--gold-light);font-weight:700;margin:.6rem 0 1.6rem}
.jcb-inscription-wrap{max-width:680px;margin:0 auto}

/* ============ Accessibilité : lien d'évitement + focus clavier ============ */
.jcb-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--ink);padding:12px 20px;font-size:.8rem;font-weight:700;letter-spacing:.08em}
.jcb-skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="radio"]:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:2px}

/* ============ Menu principal : sous-menus (desktop, fidèle V0) ============ */
.jcb-menu-wrap{display:flex}
.jcb-menu>li{position:relative}
/* chevron qui pivote au survol */
.jcb-menu .menu-item-has-children>a::after{content:'';display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.45rem;opacity:.6;transition:transform .25s var(--ease),opacity .25s}
.jcb-menu>li.menu-item-has-children:hover>a::after,.jcb-menu>li.menu-item-has-children:focus-within>a::after{transform:rotate(225deg) translateY(1px);opacity:1}
.jcb-menu .sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:230px;background:rgba(18,26,46,.98);backdrop-filter:blur(18px);border:1px solid rgba(200,164,74,.2);border-radius:12px;padding:.55rem;list-style:none;margin:0;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s var(--ease);box-shadow:var(--shadow-lg);z-index:210}
/* pont invisible : garde le survol continu entre la rubrique et le sous-menu */
.jcb-menu .sub-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.jcb-menu>li:hover>.sub-menu,.jcb-menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.jcb-menu .sub-menu li{display:block}
.jcb-menu .sub-menu a{display:block;padding:.6rem .85rem;font-size:.78rem;letter-spacing:.04em;text-transform:none;font-weight:400;white-space:nowrap;color:rgba(248,246,240,.8);border-radius:8px;transition:background .18s,color .18s}
.jcb-menu .sub-menu a:hover{background:rgba(200,164,74,.13);color:var(--gold)}
.jcb-menu .sub-menu .jcb-subhead{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;padding:.35rem .85rem .55rem}
.jcb-nav .current-menu-item>a,.jcb-nav .current-menu-ancestor>a,.jcb-nav .current-page-ancestor>a{color:var(--gold)}

/* Hamburger (masqué sur desktop) */
.jcb-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.jcb-burger span{display:block;width:24px;height:2px;background:var(--gold);transition:transform .3s,opacity .3s}
.jcb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.jcb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.jcb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Menu mobile (≤ 880px) ============ */
@media(max-width:880px){
  .jcb-burger{display:flex;order:3}
  .jcb-nav__cta{display:none}
  .jcb-menu-wrap{position:fixed;inset:0 0 0 auto;width:min(85vw,340px);background:var(--deep);border-left:1px solid rgba(200,164,74,.18);padding:5.5rem 0 2rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,.7,.3,1);overflow-y:auto;z-index:190;box-shadow:-24px 0 60px -30px rgba(0,0,0,.8)}
  .jcb-menu-wrap.is-open{transform:translateX(0)}
  .jcb-menu{flex-direction:column;gap:0;width:100%}
  .jcb-menu>li{border-bottom:1px solid rgba(255,255,255,.06)}
  .jcb-menu>li>a{display:block;padding:1rem 1.8rem;font-size:.92rem}
  .jcb-menu .sub-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:rgba(255,255,255,.03);border:none;box-shadow:none;padding:.2rem 0 .6rem}
  .jcb-menu .sub-menu a{padding:.55rem 1.8rem .55rem 2.8rem;font-size:.82rem}
  .jcb-menu .menu-item-has-children>a::after{content:none}
  body.jcb-nav-open{overflow:hidden}
  .jcb-nav-backdrop{position:fixed;inset:0;background:rgba(14,21,37,.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:180}
  .jcb-nav-backdrop.is-open{opacity:1;visibility:visible}
}

/* ============ Motifs (kente / tissu) + animations ============ */
.tissu{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2714%27%3E%3Cpath%20d%3D%27M0%2010%20L9%204%20L18%2010%20L27%204%20L36%2010%27%20fill%3D%27none%27%20stroke%3D%27%23C8A44A%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M0%204%20L9%2010%20L18%204%20L27%2010%20L36%204%27%20fill%3D%27none%27%20stroke%3D%27%23C8A44A%27%20stroke-width%3D%271%27%20opacity%3D%270.35%27%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-position:center}
.tissu-tex{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2790%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C8A44A%27%20stroke-width%3D%271%27%3E%3Cpath%20d%3D%27M45%2028%20L62%2045%20L45%2062%20L28%2045%20Z%27%2F%3E%3Cpath%20d%3D%27M45%2035%20L55%2045%20L45%2055%20L35%2045%20Z%27%2F%3E%3Cpath%20d%3D%27M12%2045%20h10%20M68%2045%20h10%20M45%2012%20v10%20M45%2068%20v10%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23C8A44A%27%3E%3Ccircle%20cx%3D%2745%27%20cy%3D%2745%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2780%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2710%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2780%27%20r%3D%271.3%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:repeat}
.kente{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2716%27%3E%3Cpath%20d%3D%27M0%2015%20L8%201%20L16%2015%20Z%20M16%2015%20L24%201%20L32%2015%20Z%27%20fill%3D%27%23C8A44A%27%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-position:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes curtainWipe{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@media(prefers-reduced-motion:reduce){[style*="animation"],.jcb-marq{animation:none!important}}

/* ============ Contenu riche (wysiwyg ACF) ============ */
.jcb-richtext p{margin:0 0 1.1rem}
.jcb-richtext p:last-child{margin-bottom:0}
.jcb-richtext strong{color:var(--navy);font-weight:600}
.jcb-richtext a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}

/* ============ Corps d'article (Journal) ============ */
.jcb-post p{font-size:1.12rem;line-height:1.95;color:#3a3a3a;font-weight:300;margin:0 0 1.5rem;text-wrap:pretty}
.jcb-post p:first-of-type::first-letter{font-family:var(--serif);font-size:3.5em;line-height:.78;float:left;color:var(--bordeaux);font-weight:700;margin:.06em .14em 0 0}
.jcb-post blockquote.jcb-pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.5;color:var(--navy);border-left:3px solid var(--gold);padding:0 0 0 1.6rem;margin:2.8rem 0}
.jcb-post strong{color:var(--navy);font-weight:600}
.jcb-post h2,.jcb-post h3{font-family:var(--serif);color:var(--navy);margin:2rem 0 1rem}
.jcb-post a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
.jcb-share a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #e0d9c8;color:var(--navy);font-size:.72rem;font-weight:700;transition:all .25s}
.jcb-share a:hover{border-color:var(--gold);color:var(--bordeaux)}
.jcb-dropcap-dark p:first-of-type::first-letter{font-family:var(--serif);font-size:3.5em;line-height:.78;float:left;color:var(--gold-light);font-weight:400;margin:.06em .14em 0 0}

/* ============ FAQ accordéon (details natif) ============ */
.jcb-faq details{border-bottom:1px solid #e6e0d2}
.jcb-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:1.5rem 0;cursor:pointer}
.jcb-faq summary::-webkit-details-marker{display:none}
.jcb-faq summary h3{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.25rem);color:var(--bordeaux);font-weight:600;line-height:1.3;margin:0}
.jcb-faq summary .jcb-faq-ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(200,164,74,.4);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.4rem;color:var(--gold-deep);line-height:1;transition:all .3s}
.jcb-faq details[open] summary .jcb-faq-ico{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:rotate(180deg)}
.jcb-faq details[open] summary .jcb-faq-ico::before{content:"–"}
.jcb-faq summary .jcb-faq-ico::before{content:"+"}
.jcb-faq .jcb-faq-a{font-size:.98rem;line-height:1.8;color:var(--ink-body);font-weight:300;padding:0 0 1.6rem;max-width:46rem}