/* ===========================================================================
   CONCRETE — Couche CMS 
   
   TABLE DES MATIÈRES
     0. Tokens de la couche
     1. Confinement horizontal
     2. Containers « Section — X » (bande pleine largeur + contenu aligné)
     3. Variantes de couleur
     4. Utilitaires de collage (bandes bord à bord)
     5. Blocs du core — restyles
     6. Liens dans les contenus éditoriaux
     7. Mode édition
   =========================================================================== */

.frisbee-theme {
    --section-py: clamp(60px, 8vw, 100px);   /* air INTERNE d'une bande */
    --section-gap: clamp(40px, 6vw, 80px);   /* air ENTRE deux bandes */
}


/* ---------------------------------------------------------------------------
   1. CONFINEMENT HORIZONTAL
--------------------------------------------------------------------------- */
.frisbee-theme { overflow-x: clip; }


/* ---------------------------------------------------------------------------
   2. CONTAINERS « SECTION — X » (elements/containers/section_*.php)
   Bande de couleur pleine largeur
--------------------------------------------------------------------------- */
.frisbee-theme .section-block {
    margin-inline: calc(50% - 50vw);
    margin-block: var(--section-gap);
    padding-block: var(--section-py);
}
.frisbee-theme .ccm-custom-style-container:has(> .section-block) {
    margin-inline: calc(50% - 50vw);
}
.frisbee-theme .ccm-custom-style-container:has(> .section-block) > .section-block {
    margin-inline: 0;
}


/* ---------------------------------------------------------------------------
   3. VARIANTES DE COULEUR
--------------------------------------------------------------------------- */

/* --- BLEU : fond --blue, texte blanc ------------------------------------ */
.frisbee-theme .section-block--blue { background: var(--blue); }
.frisbee-theme .section-block--blue,
.frisbee-theme .section-block--blue :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em) {
    color: #fff;
}
/* Liens de contenu : soulignés, pour rester distinguables sans la couleur */
.frisbee-theme .section-block--blue a:not(.btn-full):not(.btn-border) {
    color: #fff;
    text-decoration: underline;
}
/* Le contour orange du thème disparaît sur le bleu → contour blanc */
.frisbee-theme .section-block--blue .btn-border {
    color: #fff;
    border-color: #fff;
}
.frisbee-theme .section-block--blue .btn-border:hover,
.frisbee-theme .section-block--blue .btn-border:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--blue);
}

