/* ========================================================================== BOOTH AI STUDIO — core.css : tout le projet : jetons, composants Booth UI, thème « lux » partagé, sens RTL Architecture et règles : docs/CSS-ARCHITECTURE.md (i278). Chaque section ci-dessous est « portée » : ses sélecteurs commencent par :where(.css--) et ne s'appliquent que sur les pages qui appellent css_use('/'). Spécificité inchangée (:where = 0). Sans portée : 1. Jetons 2. Composants Booth UI — sur toutes les pages. Sections : core/rtl ← ancien rtl.css core/lux ← ancien lux.css ========================================================================== */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SANS PORTÉE — ancien tokens.css ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* @tokens-start */ /* ============================================================ BOOTH AI STUDIO — JETONS DE DESIGN (i268) ------------------------------------------------------------ LA source unique des couleurs, polices, rayons, ombres et vitesses de tout le projet : site public, espace organisateur, admin et cabine. Chargé EN PREMIER, avant lux.css. Règle : une page ne contient plus de code couleur (#c9a962…), elle utilise un jeton (var(--gold-soft)). Changer une valeur ici la change partout. 1. Jetons (noms anglais) — les valeurs. 2. Alias historiques (--or, --noir, --ivoire…) — les noms que le code existant utilise déjà ; ils pointent vers les jetons. 3. Variantes de contexte : lux2.css (site public) et lux-admin.css (espaces connectés) ne font que CHOISIR des jetons d'ici, ils ne contiennent plus de valeurs. Les composants partagés (boutons, chips, badges, rubans, cartes…) sont dans components.css, chargé juste après. Catalogue vivant : /admin/styleguide.php Pour un fond semi-transparent : rgba(var(--gold-rgb), .3). ============================================================ */ :root { /* ── 1. Couleurs ─────────────────────────────────────────── */ /* Or — l'or officiel de la marque, puis ses nuances en usage. NB : --gold-soft (#c9a962) est l'ancien or « champagne » encore présent sur ~40 pages ; l'aligner sur --gold se fera ici, en une ligne, une fois validé visuellement. */ --gold: #D4AF37; --gold-rgb: 212, 175, 55; --gold-light: #F2C94C; --gold-light-rgb: 242, 201, 76; --gold-dark: #8a7136; --gold-dark-2: #8a6f36; /* site public */ --gold-soft: #c9a962; --gold-soft-rgb: 201, 169, 98; --gold-pale: #e6cf9a; --gold-warm: #e6c07a; --gold-warm-rgb: 230, 192, 122; --gold-sand: #d9b877; --gold-sand-rgb: 217, 184, 119; /* Noirs et fonds */ --black: #0b0a08; --black-rgb: 11, 10, 8; --black-2: #12100c; --black-warm: #0a0806; --black-warm-rgb: 10, 8, 6; /* site public */ --black-warm-2:#120e0a; --black-brown: #17110a; /* texte posé sur un bouton or */ --surface-1: #12100c; /* carte (espaces connectés) */ --surface-2: #17140e; /* carte survolée */ --surface-3: #0e0d0a; /* champ, creux */ --surface-site: #15100b; /* carte (site public) */ --surface-site-2: #1b150e; /* Ivoires (texte) */ --ivory: #f5ebdd; --ivory-rgb: 245, 235, 221; --ivory-2: #cfc8b8; /* texte secondaire */ --ivory-2-site:#c9c1b1; /* texte secondaire (site public) */ --cream: #f3eee3; --cream-rgb: 243, 238, 227; /* Filets (bordures fines) */ --line: rgba(201, 169, 98, .28); --line-soft: rgba(243, 238, 227, .10); --line-site: rgba(217, 184, 119, .30); --line-soft-site: rgba(245, 240, 230, .09); /* États */ --success: #7fb08d; --success-light: #8fd6ad; --danger: #e6817f; /* Pastilles d'état (texte clair sur fond teinté — kit de l'admin) */ --status-on: #9fe8c0; --status-on-rgb: 126, 240, 178; /* en ligne, actif */ --status-info: #8fdcea; --status-info-rgb: 34, 211, 238; /* terminé, info */ --status-off: #d98c8c; --status-off-rgb: 220, 90, 90; /* coupé, erreur */ --ribbon-draft: linear-gradient(90deg, #c2410c, #ea7a1f); /* ruban « brouillon » */ --ribbon-live: linear-gradient(90deg, #15803d, #22a35a); /* ruban « publié » */ /* Palette « Magie » (branding board 2) — accents */ --pink: #FF6EC7; --pink-rgb: 255, 110, 199; --purple: #7861FF; --purple-rgb: 120, 97, 255; --aqua: #39E5E0; --aqua-rgb: 57, 229, 224; /* ── Polices ─────────────────────────────────────────────── */ --font-serif: "Cormorant Garamond", Georgia, serif; --font-sans: "Inter", system-ui, sans-serif; /* Échelle de texte (pour les nouveaux composants — phase 2) */ --text-2xs: .72rem; --text-xs: .78rem; --text-sm: .88rem; --text-md: 1rem; --text-lg: 1.15rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: clamp(2.2rem, 4.5vw, 3.4rem); /* Espacements (pour les nouveaux composants — phase 2) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Rayons ──────────────────────────────────────────────── */ --radius-xs: 8px; /* pastilles, badges */ --radius-sm: 10px; /* champs, petits boutons */ --radius-md: 14px; /* boutons, vignettes */ --radius-lg: 18px; /* cartes (espaces connectés) */ --radius-xl: 20px; /* cartes (site public) */ --radius-2xl: 24px; /* grandes cartes, aperçus */ --radius-pill: 999px; /* chips, filtres, statuts */ /* ── Ombres ──────────────────────────────────────────────── */ --shadow-1: 0 2px 10px rgba(0, 0, 0, .28); --shadow-2: 0 14px 34px rgba(0, 0, 0, .45); --shadow-3: 0 22px 60px rgba(0, 0, 0, .55); --shadow-gold: 0 10px 26px rgba(212, 175, 55, .26); /* ── Mouvement ───────────────────────────────────────────── */ --ease-fast: .22s cubic-bezier(.2, .8, .2, 1); --ease-slow: .38s cubic-bezier(.2, .8, .2, 1); /* ── Tailles « au doigt » ────────────────────────────────── */ --tap-size: 52px; --tap-size-sm: 44px; /* ── 2. Alias historiques (valeurs des espaces connectés) ── */ --noir: var(--black); --noir2: var(--black-2); --ivoire: var(--ivory); --ivoire-2: var(--ivory-2); --or: var(--gold); --or-clair: var(--gold-light); --or-sombre: var(--gold-dark); --hair: var(--line); --hair-soft: var(--line-soft); --serif: var(--font-serif); --sans: var(--font-sans); } /* @tokens-end */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SANS PORTÉE — ancien components.css ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ============================================================ BOOTH AI STUDIO — COMPOSANTS PARTAGÉS « Booth UI » (i270) ------------------------------------------------------------ Les briques communes à tout le projet (site public, espace organisateur, admin, cabine), comme Bootstrap mais à nos couleurs. Chargé juste après tokens.css, sur toutes les pages. Règles : • Préfixe ui- : aucun conflit avec Bootstrap ni avec les anciennes classes (btn-lux, chip-opt, pastille…). • Uniquement des jetons de tokens.css — aucune valeur en dur. • Une page n'écrit plus son propre bouton, chip, badge ou ruban : elle utilise ceux-ci. Modifier un composant ici le modifie partout. Catalogue vivant, avec le code à copier : /admin/styleguide.php Sommaire 1. Boutons .ui-btn (--gold --line --ghost --danger --sm --lg --block) 2. Chips / filtres .ui-chips .ui-chip (.is-active) .ui-chip__count .ui-segment 3. États .ui-status (--on --draft --done --off) .ui-badge .ui-dot 4. Rubans .ui-ribbon (--draft --live) 5. Cartes .ui-card (--hover) .ui-card__head .ui-card__body 6. Messages .ui-notice (--success --danger --warning) 7. Champs .ui-field .ui-label .ui-input .ui-hint 8. Titres .ui-eyebrow .ui-title .ui-lead 9. Vide .ui-empty 10. Interrupteur .ui-switch (.ui-switch__track) — i277 ============================================================ */ /* ── 1. BOUTONS ─────────────────────────────────────────────── */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: var(--tap-size-sm); padding: 0 1.5em; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--ivory); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast), transform var(--ease-fast); } .ui-btn:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .08); color: var(--ivory); } .ui-btn:active { transform: translateY(1px); } .ui-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } .ui-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--black-brown); box-shadow: var(--shadow-gold); } .ui-btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--black-brown); } .ui-btn--line { border-color: var(--line); } .ui-btn--ghost { border-color: transparent; color: var(--ivory-2); } .ui-btn--ghost:hover { border-color: transparent; color: var(--ivory); background: rgba(var(--ivory-rgb), .06); } .ui-btn--danger { border-color: rgba(var(--status-off-rgb), .45); color: var(--status-off); } .ui-btn--danger:hover { border-color: var(--status-off); background: rgba(var(--status-off-rgb), .12); color: var(--status-off); } .ui-btn--sm { min-height: 34px; padding: 0 1.1em; font-size: var(--text-2xs); letter-spacing: .12em; } .ui-btn--lg { min-height: var(--tap-size); padding: 0 2em; font-size: var(--text-sm); } .ui-btn--block { display: flex; width: 100%; } .ui-btn .ui-btn__ic { font-size: 1.15em; letter-spacing: 0; } /* ── 2. CHIPS / FILTRES ─────────────────────────────────────── */ /*
Toutes 9…
Marche avec , */ .ui-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: rgba(var(--black-rgb), .55); } .ui-segment > * { min-height: 32px; padding: 0 1em; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ivory-2); font: 500 var(--text-xs) / 1 var(--font-sans); letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; gap: .45em; cursor: pointer; } .ui-segment > *:hover { color: var(--ivory); } .ui-segment > .is-active, .ui-segment > [aria-pressed="true"] { background: var(--gold); color: var(--black-brown); font-weight: 600; } /* ── 3. ÉTATS ───────────────────────────────────────────────── */ /* Pastille d'état avec point : En ligne */ .ui-status { display: inline-flex; align-items: center; gap: .45em; padding: .45em .95em; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(var(--ivory-rgb), .04); color: var(--ivory-2); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } .ui-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .ui-status--on { color: var(--status-on); border-color: rgba(var(--status-on-rgb), .42); background: rgba(var(--status-on-rgb), .10); } .ui-status--draft { color: var(--gold-light); border-color: var(--line); background: rgba(var(--gold-rgb), .10); } .ui-status--done { color: var(--status-info); border-color: rgba(var(--status-info-rgb), .35); background: rgba(var(--status-info-rgb), .09); } .ui-status--off { color: var(--status-off); border-color: rgba(var(--status-off-rgb), .40); background: rgba(var(--status-off-rgb), .10); } /* Petit badge sans point : Pro */ .ui-badge { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(var(--gold-rgb), .10); color: var(--gold-light); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; } .ui-badge--solid { background: var(--gold); border-color: var(--gold); color: var(--black-brown); } .ui-badge--neutral { background: rgba(var(--ivory-rgb), .05); border-color: var(--line-soft); color: var(--ivory-2); } .ui-badge--success { background: rgba(var(--status-on-rgb), .10); border-color: rgba(var(--status-on-rgb), .4); color: var(--status-on); } .ui-badge--danger { background: rgba(var(--status-off-rgb), .10); border-color: rgba(var(--status-off-rgb), .4); color: var(--status-off); } /* Rond de notification (compteur sur une carte) : AI */ .ui-dot { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--gold); color: var(--black-brown); font-size: .66rem; font-weight: 700; letter-spacing: .04em; line-height: 1; box-shadow: 0 0 0 3px var(--black), var(--shadow-gold); } .ui-dot--corner { position: absolute; top: -8px; right: -8px; z-index: 3; } [dir="rtl"] .ui-dot--corner { right: auto; left: -8px; } /* ── 4. RUBANS ──────────────────────────────────────────────── */ /* Coin de carte : le parent doit être position:relative; overflow:hidden. Brouillon (coin gauche) Publié (coin droit) */ .ui-ribbon { position: absolute; top: 41px; width: 250px; padding: 7px 0; z-index: 4; pointer-events: none; text-align: center; line-height: 1; white-space: nowrap; color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); } .ui-ribbon--draft { left: -70px; transform: rotate(-45deg); background: var(--ribbon-draft); border-top: 1px dashed rgba(255, 255, 255, .55); border-bottom: 1px dashed rgba(255, 255, 255, .55); } .ui-ribbon--live { right: -70px; transform: rotate(45deg); background: var(--ribbon-live); } /* ── 5. CARTES ──────────────────────────────────────────────── */ .ui-card { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--ivory); overflow: hidden; } .ui-card--hover { transition: transform var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast); } .ui-card--hover:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-2); } .ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); } .ui-card__title { margin: 0; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; } .ui-card__body { padding: var(--space-5); } .ui-card__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line-soft); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } /* ── 6. MESSAGES ────────────────────────────────────────────── */ .ui-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(var(--gold-rgb), .07); color: var(--ivory); font-size: var(--text-sm); line-height: 1.55; } .ui-notice a { color: var(--gold); } .ui-notice--success { border-color: rgba(var(--status-on-rgb), .4); background: rgba(var(--status-on-rgb), .07); } .ui-notice--danger { border-color: rgba(var(--status-off-rgb), .45); background: rgba(var(--status-off-rgb), .08); } .ui-notice--warning { border-color: rgba(var(--gold-warm-rgb), .5); background: rgba(var(--gold-warm-rgb), .08); } /* ── 7. CHAMPS ──────────────────────────────────────────────── */ .ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .ui-label { font-size: var(--text-sm); color: var(--ivory); font-weight: 500; } .ui-input { width: 100%; min-height: var(--tap-size-sm); padding: 0 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ivory); font: 400 var(--text-md) / 1.4 var(--font-sans); transition: border-color var(--ease-fast), box-shadow var(--ease-fast); } textarea.ui-input { padding: 12px 14px; min-height: 96px; resize: vertical; } .ui-input::placeholder { color: rgba(var(--ivory-rgb), .4); } .ui-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18); } .ui-hint { font-size: var(--text-xs); color: var(--ivory-2); } /* ── 8. TITRES ──────────────────────────────────────────────── */ .ui-eyebrow { display: inline-block; font-size: var(--text-2xs); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); } .ui-title { margin: .2em 0 .35em; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-3xl); line-height: 1.1; color: var(--ivory); } .ui-lead { font-size: var(--text-lg); color: var(--ivory-2); line-height: 1.6; max-width: 62ch; } /* ── 9. VIDE ────────────────────────────────────────────────── */ .ui-empty { padding: var(--space-7) var(--space-5); text-align: center; color: var(--ivory-2); border: 1px dashed var(--line); border-radius: var(--radius-lg); } .ui-empty__ic { font-size: 2rem; display: block; margin-bottom: var(--space-3); } /* ── 10. INTERRUPTEUR (i277) ────────────────────────────────── */ /* Une case à cocher présentée en interrupteur. Le champ reste un vrai checkbox : le formulaire envoie exactement la même chose qu'avant. */ .ui-switch { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; margin-bottom: var(--space-4); } .ui-switch > input { position: absolute; opacity: 0; pointer-events: none; } .ui-switch__track { position: relative; flex: none; width: 42px; height: 24px; margin-top: 1px; border-radius: var(--radius-pill); background: rgba(var(--ivory-rgb), .12); border: 1px solid var(--line-soft); transition: background var(--ease-fast), border-color var(--ease-fast); } .ui-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ivory-2); transition: transform var(--ease-fast), background var(--ease-fast); } .ui-switch > input:checked + .ui-switch__track { background: var(--gold); border-color: var(--gold); } .ui-switch > input:checked + .ui-switch__track::after { transform: translateX(18px); background: var(--black-brown); } .ui-switch > input:focus-visible + .ui-switch__track { outline: 2px solid var(--gold-light); outline-offset: 3px; } .ui-switch > input:disabled + .ui-switch__track { opacity: .45; } .ui-switch b { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--ivory); } .ui-switch small { display: block; margin-top: 2px; } [dir="rtl"] .ui-switch > input:checked + .ui-switch__track::after { transform: translateX(-18px); } [dir="rtl"] .ui-switch__track::after { left: auto; right: 3px; } @media (prefers-reduced-motion: reduce) { .ui-btn, .ui-chip, .ui-card--hover, .ui-switch__track, .ui-switch__track::after { transition: none; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @section core/rtl Ancien fichier : rtl.css Activée par css_use('core/rtl') dans : src/i18n.php ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ══════════════════════════════════════════════════════════════════════════ BOOTH AI STUDIO — CE QUE LE SENS DE LECTURE NE CORRIGE PAS TOUT SEUL (i176) ══════════════════════════════════════════════════════════════════════════ Tout le CSS du site a été converti en propriétés logiques : `margin-inline-start` au lieu de `margin-left`, `inset-inline-start` au lieu de `left`, `text-align:start` au lieu de `left`. Ces propriétés suivent le sens de lecture, donc elles se retournent toutes seules quand la page passe en `dir="rtl"`, et elles sont identiques aux anciennes dans les dix langues qui se lisent de gauche à droite. Reste ce qu'aucune propriété logique ne couvre. C'est tout ce fichier, et il ne s'applique QU'EN arabe (ou toute autre écriture droite-à-gauche). Ce qui n'est VOLONTAIREMENT pas retourné : les animations décoratives (le balayage de lumière sur une carte, la dérive du mur du héros, la rotation des vignettes). Un reflet n'a pas de sens de lecture, et le retourner ne rendrait service à personne. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LA LETTRINE ──────────────────────────────────────────────────────── `float` n'a pas d'équivalent logique fiable sur tous les navigateurs, et la marge de la lettrine est écrite en raccourci (haut droite bas gauche) : les deux doivent être retournés à la main. */ :where(.css-core-rtl) [dir="rtl"] .occ-texte p:first-child::first-letter, [dir="rtl"]:where(.css-core-rtl) .occ-texte p:first-child::first-letter { float:right; margin:.06em 0 0 .1em; } /* ── 2. LES CHEVRONS DE LA VISIONNEUSE ──────────────────────────────────── Leurs POSITIONS se retournent déjà (inset-inline). Mais le dessin, lui, ne se retourne pas : « précédent » se retrouvait à droite avec un chevron qui pointe à gauche. On échange donc les deux glyphes. */ :where(.css-core-rtl) [dir="rtl"] .lb-prev, [dir="rtl"]:where(.css-core-rtl) .lb-prev {font-size:0} :where(.css-core-rtl) [dir="rtl"] .lb-prev::before, [dir="rtl"]:where(.css-core-rtl) .lb-prev::before {content:"›";font-size:2.4rem;line-height:1} :where(.css-core-rtl) [dir="rtl"] .lb-next, [dir="rtl"]:where(.css-core-rtl) .lb-next {font-size:0} :where(.css-core-rtl) [dir="rtl"] .lb-next::before, [dir="rtl"]:where(.css-core-rtl) .lb-next::before {content:"‹";font-size:2.4rem;line-height:1} /* ── 3. LES FLÈCHES ÉCRITES DANS LE TEXTE ───────────────────────────────── « ← Galeries », « Voir le catalogue → » : la flèche fait partie du balisage ou de la traduction. Celles du balisage sont retournées ici, par un miroir horizontal qui ne touche qu'au dessin. Celles des traductions sont écrites dans le bon sens directement dans lang/ar.php. */ :where(.css-core-rtl) [dir="rtl"] .g-back::first-letter, [dir="rtl"]:where(.css-core-rtl) .g-back::first-letter, :where(.css-core-rtl) [dir="rtl"] .occ-fil-retour::first-letter, [dir="rtl"]:where(.css-core-rtl) .occ-fil-retour::first-letter { display:inline-block; transform:scaleX(-1); } /* ── 4. CE QUI DOIT RESTER EN CHIFFRES OCCIDENTAUX ──────────────────────── Les prix, les codes de cabine et les adresses restent lisibles de gauche à droite même au milieu d'une phrase arabe : sans cette isolation, un « 20 € » collé à du texte arabe se réordonne à l'affichage. */ :where(.css-core-rtl) [dir="rtl"] .hpamt, [dir="rtl"]:where(.css-core-rtl) .hpamt, :where(.css-core-rtl) [dir="rtl"] .b-prix, [dir="rtl"]:where(.css-core-rtl) .b-prix, :where(.css-core-rtl) [dir="rtl"] .prod-price, [dir="rtl"]:where(.css-core-rtl) .prod-price, :where(.css-core-rtl) [dir="rtl"] .cart-sum, [dir="rtl"]:where(.css-core-rtl) .cart-sum, :where(.css-core-rtl) [dir="rtl"] .lb-count, [dir="rtl"]:where(.css-core-rtl) .lb-count, :where(.css-core-rtl) [dir="rtl"] code, [dir="rtl"]:where(.css-core-rtl) code, :where(.css-core-rtl) [dir="rtl"] .mono, [dir="rtl"]:where(.css-core-rtl) .mono { direction:ltr; unicode-bidi:isolate; } /* ── 5. LES PUCES ET LES LISTES ──────────────────────────────────────────── Une liste à puces garde ses puces du côté de la lecture. */ :where(.css-core-rtl) [dir="rtl"] ul, [dir="rtl"]:where(.css-core-rtl) ul, :where(.css-core-rtl) [dir="rtl"] ol, [dir="rtl"]:where(.css-core-rtl) ol {padding-inline-start:1.2em;padding-inline-end:0} /* ── 6. LES CHAMPS DE SAISIE ─────────────────────────────────────────────── Un champ qui attend une adresse e-mail, une URL ou un code se remplit de gauche à droite, même sur une page arabe : c'est le contenu qui décide, pas la page. */ :where(.css-core-rtl) [dir="rtl"] input[type="email"], [dir="rtl"]:where(.css-core-rtl) input[type="email"], :where(.css-core-rtl) [dir="rtl"] input[type="url"], [dir="rtl"]:where(.css-core-rtl) input[type="url"], :where(.css-core-rtl) [dir="rtl"] input[type="tel"], [dir="rtl"]:where(.css-core-rtl) input[type="tel"], :where(.css-core-rtl) [dir="rtl"] input[name="public_slug"], [dir="rtl"]:where(.css-core-rtl) input[name="public_slug"], :where(.css-core-rtl) [dir="rtl"] input[name="parent_password"], [dir="rtl"]:where(.css-core-rtl) input[name="parent_password"], :where(.css-core-rtl) [dir="rtl"] input[type="password"], [dir="rtl"]:where(.css-core-rtl) input[type="password"] { direction:ltr; text-align:start; } /* ── 7. LES COMPARATEURS AVANT / APRÈS (i190) ────────────────────────────── Le curseur, la ligne et le découpage de l'image « après » se règlent en pourcentage depuis la GAUCHE (clip-path, style.left posé par le script). Retournés à moitié, ils se décalaient : le comparateur garde donc le sens physique — une photo n'a pas de sens de lecture. Le texte des étiquettes s'affiche toujours correctement en arabe. */ :where(.css-core-rtl) [dir="rtl"] .ba, [dir="rtl"]:where(.css-core-rtl) .ba, :where(.css-core-rtl) [dir="rtl"] .ab, [dir="rtl"]:where(.css-core-rtl) .ab {direction:ltr} /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @section core/lux Ancien fichier : lux.css Activée par css_use('core/lux') dans : booth/index.php, frames/frame-page.php, frames/index.php, index.php, operator/_head.php, operator/forgot.php, operator/login.php, operator/password.php, operator/register.php, templates/collection.php, templates/index.php, src/site_chrome.php ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ============================================================ BOOTH AI STUDIO — Thème « maison de luxe » partagé (landing + catalogue + pages publiques) Noir profond · ivoire · or champagne · Cormorant Garamond ============================================================ */ /* Les couleurs et polices (--noir, --ivoire, --or, --serif…) sont définies dans tokens.css, chargé avant ce fichier (i268). */ :where(.css-core-lux) *, *:where(.css-core-lux) { margin:0; padding:0; box-sizing:border-box; } html.lenis:where(.css-core-lux) { height:auto; } :where(.css-core-lux) .lenis.lenis-smooth, .lenis.lenis-smooth:where(.css-core-lux) { scroll-behavior:auto; } :where(.css-core-lux) body { background:var(--noir); color:var(--ivoire); font-family:var(--sans); font-weight:300; line-height:1.7; overflow-x:hidden; letter-spacing:.01em; } :where(.css-core-lux) a { color:inherit; text-decoration:none; } :where(.css-core-lux) ::selection { background:var(--or); color:var(--noir); } /* ---------- Écrin : filet doré + lueur + grain + particules ---------- */ :where(.css-core-lux) .frame-edge { position:fixed; inset:14px; border:1px solid var(--hair); pointer-events:none; z-index:90; } @media (max-width:760px){ :where(.css-core-lux) .frame-edge { inset:8px; } } :where(.css-core-lux) .glow { position:fixed; inset:0; z-index:-3; background: radial-gradient(60vw 42vh at 78% -6%, rgba(201,169,98,.10), transparent 60%), radial-gradient(52vw 40vh at 12% 108%, rgba(201,169,98,.07), transparent 60%), var(--noir); } :where(.css-core-lux) .grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :where(.css-core-lux) #particles { position:fixed; inset:0; z-index:-2; pointer-events:none; } /* ---------- Étiquettes ---------- */ :where(.css-core-lux) .eyebrow { font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--or); } :where(.css-core-lux) .rule { display:inline-block; width:54px; height:1px; background:var(--or); vertical-align:middle; margin:0 16px; opacity:.7; } /* ---------- Navigation ---------- */ :where(.css-core-lux) nav.lux-nav { position:fixed; top:0; inset-inline-start:0; inset-inline-end:0; z-index:100; display:flex; align-items:center; padding:26px clamp(24px,5vw,64px); transition:background .5s, padding .4s; } :where(.css-core-lux) nav.lux-nav.scrolled { background:rgba(11,10,8,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--hair-soft); padding-top:16px; padding-bottom:16px; } :where(.css-core-lux) .brand { font-family:var(--serif); font-size:1.35rem; letter-spacing:.14em; text-transform:uppercase; } :where(.css-core-lux) .brand b { color:var(--or); font-weight:500; } :where(.css-core-lux) .nav-links { margin-inline-start:auto; display:flex; gap:clamp(10px,2.4vw,34px); align-items:center; } :where(.css-core-lux) .nav-links a { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivoire-2); transition:color .3s; position:relative; } :where(.css-core-lux) .nav-links a::after { content:""; position:absolute; inset-inline-start:0; bottom:-6px; width:0; height:1px; background:var(--or); transition:width .35s; } :where(.css-core-lux) .nav-links a:hover { color:var(--ivoire); } :where(.css-core-lux) .nav-links a:hover::after { width:100%; } :where(.css-core-lux) .nav-cta { border:1px solid var(--hair); padding:11px 26px; color:var(--or) !important; } :where(.css-core-lux) .nav-cta:hover { background:var(--or); color:var(--noir) !important; } :where(.css-core-lux) .nav-cta::after { display:none !important; } @media (max-width:900px){ :where(.css-core-lux) .nav-links a:not(.nav-cta) { display:none; } } /* ---------- Titres ---------- */ :where(.css-core-lux) h1, :where(.css-core-lux) h2 { font-family:var(--serif); font-weight:500; } /* Accent italique doré. IMPORTANT : le dégradé clippé au texte doit être porté par l'élément qui contient directement le texte animé (.w), sinon Chrome rend le texte invisible quand les mots sont transformés (split-text). */ :where(.css-core-lux) h1 em, :where(.css-core-lux) h2 em { font-style:italic; font-weight:400; color:var(--or); } :where(.css-core-lux) h1 em .w, :where(.css-core-lux) h2 em .w { background:linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair) 70%,var(--or)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--or); } /* Sans animation (no-motion / pas de split) : dégradé directement sur l'em */ :where(.css-core-lux) .no-motion h1 em, .no-motion:where(.css-core-lux) h1 em, :where(.css-core-lux) .no-motion h2 em, .no-motion:where(.css-core-lux) h2 em { background:linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair) 70%,var(--or)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } :where(.css-core-lux) .split .w-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; } :where(.css-core-lux) .split .w { display:inline-block; transform:translateY(115%); will-change:transform; } :where(.css-core-lux) .no-motion .split .w, .no-motion:where(.css-core-lux) .split .w { transform:none; } :where(.css-core-lux) .sec-head { text-align:center; margin-bottom:80px; } :where(.css-core-lux) .sec-head h2 { font-size:clamp(2.2rem,4.8vw,3.8rem); line-height:1.1; margin-top:22px; } /* ---------- Boutons ---------- */ :where(.css-core-lux) .btn-lux { position:relative; font-family:var(--sans); font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; padding:19px 46px; overflow:hidden; border:0; cursor:pointer; transition:color .45s, border-color .45s, transform .3s; display:inline-block; } :where(.css-core-lux) .btn-fill { background:var(--or); color:var(--noir); font-weight:500; } :where(.css-core-lux) .btn-line { border:1px solid var(--hair); color:var(--ivoire); background:transparent; } :where(.css-core-lux) .btn-lux::before { content:""; position:absolute; inset:0; background:var(--or-clair); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.7,0,.2,1); z-index:-1; } :where(.css-core-lux) .btn-line::before { background:var(--or); } :where(.css-core-lux) .btn-lux:hover::before { transform:scaleX(1); } :where(.css-core-lux) .btn-fill:hover { color:var(--noir); } :where(.css-core-lux) .btn-line:hover { color:var(--noir); border-color:var(--or); } /* ---------- ÉVÉNEMENTS : galerie horizontale pilotée par le scroll ---------- */ :where(.css-core-lux) .events-pin { position:relative; overflow:hidden; } :where(.css-core-lux) .events-track { display:flex; gap:26px; padding:0 clamp(24px,6vw,80px); width:max-content; align-items:stretch; } :where(.css-core-lux) .event-card { position:relative; width:min(420px,78vw); aspect-ratio:3/4; overflow:hidden; border:1px solid var(--hair-soft); flex-shrink:0; } :where(.css-core-lux) .event-card .bg { position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.2,.8,.2,1); } :where(.css-core-lux) img.bg { width:100%; height:100%; object-fit:cover; display:block; } :where(.css-core-lux) .event-card:hover .bg { transform:scale(1.06); } :where(.css-core-lux) .event-card .veil { position:absolute; inset:0; background:linear-gradient(185deg, transparent 30%, rgba(11,10,8,.88) 82%); } :where(.css-core-lux) .event-card .ec-body { position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; padding:30px; } :where(.css-core-lux) .event-card .ec-num { font-family:var(--serif); font-style:italic; color:var(--or); font-size:1.05rem; } :where(.css-core-lux) .event-card h3 { font-family:var(--serif); font-weight:500; font-size:2rem; margin:6px 0 6px; } :where(.css-core-lux) .event-card p { color:var(--ivoire-2); font-size:.86rem; max-width:300px; } /* fonds décoratifs "fiesta" en dégradés — aucun fichier image requis */ :where(.css-core-lux) .bg-mariage { background: radial-gradient(60% 45% at 70% 20%, rgba(230,207,154,.35), transparent 70%), radial-gradient(70% 60% at 20% 80%, rgba(201,169,98,.22), transparent 65%), linear-gradient(160deg,#1c1712,#0d0b08); } :where(.css-core-lux) .bg-gala { background: radial-gradient(55% 40% at 30% 15%, rgba(201,169,98,.4), transparent 65%), repeating-linear-gradient(115deg, rgba(201,169,98,.08) 0 2px, transparent 2px 26px), linear-gradient(200deg,#16120c,#0b0a08); } :where(.css-core-lux) .bg-anniv { background: radial-gradient(45% 35% at 75% 30%, rgba(236,72,153,.24), transparent 70%), radial-gradient(50% 45% at 25% 70%, rgba(201,169,98,.26), transparent 65%), linear-gradient(150deg,#171017,#0b0a08); } :where(.css-core-lux) .bg-corpo { background: radial-gradient(55% 45% at 60% 25%, rgba(34,211,238,.15), transparent 70%), radial-gradient(60% 50% at 20% 85%, rgba(201,169,98,.2), transparent 65%), linear-gradient(170deg,#0f1216,#0b0a08); } :where(.css-core-lux) .bg-nye { background: radial-gradient(50% 40% at 50% 20%, rgba(230,207,154,.4), transparent 65%), radial-gradient(40% 35% at 80% 75%, rgba(124,58,237,.22), transparent 70%), linear-gradient(180deg,#14100a,#0b0a08); } :where(.css-core-lux) .spark { position:absolute; color:var(--or-clair); font-size:.7rem; opacity:.85; animation:tw 2.6s ease-in-out infinite; } @keyframes tw { 0%,100%{opacity:.15; transform:scale(.7)} 50%{opacity:.95; transform:scale(1.15)} } /* ---------- CATALOGUE ---------- */ :where(.css-core-lux) .filters-bar { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:56px; } :where(.css-core-lux) .fpill { font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; padding:12px 24px; border:1px solid var(--hair-soft); color:var(--ivoire-2); background:transparent; cursor:pointer; transition:all .35s; } :where(.css-core-lux) .fpill:hover { border-color:var(--hair); color:var(--ivoire); } :where(.css-core-lux) .fpill.active { background:var(--or); border-color:var(--or); color:var(--noir); font-weight:500; } /* Mobile : filtres compacts + on annule les décalages négatifs (inline) qui se chevauchent */ @media (max-width: 640px) { :where(.css-core-lux) .filters-bar { justify-content:flex-start; gap:8px; margin-bottom:22px; margin-top:6px !important; } :where(.css-core-lux) .fpill { padding:9px 14px; letter-spacing:.12em; font-size:.62rem; } } :where(.css-core-lux) .cat-grid { display:grid; gap:2px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); background:var(--hair-soft); border:1px solid var(--hair-soft); } :where(.css-core-lux) .cat-card { background:var(--noir); position:relative; overflow:hidden; display:block; } :where(.css-core-lux) .cat-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; filter:saturate(.92); transition:transform 1.2s cubic-bezier(.2,.8,.2,1), filter .5s; } :where(.css-core-lux) .cat-card.landscape img { aspect-ratio:3/2; } :where(.css-core-lux) .cat-card.strip img { aspect-ratio:1/2.4; object-fit:contain; background:#0e0d0a; } :where(.css-core-lux) .cat-card:hover img { transform:scale(1.05); filter:saturate(1.08); } :where(.css-core-lux) .cat-card .cc { position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; padding:44px 18px 14px; background:linear-gradient(180deg,transparent,rgba(11,10,8,.92)); font-family:var(--serif); font-size:1.05rem; } :where(.css-core-lux) .cat-card .cc small { display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--or); margin-top:4px; } :where(.css-core-lux) .cat-card .use { position:absolute; top:14px; inset-inline-end:14px; opacity:0; transform:translateY(-6px); transition:all .35s; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; background:var(--or); color:var(--noir); padding:9px 14px; font-weight:500; } :where(.css-core-lux) .cat-card:hover .use { opacity:1; transform:none; } :where(.css-core-lux) .cat-card .prem { position:absolute; top:14px; inset-inline-start:14px; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; padding:7px 12px; background:rgba(11,10,8,.8); border:1px solid var(--hair); color:var(--or-clair); backdrop-filter:blur(6px); } :where(.css-core-lux) .cat-card .prem.free { color:#9fe8c0; border-color:rgba(126,240,178,.4); } /* squelettes de chargement AJAX */ :where(.css-core-lux) .skel { aspect-ratio:2/3; background:linear-gradient(100deg,#12100c 40%,#1a160f 50%,#12100c 60%); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer { to { background-position:-200% 0; } } :where(.css-core-lux) .cat-empty { grid-column:1/-1; text-align:center; padding:90px 20px; color:var(--ivoire-2); font-family:var(--serif); font-style:italic; font-size:1.4rem; background:var(--noir); } /* ---------- Footer ---------- */ :where(.css-core-lux) footer.lux-footer { border-top:1px solid var(--hair-soft); padding:44px 24px 54px; text-align:center; color:var(--ivoire-2); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; } :where(.css-core-lux) footer.lux-footer a { color:var(--or); margin:0 14px; } :where(.css-core-lux) footer.lux-footer a:hover { color:var(--or-clair); } /* ---------- Reveals ---------- */ :where(.css-core-lux) .gs-reveal { opacity:0; transform:translateY(46px); } :where(.css-core-lux) .no-motion .gs-reveal, .no-motion:where(.css-core-lux) .gs-reveal { opacity:1 !important; transform:none !important; } @media (prefers-reduced-motion:reduce){ :where(.css-core-lux) *, *:where(.css-core-lux), :where(.css-core-lux) *::before, :where(.css-core-lux) *::after { animation:none !important; transition:none !important; } } /* i222 — audit 2026-10 : sur un téléphone de 375 px, une couche décorative (halo) élargissait la page à 406 px et coupait le bouton du menu. La page ne déborde plus jamais en largeur : html porte le « hidden » (le viewport), body coupe en « clip » (ne crée pas de défilement vertical, garde position:sticky). Seulement là où « clip » existe ; ailleurs rien ne change. */ @supports (overflow: clip) { html:where(.css-core-lux) { overflow-x: hidden; } :where(.css-core-lux) body { overflow-x: clip; position: relative; } /* relative : les décors en absolute (.blob) sont coupés aussi */ }