/* ============================================================
   ExpoBéton RDC — Couche de thème (habillage visuel)
   Template Structo — Préparation 13e édition (local uniquement)
   ------------------------------------------------------------
   Objectif : appliquer l'identité visuelle ACTUELLE du site
   (palette, police Archivo, angles droits) sur le nouveau
   template, SANS modifier le contenu textuel ni les images.

   Cette feuille est chargée APRÈS style.css : ses variables et
   ses règles écrasent celles du template brut.

   Charte graphique ExpoBéton (STRICTE — aucune autre couleur admise) :
     Rouge  #c22439  boutons CTA, accents, éléments interactifs
     Bleu   #112bb5  titres H1/H2, liens, footer
     Jaune  #fdbd1b  badges, surlignages, éléments secondaires
     Fonds  #ffffff / #f8f9fa  (jamais de fond noir)
     Texte  #333 (lisibilité)
   ============================================================ */

/* 0. Police Archivo : celle réellement utilisée par le site actuel
      (le template livrait Instrument Sans / Inter ; on bascule sur Archivo).
      Auto-hébergée (variable, sous-ensemble latin, SIL OFL 1.1 —
      https://fonts.google.com/specimen/Archivo) : l'@import Google Fonts
      externe bloquait le rendu (et donc le script de sortie du loader) quand
      le CDN était lent ou injoignable ; en local, page et loader s'affichent
      même hors-ligne. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-italic.woff2') format('woff2');
}

/* 1. Remap des variables du template vers l'identité ExpoBéton.
      Le template consomme ces variables partout (var(--primary-color) x60,
      var(--accent-color) x46, polices x17) : ce bloc habille l'ensemble du site. */
:root {
  /* Références ExpoBéton (charte stricte) */
  --eb-rouge: #c22439;   /* CTA, accents, éléments interactifs */
  --eb-bleu: #112bb5;    /* titres H1/H2, liens, footer */
  --eb-jaune: #fdbd1b;   /* badges, surlignages, éléments secondaires */
  --eb-fond: #f8f9fa;    /* fonds clairs de sections */
  --eb-ink: #333;        /* texte de corps (lisibilité) */

  /* Variables du template, redirigées vers la charte ExpoBéton */
  --primary-color: #112bb5;    /* titres, liens, footer */
  --accent-color: #fdbd1b;     /* badges, surlignages */
  --secondary-color: #555;     /* texte atténué (neutre, lisibilité) */
  --primary-font: 'Archivo', sans-serif;
  --secondary-font: 'Archivo', sans-serif;

  /* Fonds clairs : le template utilise --web-wash (jamais déclaré, bug) et
     --gray-color5 pour les sections grises -> calés sur la charte. */
  --web-wash: #ffffff;
  --gray-color5: #f8f9fa;
}

/* 2. Typographie de base alignée sur le site actuel
      (bleu sur les titres, corps gris — évite un "tout bleu"). */
body {
  font-family: 'Archivo', sans-serif;
  color: var(--eb-ink);
}
p {
  color: #555;
  line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--eb-bleu);
  font-weight: 700;
}

/* 3. Liens : bleu marque, survol rouge (charte). Footer : liens blancs sur fond bleu. */
a {
  color: var(--eb-bleu);
  transition: color 0.3s ease;
}
a:hover {
  color: var(--eb-rouge);
}
.cs_footer_style_1 a,
footer a {
  color: #ffffff;
}
.cs_footer_style_1 a:hover,
footer a:hover {
  color: var(--eb-jaune);
}

/* 4. Boutons — charte stricte, coins droits.
      - primaire (.cs_btn_style_1) : fond ROUGE #c22439, texte blanc ;
        survol = rouge assombri via filter (aucune teinte hors charte).
      - secondaire (.cs_btn_style_2) : contour BLEU #112bb5, rempli bleu au survol. */
