/*
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.74.0
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);
  transition:color .15s ease;}
/* « Mon compte » et « Se deconnecter » passent au rouge au survol. Le
   !important vise Magazilla, qui impose sa couleur de lien sur les pages
   interieures ou sa feuille n'est pas retiree. */
.vbr-btn-ghost:hover,.vbr-btn-ghost:focus-visible,
.vbr-page .vbr-btn-ghost:hover,.vbr-page .vbr-btn-ghost:focus-visible{
  color:var(--vbr-red,#C8102E)!important;}

/* ---------- 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;
  /* margin:0 auto et non margin:0 : la barre herite de .vbr-wrap une
     largeur maximale de 1340 px, mais un margin nul la collait au bord
     gauche des tres grands ecrans, decalee sous un logotype centre. */
  padding-top:15px;padding-bottom:15px;margin:0 auto;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-gab{display:block;}
.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;}
/* Bandeau median de la une : il occupe l'espace laisse libre par la colonne
   de droite, plus haute que la grille d'articles. */
.vbr-ad-median{margin:34px auto 42px;}
/* Sur mobile la colonne de droite passe sous les articles : son pave
   300x250 se retrouverait colle au bandeau median, deux publicites a
   la suite. Le format 728x90 n'a de toute facon pas de sens sur un
   telephone. L'emplacement median reste donc a l'ordinateur. */
@media (max-width:960px){.vbr-ad-median{display:none;}}
/* Bandeau en tete d'article : il precede la pastille de rubrique et le
   titre, dans la colonne de l'article. */
.vbr-ad-article{margin:0 0 26px;text-align:center;}
/* Sur les pages d'article, le theme parent aligne a gauche tous les
   blocs : la mention se decalait du cadre qu'elle designe. */
.vbr-ad .vbr-ad-label{text-align:center!important;}
/* Espace entre la navigation et le contenu des pages interieures.
   Magazilla pose 60px en haut de la colonne d'article comme de la
   colonne de droite : beaucoup de vide sous une barre de navigation
   deja separee par un filet. On reduit les deux de la meme valeur
   pour qu'elles restent alignees. */
.content_wrap > .content,
.content_wrap > .sidebar{padding-top:15px!important;}
@media (max-width:960px){
  .content_wrap > .content,
  .content_wrap > .sidebar{padding-top:12px!important;}
}
@media (max-width:960px){.vbr-ad-article{margin-bottom:20px;}}
.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;}
/* Rubrique signature : la colonne de droite (brief + pave) est plus
   courte que les deux rangees de cartes. L'emplacement publicitaire
   occupe la hauteur restante, jusqu'au bas de la derniere carte, au
   lieu de laisser un blanc. Le pave devient alors un half-page ; la
   creation reste centree et a ses proportions (object-fit:contain). */
.vbr-with-side.vbr-side-plein{align-items:stretch;}
.vbr-side-plein > aside{display:flex;flex-direction:column;}
.vbr-side-plein > aside .vbr-ad{flex:1 1 auto;display:flex;flex-direction:column;}
.vbr-side-plein > aside .vbr-ad .vbr-ad-box{flex:1 1 auto;height:auto;min-height:250px;}
@media (max-width:960px){
  .vbr-with-side.vbr-side-plein{align-items:start;}
  .vbr-side-plein > aside .vbr-ad .vbr-ad-box{flex:0 0 auto;height:250px;}
}
/* 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;}
/* Rubrique signature : deux rangees de deux. La colonne de droite
   (brief + pave) etant plus haute qu'une seule rangee de cartes,
   une rangee de trois laissait un vide sous la grille. */
.vbr-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 26px;}
.vbr-grid2 .vbr-card{display:flex;flex-direction:column;}
.vbr-grid2 .vbr-card p{margin-bottom:10px;}
.vbr-grid2 .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 thème parent impose sa propre hauteur et
   son rembourrage aux champs e-mail, ce qui décalait le bouton d'une
   dizaine de pixels. On force la même boîte des deux côtés. */
