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

   Tout ce qui existe À CAUSE de Concrete CMS : comportement de l'éditeur,
   classes des blocs du core, mécaniques pleine largeur, containers de section.
   PAS l'identité visuelle du site (ça reste dans style.css).

   Chargé APRÈS style.css dans includes/head.php pour primer.

   Particularités de ce site : framework de grille = bootstrap5 (pas la grille
   maison), et pas de wrapper de thème — les règles suivent la convention
   existante de style.css (non scopées ; le CSS du thème ne se charge jamais
   dans l'admin).

   TABLE DES MATIÈRES
     1. Confinement horizontal du contenu
     2. Containers « Section — X » (bande pleine largeur + contenu aligné)
     3. Blocs du core — restyles
   =========================================================================== */

:root {
    /* Air vertical d'une section — aligné sur le rythme des .container du site */
    --section-py: 60px;
}


/* ---------------------------------------------------------------------------
   1. CONFINEMENT HORIZONTAL
   Les techniques pleine largeur débordent via margin-inline négatif calculé
   en vw : la barre de défilement verticale (html { overflow-y: scroll })
   fait dépasser de quelques pixels. overflow-x: clip absorbe ce dépassement
   sans créer de conteneur de défilement (contrairement à overflow: hidden),
   donc sans casser le sticky ni la navbar fixe (qui vit hors de <main>).
--------------------------------------------------------------------------- */
main { overflow-x: clip; }


/* ---------------------------------------------------------------------------
   2. CONTAINERS « SECTION — X » (elements/containers/section_*.php)
   Bande pleine largeur, contenu réaligné sur les marges du site.
   Le fond n'est pas imposé par le gabarit : il se choisit dans le panneau
   Design du container (Concrete enveloppe alors le bloc dans un
   .ccm-custom-style-container, déjà pleine largeur → fond bord à bord).
--------------------------------------------------------------------------- */
.section-block {
    margin-inline: calc(50% - 50vw);
    padding-block: var(--section-py);
}

/* Le contenu est réaligné par .section-block__inner (.layout-container) :
   padding-inline = --site-outer-margin, comme partout ailleurs sur le site. */

/* Une section gère elle-même son air vertical : on neutralise le padding
   du .container Bootstrap que la grille pose autour du bloc container
   (l'alias .container du thème ajoute 60px haut/bas). */
.container:has(.section-block) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Opt-out d'air vertical — classes à ajouter dans le panneau Design du
   container, cohérentes avec les .pt-0 / .pb-0 déjà utilisées sur le site
   (utile pour coller deux bandes de couleur bord à bord). */
.pt-0 .section-block,
.section-block.pt-0 { padding-top: 0 !important; }

.pb-0 .section-block,
.section-block.pb-0 { padding-bottom: 0 !important; }


/* ---------------------------------------------------------------------------
   3. BLOCS DU CORE — RESTYLES
--------------------------------------------------------------------------- */
/* Bloc « Galerie » : le survol par défaut plaque un overlay bleu Bootstrap
   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; }

@media (prefers-reduced-motion: reduce) {
    .ccm-block-gallery img { transition: none; }
}


/* ---------------------------------------------------------
   Concrete CMS: désactiver animations/overlays en mode édition
--------------------------------------------------------- */
.ccm-edit-mode .loader-overlay {
  display: none !important;
}
.ccm-edit-mode .title-wrapper,
.ccm-edit-mode .text-reveal,
.ccm-edit-mode .text-reveal--inline span {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.ccm-edit-mode .navbar {
  mix-blend-mode: normal !important;
  z-index: 10 !important;
  transform: none !important;
}


/* Default: NO blend; re-enable only when not in admin */
.navbar,
.navbar .logo,
.navbar nav a {
  mix-blend-mode: normal;
}

/* Frontend only (no Concrete UI) -> allow the artistic blend WHEN blend-active (desktop only) */
@media (min-width: 951px) {
  body.blend-active:not(.menu-open):not(.menu-closing):not(.ccm-edit-mode):not(.ccm-panel-open):not(.ccm-dashboard) .navbar,
  body.blend-active:not(.menu-open):not(.menu-closing):not(.ccm-edit-mode):not(.ccm-panel-open):not(.ccm-dashboard) .navbar .logo,
  body.blend-active:not(.menu-open):not(.menu-closing):not(.ccm-edit-mode):not(.ccm-panel-open):not(.ccm-dashboard) .navbar nav a,
  body.blend-active:not(.menu-open):not(.menu-closing):not(.ccm-edit-mode):not(.ccm-panel-open):not(.ccm-dashboard) .menu-toggle {
    mix-blend-mode: difference;
    color: #fff;
  }
  body.blend-active:not(.menu-open):not(.menu-closing):not(.ccm-edit-mode):not(.ccm-panel-open):not(.ccm-dashboard) .navbar nav a:hover {
    color: var(--color-action);
  }
}

/* Make sure the overlay can sit above the navbar when panels are open */
.ccm-edit-mode .navbar,
.ccm-panel-open .navbar,
.ccm-dashboard .navbar {
  position: relative;   /* not fixed above everything */
  z-index: 1 !important;
}

/* The logo had an extreme z-index; drop it in admin */
.ccm-edit-mode .navbar .logo,
.ccm-panel-open .navbar .logo,
.ccm-dashboard .navbar .logo {
  z-index: 1 !important;
  mix-blend-mode: normal !important;
  color: inherit; /* avoid forced white over the grey overlay */
}

/* Optional: avoid accidental clicks on navbar while a panel is open */
.ccm-panel-open .navbar {
  pointer-events: none;
}