/* Blog (www.getbobble.com/blog) : ce qui s'ajoute à pages.css du site pour le thème WordPress « bobble ».
   Variante B des planches du 08/10 : héros court, réponse dans le premier écran. Même charte, même grille de 8. */

/* Fil d'Ariane et signature */
.crumbs{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px;font:700 13px/1.2 Parkinsans,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(23,19,31,.62)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.5}
.byline{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:14px;line-height:1.3;color:rgba(23,19,31,.75);text-align:left}
.byline .av,.authorbox .av{text-transform:uppercase}
.byline .av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--lemon) center/cover;display:grid;place-items:center;font:700 14px Parkinsans,sans-serif;color:var(--ink);box-shadow:0 0 0 2px #fff}
.byline b{color:var(--ink)}

/* Héros court (B) : mêmes pièces que la landing (barre, île et sa place, bande, titre), la bande plafonnée pour que
   la réponse se voie dans le premier écran. */
.hero.short{height:auto;min-height:0;padding-bottom:32px}
.hero.short .crewstrip{flex:none;height:clamp(150px,24svh,250px);max-height:none;margin-top:24px;min-height:0}
.hero.short h1{font-size:clamp(30px,min(5.4vw,5.6svh),60px);max-width:18em;margin-top:6px}
.hero.short .eyebrow{margin-top:14px}
@media (max-width:560px){
  .hero.short .crewstrip{margin-top:20px;height:clamp(140px,22svh,200px)}
  .hero.short h1{font-size:clamp(27px,7.6vw,34px)}
}

