/* ===========================================================================
   Pages hubs BIG Idea / BIG Media / BIG People (gabarits page-big-*.php)
   Couleurs marque : rouge #EF2B20, vert #BDFF00, crème #F6EEDF, noir #000
   Les accordéons FAQ (.agence-toggle) et pastilles viennent d'agence.css.
   =========================================================================== */

#hub-page .hub-container{width:80%;max-width:1480px;margin:0 auto;}

/* --- HERO (codes de l'accueil : noir, typo affiche, surbrillance, swoosh) --- */
.hub-hero{background:#000;color:#fff;padding:90px 0 80px;}
/* Fonds photo (banque d'images, 06/08/2026) sous voile sombre — le texte reste roi */
.hub-hero--big-media{background:linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.74)),
  url(hub-img/hero-media.jpg) center/cover no-repeat #000;}
.hub-hero--big-idea{background:linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.74)),
  url(hub-img/hero-idea.jpg) center/cover no-repeat #000;}
.hub-hero--big-people{background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
  url(hub-img/hero-people-2.jpg) center/cover no-repeat #000;}
.hub-hero__eyebrow{display:block;text-transform:uppercase;letter-spacing:.16em;
  font-size:15px;font-weight:600;margin:0 0 1.2em;color:#fff;}
.hub-hero__title{color:#fff;margin:0 0 .35em;font-size:62px;line-height:1.06em;
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;}
.hub-hero__title .surbrillance{color:#000;}
.hub-hero__swoosh{display:block;width:420px;max-width:80%;margin:-14px 0 30px 6px;}
.hub-hero__intro{font-size:18px;line-height:1.7em;max-width:720px;margin:0 0 2em;color:#fff;}
.hub-hero__btn{display:inline-block;background:#EF2B20;color:#fff;font-weight:600;
  border-radius:100px;padding:16px 34px;text-decoration:none;transition:background .2s,color .2s;}
.hub-hero__btn:hover{background:#BDFF00;color:#000;}
@media (max-width:980px){
  .hub-hero{padding:56px 0;}
  .hub-hero__title{font-size:36px;}
  .hub-hero__swoosh{margin:-8px 0 22px 4px;}
}

/* --- CORPS : typographie des sections --- */
.hub-corps{padding:70px 0 40px;}
.hub-corps h2{font-size:38px;line-height:1.25em;margin:1.8em 0 .7em;color:#EF2B20;}
.hub-corps h2:first-child{margin-top:0;}
.hub-corps p,.hub-corps li{font-size:17px;line-height:1.75em;}
.hub-corps ul{margin:0 0 1.4em;padding-left:1.2em;}
.hub-corps a{color:inherit;text-decoration:underline;}
.hub-corps a:hover{color:#EF2B20;}
@media (max-width:980px){
  .hub-corps{padding:44px 0 24px;}
  .hub-corps h2{font-size:26px;}
}

/* --- Expertises : cartes crème 2×2 --- */
.hub-cartes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:1.6em 0 2.2em;}
.hub-carte{background:#F6EEDF;border-radius:25px;padding:36px 38px;}
.hub-carte h3{margin:0 0 .5em;font-size:22px;line-height:1.3em;}
.hub-carte p{margin:0;font-size:16px;}
@media (max-width:980px){.hub-cartes{grid-template-columns:1fr;}.hub-carte{padding:26px;}}

/* --- Chiffres : bandeau noir façon accueil --- */
.hub-corps ul.hub-stats{background:#000;border-radius:25px;padding:46px 40px;margin:1.6em 0 2.2em;
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;list-style:none;}
.hub-stats li{color:#fff;font-size:15px;line-height:1.5em;padding:0;}
.hub-stats li strong{display:block;color:#BDFF00;font-size:34px;line-height:1.15em;
  font-weight:800;margin-bottom:4px;}
.hub-stats li a{color:#fff;}
@media (max-width:980px){.hub-corps ul.hub-stats{grid-template-columns:1fr 1fr;padding:30px 24px;}
  .hub-stats li strong{font-size:26px;}}

/* --- FAQ : les accordéons agence-toggle (agence.css) + respiration locale --- */
.hub-faq{display:flex;flex-direction:column;gap:18px;margin:1.4em 0 2.2em;}
.hub-faq .agence-toggle > summary{font-size:19px;}

/* --- CTA final : bande noire --- */
.hub-cta{background:#000;border-radius:25px;padding:50px 46px;margin:2.4em 0 1.6em;
  display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;justify-content:space-between;}
.hub-cta h2{color:#fff;margin:0;font-size:32px;line-height:1.25em;flex:1 1 380px;}
.hub-cta p{color:#fff;margin:0;flex:1 1 100%;order:3;}
/* wpautop enveloppe le bouton dans un <p> : le remettre en haut à droite, hors
   de la règle « paragraphe pleine largeur », et sans le soulignement des liens du corps */
.hub-cta p:has(.hub-hero__btn){flex:0 0 auto;order:0;margin:0 0 0 auto;}
.hub-corps .hub-hero__btn{text-decoration:none;white-space:nowrap;}
@media (max-width:980px){.hub-cta{padding:30px 26px;}.hub-cta h2{font-size:24px;}}