[class*="cs_btn_style"] {
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.cs_btn_style_1 {
  background-color: var(--eb-rouge) !important;
  color: #ffffff !important;
}
.cs_btn_style_1:hover {
  background-color: var(--eb-rouge) !important;
  color: #ffffff !important;
  filter: brightness(0.86);
  border-radius: 0 !important;
}
.cs_btn_style_2 {
  background: transparent;
  color: var(--eb-bleu) !important;
  box-shadow: inset 0 0 0 2px var(--eb-bleu);
}
.cs_btn_style_2:hover {
  background-color: var(--eb-bleu) !important;
  color: #ffffff !important;
}
/* Badges / catégories : JAUNE #fdbd1b avec texte bleu (charte "badges = jaune"). */
.cs_category.cs_primary_bg {
  background-color: var(--eb-jaune) !important;
  color: var(--eb-bleu) !important;
}

/* Masque le panneau de démo du template (color / direction switcher) : ses
   pastilles de couleur sont hors charte et ne font pas partie du site final.
   (Structure HTML conservée intacte — masquage purement CSS.) */
.cs_switcher,
.cs_switcher_toggle,
.cs_switcher_panel {
  display: none !important;
}

/* 8. Logo ExpoBéton intégré (PNG opaque 668x260, ratio conservé).
      - En-tête (fond blanc) : hauteur fixe, largeur auto -> seamless.
      - Footer (fond bleu) : cartouche blanc pour poser le logo opaque. */
.cs_site_brand {
  max-width: 220px;
}
.cs_site_brand img {
  height: 52px;
  max-height: 52px; /* style.css plafonne à 45px ; on relève pour la lisibilité du logo */
  width: auto;
  max-width: 100%;
}
.cs_brand img {
  height: 56px;
  width: auto;
  padding: 8px 12px;
  background: #ffffff;
}

/* 9. Badge édition "13" animé, juste à côté du logo.
      Reprend le principe du badge "12" du site actuel (carré rouge #c22439,
      texte blanc Archivo, pulsation). Angles droits conformes à la charte. */
.cs_site_brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.edition-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eb-rouge);
  color: #ffffff;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 0;
  animation: ebBadgePulse 2s ease-in-out infinite;
}
@keyframes ebBadgePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(194, 36, 57, 0.5); }
  50%      { transform: scale(1.12); box-shadow: 0 0 12px 4px rgba(194, 36, 57, 0.3); }
}

/* 10. Hero = affiche officielle 13e édition (bloc unique, intacte).
      Desktop : bannière PAYSAGE recomposée (1920x1200) pleine largeur.
      Mobile  : <picture> bascule sur l'affiche portrait d'origine (textes lisibles).
      Aucune perte d'information, aucune déformation, aucun masquage. */
.cs_hero.cs_hero_banner_wrap {
  /* Le header du template est position:fixed (72px) : sans padding-top, le haut
     de la bannière (patronage, logo, armoirie) passerait dessous. On compense
     (72px header + 24px de respiration) sur fond blanc = fondu avec le bandeau. */
  padding: 96px 0 0;
  background: #ffffff;
}
.cs_hero_banner {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--eb-fond);
}
.cs_hero_banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 11. Compte à rebours semi-transparent superposé au Hero, format CARRÉ,
      positionné sur la colonne PHOTO (route / barrage) à droite.
      Au-dessus de l'image mais sous le menu (z-index 3). Fond translucide ->
      la photo reste perceptible à travers ; aucun chevauchement des textes/logo
      de la colonne gauche. */
.cs_hero_banner {
  position: relative;
}
.eb-countdown-hero {
  position: absolute;
  left: 85.5%;                      /* centre de la colonne photo (route/barrage) */
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: min(320px, 26vw);          /* carré responsive, légèrement agrandi */
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  /* Voile rouge charte semi-transparent -> contraste texte blanc, photo visible */
  background: linear-gradient(160deg, rgba(194, 36, 57, 0.62), rgba(194, 36, 57, 0.45));
  border: none;                     /* contour blanc retiré */
  border-radius: 0;                 /* angles droits (charte) */
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: 'Archivo', sans-serif;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  pointer-events: none;             /* ne gêne pas les interactions sur le Hero */
}
.eb-cd-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fdbd1b;                   /* jaune charte : accent secondaire */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.eb-cd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2x2 pour tenir dans le carré */
  gap: 10px;
  width: 100%;
}
.eb-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.eb-cd-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.eb-cd-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}
@media (max-width: 991px) {
  /* Portrait : on garde le carré sur la zone photo (droite) pour ne pas
     masquer les textes titre/thème de la colonne gauche. */
  .eb-countdown-hero {
    left: 75%;
    top: 65%;
    width: min(200px, 46vw);
    padding: 10px;
    gap: 8px;
  }
  .eb-cd-title { font-size: 12px; letter-spacing: 1px; }
  .eb-cd-grid { gap: 6px; }
  .eb-cd-num { font-size: 26px; }
  .eb-cd-label { font-size: 10px; }
}

/* 5. Angles droits sur les structures (style institutionnel ExpoBéton).
      On annule les classes de rayon utilitaires et le dropdown du menu. */
.cs_radius_5,
.cs_radius_8,
.cs_radius_32,
.cs_radius_50 {
  border-radius: 0 !important;
}
.menu-item-has-children .cs_dropdown_list {
  border-radius: 0 !important;
}

