/* ==========================================================================
   SCOPE - pages « contenu » sans Divi : habillage commun (scope-content.css)
   --------------------------------------------------------------------------
   Pages concernées : « Le SCOPE, c'est quoi ? », « Les salles affiliées », « L'équipe », « Concours et témoignages ».
   Chargé seulement sur une page qui contient <div class="scope-content scope-page" ...> (voir scope-pages.php). Le contenu est fabriqué par
   Pages-contenu\generer_pages.py : ce fichier ne contient que l'habillage.
   AUCUN code propre à un thème : couleurs, rayon des angles et police des titres viennent des variables --scope-* (scope-themes.css).
   Même vocabulaire visuel que l'accueil, la FAQ et le contact (cartes, boutons, bandeau d'appel). Tout est préfixé « .scope-content » ou « .sx- ».
   Sommaire : 1 base · 2 introduction · 3 sections · 4 image et texte · 5 cartes, tuiles, listes · 6 mur de logos · 7 groupes et galerie ·
              8 étapes et encadré · 9 avis · 10 bandeau d'appel et boutons · 11 agrandissement des photos · 12 écrans larges, mouvement réduit
   ========================================================================== */

/* --- 1. Base : on neutralise les marges et listes imposées par le thème (Divi : « #left-area ul » plus fort que les classes) ----------------- */
.scope-content { display: block; max-width: 1000px; margin: 0; padding: 8px 0 40px; color: var(--scope-text); font-size: 1.0625rem; line-height: 1.65; text-align: left; }
.scope-content *, .scope-content *::before, .scope-content *::after { box-sizing: border-box; }
.scope-content h2, .scope-content h3, .scope-content p, .scope-content ul, .scope-content ol, .scope-content li, .scope-content figure, .scope-content blockquote { margin: 0; padding: 0; }
.scope-content ul, .scope-content ol { padding: 0 !important; list-style: none !important; }
.scope-content h2, .scope-content h3 { color: var(--scope-head); font-family: var(--scope-font-head); line-height: 1.2; text-transform: none; letter-spacing: normal; }
.scope-content p { padding: 0 !important; margin: 0 0 1em; }
.scope-content a { color: var(--scope-link); }
.scope-content img { display: block; max-width: 100%; height: auto; }
.scope-content a:focus-visible, .scope-content button:focus-visible, .scope-content [tabindex]:focus-visible { outline: 3px solid var(--scope-focus); outline-offset: 3px; }
.scope-content .sx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 2. Introduction ---------------------------------------------------------------------------------------------------------------------- */
.scope-content .sx-intro { margin: 0 0 8px; }
.scope-content .sx-kicker { margin: 0 0 6px !important; color: var(--scope-dim); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-content .sx-lead { max-width: 62ch; margin: 0 0 1em !important; color: var(--scope-text); font-family: var(--scope-font-head); font-size: clamp(1.25rem, 3.2vw, 1.65rem); line-height: 1.35; }
.scope-content .sx-lead--sm { font-size: 1.2rem; }
.scope-content .sx-note { margin: 12px 0 0 !important; color: var(--scope-dim); font-size: .95rem; }

/* --- 3. Sections ------------------------------------------------------------------------------------------------------------------------- */
.scope-content .sx-section { margin: 44px 0 0; }
.scope-content .sx-h2 { margin: 0 0 18px; padding: 0 0 10px; border-bottom: 3px solid var(--scope-accent); font-size: clamp(1.5rem, 4vw, 2rem); }
.scope-content .sx-h2--plain { padding: 0; border: 0; margin: 0 0 8px; }
.scope-content .sx-h3 { margin: 0 0 10px; font-size: 1.2rem; }
.scope-content .sx-center { margin: 20px 0 0 !important; text-align: center; }
.scope-content .sx-link { font-weight: 700; text-underline-offset: .2em; }

/* --- 4. Image et texte -------------------------------------------------------------------------------------------------------------------- */
.scope-content .sx-split { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.scope-content .sx-figure { overflow: hidden; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: var(--scope-bg-alt); }
.scope-content .sx-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.scope-content .sx-figure--small { max-width: 220px; }
.scope-content .sx-figure--small img { aspect-ratio: 1 / 1; }
.scope-content .sx-text > :last-child { margin-bottom: 0; }
.scope-content .sx-quote { margin: 0 0 22px; padding: 6px 0 6px 18px; border-left: 5px solid var(--scope-accent); }
.scope-content .sx-quote p { margin: 0; color: var(--scope-head); font-family: var(--scope-font-head); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.25; }

/* --- 5. Cartes, tuiles, listes ------------------------------------------------------------------------------------------------------------ */
.scope-content .sx-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 18px; }
.scope-content .sx-card { padding: 18px 20px; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: var(--scope-card); }
.scope-content .sx-card__t { margin: 0 0 6px; font-size: 1.2rem; }
.scope-content .sx-card p:last-child { margin-bottom: 0; }
.scope-content .sx-facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 22px; }
.scope-content .sx-fact { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--scope-soft); border-left: 5px solid var(--scope-accent); border-radius: var(--scope-radius); background: var(--scope-card); }
.scope-content .sx-fact__big { color: var(--scope-head); font-family: var(--scope-font-head); font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.scope-content .sx-fact__small { color: var(--scope-text); font-size: .98rem; line-height: 1.45; }
.scope-content .sx-ticks { display: grid; gap: 8px; margin: 0 0 1em; }
.scope-content .sx-ticks li { position: relative; padding: 0 0 0 30px; }
.scope-content .sx-ticks li::before { content: ""; position: absolute; top: .38em; left: 3px; width: 9px; height: 15px; border: solid var(--scope-link); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.scope-content .sx-ticks--big { gap: 10px; }
.scope-content .sx-ticks--big li { padding: 14px 16px 14px 46px; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: var(--scope-card); font-weight: 600; }
.scope-content .sx-ticks--big li::before { top: 1.05em; left: 18px; }
.scope-content .sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; }
.scope-content .sx-chips li { padding: 6px 14px; border: 1px solid var(--scope-line); border-radius: calc(var(--scope-radius) * 3); background: var(--scope-bg-alt); color: var(--scope-text); font-size: .95rem; font-weight: 600; line-height: 1.3; }

/* --- 6. Mur de logos (salles) ----------------------------------------------------------------------------------------------------------- */
.scope-content .sx-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.scope-content .sx-logo { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.scope-content .sx-logo__img { display: flex; align-items: center; justify-content: center; height: 110px; padding: 10px 14px; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: #ffffff; }
.scope-content .sx-logo__img img { width: 100%; height: 100%; object-fit: contain; }
.scope-content .sx-logo__name { color: var(--scope-text); font-size: .9rem; font-weight: 600; line-height: 1.3; text-align: center; }

/* --- 7. Groupes (diplômes, séminaires) et galerie (équipe) ------------------------------------------------------------------------------ */
.scope-content .sx-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
.scope-content .sx-group { padding: 18px 20px; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: var(--scope-card); }
.scope-content .sx-group .sx-chips, .scope-content .sx-group .sx-ticks { margin-bottom: 0; }
.scope-content .sx-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 0; }
.scope-content .sx-gallery li { min-width: 0; }
.scope-content .sx-gallery a { position: relative; display: block; overflow: hidden; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); }
.scope-content .sx-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s; }
.scope-content .sx-gallery a:hover img { transform: scale(1.04); }
.scope-content .sx-profile .sx-split { align-items: center; }

