) : il fonctionne sans JavaScript, le
navigateur l'annonce aux lecteurs d'écran, et Ctrl+F ouvre de lui-même la
section qui contient le texte cherché. */
.gap-changelog-versions {
display: flex;
flex-direction: column;
gap: .4rem;
}
.gap-changelog-version {
background: #fff;
border: 1px solid #E6E4E0;
border-radius: .4rem;
/* Sans quoi le contenu d'une version ouverte déborderait des coins. */
overflow: hidden;
}
.gap-changelog-version[open] {
border-color: #D9D5CF;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.gap-changelog-version-tete {
display: flex;
align-items: baseline;
gap: .6rem;
padding: .7rem .9rem;
cursor: pointer;
list-style: none; /* Safari garde son triangle sans ceci */
user-select: none;
transition: background var(--transition);
}
.gap-changelog-version-tete::-webkit-details-marker { display: none; }
.gap-changelog-version-tete:hover { background: #F5F3F0; }
/* Le focus clavier doit se voir : c'est la seule commande de cet écran. */
.gap-changelog-version-tete:focus-visible {
outline: 2px solid var(--color-primary, #B3261E);
outline-offset: -2px;
}
/* Un chevron dessiné en CSS plutôt qu'un caractère : il tourne à
l'ouverture, et ne dépend d'aucune police. */
.gap-changelog-version-tete::before {
content: '';
flex: none;
width: .42rem; height: .42rem;
margin-right: .1rem;
border-right: 2px solid #9A958D;
border-bottom: 2px solid #9A958D;
transform: rotate(-45deg);
transition: transform var(--transition);
}
.gap-changelog-version[open] > .gap-changelog-version-tete::before {
transform: rotate(45deg);
}
.gap-changelog-version-num {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #191C21;
}
.gap-changelog-version-date { color: #6B7280; font-size: .82rem; }
/* Le nombre de chantiers, poussé à droite : il dit ce qu'on trouvera en
ouvrant, au lieu d'obliger à ouvrir pour le savoir. */
.gap-changelog-version-n {
margin-left: auto;
padding: .05rem .45rem;
background: #F5F3F0;
border-radius: 1rem;
font-size: .72rem;
font-variant-numeric: tabular-nums;
color: #6B7280;
}
.gap-changelog-version > .gap-changelog {
padding: .2rem 1.1rem 1.1rem;
border-top: 1px solid #EFEDE9;
}
/* Le titre de version vit maintenant dans le résumé : ce qui reste dans le
corps commence aux chantiers, sans la grande marge d'un premier titre. */
.gap-changelog-version > .gap-changelog > :first-child { margin-top: .9rem; }
.gap-changelog-toc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .5rem;
}
.gap-changelog-toggle {
background: none;
border: none;
padding: 0;
font-size: .72rem;
font-weight: 600;
color: var(--color-primary, #B3261E);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.gap-changelog-toggle:hover { opacity: .75; }
/* Badge de version : un REPÈRE, pas une action — il ne doit pas peser autant
que « Photos » ou « Site » à côté de lui. D'où le fond retiré, le poids
normal et les chiffres tabulaires (« v1.21.1 » ne doit pas danser quand la
version change). Il redevient un bouton franc au survol, puisqu'il en est
un : son clic ouvre le journal. */
.gap-adminbar .adminbar-version {
background: none;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
opacity: .75;
padding-inline: .5rem;
}
.gap-adminbar .adminbar-version:hover,
.gap-adminbar .adminbar-version:focus-visible {
background: rgba(255,255,255,.15);
opacity: 1;
}
/* Aperçu responsive (mode édition) : boutons barre admin + overlay iframe. */
.gap-adminbar .adminbar-device { display: flex; align-items: center; gap: .25rem; }
.gap-device-overlay {
position: fixed; inset: 0; z-index: var(--z-surcouche);
background: rgba(20, 20, 20, .82);
display: flex; flex-direction: column; align-items: center;
padding: .75rem 1rem 1.25rem; gap: .75rem;
}
.gap-device-toolbar {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
color: #fff;
}
.gap-device-toolbar button {
border: 0; border-radius: .4rem; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff;
font-size: .8rem; font-weight: 600; padding: .4rem .8rem;
}
.gap-device-toolbar button:hover { background: rgba(255,255,255,.25); }
.gap-device-toolbar button.is-active {
background: var(--color-accent);
box-shadow: 0 0 0 2px rgba(212,160,23,.4);
}
.gap-device-toolbar .gap-device-close { background: rgba(220,53,69,.55); }
.gap-device-toolbar .gap-device-close:hover { background: rgba(220,53,69,.85); }
.gap-device-note { font-size: .75rem; color: rgba(255,255,255,.65); }
.gap-device-frame {
width: 375px; max-width: 96vw; flex: 1; min-height: 0;
background: #fff; border-radius: 1rem; overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,.5), 0 0 0 6px #222, 0 0 0 8px #444;
transition: width .25s ease;
}
.gap-device-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Indicateur de langue éditée (mode édition). */
.gap-adminbar .adminbar-lang-label {
font-size: .72rem;
font-weight: 600;
color: rgba(255,255,255,.6);
white-space: nowrap;
}
.gap-adminbar .adminbar-lang-btn.active {
background: var(--color-accent);
color: #fff;
box-shadow: 0 0 0 2px rgba(212,160,23,.4);
}
.gap-adminbar .adminbar-lang-btn.active:hover { background: var(--color-accent); }
.gap-adminbar .adminbar-lang-btn--preparation { outline: 1px dashed rgba(255,255,255,.55); outline-offset: -3px; }
.gap-adminbar .adminbar-lang-prep {
font-size: .72rem;
font-weight: 600;
color: #fff;
border: 1px dashed rgba(255,255,255,.6);
border-radius: .25rem;
padding: .1rem .4rem;
white-space: nowrap;
}
.gap-adminbar .adminbar-btn-danger {
background: var(--color-primary);
color: #fff;
}
.gap-adminbar .adminbar-btn-danger:hover { background: var(--color-primary-hover); color: #fff; }
/* ── Barre admin réorganisée : cluster d'état + menus déroulants ────────── */
/* Cluster « ce qui vient de se passer » : autosave + annuler + corbeille. */
.gap-adminbar .adminbar-cluster {
display: inline-flex; align-items: center; gap: .15rem;
background: rgba(0,0,0,.28); border-radius: .35rem; padding: .12rem;
}
.gap-adminbar .adminbar-cluster .adminbar-autosave { background: transparent; }
.gap-adminbar .adminbar-cluster-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border: 0; border-radius: .3rem;
background: transparent; color: rgba(255,255,255,.85); cursor: pointer;
transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.gap-adminbar .adminbar-cluster-btn:hover:not(:disabled) { background: rgba(255,255,255,.18); color: #fff; }
.gap-adminbar .adminbar-cluster-btn:disabled { opacity: .35; cursor: default; }
/* Menus déroulants de la barre (Aperçu, Site, compte). Position FIXED calculée
en JS : la barre est en overflow-x:auto, un absolu serait rogné. */
.gap-adminbar .adminbar-menu-wrap { position: relative; }
.adminbar-menu {
display: none; position: fixed; z-index: var(--z-bandeau);
background: #1e2329; border: 1px solid rgba(255,255,255,.1); border-radius: .4rem;
box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 200px; padding: .3rem;
flex-direction: column; gap: .1rem;
}
.adminbar-menu.open { display: flex; }
/* [hidden] doit gagner sur le display:flex ci-dessous : les formats d'aperçu
plus larges que la fenêtre sont masqués par l'attribut (gap.js,
GapDevicePreview). Même règle pour la barre de l'aperçu ouvert. */
.adminbar-menu-item[hidden],
.gap-device-toolbar [hidden] { display: none; }
.adminbar-menu-item {
display: flex; align-items: center; gap: .5rem;
border: 0; background: transparent; color: rgba(255,255,255,.85); cursor: pointer;
font-size: .82rem; line-height: 1.2; padding: .5rem .6rem; border-radius: .3rem;
text-align: left; text-decoration: none; width: 100%; white-space: nowrap;
transition: background .12s, color .12s;
}
.adminbar-menu-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.adminbar-menu-item--danger:hover { background: rgba(192,57,43,.25); color: #f8b4b4; }
.adminbar-menu-item svg { flex-shrink: 0; }
.adminbar-menu-info { cursor: default; color: rgba(255,255,255,.6); }
.adminbar-menu-info:hover { background: transparent; color: rgba(255,255,255,.6); }
.adminbar-menu form { width: 100%; }
/* Levée programmée de la maintenance (27/09/2026) : un champ date et heure
dans le menu « Site », sous le fond sombre du menu. */
.adminbar-levee { display: flex; flex-direction: column; gap: .25rem; padding: .35rem .6rem .2rem; }
.adminbar-levee .adminbar-menu-item { margin: 0 -.6rem; width: calc(100% + 1.2rem); }
.adminbar-levee-label { font-size: .72rem; color: rgba(255,255,255,.6); }
.adminbar-levee-champ {
font: inherit; font-size: .8rem; color: #fff; color-scheme: dark;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
border-radius: .3rem; padding: .3rem .4rem;
}
.adminbar-levee-champ:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* Pastille de santé du menu « Site » : vert = rien à signaler. */
.adminbar-health-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-secondary); display: inline-block;
}
.adminbar-health-dot.is-danger { background: var(--color-primary); }
.adminbar-sep {
width: 1px;
height: 20px;
background: rgba(255,255,255,.2);
flex-shrink: 0;
}
.adminbar-spacer { flex: 1; }
/* Santé des services externes (menu « Site » de la barre) — une ligne par
service configuré, pastille = dernier verdict CONSIGNÉ (SanteServices) :
neutre tant que rien n'a été vérifié, jamais vert par défaut. */
.adminbar-svc {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .75rem;
}
.adminbar-svc-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.adminbar-svc-dot.neutre { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .45; }
.adminbar-svc-dot.ok { background: #4ade80; }
.adminbar-svc-dot.warning { background: var(--color-accent); }
.adminbar-svc-dot.danger { background: var(--color-primary); }
/* Bannière maintenance */
.maintenance-banner {
background: var(--color-primary);
color: #fff;
font-size: .8rem;
font-weight: 600;
text-align: center;
padding: .35rem 1rem;
letter-spacing: .03em;
}
/* ── Footer ────────────────────────────────────────────────── */
.gap-footer {
background: var(--color-ink);
color: rgba(255,255,255,.8);
padding: 3.5rem 0 1.5rem;
margin-top: auto;
}
.gap-footer h5 {
font-family: var(--font-body);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.55); /* .4 = 3,81:1 sur l'encre, sous AA pour du .7rem ; .55 ≈ 6:1 — la valeur déjà employée ailleurs dans ce footer (V11) */
margin-bottom: 1rem;
}
.gap-footer a {
color: rgba(255,255,255,.7);
text-decoration: none;
transition: color var(--transition);
}
.gap-footer a:hover { color: #fff; }
.gap-footer .footer-logo img { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.gap-footer .footer-divider {
border-color: rgba(255,255,255,.1);
margin: 2rem 0 1rem;
}
.gap-footer .footer-bottom {
font-size: .78rem;
color: rgba(255,255,255,.4);
}
.gap-footer .footer-admin-link {
opacity: .3;
font-size: .72rem;
transition: opacity .2s;
}
.gap-footer .footer-admin-link:hover { opacity: .7; }
.gap-footer .social-links { display: flex; gap: .75rem; flex-wrap: wrap; }
.gap-footer .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.7);
font-size: .9rem;
transition: background var(--transition), color var(--transition);
text-decoration: none;
}
.gap-footer .social-link:hover {
background: var(--color-primary);
color: #fff;
}
/* ── Avertissement du pied de page ───────────────────────────────
Rendu à l'un des trois emplacements du pied (haut / milieu / bas), réglés
par footer_disclaimer_position. Le bloc n'existe PAS quand le réglage est
vide hors édition : aucune marge fantôme sur les sites qui n'en veulent pas.
Habillage volontairement discret — c'est une mention légère, pas un encadré
d'alerte ; un thème qui veut autre chose surcharge ces deux règles. */
.gap-footer .footer-disclaimer-zone { position: relative; }
.gap-footer .footer-disclaimer {
max-width: 60rem;
margin: 0 auto 1.6rem;
padding-top: 1.6rem;
border-top: 1px dashed rgba(255,255,255,.16);
font-size: .78rem;
line-height: 1.6;
color: rgba(255,255,255,.5);
text-align: center;
}
/* Emplacement « tout en bas » : il suit déjà le filet du menu légal, un second
trait ferait doublon. */
.gap-footer .footer-legal-menu + .footer-disclaimer-zone .footer-disclaimer {
border-top: 0;
padding-top: 0;
margin-bottom: .9rem;
}
/* Flèches de placement (mode édition) — même patron que le sélecteur
d'emplacement de média de la frise (.gap-tl-pos). */
.gap-footer-disclaimer-pos {
position: absolute; top: .2rem; left: 0; z-index: 6;
display: inline-flex; gap: 2px;
background: #fff; border: 1px solid var(--color-border, #e7e1d6); border-radius: 7px; padding: 2px;
box-shadow: 0 4px 12px rgba(20,18,16,.12);
}
.gap-fd-pos-btn {
border: 0; background: transparent; cursor: pointer; width: 1.5rem; height: 1.5rem;
border-radius: 5px; line-height: 1; font-size: .95rem; color: #6c645a;
display: inline-flex; align-items: center; justify-content: center;
}
.gap-fd-pos-btn:hover { background: var(--color-surface-alt, #f6f1e7); color: var(--t-ink, #1a1a1a); }
.gap-fd-pos-btn.is-active { background: var(--color-primary, #c8102e); color: #fff; }
/* ── Disposition en flux (plusieurs blocs sur une ligne) ─────── */
/* Les sections sont des items flex : une section « pleine largeur » occupe
toute la ligne, les sections partielles (½/⅓/⅔) consécutives se placent
côte à côte puis passent à la ligne. Par défaut tout est en 'full' → le
rendu est identique à un empilement de blocs classiques (non-régression). */
.gap-sections-flow {
display: flex; flex-wrap: wrap; align-items: stretch;
/* Gouttière ENTRE colonnes. `column-gap` et non `gap` : l'espacement
vertical entre deux rangées appartient au rythme des sections
(leur padding), pas à cette mécanique. */
column-gap: var(--gap-gouttiere);
}
/* ── Couloir des rangées de colonnes ──────────────────────────────────────
Par défaut 0 : les colonnes s'étalent bord à bord (comportement
historique, celui du GAP). Un thème peut définir --gap-couloir pour caler
les rangées dans sa largeur de lecture, p. ex. :
:root{ --gap-couloir: max(1.2rem, calc((100% - 71.25rem) / 2)); }
Chaque colonne est réduite de sa part du couloir, et la PREMIÈRE de chaque
rangée (gap-row-first, posée par SectionRenderer — le CSS ne sait pas qui
ouvre une rangée) porte la marge gauche. La rangée s'arrête ainsi
d'elle-même à la même distance du bord droit. */
/* ── Gouttière entre colonnes ──────────────────────────────────────────────
Deux sections mises côte à côte se touchaient : mesuré sur une page de
1280 px, trois tiers rendaient 0→427, 427→853, 853→1280 — bord à bord.
L'espacement n'existait qu'aux BORDS de la page (le couloir), jamais entre
les colonnes. Relevé par Pierre-Louis le 10/08/2026.
Une gouttière ne peut pas s'ajouter seule : les largeurs étant des
fractions de la ligne, `column-gap` la ferait déborder et la dernière
colonne basculerait en dessous. Chaque colonne prend donc sa part de ce qui
RESTE — `--gap-espaces-rangee` porte ce qui est retiré, et le serveur pose
`gap-cols-N` parce que lui seul sait combien de colonnes se partagent la
rangée (cf. SectionRenderer::grouperRangees).
1.5 rem : la gouttière déjà en vigueur À L'INTÉRIEUR des sections
(`--bs-gutter-x` de Bootstrap). Un thème qui veut des bandeaux jointifs la
remet à 0 — comme il le fait déjà pour le couloir. */
:root {
--gap-couloir: 0px;
--gap-gouttiere: 1.5rem;
/* Rangée d'UNE colonne : aucune gouttière à retirer. C'est le cas d'une
page de sections empilées — de très loin le plus fréquent — et il rend
exactement comme avant l'introduction de la gouttière. */
--gap-espaces-rangee: calc(2 * var(--gap-couloir));
}
.gap-cols-2 { --gap-espaces-rangee: calc(2 * var(--gap-couloir) + 1 * var(--gap-gouttiere)); }
.gap-cols-3 { --gap-espaces-rangee: calc(2 * var(--gap-couloir) + 2 * var(--gap-gouttiere)); }
.gap-w-full { flex: 0 0 100%; max-width: 100%; }
.gap-w-two-thirds { flex: 0 0 calc((100% - var(--gap-espaces-rangee)) * .66666); max-width: calc((100% - var(--gap-espaces-rangee)) * .66666); }
.gap-w-half { flex: 0 0 calc((100% - var(--gap-espaces-rangee)) * .5); max-width: calc((100% - var(--gap-espaces-rangee)) * .5); }
.gap-w-third { flex: 0 0 calc((100% - var(--gap-espaces-rangee)) * .33333); max-width: calc((100% - var(--gap-espaces-rangee)) * .33333); }
@media (min-width: 768px) {
.gap-row-first { margin-left: var(--gap-couloir); }
}
/* Les enfants directs qui ne sont pas des sections restent pleine largeur. */
.gap-sections-flow > .gap-page-title,
.gap-sections-flow > .gap-add-section { flex: 0 0 100%; max-width: 100%; width: 100%; }
/* Section en colonne : le contenu occupe toute la colonne (pas de .container). */
.gap-col-container { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
/* Colonnes empilées sur mobile. */
@media (max-width: 767.98px) {
.gap-w-two-thirds, .gap-w-half, .gap-w-third { flex: 0 0 100%; max-width: 100%; }
}
/* ── Sections de page ──────────────────────────────────────── */
/* Une bande n'élargit JAMAIS la page. Sans ce clip, tout ce qui dépasse
latéralement dans une section fait défiler la page ENTIÈRE — invisible
au bureau, où les gouttières absorbent le débordement, flagrant sur
mobile. Les animations « Glissé droite » et « Incliné » suffisent à le
provoquer : leur état AVANT révélation décale l'élément de 20 à 30px,
et une rangée déjà large de tout l'écran finit hors cadre (12/08 :
/fr/presentation, document de 405 pour un écran de 375).
clip et NON hidden : hidden ferait de la section une zone de défilement
et casserait position:sticky à l'intérieur. Avec clip, overflow-y reste
« visible » (mesuré) — les menus d'édition débordent toujours vers le
bas, et ce qui doit vraiment défiler de côté garde son propre conteneur
(.table-responsive, bandes de vignettes). Safari < 16 ignore clip : le
défaut y subsiste, rien n'y casse. Détail dans le CHANGELOG. */
.page-section { padding: 4rem 0; overflow-x: clip; }
.page-section.section-sm { padding: 2rem 0; }
.page-section.section-lg { padding: 6rem 0; }
/* Fonds de section */
.page-section.bg-light-custom { background: var(--color-surface); }
.page-section.bg-dark-custom { background: var(--color-ink); color: #fff; }
/* ── « Cette surface est sombre » — déclaré, jamais peint ──────────────────
`has-dark-surface` ne pose AUCUN fond. Elle dit seulement que ce qu'elle
contient repose sur du sombre, et déclenche toutes les règles de contraste
du socle : titres, étiquette, tagline, texte atténué, bouton secondaire.
── Pourquoi elle existe ────────────────────────────────────────────────
Le socle ne savait adapter ses contrastes que pour les fonds QU'IL peint —
ceux réglés dans le CMS. Un thème qui peint lui-même une surface n'avait
rien à quoi le socle puisse réagir : le 12/08/2026, le héros de la vitrine,
peint en nuit par le thème, affichait un bouton secondaire à **1,86:1**
(#1E4C8C sur #0F2438). Le défaut ne venait pas du thème mais du socle, qui
n'offrait aucun moyen de DÉCLARER sans PEINDRE : la seule classe disponible,
`bg-dark-custom`, impose sa couleur — un thème qui l'employait pour déclarer
se retrouvait avec un fond qu'il n'avait pas choisi.
── Comment un thème s'en sert ──────────────────────────────────────────
Sur la section entière (via « Classes personnalisées » de la section, ou en
la posant depuis son propre CSS), ou sur n'importe quel conteneur interne
qu'il peint lui-même — une carte, un héros, un encart. Elle agit par
descendance, comme les classes de fond du CMS.
⚠️ Un thème qui peint une surface sombre SANS la déclarer garde la
responsabilité entière de ses contrastes, `.btn-gap-outline` compris. */
.page-section.bg-dark-custom h1,
.page-section.bg-dark-custom h2,
.page-section.bg-dark-custom h3,
.has-dark-surface h1,
.has-dark-surface h2,
.has-dark-surface h3 { color: #fff; }
.has-dark-surface { color: #fff; }
.page-section.bg-primary-custom { background: var(--color-primary); color: #fff; }
.page-section.bg-secondary-custom { background: var(--color-secondary); color: #fff; }
/* Section avec image de fond */
.page-section.has-bg-image {
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.page-section.has-bg-image > .bg-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,var(--overlay-opacity, 0));
pointer-events: none;
}
.page-section.has-bg-image > .container,
.page-section.has-bg-image > .container-fluid {
position: relative;
z-index: 1;
}
/* Fond fixe (effet « le contenu défile par-dessus », façon Odoo) : repli en
défilement normal sur mobile — background-attachment:fixed est saccadé, voire
cassé, sur iOS Safari. */
@media (max-width: 768px) {
.page-section[style*="background-attachment:fixed"],
.page-section[style*="background-attachment: fixed"] {
background-attachment: scroll !important;
}
}
/* Carrousel d'images EN FOND de section (derrière le contenu, fondu enchaîné).
Le voile (.bg-overlay) et le contenu (.container, z-index:1) passent au-dessus. */
.has-bg-carousel { position: relative; }
.gap-bg-carousel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.gap-bg-slide {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.2s ease; will-change: opacity;
}
.gap-bg-slide.is-active { opacity: 1; }
/* Effet « glissement » du diaporama de fond (P1) : les slides se déplacent au
lieu de se fondre. Positions pilotées par initBgCarousel (gap.js). */
.gap-bg-carousel--slide .gap-bg-slide {
opacity: 1; transform: translateX(100%);
transition-property: transform;
}
.gap-bg-carousel--slide .gap-bg-slide.is-active { transform: translateX(0); }
.gap-bg-carousel--slide .gap-bg-slide.is-leaving { transform: translateX(-100%); }
.gap-bg-carousel--slide .gap-bg-slide.is-next { transition: none; transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) {
.gap-bg-carousel--slide .gap-bg-slide { transform: none; opacity: 0; }
.gap-bg-carousel--slide .gap-bg-slide.is-active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.gap-bg-slide { transition: none; }
}
/* Carrousel en fond « fixe » : slides figés au viewport (mêmes conditions que le
fond fixe d'une image ; l'anim est supprimée sur ces sections). Repli mobile. */
[data-bg-fixed] .gap-bg-slide { background-attachment: fixed; }
@media (max-width: 768px) {
[data-bg-fixed] .gap-bg-slide { background-attachment: scroll; }
}
/* Parallaxe de fond : le background-position-y est piloté en JS (gap.js). */
[data-bg-parallax] { will-change: background-position; }
/* ═══ Média par item (template liste, mode média) ══════════════════════════════
Réutilisable par toute page/thème. Carrousel INLINE (Splide + lightbox), BANDE
pleine largeur (diaporama gap-bg-carousel + parallax JS), barre d'édition FRONT.
Couleurs via variables de charte (avec repli) → un thème peut surcharger. */
/* Carrousel inline : vignettes défilantes à côté du texte. */
.gap-item-carousel .splide__slide { line-height: 0; }
.gap-item-carousel .splide__slide img {
height: clamp(170px, 24vw, 240px); width: auto; border-radius: 8px; object-fit: cover;
box-shadow: 0 12px 30px rgba(20,18,16,.16); cursor: zoom-in;
}
/* Le carrousel d'élément GARDE le cadre du thème, comme la photo simple d'à
côté. Ces trois règles l'annulaient : une rangée à galerie ne ressemblait
plus à ses voisines, alors que seul le contenu diffère. Le défaut visible
sur « Nos sections » — quatre photos encadrées et inclinées, la cinquième
nue — venait d'ici.
Seule l'ombre du wrap est retirée : le carrousel porte déjà la sienne sur
chaque vignette, et les deux se cumulaient en un halo sale. */
.gap-item-inline { box-shadow: none; }
/* Flèches / pagination Splide aux couleurs de la charte. */
.gap-item-carousel .splide__arrow {
background: rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(20,18,16,.2);
opacity: 1; width: 2.4rem; height: 2.4rem;
}
.gap-item-carousel .splide__arrow svg { fill: var(--color-primary, #ce2b1e); width: 1.1rem; height: 1.1rem; }
.gap-item-carousel .splide__arrow:hover:not(:disabled) { background: var(--color-primary, #ce2b1e); }
.gap-item-carousel .splide__arrow:hover:not(:disabled) svg { fill: #fff; }
.gap-item-carousel .splide__pagination__page.is-active { background: var(--color-primary, #ce2b1e); }
/* ═══ Style « Bandeau défilant » (galerie intégrée) ════════════════════════════
Défilé horizontal continu des photos d'un album, pause au survol, bords
estompés. Le balisage vient du template du socle (gallery-embed), qui rend
les photos deux fois : l'animation translate de -50% et retombe donc sur la
copie, sans couture.
Promu du thème gap-berstett au socle — le mécanisme ne doit rien à un thème.
Ce qui reste propre à un thème (largeur de page de l'en-tête, allure du
bouton) vit dans son theme.css, qui surcharge ces règles.
La classe `gap-marquee` porte le RUBAN ; la qui l'entoure porte,
elle, `t-marquee` (dérivée du slug de variante par SectionRenderer). Deux
classes distinctes et non plus une seule : c'est ce qui permet d'estomper
les bords du ruban sans rogner l'en-tête, là où il fallait auparavant un
sélecteur `:has()` pour les départager. */
.gap-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* La durée n'est plus une constante mais le résultat d'une VITESSE réglée sur
la section : le gabarit pose --gap-marq-duree, calculée depuis la longueur
réelle du ruban (SectionRenderer::marqueeDuration). Les 42 s restent en
repli — une base dont la colonne n'a pas encore été migrée rend exactement
comme avant. ⚠️ Toucher la hauteur ou l'espacement ci-dessous fausse ce
calcul : les deux valeurs sont recopiées en constantes côté PHP. */
.gap-marquee-track {
display: flex; gap: 1.2rem; width: max-content;
animation: gap-marquee var(--gap-marq-duree, 42s) linear infinite; will-change: transform;
}
.gap-marquee:hover .gap-marquee-track { animation-play-state: paused; }
.gap-marquee-item { flex: 0 0 auto; display: block; margin: 0; }
.gap-marquee-item img {
height: clamp(220px, 30vw, 360px); width: auto; display: block;
object-fit: cover; border-radius: 8px;
}
/* -50% = un jeu de photos exactement ; le .6rem compense la moitié du gap,
sans quoi le raccord saute d'un demi-espace à chaque tour. */
@keyframes gap-marquee { to { transform: translateX(calc(-50% - .6rem)); } }
/* Mouvement continu et involontaire : on le coupe, et le ruban redevient une
bande que l'on fait défiler soi-même. Ne jamais laisser l'animation seule
comme moyen d'accéder aux photos de droite. */
@media (prefers-reduced-motion: reduce) {
.gap-marquee-track { animation: none; }
.gap-marquee { overflow-x: auto; }
}
/* Le bouton de section passe en haut à droite pour ce style (cf. _section.php,
$ctaInHeading) : sans mise en page correspondante, il retomberait sous le
titre. Repli neutre du socle — un thème peut le reprendre à son compte. */
.t-marquee .section-heading {
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .4rem 1.5rem;
}
.t-marquee .section-heading > :not(.section-heading-cta) { grid-column: 1; }
.t-marquee .section-heading .display-title { margin: 0; }
.t-marquee .section-heading-cta { grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: end; }
/* Bande PLEINE LARGEUR = diaporama d'album en fond (façon s_carousel_wrapper Odoo) :
réutilise .gap-bg-carousel / .gap-bg-slide. Doit être positionnée + avoir une
hauteur pour que les slides (inset:0) s'affichent. Parallax : cf. gap.js. */
.gap-item-band {
/* AUCUNE MARGE au-dessus. La bannière prolonge le contenu qu'elle illustre :
une bande de fond de page entre les deux les sépare visuellement alors
qu'ils forment un seul bloc. Le correctif n'avait été appliqué qu'à la
variante « galerie » ; la bannière ordinaire gardait ses ~38 px. */
width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0;
position: relative; overflow: hidden; background: var(--t-ink, #1a1a1a);
height: clamp(320px, 42vw, 540px);
}
@media (max-width: 820px) {
.gap-item-inline { margin-top: 1rem; }
.gap-item-band { height: clamp(220px, 55vw, 320px); }
}
/* Bannière rendue en GALERIE (un affichage a été choisi) : pleine largeur,
mais le contenu revient dans la largeur de lecture — une mosaïque étalée d'un
bord à l'autre de l'écran ne se lit pas.
AUCUNE MARGE au-dessus : la bannière doit toucher le contenu qu'elle
prolonge. Une bande de fond de page apparaissait entre les deux et coupait
visuellement deux blocs sombres qui devaient se suivre.
La hauteur réglée est un MINIMUM, pas une hauteur fixe : une galerie s'étend
selon son contenu, on ne la tronque pas — contrairement au diaporama de fond,
dont l'image se recadre. Double classe : les règles du thème portent sur
`.gap-item-band`, il faut donc être plus spécifique pour les reprendre. */
.gap-item-band.gap-item-band--galerie {
margin-top: 0;
height: auto;
padding: clamp(1.2rem, 3vw, 2.2rem) 0;
background: var(--t-ink, #1a1a1a);
display: flex; align-items: center;
}
.gap-item-band.gap-item-band--galerie > .container { width: 100%; }
/* ── « Photos » : réglage retiré de l'écran ────────────────────────────────
Le nombre de vignettes visibles ne dit plus rien à l'éditeur : le diaporama,
seul affichage d'une vignette de carte, montre TOUTES les photos en les
faisant défiler — la valeur n'y avait aucun effet visible, ce qui est pire
qu'un réglage absent.
MASQUÉ, pas supprimé : les valeurs déjà en base continuent de borner les
affichages qui composent (mosaïque, grille, mur, « à la une »), et le jour
où un affichage justifiera de nouveau ce choix, ces trois lignes suffisent
à le rendre. Une seule règle pour les DEUX barres — celle du socle et celle
des rangées texte-image — qui portent chacune leur copie du champ. */
.gap-media-edit-grp:has(.gap-media-edit-num) { display: none; }
/* Champ nombre de la barre d'édition (photos affichées) : même gabarit que les
boutons voisins, pour que la barre reste une ligne et non un formulaire. */
.gap-media-edit-num {
width: 4.2rem; padding: .18rem .35rem;
border: 1px solid rgba(255,255,255,.25); border-radius: .3rem;
background: rgba(255,255,255,.08); color: inherit;
font-size: .82rem;
}
/* Barre d'édition FRONT (mode édition) : type de média, source, emplacement, parallax. */
.gap-media-edit {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.4rem;
margin: 0 0 1.1rem; padding: .5rem .75rem;
background: var(--color-surface-alt, #fbf9f5); border: 1px dashed var(--color-border, #e2ddd6); border-radius: 10px;
}
.gap-media-edit-grp { display: inline-flex; align-items: center; gap: .4rem; }
.gap-media-edit-lab {
font-family: var(--font-body, sans-serif); font-weight: 700; font-size: .64rem;
letter-spacing: .05em; text-transform: uppercase; color: var(--t-ink, #1a1a1a); opacity: .55;
}
/* Bouton survolé mais pas encore appliqué : l'aperçu est en cours, rien n'est
enregistré. Un contour suffit à le distinguer de l'état actif (plein) — même
convention que la barre de modes de la section. */
.gap-media-edit-btn.is-preview {
border-color: var(--color-primary, #ce2b1e);
color: var(--color-primary, #ce2b1e);
box-shadow: inset 0 0 0 1px var(--color-primary, #ce2b1e);
}
.gap-media-edit-btn {
border: 1px solid var(--color-border, #e2ddd6); background: #fff; color: var(--t-ink, #1a1a1a);
border-radius: 999px; padding: .22rem .7rem; font-size: .78rem; line-height: 1.2; cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.gap-media-edit-btn:hover { border-color: var(--color-primary, #ce2b1e); color: var(--color-primary, #ce2b1e); }
.gap-media-edit-btn.is-active { background: var(--color-primary, #ce2b1e); border-color: var(--color-primary, #ce2b1e); color: #fff; cursor: default; }
.gap-media-edit-album { max-width: 15rem; }
.gap-media-edit-state { font-size: .78rem; color: var(--t-ink, #1a1a1a); opacity: .7; font-style: italic; }
/* L'avertissement « album partagé » passe SOUS le sélecteur de média, sur sa
propre ligne : en ligne, il poussait les réglages voisins et faisait tenir la
barre sur trois hauteurs pour une information de second plan.
`flex-basis:100%` provoque le retour à la ligne DANS le groupe, sans le
sortir de son contexte — l'avertissement doit rester rattaché au média dont
il parle. */
.gap-media-edit-warn {
flex-basis: 100%;
display: flex; align-items: center; gap: .35rem; font-size: .74rem;
margin-top: .3rem;
color: var(--color-primary, #ce2b1e); background: rgba(206,43,30,.08);
border: 1px solid rgba(206,43,30,.25); border-radius: .4rem; padding: .25rem .55rem;
}
/* Le groupe « Média » doit pouvoir passer à la ligne pour l'accueillir. */
.gap-media-edit-grp:has(.gap-media-edit-warn) { flex-wrap: wrap; }
.gap-media-edit-detach {
border: 0; background: none; padding: 0; cursor: pointer;
color: var(--color-primary, #ce2b1e); font-size: .74rem; font-weight: 700; text-decoration: underline;
}
.gap-media-edit-photo,
.gap-media-edit-browse,
.gap-media-edit-choose {
border: 1px solid var(--color-border, #e2ddd6); background: #fff; color: var(--t-ink, #1a1a1a);
border-radius: 999px; padding: .22rem .7rem; font-size: .78rem; cursor: pointer;
}
.gap-media-edit-photo:hover,
.gap-media-edit-browse:hover,
.gap-media-edit-choose:hover { border-color: var(--color-primary, #ce2b1e); color: var(--color-primary, #ce2b1e); }
/* Vignette entière cliquable + état sélectionné bien lisible.
Vaut pour les DEUX surfaces (page « Photos » et panneau en modale) : la
sélection multiple existe des deux côtés, elle doit se voir des deux côtés. */
.gap-media-panel .gmm-item,
.gmp-layout .gmm-item { cursor: pointer; }
.gap-media-panel .gmm-item.gmm-selected .gmm-card,
.gmp-layout .gmm-item.gmm-selected .gmm-card { outline: 3px solid var(--color-primary, #ce2b1e); outline-offset: 1px; }
.gap-media-edit-speed { accent-color: var(--color-primary, #ce2b1e); width: 9rem; max-width: 40vw; }
.gap-media-edit-val { min-width: 2.5ch; font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--t-ink, #1a1a1a); }
/* ═══ Gestionnaire de MÉDIAS — colonne de sources (albums = dossiers) + grille ══
Rendu par `admin/media/_rail.php` + `_grid.php`, dans DEUX contextes :
la page « Photos » du back-office et le panneau en modale (back ET front).
Les règles portent donc sur `.gmp-layout`, que les deux surfaces rendent —
surtout pas sur `.gap-media-panel`, qui n'existe que dans la modale. */
.gmp-layout { gap: 1rem; align-items: flex-start; min-height: 22rem; }
.gmp-layout .gmp-rail {
width: 13.5rem; border-right: 1px solid var(--color-border, #e2ddd6); padding-right: .75rem;
max-height: 60vh; overflow-y: auto;
}
.gmp-layout .gmp-rail-title {
font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
/* #8a8378 sur blanc ne donnait que 3,75:1 — sous le seuil AA de 4,5:1 pour un
texte de cette taille (mesuré le 12/08). Le gris de la charte, lui, tient
à 5,85:1, et c'est le même que celui du pied de la modale. */
color: #6b6459; margin: .9rem 0 .3rem;
}
.gmp-layout .gmp-source {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: .38rem .55rem; border-radius: 7px; text-decoration: none;
color: var(--t-ink, #1a1a1a); font-size: .86rem; line-height: 1.25;
}
.gmp-layout .gmp-source:hover { background: var(--color-surface-raised, #f3eee4); }
.gmp-layout .gmp-source.is-active { background: var(--color-primary, #ce2b1e); color: #fff; }
.gmp-layout .gmp-source-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmp-layout .gmp-source-count { font-size: .72rem; opacity: .65; font-variant-numeric: tabular-nums; }
/* Album absent du site : sans marqueur, on perdrait sa trace en le cherchant. */
.gmp-layout .gmp-source-hidden {
margin-left: .35rem; padding: 0 .3rem; border-radius: 4px;
background: var(--color-border, #e2ddd6); color: #6f6a62;
font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
.gmp-layout .gmp-source.is-active .gmp-source-hidden { background: rgba(255,255,255,.28); color: #fff; }
/* Ligne d'album : le lien FILTRE la grille, le bouton frère bascule la
galerie. Deux gestes distincts, donc deux cibles distinctes — un bouton
imbriqué dans le lien ne serait ni valide ni atteignable au clavier. */
.gmp-layout .gmp-source-row { display: flex; align-items: center; gap: .1rem; }
.gmp-layout .gmp-source-row > .gmp-source { flex: 1 1 auto; min-width: 0; }
.gmp-layout .gmp-source-vis {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
background: transparent; cursor: pointer;
/* Pas d'opacité de repos : elle abaisserait le contraste de l'icône sous le
seuil de 3:1 des composants d'interface. Le gris de la charte tient
5,85:1, le vert 5,32:1 — l'état se lit à la forme ET à la couleur. */
color: #6b6459;
}
.gmp-layout .gmp-source-vis.is-on { color: var(--gap-success, #2a7a3c); }
.gmp-layout .gmp-source-vis:hover { background: var(--color-surface-raised, #f3eee4); }
.gmp-layout .gmp-source-vis:focus-visible { outline: 2px solid var(--color-primary, #ce2b1e); outline-offset: 1px; }
.gmp-layout .gmp-source-vis[disabled] { cursor: progress; }
/* ── Page Galerie en mode édition : basculer un album sans la quitter ──────
Le bouton est posé PAR-DESSUS la carte, hors de son lien. La carte d'un
album non proposé s'estompe et porte son étiquette : l'éditeur voit d'un
coup d'œil ce que le visiteur verra, et ce qu'il ne verra pas. */
.gap-album-edit { position: relative; }
.gap-album-vis {
position: absolute; top: .5rem; right: .5rem; z-index: 3;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255,255,255,.92); color: #6b6459; cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
.gap-album-vis.is-on { color: var(--gap-success, #2a7a3c); }
.gap-album-vis:hover { background: #fff; }
.gap-album-vis:focus-visible { outline: 2px solid var(--color-primary, #ce2b1e); outline-offset: 2px; }
.gap-album-vis[disabled] { cursor: progress; }
.gap-album-hors {
position: absolute; top: .5rem; left: .5rem; z-index: 3;
padding: .12rem .45rem; border-radius: 4px;
background: #1a1a1a; color: #fff;
font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
}
.gap-album-edit:has(.gap-album-hors:not([hidden])) .gap-card { opacity: .62; }
.gmp-layout .gmp-new-album {
margin-top: .6rem; width: 100%; border: 1px dashed var(--color-border, #e2ddd6); background: transparent;
border-radius: 7px; padding: .4rem .5rem; font-size: .82rem; cursor: pointer; color: var(--t-ink, #1a1a1a);
}
.gmp-layout .gmp-new-album:hover { border-color: var(--color-primary, #ce2b1e); color: var(--color-primary, #ce2b1e); }
/* Porte vers la liste complète des albums (année, disposition, suppression) :
le rail ne montre que le titre et le nombre de photos. */
.gmp-layout .gmp-rail-link {
display: block; margin-top: .5rem; padding: .3rem .55rem;
font-size: .78rem; color: #6f6a62; text-decoration: none;
}
.gmp-layout .gmp-rail-link:hover { color: var(--color-primary, #ce2b1e); }
.gmp-layout .gmp-main { min-width: 0; }
/* Bac de sélection : miniatures ordonnées, glissables (Sortable) pour choisir
l'ordre d'une sélection propre. Reste visible en haut pendant qu'on parcourt. */
.gap-media-panel .gmp-tray {
position: sticky; top: 0; z-index: 6;
background: var(--color-surface-raised, #f3eee4); border: 1px solid var(--color-border, #e2ddd6);
border-radius: 9px; padding: .5rem .6rem; margin-bottom: .6rem;
}
.gap-media-panel .gmp-tray-head {
font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #8a8378; margin-bottom: .4rem;
}
.gap-media-panel .gmp-tray-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.gap-media-panel .gmp-tray-item {
position: relative; width: 58px; height: 44px; border-radius: 6px; overflow: hidden;
cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.18); background: #e9e4db;
}
.gap-media-panel .gmp-tray-item:active { cursor: grabbing; }
.gap-media-panel .gmp-tray-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gap-media-panel .gmp-tray-item.sortable-ghost { opacity: .35; }
.gap-media-panel .gmp-tray-rm {
position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; line-height: 14px;
padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
font-size: 12px; cursor: pointer; text-align: center;
}
.gap-media-panel .gmp-tray-rm:hover { background: var(--color-primary, #ce2b1e); }
/* ── Zone d'action sur la sélection ───────────────────────────────────────────
UNE barre, deux logements, une seule implémentation (_grid.php) :
· page pleine largeur → collée au bas de la fenêtre ;
· modale → déménagée dans le pied par gap-media-panel.js.
Dans les deux cas elle est HORS DU FLUX : elle ne pousse plus la grille sous
le curseur au moment où l'on coche (défaut relevé le 11/08).
Pas de `display` ici : la barre porte `.d-none` (!important) tant que rien
n'est sélectionné, et `flex` prend le relais quand le JS la retire. */
.gmm-bulk-bar {
position: sticky; bottom: 0; z-index: 7;
display: flex; flex-wrap: wrap;
margin-top: .75rem; padding: .5rem .65rem;
background: var(--color-surface-raised, #f3eee4);
border: 1px solid var(--color-border, #e2ddd6); border-radius: 9px;
box-shadow: 0 -4px 14px rgba(0, 0, 0, .07);
}
.gmm-bulk-bar .dropdown-menu { font-size: .86rem; }
/* Un client peut avoir quarante albums : la liste défile dans le menu. */
.gmm-album-list { min-width: 16rem; max-height: 42vh; overflow-y: auto; }
/* Le nombre de photos se range à droite du nom — mais SEULEMENT pour les
albums : « Nouvel album avec ces photos » est une phrase, pas une ligne de
liste, et son icône doit rester collée à son texte. */
.gmm-album-list .gmm-album-pick {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.gmm-album-nb { font-size: .72rem; opacity: .6; font-variant-numeric: tabular-nums; }
.gmm-album-new { display: flex; align-items: center; gap: .4rem; }
.gmm-tag-panel { min-width: 20rem; }
/* Barre déménagée dans le pied : elle y perd son cadre et son collant, que le
pied de modale porte déjà. Le compte, lui, s'efface — le pied a le sien, qui
porte en plus les avertissements (« cet emplacement n'en reçoit qu'une »). */
.gmp-foot .gmm-bulk-bar {
position: static; margin: 0; padding: 0;
background: none; border: 0; box-shadow: none;
}
.gmp-foot .gmm-selection-count { display: none; }
/* Un trait, pour que le pied se lise en deux temps : à gauche ce qui AGIT sur
la sélection, à droite ce qui CONCLUT. C'est le mélange des deux natures qui
rendait l'ancien pied confus. */
.gmp-foot .gmm-bulk-bar:not(.d-none) + .gmp-foot-sortie {
padding-left: .75rem; border-left: 1px solid var(--color-border, #e2ddd6);
}
/* ── Les guides d'utilisation se lisent comme des guides ─────────────────────
`_grid.php` est rendu dans DEUX surfaces, mais `admin.css` n'est chargé que
dans l'une. En front, `.adm-form-label` et `.adm-form-hint` n'avaient donc
AUCUN style : ces phrases sortaient à la taille du texte courant du thème,
à égalité avec ce qu'elles sont censées expliquer.
Les valeurs reprennent celles d'admin.css (:390-396), pour que les deux
surfaces racontent la même chose. `rem` et non `em` : la taille ne doit pas
dépendre de la fonte de base du thème client. */
.gap-media-manager .adm-form-label {
font-size: .8rem; font-weight: 600; line-height: 1.3; margin-bottom: .3rem;
}
.gap-media-manager .adm-form-hint {
font-size: .75rem; line-height: 1.35; color: #6b7280; margin-top: .25rem;
}
/* Même famille, mêmes égards : le mode d'emploi du cadrage et le relevé
d'usage (« Utilisée dans un album… »). Ils portaient `.small`, qui est en
`em` — donc gros sous un thème à grande fonte. */
.gap-media-manager .gmm-edit-guide {
font-size: .75rem; line-height: 1.4;
}
.gap-media-manager .gmm-edit-guide .btn { font-size: inherit; }
/* Le pied garde SA HAUTEUR quand la sélection apparaît. Sans cela, les boutons
qui arrivent renvoyaient la phrase d'état à la ligne : le pied grandissait,
la grille rétrécissait — le défaut même qu'on venait de chasser du haut de
l'écran. C'est l'état qui se laisse rogner, jamais les actions. */
.gmp-foot { flex-wrap: nowrap; }
.gmp-foot .gmm-bulk-bar { flex-wrap: nowrap; }
/* Tous les contrôles du pied à la MÊME hauteur. « Utiliser ces photos » porte
`btn-sm` comme ses voisins, mais `.btn-gap-primary` lui redonne le rembourrage
des grands boutons (gap.css:177) : 41 px contre 31. Conséquence mesurée le
12/08 — le pied passait de 56 à 66 px selon que ce bouton était là ou non,
c'est-à-dire à chaque fois qu'une sélection apparaissait. Il reste le bouton
principal par sa COULEUR ; sa taille n'a pas à faire bouger la boîte. */
.gmp-foot .btn-gap-primary { padding: .25rem .75rem; font-size: .875rem; }
.gmp-foot-etat {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gmp-foot-actions { flex-shrink: 0; }
/* Sous cette largeur, plus rien ne tient sur une ligne : on laisse aller.
⚠️ Le repli ne suffisait PAS, et le défaut était sévère : sur téléphone, le
pied débordait à droite et « Supprimer », « Tout décocher », « Utiliser ces
photos » et « Fermer » devenaient INATTEIGNABLES — on ne pouvait plus ni
valider ni fermer autrement que par la croix. Constaté par Pierre-Louis le
12/08, capture à l'appui.
La cause : `.gmp-foot-actions` est un conteneur flex à moi, en `nowrap` par
défaut (Bootstrap) et que j'avais mis en `flex-shrink: 0` pour protéger les
boutons sur grand écran. Il ne rétrécissait donc pas, ne passait pas à la
ligne, et poussait son contenu hors du cadre. Les deux règles du dessus
n'atteignaient pas ce niveau-là.
Sur téléphone, la hauteur du pied n'est plus le sujet : il vaut mieux trois
lignes lisibles qu'une ligne dont la moitié est hors de l'écran. */
@media (max-width: 720px) {
.gmp-foot,
.gmp-foot .gmm-bulk-bar,
.gmp-foot-actions,
.gmp-foot-sortie { flex-wrap: wrap; }
.gmp-foot-actions { flex-shrink: 1; min-width: 0; }
/* L'état prend sa propre ligne : le rogner sur trois mots ne rend service
à personne quand il y a la place en dessous. */
.gmp-foot-etat { white-space: normal; flex: 1 0 100%; }
/* Le trait qui sépare « agir » de « conclure » ne veut plus rien dire quand
les deux groupes sont l'un SOUS l'autre. */
.gmp-foot .gmm-bulk-bar:not(.d-none) + .gmp-foot-sortie {
padding-left: 0; border-left: 0;
}
}
/* Les menus s'ouvrent vers le HAUT depuis le pied. `.modal-dialog-scrollable`
pose `overflow: hidden` sur `.modal-content` (pour arrondir le corps qui
défile) — il rognerait le menu. Le corps garde son propre `overflow-y`,
donc il continue de défiler. */
.gap-media-panel .modal-content { overflow: visible; }
@media (max-width: 720px) {
.gmp-layout { flex-direction: column; }
.gmp-layout .gmp-rail {
width: 100%; border-right: 0; border-bottom: 1px solid var(--color-border, #e2ddd6);
padding-right: 0; padding-bottom: .5rem; max-height: 11rem;
}
}
/* ═══ Gestionnaire de DOCUMENTS (PDF) — même ossature que les médias ══════════
Rail partagé (classes gmp-*) + liste tabulaire à la place de la grille : un
PDF n'a pas de vignette. Rendu par admin/documents/_rail.php + _list.php,
sur la page pleine largeur ET dans la modale (gap-doc-panel.js). */
.gmp-layout .gmp-source--child { padding-left: 1.6rem; }
/* Document tout juste déposé : on le retrouve d'un coup d'œil pour le choisir. */
.gdp-row--new > td { background: var(--color-surface-raised, #f6efe2); }
/* La liste défile dans son propre cadre — jamais la modale entière en travers. */
.gdp-table-wrap { overflow-x: auto; }
.gdp-table { min-width: 560px; }
.gdp-folder-head { flex-wrap: wrap; }
/* ═══ Carte OSM + formulaire de contact (sections socle) ═══════════════════════
Structure/layout ici (socle) ; couleurs et charte dans le thème. */
.gap-map-embed {
position: relative; width: 100%; aspect-ratio: 4 / 3;
border-radius: 12px; overflow: hidden; background: #e9e4db;
}
.gap-map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* ── Plan rendu en mosaïque de tuiles (App\Core\TuilesCarte) ──────────────
*
* Remplace l'iframe OpenStreetMap depuis le 06/09/2026. Pour un visiteur ce
* ne sont que des ![]()
: aucun JavaScript, et le plan s'affiche même sans.
*
* La mosaïque est rendue à 900×675 et CENTRÉE dans un cadre fluide qui la
* recadre. gap-carte.js tient compte de ce décalage pour convertir un clic —
* changer les dimensions ici sans les changer dans _plan.php décalerait le
* repère de la moitié de la différence. */
.gap-plan { position: relative; overflow: hidden; background: #e9e4db; touch-action: none; }
.gap-plan-tuiles {
position: absolute; left: 50%; top: 50%;
width: 900px; height: 675px; margin: -337.5px 0 0 -450px;
}
.gap-plan-tuiles img { position: absolute; display: block; max-width: none; }
/* Le repère marque le CENTRE de la mosaïque, donc le point demandé. Sa pointe
est en bas de l'icône : on le remonte d'une hauteur entière. */
.gap-plan-repere {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -100%);
color: var(--color-primary, #ce2b1e);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
pointer-events: none; line-height: 0;
}
.gap-plan-credit {
position: absolute; right: 0; bottom: 0; margin: 0;
padding: .15rem .5rem; font-size: .68rem; color: #4a463f;
background: rgba(255, 255, 255, .78); border-top-left-radius: 6px;
}
/* ── Teinte du thème ──────────────────────────────────────────────────────
*
* `mix-blend-mode: color` prend la TEINTE et la SATURATION du voile et garde
* la LUMINANCE de ce qu'il recouvre : la carte change de couleur sans perdre
* un seul détail. C'est ce qui permet d'employer le fond le plus détaillé
* sans qu'il soit bariolé — et c'est la raison pour laquelle le fond par
* défaut est passé de la toile de fond grise au style détaillé (TuilesCarte).
*
* 28 % : mesuré sur tuiles réelles avant d'être écrit. Au-delà, la teinte
* cesse d'accompagner la carte pour la remplacer.
*
* Le voile ne couvre QUE les tuiles : il est sous le repère et sous les
* outils, qui doivent garder leurs couleurs propres. */
.gap-plan-teinte {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: var(--color-primary, #ce2b1e);
mix-blend-mode: color;
opacity: .28;
}
/* Repère, outils et mentions passent AU-DESSUS du voile. */
.gap-plan-repere, .gap-plan-outils, .gap-plan-etat, .gap-plan-credit { z-index: 2; }
/* ── Outils d'édition du plan ─────────────────────────────────────────── */
.gap-plan-outils {
position: absolute; top: .6rem; left: .6rem; right: .6rem;
display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
/* Le bouton de MODE : c'est lui qui arme le clic. Il doit se voir — un mode
invisible est un mode qu'on déclenche sans le savoir. */
.gap-plan-poser {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem .8rem; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(0, 0, 0, .15); background: #fff; color: #1a1a1a;
font-size: .84rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.gap-plan-poser:hover { border-color: var(--color-primary, #ce2b1e); }
.gap-plan-poser[aria-pressed="true"] {
background: var(--color-primary, #ce2b1e); color: #fff; border-color: transparent;
}
.gap-plan-boutons { display: flex; flex-direction: column; gap: .3rem; }
.gap-plan-btn {
width: 2.2rem; height: 2.2rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px;
background: #fff; color: #1a1a1a; font-size: 1.15rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.gap-plan-btn:hover { background: var(--color-primary, #ce2b1e); color: #fff; border-color: transparent; }
/* Bandeau d'état : position courante et retour d'enregistrement, en
permanence — pas un message qui s'efface. */
.gap-plan-etat {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
padding: .35rem .7rem; font-size: .76rem;
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
color: #fff; background: rgba(26, 26, 26, .74);
}
.gap-plan-etat-pos { font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.gap-plan-etat.is-ok { background: rgba(31, 96, 48, .88); }
.gap-plan-etat.is-fail { background: rgba(181, 39, 27, .9); }
/* Le curseur DIT le mode : croix quand le clic pose, main quand il déplace. */
.gap-plan[data-item-id] .gap-plan-tuiles { cursor: grab; }
.gap-plan.is-pose .gap-plan-tuiles { cursor: crosshair; }
.gap-plan.is-glisse .gap-plan-tuiles { cursor: grabbing; }
.gap-plan.is-pose { outline: 2px solid var(--color-primary, #ce2b1e); outline-offset: -2px; }
.gap-plan.is-busy { opacity: .75; }
/* Le crédit se décale au-dessus du bandeau, pour ne pas le recouvrir. */
.gap-plan-etat ~ .gap-plan-credit { bottom: 1.7rem; }
.gap-map-info { display: flex; flex-direction: column; gap: 1.25rem; }
/* Emplacement de l'adresse (comme media_position de la timeline) : la colonne
infos passe avant le plan quand data-map-pos="left". .row est un flex. */
.gap-map[data-map-pos="left"] .gap-map-info { order: -1; }
.gap-map-pos { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.gap-map-pos-lab {
font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8378;
}
.gap-map-pos-btn {
border: 1px solid var(--color-border, #d9d3c8); background: #fff; color: #6b655c;
border-radius: 7px; padding: .2rem .55rem; font-size: .78rem; cursor: pointer; line-height: 1.4;
}
.gap-map-pos-btn:hover { border-color: var(--color-primary, #ce2b1e); color: var(--color-primary, #ce2b1e); }
.gap-map-pos-btn.is-active {
border-color: var(--color-primary, #ce2b1e); background: var(--color-primary, #ce2b1e); color: #fff;
}
.gap-map-edit {
border: 1px dashed var(--color-border, #d9d3c8); border-radius: 10px; padding: .75rem .9rem;
display: flex; flex-direction: column; gap: .4rem;
}
.gap-map-edit-lab {
font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8378;
}
.gap-map-address { margin: 0; font-size: 1rem; min-height: 1.4em; }
.gap-map-address[data-empty]:empty::before {
content: attr(data-placeholder); color: #a8a196; font-style: italic;
}
.gap-map-recenter,
.gap-lieu-poser {
align-self: flex-start; border: 1px solid var(--color-primary, #ce2b1e); background: transparent;
color: var(--color-primary, #ce2b1e); border-radius: 8px; padding: .35rem .7rem; font-size: .85rem; cursor: pointer;
/* inline-flex : le bouton porte une icône SVG depuis qu'il ne porte plus
d'émoji — sans ça le picto et le texte ne s'alignent pas. */
display: inline-flex; align-items: center; gap: .4rem;
}
.gap-map-recenter:hover:not(:disabled),
.gap-lieu-poser:hover { background: var(--color-primary, #ce2b1e); color: #fff; }
.gap-map-recenter:disabled { opacity: .6; cursor: default; }
/* ── Section « Lieu » (gabarit place.php) ─────────────────────────────────
Elle emprunte tout l'habillage de la carte : seul le lien d'itinéraire lui
est propre. Voir la migration 20260905-2345 pour ce qui la distingue du
type « Plan / carte ». */
.gap-place-itineraire {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: .9rem; font-size: .88rem; font-weight: 600;
color: var(--color-secondary, #2a7a3c); text-decoration: none;
}
.gap-place-itineraire:hover,
.gap-place-itineraire:focus-visible { text-decoration: underline; }
/* L'adresse du lieu est saisie sur plusieurs lignes (textarea) et rendue
avec ses retours : sans cela, line-height:2 de la liste les écarterait
comme s'il s'agissait de coordonnées distinctes. */
.gap-place .gap-map-coord--addr { line-height: 1.5; margin-bottom: .5rem; }
.gap-map-hint { font-size: .78rem; color: #8a8378; }
.gap-map-coords-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; }
.gap-map-coords-list { font-style: normal; line-height: 2; margin: 0; }
.gap-map-coord { display: block; }
.gap-map-coord[data-empty]:empty::before {
content: attr(data-placeholder); color: #a8a196; font-style: italic;
}
/* ── Plan à plusieurs lieux (15/09/2026) ─────────────────────────────────
Un élément de section par lieu (map.php). Les blocs gardent les classes de
toujours (.gap-map-coords, .gap-map-coords-title…), que les thèmes habillent
déjà : un thème n'a rien à apprendre pour qu'un deuxième lieu lui ressemble. */
.gap-lieux { display: flex; flex-direction: column; gap: 1.25rem; }
.gap-lieu { position: relative; }
/* Le NUMÉRO relie un repère à son bloc — au doigt, à l'impression, au lecteur
d'écran (« Repère 2 »). Même pastille des deux côtés, pour qu'on les apparie
sans légende. */
.gap-lieu-num,
.gap-plan-repere--numero {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 999px;
background: var(--color-primary, #ce2b1e); color: #fff;
font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
/* Marge courte : une espace suit déjà la pastille dans le texte (map.php). */
.gap-lieu-num { margin-right: .25rem; font-size: .8em; vertical-align: .1em; }
/* Sur le plan : pastille cerclée de blanc, POINTE en bas sur le lieu. Sa
position (left/top) est posée par _plan.php — « 50 % + décalage ». */
.gap-plan-repere--numero {
font-size: .9rem; border: 2px solid #fff; filter: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
transform: translate(-50%, calc(-100% - 8px));
}
.gap-plan-repere--numero::after {
content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
margin-top: 2px; border: 6px solid transparent; border-top-color: var(--color-primary, #ce2b1e);
}
/* Repère seul : son nom en LÉGENDE, sans cadre de bloc. Visée par sa propre
classe, pas par le modificateur d'usage : `.gap-lieu--repere` porte aussi
le BLOC D'ÉDITION de ce lieu, qu'une mise en flex rangeait en une rangée
centrée — outils, menu d'usage et titre côte à côte (signalé le 15/09/2026). */
.gap-lieu-legende { display: flex; align-items: center; margin: 0; }
.gap-lieu-note { margin: .5rem 0 0; font-size: .9rem; color: #6b655c; }
.gap-lieu-note[data-empty]:empty::before,
.gap-lieu-titre[data-empty]:empty::before {
content: attr(data-placeholder); color: #a8a196; font-style: italic; font-weight: 400;
}
/* Édition : l'usage du lieu, l'adresse de son repère, ses boutons. */
.gap-lieu-usage {
display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem;
font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8378;
}
.gap-lieu-usage select {
font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #1a1a1a;
padding: .15rem .4rem; border: 1px solid var(--color-border, #d9d3c8); border-radius: 6px; background: #fff;
}
.gap-lieu-outils {
margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--color-border, #d9d3c8);
display: flex; flex-direction: column; gap: .4rem;
}
.gap-lieu-boutons { display: flex; flex-wrap: wrap; gap: .4rem; }
.gap-lieu-option {
display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem;
font-size: .82rem; color: #4a463f; cursor: pointer;
}
/* L'adresse PROPRE d'un lieu peut tenir sur plusieurs lignes (héritage du type
« Lieu », fusionné le 15/09/2026) : sans cela, le line-height:2 de la liste
les écarterait comme des coordonnées distinctes. Les blocs « coordonnées du
site » n'en ont pas besoin, et gardent leur espacement d'avant. */
.gap-lieu--texte_repere .gap-map-coord--addr,
.gap-lieu--texte .gap-map-coord--addr { line-height: 1.5; margin-bottom: .5rem; }
/* Icône (emoji) en tête de carte — type « cartes-texte » (socle). */
.gap-card-icon { font-size: 2.1rem; line-height: 1; margin-bottom: .5rem; }
.gap-contact-form { max-width: 720px; margin-inline: auto; }
.gap-contact-form .form-label { margin-bottom: .3rem; }
/* ═══ Messages flash — affichage public (socle) ════════════════════════════════
Retour visiteur après un POST redirigé (contact…). Charte peinte par le thème. */
.gap-flash-wrap { margin: 1.5rem 0 0; }
.gap-flash { border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: .75rem; }
.gap-flash:last-child { margin-bottom: 0; }
.gap-flash-icon { font-size: 1.1rem; line-height: 1; }
.gap-flash-msg { font-size: .98rem; }
/* Fonds photo (image OU carrousel) : texte clair par défaut pour la lisibilité
par-dessus l'image + voile (comme les fonds sombre/coloré). L'étiquette, la
tagline et .text-muted ont déjà leur variante claire plus haut. */
.page-section.has-bg-image { color: #fff; }
.page-section.has-bg-image h1,
.page-section.has-bg-image h2,
.page-section.has-bg-image h3,
.page-section.has-bg-image h4,
.page-section.has-bg-image h5,
.page-section.has-bg-image h6 { color: #fff; }
/* ── Bandeau RGPD ───────────────────────────────────────────── */
.gap-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-bandeau);
background: #1A1A1A;
color: rgba(255,255,255,.85);
padding: .9rem 0;
box-shadow: 0 -2px 12px rgba(0,0,0,.3);
border-top: 2px solid var(--color-primary);
}
.gap-cookie-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.gap-cookie-text { font-size: .85rem; }
.gap-cookie-link { color: var(--color-accent); margin-left: .5rem; }
.gap-cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
/* ── Carte contact ───────────────────────────────────────────── */
.contact-map {
display: block;
width: 100%;
min-height: 300px;
border: 0;
}
.map-consent-wrap {
position: relative;
/* --gap-bg-alt n'a JAMAIS été déclarée : ce fond était transparent depuis
l'origine, silencieusement. On pose la surface du socle, avec l'ancien nom
en entrée pour qui voudrait le définir un jour. */
background: var(--gap-bg-alt, var(--color-surface));
min-height: 300px;
}
.map-consent-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26,26,26,.08);
backdrop-filter: blur(2px);
}
.contact-info { font-size: .9rem; color: #374151; }
.contact-info a { color: #374151; text-decoration: none; }
.contact-info a:hover { color: var(--color-primary); }
/* ── Cards ─────────────────────────────────────────────────── */
/* Primitives de surface du SOCLE : tout nouveau composant « carte » doit
composer avec .gap-surface (+ .gap-surface--lift pour le survol) plutôt que
redéclarer fond/bordure/rayon/transition. Déclarées AVANT .gap-card pour que
les surcharges de thème (t-*) continuent de gagner la cascade.
.gap-card COMPOSE désormais avec elles (F2, 24/08/2026) : ses cinq
déclarations et son survol étaient la copie mot pour mot de la primitive —
le socle contredisait sa propre convention depuis le 09/08. L'amplitude du
survol vit dans --lift : un thème surcharge le jeton, plus le geste. */
.gap-surface,
.gap-card {
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
transition: transform var(--transition), box-shadow var(--transition);
}
.gap-surface--lift:hover,
.gap-card:hover {
transform: translateY(var(--lift));
box-shadow: var(--shadow-md);
}
.gap-card {
height: 100%;
/* Ancre de `.stretched-link` : sans `position`, la zone de clic étendue
s'accrocherait au premier ancêtre positionné — la grille, voire la
section — et la carte voisine deviendrait cliquable elle aussi. */
position: relative;
}
/* Toute la carte mène quelque part : les AUTRES liens repassent au-dessus de
la zone étendue, sinon `.stretched-link` les recouvrirait et ils
deviendraient inertes — un lien dans une description, l'aperçu d'un album.
`z-index: 2` et non 1 : la zone étendue de Bootstrap est elle-même à 1
(vérifié dans bootstrap.min.css), et le bouton qui la porte est le DERNIER
élément de la carte — à égalité, l'ordre du document lui donnerait raison
contre un lien situé plus haut. */
.gap-card a:not(.stretched-link),
.gap-card button { position: relative; z-index: 2; }
.gap-card .gap-card-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.gap-card .gap-card-body { padding: 1.25rem; }
/* ── Élément MIS EN AVANT (15/09/2026) ────────────────────────────────────
Réglage de l'élément (« Mettre la carte en avant », « Mettre la ligne en
avant »), porté par l'attribut `data-item-avant` sur la cellule d'une carte
ou la rangée d'une liste. Rendu par défaut : celui de la formule mise en
avant d'un comparatif (.gap-formule--avant) — bord à la couleur principale,
ombre légère. Un thème le redessine en visant le même attribut.
`.col` dans le sélecteur des cartes (0,3,0) : un thème qui retire le bord de
ses cartes (`.t-reperes .gap-card`, 0,2,0) ne doit pas effacer du même coup
la mise en avant qu'un éditeur vient de régler. */
.col[data-item-avant] > .gap-card {
border: 2px solid var(--color-primary);
box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
.list-sections > .row[data-item-avant] {
padding-block: 1.5rem;
border: 2px solid var(--color-primary);
border-radius: var(--radius);
box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
/* Image du template Featured (éditable en FO via $editablePhoto) */
.gap-featured-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: .5rem;
display: block;
}
/* Image du template Liste (éditable en FO via $editablePhoto) */
.gap-list-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.gap-card .gap-card-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: .5rem;
}
.gap-card .gap-card-text {
font-size: .875rem;
color: var(--color-muted);
line-height: 1.6;
}
/* ── Cadres photo ──────────────────────────────────────────── */
.frame-rounded { border-radius: var(--radius); overflow: hidden; }
.frame-rounded-lg { border-radius: 24px; overflow: hidden; }
.frame-circle { border-radius: 50%; overflow: hidden; }
.frame-shadow { box-shadow: var(--shadow-md); }
.frame-shadow-soft { box-shadow: 0 10px 30px rgba(20, 18, 16, .12); }
.frame-shadow-colored { box-shadow: 0 12px 32px rgba(206,43,30,.25); }
.frame-polaroid {
background: #fff; padding: .55rem .55rem 2.2rem;
box-shadow: var(--shadow-md); border-radius: 2px;
}
.frame-border-primary { border: 4px solid var(--color-primary); }
.frame-border-secondary { border: 4px solid var(--color-secondary); }
.frame-border-thin { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.frame-clip-corner {
clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}
.frame-tilt-left { transform: rotate(-2deg); }
.frame-tilt-right { transform: rotate(2deg); }
/* Inclinaisons « aléatoires » : 5 rotations cyclées par position de carte
(cf SectionRenderer::frameClasses). Léger lift au survol pour la vie. */
.frame-tilt-rand-1 { transform: rotate(-3deg); }
.frame-tilt-rand-2 { transform: rotate(2.5deg); }
.frame-tilt-rand-3 { transform: rotate(-1.5deg); }
.frame-tilt-rand-4 { transform: rotate(3deg); }
.frame-tilt-rand-5 { transform: rotate(-2.2deg); }
[class*="frame-tilt-"] { transition: transform .25s ease; }
[class*="frame-tilt-"]:hover { transform: rotate(0deg) scale(1.01); }
/* Aperçu dans les formulaires pour les modes multi-cartes (rendu représentatif) */
.frame-preview.frame-tilt-alternate { transform: rotate(-2deg); }
.frame-preview.frame-tilt-random { transform: rotate(2.5deg); }
.frame-clip-diagonal {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
/* Cadres organiques (border-radius asymétrique + clip-path).
arch/diamond/circle sont RETIRÉS du sélecteur mais leur CSS reste : les
sections qui les portent encore gardent leur rendu (option « (ancien) »). */
.frame-organic { position: relative; }
.frame-organic img { width: 100%; height: 100%; object-fit: cover; }
.frame-organic-blob { overflow: hidden; border-radius: 24% 76% 67% 33% / 30% 26% 74% 70%; }
.frame-organic-wave { overflow: hidden; border-radius: 78% 22% 32% 68% / 70% 26% 74% 30%; }
.frame-organic-splat { overflow: hidden; border-radius: 84% 16% 56% 44% / 52% 78% 22% 48%; }
.frame-organic-pebble { overflow: hidden; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
.frame-organic-leaf { overflow: hidden; border-radius: 8px 72% 8px 72%; }
.frame-organic-petal { overflow: hidden; border-radius: 52% 52% 52% 10px / 55% 55% 48% 10px; }
.frame-organic-flow { overflow: hidden; border-radius: 32% 68% 46% 54% / 58% 32% 68% 42%; }
/* Héritage (plus proposés au choix) */
.frame-organic-arch { overflow: hidden; border-radius: 50% 50% 8px 8px; }
.frame-organic-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.frame-organic-circle { overflow: hidden; border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%; }
/* Aperçu du mode « organic aléatoire » (modale d'options) : forme blob représentative.
Au rendu réel, frameClasses() attribue une forme organique différente par carte. */
.frame-organic-random { overflow: hidden; border-radius: 24% 76% 67% 33% / 30% 26% 74% 70%; }
/* ── Réglages fins du cadre (surcouche au préréglage) ─────────
Les variables --frame-* sont posées sur la (sectionStyles) et
héritées ; ces marqueurs les consomment. Déclarés APRÈS les préréglages
frame-* : à spécificité égale, le réglage fin gagne la cascade. */
.frame-x-radius { border-radius: var(--frame-radius); overflow: hidden; }
.frame-x-shadow { box-shadow: var(--frame-shadow); }
.frame-x-border { border: var(--frame-border); }
.frame-x-tilt { transform: rotate(var(--frame-tilt)); transition: transform .25s ease; }
.frame-x-tilt:hover { transform: rotate(0deg) scale(1.01); }
.frame-x-pad { padding: var(--frame-pad); background: #fff; }
/* Effets au survol (3 comportements distincts → classes dédiées) */
.frame-hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.frame-hover-lift:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-md); }
.frame-hover-zoom { overflow: hidden; }
.frame-hover-zoom img { transition: transform .35s ease; }
.frame-hover-zoom:hover img { transform: scale(1.06); }
.frame-hover-grayscale img { filter: grayscale(1); transition: filter .3s ease; }
.frame-hover-grayscale:hover img { filter: none; }
/* La zone de survol s'élargit à la CARTE qui porte le cadre : la photo se
colorise (ou zoome) quand le curseur entre dans la carte, pas seulement sur
l'image. Dans une grille serrée — ou avec un cadre organique, dont le
clip-path rétrécit encore la cible — survoler l'image seule est un geste de
précision inutile : c'est la carte entière qui est l'objet.
Volontairement PAS appliqué à frame-hover-lift : ce cadre-là se détache
géométriquement, et le voir sauter depuis le texte de la carte casserait la
lecture (la carte, elle, a déjà son propre relief au survol). */
.gap-card:hover .frame-hover-grayscale img,
.gap-person:hover .frame-hover-grayscale img,
.gap-quote:hover .frame-hover-grayscale img,
.gap-formule:hover .frame-hover-grayscale img { filter: none; }
.gap-card:hover .frame-hover-zoom img,
.gap-person:hover .frame-hover-zoom img,
.gap-quote:hover .frame-hover-zoom img,
.gap-formule:hover .frame-hover-zoom img { transform: scale(1.06); }
/* Contrôles « Réglages fins » du panneau d'options (pastilles + swatches) */
.gap-frame-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.gap-frame-pills > button {
padding: .22rem .55rem; border: 1px solid var(--color-border, #e2e2e2);
border-radius: 999px; background: #fff; cursor: pointer;
font-size: .75rem; font-weight: 600; color: #4b5563;
}
.gap-frame-pills > button:hover { border-color: var(--color-primary, #CE2B1E); }
.gap-frame-pills > button.is-active {
border-color: var(--color-primary, #CE2B1E); color: var(--color-primary, #CE2B1E);
background: rgba(206,43,30,.06);
}
.gap-frame-swatches { display: flex; gap: .35rem; margin-top: .4rem; }
.gap-frame-swatches > button {
width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--color-border, #d5d5d5); padding: 0;
}
.gap-frame-swatches > button.is-active {
outline: 2px solid var(--color-primary, #CE2B1E); outline-offset: 1px;
}
/* ── Sommaire de page ──────────────────────────────────────────────────────
COLLANT sous la navigation : il suit le défilement au lieu de rester en haut
de page, où il ne servait qu'une fois. `sticky` et non `fixed` : l'élément
reste dans le flux, donc il ne recouvre jamais le contenu — c'était le défaut
des anciennes pastilles.
COMPACT : une seule ligne, pas de numéros sur deux hauteurs. Le sommaire
occupe forcément une place dans le flux (c'est le prix d'un élément qui ne
recouvre rien) ; cette place doit donc être la plus courte possible. La
version à tuiles décalait le contenu de près de cent pixels, celle-ci d'une
quarantaine. */
.gap-sommaire {
/* Enfant du flux flexible des sections : pleine largeur obligatoire, sinon il
se rangerait en colonne à côté d'une section partielle. */
flex: 0 0 100%; max-width: 100%; width: 100%;
position: sticky;
/* Sous la barre de navigation, elle-même collante. */
top: var(--nav-height, 72px);
z-index: 900;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border, #e2ded8);
margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
/* En mode édition, la barre admin décale toute la page : le sommaire suit,
sinon il se colle sous une navigation qui n'est plus au même endroit. */
.admin-edit-mode .gap-sommaire,
body:has(.gap-navbar.admin-offset) .gap-sommaire {
top: calc(var(--nav-height, 72px) + var(--adminbar-h, 0px));
}
.gap-sommaire-liste {
list-style: none; margin: 0 auto; padding: 0;
max-width: 1140px;
display: flex; flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none; /* la barre de défilement gâcherait un filet de 40 px */
}
.gap-sommaire-liste::-webkit-scrollbar { display: none; }
.gap-sommaire-item { flex: 0 0 auto; }
.gap-sommaire-item > a {
display: flex; align-items: baseline; gap: .4rem;
padding: .55rem .85rem;
text-decoration: none; color: inherit;
font-size: .85rem; line-height: 1.2;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.gap-sommaire-item > a:hover,
.gap-sommaire-item > a:focus-visible { color: var(--color-primary, #CE2B1E); }
/* Section en cours de lecture : un filet sous l'entrée — il tient dans la
hauteur existante, là où un fond plein alourdirait la barre. */
.gap-sommaire-item > a.is-active {
color: var(--color-primary, #CE2B1E);
border-bottom-color: var(--color-primary, #CE2B1E);
}
.gap-sommaire-no {
font-weight: 700; font-size: .72rem;
color: var(--color-primary, #CE2B1E); opacity: .55;
font-variant-numeric: tabular-nums;
}
.gap-sommaire-item > a.is-active .gap-sommaire-no { opacity: 1; }
.gap-sommaire-nom { font-weight: 600; }
/* Les ancres visées doivent s'arrêter SOUS la navigation et le sommaire, sinon
le clic amène la section derrière deux barres collantes. */
.page-section { scroll-margin-top: calc(var(--nav-height, 72px) + 3.2rem); }
@media (prefers-reduced-motion: reduce) {
.gap-sommaire-item > a { transition: none; }
}
/* ── Sommaire des ÉLÉMENTS d'une section (15/09/2026, retour n° 11 du GAP) ──
En tête d'une liste ou d'une grille de cartes : un lien par élément, son
numéro, son titre et son étiquette (SectionRenderer::sommaireElements).
Rien à voir avec le sommaire de PAGE ci-dessus (.gap-sommaire, collant,
piloté par gap.js) : autres classes. Un thème le redessine à sa façon ; le
nombre de liens lui est donné par --gap-index-n. */
.gap-index {
display: flex; flex-wrap: wrap; gap: .5rem .6rem;
margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.gap-index-lien {
display: inline-flex; align-items: baseline; gap: .45rem;
padding: .45rem .85rem; border: 1px solid var(--color-border, #e3ded5); border-radius: 999px;
color: inherit; text-decoration: none; line-height: 1.2;
transition: border-color .2s, background-color .2s;
}
.gap-index-lien:hover,
.gap-index-lien:focus-visible { border-color: var(--color-primary, #CE2B1E); }
.gap-index-no { font-weight: 800; font-size: .85em; color: var(--color-primary, #CE2B1E); font-variant-numeric: tabular-nums; }
.gap-index-titre { font-weight: 600; }
.gap-index-etiquette { font-size: .78em; opacity: .7; }
/* L'élément visé s'arrête sous la navigation, comme une section. :where() : un
thème qui règle son propre décalage l'emporte sans surenchère. */
.page-section :where([id^="sec"][id*="-i"]) { scroll-margin-top: calc(var(--nav-height, 72px) + 3.2rem); }
@media (prefers-reduced-motion: reduce) {
.gap-index-lien { transition: none; }
}
/* ── Éditeur de texte enrichi : barre flottante unifiée ──────
Chrome GRAPHITE, le même langage que la barre de marques de titre
(.gap-marques-barre) : les deux font le même métier — du formatage
flottant en édition FO — et parlaient deux langues (blanc bordé contre
graphite ; 9999 en dur contre jeton). Harmonisées le 25/08/2026 à la
demande de Pierre-Louis (réserve du 25/08). Le COMPORTEMENT ne bouge
pas : apparition au focus de la zone, position au-dessus de la zone —
les commandes de bloc (titre, listes) s'appliquent sans sélection, une
barre à la sélection seule les rendrait inaccessibles. */
.gap-editor-toolbar {
display: none;
position: fixed;
z-index: var(--z-toast);
background: #1e2329;
border-radius: 7px;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
padding: 3px;
gap: 2px;
align-items: center;
}
.gap-editor-toolbar.visible { display: inline-flex; }
.gap-editor-toolbar button {
background: transparent;
border: none;
color: #d5d9de;
min-width: 30px; height: 30px;
padding: 0 .4rem;
border-radius: 5px;
font-size: .9rem;
line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.gap-editor-toolbar button:hover { background: rgba(255,255,255,.12); color: #fff; }
.gap-editor-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 .15rem; }
/* Zones éditables (mode admin) — grammaire « voile discret » (chantier B,
août 2026, remplace l'anneau permanent qui donnait un air de formulaire).
Trois états, lisibles sur les 4 fonds (clair, vert, sombre, photo) car
dérivés de currentColor — le thème bascule déjà la couleur du texte par
fond, la grammaire suit toute seule :
· REMPLIE : aucun cadre au repos — un ✎ discret et PERMANENT marque
l'éditable (le survol renforce mais n'est jamais le seul signal).
· VIDE (invite) : voile teinté + flou, placeholder dans la typographie
finale. Ni panneau blanc, ni bordure.
· EN ÉDITION : l'anneau bicolore (ex-signal permanent) devient le signal
de focus — il remplace l'outline vert, invisible sur fond vert. */
[data-editable] {
cursor: text; border-radius: .25rem;
transition: box-shadow var(--transition), background var(--transition);
}
/* Zone remplie : ✎ permanent, discret. Cédé pendant l'édition (badge de
langue), le flash « ✓ Enregistré » (.saved) et sur les champs marqués
vides côté serveur (data-empty). */
[data-editable]:not(:empty):not(:focus):not(.saved):not([data-empty="1"])::after {
content: "✎"; font-size: .55em; opacity: .35; margin-left: .35em;
vertical-align: super; font-style: normal;
}
/* Libellé d'un bouton (CTA) : la pastille d'édition dédiée suffit, pas de ✎
DANS le bouton. */
.gap-cta-edit [data-editable]::after { content: none; }
[data-editable]:hover {
box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2.5px rgba(255,255,255,.55);
}
[data-editable]:focus {
outline: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.75);
background: color-mix(in srgb, currentColor 13%, transparent);
}
/* Zone « à traduire » (19/09/2026) : dans une page d'une autre langue, elle
montre l'ORIGINAL français, qui n'est pas encore traduit. Estompé et
étiqueté, pour qu'on ne le prenne pas pour une traduction ; net dès qu'on
y entre pour le traduire. */
[data-editable][data-a-traduire]:not(:focus) {
opacity: .6;
font-style: italic;
box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 45%, transparent);
}
/* Même chaîne que la règle du ✎ ci-dessus, plus [data-a-traduire] : sans
elle, la règle du crayon (quatre :not) était plus spécifique et gagnait —
constaté sur capture le 19/09/2026, l'étiquette ne s'affichait pas. */
[data-editable][data-a-traduire]:not(:empty):not(:focus):not(.saved):not([data-empty="1"])::after {
/* Taille FIXE (rem), comme le badge de langue : en `em`, l'étiquette
grossissait avec la zone — énorme sur un chiffre clé, jusqu'à renvoyer
la valeur à la ligne (capture du 19/09/2026). */
content: "FR · à traduire"; font: 700 .6rem/1 var(--font-body); opacity: 1;
margin-left: .5em; vertical-align: super; font-style: normal;
letter-spacing: .03em; white-space: nowrap;
}
[data-editable].saving { opacity: .6; pointer-events: none; }
[data-editable].saved { outline: 2px solid var(--color-secondary); animation: saved-pulse .6s ease; }
/* Badge « langue éditée » sur le champ actif : rappelle dans quelle langue la
saisie est enregistrée (data-lang). Seuls les champs i18n portent data-lang. */
[data-editable][data-lang]:focus { position: relative; }
[data-editable][data-lang]:focus::after {
content: attr(data-lang);
position: absolute;
top: -1.5em;
right: 0;
z-index: 5;
text-transform: uppercase;
font: 700 .6rem/1 var(--font-body);
letter-spacing: .04em;
color: #fff;
background: var(--color-accent);
padding: .2em .5em;
border-radius: .25rem;
pointer-events: none;
}
/* Invite d'un champ éditable vide (mode édition) : voile teinté dérivé de
currentColor + flou d'arrière-plan — la surface se voit sur les 4 fonds,
y compris une photo chargée, sans panneau blanc ni bordure. Le placeholder
garde la typographie finale de la zone. */
[data-editable]:empty {
background: color-mix(in srgb, currentColor 12%, transparent);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
border-radius: .35rem;
min-height: 1.6em;
padding-inline: .3em;
}
/* Le placeholder NEUTRALISE toute décoration ::before posée par un thème sur
le même élément (ex. le trait d'eyebrow de silliere-v2026 : inline-block
26×2px + fond). Sans ces remises à zéro, la cascade fusionne propriété par
propriété : le texte du placeholder héritait de la boîte de 26px du trait
et s'empilait lettre à lettre dans un pavé coloré — constaté le 08/08/2026
sur le squelette d'une section neuve. */
[data-editable]:empty::before {
content: attr(data-placeholder);
color: currentColor; opacity: .55; font-style: italic;
display: inline; width: auto; height: auto;
background: none; margin: 0; vertical-align: baseline;
}
/* Champ item vide en mode édition : même voile (fini le panneau + tirets). */
[data-editable][data-empty="1"] {
display: block; min-height: 2rem; min-width: 6rem;
background: color-mix(in srgb, currentColor 12%, transparent);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
border-radius: .35rem;
}
[data-editable][data-empty="1"]::before {
content: attr(data-placeholder);
color: currentColor; opacity: .55; font-style: italic;
padding: .25rem; display: block;
width: auto; height: auto; background: none; margin: 0;
}
@keyframes saved-pulse {
0% { background: rgba(42,122,60,.2); }
100% { background: transparent; }
}
/* ── Déclinaison « fragment en flux » (extension chantier B, infos légales,
août 2026) — MÊMES tokens que « voile discret » (currentColor, alphas,
rayon .35rem), un seul réglage retiré : le flou.
Les zones éditables des documents légaux (mentions-legales.php,
confidentialite.php, accessibilite.php) sont de courts fragments enchâssés
dans une phrase juridique, jamais des blocs de section — et ces pages sont
toujours sur fond clair uni, jamais photo. Le flou perd donc sa seule
justification, et un défaut de Chromium le rend nuisible ici : un
fragment vide peut envelopper sur 2 lignes (invite longue à largeur
mobile) et le moteur calcule alors le flou sur la boîte TOTALE de
l'élément fragmenté plutôt que ligne par ligne — ce qui floute aussi le
texte qui PRÉCÈDE le fragment sur sa première ligne. Constaté sur
pil-local à 380px : « Directeur de la publication : » devenait illisible.
Le voile teinté seul (sans flou) n'a pas ce défaut et suffit sur fond
clair — d'où cette exception scoped au conteneur existant. */
.gap-legal-content [data-editable]:empty,
.gap-legal-content [data-editable][data-empty="1"] {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ── Filet de sécurité CONTRASTE (mode édition uniquement) ──────
Certains éléments ont une couleur de marque FIXE qui peut coïncider avec le
fond de la section → texte invisible pendant l'édition (ex. étiquette verte
sur section verte, sous-titre gris sur fond sombre, bouton blanc/vert sur fond
clair/vert). On force la lisibilité SANS toucher au rendu public (portée
.gap-sections-edit). Le rendu final définitif sera traité par la charte. */
/* (A) Textes éditables sur fond sombre/coloré/image : forcés en blanc lisible,
ce qui neutralise les couleurs fixes (étiquette verte, .text-muted, etc.). */
.gap-sections-edit .bg-dark-custom [data-editable],
.gap-sections-edit .bg-primary-custom [data-editable],
.gap-sections-edit .bg-secondary-custom [data-editable],
.gap-sections-edit .has-bg-image [data-editable],
.gap-sections-edit .has-dark-surface [data-editable] {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.gap-sections-edit .has-bg-image [data-editable] {
text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* Les zones vides portent le voile currentColor (grammaire « voile discret ») :
le ::before hérite de la couleur du texte de la section, rien à surcharger. */
/* (B) Libellé éditable d'un BOUTON : lisible sur TOUT fond, quelle que soit la
couleur de marque du bouton (blanc « ghost », vert « secondary », etc.).
Puce claire à texte sombre le temps de l'édition. */
.gap-sections-edit .gap-cta-edit [data-editable] {
background: rgba(255,255,255,.94) !important;
color: #2b2b2b !important;
-webkit-text-fill-color: #2b2b2b !important;
text-shadow: none !important;
border-radius: .35rem !important;
}
/* ── Lot 1 « édition intuitive » : états vides & badges ─────── */
/* État vide d'une collection (mode édition) : zone visible qui invite à agir. */
.gap-empty-state {
padding: 1.5rem 1rem;
border: 2px dashed #b9b3a8;
border-radius: .5rem;
background: rgba(255,255,255,.75);
color: #5a544a;
font-size: .95rem;
text-align: center;
}
/* Alerte « lien manquant » d'un bouton CTA (mode édition). Opaque → lisible
sur tout fond de section. */
.gap-cta-missing {
display: inline-flex; align-items: center;
margin-left: .35rem; padding: .2rem .5rem;
background: #8a5a00; color: #ffe9c0;
font-size: .68rem; font-weight: 700; letter-spacing: .02em;
border-radius: 999px; white-space: nowrap;
vertical-align: middle; cursor: help;
}
/* Badge-MENU de statut d'un item (Publié / Brouillon / Programmé) dans la pill
d'outils : cliquable, règle le statut sans passer par le BO (MT3). */
.gap-item-status-wrap { position: relative; display: inline-flex; }
/* Masqué à l'œil, lu par les lecteurs d'écran. Une pastille de couleur ne dit
rien à qui n'y voit pas : le libellé reste, hors du flux visuel. */
.gap-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* PASTILLE de statut. « PUBLIÉ » en toutes lettres était la partie la plus
large de la barre — 197 px au total, quand une tuile de logo en fait 124.
La couleur porte l'état, l'infobulle et le menu portent les mots. */
.gap-item-status {
display: inline-flex; align-items: center; justify-content: center; border: 0;
width: 1.65rem; height: 1.65rem; padding: 0; margin-right: .1rem;
background: #8a5a00;
border-radius: 50%; cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
transition: filter .12s, box-shadow .12s;
}
.gap-item-status:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
/* Le sous-groupe « dupliquer / supprimer » : ces deux-là touchent à
l'EXISTENCE de l'élément, les autres à sa place. Un filet les sépare, pour
qu'on ne supprime pas en visant « descendre ». */
.gap-item-grp {
display: inline-flex; gap: .15rem;
margin-left: .3rem; padding-left: .3rem;
border-left: 1px solid rgba(255,255,255,.22);
}
.gap-item-status:hover { filter: brightness(1.2); }
.gap-item-status.is-published { background: rgba(34,102,68,.92); color: #d9f2e4; }
.gap-item-status.is-draft { background: #8a5a00; color: #ffe9c0; }
.gap-item-status.is-scheduled { background: #1f4e79; color: #d5e8f7; }
.gap-item-status-menu {
display: none; position: absolute; top: calc(100% + .35rem); left: 0; z-index: 100;
background: #1e2329; border: 1px solid rgba(255,255,255,.1); border-radius: .4rem;
box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 210px; padding: .3rem;
flex-direction: column; gap: .1rem; text-transform: none; letter-spacing: 0;
}
.gap-item-status-menu.open { display: flex; }
.gap-item-status-opt {
display: flex; align-items: baseline; gap: .4rem;
border: 0; background: transparent; color: rgba(255,255,255,.85); cursor: pointer;
font-size: .82rem; line-height: 1.2; padding: .45rem .55rem; border-radius: .3rem;
text-align: left; width: 100%; white-space: nowrap;
transition: background .12s, color .12s;
}
.gap-item-status-opt:hover { background: rgba(255,255,255,.1); color: #fff; }
.gap-item-status-opt small { color: rgba(255,255,255,.45); font-size: .7rem; }
.gap-item-status-sched {
display: flex; align-items: center; gap: .35rem;
padding: .4rem .55rem; margin-top: .15rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.gap-item-status-sched label { color: rgba(255,255,255,.55); font-size: .72rem; margin: 0; }
.gap-item-status-date {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
color: #fff; border-radius: .3rem; font-size: .72rem; padding: .15rem .3rem;
color-scheme: dark; min-width: 0; flex: 1;
}
.gap-item-status-sched .gap-item-status-opt { width: auto; padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.25); }
/* ── Animations viewport (Intersection Observer) ───────────── */
/* L'état masqué initial n'est appliqué QUE si JS est actif (.js sur ) :
sans JS, l'IntersectionObserver n'ajoute jamais .anim-visible → on ne doit pas
masquer le contenu. */
@media (prefers-reduced-motion: no-preference) {
/* Durée (.5s) et courbe (ease) = valeurs par défaut ; gap.js peut les surcharger
par élément (transition-duration / -timing-function inline) selon les réglages
anim_duration / anim_easing de la section. */
/* M1 (25/08/2026) : les 12 effets consomment les jetons — mêmes valeurs
(--dur-5 = .5s, --ease-standard = ease), « rise » garde ses .6s (cas
nommé). Un thème règle désormais la respiration de TOUTES les
apparitions en surchargeant deux jetons, sans réécrire douze règles. */
.js [data-anim] { opacity: 0; will-change: opacity, transform, filter; }
.js [data-anim="fade"] { transition: opacity var(--dur-5) var(--ease-standard); }
.js [data-anim="slide-up"] { transform: translateY(30px); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="slide-down"] { transform: translateY(-30px); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="slide-left"] { transform: translateX(-30px); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="slide-right"] { transform: translateX(30px); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="zoom"] { transform: scale(.95); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="zoom-out"] { transform: scale(1.06); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="rise"] { transform: translateY(60px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
.js [data-anim="blur"] { filter: blur(12px); transition: opacity var(--dur-5) var(--ease-standard), filter var(--dur-5) var(--ease-standard); }
.js [data-anim="flip"] { transform: perspective(600px) rotateX(10deg); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim="tilt"] { transform: perspective(800px) rotateY(-8deg) translateX(20px); transition: opacity var(--dur-5) var(--ease-standard), transform var(--dur-5) var(--ease-standard); }
.js [data-anim].anim-visible { opacity: 1; transform: none; filter: none; }
}
/* P0-2 (24/08/2026) — aperçu d'animation en mode édition. Le chrome d'édition
(poignées, menus ⋮, outils d'item, barres média) est un DESCENDANT des
éléments [data-anim] : l'opacité d'un parent plafonne ses enfants, il
clignoterait avec eux pendant GapAnim.replay(). La classe .is-anim-preview,
posée par gap.js le temps de l'effet, l'escamote proprement à la place.
Hors aperçu, le mode édition ne masque jamais rien : gap.js y révèle tous
les [data-anim] dès le chargement, sans animer. */
.admin-edit-mode .is-anim-preview .gap-insert-before,
.admin-edit-mode .is-anim-preview .gap-section-tools,
.admin-edit-mode .is-anim-preview .gap-item-tools,
.admin-edit-mode .is-anim-preview .gap-media-edit,
.admin-edit-mode .is-anim-preview .gap-add-item-wrap { visibility: hidden; }
/* ── Effet d'ouverture des sous-menus (réglage menu_submenu_effect) ────────
Porté par data-sousmenu-effet sur la liste de navigation ; « aucun »
(défaut) ne matche rien — le déroulé s'ouvre comme toujours. Animations
UNIQUEMENT sous no-preference : un visiteur qui refuse le mouvement ne
les voit jamais, quel que soit le réglage (réserve du 10/08). Elles
couvrent aussi les sous-niveaux (.gap-nav-sous-menu est un .dropdown-menu). */
@media (prefers-reduced-motion: no-preference) {
[data-sousmenu-effet="fondu"] .dropdown-menu.show {
animation: gapSmFondu var(--dur-2) var(--ease-standard);
}
[data-sousmenu-effet="glisse"] .dropdown-menu.show {
animation: gapSmGlisse var(--dur-3) var(--ease-standard);
}
@keyframes gapSmFondu { from { opacity: 0; } }
@keyframes gapSmGlisse { from { opacity: 0; transform: translateY(-6px); } }
}
/* Transition de navigation entre pages */
@media (prefers-reduced-motion: no-preference) {
.page-transition-out { opacity: 0; transition: opacity .15s ease; }
.page-transition-in { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}
/* Agenda public (V2) : l'année et le quantième portaient text-danger — le
rouge Bootstrap brut, identique chez tous les clients. Le jeton suit le
thème (bleu plan sur la vitrine, vert sauge chez Ta Cadence…). */
.gap-agenda-annee,
.gap-agenda-jour { color: var(--color-primary); }
/* ── Frise chronologique (V6, 25/08/2026 — extrait du gabarit timeline.php :
76 lignes de