/* ============================================================
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); }
/* 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; }
/* ---------- 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; }
/* 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 { 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; }
.sdl-tax-slot { padding: 14px 16px; border: 1px dashed #cdbf9d; border-radius: var(--sdl-r);
background: var(--sdl-gold-soft); font-size: 12.5px; color: var(--sdl-gold-deep); }
@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__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: 20px; padding-top: 24px; }
.sdl-account__aside { position: static; }
.sdl-account__nav { flex-direction: row; flex-wrap: wrap; }
.sdl-account__link { flex: 1 1 auto; }
.sdl-account__aside-foot { margin-top: 10px; }
}
/* ===== 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 { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
/* ============================================================
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-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 ---------- */
/*
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); }
/* ---------- 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__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--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); }
/* 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; }
.sdl-cal-avail__tile { background: var(--sdl-surface); border: 1px solid var(--sdl-line);
border-radius: var(--sdl-r); padding: 15px 17px; }
.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__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 { margin-left: auto; font-size: 9.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--sdl-gold-deep); }
@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__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.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--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; 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); }
/* 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. Impression ---------- */
@media print {
.sdl-cal-toolbar, .sdl-cal-actions, .sdl-header, .sdl-footer, .btn, button { display: none !important; }
.sdl-cal, .sdl-cal-month { border-color: #999; }
.sdl-cal__scroll { overflow: visible; }
.sdl-cal-print-head { display: flex !important; justify-content: space-between;
align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 18px; }
body { background: #fff; }
a { color: inherit; }
}
.sdl-cal-print-head { display: none; } /* en-tête papier : lieu, intitulé, période, date d'édition */
@page sdl-cal-timeline { size: A4 landscape; }
@page sdl-cal-month { size: A4 portrait; }
.sdl-cal--print-landscape { page: sdl-cal-timeline; }
.sdl-cal-month--print { page: sdl-cal-month; }