/* --- 8. Étapes et encadré (concours) ------------------------------------------------------------------------------------------------------ */
.scope-content .sx-steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 20px; counter-reset: sx-step; }
.scope-content .sx-step { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 18px 14px 74px; border: 1px solid var(--scope-soft); border-radius: var(--scope-radius); background: var(--scope-card); counter-increment: sx-step; }
.scope-content .sx-step::before { content: counter(sx-step); position: absolute; top: 50%; left: 18px; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
	background: var(--scope-accent); color: var(--scope-on-accent); font-family: var(--scope-font-head); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.scope-content .sx-step p { margin: 0; }
.scope-content .sx-callout { padding: 16px 20px; border: 2px solid var(--scope-accent); border-radius: var(--scope-radius); background: var(--scope-bg-alt); }
.scope-content .sx-callout > :last-child { margin-bottom: 0; }

/* --- 9. Avis : le shortcode [scope_testimonials] (plugin scope-review-contest) charge son propre habillage (assets/scope-testimonials.css), aux couleurs du thème ---
.scope-content .sx-reviews { min-width: 0; }

/* --- 10. Bandeau d'appel et boutons ------------------------------------------------------------------------------------------------------- */
.scope-content .sx-cta { margin: 48px 0 0; padding: 28px 20px; border-radius: var(--scope-radius); background: var(--scope-bg-alt); text-align: center; }
.scope-content .sx-cta .sx-h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 1.6rem; }
.scope-content .sx-cta p { max-width: 54ch; margin: 0 auto 16px !important; }
.scope-content .sx-cta .sx-actions { justify-content: center; margin: 0 0 14px; }
.scope-content .sx-cta .sx-cta__more { margin: 0 auto !important; color: var(--scope-dim); font-size: .95rem; }
.scope-content .sx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.scope-content .sx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: .7em 1.4em; border: 2px solid var(--scope-link); border-radius: var(--scope-radius);
	background: var(--scope-accent); color: var(--scope-on-accent) !important; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; text-shadow: none; cursor: pointer;
	transition: background-color .15s, border-color .15s; }