.vbr-nl form{display:flex;margin:0;height:42px;align-items:stretch;}
.vbr-nl input,.vbr-nl button{box-sizing:border-box!important;height:42px!important;min-height:0!important;margin:0!important;vertical-align:top;}
.vbr-nl input{flex:1;border:1px solid #D5D5D5;border-right:0;padding:0 12px!important;font-size:13.5px!important;line-height:1.2!important;font-family:var(--vbr-sans);outline:none;background:#fff;border-radius:0;min-width:0;-webkit-appearance:none;appearance:none;}
.vbr-nl button{flex:0 0 auto;background:var(--vbr-red);color:#fff;border:0;padding:0 16px!important;font-size:13px!important;line-height:1!important;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;}
/* Cinq colonnes : la marque, puis quatre listes de longueur comparable
   (5, 4, 5 et 6 liens). La colonne « Pratique » en comptait onze, dont
   six repris dans la barre du bas : d'ou le desequilibre. */
.vbr-fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px 28px;}
/* Entre 1180 et 960px, cinq colonnes deviennent trop etroites :
   la marque passe sur toute la largeur et les listes se mettent a quatre. */
@media (max-width:1180px){
  .vbr-fgrid{grid-template-columns:repeat(4,1fr);gap:32px 26px;}
  .vbr-fgrid > div:first-child{grid-column:1 / -1;}
}
.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;}
/* Le pied de page doit etre identique partout. Sur la une, les feuilles
   de Magazilla sont retirees ; ailleurs elles s'appliquent et ajoutent
   une puce carree de 4px devant chaque lien, avec un corps plus gros.
   On reproduit ici le rendu de la une. */
.vbr-footer ul,.vbr-footer ol{list-style:none!important;margin:0!important;padding:0!important;}
.vbr-footer li{list-style:none!important;padding:0!important;margin:0 0 9px!important;
  background:none!important;text-indent:0!important;}
.vbr-footer li::before,.vbr-footer li::after{content:none!important;display:none!important;}
.vbr-footer li a{font-size:13.5px!important;line-height:1.5!important;}
/* Magazilla remonte les liens de la barre du bas a 15px : « Contact » se
   detachait de « Gerer les cookies », qui est un bouton et echappait a
   sa regle. */
.vbr-fbot a,.vbr-fbot button{font-size:12px!important;line-height:1.5!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;}
  /* Le lecteur connecté n'a plus de bouton « S'abonner » à droite :
     la place libérée revient à « Mon compte », son unique porte
     d'entrée sur mobile. « Se déconnecter » y figure aussi. */
  html[data-vbr-etat="connecte"] .vbr-head-r .vbr-btn-compte{
    display:inline-block!important;
    flex:0 0 auto;white-space:nowrap;
    font-size:12.5px;font-weight:600;
    border:1px solid var(--vbr-line);border-radius:4px;
    padding:7px 12px;line-height:1.15;
  }
  .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,.vbr-grid2{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;gap:30px 24px;}
  .vbr-fgrid > div:first-child{grid-column:1 / -1;}

  /* Marquage des sections sur mobile.
     Empilees les unes sous les autres, les sections se confondaient.
     La charte VBR ne connait qu'un seul filet, fin et gris, et un seul
     signe : le tiret rouge court de 9 px que l'on retrouve sur les
     puces et sur les signaux. C'est donc lui qui ouvre la rubrique |
     le filet reste a 1 px, l'air au-dessus du titre fait le reste du
     travail. « Voir tout » descend sous le titre plutot que de se
     casser en deux mots a cote. */
  .vbr-hero{border-bottom:0;padding-bottom:30px;}
  .vbr-sec{
    border-top:1px solid var(--vbr-line);border-bottom:0;
    padding-top:32px;padding-bottom:36px;
  }
  .vbr-sec-head{
    flex-direction:column;align-items:flex-start;gap:5px;
    margin-bottom:20px;
  }
  .vbr-sec-head::before{
    content:"";display:block;
    width:26px;height:2px;background:var(--vbr-red);
    margin:0 0 8px;
  }
  .vbr-sec-head h2{font-size:26px;line-height:1.16;letter-spacing:-.021em;}
  .vbr-sec-head .vbr-all{font-size:10.5px;letter-spacing:.14em;}
  .vbr-sec-sub{font-size:14.5px;line-height:1.45;margin:-6px 0 24px;}
}
@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;}
}