/* 6. Garde-fous volontaires : on NE touche PAS aux éléments circulaires
      (anneau du preloader, pastilles décoratives des "story of years",
      panneau switcher). Leur border-radius d'origine reste actif. */

/* 7. FILET DE SÉCURITÉ — thème CLAIR forcé.
      Le template ajoute la classe cs_dark au <body> quand l'OS est en mode
      sombre (prefers-color-scheme), ce qui bascule ses variables sur des fonds
      navy/noir (--dark-body:#191919, etc.) et assombrit TOUTE la page.
      Le <script> du <head> force déjà "structo-theme=light" ; cette règle
      neutralise cs_dark au cas où elle serait appliquée (peinture avant JS,
      localStorage indisponible). body.cs_dark a une spécificité supérieure à
      .cs_dark : les valeurs claires gagnent. On garde la marque ExpoBéton. */
body.cs_dark {
  --primary-color: #112bb5;   /* bleu marque (au lieu du gris clair du mode sombre) */
  --accent-color: #fdbd1b;    /* jaune marque */
  --secondary-color: #42526b; /* texte atténué */
  --gray-color2: #061c3d;     /* sections volontairement foncées (inchangé) */
  --gray-color3: #e6e8ec;
  --gray-color4: #243752;
  --gray-color5: #f5f6f7;
  --gray-color6: #cdd2d8;
  --gray-color7: #cee0fa;
  /* Ramène les surfaces "sombre" du mode cs_dark sur du clair */
  --dark-body: #ffffff;
  --dark-surface: #ffffff;
  --dark-surface-2: #f5f6f7;
  --dark-ink: #222222;
  background-color: #ffffff;
  color: var(--eb-ink);
}

/* Durcissement : si cs_dark apparaissait (peinture avant JS), le footer doit
   rester lisible — fond bleu marque + texte blanc — et non blanc-sur-blanc. */
body.cs_dark .cs_footer_style_1,
body.cs_dark footer {
  background-color: #112bb5;
  color: #ffffff;
}
body.cs_dark .cs_footer_style_1 a,
body.cs_dark .cs_footer_style_1 p,
body.cs_dark .cs_footer_style_1 h1,
body.cs_dark .cs_footer_style_1 h2,
body.cs_dark .cs_footer_style_1 h3,
body.cs_dark .cs_footer_style_1 h4,
body.cs_dark footer a,
body.cs_dark footer p,
body.cs_dark footer h1,
body.cs_dark footer h2,
body.cs_dark footer h3,
body.cs_dark footer h4 {
  color: #ffffff;
}

/* 12. LOADER plein écran ExpoBéton 13.
      Champ bleu marque + plaque blanche carrée (logo + badge "13" pulsé),
      accents rouge/jaune, barre de progression balayée, sortie en fondu.
      Charte : Archivo, angles droits, palette #c22439 / #112bb5 / #fdbd1b. */
html.eb-loading,
html.eb-loading body {
  overflow: hidden;
}
.eb-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #112bb5;
  font-family: 'Archivo', sans-serif;
  transition: opacity .6s ease, transform .6s ease, visibility .6s ease;
}
.eb-loader.is-done {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  pointer-events: none;
}
/* Fond vivant : halos rouge/jaune dérivants + trame diagonale discrète. */
.eb-loader-bg { position: absolute; inset: 0; overflow: hidden; }
.eb-loader-glow {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
}
.eb-loader-glow--red {
  background: radial-gradient(circle, #c22439 0%, rgba(194, 36, 57, 0) 70%);
  top: -20vmax; left: -15vmax;
  animation: ebLoaderDriftA 9s ease-in-out infinite alternate;
}
.eb-loader-glow--yellow {
  background: radial-gradient(circle, #fdbd1b 0%, rgba(253, 189, 27, 0) 70%);
  bottom: -25vmax; right: -15vmax;
  opacity: .22;
  animation: ebLoaderDriftB 11s ease-in-out infinite alternate;
}
.eb-loader-grid {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, rgba(255, 255, 255, 0) 2px 26px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 75%);
}
.eb-loader-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  max-width: min(92vw, 620px);
}
/* Plaque blanche carrée portant le logo + le badge 13. */
.eb-loader-plate {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 26px 34px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: ebLoaderPlate .7s cubic-bezier(.2, .8, .2, 1) both;
}
.eb-loader-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid #fdbd1b;
  animation: ebLoaderCorner .5s .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.eb-loader-corner--tl { top: -11px; left: -11px; border-right: 0; border-bottom: 0; }
