d'index.php) part en shrink-to-fit au lieu de s'étirer jusqu'à max-width avant que margin:auto ne le centre — même piège que .ll-product__tabs. */ .ll-container { width: 100%; max-width: var(--ll-container); margin: 0 auto; padding: 0 var(--ll-pad-x); } .ll-fallback-page { padding-top: 100px; padding-bottom: 100px; min-height: 50vh; } @media (max-width: 700px) { .ll-fallback-page { padding-top: 40px; padding-bottom: 40px; } } /* * Notices WooCommerce classiques (wc_print_notices()) — messages d'ajout au * panier, erreurs de stock, etc. Style de base générique : les feuilles de * style WooCommerce natives sont désactivées (cf. inc/woocommerce.php), donc * sans ça ces notices s'affichent en texte brut non formaté partout où * WooCommerce les imprime (fiche produit, panier…), pas seulement dans Mon * compte qui a déjà ses propres réglages ci-dessous. */ /* Hors de .ll-container dans le DOM (fiche produit, cf. woocommerce_before_single_product) : sans ça la notice s'étale en pleine largeur au lieu de suivre la colonne de lecture du site. */ .woocommerce-notices-wrapper { max-width: var(--ll-container); margin: 24px auto 0; padding: 0 var(--ll-pad-x); } .woocommerce-message, .woocommerce-error, .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; list-style: none; margin: 0 0 24px; padding: 14px 18px; background: var(--ll-pink-vpale); border: none; color: var(--ll-magenta-press); font-size: 13px; font-weight: 600; } /* WooCommerce donne le focus programmatique à la notice pour l'accessibilité (lecteurs d'écran) — pas une navigation clavier réelle, donc pas besoin de l'anneau de focus visible que ça déclenche sinon au clic. */ .woocommerce-message:focus, .woocommerce-error:focus, .woocommerce-info:focus { outline: none; } .woocommerce-info { color: var(--ll-ink-70); font-weight: 400; } .woocommerce-message li + li, .woocommerce-error li + li { margin-top: 6px; } .woocommerce-message .button, .woocommerce-info .button { flex: none; order: 2; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding: 10px 20px; border: none; background: var(--ll-magenta); color: var(--ll-white); text-decoration: none; cursor: pointer; transition: background .3s; } .woocommerce-message .button:hover, .woocommerce-info .button:hover { background: var(--ll-magenta-press); } /* Compense le header fixe pour que les ancres n'atterrissent pas dessous. */ #top, #tournee, #musique, #rienaf, #boutique, #contact { scroll-margin-top: 84px; } @keyframes ll-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Typo partagée ---------- */ .ll-h2 { margin: 0; font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; } .ll-h2--rienaf { letter-spacing: -.02em; } .ll-h3 { margin: 0; font-weight: 500; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -.015em; } .ll-kicker { margin: 0; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; color: var(--ll-ink-50); } .ll-kicker--footer { color: var(--ll-pale-50); letter-spacing: .4em; font-size: 10.5px; } .ll-body { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ll-ink-70); text-wrap: pretty; } .ll-section__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; } .ll-section { padding: var(--ll-section-pad); } /* ---------- Reveal (IntersectionObserver cible ces classes) ---------- */ [data-reveal] { transition: opacity .85s var(--ll-ease), transform .85s var(--ll-ease); } [data-reveal].ll-reveal-hidden { opacity: 0; transform: translateY(22px); } /* ---------- Boutons ---------- */ .ll-btn { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; padding: 15px 34px; border: none; cursor: pointer; transition: background .3s, color .3s, transform .3s, gap .3s; } .ll-btn--accent { background: var(--ll-magenta); color: var(--ll-white); } .ll-btn--accent:hover { background: var(--ll-magenta-press); color: var(--ll-white); transform: translateY(-2px); } .ll-btn--ghost { border: 1px solid var(--ll-magenta); color: var(--ll-magenta); padding: 14px 26px; } .ll-btn--ghost:hover { background: var(--ll-magenta); color: var(--ll-white); gap: 20px; } /* ================= Header ================= */ .ll-nav { position: fixed; top: -160px; left: 0; right: 0; z-index: 60; opacity: 0; pointer-events: none; background: var(--ll-pale-92); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); box-shadow: 0 1px 0 var(--ll-ink-09); transition: top .5s var(--ll-ease), opacity .35s ease; } /* * Volontairement top plutôt que transform:translateY — un transform actif * sur cet ancêtre (même translateY(0)) ferait de lui le référentiel de * positionnement de ses descendants fixed, et casserait le panneau mobile * plein écran (.ll-nav__links), qui deviendrait confiné à la hauteur de * cette barre au lieu de couvrir tout le viewport. Piège vécu, ne pas * réintroduire de transform ici. */ .ll-nav.is-visible { top: 0; opacity: 1; pointer-events: auto; } .ll-nav__row { max-width: var(--ll-container); margin: 0 auto; padding: 18px var(--ll-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ll-nav__logo { display: flex; align-items: center; } .ll-nav__logo img { width: 104px; height: auto; } .ll-nav__links { display: flex; gap: 30px; align-items: center; } .ll-nav__links a { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ll-ink); font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; } .ll-nav__links a:hover { border-bottom-color: var(--ll-magenta); color: var(--ll-magenta); } .ll-nav__progress-track { height: 2px; background: rgba(178, 27, 94, .12); } .ll-nav__progress-fill { height: 100%; width: 0%; background: var(--ll-magenta); transition: width .12s linear; } .ll-nav__burger { display: none; width: 32px; height: 32px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; } .ll-nav__burger span { display: block; height: 1px; width: 100%; background: var(--ll-ink-bg); transition: transform .3s, opacity .3s, width .3s; } .ll-nav__burger span:nth-child(2) { width: 70%; } /* ================= Hero ================= */ .ll-hero { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--ll-pink); display: flex; align-items: flex-end; overflow: hidden; } .ll-hero__media { position: absolute; inset: 0; overflow: hidden; } .ll-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ll-hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(249, 189, 214, .55) 0%, rgba(249, 189, 214, 0) 26%, rgba(249, 189, 214, 0) 52%, rgba(249, 189, 214, .9) 88%); pointer-events: none; } .ll-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--ll-container); margin: 0 auto; padding: 0 var(--ll-pad-x) 92px; display: flex; flex-direction: column; align-items: center; gap: 26px; pointer-events: none; } .ll-hero__content .ll-btn { pointer-events: auto; } .ll-hero__logo { margin: 0; width: min(58vw, 620px); min-width: 220px; line-height: 0; } .ll-hero__logo img { width: 100%; height: auto; filter: drop-shadow(0 2px 34px rgba(148, 20, 74, .22)); } .ll-hero__scrollmark { margin-top: 8px; width: 1px; height: 44px; background: linear-gradient(180deg, rgba(46, 13, 30, .4), transparent); animation: ll-bob 2.6s ease-in-out infinite; } /* ================= Bandeau villes ================= */ .ll-ticker { background: var(--ll-ink-bg); color: var(--ll-pink-pale); padding: 15px 0; overflow: hidden; white-space: nowrap; } .ll-ticker__track { display: inline-flex; gap: 44px; animation: ll-marquee 48s linear infinite; padding-right: 44px; } .ll-ticker__item { font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; opacity: .82; } .ll-ticker__sep { opacity: .5; } .ll-ticker__sep:last-child { display: none; } /* ================= Tournée ================= */ .ll-section--tournee { background: var(--ll-pink-vpale); } .ll-tour-filters { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 32px 0 48px; } .ll-tour-search { position: relative; flex: 1 1 280px; max-width: 380px; } .ll-tour-search input { width: 100%; background: var(--ll-white); border: 1px solid var(--ll-ink-12); border-radius: 999px; padding: 13px 20px; font-size: 14px; letter-spacing: .01em; transition: border-color .3s, box-shadow .3s; } .ll-tour-search input::placeholder { color: rgba(46, 13, 30, .32); } .ll-tour-search input:focus { border-color: var(--ll-magenta); box-shadow: 0 0 0 3px rgba(178, 27, 94, .08); outline: none; } .ll-tour-pills { display: flex; gap: 8px; flex-wrap: wrap; } .ll-pill { border: 1px solid var(--ll-ink-20); background: transparent; color: var(--ll-ink-55); border-radius: 999px; padding: 11px 20px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: all .3s; } .ll-pill.is-active { border-color: var(--ll-magenta); background: var(--ll-magenta); color: var(--ll-white); } .ll-tour-month { margin-bottom: 52px; } .ll-tour-month__label { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; font-weight: 700; color: var(--ll-ink); } .ll-tour-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--ll-ink-09); transition: background .35s, padding .35s; color: var(--ll-ink); /* neutralise la couleur de lien par défaut quand la ligne est un (date réservable) */ } .ll-tour-row[hidden] { display: none; } /* display:flex ci-dessus gagne sinon contre [hidden] (même spécificité, JS filtre tournée cassé sans ça) */ .ll-tour-row:hover { background: var(--ll-pink-pale); padding-left: 16px; padding-right: 16px; } .ll-tour-row--clickable { cursor: pointer; } .ll-tour-row__date { width: 82px; flex: none; } .ll-tour-row__dow { margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ll-ink-42); } /* Jour + mois sur une seule ligne, même graisse — ratio repris du Next.js (dow/heure 11px tertiaire, jour+mois 14px gras primaire), pas un gros chiffre isolé. */ .ll-tour-row__day { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; } .ll-tour-row__month { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: inherit; } .ll-tour-row__time { margin: 3px 0 0; font-size: 11px; color: var(--ll-ink-42); letter-spacing: .08em; } .ll-tour-row__place { flex: 1 1 auto; min-width: 180px; } .ll-tour-row__city { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .ll-tour-row__venue { margin: 4px 0 0; font-size: 13px; color: var(--ll-ink-55); } .ll-tour-row__status { flex: none; } .ll-chip { display: inline-block; border-radius: 0; padding: 10px 20px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; white-space: nowrap; } .ll-chip--go { background: var(--ll-magenta); color: var(--ll-white); } /* Sans ça, la règle globale a:hover (magenta pressé) s'applique et donne un texte quasi illisible sur le fond magenta du chip. */ .ll-chip--go:hover { color: var(--ll-ink); } .ll-chip--warn { background: var(--ll-ink-bg); color: var(--ll-white); } .ll-chip--soon { border-radius: 999px; color: var(--ll-ink-50); font-weight: 400; } .ll-chip--off { background: var(--ll-ink-05); color: var(--ll-ink-35); font-weight: 400; text-decoration: line-through; } .ll-tour-empty { margin: 40px 0; text-align: center; font-size: 14px; color: rgba(46, 13, 30, .45); font-weight: 300; } /* Tournée masquée (switch admin) — invite newsletter à la place du tableau. Réutilise le formulaire du footer (mêmes classes, même comportement JS), mais celui-ci est pensé pour un fond sombre : on repasse en couleurs sombres pour le fond clair de cette section. */ .ll-instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 640px; margin: 24px auto 0; } .ll-instagram-grid__item { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ll-pink-pale); } /* format portrait actuel d'Instagram, plus le carré historique */ .ll-instagram-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ll-ease); } .ll-instagram-grid__item:hover img { transform: scale(1.06); } .ll-tour-soon { text-align: center; max-width: 480px; margin: 48px auto 0; } .ll-tour-soon__form.ll-footer__newsletter-form { margin-top: 20px; } .ll-tour-soon__form .ll-footer__newsletter-input { color: var(--ll-ink); border-bottom-color: var(--ll-ink-22); } .ll-tour-soon__form .ll-footer__newsletter-input::placeholder { color: var(--ll-ink-42); } .ll-tour-soon__form .ll-footer__newsletter-input:focus { border-bottom-color: var(--ll-magenta); } /* ================= Musique ================= */ .ll-section--musique { background: var(--ll-pink); } .ll-music-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 56px; align-items: center; padding-top: 56px; } .ll-music-cover-wrap { position: relative; } .ll-music-cover-frame { position: absolute; inset: 14px -14px -14px 14px; background: var(--ll-ink-12); } .ll-music-cover { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; transition: transform .5s var(--ll-ease); } .ll-music-cover-wrap:hover .ll-music-cover { transform: translate(-6px, -6px); } .ll-music-cover img { width: 100%; height: 100%; object-fit: cover; } .ll-music-info { display: flex; flex-direction: column; gap: 26px; } .ll-music-info__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .ll-music-info__desc { max-width: 440px; } .ll-platforms { display: flex; flex-direction: column; max-width: 420px; } .ll-platform-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--ll-ink-12); color: var(--ll-ink); transition: padding .3s, color .3s; } .ll-platform-row--last { border-bottom: 1px solid var(--ll-ink-12); } .ll-platform-row:hover { padding-left: 14px; color: var(--ll-magenta-press); } .ll-platform-row__logo { width: 17px; height: 17px; flex: none; } .ll-platform-row__name { flex: 1; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; } .ll-platform-row__arrow { font-size: 15px; font-weight: 300; } /* ================= Rienaf ================= */ .ll-rienaf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ll-pink-pale); min-height: 560px; } .ll-rienaf__media { position: relative; min-height: 420px; overflow: hidden; } .ll-rienaf__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ll-rienaf__content { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 88px 64px; } .ll-rienaf__content .ll-body { max-width: 420px; } .ll-rienaf__content .ll-btn { align-self: flex-start; } /* ================= Boutique ================= */ .ll-section--boutique { background: var(--ll-pink); } .ll-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; padding-top: 52px; } .ll-shop-card { display: flex; flex-direction: column; background: var(--ll-pink-vpale); color: var(--ll-ink); transition: transform .45s var(--ll-ease), box-shadow .45s; } .ll-shop-card:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(148, 20, 74, .16); color: var(--ll-ink); } .ll-shop-card__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ll-ink-05); } .ll-shop-card__media img { width: 100%; height: 100%; object-fit: cover; } .ll-shop-card__placeholder { width: 100%; height: 100%; background: var(--ll-ink-05); } .ll-shop-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 8px; } .ll-shop-card__title { margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .ll-shop-card__desc { margin: 0; font-size: 14px; color: var(--ll-ink-55); } .ll-shop-card__cta { margin-top: 8px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ll-magenta); } /* ================= Contact ================= */ .ll-section--contact { background: var(--ll-pink-vpale); } .ll-contact-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.4fr); gap: 72px; } .ll-contact-intro { display: flex; flex-direction: column; gap: 14px; } .ll-contact-intro .ll-body { margin-top: 8px; max-width: 300px; } .ll-contact-form { display: flex; flex-direction: column; gap: 26px; } .ll-field { display: flex; flex-direction: column; gap: 9px; } .ll-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .ll-field input, .ll-field select, .ll-field textarea { appearance: none; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--ll-ink-22); padding: 11px 0; font-size: 15px; transition: border-color .3s; } .ll-field textarea { resize: vertical; } .ll-field input::placeholder, .ll-field textarea::placeholder { color: rgba(46, 13, 30, .32); } .ll-field input:focus, .ll-field select:focus, .ll-field textarea:focus { border-bottom-color: var(--ll-magenta); outline: none; } .ll-field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Flèche du natif caché par Select2 restait visible en double sous le faux menu. On ne réimporte pas tout select2.css, juste sa règle de masquage + un habillage minimal cohérent avec nos autres champs. */ .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .ll-account__wide .select2-container { width: 100% !important; } .ll-account__wide .select2-selection--single { height: auto; border: none; border-bottom: 1px solid var(--ll-ink-22); border-radius: 0; padding: 10px 0; background: transparent; } .ll-account__wide .select2-selection__rendered { padding: 0; line-height: normal; font-size: 15px; color: var(--ll-ink); } .ll-account__wide .select2-selection__arrow { height: 100%; top: 0; right: 0; } .ll-account__wide .select2-container--open .select2-selection--single { border-bottom-color: var(--ll-magenta); } .ll-account__wide .select2-dropdown { border-color: var(--ll-ink-22); font-size: 14px; } /* ================= 404 ================= */ .ll-404__code { margin: 0 0 8px; font-size: clamp(64px, 9vw, 108px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ll-pink); } .ll-404 .ll-h2 { margin: 0 0 12px; } .ll-404 .ll-body { margin: 0 0 32px; } .ll-404__btn { display: inline-flex; } /* ================= Pages légales ================= */ .ll-legal { padding: 40px 0 120px; } .ll-legal__container { max-width: 760px; } .ll-legal .ll-h2 { margin: 0 0 32px; font-size: clamp(26px, 3vw, 34px); } .ll-legal__content { font-size: 15px; line-height: 1.75; color: var(--ll-ink-70); } .ll-legal__content h2 { margin: 40px 0 14px; font-size: 18px; font-weight: 700; color: var(--ll-ink); } .ll-legal__content h2:first-child { margin-top: 0; } .ll-legal__content h3 { margin: 24px 0 10px; font-size: 15px; font-weight: 700; color: var(--ll-ink); } .ll-legal__content p { margin: 0 0 16px; } .ll-legal__content ul, .ll-legal__content ol { margin: 0 0 16px; padding-left: 22px; } .ll-legal__content li { margin-bottom: 6px; } .ll-legal__content a { color: var(--ll-magenta); text-decoration: underline; } .ll-legal__content a:hover { color: var(--ll-magenta-press); } .ll-legal__content strong { color: var(--ll-ink); font-weight: 700; } .ll-legal__content hr { border: none; border-top: 1px solid var(--ll-ink-09); margin: 32px 0; } .ll-legal__content mark { background: var(--ll-pink-vpale); color: var(--ll-magenta-press); padding: 1px 4px; font-style: normal; } /* ================= Responsive ================= */ .ll-mobile-nav { display: none; } @media (max-width: 880px) { .ll-nav__burger { display: flex; } .ll-nav__links { display: none; } .ll-nav__actions { display: none; } .ll-scroll-top { display: none; } /* le bouton flottant mobile occupe déjà ce coin */ .ll-mobile-fab { display: flex; align-items: center; gap: 14px; position: fixed; right: 20px; bottom: 20px; z-index: 55; padding: 12px 16px; border-radius: 999px; background: var(--ll-pink-vpale); box-shadow: 0 8px 24px rgba(46, 13, 30, .18); opacity: 1; transition: opacity .3s, transform .3s; } /* Masqué au-dessus du hero (accueil) et au-dessus du footer — voir assets/js/shop.js */ .ll-mobile-fab--hidden { opacity: 0; pointer-events: none; transform: translateY(10px); } .ll-mobile-nav { display: flex; position: fixed; inset: 0; z-index: 65; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: var(--ll-pink-vpale); transform: translateX(100%); transition: transform .4s var(--ll-ease); pointer-events: none; } .ll-mobile-nav.is-open { transform: translateX(0); pointer-events: auto; } .ll-mobile-nav a { font-size: 16px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--ll-ink); } .ll-mobile-nav a:hover { color: var(--ll-magenta); } /* Même emplacement que le bouton hamburger qu'elle remplace visuellement une fois le menu ouvert. */ .ll-mobile-nav__close { position: absolute; top: 31px; /* centre vertical réel du bouton hamburger dans .ll-nav__row (95px de haut, logo compris), pas son padding-top */ right: var(--ll-pad-x); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } .ll-mobile-nav__close span { position: absolute; width: 22px; height: 1px; background: var(--ll-ink-bg); } .ll-mobile-nav__close span:first-child { transform: rotate(45deg); } .ll-mobile-nav__close span:last-child { transform: rotate(-45deg); } .ll-mobile-nav__socials { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; } .ll-mobile-nav__social-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--ll-ink); transition: color .3s, background .3s; } .ll-mobile-nav__social-btn:hover { color: var(--ll-white); background: var(--ll-pink); } .ll-music-grid { grid-template-columns: 1fr; gap: 40px; } .ll-music-cover-wrap { max-width: 320px; } .ll-rienaf { grid-template-columns: 1fr; min-height: 0; } .ll-rienaf__media { min-height: 320px; } .ll-rienaf__content { padding: 56px var(--ll-pad-x); } .ll-tour-pills { justify-content: center; width: 100%; } .ll-contact-grid { grid-template-columns: 1fr; gap: 40px; } .ll-contact-intro { align-items: center; text-align: center; } .ll-contact-intro .ll-body { margin-left: auto; margin-right: auto; } .ll-contact-submit { align-self: stretch; justify-content: center; } /* Footer déjà centré en base (desktop compris) — rien à surcharger ici. */ .ll-product { grid-template-columns: 1fr; gap: 40px; padding: 32px var(--ll-pad-x) 64px; } .ll-gallery { position: static; } .ll-upsells { padding: 64px 0 72px; } .ll-hero__content { padding-bottom: 62px; } /* 92px - 30px */ .ll-section__head { align-items: center; text-align: center; } .ll-account { padding: 40px 0 80px; } .ll-account__columns--split { flex-direction: column; gap: 32px; } .ll-account__columns--split .ll-account__column:first-child { padding-right: 0; padding-bottom: 32px; border-right: none; border-bottom: 1px solid var(--ll-ink-09); } /* Nav latérale sticky → sélecteur déroulant + bouton icône déconnexion, colonne unique. */ .ll-account__dashboard { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* minmax(0,…), pas 1fr seul : sinon la piste grandit pour loger le contenu (cartes, nav) au lieu de se réduire au conteneur */ .ll-account-nav { position: static; } .ll-account-nav .ll-account-nav__list, .ll-account-nav .ll-account-nav__logout { display: none; } .ll-account-nav__mobile { display: flex; align-items: center; gap: 10px; } .ll-account-nav__select { flex: 1; min-width: 0; height: 46px; padding: 0 30px 0 16px; border: 1px solid var(--ll-ink-20); background: var(--ll-white); color: var(--ll-ink); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%236e1117%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; } .ll-account-nav__select:focus { outline: none; border-color: var(--ll-magenta); } /* .ll-account-nav .ll-account-nav__logout-btn (2 classes), pas juste .ll-account-nav__logout-btn : ce bouton est un , et .ll-account-nav a (classe+tag) a une spécificité plus forte — son border-left:transparent écrasait sinon le bord gauche de la bordure ci-dessous, et son padding asymétrique (pensé pour les onglets desktop) décentrait l'icône. */ .ll-account-nav .ll-account-nav__logout-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--ll-ink-20); color: var(--ll-ink); transition: color .3s, border-color .3s; } .ll-account-nav .ll-account-nav__logout-btn:hover { color: var(--ll-magenta); border-color: var(--ll-magenta); } .ll-account-form-edit, .ll-account__wide .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .ll-account-form-edit > p.form-row-first, .ll-account__wide .woocommerce-address-fields__field-wrapper > p.form-row-first, .ll-account-form-edit > p.form-row-last, .ll-account__wide .woocommerce-address-fields__field-wrapper > p.form-row-last { grid-column: 1 / -1; } } @media (max-width: 700px) { /* date + ville/salle restent sur la même ligne (flex-wrap déjà présent en base) ; seul le statut passe en pleine largeur en dessous. */ .ll-tour-row { align-items: center; gap: 10px 28px; transition: background .35s, padding .35s, margin .35s; } .ll-tour-row__date { width: 64px; } /* mesuré : "18 SEPT." (le plus large) demande 60px à 14px gras */ .ll-tour-row__status { width: 100%; } .ll-tour-row__status .ll-chip { display: block; text-align: center; } .ll-tour-row:hover { margin-left: calc(-1 * var(--ll-pad-x)); margin-right: calc(-1 * var(--ll-pad-x)); padding-left: var(--ll-pad-x); padding-right: var(--ll-pad-x); } .ll-field-row { grid-template-columns: 1fr; gap: 20px; } /* Tableau Commandes → une carte par commande (technique classique WooCommerce shop_table_responsive : chaque cellule affiche son data-title en ::before, le tableau perd sa sémantique visuelle). */ .ll-account__wide table.woocommerce-orders-table thead { display: none; } .ll-account__wide table.woocommerce-orders-table, .ll-account__wide table.woocommerce-orders-table tbody, .ll-account__wide .woocommerce-orders-table__row, .ll-account__wide .woocommerce-orders-table__cell { display: block; width: 100%; } .ll-account__wide .woocommerce-orders-table__row { margin-bottom: 16px; border: 1px solid var(--ll-ink-09); padding: 4px 16px; } .ll-account__wide .woocommerce-orders-table__cell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ll-ink-09); } .ll-account__wide .woocommerce-orders-table__cell:last-child { border-bottom: none; } .ll-account__wide .woocommerce-orders-table__cell::before { content: attr(data-title); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ll-ink-50); } .ll-account__wide .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; } .ll-account__wide .woocommerce-orders-table__cell-order-actions::before { display: none; } } @media (max-width: 480px) { .ll-hero__logo { width: min(78vw, 620px); } .ll-cart-drawer__panel { width: 100%; } } @media (max-width: 360px) { .ll-qty-add { flex-direction: column; } .ll-qty-stepper { justify-content: center; } } /* * Commande (WooCommerce Blocks) sur mobile : dès que le bloc checkout se * détecte étroit (.is-mobile, ajouté par son propre JS via ResizeObserver — * pas une media query), il duplique le résumé de commande : une version * accordéon repliée tout en haut ET la version complète (articles + code * promo + totaux) plus bas avant le bouton Commander. On ne garde que la * seconde — .checkout-order-summary-block-fill-wrapper la distingue de * l'accordéon du haut, qui lui n'a pas cette classe. En desktop (pas de * .is-mobile), il n'existe qu'une seule instance de ce bloc (la colonne de * droite) : le sélecteur scoping à .is-mobile ne doit pas la toucher. */ .wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) { display: none; } /* ================= Linktree ================= */ .ll-links-page { background: var(--ll-pink-vpale); } .ll-links { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; } .ll-links__card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .ll-links__avatar { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; box-shadow: 0 8px 24px rgba(110, 17, 23, .18); margin-bottom: 18px; } .ll-links__name { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ll-ink); } .ll-links__badge { flex: none; position: relative; top: 3px; } .ll-links__bio { margin: 8px 0 28px; font-size: 14px; line-height: 1.6; color: var(--ll-ink-60); max-width: 340px; } /* Pochette+titre sur une ligne, plateformes sur une seconde ligne pleine largeur et centrée — plutôt que sur la même ligne : avec un titre court ("Cordialement") et des icônes reléguées à droite, le flex:1 de la colonne info laissait un vide disgracieux entre le texte et les icônes (et sous le texte, la ligne prenant toute la hauteur de la pochette). Deux lignes pleinement occupées équilibrent mieux la carte. */ .ll-links__album { width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 16px; margin-bottom: 20px; border-radius: 16px; background: var(--ll-white); box-shadow: 0 1px 2px rgba(110, 17, 23, .08); text-align: left; } .ll-links__album-head { display: flex; align-items: center; gap: 14px; } .ll-links__album-cover { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; } .ll-links__album-info { flex: 1; min-width: 0; } .ll-links__album-kicker { margin: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ll-ink-50); } .ll-links__album-title { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--ll-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ll-links__platforms { display: flex; justify-content: center; gap: 18px; padding-top: 14px; border-top: 1px solid var(--ll-ink-09); } .ll-links__platform-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--ll-ink-55); transition: color .3s, background .3s; } .ll-links__platform-btn svg { width: 18px; height: 18px; } .ll-links__platform-btn:hover { color: var(--ll-magenta); background: var(--ll-pink-pale); } .ll-links__list { width: 100%; display: flex; flex-direction: column; gap: 12px; } .ll-links__item { display: block; width: 100%; padding: 16px 24px; border-radius: 999px; background: var(--ll-white); color: var(--ll-ink); font-size: 14px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 1px 2px rgba(110, 17, 23, .08); transition: background .3s, color .3s, transform .3s; } .ll-links__item:hover { background: var(--ll-magenta); color: var(--ll-white); transform: translateY(-2px); } .ll-links__newsletter { width: 100%; margin-top: 12px; padding: 24px 20px; border-radius: 16px; background: var(--ll-white); box-shadow: 0 1px 2px rgba(110, 17, 23, .08); } .ll-links__newsletter-title { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--ll-magenta); } .ll-links__newsletter-text { margin: 6px 0 0; font-size: 13.5px; color: var(--ll-ink-60); } /* Le formulaire hérite de .ll-footer__newsletter-form (pensé pour le footer sombre : champ souligné, bouton anguleux tout-caps) — sur cette page, tout le reste est en pastilles arrondies (.ll-links__item, plateformes, avatar…), donc on réhabille input/bouton dans le même langage plutôt que de garder le style footer en incrustation. */ .ll-links__newsletter-form.ll-footer__newsletter-form { gap: 8px; margin: 16px auto 0; max-width: 100%; } .ll-links__newsletter-form .ll-footer__newsletter-input { border: 1px solid var(--ll-ink-20); border-radius: 999px; background: var(--ll-pink-vpale); padding: 12px 18px; color: var(--ll-ink); } .ll-links__newsletter-form .ll-footer__newsletter-input::placeholder { color: var(--ll-ink-42); } .ll-links__newsletter-form .ll-footer__newsletter-input:focus { border-color: var(--ll-magenta); outline: none; } .ll-links__newsletter-form .ll-footer__newsletter-btn { border-radius: 999px; padding: 12px 22px; font-size: 12px; letter-spacing: .04em; text-transform: none; font-weight: 600; } .ll-links__newsletter-form .ll-footer__newsletter-btn:hover { background: var(--ll-magenta-press); color: var(--ll-white); } .ll-links__socials { display: flex; gap: 14px; margin-top: 32px; } .ll-links__social-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: var(--ll-ink-60); transition: color .3s, background .3s; } .ll-links__social-btn:hover { color: var(--ll-magenta); background: var(--ll-pink-pale); } .ll-links__copy { margin-top: 28px; font-size: 12px; color: var(--ll-ink-40); } @media (max-width: 480px) { /* Champ + bouton sur une ligne (hérité de .ll-footer__newsletter-form) dépassent de la carte sur mobile — empilés, bouton pleine largeur comme le champ. Ce bloc doit rester APRÈS les règles de base ci-dessus : à spécificité égale, c'est l'ordre dans le fichier qui tranche. */ .ll-links__newsletter-form.ll-footer__newsletter-form { flex-direction: column; } .ll-links__newsletter-form .ll-footer__newsletter-btn { width: 100%; justify-content: center; } }