.scope-content .sx-btn:hover, .scope-content .sx-btn:focus-visible { background: var(--scope-accent2); }
.scope-content .sx-btn--outline { background: transparent; color: var(--scope-link) !important; }
.scope-content .sx-btn--outline:hover, .scope-content .sx-btn--outline:focus-visible { background: var(--scope-accent); color: var(--scope-on-accent) !important; }

/* --- 11. Agrandissement des photos (scope-content.js) : boîte de dialogue native --------------------------------------------------------- */
.scope-content a.sx-zoom { cursor: zoom-in; }
.sx-lightbox { width: min(96vw, 1100px); max-width: none; max-height: 96vh; padding: 0; border: 0; border-radius: var(--scope-radius, 10px); background: var(--scope-card, #ffffff); color: var(--scope-text, #2b2b2b); overflow: hidden; }
.sx-lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.sx-lightbox__fig { display: flex; flex-direction: column; margin: 0; max-height: 96vh; }
.sx-lightbox__img { display: block; width: 100%; height: auto; max-height: calc(96vh - 76px); object-fit: contain; background: #000000; }
.sx-lightbox__cap { margin: 0; padding: 12px 56px 14px 16px; font-size: .95rem; line-height: 1.4; }
.sx-lightbox__fig.sx-nocap .sx-lightbox__cap { display: none; }
.sx-lightbox__fig.sx-nocap .sx-lightbox__img { max-height: 96vh; }
.sx-lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid var(--scope-accent, #4b163f); border-radius: 50%;
	background: var(--scope-card, #ffffff); color: var(--scope-link, #4b163f); font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer; }
.sx-lightbox button:hover, .sx-lightbox button:focus-visible { background: var(--scope-accent, #4b163f); color: var(--scope-on-accent, #ffffff); }
.sx-lightbox button:focus-visible { outline: 3px solid var(--scope-focus, #4b163f); outline-offset: 2px; }
.sx-lightbox__close { top: 10px; right: 10px; }
.sx-lightbox__prev, .sx-lightbox__next { top: 50%; margin-top: -24px; }
.sx-lightbox__prev { left: 10px; }
.sx-lightbox__next { right: 10px; }
.sx-lightbox[data-single] .sx-lightbox__prev, .sx-lightbox[data-single] .sx-lightbox__next { display: none; }

/* --- 12. Écrans plus larges, mouvement réduit --------------------------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.scope-content .sx-logos { grid-template-columns: repeat(3, 1fr); }
	.scope-content .sx-gallery { grid-template-columns: repeat(3, 1fr); }
	.scope-content .sx-facts { grid-template-columns: repeat(2, 1fr); }
	.scope-content .sx-steps { grid-template-columns: repeat(2, 1fr); }
	.scope-content .sx-cards--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 820px) {
	.scope-content .sx-split { grid-template-columns: 1fr 1fr; gap: 36px; }
	.scope-content .sx-split--reverse .sx-figure { order: -1; }
	.scope-content .sx-split--reverse .sx-text { order: 0; }
	.scope-content .sx-split--profile { grid-template-columns: 220px 1fr; gap: 28px; }
	.scope-content .sx-logos { grid-template-columns: repeat(4, 1fr); }
	.scope-content .sx-cols { grid-template-columns: repeat(3, 1fr); }
	.scope-content .sx-facts { grid-template-columns: repeat(3, 1fr); }
	.scope-content .sx-ticks--big { grid-template-columns: repeat(2, 1fr); }
	.scope-content .sx-cta { padding: 36px 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.scope-content .sx-btn, .scope-content .sx-gallery img { transition: none; }
	.scope-content .sx-gallery a:hover img { transform: none; }
}