posee
par render_ephemeres_list). Remplace l'ancienne alternance nth-child : memes
tokens, mais la couleur = la saison (renforce les onglets de periode).
Automne en terracotta fonce (accent-text) pour le contraste du texte blanc,
ete (gold clair) en texte fonce. L'override "passe = gris" (.is-past, plus
bas, !important) reste prioritaire sur un ephemere termine. */
.opac-period-automne .opac-stage-date { background-color: var(--opac-accent-text) !important; }
.opac-period-hiver .opac-stage-date { background-color: var(--opac-teal) !important; }
.opac-period-printemps .opac-stage-date { background-color: var(--wp--preset--color--mauve) !important; }
.opac-period-ete .opac-stage-date { background-color: var(--wp--preset--color--gold) !important; color: #4a3a10 !important; }
/* Separateur "Ephemeres passes" entre le groupe a-venir et le groupe passe
(emis par render_ephemeres_list seulement si les deux groupes existent).
Vient apres .opac-stages-list > * (meme specificite + source order) donc sa
marge gagne. Visibilite reajustee par onglet de periode (JS initStageTabs). */
.opac-stages-sep {
display: flex;
align-items: center;
gap: 12px;
margin: 6px 4px;
color: var(--opac-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.opac-stages-sep::before,
.opac-stages-sep::after {
content: "";
flex: 1;
height: 1px;
background: var(--opac-border);
}
.opac-stages-sep.opac-hidden {
display: none !important;
}
/* Rotation 6 couleurs sur le fill placeholder des cards atelier.
En attendant M3 ou Laurence uploadera les vraies photos via
post-featured-image, on garde les 6 teintes du mockup ai1-ai6
en rotation. */
.opac-card-cover-fill {
background-color: var(--opac-accent-light); /* fallback pour single page */
}
.opac-ateliers-grid > *:nth-child(6n+1) .opac-card-cover-fill { background-color: #f0e6dc; }
.opac-ateliers-grid > *:nth-child(6n+2) .opac-card-cover-fill { background-color: #e0e8e6; }
.opac-ateliers-grid > *:nth-child(6n+3) .opac-card-cover-fill { background-color: #e6e0ee; }
.opac-ateliers-grid > *:nth-child(6n+4) .opac-card-cover-fill { background-color: #f5e6e0; }
.opac-ateliers-grid > *:nth-child(6n+5) .opac-card-cover-fill { background-color: #dce8f0; }
.opac-ateliers-grid > *:nth-child(6n+6) .opac-card-cover-fill { background-color: #f0ece0; }
.opac-ateliers-grid > *:nth-child(6n+7) .opac-card-cover-fill { background-color: #e8e2d8; }
.opac-ateliers-grid > *:nth-child(6n+8) .opac-card-cover-fill { background-color: #ede6e2; }
.opac-ateliers-grid > *:nth-child(6n+9) .opac-card-cover-fill { background-color: #e6eae0; }
.opac-ateliers-grid > *:nth-child(6n+10) .opac-card-cover-fill { background-color: #e0ebe8; }
/* ----------------------------------------------------------------
* M3 : Archive ateliers (header + info-bar adhesion)
* ---------------------------------------------------------------- */
.opac-archive-header {
position: relative;
padding-top: 56px;
padding-bottom: 24px;
}
/* M4 : Tabs filtres par periode (archive stages) */
.opac-stage-tabs {
gap: 8px;
padding: 0 32px 24px;
max-width: 1080px;
margin: 0 auto;
}
.opac-stage-tabs > * {
margin: 0;
}
.opac-tab {
font-family: inherit;
font-size: 12px;
font-weight: 500;
padding: 7px 16px;
border: 0.5px solid var(--opac-border);
background: var(--opac-card);
color: var(--opac-muted);
border-radius: var(--opac-radius-pill);
cursor: pointer;
transition: background var(--opac-transition), color var(--opac-transition), border-color var(--opac-transition);
}
.opac-tab:hover {
background: var(--opac-bg);
border-color: var(--opac-muted);
color: var(--opac-ink);
}
.opac-tab.is-active {
background: var(--opac-ink);
color: var(--opac-card);
border-color: var(--opac-ink);
}
.opac-archive-title {
font-size: 28px;
font-weight: 400;
margin: 0 0 8px;
}
.opac-archive-intro {
font-size: 14px;
line-height: 1.6;
margin: 0 0 16px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* Pages legales (confidentialite, mentions legales, cookies, CGU) : contenu lu
depuis OPAC > Reglages et rendu par le bloc opac/legal-content. Mise en forme
prose ; la largeur de colonne lisible vient du template (contentSize 720). */
.opac-legal-content {
font-size: 16px;
line-height: 1.7;
color: var(--opac-ink);
}
/* Titres de section : un cran plus marques + filet de separation sous le
titre, pour structurer un contenu dense (h2 lus depuis OPAC > Reglages). */
.opac-legal-content h2 {
font-size: 20px;
font-weight: 600;
margin: 2em 0 0.7em;
padding-bottom: 0.35em;
border-bottom: 1px solid var(--opac-border);
}
.opac-legal-content h3 {
font-size: 16px;
font-weight: 600;
margin: 1.5em 0 0.3em;
}
.opac-legal-content h2:first-child {
margin-top: 0;
}
.opac-legal-content p,
.opac-legal-content ul,
.opac-legal-content ol {
margin: 0 0 1.1em;
}
.opac-legal-content ul,
.opac-legal-content ol {
padding-left: 1.4em;
}
.opac-legal-content li {
margin-bottom: 0.3em;
}
.opac-legal-content a {
text-decoration: underline;
}
.opac-info-bar {
font-size: 12px;
color: var(--opac-muted);
margin: 0;
}
.opac-info-bar strong {
color: var(--opac-ink);
font-weight: 500;
}
/* ----------------------------------------------------------------
* M3 : Single atelier (breadcrumb + detail + gallery + animateur)
* ---------------------------------------------------------------- */
.opac-breadcrumb {
font-size: 12px;
color: var(--opac-muted);
line-height: 1.6;
}
.opac-breadcrumb a {
color: var(--opac-muted);
text-decoration: none;
}
.opac-breadcrumb a:hover {
color: var(--opac-accent);
text-decoration: underline;
}
.opac-breadcrumb [aria-current="page"] {
color: var(--opac-accent);
font-weight: 500;
}
.opac-breadcrumb-sep {
margin: 0 4px;
color: var(--opac-border);
}
.opac-detail {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 768px) {
.opac-detail {
grid-template-columns: 1fr;
}
}
.opac-detail > * {
margin: 0;
}
.opac-detail-photo {
height: 280px !important;
border-radius: var(--opac-radius);
}
.opac-detail-content {
display: flex;
flex-direction: column;
gap: 14px;
}
.opac-detail-content > * {
margin: 0;
}
.opac-detail-title {
font-size: 26px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
margin: 0 0 4px !important;
}
.opac-detail-tagline {
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.opac-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* M9 : sur mobile etroit, .opac-info-grid (single atelier 2x2 infos)
passe en 1 colonne pour eviter l'ecrasement des cards Tarif/Public. */
@media (max-width: 600px) {
.opac-info-grid { grid-template-columns: 1fr; }
}
/* ========================================================================
M9 : Mobile fixes (header CTA, burger menu, overlay nav)
======================================================================== */
@media (max-width: 768px) {
/* Cache le dropdown CTA "S'inscrire" du header en mobile.
Les liens d'inscription restent accessibles via le menu burger
(Ateliers a l'annee + Ateliers ephemeres pointent vers les archives
d'ou on peut s'inscrire). */
.opac-header-wrapper .opac-cta {
display: none !important;
}
}
/* Burger menu (bouton ouvrir) - couleur et taille match design.
!important sur display pour vaincre la specificite WP responsive.
Taille 44x44 conforme WCAG 2.5.5 (touch target minimum). */
.wp-block-navigation__responsive-container-open {
color: var(--opac-ink) !important;
padding: 8px !important;
width: 44px !important;
height: 44px !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Force le burger visible en mobile (WP par defaut a un @media min-width:600px
qui le cache, donc on respecte ce breakpoint en miroir : visible sous 768px). */
@media (max-width: 768px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
}
}
.wp-block-navigation__responsive-container-open:hover {
color: var(--opac-accent) !important;
}
/* Overlay menu ouvert : fond crème, items espacés en colonne, font display */
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--opac-bg) !important;
color: var(--opac-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 8px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 22px;
font-weight: 400;
color: var(--opac-ink) !important;
padding: 12px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
color: var(--opac-accent) !important;
}
.wp-block-navigation__responsive-container-close {
color: var(--opac-ink) !important;
width: 40px;
height: 40px;
padding: 6px !important;
}
/* Header fixed : visible a tout moment du scroll. Contrairement a sticky,
fixed est rendu sur un layer GPU compositor isole = pas de tremblement
subpixel au scroll (bug notoire sticky sur Safari iOS / Chromium mobile).
Compensation : padding-top sur main calcule en JS via --opac-header-h
pour eviter que le contenu remonte sous le header. */
.wp-site-blocks > header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--opac-card);
}
/* Compensation hauteur header : appliquee sur le main via var CSS set
par JS initStickyHeader(). Fallback 80px = hauteur typique (16+48+16). */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group > main {
padding-top: var(--opac-header-h, 88px);
/* annule le block-gap racine WP (24px) : sinon bande de fond visible
entre le header fixed et le hero */
margin-block-start: 0;
}
.opac-header-wrapper {
border-bottom: 0 !important;
}
/* Lisse le texte au scroll (anti-flou subpixel) */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Respect preference utilisateur "motion reduced" (WCAG 2.3.3 AAA + UX).
Coupe toutes les animations/transitions au minimum (1ms) pour les
utilisateurs sensibles aux mouvements. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Card footer atelier sur mobile : eviter overflow "Detail →" hors carte.
Reduit le padding lateral via container query (sur petits viewports). */
@media (max-width: 600px) {
.opac-ateliers-grid .opac-card-footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
.opac-ateliers-grid .opac-card-price,
.opac-ateliers-grid .opac-card-link {
font-size: 12px;
}
}
.opac-info-grid > * {
margin: 0;
}
.opac-info-item {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--opac-border);
}
.opac-info-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 4px;
}
.opac-info-value {
font-size: 14px;
font-weight: 500;
margin: 0;
}
.opac-creneaux {
padding: 14px;
border-radius: 8px;
border: 1px solid var(--opac-border);
}
.opac-creneaux > * {
margin: 0;
}
.opac-creneaux-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 8px;
}
.opac-creneaux-list {
font-size: 13px;
line-height: 1.8;
color: var(--opac-ink);
margin: 0;
/* Preserve les line breaks du meta texte multilignes saisi par
Katell (1 creneau par ligne). */
white-space: pre-line;
}
/* Liste structuree des creneaux (palier 2) */
.opac-creneaux-items {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.6;
color: var(--opac-ink);
}
.opac-creneaux-items li {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: baseline;
padding: 4px 0;
border-bottom: 1px solid var(--opac-border);
}
.opac-creneaux-items li:last-child {
border-bottom: 0;
}
.opac-creneau-tarif {
margin-left: auto;
font-weight: 600;
}
.opac-creneau-note {
flex-basis: 100%;
font-size: 12px;
color: var(--opac-muted, #6b6b6b);
}
.opac-creneau-state {
font-size: 12px;
font-weight: 600;
}
.opac-creneau-state.is-full {
color: #c0583a;
}
.opac-creneau-state.is-few {
color: #9a6b1e;
}
.opac-notice-adhesion {
font-size: 12px;
font-style: italic;
line-height: 1.5;
margin: 0;
}
.opac-detail-notice {
background: var(--opac-teal-light);
color: var(--opac-teal);
padding: 14px;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
/* Si le meta opac_notice est vide, le binding renvoie '' et la reste
:empty. On la cache pour ne pas afficher un encart vide. */
.opac-detail-notice:empty {
display: none;
}
/* Bouton secondary : outline accent pour fond clair (vs ghost pour fond dark) */
.wp-block-button.is-style-opac-secondary > .wp-block-button__link {
background-color: transparent;
color: var(--opac-ink);
border: 1px solid var(--opac-border);
transition: border-color var(--opac-transition), background var(--opac-transition);
}
.wp-block-button.is-style-opac-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-opac-secondary > .wp-block-button__link:focus-visible {
border-color: var(--opac-accent);
background-color: var(--opac-bg);
}
/* Section gallery : vignettes (cf. .opac-gallery-carousel / .opac-gallery-track plus bas) */
.opac-gallery-item {
height: 100px !important;
border-radius: 8px;
}
/* Section animateur (card flex) */
.opac-animateur {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
border-radius: var(--opac-radius);
border: 1px solid var(--opac-border);
max-width: 420px;
}
.opac-animateur > * {
margin: 0;
}
.opac-animateur-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--opac-accent-light);
color: var(--opac-accent);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', Georgia, serif;
font-size: 16px;
font-weight: 500;
flex-shrink: 0;
}
.opac-animateur-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.opac-animateur-name {
font-weight: 500;
font-size: 14px;
margin: 0;
}
.opac-animateur-role {
font-size: 12px;
margin: 0;
}
/* ----------------------------------------------------------------
* Image frames (règle GLOBALE pour toutes les zones d'image)
*
* Les photos uploadées par l'équipe administrative depuis /wp-admin
* sont de tailles et ratios variables (téléphone, scans, captures).
* Sans cadrage strict, chaque card aurait une hauteur différente
* et l'alignement des grilles casserait. Cette règle force un
* cadrage uniforme via object-fit: cover.
*
* Pour toute NOUVELLE zone d'image dans les modules suivants
* (atelier detail, galerie, stages, etc.) : ajouter la classe ici
* avec sa height fixe. Toujours height strict, jamais min-height.
* ---------------------------------------------------------------- */
/*
* Frame : juste le cadrage (dimensions + clip). Pas de background ici
* pour ne pas écraser les couleurs preset WP ni les inline styles des
* éléments fill internes. !important pour battre les règles WP par
* défaut sur is-layout-flow > * qui ajoutent margin-block-start.
*/
.opac-img-frame,
.opac-card-cover,
.opac-gallery-item {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: relative;
flex-shrink: 0;
display: block !important;
box-sizing: border-box;
}
.opac-card-cover { height: 200px !important; }
.opac-gallery-item { height: 100px !important; border-radius: 8px; }
/*
* Fill : l'élément qui remplit le frame. Soit un div coloré (placeholder
* en attendant la photo), soit une figure.wp-block-image avec l'image.
* Width/height 100% en !important pour battre le margin-block-start
* de WP qui s'applique à tous les .is-layout-flow > *.
*/
.opac-img-frame > *,
.opac-card-cover > *,
.opac-gallery-item > *,
.opac-img-frame .wp-block-image,
.opac-card-cover .wp-block-image,
.opac-gallery-item .wp-block-image {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box !important;
max-width: none !important;
flex: 1;
inset: 0;
}
/* Image : object-fit pour ratios variables */
.opac-img-frame img,
.opac-card-cover img,
.opac-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
max-width: none !important;
}
/* Fill placeholder */
.opac-card-cover-fill {
width: 100% !important;
height: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Annule le padding par defaut que WP applique a tous les wp-block-group
* .has-background via la regle :
* :where(.wp-block-group.has-background){padding:1.25em 2.375em}
* Cette regle WP padde la card de ~20px haut/bas et ~38px gauche/droite,
* ce qui empeche le cover frame d'atteindre les bords du card. On annule
* UNIQUEMENT sur les atelier cards (.opac-ateliers-grid .opac-card) pour
* que le cover puisse aller edge-to-edge. Les autres usages de .opac-card
* (notamment les actu cards dans wp:columns) gardent leur padding inline
* propre (20px sur les actu cards) car elles n'ont pas de cover frame
* et ont besoin de l'espace interne pour leur texte.
*/
.opac-ateliers-grid .opac-card {
padding: 0 !important;
}
/* Empeche le footer (tarif + lien Details) de wrap sur 2 lignes quand
le texte du lien est plus long (ex: "Liste d'attente" sur la card
Mosaique). Scope explicite a la grille atelier vu que .opac-card-footer
est specifique aux cards atelier (les actu et stage cards n'ont pas
cet element). */
.opac-ateliers-grid .opac-card-footer .opac-card-price,
.opac-ateliers-grid .opac-card-footer .opac-card-link {
white-space: nowrap;
flex-shrink: 0;
}
/*
* Grid responsive des ateliers. Avec Query Loop (M2), le DOM rendu
* intercale un
entre la grid et chaque
* .opac-card. Donc les selecteurs ciblent les descendants directs
* ou indirects, pas des "direct child" stricts.
*/
.opac-ateliers-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 0;
margin: 0;
align-items: stretch;
list-style: none;
}
/* Les media queries viennent apres la base : meme specificite + source order
plus tardif = elles gagnent (plus besoin de !important). */
@media (max-width: 880px) {
.opac-ateliers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.opac-ateliers-grid { grid-template-columns: 1fr; }
}
/* Reset des marges WP is-layout-flow sur tous les enfants de la grille
(li.wp-block-post auto-genere par WP, ou .opac-card en markup statique
ante-M2). Annule margin-block-start: 24px de WP qui creait des
asymetries entre la 1ere card et les suivantes. */
.opac-ateliers-grid > * {
margin: 0;
}
/* Le wrapper li.wp-block-post auto-genere doit s'etirer en hauteur de
sa cellule grid (sinon les cards plus courtes laissent un trou) et
se comporter en flex column pour pousser le footer en bas. */
.opac-ateliers-grid > li,
.opac-ateliers-grid > .wp-block-post {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
/* Card atelier : flex column interne pour aligner les footers en bas */
.opac-ateliers-grid .opac-card {
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
}
/* Le body (group entre cover et footer) etire pour pousser le footer en bas */
.opac-ateliers-grid .opac-card > .wp-block-group:not(.opac-card-cover):not(.opac-card-footer) {
flex: 1 1 auto;
}
/* ========================================================================
M5 : Agenda (archive groupee par mois + tabs categorie + single event)
======================================================================== */
/* Tabs categories : reutilise les styles .opac-stage-tabs (M4).
Alias visuel : on duplique le wrapper, .opac-tab/.is-active sont partages. */
.opac-event-tabs {
gap: 8px;
padding: 0 32px 24px;
max-width: 1080px;
margin: 0 auto;
}
.opac-event-tabs > * {
margin: 0;
}
/* Conteneur agenda */
/* Conteneur de la liste agenda : volontairement SANS max-width / margin / padding.
Le groupe parent (section alignwide, constrained contentSize:1080px, opac-section-padded)
centre, limite a 1080px et pose deja les 32px de gouttiere, exactement comme pour
.opac-stages-list (ephemeres). Une gouttiere ici doublait le padding et rendait les
cards agenda ~64px plus etroites que les ephemeres. Les .opac-event remplissent donc
la meme largeur que les .opac-stage-card. */
/* Empty state */
.opac-empty {
text-align: center;
color: var(--opac-muted);
font-style: italic;
padding: 40px 0;
}
/* Separateur mois */
.opac-month-label {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 18px;
font-weight: 400;
color: var(--opac-muted);
margin: 32px 0 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--opac-border);
}
.opac-month-label:first-child {
margin-top: 0;
}
/* Card event : entierement cliquable */
.opac-event {
/* Meme gabarit que .opac-stage-card (ephemeres) : grid date | corps | (action vide
ici, l'agenda n'a pas de bouton). Le pave date prend la colonne 100px exactement,
comme l'ephemere. min-height : .opac-stage-card n'a pas de hauteur explicite (elle
vient du contenu bouton+tags), donc on force ici une hauteur plancher equivalente
pour que les deux cards soient a la meme hauteur. A ajuster au pixel au rendu. */
display: grid;
grid-template-columns: 100px 1fr auto;
grid-template-rows: 1fr;
gap: 0;
align-items: stretch;
min-height: 124px;
background: var(--opac-card);
border: 1px solid var(--opac-border);
border-radius: var(--opac-radius);
overflow: hidden;
margin-bottom: 12px;
text-decoration: none;
color: inherit;
transition: transform var(--opac-transition), box-shadow var(--opac-transition);
}
.opac-event:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
text-decoration: none;
}
/* Disposition identique aux ephemeres, DESKTOP ET MOBILE : titre en haut,
description au milieu, badge categorie en bas. On reordonne .opac-event-top
(le WRAPPER du badge), pas .opac-event-cat directement, car le badge n'est
pas enfant flex direct du body. */
.opac-event-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 16px 20px;
min-width: 0;
}
.opac-event-name { order: 0; }
.opac-event-desc { order: 1; }
.opac-event-top { order: 2; }
/* Mobile uniquement : hauteur FIXE 124px (toutes les lignes agenda identiques),
overflow:hidden coupe le surplus eventuel. La desc est deja clampee 2 lignes. */
@media (max-width: 600px) {
.opac-event {
height: 124px;
overflow: hidden;
}
}
.opac-event-top {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 8px;
}
/* Coherence mobile : aucun badge/tag sur les cards. PLACE APRES la base
.opac-event-top ci-dessus -> gagne par source-order (meme specificite),
sans !important. Le badge categorie reste visible sur la fiche event. */
@media (max-width: 600px) {
.opac-event-top {
display: none;
}
}
.opac-event-date {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--opac-muted);
font-weight: 500;
}
.opac-event-cat {
font-size: 11px;
padding: 3px 10px;
border-radius: 12px;
font-weight: 500;
background: var(--opac-bg);
color: var(--opac-muted);
}
.opac-event-name {
font-size: 15px;
font-weight: 500;
color: var(--opac-ink);
margin: 0 0 4px;
line-height: 1.3;
}
.opac-event-desc {
font-size: 12px;
color: var(--opac-muted);
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(12px * 1.5 * 2);
}
/* Couleurs par categorie : badge (pastille) */
.opac-cat-sortie .opac-event-cat {
background: var(--wp--preset--color--teal-light);
color: var(--wp--preset--color--teal);
}
.opac-cat-expo .opac-event-cat {
background: var(--wp--preset--color--mauve-light);
color: var(--wp--preset--color--mauve);
}
.opac-cat-association .opac-event-cat {
background: var(--wp--preset--color--accent-light);
color: var(--wp--preset--color--accent);
}
.opac-cat-ephemere .opac-event-cat {
background: var(--wp--preset--color--gold-light);
color: var(--wp--preset--color--gold);
}
.opac-cat-partenaire .opac-event-cat {
background: var(--opac-bg);
color: var(--opac-muted);
}
/* ----------------------------------------------------------------
* Agenda : pave date colore + photo de fond degradee. Meme langage
* visuel que les cards ephemeres (.opac-stage-date / .opac-stage-bg),
* la couleur du pave suit la categorie.
* ---------------------------------------------------------------- */
.opac-event-date-box {
/* Largeur = colonne grid 100px de .opac-event (comme .opac-stage-date dans
sa colonne 100px). Pas de width explicite : evite que width:100px + padding
en content-box donne 124px. Stretch du grid -> border-box = 100px pile. */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* date en haut du pave, comme .opac-stage-date (flux normal) */
padding: 16px 12px;
color: #fff;
line-height: 1.1;
}
.opac-event-day {
font-size: 22px;
font-weight: 500;
}
.opac-event-mon {
font-size: 11px;
letter-spacing: 0.04em;
}
.opac-cat-sortie .opac-event-date-box { background: var(--wp--preset--color--teal); }
.opac-cat-expo .opac-event-date-box { background: var(--wp--preset--color--mauve); }
.opac-cat-association .opac-event-date-box { background: var(--wp--preset--color--accent); }
.opac-cat-ephemere .opac-event-date-box { background: var(--wp--preset--color--gold); color: #4a3a10; }
.opac-cat-partenaire .opac-event-date-box { background: var(--opac-muted); }
/* Photo de fond degradee (version claire, comme l'archive ephemeres) */
.opac-event { position: relative; overflow: hidden; }
/* Reset marge UA des enfants (sinon le a margin:1em 40px par defaut et
la photo flotte avec du blanc autour). Calque .opac-stage-card > * (l.~889). */
.opac-event > * { margin: 0; }
.opac-event > .opac-event-bg { position: absolute; inset: 0; margin: 0; z-index: 0; pointer-events: none; }
.opac-event > .opac-event-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opac-event > .opac-event-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.86) 42%, rgba(255,255,255,0.45) 72%, rgba(255,255,255,0) 100%);
}
.opac-event > .opac-event-date-box,
.opac-event > .opac-event-body { position: relative; z-index: 1; }
.opac-event:has(> .opac-event-bg) .opac-event-name { text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
/* Mobile : sur les cards a photo de fond (ephemeres + agenda), le texte deborde
souvent sur la partie transparente du degrade -> peu lisible. On rend l'overlay
nettement plus opaque sous 600px (min ~0.72 au lieu de 0.45/0.42), la photo
reste visible mais attenuee cote texte. Place apres les 3 overlays de base
pour gagner la cascade (meme specificite, source order plus tardif). */
@media (max-width: 600px) {
.opac-stage-card > .opac-stage-bg::after,
.opac-event > .opac-event-bg::after {
background: linear-gradient(to right, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.72) 100%);
}
.opac-eph-section .opac-stage-card > .opac-stage-bg::after {
background: linear-gradient(to right, rgba(31,29,27,0.97) 0%, rgba(31,29,27,0.9) 50%, rgba(31,29,27,0.72) 100%);
}
}
/* Single event : layout 2-col .opac-detail (comme single-opac_stage), avec un
cover "flyer" portrait scope a l'event via le modifier --event. Atelier et
ephemere gardent leur cover paysage. Ratio/colonnes a finaliser au rendu. */
.opac-detail--event {
grid-template-columns: 1fr 1.2fr !important;
align-items: start;
}
.opac-detail--event .opac-detail-photo {
aspect-ratio: 4 / 5;
height: auto !important;
}
/* L'image d'un event est souvent une affiche/flyer (texte bord a bord) : contain
pour l'afficher entiere, pas de recadrage. Bat .opac-card-cover img
{ object-fit: cover !important } (l.~1514) par specificite. Atelier/ephemere
gardent cover. */
.opac-detail--event .opac-card-cover img {
object-fit: contain !important;
}
/* Le placeholder du cover est en accent-light (rose) et deborderait autour de
l'affiche contenue. Transparent -> les bandes prennent le fond de page (creme)
et disparaissent ; l'affiche flotte. Event sans image -> cover creme vide (ok). */
.opac-detail--event .opac-card-cover-fill {
background: transparent !important;
}
.opac-detail--event .opac-detail-content {
align-self: center;
}
/* Mobile : fiche event en 1 colonne. Mon .opac-detail--event force le 2-col meme
sous 760px (le !important bat la regle responsive du theme), d'ou une photo
coincee dans une colonne etroite (timbre-poste). On repasse en 1 colonne, on
enleve le cadre 4/5, et on sort l'image du positionnement absolu de l'img-frame
pour qu'elle prenne sa hauteur naturelle pleine largeur (sinon le conteneur
s'effondre, enfants absolus = 0 de hauteur). Le placeholder creme est masque. */
@media (max-width: 768px) {
.opac-detail--event {
grid-template-columns: 1fr !important;
}
.opac-detail--event .opac-detail-photo {
aspect-ratio: auto;
height: auto !important;
}
.opac-detail--event .opac-detail-photo .wp-block-post-featured-image,
.opac-detail--event .opac-detail-photo figure.wp-block-image {
position: static !important;
}
.opac-detail--event .opac-card-cover img {
height: auto !important;
object-fit: unset !important;
}
.opac-detail--event .opac-card-cover-fill {
display: none !important;
}
}
/* ========================================================================
M6 : Association (equipes + infos pratiques) + Contact (form + sidebar)
======================================================================== */
/* Section title generique reutilise sur Association */
.opac-section-title {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 22px;
font-weight: 400;
color: var(--opac-ink);
margin: 0 0 20px;
}
/* Team grids */
.opac-team-section {
margin: 0 auto 40px;
max-width: 1080px;
padding: 0 32px;
}
/* Grille equipe : cartes compactes a largeur fixe, en flex avec retour a la
ligne et CHAQUE rangee centree, y compris la derniere meme incomplete (ce
que auto-fit ne savait pas faire : il ne recentre que les colonnes vides sur
toute la grille, pas une derniere rangee partielle). Le nombre par rangee
decoule de la largeur dispo (~5 en pleine largeur, moins sur mobile), et la
grille s'adapte seule a l'ajout/suppression de membres. */
.opac-team-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.opac-team-grid > .opac-person {
box-sizing: border-box;
flex: 0 0 190px;
max-width: 100%;
}
/* Person card */
.opac-person {
background: var(--opac-card);
border: 1px solid var(--opac-border);
border-radius: 10px;
padding: 18px 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.opac-person-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 18px;
font-weight: 500;
color: var(--opac-card);
line-height: 1;
}
/* Rotation 8 couleurs pour avatars (deterministe par hash du nom) */
.opac-person-color-1 { background: var(--wp--preset--color--accent); }
.opac-person-color-2 { background: var(--wp--preset--color--teal); }
.opac-person-color-3 { background: var(--wp--preset--color--mauve); }
.opac-person-color-4 { background: var(--wp--preset--color--gold); }
.opac-person-color-5 { background: var(--wp--preset--color--ink); }
.opac-person-color-6 { background: #5e7a8a; }
.opac-person-color-7 { background: #8a7a5e; }
.opac-person-color-8 { background: var(--wp--preset--color--amber); }
.opac-person-name {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 14px;
color: var(--opac-ink);
font-weight: 500;
}
.opac-person-role {
font-size: 12px;
color: var(--opac-muted);
}
/* Infos pratiques grid 2x2 */
.opac-infos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.opac-infos-grid {
grid-template-columns: 1fr;
}
}
.opac-info-card {
background: var(--opac-card);
border: 1px solid var(--opac-border);
border-radius: 10px;
padding: 18px;
}
.opac-info-card h3 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--opac-muted);
margin: 0 0 8px;
font-weight: 500;
font-family: var(--wp--preset--font-family--body, sans-serif);
}
.opac-info-card p {
font-size: 13px;
line-height: 1.6;
margin: 0;
color: var(--opac-ink);
}
/* Partenaire Plerin */
.opac-partenaire {
display: flex;
align-items: center;
gap: 16px;
background: var(--wp--preset--color--teal-light);
border-radius: 10px;
padding: 18px;
margin-top: 8px;
/* Toute la card est un lien () vers ville-plerin.fr : on neutralise le
style lien par defaut, les enfants gardent leurs couleurs propres. */
color: inherit;
text-decoration: none;
}
.opac-part-logo {
width: 56px;
height: 56px;
background: var(--opac-card);
color: var(--wp--preset--color--teal);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 10px;
font-weight: 600;
line-height: 1.1;
flex-shrink: 0;
}
/* Variante logo image (option opac_org_partenaire_logo_url) : meme principe
qu'une affiche/flyer d'event (cf. .opac-detail--event .opac-card-cover-fill) :
object-fit contain pour l'afficher entier sans recadrage, et fond transparent
pour effacer le cadre creme (--opac-card) de .opac-part-logo -> le logo flotte
directement sur la card teal-light, sans cadre. Le placeholder texte garde
son cadre creme (variante .opac-part-logo seule). */
.opac-part-logo--img {
background: transparent !important;
}
.opac-part-logo--img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.opac-part-name {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 15px;
color: var(--opac-ink);
}
/* Card partenaire cliquable : on souligne le nom au survol/focus pour signaler
l'interactivite (le reset du style lien est sur .opac-partenaire ci-dessus). */
.opac-partenaire:hover .opac-part-name,
.opac-partenaire:focus-visible .opac-part-name {
text-decoration: underline;
}
.opac-part-sub {
font-size: 12px;
color: var(--opac-muted);
margin-top: 2px;
}
.opac-statuts-link a {
font-size: 13px;
}
/* Contact grid 2-col */
.opac-contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
max-width: 1080px;
margin: 0 auto;
padding: 0 32px 40px;
}
/* La grille est un conteneur WP is-layout-constrained : WP ajoute une marge
block-gap en haut du 2e enfant (la sidebar), qui la pousse plus bas que le
formulaire -> colonnes pas alignees en haut. On reinitialise pour que les deux
colonnes demarrent pile au meme niveau (et finissent pareil via align stretch). */
.opac-contact-grid > * {
margin-block: 0;
}
@media (max-width: 880px) {
.opac-contact-grid {
grid-template-columns: 1fr;
}
}
.opac-contact-form-col {
min-width: 0;
display: flex;
flex-direction: column;
}
.opac-form-card {
background: var(--opac-card);
border: 1px solid var(--opac-border);
border-radius: 10px;
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 14px;
/* Remplit la colonne gauche quand le formulaire est plus court que la
sidebar (4 cards + carte) : les bas des deux colonnes s'alignent. */
flex: 1 1 auto;
}
.opac-form-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.opac-form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.opac-form-row label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--opac-muted);
font-weight: 500;
}
.opac-form-input {
padding: 10px 12px;
border: 1px solid var(--opac-border);
border-radius: 6px;
background: var(--opac-card);
font: inherit;
color: var(--opac-ink);
width: 100%;
box-sizing: border-box;
}
.opac-form-input:focus {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
.opac-form-textarea {
min-height: 120px;
resize: vertical;
font-family: inherit;
}
.opac-form-btn {
align-self: flex-start;
background: var(--wp--preset--color--accent);
color: var(--opac-card);
border: none;
border-radius: 6px;
padding: 10px 22px;
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--opac-transition);
}
.opac-form-btn:hover {
background: var(--opac-ink);
}
.opac-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.opac-form-notice {
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
}
.opac-form-notice.is-success {
background: var(--wp--preset--color--teal-light);
color: var(--wp--preset--color--teal);
border: 1px solid var(--wp--preset--color--teal);
}
.opac-form-notice.is-error {
background: var(--wp--preset--color--accent-light);
color: var(--wp--preset--color--accent);
border: 1px solid var(--wp--preset--color--accent);
}
.opac-form-notice.is-info {
background: #eef3f6;
color: #2c3e50;
border: 1px solid #cdd9e0;
}
.opac-adhesion-info {
margin: 6px 0 0;
font-size: 13px;
font-style: italic;
color: #5b6670;
}
.opac-contact-sidebar {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: flex-start;
}
/* La sidebar est un conteneur WP is-layout-flow : WP injecte des marges
"block-gap" entre les cards, qui s'ajoutent au gap:12px et gonflent
l'espacement (cards etalees vs formulaire serre, 1re card poussee plus bas).
On reinitialise ces marges pour ne garder que le gap ; la carte OSM (flex:1)
remplit le bas. Meme piege de marges WP que .opac-event-bg / .opac-stage-card. */
.opac-contact-sidebar > * {
margin-block: 0;
}
.opac-osm-map {
width: 100%;
flex: 1 1 auto;
min-height: 200px;
border: 1px solid var(--opac-border);
border-radius: 10px;
display: block;
}
/* ========================================================================
M7 : Inscriptions (form public + page d'inscription)
======================================================================== */
.opac-inscription-form {
/* Heritage de .opac-form-card (M6) */
}
/* Encart contexte pre-rempli ("Inscription pour : Ceramique - 335 €") */
.opac-form-context {
background: var(--wp--preset--color--accent-light);
border: 1px solid var(--wp--preset--color--accent);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 8px;
}
.opac-form-context-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--wp--preset--color--accent);
font-weight: 500;
margin-bottom: 4px;
}
.opac-form-context-name {
font-family: var(--wp--preset--font-family--display, Georgia, serif);
font-size: 18px;
color: var(--opac-ink);
line-height: 1.3;
}
.opac-form-context-tarif {
font-size: 13px;
color: var(--opac-muted);
margin-top: 6px;
}
/* Radios type adhesion en ligne */
.opac-form-radios {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.opac-form-radio {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--opac-ink);
cursor: pointer;
padding: 6px 12px;
border: 1px solid var(--opac-border);
border-radius: 6px;
background: var(--opac-card);
}
.opac-form-radio input[type="radio"] {
margin: 0;
}
/* RGPD checkbox */
.opac-form-rgpd {
background: var(--opac-bg);
border: 1px solid var(--opac-border);
border-radius: 8px;
padding: 12px 14px;
}
.opac-form-rgpd label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--opac-muted);
line-height: 1.5;
cursor: pointer;
}
.opac-form-rgpd input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
/* ============================================================
* RGPD : lien politique (case consentement) + mentions d'info
* Bloc ADDITIF (formulaires inscription + contact).
* ============================================================ */
/* Lien "En savoir plus sur vos donnees" sous la case de consentement. */
.opac-form-privacy-link {
display: inline-block;
margin: 8px 0 0 28px;
font-size: 12px;
color: var(--wp--preset--color--accent);
}
/* Mention d'information sous le bouton du formulaire de contact. */
.opac-form-legal {
margin: 4px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--opac-muted);
}
.opac-form-legal a {
color: var(--wp--preset--color--accent);
}
/* Precision "representant legal" sous la case mineur. */
.opac-form-hint {
margin: 8px 0 0 28px;
font-size: 11px;
line-height: 1.45;
color: var(--opac-muted);
}
/* Heritage : .opac-detail-actions devient un container flex pour
accommoder inscription-button + bouton "Poser une question" cote a cote */
.opac-detail-actions {
margin-top: 4px;
align-items: center;
}
/* ============================================================
* feature/cosmetic-photos-links : photos + reseaux sociaux
* Bloc ADDITIF. Ne modifie aucune regle existante.
* ============================================================ */
/*
* Featured image superposee au fill colore. Le fill (.opac-card-cover-fill)
* reste TOUJOURS dans le DOM en dessous (fallback couleur valide). Quand le
* post n'a pas de thumbnail, wp:post-featured-image rend une chaine vide :
* seul le fill colore subsiste, donc rendu identique a avant. Quand une photo
* existe, la figure se superpose en absolute et le cadrage object-fit:cover
* (deja defini sur .opac-card-cover img) prend le relais.
*/
.opac-card-cover .wp-block-post-featured-image,
.opac-card-cover figure.wp-block-image,
.opac-detail-photo .wp-block-post-featured-image,
.opac-detail-photo figure.wp-block-image {
position: absolute;
inset: 0;
z-index: 1;
}
/* Reseaux sociaux (icones officielles, rendu via le bloc opac/coord-block) */
.opac-social-links {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.opac-social-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--opac-muted);
text-decoration: none;
transition: color var(--opac-transition);
}
.opac-social-link:hover,
.opac-social-link:focus-visible {
color: var(--opac-accent);
}
.opac-social-icon {
fill: currentColor;
flex-shrink: 0;
}
.opac-footer-social {
margin-top: 10px;
}
/* Footer : icone seule (le label reste accessible aux lecteurs d'ecran) */
.opac-footer-social .opac-social-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/*
* Hero converti en wp:cover : on neutralise la min-height par defaut du
* bloc cover pour garder la hauteur pilotee par le contenu + le padding
* .opac-hero (rendu identique a la version groupe d'origine, avec image).
*/
.opac-hero.wp-block-cover {
min-height: 0;
}
/* ================================================================
* Contraste WCAG AA (audit 2026-05) : on assombrit UNIQUEMENT les
* usages texte / bouton / badge mesures sous 4.5:1 par axe-core.
* Le token de marque --opac-accent (#c0583a) reste inchange pour
* les aplats decoratifs (stripes, sections), seul le contenu textuel
* passe en terracotta fonce.
* ================================================================ */
:root { --opac-accent-text: #a64a30; }
/* Boutons : blanc sur terracotta (4.46) -> terracotta fonce (5.1:1) */
.opac-cta-btn { background: var(--opac-accent-text); }
.opac-cta-btn:hover,
.opac-cta-btn:focus-visible { background: #8f3f29; }
.wp-block-button.is-style-opac-primary > .wp-block-button__link { background-color: var(--opac-accent-text); }
.wp-block-button.is-style-opac-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-opac-primary > .wp-block-button__link:focus-visible { background-color: #8f3f29; }
.opac-form-btn { background: var(--opac-accent-text); }
/* Badge date des stages (chiffre + mois blancs) : fond terracotta -> fonce */
/* (Ancien override nth-child(odd) terracotta fonce retire : la couleur du pave
est desormais geree par saison via .opac-period-* (cf. plus haut). Le laisser
battrait les regles par saison sur une card sur deux.) */
/* Liens / textes accent sur fond clair (4.24) -> terracotta fonce */
.opac-section-link a,
.opac-card-link,
a.opac-card-link,
.opac-breadcrumb [aria-current="page"] { color: var(--opac-accent-text); }
/* Tags & notices colores sous le seuil */
.opac-tag-ok,
.opac-detail-notice { color: #236358; } /* teal sur teal-clair 4.38 */
.opac-tag-full { color: #9a4429; } /* accent sur accent-clair 3.79 */
.opac-cat-sortie .opac-event-cat { color: #236358; } /* teal sur teal-clair 4.38 */
.opac-cat-expo .opac-event-cat { color: #5a4d8a; } /* mauve sur mauve-clair 3.86 */
.opac-cat-association .opac-event-cat { color: #9a4429; } /* accent sur accent-clair 3.79 */
.opac-cat-ephemere .opac-event-cat { color: #6e4f15; } /* or sur or-clair 2.31 */
/* Bande CTA teal : texte secondaire (3.64) -> blanc plein (4.56:1) */
.opac-cta-band-desc { color: #ffffff; }
/* ================================================================
* Galerie realisations : vignettes cliquables (cap 4 + "Voir tout")
* et lightbox maison. Les vignettes reutilisent le cadre
* .opac-gallery-item (opac-img-frame) ; on neutralise juste le
* style bouton par defaut.
* ================================================================ */
button.opac-gallery-item {
border: 0;
padding: 0 !important;
background: none;
cursor: pointer;
}
/* Carrousel : track scrollable horizontal (scroll-snap), swipe natif.
Hauteur de section constante quel que soit le nombre de photos. */
.opac-gallery-carousel { position: relative; }
.opac-gallery-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.opac-gallery-track::-webkit-scrollbar { display: none; }
/* 4 vignettes visibles desktop (3 gaps de 12px), 2 tablette, 1 mobile.
width:auto neutralise le width:100% du systeme opac-img-frame pour que
le flex-basis pilote la largeur de la cellule. */
.opac-gallery-track > .opac-gallery-item {
flex: 0 0 calc((100% - 36px) / 4);
width: auto !important;
min-width: 0;
scroll-snap-align: start;
}
@media (max-width: 880px) {
.opac-gallery-track > .opac-gallery-item { flex-basis: calc((100% - 12px) / 2); }
}
@media (max-width: 600px) {
.opac-gallery-track > .opac-gallery-item { flex-basis: 100%; }
}
/* Fleches : masquees ([hidden]) aux extremites ou si tout tient sans scroll. */
.opac-gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--opac-border);
background: var(--opac-card);
color: var(--opac-ink);
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
transition: color var(--opac-transition), border-color var(--opac-transition);
}
.opac-gallery-nav[hidden] { display: none; }
.opac-gallery-prev { left: -8px; }
.opac-gallery-next { right: -8px; }
.opac-gallery-nav:hover,
.opac-gallery-nav:focus-visible {
border-color: var(--opac-accent-text, #a64a30);
color: var(--opac-accent-text, #a64a30);
}
/* Lightbox (overlay plein ecran, construit par opac.js) */
.opac-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(20, 18, 16, 0.9);
}
.opac-lightbox.is-open { display: flex; }
/* Verrou de scroll du body : pose/retire par opac.js (open/close de la lightbox)
pour figer le fond pendant que l'overlay est ouvert. */
.opac-no-scroll {
overflow: hidden;
}
.opac-lightbox-fig {
margin: 0;
max-width: 92vw;
max-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.opac-lightbox-fig img {
max-width: 92vw;
max-height: 80vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.opac-lightbox-caption {
color: #fff;
font-size: 13px;
line-height: 1.4;
text-align: center;
margin: 0;
max-width: 600px;
}
.opac-lightbox-btn {
position: absolute;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 0;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.opac-lightbox-btn:hover,
.opac-lightbox-btn:focus-visible { background: rgba(255, 255, 255, 0.28); }
.opac-lightbox-close { top: 16px; right: 16px; }
.opac-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.opac-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
.opac-lightbox-prev { left: 8px; }
.opac-lightbox-next { right: 8px; }
}