/* ===========================================================================
   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; }
/* Un réglage Design posé sur la zone « Content » entière l'enveloppe dans
   .ccm-custom-style-content : le rythme doit traverser ce wrapper. */
.mobikes-theme #main > .layout-container,
.mobikes-theme #main > .ccm-custom-style-content > .layout-container { margin-block: var(--section-py); }
.mobikes-theme #main > .layout-container:first-child,
.mobikes-theme #main > .ccm-custom-style-content > .layout-container:first-child { margin-top: 0; }
/* Dernière section d'une zone Content stylée : c'est le padding du wrapper
   (panneau Design) qui fait l'air du bas, pas la marge — sinon elle traverse le
   wrapper et l'espace se retrouve hors du fond. */
.mobikes-theme #main > .ccm-custom-style-content > .layout-container:last-child { margin-bottom: 0; }

/* Page qui finit sur une bande de fond (container « Section — X » coloré, zone
   ou agencement stylé au panneau Design) : collée à l'avant-footer. Une page qui
   finit sur du contenu sans fond garde la marge de l'avant-footer. */
.mobikes-theme:has(#main > :last-child:is(
    .section-block:not(.section-block--transparent),
    .ccm-custom-style-content,
    .ccm-custom-style-container:not(.cartes)
)) .pre__footer { 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é.
   Les variantes colorées ont un fond distinct de --bg : pas de marge externe,
   deux bandes successives se collent. L'écart avec un agencement voisin sans
   fond vient de la marge du .layout-container (§1).
   La variante transparente (fond = --bg) se comporte comme un agencement :
   pas de padding interne, le rythme de section passe par la marge.
--------------------------------------------------------------------------- */
.mobikes-theme .section-block {
    margin-inline: calc(50% - 50vw);
    margin-block: 0;
    padding-block: 100px;
}
.mobikes-theme .section-block--transparent {
    margin-block: var(--section-py);
    padding-block: 0;
}
.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); }
/* Surface claire (fond Design d'un bloc/agencement) posée dans une bande foncée :
   le texte repasse à l'encre. Classe .on-light posée par surface-contrast.js. */
.mobikes-theme .section-block .on-light,
.mobikes-theme .section-block .on-light :where(h1, h2, h3, h4, p, li, a:not(.btn)) { color: var(--ink); }
.mobikes-theme .section-block .on-light .btn--outline,
.mobikes-theme .section-block .on-light [class*="btn-outline"] { color: var(--ink); border-color: currentColor; }
.mobikes-theme .section-block .on-light .btn--outline:hover,
.mobikes-theme .section-block .on-light [class*="btn-outline"]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }


/* 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; }

/* Rythme de section (§1) : .mt-0 / .mb-0 suppriment l'écart, qu'ils soient
   posés sur l'agencement (wrapper) ou sur un bloc en tête / en pied d'une
   colonne. Les marges verticales voisines fusionnent : il faut aussi annuler la
   marge du voisin, sinon la sienne recrée l'écart. Une section = enfant direct
   de #main, ou de la zone « Content » enveloppée par un réglage Design. */
.mobikes-theme :is(#main, #main > .ccm-custom-style-content) > :is(
    .mt-0,
    :has(> .grid > .grid__col > .mt-0:first-child),
    :has(> .layout-container > .grid > .grid__col > .mt-0:first-child)
) { margin-top: 0 !important; }
/* (un :has() ne peut pas en contenir un autre : chemins relatifs à plat) */
.mobikes-theme :is(#main, #main > .ccm-custom-style-content) > :has(
    + .mt-0,
    + * > .grid > .grid__col > .mt-0:first-child,
    + * > .layout-container > .grid > .grid__col > .mt-0:first-child
) { margin-bottom: 0 !important; }

.mobikes-theme :is(#main, #main > .ccm-custom-style-content) > :is(
    .mb-0,
    :has(> .grid > .grid__col > .mb-0:last-child),
    :has(> .layout-container > .grid > .grid__col > .mb-0:last-child)
) { margin-bottom: 0 !important; }
.mobikes-theme :is(#main, #main > .ccm-custom-style-content) > :is(
    .mb-0,
    :has(> .grid > .grid__col > .mb-0:last-child),
    :has(> .layout-container > .grid > .grid__col > .mb-0:last-child)
) + * { margin-top: 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); }
/* Voile de lisibilité : la couche .ccm-block-hero-image-cover du core (entre
   l'image et le texte) est vide par défaut. */
.mobikes-theme .ccm-block-hero-image-cover { background: rgba(22, 19, 15, 0.35); }
/* 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; }

/* Bloc « Accordéon » (FAQ) — repris d'ADO. Le core charge le JS collapse de
   Bootstrap (features/accordions) mais pas les règles .collapse/.collapsing,
   qui vivent dans le Bootstrap complet absent de ce thème : sans elles, tous
   les panneaux restent ouverts. On les rétablit, scopées au bloc, puis on
   refait l'apparence : une pile de panneaux blancs détachés. */
.mobikes-theme .ccm-block-accordion .collapse:not(.show) { display: none; }
.mobikes-theme .ccm-block-accordion .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.mobikes-theme .ccm-block-accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Le bloc n'a aucune marge basse : sans ça, le contenu suivant de la colonne
   (typiquement un nouveau titre de section) vient se coller aux panneaux. */
.mobikes-theme .ccm-block-accordion:not(:last-child) {
    margin-bottom: calc(var(--section-py) * 0.75);
}

.mobikes-theme .ccm-block-accordion .accordion-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    overflow: hidden;
}

.mobikes-theme .ccm-block-accordion .accordion-header {
    margin: 0;
}

.mobikes-theme .ccm-block-accordion .accordion-button {
    gap: 1.5rem;
    padding: 1.4rem clamp(1.25rem, 2.2vw, 2rem);
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-400);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

