/* ===========================================================================
   CONCRETE — Couche CMS (overrides & hacks)

   Tout ce qui existe À CAUSE de Concrete CMS : blocs éditables insérés dans
   les gabarits, containers de section, classes des blocs du core.
   PAS l'identité visuelle du site (ça reste dans style.css / responsive.css).
   Chargé en dernier dans head.php pour primer.

   TABLE DES MATIÈRES
     1. Confinement horizontal (support du full-bleed)
     2. Blocs éditables du hero (titre / texte / boutons)
     3. Containers « Section — X » (bande pleine largeur + contenu aligné)
     4. Blocs du core — restyles
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. CONFINEMENT HORIZONTAL
   Les bandes pleine largeur débordent via margin-inline négatif en vw : sans
   ce clip, la largeur de la barre de défilement suffit à créer un scroll
   horizontal. clip (et non hidden) laisse fonctionner les positions sticky /
   fixed de la nav. Non scopé : la feuille du thème n'est jamais chargée dans
   l'admin (thème d'administration séparé).
--------------------------------------------------------------------------- */
html { overflow-x: clip; }


/* ---------------------------------------------------------------------------
   2. BLOCS ÉDITABLES DU HERO (front.php — zones « Hero Titre / Texte / Boutons »)
   Le contenu du hero vient de blocs Contenu : les styles du thème ciblent
   .hero_main .content .section_title h1 / p et continuent donc de s'appliquer.
   Reste à gérer ce que l'éditeur produit : des <p> et des liens nus.
--------------------------------------------------------------------------- */
/* L'espace au-dessus du texte est porté par le <p> du thème : on neutralise
   celui que l'éditeur pourrait ajouter en cascade sur les paragraphes suivants. */
.hero_main .content .section_title .hero_text p + p { margin-top: 20px; }

/* Boutons : tout lien du bloc devient un bouton, sans que le client ait à
   poser une classe. Le 1er reprend le style plein, les suivants le style
   couleur — l'ordre d'origine du hero. */
.hero_main .content .btn_area p { margin: 0; }
.hero_main .content .btn_area a {
  font-family: "Poppins", sans-serif;
  color: #131313;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  border: 2px solid #131313;
  box-shadow: 4px 4px 0px #131313;
  padding: 20px 50px;
  text-transform: uppercase;
  transition: .3s;
  display: inline-block;
  margin-right: 25px;
}
.hero_main .content .btn_area a:hover {
  color: var(--action-color);
  box-shadow: none;
}
.hero_main .content .btn_area a ~ a {
  color: #fff;
  background: var(--main-color);
  padding: 20px 44px;
}
.hero_main .content .btn_area a ~ a:hover {
  color: #fff;
  background: var(--action-color);
}
.hero_main .content .btn_area a:last-child { margin-right: 0; }

/* La flèche du bouton principal est posée en CSS : l'icône n'est plus dans le
   HTML éditable, le client peut changer le libellé sans la perdre. */
.hero_main .content .btn_area a:first-child::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f061";
  display: inline-block;
  transform: rotate(-45deg);
  margin-left: 5px;
  transition: .3s;
}
.hero_main .content .btn_area a:first-child:hover::after { transform: none; }

@media (max-width: 767px) {
  .hero_main .content .btn_area a {
    padding: 16px 30px;
    margin-right: 15px;
  }
  .hero_main .content .btn_area a ~ a {
    padding: 16px 26px;
    margin-top: 15px;
  }
}


/* ---------------------------------------------------------------------------
   3. CONTAINERS « SECTION — X » (elements/containers/section_*.php)
   Bande pleine largeur + contenu réaligné sur le conteneur du site.
   Utilitaires : .mt-0 / .mb-0 (coller deux bandes), .py-0 (bande sans air).
--------------------------------------------------------------------------- */
.section-block {
  margin-inline: calc(50% - 50vw);
  margin-block: 60px;
  padding-block: 100px;
}
.section-block--blue { background: #A7E6FF; }
.section-block--transparent { background: transparent; }

@media (max-width: 767px) {
  .section-block {
    margin-block: 40px;
    padding-block: 50px;
  }
}

/* Le premier bloc d'une bande ne rajoute pas l'espace de titre du thème. */
.section-block__inner > *:first-child h2 { margin-top: 0; }

.section-block.mt-0, .mt-0 > .section-block { margin-top: 0 !important; }
.section-block.mb-0, .mb-0 > .section-block { margin-bottom: 0 !important; }
.section-block.py-0, .py-0 > .section-block { padding-block: 0 !important; }

/* Piège Concrete : une classe posée via le panneau Design enveloppe le
   container dans .ccm-custom-style-container, qui re-contraint la bande. */
.ccm-custom-style-container:has(> .section-block) { padding-block: 0; }


/* ---------------------------------------------------------------------------
   4. BLOCS DU CORE — RESTYLES
--------------------------------------------------------------------------- */
/* Bloc « Galerie » : le survol du core plaque un overlay bleu sur toute la
   cellule — remplacé par un léger fondu sur la seule image. */
.ccm-block-gallery .ccm-block-gallery-image-overlay { display: none; }
.ccm-block-gallery img { transition: opacity 0.25s ease; }
.ccm-block-gallery a:hover img,
.ccm-block-gallery a:focus-visible img { opacity: 0.8; }