/* La réponse courte, en tête : ce que Google et les IA reprennent, ce que le lecteur venu de Google cherche. */
.answer{background:#fff;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 3px var(--sky)}
.answer .lab{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 Parkinsans,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.answer .lab img{width:24px;height:24px;transform:rotate(-6deg)}
.answer p{font-size:18px;line-height:1.55}

/* Sommaire */
.toc{background:#fff;border-radius:20px;padding:0 20px}
.toc summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;display:flex;justify-content:space-between}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font:400 22px/1 'Dela Gothic One',sans-serif;color:var(--cobalt);transition:transform .5s var(--spring)}
.toc[open] summary::after{transform:rotate(45deg)}
.toc ol{padding:0 0 18px 1.25em;gap:6px;font-size:16px}
.toc a{text-decoration:none}

/* Capture dans un téléphone : la preuve qu'on a testé (E-E-A-T), et ce qui convertit sur une app visuelle. */
.shot{margin:0;background:var(--sky);border-radius:24px;padding:28px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{width:min(240px,62vw);aspect-ratio:9/19.5;border-radius:38px;background:#fff;box-shadow:0 0 0 9px var(--ink),0 18px 40px rgba(23,19,31,.25);overflow:hidden;position:relative;display:flex;flex-direction:column}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:999px;background:var(--ink)}
.phone .ui{margin-top:52px;padding:0 14px;display:flex;flex-direction:column;gap:8px;font-size:12px}
.phone .ui b{font:400 18px 'Dela Gothic One',sans-serif}
.phone .row{background:var(--cloud);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;font-weight:700}
.phone .row.on{background:var(--cobalt);color:#fff}
.shot figcaption{font-size:14px;color:rgba(23,19,31,.7);text-align:center;max-width:30em}

/* Appel dans le texte : une carte ciel avec la bande en petit (pas une bannière de pub). */
.inline-cta{background:var(--sky);border-radius:24px;padding:20px 20px 20px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center}
.inline-cta .mini{grid-row:1 / span 3;display:flex;align-items:flex-end;height:120px}
.inline-cta strong{font:400 21px/1.15 'Dela Gothic One',sans-serif}
.inline-cta p{font-size:15px;line-height:1.45}
.inline-cta .btn{justify-self:start;height:48px;font-size:15px;padding:0 22px;margin-top:6px}
.inline-cta .fine{grid-column:2;font-size:12px;font-weight:700;color:rgba(23,19,31,.6)}
@media (max-width:480px){.inline-cta{grid-template-columns:1fr;padding:20px;text-align:center;justify-items:center}.inline-cta .mini{grid-row:auto;height:110px}.inline-cta .btn{justify-self:center}.inline-cta .fine{grid-column:1}}

/* Encadré « Where Bobble fits » dans les listes */
.fits{background:#fff;border-radius:24px;padding:24px;box-shadow:inset 0 0 0 3px var(--lemon);display:flex;flex-direction:column;gap:10px}
.fits .ourtag{align-self:flex-start}

/* L'auteur, en fin d'article */
.authorbox{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;align-items:center;background:#fff;border-radius:24px;padding:20px}
.authorbox .av{grid-row:1 / span 2;width:64px;height:64px;border-radius:50%;background:var(--lemon);display:grid;place-items:center;font:400 22px 'Dela Gothic One',sans-serif;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sky)}
.authorbox b{font-size:17px}
.authorbox p{font-size:14px;color:var(--ink-soft);line-height:1.5}

/* Accueil du blog et articles liés : cartes avec une couverture faite de la bande du cast. */
main.wide{max-width:1088px}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--m) * -1);padding:2px var(--m) 6px}
.cats::-webkit-scrollbar{display:none}
.cats a{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;background:#fff;font:700 14px Parkinsans,sans-serif;text-decoration:none;box-shadow:0 0 0 1px rgba(23,19,31,.06)}
.cats a.on{background:var(--ink);color:#fff}
.cats img{width:22px;height:22px;transform:rotate(-6deg)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;list-style:none;padding:0;margin:0}
.post{background:#fff;border-radius:24px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;height:100%;transition:transform .35s var(--spring-soft),box-shadow .35s}
@media (hover:hover){.post:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,19,31,.08)}}
.post:active{transform:scale(.98)}
/* Couverture : les trois figurines centrées dans les deux sens, socles alignés en bas du groupe, même air en haut et en bas */
.pcover{height:168px;background:var(--c,var(--sky));display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:20px}
.trio{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:clamp(4px,1.5vw,14px);flex:none}
.inline-cta .mini .trio{gap:0}
.pcover .stk{position:absolute;top:12px;left:14px;width:34px;height:34px;transform:rotate(-8deg)}
.post .txt,.feature .txt{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.post .cat,.feature .cat{font:700 12px/1.2 Parkinsans,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.post h3{font:400 20px/1.2 'Dela Gothic One',sans-serif;color:var(--ink)}
.post p{font-size:15px;line-height:1.45;color:var(--ink-soft)}
.post .rt,.feature .rt{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:rgba(23,19,31,.55)}
/* À la une (index B) : une carte large, la couverture à gauche sur ordinateur */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#fff;border-radius:28px;overflow:hidden;text-decoration:none}
.feature .pcover{height:auto;min-height:300px}
.feature .txt{padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.feature h3{font:400 clamp(26px,3vw,36px)/1.1 'Dela Gothic One',sans-serif}
.feature p{font-size:17px;color:var(--ink-soft)}
@media (max-width:720px){.feature{grid-template-columns:1fr}.feature .pcover{min-height:210px}.feature .txt{padding:20px}}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sechead a{font-weight:700;font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Téléphone court (iPhone SE, navigateur d'Instagram) : la bande rétrécit, le fil d'Ariane se cache, la réponse entre dans l'écran */
@media (max-width:560px) and (max-height:740px){
  .hero.short .crewstrip{height:118px;margin-top:12px}
  .hero.short .crumbs{display:none}
  .hero.short h1{margin-top:12px}
  .hero.short{padding-bottom:24px}
}

/* Texte d'un article venu de WordPress : sections par H2, images en cartes, liens soulignés cobalt (pages.css). */
.prose h3{margin-top:8px}
.prose figure{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.prose img{border-radius:20px;height:auto}
.prose figcaption{font-size:14px;color:var(--ink-soft);text-align:center}
.prose blockquote{margin:0;padding:4px 0 4px 18px;border-left:3px solid var(--sky);font-style:normal}
.prose .wp-block-image,.prose .shot{margin:0}
.byline a,.authorbox b a{color:inherit;text-decoration:none}
.feature .h3{font:400 clamp(26px,3vw,36px)/1.1 'Dela Gothic One',sans-serif;margin:0}
.empty{background:#fff;border-radius:24px;padding:28px;align-items:flex-start}
.pager{display:flex;gap:8px;flex-wrap:wrap}
.pager .page-numbers{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#fff;font-weight:700;text-decoration:none}
.pager .current{background:var(--ink);color:#fff}
.inline-cta .mini{width:150px;justify-content:center;gap:0}
/* Signature : la tête de bobblehead du personnage, posée en bas du rond ciel */
.av.headav{background:var(--sky);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.av.headav .head{position:relative;flex:none;margin-bottom:-2px}

/* « Meet the writers » : une carte par personnage, sa tête de bobblehead dans un rond ciel */
.writers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:12px;list-style:none;padding:0;margin:0}
.writers a{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:20px;padding:18px 12px;text-decoration:none;text-align:center;transition:transform .35s var(--spring-soft),box-shadow .35s}
@media (hover:hover){.writers a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,19,31,.08)}}
.writers .av{width:72px;height:72px;border-radius:50%;background:var(--lemon);display:grid;place-items:center;font:400 24px 'Dela Gothic One',sans-serif;margin-bottom:6px}
.writers b{font-size:16px}
.writers span:not(.av){font-size:13px;color:var(--ink-soft)}
/* Sans île (08/10, comme la landing depuis le 30/09) : la bande passe juste sous la barre, avec l'air de la grille. */
.hero.short .crewstrip{margin-top:72px}
@media (max-width:560px){.hero.short .crewstrip{margin-top:20px}}
@media (max-width:560px) and (max-height:740px){.hero.short .crewstrip{margin-top:12px}}