/* --- JAUNE : fond --lightgreen, texte orange ----------------------------- */
.frisbee-theme .section-block--yellow { background: var(--lightgreen); }
.frisbee-theme .section-block--yellow,
.frisbee-theme .section-block--yellow :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em) {
    color: var(--orange);
}
.frisbee-theme .section-block--yellow :where(p, li) {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);  /* 22 → 28px */
    line-height: 1.45;
}
.frisbee-theme .section-block--yellow .btn-border {
    color: var(--orange);
    border-color: var(--orange);
}
.frisbee-theme .section-block--yellow .btn-border:hover,
.frisbee-theme .section-block--yellow .btn-border:focus-visible {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* --- NEUTRE : pas de fond, couleurs courantes ---------------------------- */
.frisbee-theme .section-block--neutral { background: none; }


/* ---------------------------------------------------------------------------
   4. UTILITAIRES DE COLLAGE - Pour coller deux bandes bord à bord
--------------------------------------------------------------------------- */
.frisbee-theme .section-block.mt-0,
.frisbee-theme .mt-0 > .section-block { margin-top: 0 !important; }

.frisbee-theme .section-block.mb-0,
.frisbee-theme .mb-0 > .section-block { margin-bottom: 0 !important; }

.frisbee-theme .section-block.py-0,
.frisbee-theme .py-0 > .section-block { padding-block: 0 !important; }


/* ---------------------------------------------------------------------------
   5. BLOCS DU CORE — RESTYLES - Bloc « Galerie » : au survo
--------------------------------------------------------------------------- */
.frisbee-theme .ccm-block-gallery .ccm-block-gallery-image-overlay { display: none; }
.frisbee-theme .ccm-block-gallery img { transition: opacity 0.25s ease; }
.frisbee-theme .ccm-block-gallery a:hover img,
.frisbee-theme .ccm-block-gallery a:focus-visible img { opacity: 0.8; }

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


/* ---------------------------------------------------------------------------
   5b. ZONE « CHIFFRES CLÉS » DU HERO (front.php)

   Le bloc porte sa propre boîte (fond anis, arrondi, bordure) mais était aussi
   sorti du flux par position: absolute. Résultat en édition : Concrete dessine
   le contour de la zone à sa place dans le flux, c'est-à-dire une languette
   plate à côté des compteurs — impossible de comprendre ce qu'on édite.

   Le placement passe donc sur .hero-funfacts-slot, qui enveloppe la zone. Le
   contour épouse alors les compteurs. Le rendu public est inchangé : mêmes
   coordonnées, simplement portées d'un cran plus haut dans le DOM.
--------------------------------------------------------------------------- */
.frisbee-theme .hero-funfacts-slot {
    position: absolute;
    right: 6%;
    bottom: -62px;
    z-index: 3;
}
/* relative et non static : .crp-hero-funfacts i se positionne par rapport à la boîte */
.frisbee-theme .hero-funfacts-slot .crp-hero-funfacts {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: auto;
}
/* En dessous de 576px le thème remet les compteurs dans le flux : le conteneur
   suit, sinon il resterait collé en bas à droite du hero. On garde ce flux —
   c'est lui qui évite toute collision avec le bouton du hero, le bloc occupant
   ici toute la largeur — et le chevauchement sur la section suivante est
   recréé par une marge négative. Valeur calée sur le rendu à 576px, où le bloc
   déborde de 30% de sa hauteur. */
@media (max-width: 575px) {
    .frisbee-theme .hero-funfacts-slot {
        position: relative;
        right: auto;
        bottom: auto;
        /* Le bloc sort du flux au-dessus de 576px : l'air entre le bouton du
           hero et les compteurs vient alors de la hauteur du hero (66px juste
           avant la bascule). Dans le flux, il faut la poser explicitement,
           sinon le bloc vient coller au bouton. */
        margin-top: 64px;
        margin-bottom: -48px;
        z-index: 3;
    }
}


/* ---------------------------------------------------------------------------
   5c. PAGE DÉTAIL D'UN MEMBRE (organisation_membre.php)

   Page non publique : elle porte les attributs d'une organisation et sert de
   point d'entrée à l'édition. La mise en page suit l'ordre du compositeur —
   nom, logo, lien, présentation — pour que l'écran corresponde au formulaire.
--------------------------------------------------------------------------- */
.frisbee-theme .membre-detail { padding-block: var(--section-py); }

.frisbee-theme .membre-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 767px) {
    .frisbee-theme .membre-detail__grid { grid-template-columns: 1fr; gap: 28px; }
}

.frisbee-theme .membre-detail__logo {
    max-width: 100%;
    height: auto;
}

.frisbee-theme .membre-detail__presentation {
    max-width: 68ch;          /* longueur de ligne confortable */
    margin-bottom: 32px;
    text-wrap: pretty;
}

.frisbee-theme .membre-detail__back {
    display: inline-block;
    margin-top: 48px;
    color: var(--blue);
    font-weight: 600;
}

/* Repères d'édition : visibles uniquement pour les personnes connectées. */
.frisbee-theme .membre-detail__notice {
    border-left: 4px solid var(--blue);
    background: #f3f9fd;
    padding: 16px 20px;
    margin-bottom: 40px;
    max-width: 68ch;
    color: #2e2e2e;
}
.frisbee-theme .membre-detail__empty {
    color: #767676;           /* 4,6:1 sur blanc */
    font-style: italic;
    margin: 0 0 16px;
}