.eb-loader-corner--tr { top: -11px; right: -11px; border-left: 0; border-bottom: 0; border-color: #c22439; }
.eb-loader-corner--bl { bottom: -11px; left: -11px; border-right: 0; border-top: 0; border-color: #c22439; }
.eb-loader-corner--br { bottom: -11px; right: -11px; border-left: 0; border-top: 0; }
.eb-loader-brand { display: inline-flex; align-items: center; gap: 12px; }
.eb-loader-logo {
  display: block;
  height: 60px; width: auto;
  animation: ebLoaderLogo .8s .1s cubic-bezier(.2, .8, .2, 1) both;
}
.eb-loader-badge {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: #c22439;
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
  border-radius: 0;
  animation:
    ebLoaderBadgePop .55s .5s cubic-bezier(.34, 1.56, .64, 1) both,
    ebLoaderBadgePulse 1.8s 1.1s ease-in-out infinite;
}
.eb-loader-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: ebLoaderRise .6s .55s both;
}
.eb-loader-sep { width: 26px; height: 2px; background: #fdbd1b; }
.eb-loader-place { color: rgba(255, 255, 255, .85); font-weight: 500; letter-spacing: 1px; }
.eb-loader-theme {
  margin: 0;
  color: #fdbd1b;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  animation: ebLoaderRise .6s .65s both;
}
.eb-loader-bar {
  position: relative;
  width: min(320px, 70vw);
  height: 4px;
  margin-top: 4px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
  animation: ebLoaderRise .6s .75s both;
}
.eb-loader-bar-fill {
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #c22439, #fdbd1b);
  animation: ebLoaderSweep 1.4s ease-in-out infinite;
}
.eb-loader-status {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  animation: ebLoaderRise .6s .85s both;
}
.eb-loader-dot { width: 8px; height: 8px; animation: ebLoaderDot 1s ease-in-out infinite; }
.eb-loader-dot--red { background: #c22439; }
.eb-loader-dot--yellow { background: #fdbd1b; animation-delay: .15s; }
.eb-loader-dot--white { background: #ffffff; animation-delay: .3s; }
.eb-loader-text {
  margin-left: 6px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@keyframes ebLoaderPlate { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ebLoaderLogo { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ebLoaderBadgePop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes ebLoaderBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 36, 57, .55); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(194, 36, 57, 0); }
}
@keyframes ebLoaderCorner { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes ebLoaderRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* Va-et-vient DANS la piste (0 -> 150% de la largeur du fill = 60% de la piste) :
   le remplissage reste visible à toute phase du cycle, jamais de « barre vide ». */
@keyframes ebLoaderSweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(150%); } }
@keyframes ebLoaderDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes ebLoaderDriftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } }
@keyframes ebLoaderDriftB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-7vmax, -5vmax) scale(1); } }
@media (max-width: 575px) {
  .eb-loader-logo { height: 44px; }
  .eb-loader-badge { width: 34px; height: 34px; font-size: 17px; }
  .eb-loader-plate { padding: 18px 22px; }
  .eb-loader-meta { font-size: 11px; gap: 8px; letter-spacing: 1px; }
  .eb-loader-theme { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-loader, .eb-loader * { animation: none !important; transition: none !important; }
  .eb-loader { transition: opacity .2s ease !important; }
}

/* 13. ASCENSEUR (scrollbar) aux couleurs de la charte : piste claire, pouce
      bleu marque, survol rouge, angles droits — au lieu du gris par défaut
      du navigateur. Firefox via scrollbar-color, Chromium via ::-webkit-. */
html {
  scrollbar-color: #112bb5 #f8f9fa;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f8f9fa; }
::-webkit-scrollbar-thumb {
  background: #112bb5;
  border: 2px solid #f8f9fa;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: #c22439; }
::-webkit-scrollbar-corner { background: #f8f9fa; }

/* 14. BANDEAU « Temps fort de la 13e édition » (cs_cta_style_1) :
      image recomposée depuis HEADER_banner.jpeg (portrait) en panorama
      2640x1020 — intervenant intact à droite, décor de scène étendu hors
      focus à gauche, voile sombre pour le texte (même traitement que
      l'image d'exemple du site modèle : model_site/images/banner/1.png).
      - object-position 78% : en mobile, object-fit:cover recadre par
        défaut le centre de l'image ; calé côté intervenant, il reste
        visible avec de la marge à toutes les largeurs (sans effet en
        desktop, où le rapport du bloc égale celui de l'image).
      - lien du titre en blanc sur la scène sombre (le bleu du thème y
        serait illisible), survol jaune (charte). */
.cs_cta_style_1 .cs_cta_bg img {
  object-position: 78% center;
}
.cs_cta_style_1 .cs_cta_in .cs_cta_title a {
  color: #ffffff;
}
.cs_cta_style_1 .cs_cta_in .cs_cta_title a:hover {
  color: var(--eb-jaune);
}

/* 15. BANDEAU « Temps fort » PLEINE LARGEUR (full-bleed : le bloc épouse
      tout le viewport, sans marges latérales ni conteneur qui le bride).
      - breakout centrée : width 100vw + marges calc(50% - 50vw) ; le bloc
        reste dans le flux, structure HTML intacte ; overflow-x clip sur
        html/body absorbe les pixels de l'ascenseur inclus dans 100vw
        sans créer de défilement horizontal (hidden en repli).
      - aspect-ratio 2640/1020 = rapport EXACT du visuel recomposé : en
        desktop la hauteur suit la largeur, donc object-fit: cover ne
        rogne ni ne déforme rien (personnage, logo 12, décor) ; le
        min-height 510 px conserve le cadrage validé tablette/mobile.
      - contenu interne recentré sur la grille du site (max-width des
        conteneurs + padding 12 px) : repère lieu, titre et bouton restent
        alignés avec l'en-tête de section au-dessus ; margin-right 10 px
        compense l'ascenseur (10 px, section 13) inclus dans 100vw.
      - coins droits (charte). */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
/* La section devient conteneur de requête (container query) : l'unité cqw
   des gouttières internes vaudra sa largeur réelle (largeur client,
   ascenseur déduit) -> alignement exact quelle que soit la plateforme. */
section:has(.cs_cta_style_1) {
  container-type: inline-size;
}
.cs_cta_style_1 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: auto;
  min-height: 510px;
  aspect-ratio: 2640 / 1020;
  border-radius: 0;
}
.cs_cta_style_1 .cs_cta_in {
  width: 100%;
}
/* Gouttières internes = celles du conteneur Structo mesuré par breakpoint
   (540/720/960/1140/1344 px, padding 12 px inclus) : repère lieu, titre et
   bouton du bandeau restent alignés avec l'en-tête de section au-dessus.
   cqw = largeur de la section ; sans container queries supportées, cqw
   retombe sur la largeur viewport (repli naturel, toujours lisible). */
.cs_cta_style_1 .cs_top,
.cs_cta_style_1 .cs_bottom {
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 576px) {
  .cs_cta_style_1 .cs_top,
  .cs_cta_style_1 .cs_bottom {
    padding-left: calc((100cqw - 540px) / 2 + 12px);
    padding-right: calc((100cqw - 540px) / 2 + 12px);
  }
}
@media (min-width: 768px) {
  .cs_cta_style_1 .cs_top,
  .cs_cta_style_1 .cs_bottom {
    padding-left: calc((100cqw - 720px) / 2 + 12px);
    padding-right: calc((100cqw - 720px) / 2 + 12px);
  }
}
@media (min-width: 992px) {
  .cs_cta_style_1 .cs_top,
  .cs_cta_style_1 .cs_bottom {
    padding-left: calc((100cqw - 960px) / 2 + 12px);
    padding-right: calc((100cqw - 960px) / 2 + 12px);
  }
}
@media (min-width: 1200px) {
  .cs_cta_style_1 .cs_top,
  .cs_cta_style_1 .cs_bottom {
    padding-left: calc((100cqw - 1140px) / 2 + 12px);
    padding-right: calc((100cqw - 1140px) / 2 + 12px);
  }
}
@media (min-width: 1400px) {
  .cs_cta_style_1 .cs_top,
  .cs_cta_style_1 .cs_bottom {
    padding-left: calc((100cqw - 1344px) / 2 + 12px);
    padding-right: calc((100cqw - 1344px) / 2 + 12px);
  }
}

/* 16. SECTION « Qui sommes-nous » (accueil) : photos présidentielles.
      Le gabarit fait chevaucher le bandeau de compteurs de 108 px sur le
      bas des photos ; avec les portraits présidentiels (sujet assis dans
      la moitié basse), ce voile masquait le buste. Chevauchement réduit
      à 24 px en desktop : seul le sol de la scène passe sous le bandeau,
      l'effet de superposition signature du template est conservé et les
      sujets restent entiers. Tablette/mobile : gabarit inchangé (bandeau
      sous les photos, margin 0). */
@media (min-width: 992px) {
  .cs_about_style_1 .cs_counter_wrapper_style_1 {
    margin-top: -24px;
  }
}