/* ============================================================ Shenten Dargye Ling — système visuel unifié Chargé APRÈS Bootstrap 5.3 (le surcharge). CSS vanilla. AssetMapper : assets/styles/app.css ============================================================ */ /* ---------- 1. Tokens globaux ---------- */ :root { --sdl-paper: #fbfaf7; /* fond général chaud */ --sdl-surface: #ffffff; /* cartes, header */ --sdl-ink: #211f1d; /* titres, texte, CTA primaire */ --sdl-muted: #6a665f; /* texte secondaire */ --sdl-line: #e3e0d9; /* bordures, filets */ --sdl-track: #e9e6df; /* fond des barres de progression */ --sdl-gold: #8a641d; /* accent : dons, prix, kickers */ --sdl-gold-deep: #6b4d14; /* liens survolés, texte sur or tendre */ --sdl-gold-soft: #f3ecdc; /* encarts, remplissage doux */ --sdl-success: #3f6b4a; --sdl-danger: #8f3a2f; --sdl-r: 2px; /* rayon global — coins nets */ --sdl-maxw: 1160px; --sdl-shadow: 0 1px 2px rgba(33,31,29,.04), 0 10px 30px rgba(33,31,29,.05); --sdl-serif: "Spectral", Georgia, "Times New Roman", serif; --sdl-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* espacements */ --sdl-s1: 4px; --sdl-s2: 8px; --sdl-s3: 12px; --sdl-s4: 16px; --sdl-s5: 24px; --sdl-s6: 32px; --sdl-s7: 48px; --sdl-s8: 64px; } /* ---------- 2. Base ---------- */ body { font-family: var(--sdl-sans); color: var(--sdl-ink); background: var(--sdl-paper); -webkit-font-smoothing: antialiased; line-height: 1.55; } a { color: var(--sdl-gold); text-decoration: none; } a:hover { color: var(--sdl-gold-deep); } ::selection { background: var(--sdl-gold-soft); } /* ---------- 3. Typographie ---------- */ .sdl-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sdl-gold); } .sdl-display { font-family: var(--sdl-serif); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.01em; } .sdl-h1 { font-family: var(--sdl-serif); font-weight: 400; font-size: 2.2rem; line-height: 1.1; } .sdl-h2 { font-family: var(--sdl-serif); font-weight: 400; font-size: 2rem; } .sdl-h3 { font-family: var(--sdl-serif); font-weight: 500; font-size: 1.3rem; } .sdl-lead { font-family: var(--sdl-serif); font-weight: 300; font-style: italic; font-size: 1.25rem; color: var(--sdl-muted); } .sdl-muted { color: var(--sdl-muted); } .sdl-num { font-variant-numeric: tabular-nums; } /* ---------- 4. Boutons (système unique) ---------- */ .sdl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--sdl-sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 12px 22px; border-radius: var(--sdl-r); border: 1px solid var(--sdl-ink); background: var(--sdl-ink); color: #fff; cursor: pointer; transition: filter .15s, background .15s; } .sdl-btn:hover { filter: brightness(1.15); color: #fff; } .sdl-btn--accent { background: var(--sdl-gold); border-color: var(--sdl-gold); color: #fff; } .sdl-btn--outline { background: transparent; color: var(--sdl-ink); } .sdl-btn--outline:hover { background: var(--sdl-ink); color: #fff; filter: none; } .sdl-btn--link { background: transparent; border: none; border-bottom: 1px solid var(--sdl-gold); border-radius: 0; color: var(--sdl-gold); padding: 4px 2px; } .sdl-btn--sm { padding: 8px 15px; font-size: 13px; } .sdl-btn--block { width: 100%; } .sdl-btn:disabled, .sdl-btn.disabled { background: #d8d4ca; border-color: #d8d4ca; color: #918d84; cursor: not-allowed; filter: none; } /* focus visible AA */ .sdl-btn:focus-visible, .sdl-field input:focus-visible, .sdl-field textarea:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } /* ---------- 5. Cartes ---------- */ .sdl-card { background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); padding: 24px; } .sdl-card--pad { padding: 30px; } a.sdl-card { color: var(--sdl-ink); display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; } a.sdl-card:hover { border-color: var(--sdl-gold); box-shadow: var(--sdl-shadow); } .sdl-price { font-family: var(--sdl-serif); font-size: 1.55rem; color: var(--sdl-gold); font-variant-numeric: tabular-nums; } /* ---------- 6. Formulaires ---------- */ .sdl-field { margin-bottom: 16px; } .sdl-field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sdl-ink); margin-bottom: 6px; } .sdl-field input, .sdl-field textarea, .sdl-field select { width: 100%; font-family: var(--sdl-sans); font-size: 15px; padding: 11px 13px; border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); background: var(--sdl-surface); color: var(--sdl-ink); } .sdl-field .sdl-help { font-size: 12px; color: var(--sdl-muted); margin-top: 6px; } .sdl-field--error input { border-color: var(--sdl-danger); background: #fbf3f1; } .sdl-field--error label, .sdl-field .sdl-error { color: var(--sdl-danger); } /* case encadrée : la case et sa phrase, cliquables ensemble */ .sdl-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; padding: 11px 14px; font-size: 15px; line-height: 1.45; cursor: pointer; background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); } .sdl-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sdl-gold); } .sdl-check:has(input:checked) { border-color: var(--sdl-gold); box-shadow: inset 0 0 0 1px var(--sdl-gold); } .sdl-check:has(input:focus-visible) { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-check__native { display: block; margin-top: 4px; font-weight: 600; } /* un choix par case encadrée ; la suite (nombre de demandes, séances) ne paraît qu'une fois le choix qui l'appelle coché */ .sdl-choices { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } .sdl-choices__legend { font-size: 12.5px; font-weight: 600; color: var(--sdl-ink); margin-bottom: 6px; float: none; width: auto; padding: 0; } .sdl-choices__more { margin: 4px 0 6px 28px; } .sdl-choices__more .sdl-check { font-size: 14.5px; padding: 9px 12px; } @supports selector(:has(a)) { .sdl-choices:not(:has(input[value="from_requests"]:checked)) .sdl-choices__more[data-when="from_requests"], .sdl-choices:not(:has(input[value="some"]:checked)) .sdl-choices__more[data-when="some"] { display: none; } } /* langue de traduction : 16 px, sinon iOS zoome en ouvrant le menu */ .sdl-interp select { font-size: 16px; } .sdl-interp .sdl-help { font-size: 12px; color: var(--sdl-muted); margin: 0 0 4px; } .sdl-interp__status { font-size: 13px; color: var(--sdl-muted); margin: 0 0 12px; } .sdl-interp__status .bi { color: var(--sdl-gold); } /* montant avec suffixe € */ .sdl-amount { display: flex; border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); overflow: hidden; } .sdl-amount input { border: none; border-radius: 0; } .sdl-amount .sdl-amount__unit { display: flex; align-items: center; padding: 0 15px; background: var(--sdl-paper); border-left: 1px solid var(--sdl-line); font-weight: 600; color: var(--sdl-muted); } /* bandeau identité verrouillée (utilisateur connecté) */ .sdl-locked { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: var(--sdl-gold-soft); border: 1px solid #e6d9bb; border-radius: var(--sdl-r); color: var(--sdl-gold-deep); font-size: 13.5px; } /* l'adresse du compte, si longue soit-elle, passe à la ligne ; le prix, jamais */ .sdl-locked > span:not(.sdl-price) { min-width: 0; overflow-wrap: anywhere; } .sdl-locked .sdl-price { flex: none; white-space: nowrap; } /* ---------- 7. Chrome : header ---------- */ .sdl-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 14px 26px; background: var(--sdl-surface); border-bottom: 1px solid var(--sdl-line); } .sdl-header__brand { display: flex; align-items: center; gap: 12px; font-family: var(--sdl-serif); font-size: 19px; font-weight: 500; color: var(--sdl-ink); } .sdl-header__brand img { width: 38px; height: 38px; object-fit: contain; } .sdl-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: 14px; } .sdl-nav a { color: var(--sdl-ink); font-weight: 500; } .sdl-nav a.is-secondary { color: var(--sdl-muted); font-weight: 400; } /* un bouton du menu garde ses couleurs : sans quoi « Se connecter » s'écrit en noir sur noir */ .sdl-nav a.sdl-btn { color: #fff; } .sdl-nav a.sdl-btn--outline { color: var(--sdl-ink); } .sdl-nav a.sdl-btn--outline:hover { color: #fff; } /* menu replié sur téléphone (menu.js) : le logo et un bouton « Menu » ; sans JavaScript, rien ne se replie */ .sdl-menu-toggle { display: none; } .sdl-menu-toggle__icon { width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; } @media (max-width: 991.98px) { .sdl-header.is-foldable { padding: 10px 16px; gap: 0; } .sdl-header.is-foldable .sdl-menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--sdl-line); border-radius: 100px; background: var(--sdl-surface); color: var(--sdl-ink); font-size: 14px; font-weight: 600; cursor: pointer; } .sdl-header.is-foldable .sdl-menu-toggle:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-header.is-foldable.is-open .sdl-menu-toggle { border-color: var(--sdl-ink); } .sdl-header.is-foldable .sdl-nav { display: none; } .sdl-header.is-foldable.is-open .sdl-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-top: 10px; padding-bottom: 6px; border-top: 1px solid var(--sdl-line); font-size: 16px; } .sdl-header.is-open .sdl-nav > a:not(.sdl-btn) { display: flex; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--sdl-line); } .sdl-header.is-open .sdl-nav > .sdl-lang { align-self: flex-start; margin-top: 14px; } .sdl-header.is-open .sdl-nav > a.sdl-btn { margin-top: 14px; min-height: 44px; font-size: 15px; } } /* sélecteur de langue */ .sdl-lang { display: inline-flex; border: 1px solid var(--sdl-line); border-radius: 100px; overflow: hidden; font-size: 12.5px; font-weight: 600; } .sdl-lang a { padding: 5px 11px; color: var(--sdl-muted); } .sdl-lang a.is-active { background: var(--sdl-ink); color: #fff; } /* ---------- 8. Chrome : footer ---------- */ .sdl-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .sdl-footer { background: var(--sdl-paper); border-top: 2px solid var(--sdl-gold); padding: 40px 34px 26px; } .sdl-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; max-width: var(--sdl-maxw); margin: 0 auto; } .sdl-footer__title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sdl-gold); margin-bottom: 12px; } @media (max-width: 767.98px) { .sdl-footer__grid { grid-template-columns: 1fr; gap: 22px; } } /* ---------- 9. Composants & états ---------- */ /* barre de progression — signature */ .sdl-progress { height: 3px; background: var(--sdl-track); border-radius: 2px; overflow: hidden; } .sdl-progress__bar { height: 100%; background: var(--sdl-gold); } .sdl-goal { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; margin-bottom: 7px; } .sdl-goal .sdl-pct { color: var(--sdl-gold); font-weight: 600; } /* badges */ .sdl-badge { display: inline-flex; align-items: center; gap: .4em; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 100px; background: var(--sdl-surface); border: 1px solid var(--sdl-line); color: var(--sdl-muted); } .sdl-badge--gold { background: var(--sdl-gold-soft); border-color: transparent; color: var(--sdl-gold-deep); } .sdl-badge--done { background: #eef4ef; border-color: transparent; color: var(--sdl-success); } .sdl-badge--secure { background: var(--sdl-ink); border-color: transparent; color: #fff; } /* flash messages (surcharge des .alert Bootstrap) */ .sdl-flash { display: flex; gap: 11px; align-items: center; padding: 13px 16px; border-radius: var(--sdl-r); border: 1px solid; border-left-width: 3px; font-size: 13.5px; } .sdl-flash--success { background: #eef4ef; border-color: #cfe0d3; border-left-color: var(--sdl-success); } .sdl-flash--warning { background: var(--sdl-gold-soft); border-color: #e6d9bb; border-left-color: var(--sdl-gold); } .sdl-flash--danger { background: #fbf3f1; border-color: #e6c9c2; border-left-color: var(--sdl-danger); } /* état vide */ .sdl-empty { background: var(--sdl-surface); border: 1px dashed var(--sdl-line); border-radius: var(--sdl-r); padding: 34px 24px; text-align: center; color: var(--sdl-muted); } /* pastille de succès (don / paiement) */ .sdl-success-icon { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; font-size: 32px; } .sdl-success-icon--heart { background: var(--sdl-gold-soft); border: 1px solid #e6d9bb; color: var(--sdl-gold); } .sdl-success-icon--check { background: #eef4ef; border: 1px solid #cfe0d3; color: var(--sdl-success); } /* ---------- 10. Chrome allégé : pages auth (login/register/reset) ---------- */ .sdl-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sdl-paper); padding: 40px 16px; } .sdl-auth__card { width: 100%; max-width: 380px; background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); padding: 34px; box-shadow: var(--sdl-shadow); } .sdl-auth__card img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 12px; } /* ---------- 11. Grilles responsives utilitaires ---------- */ .sdl-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .sdl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } /* ---------- 12. Espace membre : dashboard + menu latéral ---------- */ .sdl-account { display: grid; grid-template-columns: 244px 1fr; gap: 34px; max-width: var(--sdl-maxw); margin: 0 auto; padding: 38px 20px 64px; align-items: start; } .sdl-account__aside { position: sticky; top: 22px; } .sdl-account__aside-title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sdl-gold); margin: 0 0 12px 14px; } .sdl-account__nav { display: flex; flex-direction: column; gap: 3px; } .sdl-account__link { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--sdl-r); color: var(--sdl-ink); font-weight: 500; font-size: 14px; border: 1px solid transparent; transition: background .12s, border-color .12s; } .sdl-account__link:hover { background: var(--sdl-surface); border-color: var(--sdl-line); color: var(--sdl-ink); } .sdl-account__link.is-active { background: var(--sdl-ink); border-color: var(--sdl-ink); color: #fff; } .sdl-account__link i { font-size: 16px; } .sdl-account__count { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; background: var(--sdl-gold-soft); color: var(--sdl-gold-deep); } .sdl-account__link.is-active .sdl-account__count { background: rgba(255,255,255,.18); color: #fff; } .sdl-account__aside-foot { margin-top: 16px; padding: 0 2px; } .sdl-account__toggle { display: none; } /* téléphone seulement, voir plus bas */ .sdl-account__main { min-width: 0; } /* carte de statistique (vue d'ensemble) */ .sdl-stat { display: block; } .sdl-stat__num { font-family: var(--sdl-serif); font-size: 2.4rem; line-height: 1; color: var(--sdl-ink); font-variant-numeric: tabular-nums; } .sdl-stat__label { font-size: 13px; color: var(--sdl-muted); margin-top: 4px; } /* ligne d'un élément (webinar / adhésion / don) */ .sdl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .sdl-row__meta { min-width: 220px; } @media (max-width: 820px) { .sdl-account { grid-template-columns: 1fr; gap: 18px; padding: 16px 16px 48px; } .sdl-account__aside { position: static; min-width: 0; } /* « Mon espace » et « Se déconnecter » sont déjà dans le menu du haut */ .sdl-account__aside-title, .sdl-account__aside-foot { display: none; } /* les pages du compte repliées derrière un bouton qui nomme la page courante (menu.js) */ .sdl-account__aside.is-foldable .sdl-account__toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--sdl-line); border-radius: 12px; background: var(--sdl-surface); color: var(--sdl-ink); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; } .sdl-account__aside.is-foldable .sdl-account__toggle::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .sdl-account__aside.is-open .sdl-account__toggle::after { transform: rotate(-135deg) translateY(-2px); } .sdl-account__aside.is-foldable .sdl-account__toggle:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-account__aside.is-foldable .sdl-account__nav { display: none; } .sdl-account__aside.is-foldable.is-open .sdl-account__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 6px; border: 1px solid var(--sdl-line); border-radius: 12px; background: var(--sdl-surface); } .sdl-account__aside.is-open .sdl-account__link { min-height: 46px; font-size: 15px; } /* les trois compteurs côte à côte */ .sdl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sdl-stats .sdl-card { padding: 14px 12px; } .sdl-stats .sdl-stat__num { font-size: 1.8rem; } .sdl-stats .sdl-stat__label { font-size: 12px; line-height: 1.3; } } /* ===== Member survey ================================================= */ .survey-shell { max-width: 760px; margin: 0 auto; padding: var(--sdl-s6) var(--sdl-s4) var(--sdl-s8); } .survey-intro__body { font-family: var(--sdl-serif); font-size: 1.05rem; line-height: 1.7; color: var(--sdl-ink); margin: var(--sdl-s5) 0; } .survey-intro__sign { margin-top: var(--sdl-s4); } .survey-data-notice { background: var(--sdl-gold-soft); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); padding: var(--sdl-s4); margin: var(--sdl-s5) 0; color: var(--sdl-muted); } .survey-data-notice--todo { border-style: dashed; font-style: italic; } /* Mode choice — two cards side by side, nothing preselected */ .survey-mode { margin-top: var(--sdl-s6); border-top: 1px solid var(--sdl-line); padding-top: var(--sdl-s5); } .survey-mode__hint { color: var(--sdl-muted); } .survey-mode__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sdl-s4); margin: var(--sdl-s4) 0; } .survey-mode__option { display: block; cursor: pointer; margin: 0; } .survey-mode__option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .survey-mode__card { display: block; height: 100%; border: 2px solid var(--sdl-line); border-radius: var(--sdl-r); padding: var(--sdl-s4); background: var(--sdl-surface); transition: border-color .12s, box-shadow .12s; } .survey-mode__option input:checked + .survey-mode__card { border-color: var(--sdl-ink); box-shadow: var(--sdl-shadow); } .survey-mode__option input:focus-visible + .survey-mode__card { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .survey-mode__name { display: block; font-weight: 600; margin-bottom: var(--sdl-s2); } .survey-mode__desc { display: block; color: var(--sdl-muted); font-size: .92rem; line-height: 1.5; } .survey-mode__final { color: var(--sdl-muted); font-size: .9rem; } @media (max-width: 560px) { .survey-mode__options { grid-template-columns: 1fr; } } /* Progress */ .survey-progress { margin-bottom: var(--sdl-s5); } .survey-progress__bar { height: 6px; background: var(--sdl-track); border-radius: 999px; overflow: hidden; } .survey-progress__bar span { display: block; height: 100%; background: var(--sdl-gold); } .survey-progress__text { margin-top: var(--sdl-s2); font-size: .85rem; color: var(--sdl-muted); letter-spacing: .02em; } /* Sections & questions */ .survey-section__title { margin-bottom: var(--sdl-s3); } .survey-section__note { background: var(--sdl-gold-soft); border-radius: var(--sdl-r); padding: var(--sdl-s4); margin-bottom: var(--sdl-s4); font-style: italic; color: var(--sdl-muted); } .survey-section__intro { font-weight: 600; } .survey-legend { font-size: .88rem; color: var(--sdl-muted); background: var(--sdl-surface); border-left: 3px solid var(--sdl-gold); padding: var(--sdl-s2) var(--sdl-s3); margin-bottom: var(--sdl-s5); } .survey-q { border: 0; padding: 0; margin: 0 0 var(--sdl-s5); } .survey-q__label { font-weight: 500; color: var(--sdl-ink); margin-bottom: var(--sdl-s3); padding: 0; } .survey-note { color: var(--sdl-muted); font-size: .92rem; line-height: 1.55; margin: 0 0 var(--sdl-s3); } .survey-subs { margin-left: var(--sdl-s4); padding-left: var(--sdl-s4); border-left: 2px solid var(--sdl-line); } /* 0–9 scale as a row of touch targets */ .survey-scale, .survey-choices { display: flex; flex-wrap: wrap; gap: var(--sdl-s2); } .survey-scale__input, .survey-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .survey-scale__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sdl-s2); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); background: var(--sdl-surface); font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; transition: background .1s, border-color .1s, color .1s; } .survey-choice__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sdl-s4); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); background: var(--sdl-surface); cursor: pointer; user-select: none; transition: background .1s, border-color .1s, color .1s; } .survey-scale__btn:hover, .survey-choice__btn:hover { border-color: var(--sdl-muted); } .survey-scale__input:checked + .survey-scale__btn, .survey-choice__input:checked + .survey-choice__btn { background: var(--sdl-ink); border-color: var(--sdl-ink); color: #fff; } .survey-scale__input:focus-visible + .survey-scale__btn, .survey-choice__input:focus-visible + .survey-choice__btn { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } /* Actions */ .survey-actions { display: flex; justify-content: space-between; gap: var(--sdl-s3); margin-top: var(--sdl-s6); } .survey-actions--center { justify-content: center; } /* Review */ .survey-review__section { margin-bottom: var(--sdl-s5); } .survey-review__list { display: grid; grid-template-columns: 1fr; gap: var(--sdl-s2); margin: 0; } .survey-review__list dt { font-weight: 500; } .survey-review__list dd { margin: 0 0 var(--sdl-s3); color: var(--sdl-gold-deep); } .survey-recontact { border-top: 1px solid var(--sdl-line); padding-top: var(--sdl-s5); margin-top: var(--sdl-s5); } .survey-recontact__row { display: flex; align-items: flex-start; gap: var(--sdl-s3); } .survey-recontact__row.is-disabled { color: var(--sdl-muted); } .survey-recontact__note { color: var(--sdl-muted); font-size: .9rem; margin-top: var(--sdl-s2); } .survey-recontact__method { margin-top: var(--sdl-s3); } .survey-recontact__hint { color: var(--sdl-muted); font-size: .85rem; margin-top: var(--sdl-s2); } .survey-final { background: var(--sdl-gold-soft); border-radius: var(--sdl-r); padding: var(--sdl-s4); margin: var(--sdl-s5) 0; } .survey-final__warning { font-weight: 600; margin: var(--sdl-s2) 0 0; } /* End / message screens */ .survey-done, .survey-message { text-align: center; padding: var(--sdl-s7) 0; } .survey-done__icon { font-size: 3rem; color: var(--sdl-success); } .survey-done__dots { letter-spacing: .5em; color: var(--sdl-gold); margin: var(--sdl-s4) 0; } /* Guest (not logged in) intro notice */ .survey-guest__notice { display: flex; gap: var(--sdl-s3); align-items: flex-start; background: var(--sdl-gold-soft); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); padding: var(--sdl-s4); margin-bottom: var(--sdl-s4); } .survey-guest__notice p { color: var(--sdl-muted); margin-top: var(--sdl-s2); } /* Honeypot: keep it in the layout (bots read the DOM) but off-screen for humans. Not display:none — some bots skip hidden fields. */ .survey-hp, .sdl-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } /* ---------- 13. Accueil : une colonne d'application ---------- Chaque action une fois, en lignes tactiles : repère, titre et précision, valeur, chevron. Le vert reste un accent : un voile en tête, les dates, les prix. */ .sdl-home { --sdl-r-lg: 12px; padding-bottom: 56px; } .sdl-home__inner { max-width: 720px; margin: 0 auto; padding: 0 16px; } .sdl-home__intro { padding: 32px 0 30px; background: linear-gradient(180deg, var(--sdl-gold-soft) 0%, var(--sdl-paper) 100%); } .sdl-home__intro .sdl-flash { margin-bottom: 20px; } .sdl-home__title { font-family: var(--sdl-serif); font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 12px; max-width: 20ch; } .sdl-home__lead { font-size: 17px; color: var(--sdl-muted); margin: 0; max-width: 52ch; } .sdl-home__section { margin-top: 28px; } .sdl-home__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 4px; } .sdl-home__label { margin: 0; font-family: var(--sdl-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sdl-muted); } .sdl-home__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; } .sdl-home__account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin: 0; padding: 12px 16px; border-radius: var(--sdl-r-lg); background: var(--sdl-gold-soft); color: var(--sdl-gold-deep); font-size: 14.5px; } .sdl-home__account a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } @media (min-width: 992px) { .sdl-home__intro { padding: 56px 0 44px; } .sdl-home__section { margin-top: 36px; } } /* le mandala en filigrane, entier, à droite de la colonne, là où l'écran large reste vide */ @media (min-width: 1200px) { .sdl-home__intro { position: relative; } .sdl-home__intro::after { content: ""; position: absolute; top: 28px; bottom: 28px; left: calc(50% + 400px); aspect-ratio: 794 / 810; pointer-events: none; background: url("/img/shenten-logo.png") center / contain no-repeat; filter: grayscale(1); opacity: .09; } } /* liste en lignes, sans élévation : la surface blanche et un filet suffisent */ .sdl-list { list-style: none; margin: 0; padding: 0; background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r-lg, var(--sdl-r)); overflow: hidden; } .sdl-list > li + li { border-top: 1px solid var(--sdl-line); } .sdl-list__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; color: var(--sdl-ink); } a.sdl-list__row { transition: background .15s; } a.sdl-list__row:hover { background: #f8f9f9; color: var(--sdl-ink); } a.sdl-list__row:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: -2px; } a.sdl-list__row::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-top: 2px solid #8a9196; border-right: 2px solid #8a9196; transform: rotate(45deg); } .sdl-list__row--off { color: var(--sdl-muted); font-size: 14.5px; } .sdl-list__body { flex: 1; min-width: 0; } .sdl-list__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin: 0; font-family: var(--sdl-sans); font-size: 16px; font-weight: 600; line-height: 1.3; } .sdl-list__meta { display: block; margin: 2px 0 0; font-size: 13.5px; color: var(--sdl-muted); } .sdl-list__value { flex: none; font-family: var(--sdl-serif); font-size: 1.35rem; line-height: 1; color: var(--sdl-gold); font-variant-numeric: tabular-nums; white-space: nowrap; } /* une carte d'enseignement, comme sur /webinars, avec la tuile du jour et ses façons d'y venir */ .sdl-teaching { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--sdl-r-lg); } .sdl-teaching__head { display: flex; align-items: flex-start; gap: 14px; } .sdl-teaching__heading { flex: 1; min-width: 0; } .sdl-teaching__title { margin: 0; font-family: var(--sdl-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; } .sdl-teaching__when { margin: 4px 0 0; font-size: 13px; color: var(--sdl-muted); } .sdl-teaching__text { margin: 0; font-size: .85rem; color: var(--sdl-muted); } /* le jour dans une tuile ; la carte dit la date en entier */ .sdl-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 54px; border-radius: 10px; line-height: 1; background: var(--sdl-gold-soft); color: var(--sdl-gold-deep); } .sdl-date__day { font-family: var(--sdl-serif); font-size: 23px; font-variant-numeric: tabular-nums; } .sdl-date__month { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* les façons d'y venir : sur place, sur Zoom */ .sdl-ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .sdl-way { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--sdl-line); border-radius: 100px; background: var(--sdl-surface); font-size: 14px; font-weight: 600; color: var(--sdl-gold-deep); font-variant-numeric: tabular-nums; } .sdl-way:hover { border-color: var(--sdl-gold); background: var(--sdl-gold-soft); color: var(--sdl-gold-deep); } .sdl-way:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-way::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); } .sdl-progress--lg { display: block; height: 6px; border-radius: 3px; margin: 8px 0 6px; } .sdl-progress--lg .sdl-progress__bar { display: block; border-radius: 3px; } /* ============================================================ Shenten Dargye Ling — Calendrier des retraites dans le noir Bloc ADDITIONNEL pour assets/styles/app.css (après les blocs existants). CSS vanilla, aucune dépendance, AssetMapper. Composant rendu côté serveur (Twig) : HTML + CSS Grid + JS vanilla minimal (défilement initial, bascule de vue, toggle). ============================================================ */ /* ---------- C0. Palette v2 « gris perle » — override des tokens de base ---------- Remplace les valeurs chaudes de app.css (décision sept. 2026 : neutres froids, accent vert profond ; --sdl-gold garde son nom historique mais devient l'accent). */ :root { --sdl-paper: #f3f4f5; --sdl-surface: #ffffff; --sdl-ink: #202325; --sdl-muted: #626a6f; --sdl-line: #e2e4e6; --sdl-track: #e9ebec; --sdl-gold: #2f6f5e; --sdl-gold-soft: #e6f0ed; --sdl-gold-deep: #245548; } /* ---------- C1. Tokens chambres ---------- */ :root { --sdl-room-g: #8a641d; /* grande chambre — or, accent de la marque */ --sdl-room-g-soft: #f3ecdc; --sdl-room-a: #3f6b4a; /* petite A — vert profond */ --sdl-room-a-soft: #e6ede7; --sdl-room-b: #3f5a6b; /* petite B — bleu-ardoise désaturé */ --sdl-room-b-soft: #e5eaee; --sdl-room-c: #6b3f5a; /* petite C (4e chambre optionnelle) — prune */ --sdl-room-c-soft: #efe6ec; --sdl-cal-colw: 26px; /* largeur d'un jour (densité par défaut 8 sem) */ --sdl-cal-labelw: 158px; /* colonne chambres (44px sur mobile) */ --sdl-cal-rowh: 48px; } /* ---------- C2. Conteneur timeline ---------- */ /*
…rows…
Le défilement horizontal vit dans .sdl-cal__scroll, jamais dans body. Au chargement, JS positionne scrollLeft sur aujourd'hui. */ .sdl-cal { background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); } .sdl-cal__scroll { overflow-x: auto; overflow-y: hidden; } .sdl-cal__canvas { position: relative; width: max-content; } /* rangée générique : étiquette figée + piste en grille de jours */ .sdl-cal__row { display: flex; height: var(--sdl-cal-rowh); border-bottom: 1px solid #eceeef; } .sdl-cal__label { position: sticky; left: 0; z-index: 4; flex: 0 0 var(--sdl-cal-labelw); background: var(--sdl-surface); border-right: 1px solid var(--sdl-line); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; font-weight: 500; } .sdl-cal__track { position: relative; flex: none; display: grid; grid-template-columns: repeat(var(--sdl-cal-days, 56), var(--sdl-cal-colw)); grid-template-rows: 100%; } /* pastille de chambre — le marqueur est la LETTRE, pas la couleur */ .sdl-cal__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; } .sdl-cal__dot--g { background: var(--sdl-room-g); } .sdl-cal__dot--a { background: var(--sdl-room-a); } .sdl-cal__dot--b { background: var(--sdl-room-b); } .sdl-cal__dot--c { background: var(--sdl-room-c); } /* ---------- C3. En-tête temporel (2 niveaux) ---------- */ .sdl-cal__months { height: 20px; font-family: var(--sdl-serif); font-size: 12px; color: var(--sdl-muted); } .sdl-cal__days { height: 30px; border-bottom: 1px solid var(--sdl-line); } .sdl-cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; font-variant-numeric: tabular-nums; } .sdl-cal__day small { font-size: 8.5px; color: #98a0a4; text-transform: uppercase; } .sdl-cal__day span { font-size: 10.5px; color: var(--sdl-muted); min-width: 17px; text-align: center; border-radius: 9px; } .sdl-cal__day--today span { background: var(--sdl-gold); color: #fff; font-weight: 700; } /* trame week-end + filets : appliqués sur la piste en dégradés répétés, décalés en background-position selon le jour de semaine du 1er jour */ .sdl-cal__track { background-image: repeating-linear-gradient(90deg, rgba(32,35,37,.045) 0 calc(var(--sdl-cal-colw) * 2), transparent calc(var(--sdl-cal-colw) * 2) calc(var(--sdl-cal-colw) * 7)), repeating-linear-gradient(90deg, #edeff0 0 1px, transparent 1px var(--sdl-cal-colw)); } .sdl-cal__monthline { position: absolute; top: 0; bottom: 0; width: 1px; background: #cfd3d5; } .sdl-cal__todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sdl-gold); z-index: 3; pointer-events: none; } /* ---------- C4. Barres de séjour ---------- */ /* */ .sdl-cal-stay { grid-row: 1; align-self: center; height: calc(var(--sdl-cal-rowh) - 12px); display: flex; align-items: center; gap: 6px; padding: 0 7px; overflow: hidden; border-radius: var(--sdl-r); border: 1px solid transparent; box-sizing: border-box; font-size: 12px; font-weight: 500; color: var(--sdl-ink); z-index: 2; } .sdl-cal-stay:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 1px; } .sdl-cal-stay--g { background: var(--sdl-room-g-soft); border-left: 3px solid var(--sdl-room-g); } .sdl-cal-stay--a { background: var(--sdl-room-a-soft); border-left: 3px solid var(--sdl-room-a); } .sdl-cal-stay--b { background: var(--sdl-room-b-soft); border-left: 3px solid var(--sdl-room-b); } .sdl-cal-stay--c { background: var(--sdl-room-c-soft); border-left: 3px solid var(--sdl-room-c); } .sdl-cal-stay__dot { width: 16px; height: 16px; font-size: 9px; } .sdl-cal-stay__dur { margin-left: auto; font-size: 11px; color: var(--sdl-muted); font-variant-numeric: tabular-nums; } /* texte masqué quand la barre est trop étroite (JS pose .is-narrow, ou container queries si disponibles) ; l'info reste en title/aria-label */ .sdl-cal-stay.is-narrow .sdl-cal-stay__name, .sdl-cal-stay.is-narrow .sdl-cal-stay__dur { display: none; } /* statuts — jamais portés par la teinte */ .sdl-cal-stay--propose { background: #fffdf8; border: 1px dashed currentColor; } .sdl-cal-stay--propose.sdl-cal-stay--g { border-color: var(--sdl-room-g); border-left-width: 3px; } .sdl-cal-stay--propose.sdl-cal-stay--a { border-color: var(--sdl-room-a); border-left-width: 3px; } .sdl-cal-stay--propose.sdl-cal-stay--b { border-color: var(--sdl-room-b); border-left-width: 3px; } .sdl-cal-stay--propose.sdl-cal-stay--c { border-color: var(--sdl-room-c); border-left-width: 3px; } .sdl-cal-stay--realise { opacity: .55; color: var(--sdl-muted); border-left-width: 2px; } .sdl-cal-stay--annule { text-decoration: line-through; opacity: .45; } /* masqué par défaut */ .sdl-cal-stay--encours { border-left-width: 4px; } .sdl-cal-stay__tag { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sdl-gold-deep); } /* remise en état (2 j) — déduite, hachurée, subordonnée à la barre */ .sdl-cal-turn { grid-row: 1; align-self: center; height: calc(var(--sdl-cal-rowh) - 20px); border-radius: var(--sdl-r); } .sdl-cal-turn--g { background: repeating-linear-gradient(45deg, rgba(138,100,29,.20) 0 3px, transparent 3px 7px); } .sdl-cal-turn--a { background: repeating-linear-gradient(45deg, rgba(63,107,74,.20) 0 3px, transparent 3px 7px); } .sdl-cal-turn--b { background: repeating-linear-gradient(45deg, rgba(63,90,107,.20) 0 3px, transparent 3px 7px); } .sdl-cal-turn--c { background: repeating-linear-gradient(45deg, rgba(107,63,90,.20) 0 3px, transparent 3px 7px); } /* créneau libre mis en avant */ .sdl-cal-free { grid-row: 1; align-self: center; height: calc(var(--sdl-cal-rowh) - 16px); border: 1.5px dashed #6f9d8d; border-radius: var(--sdl-r); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--sdl-gold-deep); } /* ---------- C5. Fermeture ---------- */ .sdl-cal-closure { position: absolute; z-index: 1; background-color: rgba(233,235,236,.72); background-image: repeating-linear-gradient(90deg, rgba(32,35,37,.045) 0 1px, transparent 1px 9px); border-left: 1px solid #cfd3d5; border-right: 1px solid #cfd3d5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sdl-cal-closure span { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sdl-muted); white-space: nowrap; padding: 0 8px; } /* ---------- C6. Piste secondaire (retraites personnelles) ---------- */ .sdl-cal__row--sec { height: 30px; } .sdl-cal__row--sectitle { height: 20px; border-top: 1px solid #cfd3d5; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #98a0a4; } .sdl-cal-sec { grid-row: 1; align-self: center; height: 20px; background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); display: flex; align-items: center; padding: 0 7px; font-size: 11px; color: var(--sdl-muted); overflow: hidden; white-space: nowrap; } /* ---------- C7. Bandeau « prochaine disponibilité » ---------- */ .sdl-cal-avail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; } .sdl-cal-avail__tile { background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); padding: 15px 17px; display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; } .sdl-cal-avail__tile:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-cal-avail__tile--free { background: #faf6ea; border-color: #d9c99a; } .sdl-cal-avail__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .sdl-cal-avail__chev { margin-left: auto; color: var(--sdl-muted); font-size: 15px; transition: transform .15s; } .sdl-cal-avail__tile[aria-expanded="true"] .sdl-cal-avail__chev { transform: rotate(90deg); } .sdl-cal-avail__main { font-family: var(--sdl-serif); font-size: 19px; margin-top: 9px; } .sdl-cal-avail__tile--free .sdl-cal-avail__main { color: var(--sdl-gold-deep); } .sdl-cal-avail__sub { font-size: 12px; color: var(--sdl-muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .sdl-cal-avail__flag { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sdl-gold-deep); } .sdl-cal-avail__detail { margin-top: 11px; border-top: 1px solid var(--sdl-line); padding-top: 9px; } @media (max-width: 720px) { .sdl-cal-avail { grid-template-columns: 1fr; } } /* ---------- C8bis. Mobile (vue partagée = cas dominant) ---------- */ /* La timeline défile dans son conteneur, jamais le body ; la colonne de chambres se réduit à la pastille seule ; densité ~2 semaines visibles. */ @media (max-width: 620px) { :root { --sdl-cal-labelw: 46px; --sdl-cal-colw: 24px; --sdl-cal-rowh: 42px; } .sdl-cal__label span:not(.sdl-cal__dot) { display: none; } /* pastille seule */ .sdl-cal__scroll { -webkit-overflow-scrolling: touch; } .sdl-cal-toolbar button { min-height: 44px; min-width: 44px; } /* cibles tactiles */ } html, body { overflow-x: clip; } /* aucun débordement horizontal du body */ /* ---------- C8. Barre d'outils, bascule, légende ---------- */ .sdl-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .sdl-cal-toolbar .btn-group-sdl { display: flex; border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); overflow: hidden; } .sdl-cal-toolbar .btn-group-sdl > button { height: 30px; padding: 0 13px; border: 0; background: var(--sdl-surface); color: var(--sdl-ink); font-size: 12px; cursor: pointer; } .sdl-cal-toolbar .btn-group-sdl > button + button { border-left: 1px solid var(--sdl-line); } .sdl-cal-toolbar .btn-group-sdl > button.is-active { background: var(--sdl-ink); color: #fff; font-weight: 600; } .sdl-cal-toolbar .btn-group-sdl > button:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: -2px; } .sdl-cal-legend { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--sdl-muted); } /* légende PERMANENTE, jamais repliée */ .sdl-cal-legend .swatch { display: inline-block; width: 24px; height: 14px; border-radius: var(--sdl-r); vertical-align: middle; margin-right: 7px; } /* ---------- C9. Grille mensuelle ---------- */ .sdl-cal-month { background: var(--sdl-surface); border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); } .sdl-cal-month__nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 12px 4px; } .sdl-cal-month__title { font-family: var(--sdl-serif); font-size: 18px; font-weight: 500; text-transform: capitalize; min-width: 11rem; text-align: center; } .sdl-cal-month__navbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); color: var(--sdl-ink); text-decoration: none; font-size: 18px; background: var(--sdl-surface); } .sdl-cal-month__navbtn:hover { border-color: var(--sdl-gold); color: var(--sdl-gold-deep); } @media print { .sdl-cal-month__nav { padding: 0 0 6px; } .sdl-cal-month__navbtn { display: none; } } .sdl-cal-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .sdl-cal-month__dow { padding: 7px 10px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #98a0a4; text-align: right; border-bottom: 1px solid var(--sdl-line); } .sdl-cal-month__cell { min-height: 92px; padding: 6px 8px; border-right: 1px solid #eceeef; border-bottom: 1px solid #eceeef; display: flex; flex-direction: column; background: var(--sdl-surface); } .sdl-cal-month__num { font-size: 12px; font-variant-numeric: tabular-nums; align-self: flex-end; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; } .sdl-cal-month__cell--out .sdl-cal-month__num { color: #c3c8cb; } .sdl-cal-month__cell--today .sdl-cal-month__num { background: var(--sdl-gold); color: #fff; font-weight: 700; } .sdl-cal-month__cell--closed { background-color: var(--sdl-track); background-image: repeating-linear-gradient(90deg, rgba(32,35,37,.04) 0 1px, transparent 1px 8px); } /* barres continues par personne — trois pistes fixes (G/A/B) en bas de case. Chaque semaine est un conteneur position:relative ; les barres sont positionnées en % de colonne (left: startCol/7, width: span/7) et continuent d'une semaine à l'autre (coins ouverts, .is-start/.is-end). */ .sdl-cal-month__week { position: relative; border-bottom: 1px solid #eceeef; } .sdl-cal-month__bar { position: absolute; height: 16px; display: flex; align-items: center; gap: 5px; padding: 0 5px; overflow: hidden; box-sizing: border-box; z-index: 2; border-radius: 0; font-size: 10.5px; font-weight: 500; color: var(--sdl-ink); } .sdl-cal-month__bar:focus-visible { outline: 2px solid var(--sdl-gold); outline-offset: 1px; } .sdl-cal-month__bar--lane-g { top: calc(var(--sdl-cal-month-cellh, 96px) - 60px); background: var(--sdl-room-g-soft); } .sdl-cal-month__bar--lane-a { top: calc(var(--sdl-cal-month-cellh, 96px) - 41px); background: var(--sdl-room-a-soft); } .sdl-cal-month__bar--lane-b { top: calc(var(--sdl-cal-month-cellh, 96px) - 22px); background: var(--sdl-room-b-soft); } .sdl-cal-month__bar--lane-c { top: calc(var(--sdl-cal-month-cellh, 96px) - 3px); background: var(--sdl-room-c-soft); } .sdl-cal-month__bar.is-start { border-top-left-radius: var(--sdl-r); border-bottom-left-radius: var(--sdl-r); } .sdl-cal-month__bar.is-end { border-top-right-radius: var(--sdl-r); border-bottom-right-radius: var(--sdl-r); } .sdl-cal-month__bar--lane-g.is-start { border-left: 3px solid var(--sdl-room-g); } .sdl-cal-month__bar--lane-a.is-start { border-left: 3px solid var(--sdl-room-a); } .sdl-cal-month__bar--lane-b.is-start { border-left: 3px solid var(--sdl-room-b); } .sdl-cal-month__bar--lane-c.is-start { border-left: 3px solid var(--sdl-room-c); } .sdl-cal-month__bar--propose { background: #fffdf8; border: 1px dashed currentColor; } .sdl-cal-month__bar--realise { opacity: .55; color: var(--sdl-muted); } .sdl-cal-month__bar--turn-g { background: repeating-linear-gradient(45deg, rgba(138,100,29,.20) 0 3px, transparent 3px 7px); } .sdl-cal-month__bar--turn-a { background: repeating-linear-gradient(45deg, rgba(63,107,74,.20) 0 3px, transparent 3px 7px); } .sdl-cal-month__bar--turn-b { background: repeating-linear-gradient(45deg, rgba(63,90,107,.20) 0 3px, transparent 3px 7px); } /* pastille-lettre + nom uniquement sur le segment de départ (.is-start) */ .sdl-cal-month__bar .sdl-cal__dot { width: 13px; height: 13px; font-size: 8px; } .sdl-cal-month__bar:not(.is-start) .sdl-cal__dot, .sdl-cal-month__bar:not(.is-start) .sdl-cal-month__bar-name { display: none; } /* mobile : la grille devient une liste chronologique (rendue par Twig, même données) — la grille 7 colonnes est masquée */ @media (max-width: 680px) { .sdl-cal-month__grid { display: none; } .sdl-cal-month__list { display: block; } } .sdl-cal-month__list { display: none; } .sdl-cal-month__list li { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid #eceeef; font-size: 13px; list-style: none; } /* ---------- C10. Formulaire séjour ---------- */ .sdl-cal-roomradio { display: flex; flex-wrap: wrap; gap: 8px; } .sdl-cal-roomradio label { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--sdl-line); border-radius: var(--sdl-r); font-size: 13px; color: var(--sdl-muted); cursor: pointer; } .sdl-cal-roomradio input { position: absolute; opacity: 0; } .sdl-cal-roomradio input:focus-visible + label { outline: 2px solid var(--sdl-gold); outline-offset: 2px; } .sdl-cal-roomradio input:checked + label { color: var(--sdl-ink); font-weight: 600; } .sdl-cal-roomradio input:checked + label.room-g { border: 1.5px solid var(--sdl-room-g); background: var(--sdl-room-g-soft); } .sdl-cal-roomradio input:checked + label.room-a { border: 1.5px solid var(--sdl-room-a); background: var(--sdl-room-a-soft); } .sdl-cal-roomradio input:checked + label.room-b { border: 1.5px solid var(--sdl-room-b); background: var(--sdl-room-b-soft); } .sdl-cal-roomradio input:checked + label.room-c { border: 1.5px solid var(--sdl-room-c); background: var(--sdl-room-c-soft); } /* garde-fous */ .sdl-cal-alert { border-left: 3px solid var(--sdl-danger); background: #fbf3f1; border-radius: var(--sdl-r); padding: 10px 13px; font-size: 12.5px; color: #7c3328; line-height: 1.5; } .sdl-cal-alert--warn { border-left-color: #9a7b3a; background: #faf5e9; color: #75603a; } /* avertissement : reste chaud, distinct de l'accent */ .sdl-cal-stay.is-conflict { outline: 2px solid var(--sdl-danger); outline-offset: 1px; } /* ---------- C11. Mode « application » — vue partagée < 700 px ---------- Sur téléphone la vue partagée abandonne la timeline pour un mode app : cartes chambre + agenda + barre d'onglets. La timeline reste le rendu bureau et impression. Même partial Twig, les deux blocs sont rendus et c'est le CSS qui bascule (aucun JS de layout). */ .sdl-app { display: none; } @media (max-width: 700px) { .sdl-cal--desktop, .sdl-cal-avail { display: none; } /* The app fills the screen: content stretches to the viewport height and the tab bar is pinned to the very bottom edge, clear of the last card. */ .sdl-app { display: block; min-height: calc(100dvh - 150px); padding-bottom: 78px; } .sdl-app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-shadow: 0 -1px 0 var(--sdl-line), 0 -6px 18px rgba(32,35,37,.05); } } /* carte chambre —