/* ---------------------------------------------------------------------------
   6. LIENS DANS LES CONTENUS ÉDITORIAUX

   Un lien posé depuis l'éditeur arrive sans classe : sans traitement, il est
   indistinguable du texte courant. Le bleu de marque (#018ed5) ne tient pas le
   contraste en corps de texte, d'où la variante --blue-link.

   La portée est volontairement limitée aux éléments de texte courant : un lien
   saisi dans l'éditeur est toujours dans un p / li / td / blockquote. Les
   titres et vignettes des listes (actualités, membres) vivent dans des h2-h4 et
   des div, et gardent donc le rendu d'origine du thème.
--------------------------------------------------------------------------- */
.frisbee-theme .content :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]),
.frisbee-theme .postbox-details-text :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]),
.frisbee-theme .section-block :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]) {
    color: var(--blue-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    /* Propriétés énumérées : le soulignement s'épaissit sans décaler le texte. */
    transition: color 150ms ease-out,
                text-decoration-thickness 150ms ease-out,
                text-underline-offset 150ms ease-out;
}
.frisbee-theme .content :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):hover,
.frisbee-theme .content :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):focus-visible,
.frisbee-theme .postbox-details-text :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):hover,
.frisbee-theme .postbox-details-text :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):focus-visible,
.frisbee-theme .section-block :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):hover,
.frisbee-theme .section-block :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):focus-visible {
    color: var(--blue-link-hover);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Sur une bande de couleur, le lien reprend la couleur du texte de la bande et
   ne se distingue plus que par le soulignement : le bleu foncé serait illisible
   sur le bleu, et le blanc le serait sur le jaune. Le survol garde
   l'épaississement du trait, seule la couleur ne change plus. */
.frisbee-theme :is(.section-block--blue, .section-block--yellow) :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]),
.frisbee-theme :is(.section-block--blue, .section-block--yellow) :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):hover,
.frisbee-theme :is(.section-block--blue, .section-block--yellow) :is(p, li, td, th, blockquote, figcaption) a:not([class*="btn"]):focus-visible {
    color: inherit;
}

/* Une image liée insérée dans un paragraphe ne se souligne pas. */
.frisbee-theme .content :is(p, li, td) a:has(img),
.frisbee-theme .postbox-details-text :is(p, li, td) a:has(img),
.frisbee-theme .section-block :is(p, li, td) a:has(img) {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .frisbee-theme .content :is(p, li, td, th, blockquote, figcaption) a,
    .frisbee-theme .postbox-details-text :is(p, li, td, th, blockquote, figcaption) a,
    .frisbee-theme .section-block :is(p, li, td, th, blockquote, figcaption) a {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
   7. MODE ÉDITION
--------------------------------------------------------------------------- */
.ccm-edit-mode .frisbee-theme { overflow-x: visible; }

/* La zone doit rester saisissable même vide : sans hauteur minimale, une zone
   sans bloc est invisible et la cliente n'a rien où déposer. */
.ccm-edit-mode .frisbee-theme .hero-funfacts-slot {
    min-width: 220px;
    min-height: 60px;
}



/*----------------------------------------*/
/* Concrete CMS - Mode édition (ccm-edit-mode)
   Neutralisations pour éviter les conflits DnD */
/*----------------------------------------*/

html.ccm-toolbar-visible .ccm-page header {
  margin-top: 48px;
}

.ccm-edit-mode #preloader,
.ccm-edit-mode #loading,
.ccm-edit-mode .back-to-top-wrapper,
.ccm-edit-mode .body-overlay,
.ccm-edit-mode .tp-offcanvas-wrapper,
.ccm-edit-mode .tp-offcanvas-area,
.ccm-edit-mode .tp-offcanvas-2-area {
  display: none !important;
}

.ccm-edit-mode body,
.ccm-edit-mode .fix {
  overflow: visible !important;
}

/* S’assurer que les contenus cachés par défaut restent visibles en édition */
.ccm-edit-mode .tp_img_reveal {
  visibility: visible !important;
  overflow: visible !important;
}

/* Neutraliser animations/transformations qui perturbent le DnD */
.ccm-edit-mode [class*="tp-"],
.ccm-edit-mode [class*="crp-hero"],
.ccm-edit-mode .hero-funfacts-absolute,
.ccm-edit-mode #smooth-wrapper,
.ccm-edit-mode #smooth-content {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Forcer la visibilité des zones de drop */
.ccm-edit-mode .container,
.ccm-edit-mode .row,
.ccm-edit-mode section,
.ccm-edit-mode .crp-hero-area,
.ccm-edit-mode .crp-banner-area,
.ccm-edit-mode .crp-banner-wrap {
  overflow: visible !important;
}

/* ScrollSmoother wrappers (si présents) */
.ccm-edit-mode #smooth-wrapper { position: static !important; }
.ccm-edit-mode #smooth-content { will-change: auto !important; }

/* Nav en mode édition Concrete: garder le layout horizontal malgré les wrappers */
.ccm-edit-mode .tp-header-9-menu nav ul {
  display: inline-block;
}