/* ===========================================================================
   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).
--------------------------------------------------------------------------- */
.canopee-theme #main { overflow-x: clip; }
.canopee-theme #main > .layout-container { margin-block: var(--section-py); }
.canopee-theme #main > .layout-container:first-child { margin-top: 0; }
/* L'intro de page porte son propre air en bas (56 px) : pas de marge de
   rythme entre elle et le bloc suivant. */
.canopee-theme #main > .layout-container:has(.page-intro) { margin-bottom: 0; }
.canopee-theme #main > .layout-container:has(.page-intro) + .layout-container { margin-top: 0; }
/* Fiche thérapeute : gabarit fixe, collé au bandeau (le portrait le chevauche). */
.canopee-theme #main > .therapist-body { margin-block: 0; }



/* ---------------------------------------------------------------------------
   2. SECTIONS À FOND PLEINE LARGEUR — couleur de fond sur un agencement.
--------------------------------------------------------------------------- */
.canopee-theme #main > .ccm-custom-style-container {
    padding-block: var(--section-py);
}
.canopee-theme #main > .ccm-custom-style-container:has(> .section-block) {
    padding-block: 0;
}
.canopee-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é.
--------------------------------------------------------------------------- */
.canopee-theme .section-block {
    margin-inline: calc(50% - 50vw);
    padding-block: var(--section-py);
}
/* Deux bandes de couleur qui se suivent se touchent ; une bande après du
   contenu sur fond crème garde l'air de la règle de rythme de #main. */
.canopee-theme #main > .layout-container + .section-block,
.canopee-theme #main > .layout-container + .ccm-custom-style-container > .section-block { margin-top: var(--section-py); }
.canopee-theme .section-block--cream  { background: var(--c-cream); }
.canopee-theme .section-block--sage   { background: var(--c-sage-100); }
.canopee-theme .section-block--forest { background: var(--c-forest); color: var(--c-cream); }
/* Fond vert : texte et boutons contour en crème */
.canopee-theme .section-block--forest :where(h1, h2, h3, h4, p, li, a:not(.btn)) { color: var(--c-cream); }
.canopee-theme .section-block--forest .btn--outline,
.canopee-theme .section-block--forest [class*="btn-outline"] { color: var(--c-cream); border-color: var(--c-cream); }
.canopee-theme .section-block--forest .btn--outline:hover,
.canopee-theme .section-block--forest [class*="btn-outline"]:hover { background: var(--c-cream); color: var(--c-forest); }


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

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

/* HAUT + BAS (padding d'un agencement) */
.canopee-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 */
.canopee-theme .ccm-block-hero-image,
.canopee-theme .ccm-block-hero-image :where(h1, h2, h3, h4, h5, h6, p, ul, li, a:not(.btn)) {
    color: var(--c-cream);
}
/* 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. */
.canopee-theme .ccm-block-hero-image .btn--outline,
.canopee-theme .ccm-block-hero-image [class*="btn-outline"] { color: var(--c-cream); border-color: var(--c-cream); }
.canopee-theme .ccm-block-hero-image .btn--outline:hover,
.canopee-theme .ccm-block-hero-image [class*="btn-outline"]:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-forest); }
/* Bouton CTA du Hero Image : détaché du texte au-dessus. */
.canopee-theme .ccm-block-hero-image .btn { margin-top: 30px; }

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