/* Chevron du core (image de fond bleue) refait en trait, à l'encre du site. */
.mobikes-theme .ccm-block-accordion .accordion-button::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    background: none;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.25s ease;
}

.mobikes-theme .ccm-block-accordion .accordion-button:not(.collapsed)::after {
    transform: translateY(15%) rotate(225deg);
}

.mobikes-theme .ccm-block-accordion .accordion-body {
    padding: 0 clamp(1.25rem, 2.2vw, 2rem) 1.6rem;
}

.mobikes-theme .ccm-block-accordion .accordion-body > :last-child { margin-bottom: 0; }

.mobikes-theme .ccm-block-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .mobikes-theme .ccm-block-accordion .accordion-button::after,
    .mobikes-theme .ccm-block-accordion .collapsing { transition: none; }
}

/* Bloc « Hero Image » posé en tête de page = en-tête de page : collé à la nav
   et pleine largeur. Facultatif : sans hero en tête, #main garde son padding.
   Le bloc arrive seul ou enveloppé (wrapper .ccm-custom-style-container dès
   qu'un réglage Design ou une classe est posé) : ce wrapper ne doit recevoir ni
   le padding des bandes (§2), ni marge, ni la contrainte de largeur. */
.mobikes-theme #main:has(> .ccm-block-hero-image:first-child, > :first-child > .ccm-block-hero-image:first-child) {
    padding-top: 0;
}
.mobikes-theme #main > :first-child:has(> .ccm-block-hero-image:first-child) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Wrapper qui n'est pas une bande (§2) : pas de padding bas non plus. Une zone
   Content stylée (fond posé au panneau Design) garde son padding bas. */
.mobikes-theme #main > .ccm-custom-style-container:first-child:has(> .ccm-block-hero-image:first-child) {
    padding-bottom: 0;
}
.mobikes-theme #main > :first-child > .ccm-block-hero-image:first-child {
    width: auto;
    margin-inline: 0;
}


/* ---------------------------------------------------------------------------
   5. CARTES — classes proposées dans le panneau Design (page_theme.php)
   « cartes » sur un agencement : chaque colonne devient une carte blanche.
   Les colonnes d'une même ligne s'étirent (flex, align-items: stretch) → toutes
   à la hauteur de la plus haute, sans hauteur ni padding réglés à la main.
   « carte » sur un bloc : le bloc devient une carte blanche ; deux cartes qui se
   suivent dans une colonne sont espacées.
--------------------------------------------------------------------------- */
/* Colonne stylée au panneau Design (fond, padding…) : Concrete l'enveloppe dans
   un wrapper .ccm-custom-style-<zone> (sans « -container », réservé aux blocs)
   qui s'arrête à son contenu. On l'étire sur toute la colonne → les colonnes
   d'une ligne, déjà de même hauteur, ont des fonds de même hauteur. */
.mobikes-theme .grid__col > [class^="ccm-custom-style-"]:not(.ccm-custom-style-container):only-child {
    height: 100%;
    box-sizing: border-box;
}

/* La classe crée un wrapper .ccm-custom-style-container : sans fond, il ne doit
   pas recevoir le padding des bandes de couleur (§2) mais le rythme d'un
   agencement normal (§1). */
.mobikes-theme #main > .ccm-custom-style-container.cartes {
    padding-block: 0;
    margin-block: var(--section-py);
}

.mobikes-theme .cartes .grid__col,
.mobikes-theme .carte {
    background: #fff;
    color: var(--ink);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.mobikes-theme .cartes .grid__col { border-radius: 30px; }

/* Dans « cartes », le thème pilote seul la carte : fonds, paddings et marges
   posés au panneau Design sur les colonnes ou sur leurs blocs sont neutralisés. */
.mobikes-theme .cartes .grid__col > [class^="ccm-custom-style-"]:not(.ccm-custom-style-container) {
    padding: 0;
    background: none;
}
.mobikes-theme .cartes .grid__col .ccm-custom-style-container {
    padding: 0;
    margin-block: 0;
}
/* Contenu de carte en colonne : le bloc bouton final (Lien de fonctionnalité,
   ou tout dernier bloc contenant un .btn) est poussé en bas → boutons alignés
   d'une carte à l'autre. Le conteneur est la colonne, ou le wrapper de colonne
   stylée (étiré à 100 % plus haut). */
.mobikes-theme .cartes .grid__col,
.mobikes-theme .cartes .grid__col > [class^="ccm-custom-style-"]:not(.ccm-custom-style-container):only-child {
    display: flex;
    flex-direction: column;
}
.mobikes-theme .cartes .grid__col > [class^="ccm-custom-style-"]:not(.ccm-custom-style-container):only-child {
    flex: 1 1 auto;
}
.mobikes-theme .cartes .grid__col > :is(.ccm-block-feature-link, :not([class^="ccm-custom-style-"]):has(.btn, [class*="btn-outline"])):last-child,
.mobikes-theme .cartes .grid__col > [class^="ccm-custom-style-"]:not(.ccm-custom-style-container) > :is(.ccm-block-feature-link, :has(.btn, [class*="btn-outline"])):last-child {
    margin-top: auto;
    padding-top: 1.5rem;
}
/* Icône de carte (bloc Image) : taille et respiration fixées ici. */
.mobikes-theme .cartes .grid__col .ccm-image-block {
    display: block;
    width: min(9rem, 60%);
    height: auto;
    margin: 0 auto 2rem;
}
.mobikes-theme .carte { border-radius: 20px; }

.mobikes-theme .carte + .carte { margin-top: 20px; }

.mobikes-theme :where(.cartes .grid__col, .carte) :is(p, ul, ol, details):last-child {
    margin-bottom: 0;
}