/* ===========================================================================
   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 base.css / style.css).

   TABLE DES MATIÈRES
     1. #main — confinement horizontal + rythme vertical du contenu
     2. Sections à FOND pleine largeur (couleur de fond sur un agencement)
     3. Containers « Section — X » (bande pleine largeur + contenu aligné)
     4. Blocs du core — restyles custom
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. #main — CONFINEMENT HORIZONTAL + RYTHME VERTICAL DU CONTENU
   overflow-x: clip empêche la barre de défilement horizontale (les techniques
   pleine largeur débordent via margin-inline négatif) sans casser le sticky
   (contrairement à overflow: hidden).
   Rythme vertical : chaque agencement/bloc de 1er niveau (.layout-container créé
   par la grille dans la zone de contenu) reçoit un espace au-dessus ET en-dessous
   (margin-block ; entre deux .layout-container les marges fusionnent → un seul
   écart, mais l'espace est préservé face à un voisin non-collapsable comme une
   bande de couleur ou un bloc Hero Image). Le 1er n'a pas d'espace en haut (la
   nav/le padding-top de #main gèrent le haut). Opt-out au cas par cas via .mt-0
   / .mb-0 (§3, en !important). Les bandes de couleur (.ccm-custom-style-container)
   gèrent leur propre air (padding).
--------------------------------------------------------------------------- */
.mobikes-theme #main { overflow-x: clip; }
.mobikes-theme #main > .layout-container { margin-block: var(--section-py); }
.mobikes-theme #main > .layout-container:first-child { margin-top: 0; }



/* ---------------------------------------------------------------------------
   2. SECTIONS À FOND PLEINE LARGEUR — couleur de fond sur un agencement.
--------------------------------------------------------------------------- */
.mobikes-theme #main > .ccm-custom-style-container {
    padding-block: var(--section-py);
}
.mobikes-theme #main > .ccm-custom-style-container:has(> .section-block) {
    padding-block: 0;
}
.mobikes-theme #main > .ccm-custom-style-container > *:not(.section-block) {
    width: min(100% - 2 * var(--site-outer-margin), var(--content-max));
    margin-inline: auto;
}


/* ---------------------------------------------------------------------------
   3. CONTAINERS « SECTION — X » (elements/containers/section_*.php)
   Bande de couleur pleine largeur + contenu aligné.
--------------------------------------------------------------------------- */
.mobikes-theme .section-block {
    margin-inline: calc(50% - 50vw);
    margin-block: var(--section-py);
    padding-block: 100px;
}
.mobikes-theme .section-block--cream { background: var(--surface); }
.mobikes-theme .section-block--grey  { background: var(--surface-2, #e3e2dd); }
.mobikes-theme .section-block--green { background: var(--green); }
.mobikes-theme .section-block--ink   { background: var(--ink); }
/* Fonds foncés : texte + boutons contour en blanc */
.mobikes-theme .section-block--green,
.mobikes-theme .section-block--ink { color: #fff; }
.mobikes-theme .section-block--green :where(h1, h2, h3, h4, p, li, a:not(.btn)),
.mobikes-theme .section-block--ink :where(h1, h2, h3, h4, p, li, a:not(.btn)) { color: #fff; }
.mobikes-theme .section-block--green .btn--outline,
.mobikes-theme .section-block--green [class*="btn-outline"],
.mobikes-theme .section-block--ink .btn--outline,
.mobikes-theme .section-block--ink [class*="btn-outline"] { color: #fff; border-color: #fff; }
.mobikes-theme .section-block--green .btn--outline:hover,
.mobikes-theme .section-block--green [class*="btn-outline"]:hover,
.mobikes-theme .section-block--ink .btn--outline:hover,
.mobikes-theme .section-block--ink [class*="btn-outline"]:hover { background: #fff; border-color: #fff; color: var(--green); }


/* HAUT */
.mobikes-theme .mt-0,
.mobikes-theme .mt-0 .section-block { margin-top: 0 !important; }
.mobikes-theme #main > .ccm-custom-style-container.mt-0,
.mobikes-theme #main > .ccm-custom-style-container.pt-0 { padding-top: 0 !important; }

/* BAS */
.mobikes-theme .mb-0,
.mobikes-theme .mb-0 .section-block { margin-bottom: 0 !important; }
.mobikes-theme #main > .ccm-custom-style-container.mb-0,
.mobikes-theme #main > .ccm-custom-style-container.pb-0 { padding-bottom: 0 !important; }

/* HAUT + BAS (padding d'un agencement) */
.mobikes-theme #main > .ccm-custom-style-container.py-0 { padding-block: 0 !important; }


/* ---------------------------------------------------------------------------
   4. BLOCS / CLASSES DU CORE — restyles & alias
--------------------------------------------------------------------------- */
/* Bloc « Hero Image » du core — texte en blanc par-dessus l'image */
.mobikes-theme .ccm-block-hero-image,
.mobikes-theme .ccm-block-hero-image :where(h1, h2, h3, h4, h5, h6, p, ul, li, a:not(.btn)) {
    color: #fff;
}
/* Boutons contour dans le Hero Image (fond sombre) : blancs, comme notre
   .btn--outline sur les autres fonds foncés (home hero, sections vertes/encre)
   — sinon le contour encre de base est invisible sur l'image. */
.mobikes-theme .ccm-block-hero-image .btn--outline,
.mobikes-theme .ccm-block-hero-image [class*="btn-outline"] { color: #fff; border-color: #fff; }
.mobikes-theme .ccm-block-hero-image .btn--outline:hover,
.mobikes-theme .ccm-block-hero-image [class*="btn-outline"]:hover { background: #fff; border-color: #fff; color: var(--green); }
/* Bouton CTA du Hero Image : détaché du texte au-dessus. */
.mobikes-theme .ccm-block-hero-image .btn { margin-top: 30px; }

/* léger fondu d'opacité sur la seule vignette pas toute la zone en bleu). */
.mobikes-theme .ccm-block-gallery .ccm-block-gallery-image-overlay { display: none; }
.mobikes-theme .ccm-block-gallery img { transition: opacity 0.25s ease; }
.mobikes-theme .ccm-block-gallery a:hover img,
.mobikes-theme .ccm-block-gallery a:focus-visible img { opacity: 0.8; }