/* ---------- 5. Boutons ---------- */
/* survol des boutons noirs du contenu : aucun effet -> fond bleu */
.site-grid .btn.black:hover, .site-grid button.btn.black:hover { background: #4da1f5 !important; border-color: #4da1f5 !important; }

/* ---------- 6. Écrans d'ordinateur portable (même condition que la prod) ---------- */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
  html body, html body .site-grid p, html body .site-grid li, html body .site-grid span, html body .site-grid a,
  html body .container-bottom-a p, html body .container-bottom-b p { font-size: 16px !important; line-height: 24px !important; }
  html body .site-grid h1, html body .site-grid h2 { font-size: 47px !important; line-height: 1.03 !important; }
  html body .site-grid h3 { font-size: 20.44px !important; line-height: 1.27 !important; }
  html body .titleFooter, html body .titleFooter span, html body .card-header.titleFooter { font-size: 22px !important; line-height: 33px !important; }
  html body #menuFooter a, html body #menuFooter .mod-menu__heading { font-size: 16px !important; }
  html body .navbar-brand img { width: 10vw !important; height: auto !important; }
  html body .counter h2 { font-size: 47px !important; }
  /* sous-titre italique du héros : reste à 25px comme en prod */
  html body .container-banner .gecca-split__content h2 { font-size: 25px !important; line-height: 32.5px !important; }
  /* titre « Actualités » de l'accueil (h3 en dev, h2 en prod) */
  html body.itemid-101 .gecca-collection-110 > .card-header { font-size: 47px !important; line-height: 1.03 !important; }
  html body .site-grid .btn, html body .site-grid button.btn, html body .container-bottom-a .btn { font-size: 18px !important; }
  html body .container-footer p, html body .container-footer a { font-size: 14px !important; }
  html body .container-nav .mod-menu__heading { font-size: 15px !important; }
}

/* ---------- 7. Mobile ---------- */
@media (max-width: 767px) {
  /* titres H2 restés à 69px (ex. « Monter en compétences ? ») : 38px centré comme la prod */
  html body .site-grid h2 { font-size: clamp(30px, 9.2vw, 38px) !important; line-height: 1.13 !important; text-align: center !important; }
  /* bouton du héros : gras et large -> normal, marge au-dessus */
  html body .site-grid .btn, html body .site-grid button.btn { font-weight: 400 !important; }
  html body .container-banner .gecca-split__content .btn { margin-top: 18px !important; }
}

