/*
Theme Name: VBR Une 2026
Theme URI: https://vbr.ci/
Description: Thème enfant VBR — nouvelle une éditoriale (hero 3 colonnes, formats signature, emplacements publicitaires vendables).
Author: VBR — Vanguard Business Review
Version: 4.7.11
Template: magazilla
Text Domain: vbr-une
*/

/* Sentinelle : permet a la page de constater que cette feuille
   est bien appliquee, et de la recharger sinon. */
:root{--vbr-feuille:1;}


/* =========================================================
   VBR — Design tokens
   ========================================================= */
:root{
  --vbr-red:#C8102E;
  --vbr-ink:#141414;
  --vbr-grey:#6B6B6B;
  --vbr-line:#E4E4E4;
  --vbr-bg:#FFFFFF;
  --vbr-wash:#FAFAF8;
  --vbr-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --vbr-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* =========================================================
   Portée : tout est préfixé .vbr- pour ne jamais entrer en
   conflit avec le thème parent.
   ========================================================= */
.vbr-page,.vbr-page *{box-sizing:border-box;}
.vbr-page{
  background:var(--vbr-bg);
  color:var(--vbr-ink);
  font-family:var(--vbr-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Ceinture et bretelles : si une feuille du thème parent passe encore,
   elle ne doit pas gonfler les éléments d'interface de la une. */
.vbr-page .vbr-btn,.vbr-page .vbr-btn-ghost,.vbr-nav a,
.vbr-nl input,.vbr-nl button{line-height:1.15;}
.vbr-page a{color:inherit;text-decoration:none;transition:color .15s ease;}
.vbr-page img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---------- Survol ----------
   Le titre passe au rouge et la photo respire légèrement : le lecteur
   doit sentir que la carte entière est cliquable. */
.vbr-thumb img,.vbr-th img{transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.vbr-side h3 a:hover,.vbr-lead h2 a:hover,.vbr-card h3 a:hover,
.vbr-plist h3 a:hover,.vbr-partner-lead h3 a:hover,
.vbr-sec-head .vbr-all:hover{color:var(--vbr-red);}
.vbr-side-item:hover .vbr-thumb img,
.vbr-card:hover .vbr-thumb img,
.vbr-lead:hover .vbr-thumb img,
.vbr-partner-lead:hover .vbr-thumb img,
.vbr-plist:hover .vbr-th img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){
  .vbr-thumb img,.vbr-th img{transition:none;}
  .vbr-side-item:hover .vbr-thumb img,.vbr-card:hover .vbr-thumb img,
  .vbr-lead:hover .vbr-thumb img,.vbr-partner-lead:hover .vbr-thumb img,
  .vbr-plist:hover .vbr-th img{transform:none;}
}
/* les liens qui enveloppent une vignette doivent être des blocs */
.vbr-side-item > a,.vbr-lead > a,.vbr-card > a,.vbr-partner-lead > a,.vbr-plist > a{display:block;}
.vbr-page h1,.vbr-page h2,.vbr-page h3,.vbr-page h4,.vbr-page h5{font-family:var(--vbr-sans);}

/* Gouttière unique : tous les blocs partagent le même bord gauche */
.vbr-wrap{max-width:1340px;margin:0 auto;padding:0 32px;}

/* ---------- Header ---------- */
.vbr-header{border-bottom:1px solid var(--vbr-line);background:#fff;}
.vbr-head{display:flex;align-items:center;justify-content:space-between;padding-top:26px;padding-bottom:22px;}
.vbr-logo{font-family:var(--vbr-serif);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1;}
.vbr-logo em{font-style:normal;color:var(--vbr-red);}
.vbr-logo small{display:block;font-family:var(--vbr-sans);font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--vbr-grey);text-transform:uppercase;margin-top:7px;}
.vbr-logo img{display:inline-block;width:auto;height:46px;object-fit:contain;}
.vbr-head-l,.vbr-head-r{flex:1;display:flex;align-items:center;gap:18px;}
.vbr-head-r{justify-content:flex-end;}
.vbr-head-c{flex:0 0 auto;text-align:center;}
.vbr-ico{width:19px;height:19px;stroke:var(--vbr-ink);fill:none;stroke-width:1.7;}
.vbr-btn{background:var(--vbr-red);color:#fff!important;font-size:13.5px;font-weight:600;padding:9px 20px;border-radius:4px;display:inline-block;line-height:1.15;}
.vbr-btn:hover{background:#A50D26;}
.vbr-btn-ghost{font-size:13.5px;font-weight:600;color:var(--vbr-ink);background:none;border:0;padding:0;cursor:pointer;font-family:var(--vbr-sans);}

/* ---------- Nav pilules ---------- */
.vbr-nav-outer{border-bottom:1px solid var(--vbr-line);background:#fff;}
/* Les pastilles ne passent jamais à la ligne : sur écran réduit
   la barre coulisse horizontalement, barre de défilement masquée. */
.vbr-nav{
  display:flex;gap:9px;justify-content:flex-start;
  padding-top:15px;padding-bottom:15px;margin:0;list-style:none;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
}
.vbr-nav::-webkit-scrollbar{display:none;}
.vbr-nav li{list-style:none;margin:0;padding:0;flex:0 0 auto;scroll-snap-align:start;}
.vbr-nav a{
  background:#141414;color:#fff!important;
  font-size:13px;font-weight:600;letter-spacing:.005em;
  padding:9px 17px;border-radius:100px;white-space:nowrap;
  display:inline-block;line-height:1.15;transition:background .15s ease;
}
.vbr-nav a:hover{background:#000;}
.vbr-nav .current-menu-item > a,
.vbr-nav li.vbr-on > a{background:var(--vbr-red);}

/* ---------- Publicité ---------- */
.vbr-ad{margin:26px auto;text-align:center;}
.vbr-ad-label{font-size:9px;letter-spacing:.18em;color:#B4B4B4;text-transform:uppercase;margin-bottom:7px;}
.vbr-ad-box{border:1px dashed #D8D8D8;background:var(--vbr-wash);color:#B0B0B0;font-size:12px;line-height:1.5;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;overflow:hidden;}
/* Les créations respectent exactement le format vendu : jamais déformées,
   jamais rognées (contain), et le bloc conserve sa taille IAB. */
.vbr-ad-box img{width:100%;height:100%;object-fit:contain;object-position:center;margin:0 auto;}
.vbr-ad-box > a{display:block;width:100%;height:100%;}
.vbr-ad-728{width:728px;height:90px;max-width:100%;margin:0 auto;}
.vbr-ad-300{width:300px;height:250px;margin:0 auto;}
.vbr-ad-native{height:110px;}
.vbr-ad--filled{border:0;background:none;padding:0;}

/* ---------- Hero ---------- */
.vbr-hero{display:grid;grid-template-columns:1fr 1.65fr 1fr;gap:34px;padding-top:36px;padding-bottom:42px;border-bottom:1px solid var(--vbr-line);}
.vbr-thumb{aspect-ratio:16/10;overflow:hidden;background:#EDEDED;margin-bottom:13px;}
.vbr-kicker{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vbr-red);margin-bottom:7px;}
.vbr-side h3{font-size:19px;line-height:1.26;margin:0 0 8px;font-weight:700;letter-spacing:-.011em;}
.vbr-side p{font-size:14px;line-height:1.5;color:#4a4a4a;margin:0 0 9px;}
.vbr-meta{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9A9A9A;display:block;}
.vbr-side-item + .vbr-side-item{margin-top:28px;padding-top:28px;border-top:1px solid var(--vbr-line);}
.vbr-lead{border-left:1px solid var(--vbr-line);border-right:1px solid var(--vbr-line);padding:0 30px;}
.vbr-lead .vbr-thumb{aspect-ratio:16/9;margin-bottom:20px;}
.vbr-lead h2{font-size:35px;line-height:1.14;letter-spacing:-.022em;margin:0 0 14px;font-weight:700;text-align:center;}
.vbr-lead p{font-size:16px;line-height:1.55;color:#3f3f3f;text-align:center;margin:0 0 14px;}
.vbr-lead .vbr-kicker{text-align:center;}
.vbr-lead .vbr-meta{text-align:center;}

/* ---------- Sections ---------- */
.vbr-sec{padding-top:48px;padding-bottom:48px;border-bottom:1px solid var(--vbr-line);}
.vbr-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;}
.vbr-sec-head h2{font-size:25px;letter-spacing:-.018em;margin:0;font-weight:700;}
.vbr-sec-head .vbr-all{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--vbr-grey);}
.vbr-sec-sub{font-size:14px;color:var(--vbr-grey);margin:-18px 0 26px;}
.vbr-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.vbr-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.vbr-card h3{font-size:17.5px;line-height:1.28;margin:0 0 7px;font-weight:700;letter-spacing:-.01em;}
.vbr-card p{font-size:13.5px;line-height:1.5;color:#4a4a4a;margin:0 0 8px;}
.vbr-with-side{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;}
/* Cartes de la grille 3 colonnes : hauteurs alignées et zone de
   description suffisante pour équilibrer la colonne de droite. */
.vbr-grid3 .vbr-card{display:flex;flex-direction:column;}
.vbr-grid3 .vbr-card p{min-height:140px;margin-bottom:10px;}
.vbr-grid3 .vbr-card .vbr-meta{margin-top:auto;}

/* ---------- Newsletter ---------- */
.vbr-nl{background:var(--vbr-wash);border:1px solid var(--vbr-line);padding:24px 22px;}
.vbr-nl .vbr-logo-s{font-family:var(--vbr-serif);font-size:21px;font-weight:700;line-height:1;margin-bottom:9px;}
.vbr-nl .vbr-logo-s em{font-style:normal;color:var(--vbr-red);}
.vbr-nl h4{font-size:15px;margin:0 0 6px;font-weight:700;}
.vbr-nl p{font-size:13px;line-height:1.5;color:#4a4a4a;margin:0 0 14px;}
/* Hauteur verrouillée : le line-height global du site ne doit pas
   gonfler le champ ni le bouton. */
.vbr-nl form{display:flex;margin:0;height:40px;align-items:stretch;}
.vbr-nl input{flex:1;height:40px;border:1px solid #D5D5D5;border-right:0;padding:0 11px;font-size:13px;line-height:1.2;font-family:var(--vbr-sans);outline:none;background:#fff;border-radius:0;min-width:0;-webkit-appearance:none;appearance:none;}
.vbr-nl button{height:40px;flex:0 0 auto;background:var(--vbr-red);color:#fff;border:0;padding:0 15px;font-size:13px;line-height:1;font-weight:600;font-family:var(--vbr-sans);cursor:pointer;border-radius:0;white-space:nowrap;-webkit-appearance:none;appearance:none;}
.vbr-nl button:hover{background:#A50D26;}
.vbr-nl .vbr-cnt{font-size:11px;line-height:1.5;color:var(--vbr-grey);margin-top:10px;}

/* ---------- Contenu partenaire ---------- */
.vbr-partner{background:var(--vbr-wash);}
.vbr-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;border:1px solid #D5D5D5;padding:3px 8px;margin-bottom:10px;}
/* La colonne de droite est élargie : l'article principal cède de la
   place pour que les vignettes s'affichent en entier.
   Uniquement au-delà de 960px, sinon la grille déborde l'écran. */
@media (min-width:961px){
  .vbr-partner .vbr-with-side{grid-template-columns:1fr 400px;}
}
/* Vignettes alignées en haut et au format 16/10 : la photo n'est
   plus rognée dans une boîte étroite et haute. */
.vbr-plist{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--vbr-line);align-items:center;}
.vbr-plist:first-of-type{padding-top:0;}
.vbr-plist:last-of-type{border-bottom:0;}
.vbr-plist .vbr-pt{flex:1;}
.vbr-plist h3{font-size:16px;line-height:1.3;margin:0 0 5px;font-weight:700;}
.vbr-plist p{font-size:13px;color:#4a4a4a;line-height:1.45;margin:0 0 6px;}
.vbr-plist > a{flex:0 0 172px;align-self:center;height:auto;}
.vbr-plist .vbr-th{width:100%;height:auto;aspect-ratio:16/10;overflow:hidden;background:#EDEDED;margin-bottom:0;}
.vbr-plist .vbr-th img{width:100%;height:100%;object-fit:cover;}
/* Visuel principal volontairement bas de plafond : il ne doit pas
   écraser les vignettes de la colonne de droite. */
.vbr-partner-lead > a .vbr-thumb{aspect-ratio:21/9;}
.vbr-partner-lead h3{font-size:24px;line-height:1.2;margin:0 0 8px;font-weight:700;letter-spacing:-.015em;}
.vbr-partner-lead p{font-size:15px;line-height:1.55;color:#3f3f3f;margin:0 0 8px;}

/* ---------- Footer ---------- */
.vbr-footer{background:#141414;color:#fff;padding:52px 0 34px;margin-top:0;}
.vbr-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;}
.vbr-footer .vbr-logo{font-size:29px;color:#fff;}
.vbr-footer .vbr-logo small{color:#8C8C8C;}
.vbr-footer p{font-size:13px;line-height:1.6;color:#A8A8A8;margin:14px 0 0;}
.vbr-footer h5{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 14px;}
.vbr-footer li{list-style:none;font-size:13.5px;color:#A8A8A8;margin-bottom:9px;}
.vbr-footer ul{padding:0;margin:0;list-style:none;}
.vbr-footer a{color:#A8A8A8!important;}
.vbr-footer a:hover{color:#fff!important;}

/* Rappel du brief, juste avant la ligne de bas de page. */
.vbr-frappel{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:36px;padding:20px 22px;background:#1E1E1E;border-left:3px solid var(--vbr-red);}
.vbr-frappel strong{display:block;font-size:15px;color:#fff;font-weight:700;margin-bottom:3px;}
.vbr-frappel span{display:block;font-size:13px;color:#9A9A9A;line-height:1.5;}
.vbr-frappel a{flex:0 0 auto;background:var(--vbr-red);color:#fff!important;
  font-size:13px;font-weight:600;line-height:1.15;padding:9px 17px;border-radius:100px;
  transition:background .15s ease;}
.vbr-frappel a:hover{background:#fff;color:#141414!important;}
.vbr-fbot a{color:#7C7C7C;}
.vbr-fbot a:hover{color:#fff;}
@media (max-width:600px){
  .vbr-frappel{flex-direction:column;align-items:flex-start;gap:14px;}
}
.vbr-fbot{border-top:1px solid #2C2C2C;margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#7C7C7C;flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .vbr-wrap{padding:0 22px;}
}
@media (max-width:960px){
  .vbr-wrap{padding:0 16px;}
  .vbr-head{padding-top:20px;padding-bottom:16px;}
  .vbr-nav{gap:7px;padding-top:12px;padding-bottom:12px;}
  .vbr-nav a{font-size:12.5px;padding:8px 14px;}
  .vbr-head-l .vbr-btn-ghost,.vbr-head-r .vbr-btn-ghost{display:none;}
  .vbr-logo{font-size:31px;}
  .vbr-logo img{height:36px;}
  .vbr-logo small{font-size:8.5px;letter-spacing:.16em;}
  .vbr-btn{font-size:12.5px;padding:8px 14px;}
  .vbr-lead h2{font-size:28px;}
  .vbr-hero{grid-template-columns:1fr;gap:34px;}
  .vbr-lead{border:0;padding:0;order:-1;}
  .vbr-grid4{grid-template-columns:repeat(2,1fr);}
  .vbr-grid3{grid-template-columns:1fr;}
  .vbr-with-side,.vbr-partner .vbr-with-side{grid-template-columns:1fr;}
  .vbr-plist > a{flex:0 0 128px;}
  .vbr-fgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .vbr-grid4{grid-template-columns:1fr;}
  /* Pied de page sur deux colonnes : une colonne unique rendait
     la page interminable au défilement. */
  .vbr-fgrid{grid-template-columns:1fr 1fr;gap:30px 22px;}
  .vbr-fgrid > div:first-child{grid-column:1 / -1;}
  .vbr-footer{padding:38px 0 26px;}
  .vbr-footer h5{margin-bottom:11px;}
  .vbr-footer li{font-size:13px;margin-bottom:8px;}
  .vbr-footer p{font-size:12.5px;margin-top:12px;}
  .vbr-fbot{flex-direction:column;gap:8px;margin-top:28px;}
  /* Respiration entre le dernier article et le pied de page. */
  .vbr-footer{margin-top:34px;padding-top:44px;}
  .vbr-sec{padding-bottom:12px;}
}