/* ---------- 8. Contenus à onglets masqués sur mobile : réaffichés ---------- */
@media (max-width: 640px) {
  /* Formations : l'accordéon <details> existe dans la page mais était en display:none */
  body.formation .item-pageformation .hidden-desktop,
  body.formation .item-pageformation .gecca-panels--accordion { display: block !important; height: auto !important; position: static !important; }
  body.formation .gecca-panels--accordion details { border-bottom: 1px solid #e5f0fc; }
  body.formation .gecca-panels--accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; font-size: 18px; line-height: 1.35; color: #000; cursor: pointer; list-style: none; }
  body.formation .gecca-panels--accordion summary::-webkit-details-marker { display: none; }
  body.formation .gecca-panels--accordion summary::after { content: "+"; font-size: 22px; line-height: 1; color: #646464; }
  body.formation .gecca-panels--accordion details[open] > summary::after { content: "–"; }
  body.formation .gecca-panels--accordion .gecca-panel__body { padding: 8px 4px 20px; text-align: left; }
  body.formation .gecca-panels--accordion .gecca-panel__body * { position: static !important; max-width: 100% !important; height: auto !important; }
  body.formation .gecca-panels--accordion .gecca-panel__body p,
  body.formation .gecca-panels--accordion .gecca-panel__body h4,
  body.formation .gecca-panels--accordion .gecca-panel__body h5 { text-align: left !important; }
  body.formation .container-component, body.formation .container-component > main,
  body.formation .item-pageformation, body.formation .item-pageformation > .com-content-article__body { height: auto !important; min-height: 0 !important; }

  /* Digital : deux groupes d'onglets (formules dans l'article, portail client dans le module 139) */
  body.digital .item-pagedigital .gecca-panels--tabs,
  body.digital #mod-custom139 .gecca-panels--tabs { display: block !important; position: static !important; height: auto !important; width: auto !important; padding: 0 !important; margin: 24px 0 !important; }
  body.digital .gecca-widget-26, body.digital .gecca-widget-26 > .card-body, body.digital #mod-custom139 { visibility: visible !important; height: auto !important; position: static !important; display: block !important; }
  body.digital .container-component, body.digital .container-component > main,
  body.digital .item-pagedigital, body.digital .item-pagedigital > .com-content-article__body { height: auto !important; min-height: 0 !important; }
  body.digital .gecca-panels--tabs .gecca-tabs__panels, body.digital .gecca-panels--tabs .gecca-panel__body { position: static !important; height: auto !important; min-height: 0 !important; max-width: 100% !important; visibility: visible !important; }
  body.digital #mod-custom139 .gecca-panels--tabs { margin-top: 64px !important; }
  body.digital .gecca-tabs__nav { display: block !important; margin: 0 0 16px !important; }
  body.digital .gecca-tabs__nav button { display: block !important; width: 100% !important; text-align: left !important; padding: 12px 4px !important; border: 0 !important; border-bottom: 1px solid #e5f0fc !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.35 !important; }
  body.digital .gecca-tabs__nav button[aria-selected="true"] { color: #4da1f5 !important; font-weight: 700 !important; }
  body.digital .gecca-panels--tabs [hidden] { display: none !important; }
  body.digital .gecca-panels--tabs h2 { font-size: 26px !important; text-align: left !important; }
  body.digital .gecca-panels--tabs p, body.digital .gecca-panels--tabs li { text-align: left !important; }
  /* outils de calcul : le libellé recouvrait l'icône */
  body.digital .tools a { display: block !important; position: static !important; }
  body.digital .tools img { display: block !important; position: static !important; margin: 0 auto 10px !important; }
}


body.actus .container-banner a.gecca-question-tab {
  display: none !important;
  width: 100%;
  max-width: 100%;
  padding: 0 0 13.5px;
  color: #000;
  font-family: "DM Sans", sans-serif !important;
  font-size: clamp(28px, 2.8vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.actus .container-banner a.gecca-question-tab[aria-selected="true"] { display: block !important; }
body.actus .container-banner a.gecca-question-tab:hover { color: #4da1f5; }
body.actus .container-banner a.gecca-question-tab:focus-visible { outline: 3px solid #4da1f5; outline-offset: 4px; }@media (min-width: 992px) and (max-width: 1600px) {
  body.actus .site-grid > .container-banner.full-width {
    box-sizing: border-box !important;
    width: calc(100% + 14vw) !important;
    margin-left: -7vw !important;
  }
  body.actus .container-banner .gecca-panels--tabs {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 7vw !important;
  }
  body.actus .container-banner .gecca-tabs__nav,
  body.actus .container-banner .gecca-tabs__panels { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}@media (min-width: 992px) and (max-width: 1600px) {
  body.actus .container-component > main,
  body.actus .container-component .blog,
  body.actus .container-component .blog-items {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.actus .container-component .blog-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
  body.actus .blog-item {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.actus .blog-item img { max-width: 100% !important; height: auto !important; }
}
/* Article heading, date and navigation correspond to the Joomla 3 article view. */
body.actus.view-article .item-pageactus > .page-header h1 {
  margin-bottom: 1rem;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
}
body.actus.view-article .gecca-article-date {
  margin: 1.5rem 0;
  color: #646464;
  font-size: 16px;
}
body.actus.view-article .pagenavigation {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5rem 0 2rem;
}
body.actus.view-article .pagenavigation .pagination { display: flex; gap: 12px; }
body.actus.view-article .pagenavigation .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 30px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}
body.actus.view-article .pagenavigation .btn:hover,
body.actus.view-article .pagenavigation .btn:focus-visible { background: #4da1f5; border-color: #4da1f5; color: #fff; }
body.formation .item-pageformation img[alt="satisfaction stagiaire"] { max-width: 100% !important; height: auto !important; }
@media (min-width: 1200px) and (max-width: 1600px) {
  body.formation .item-pageformation img[alt="satisfaction stagiaire"] { width: min(100%, 882px) !important; }
}@media (max-width: 767px) {
  .gecca-cookie .gecca-cookie__text,
  .gecca-cookie .gecca-cookie__text a { color: #fff !important; }
}
/* At laptop widths, keep the team portraits and the content panels in view. */
@media (min-width: 1200px) and (max-width: 1600px) {
  body.qsn .gecca-team {
    width: calc(100% - 124px) !important;
    max-width: 1105px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 65px !important;
  }
  body.qsn .gecca-team__member,
  body.qsn .gecca-team__member img { width: 100% !important; min-width: 0 !important; height: auto !important; }
  body.acomp .gecca-widget-17 .gecca-panels--tabs {
    width: calc(100vw - 36px) !important;
    max-width: 100% !important;
    grid-template-columns: minmax(280px, 32%) minmax(0, 1fr) !important;
  }
  body.acomp .gecca-widget-17 .gecca-tabs__panels,
  body.acomp .gecca-widget-17 .gecca-panel__body { min-width: 0 !important; width: auto !important; }
  body.digital .container-component > .main-bottom.card,
  body.digital .container-component > .main-bottom.card .card-body,
  body.digital .container-component > .main-bottom.card .mod-custom,
  body.digital .container-component .gecca-panels--tabs {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.digital .container-component .gecca-panels--tabs {
    grid-template-columns: minmax(250px, 32%) minmax(0, 1fr) !important;
  }
  body.digital .container-component .gecca-tabs__panels,
  body.digital .container-component .gecca-panel__body,
  body.digital .container-component .gecca-tabs__nav { min-width: 0 !important; width: auto !important; }
  body.digital .container-component .gecca-panel__body .offset-md-1 {
    width: 90% !important;
    margin-left: 5% !important;
  }
  body.digital .container-component .gecca-split {
    width: calc(100% - 80px) !important;
    margin-inline: 40px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }
  body.digital .container-component .gecca-split__media,
  body.digital .container-component .gecca-split__content {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.digital .item-pagedigital > .com-content-article__body > h2,
  body.digital .container-component .main-bottom.card h2.mb-5 { padding-left: 40px !important; }
}
/* The mobile accordion is a duplicate of the desktop tabs and occupies space when invisible. */
@media (min-width: 641px) {
  body.acomp .gecca-widget-22 { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  body.digital .container-component .gecca-panel__body h2,
  body.digital .container-component .gecca-panel__body p {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* The older review stylesheet sets the home training heading to 69px with an ID selector. */
@media (max-width: 640px) {
  html body.itemid-101 #mod-custom113 h2 {
    font-size: 38px !important;
    line-height: 1.13 !important;
    text-align: center !important;
    overflow-wrap: normal !important;
  }
}

/* At tablet widths the base theme hid every hero and left desktop navigation in a column. */
@media (min-width: 641px) and (max-width: 991px) {
  html body .container-header {
    display: block !important;
    position: relative !important;
    height: 124px !important;
    min-height: 124px !important;
    padding: 0 !important;
    z-index: 1000 !important;
  }
  html body .container-header .container-topbar { display: none !important; }
  html body .container-header > .grid-child:not(.container-nav) {
    width: auto !important;
    margin: 0 !important;
    padding: 15px 0 0 40px !important;
  }
  html body .container-header .brand-logo img { width: 154px !important; height: auto !important; }
  html body .gecca-mobile-toggle {
    display: grid !important;
    position: absolute !important;
    z-index: 1002 !important;
    top: 41px !important;
    right: 42px !important;
    width: 27px !important;
    height: 25px !important;
    place-content: space-between !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  html body .gecca-mobile-toggle span { display: block !important; width: 27px !important; height: 4px !important; background: #fff !important; }
  html body .container-header .container-nav {
    display: block !important;
    position: fixed !important;
    z-index: 1001 !important;
    inset: 0 0 0 auto !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 72px 28px 32px !important;
    overflow-y: auto !important;
    background: #222d37 !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
  }
  html body.gecca-mobile-menu-open .container-header .container-nav { transform: translateX(0) !important; visibility: visible !important; }
  html body .container-header .mod-menu { display: block !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
  html body .container-header .mod-menu > li { display: block !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; }
  html body .container-header .mod-menu > li > a,
  html body .container-header .mod-menu__heading { display: block !important; width: 100% !important; padding: 12px 0 !important; color: #fff !important; font-size: 16px !important; line-height: 24px !important; text-align: left !important; }
  html body .container-header .mod-menu__toggle-sub { width: 100% !important; }
  html body .container-header .mod-menu__sub { margin: 0 !important; padding: 0 0 8px 16px !important; }
  html body .container-header .mod-menu__sub a { color: #fff !important; font-size: 14px !important; }
  html body:not(.actus) .container-banner { display: block !important; }
  html body.itemid-101 .container-banner .gecca-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    width: min(100%, 790px) !important;
    min-height: 480px !important;
    margin: 0 auto !important;
    padding: 40px 30px !important;
  }
  html body.itemid-101 .container-banner .gecca-split__content,
  html body.itemid-101 .container-banner .gecca-split__media { display: block !important; position: static !important; width: 100% !important; height: auto !important; transform: none !important; }
  html body.itemid-101 .container-banner .gecca-split__image { display: block !important; width: 100% !important; height: auto !important; max-height: 420px !important; object-fit: contain !important; }
  html body.itemid-101 .container-banner h1 { font-size: 48px !important; line-height: 1.05 !important; }
  html body.itemid-101 .container-banner h2 { font-size: 23px !important; line-height: 1.3 !important; }
  html body.itemid-101 .container-banner p { width: auto !important; font-size: 16px !important; line-height: 1.45 !important; }
  html body.itemid-101 .container-top-a { height: auto !important; padding: 80px 0 !important; }
  html body.itemid-101 .container-top-a > .moduletable,
  html body.itemid-101 #mod-custom154 { height: auto !important; transform: none !important; }
  html body.itemid-101 #mod-custom154 > .secret { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; height: auto !important; transform: none !important; }
  html body.itemid-101 #mod-custom154 > .secret > .col-md-3,
  html body.itemid-101 #mod-custom154 > .secret > .col-md-3 > div { width: 100% !important; height: auto !important; min-width: 0 !important; padding: 0 !important; }
  html body.itemid-101 #mod-custom154 > .secret > .col-md-3:last-child { grid-column: 1 / -1 !important; width: min(100%, 296px) !important; margin-inline: auto !important; }
  html body.itemid-101 #mod-custom154 > .secret h3:first-child,
  html body.itemid-101 #mod-custom154 > .secret h3:first-child img { display: block !important; width: 100% !important; height: 245px !important; object-fit: contain !important; }
  html body.itemid-101 #mod-custom154 > .secret p { width: auto !important; }
}

/* Remaining visible differences from the production comparison. */
html body .dodger-blue { color: #4da1f5 !important; }
html body.itemid-101 .gecca-collection-110 > .card-header { text-align: left !important; border: 0 !important; }
html body .gecca-news-card,
html body .gecca-news-card img { border-radius: 0 !important; box-shadow: none !important; }
html body #back-top { width: 49px !important; height: 49px !important; right: 0 !important; border: 1px solid #000 !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; text-decoration: none !important; }

/* News cards: title, image, summary and date in the production reading order. */
html body.actus.view-category .blog-item { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
html body.actus.view-category .blog-item > .item-content { display: contents !important; }
html body.actus.view-category .blog-item .page-header { order: 1 !important; border: 0 !important; margin: 0 0 14px !important; }
html body.actus.view-category .blog-item .page-header h2 { margin: 0 !important; font-size: 20px !important; line-height: 1.3 !important; text-align: left !important; }
html body.actus.view-category .blog-item .page-header h2 a { color: #171717 !important; text-decoration: none !important; }
html body.actus.view-category .blog-item .page-header h2 a:hover { color: #4da1f5 !important; }
html body.actus.view-category .blog-item > figure.item-image { order: 2 !important; width: 100% !important; margin: 0 0 16px !important; }
html body.actus.view-category .blog-item > figure.item-image img { display: block !important; width: 100% !important; height: auto !important; max-height: 240px !important; object-fit: cover !important; }
html body.actus.view-category .blog-item .item-content > p { order: 3 !important; margin: 0 0 8px !important; color: #646464 !important; font-size: 16px !important; line-height: 1.45 !important; }
html body.actus.view-category .blog-item .item-content > p::after { content: '…'; }
html body.actus.view-category .blog-item .article-info { order: 4 !important; display: block !important; margin: 0 0 24px !important; }
html body.actus.view-category .blog-item .article-info-term,
html body.actus.view-category .blog-item .article-info dd:not(.published),
html body.actus.view-category .blog-item .article-info .icon-calendar { display: none !important; }
html body.actus.view-category .blog-item .article-info dd.published { display: block !important; margin: 0 !important; color: #646464 !important; font-size: 14px !important; }
html body.actus.view-category .blog-item .article-info dd.published time { font-size: inherit !important; }

@media (max-width: 767px) {
  html body.itemid-101 .gecca-news-card { text-align: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body.itemid-101 .gecca-news-card > * { text-align: center !important; }
  html body.itemid-101 .gecca-news-card .btn { background: #000 !important; border-color: #000 !important; color: #fff !important; }
  html body.actus.view-category .blog-item .page-header h2 { font-size: 20px !important; }
}

@media (min-width: 641px) and (max-width: 991px) {
  html body.itemid-101 .container-banner .gecca-split__content h1 { width: 100% !important; font-size: 42px !important; line-height: 1.05 !important; }
  html body.itemid-101 .container-banner .gecca-split__content h2 { width: 100% !important; }
  html body.itemid-101 .container-banner .gecca-split__content p { width: 100% !important; }
}

/* Full-width blue mobile navigation, matching the GECCA identity. */
@media (max-width: 991px) {
  html body .container-header .container-nav { width: 100vw !important; max-width: none !important; background: #4da1f5 !important; padding: 76px 28px 32px !important; }
  html body .container-header .mod-menu > li > a,
  html body .container-header .mod-menu__heading { font-size: 18px !important; font-weight: 400 !important; line-height: 1.35 !important; }
  html body .container-header .mod-menu__sub[aria-hidden="true"] { display: none !important; }
  html body .container-header .mod-menu__sub[aria-hidden="false"] { display: block !important; }
  html body.gecca-mobile-menu-open .gecca-mobile-toggle { position: fixed !important; top: 22px !important; left: 24px !important; right: auto !important; }
  html body.gecca-mobile-menu-open .gecca-mobile-toggle span { background: #000 !important; }
}

html body.itemid-101 .gecca-news-card .btn { background: #000 !important; border-color: #000 !important; color: #fff !important; }
html body.itemid-101 .gecca-news-card .btn:hover { background: #4da1f5 !important; border-color: #4da1f5 !important; }

/* The source artwork includes the photo and waves. Scale the whole asset to
   the phone width, then place the training copy beneath it. */
@media (max-width: 640px) {
  html body.itemid-101 .container-component > .moduletable:has(#mod-custom113) {
    height: auto !important;
    min-height: 0 !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    padding-top: 140px !important;
  }
  html body.itemid-101 #mod-custom113 { height: auto !important; padding: 0 0 28px !important; }
  html body.itemid-101 #mod-custom113 > div { height: auto !important; }
  html body.itemid-101 .container-component > .moduletable:has(#mod-custom114) {
    height: auto !important;
    min-height: 330px !important;
    padding: 65px 20px 70px !important;
    background-color: #4da1f5 !important;
    background-size: 100% auto, 100% auto !important;
    background-position: center top, center bottom !important;
    background-repeat: no-repeat !important;
  }
  html body.itemid-101 #mod-custom114 { height: auto !important; width: 100% !important; margin: 0 !important; }
  html body.itemid-101 #mod-custom114 h2,
  html body.itemid-101 #mod-custom114 p { color: #fff !important; text-align: center !important; width: 100% !important; }
}

/* Digital calculators: keep labels below their icons and in the source colours. */
html body.digital .tools .col-md-2 { height: auto !important; min-height: 0 !important; }
html body.digital .tools h3 { transform: none !important; margin: 12px 0 30px !important; text-align: center !important; }
html body.digital .tools h3 a { color: #171717 !important; font-weight: 700 !important; text-decoration: none !important; }

/* Documents and contact details on the training page. */
html body.formation .item-pageformation a[href="mailto:formation@gecca.fr"],
html body.formation .item-pageformation a[href*="PG2402-certificat"],
html body.formation .item-pageformation a[href*="Reglt-interieur"],
html body.formation .item-pageformation a[href*="CGV_GECCA_FORMATION"] {
  color: #4da1f5 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
@media (min-width: 992px) {
  html body.formation .item-pageformation a[href="mailto:formation@gecca.fr"],
  html body.formation .item-pageformation a[href*="PG2402-certificat"],
  html body.formation .item-pageformation a[href*="Reglt-interieur"],
  html body.formation .item-pageformation a[href*="CGV_GECCA_FORMATION"] { font-size: 25px !important; }
  html body .counter .count-text { text-align: left !important; }
  html body #menuFooter a { font-size: 18px !important; text-decoration: none !important; }
  html body .container-footer a[href^="mailto:"],
  html body .container-footer a[href*="mention-legales"] { color: #646464 !important; text-decoration: none !important; }
}
@media (max-width: 991px) {
  html body.formation .item-pageformation a[href="mailto:formation@gecca.fr"],
  html body.formation .item-pageformation a[href*="PG2402-certificat"],
  html body.formation .item-pageformation a[href*="Reglt-interieur"],
  html body.formation .item-pageformation a[href*="CGV_GECCA_FORMATION"] { font-size: 20px !important; }
}
html body.qsn .counter h2 { color: #4da1f5 !important; }

/* Keep the news sidebar below the articles until there is room for both columns. */
@media (min-width: 992px) and (max-width: 1199px) {
  html body.actus .site-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
  html body.actus .site-grid > .container-banner.full-width {
    box-sizing: border-box !important;
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
  }
  html body.actus .site-grid > .container-component,
  html body.actus .site-grid > .container-sidebar-right,
  html body.actus .site-grid > .container-bottom-a,
  html body.actus .site-grid > .container-bottom-b {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.actus .container-component > main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
  html body.actus .container-sidebar-right { padding: 18px 0 !important; }
}

/* Readable, single-column interior heroes below the laptop layout. */
@media (min-width: 641px) and (max-width: 1199px) {
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    background-size: auto 300px !important;
    background-position: center top !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner > .mod-custom,
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner > .moduletable {
    height: auto !important;
    min-height: 0 !important;
  }
  html body.digital #mod-custom141 {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 80px) !important;
    max-width: 760px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 360px 0 40px !important;
    transform: none !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__content {
    box-sizing: border-box !important;
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__content h1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 20px !important;
    font-size: 42px !important;
    line-height: 1.15 !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__content h2,
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__content p {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__media {
    box-sizing: border-box !important;
    display: block !important;
    order: 2 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  html body:is(.qsn,.digital,.formation,.acomp) .container-banner .gecca-split__image {
    display: block !important;
    width: 100% !important;
    max-width: 723px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
}

/* News quiz, article grid and sidebar at laptop widths. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.actus .container-banner .gecca-panels--tabs {
    height: 384px !important;
    min-height: 384px !important;
    padding-top: 195px !important;
  }
  html body.actus .container-banner .gecca-tabs__nav {
    width: 565px !important;
    max-width: calc(100vw - 12vw) !important;
  }
  html body.actus .container-banner a.gecca-question-tab {
    width: 500px !important;
    max-width: 100% !important;
  }
  html body.actus .container-banner .gecca-tabs__controls {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 25px !important;
    transform: translateX(-50%) !important;
    gap: 8px !important;
  }
  html body.actus .container-banner .gecca-tabs__controls button {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #a7cdf2 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  html body.actus.view-category .container-component > main {
    width: 793px !important;
    max-width: calc(100% + 20px) !important;
    margin-left: -41.6px !important;
  }
  html body.actus.view-category .container-component h1 { font-size: 69px !important; }
  html body.actus.view-category .container-component .blog-items { gap: 16px !important; }
  html body.actus.view-category .blog-item .page-header h2 { font-size: 25px !important; line-height: 30px !important; }
  html body.actus.view-category .blog-item .page-header,
  html body.actus.view-category .blog-item .page-header h2 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  html body.actus.view-category .blog-item .page-header h2 a { font-size: 25px !important; line-height: 30px !important; }
  html body.actus.view-category .blog-item:nth-child(2n) { margin-left: 0 !important; }
  html body.actus .container-sidebar-right {
    width: 414px !important;
    max-width: none !important;
    padding-left: 32px !important;
  }
  html body.actus .container-sidebar-right .gecca-carousel__slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.actus .container-sidebar-right .gecca-carousel__track {
    grid-template-columns: none !important;
    grid-auto-columns: 100% !important;
  }
  html body.actus .container-sidebar-right h3 { font-size: 22.5px !important; line-height: 1.2 !important; }
  html body.actus .container-sidebar-right .gecca-carousel__slide h3 { height: auto !important; overflow: visible !important; }
  html body.actus .container-sidebar-right .gecca-carousel__slide h3 a { font-size: 22.5px !important; line-height: 1.2 !important; }
}

/* Interior hero artwork and copy at laptop widths. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.qsn .container-banner { height: 688px !important; margin-bottom: 0 !important; }
  html body.digital #mod-custom116 { height: 760px !important; }
  html body.digital #mod-custom141 { top: 760px !important; }
  html body.qsn .container-banner .gecca-split,
  html body.digital #mod-custom116 .gecca-split {
    box-sizing: border-box !important;
    display: grid !important;
    width: calc(100% - 192px) !important;
    max-width: 1248px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 40% 60% !important;
    align-items: start !important;
    gap: 0 !important;
    transform: none !important;
  }
  html body.qsn .container-banner .gecca-split { min-height: 688px !important; }
  html body.digital #mod-custom116 .gecca-split { min-height: 700px !important; }
  html body.qsn .container-banner .gecca-split__content,
  html body.digital #mod-custom116 .gecca-split__content {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 195px 0 0 !important;
  }
  html body.qsn .container-banner .gecca-split__content h1,
  html body.digital #mod-custom116 .gecca-split__content h1 {
    width: 100% !important;
    max-width: 468px !important;
    height: auto !important;
    margin: 0 0 20px !important;
    font-size: 69px !important;
    line-height: 1.03 !important;
  }
  html body.qsn .container-banner .gecca-split__content p,
  html body.digital #mod-custom116 .gecca-split__content p {
    width: 100% !important;
    max-width: 468px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 23px !important;
  }
  html body.qsn .container-banner .gecca-split__media,
  html body.digital #mod-custom116 .gecca-split__media {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 0 0 16px !important;
  }
  html body.qsn .container-banner .gecca-split__media { margin: 126px 0 0 !important; }
  html body.digital #mod-custom116 .gecca-split__media { margin: 153px 0 0 !important; }
  html body.qsn .container-banner .gecca-split__image,
  html body.digital #mod-custom116 .gecca-split__image {
    display: block !important;
    width: 100% !important;
    max-width: 723px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}

/* Accompaniments hero in the same two-column proportions as production. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.acomp .container-banner,
  html body.acomp #mod-custom118 { height: 666px !important; }
  html body.acomp .container-banner .gecca-split {
    box-sizing: border-box !important;
    display: grid !important;
    width: calc(100% - 192px) !important;
    max-width: 1248px !important;
    min-height: 666px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 40% 60% !important;
    align-items: start !important;
    gap: 0 !important;
    transform: none !important;
  }
  html body.acomp .container-banner .gecca-split__content {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 195px 0 0 !important;
  }
  html body.acomp .container-banner .gecca-split__content h1 {
    width: 100% !important;
    max-width: 468px !important;
    height: auto !important;
    margin: 0 0 20px !important;
    font-size: 69px !important;
    line-height: 1.03 !important;
  }
  html body.acomp .container-banner .gecca-split__content p {
    width: 100% !important;
    max-width: 468px !important;
    font-size: 16px !important;
    line-height: 23px !important;
  }
  html body.acomp .container-banner .gecca-split__media {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    margin: 192px 0 0 !important;
    padding: 0 0 0 16px !important;
  }
  html body.acomp .container-banner .gecca-split__image {
    display: block !important;
    width: 100% !important;
    max-width: 723px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  html body.acomp .container-component .com-content-article__body > h2.col-md-7 {
    width: 52vw !important;
    max-width: calc(100% - 3.75vw) !important;
    margin-left: 3.75vw !important;
    font-size: 69px !important;
    line-height: 1.03 !important;
  }
}

/* Home hero: retain the source image size and a separate column for its title. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.formation .container-banner,
  html body.formation #mod-custom117 { height: 844px !important; }
  html body.formation .container-banner .gecca-split {
    box-sizing: border-box !important;
    display: grid !important;
    width: calc(100% - 192px) !important;
    max-width: 1248px !important;
    min-height: 844px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 40% 60% !important;
    align-items: start !important;
    gap: 0 !important;
    transform: none !important;
  }
  html body.formation .container-banner .gecca-split__content {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 195px 0 0 !important;
  }
  html body.formation .container-banner .gecca-split__content h1 {
    width: 100% !important;
    max-width: 468px !important;
    height: auto !important;
    margin: 0 0 20px !important;
    font-size: 69px !important;
    line-height: 1.03 !important;
  }
  html body.formation .container-banner .gecca-split__content h2,
  html body.formation .container-banner .gecca-split__content p {
    width: 100% !important;
    max-width: 468px !important;
  }
  html body.formation .container-banner .gecca-split__content p { font-size: 16px !important; line-height: 23px !important; }
  html body.formation .container-banner .gecca-split__media {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    margin: 330px 0 0 !important;
    padding: 0 0 0 16px !important;
  }
  html body.formation .container-banner .gecca-split__image {
    display: block !important;
    width: 100% !important;
    max-width: 723px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}

/* Home hero: retain the source image size and a separate column for its title. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.itemid-101 .container-banner { margin-bottom: 0 !important; }
  html body.itemid-101 .container-banner .gecca-split {
    width: calc(100% - 192px) !important;
    max-width: 1248px !important;
    min-height: 710px !important;
    margin: 0 auto !important;
    padding: 158px 0 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: 40% 60% !important;
    align-items: start !important;
    transform: none !important;
  }
  html body.itemid-101 .container-banner .gecca-split__content {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin-top: 37px !important;
  }
  html body.itemid-101 .container-banner .gecca-split__content h1 {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 0 20px !important;
    font-size: 69px !important;
    line-height: 1.03 !important;
  }
  html body.itemid-101 .container-banner .gecca-split__content h2 {
    width: 100% !important;
    max-width: 480px !important;
  }
  html body.itemid-101 .container-banner .gecca-split__content p { width: 100% !important; max-width: 480px !important; }
  html body.itemid-101 .container-banner .gecca-split__media {
    width: 100% !important;
    height: auto !important;
    padding: 0 0 0 10px !important;
  }
  html body.itemid-101 .container-banner .gecca-split__image {
    display: block !important;
    width: 100% !important;
    max-width: 723px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}

/* News footer remains within the single-column tablet grid. */
@media (min-width: 992px) and (max-width: 1199px) {
  html body.actus .site-grid > .container-bottom-a,
  html body.actus .site-grid > .container-bottom-b {
    margin-left: 0 !important;
  }
}

/* Align the news content start with the reference banner height at laptop widths. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body.actus .site-grid > .container-banner {
    height: 426px !important;
    min-height: 426px !important;
  }
}

/* Live production uses 69px section headings and 18px content at 1440px. */
@media (min-width: 1200px) and (max-width: 1600px) {
  html body .site-grid h2 { font-size: 69px !important; line-height: 1.03 !important; }
  html body .site-grid p,
  html body .site-grid li { font-size: 18px !important; line-height: normal !important; }
  html body .container-banner .gecca-split__content h2 { font-size: 25px !important; line-height: 32.5px !important; }
  html body.actus .blog-item h2 { font-size: 25px !important; line-height: 1.2 !important; }
}