mirror of
https://github.com/R0m1k3/PleinR.git
synced 2026-10-11 17:27:54 +02:00
Claude
bfc82b3b3b
- src/lib/tags.ts (pur) : mots-clés par métier pour les 104 catégories, vocabulaire transversal détecté dans la description (fait maison, bio, livraison, sur rendez-vous, devis gratuit…), suggestTags() qui combine métier, commune et description, autoTags() qui n'intervient qu'à vide. - Enregistrement : addMember, updateMember et updateOwnProfile passent par resolveMemberTags() ; un champ laissé vide reçoit les suggestions, une saisie n'est jamais remplacée. - Formulaires : composant TagsField (champ non contrôlé + pastilles de suggestions recalculées à chaque frappe depuis catégorie, commune et description ; « Tout ajouter »), dans l'espace adhérent et la fiche staff. - Fiche publique : les fiches jamais ré-enregistrées affichent les tags suggérés et les transmettent dans LocalBusiness.keywords. - tests/tags.test.ts : couverture de chaque métier, nettoyage, détection, ordre des suggestions, non-écrasement. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HDbKbJrPWweXXYSxA8MXW7
1507 lines
30 KiB
CSS
1507 lines
30 KiB
CSS
:root {
|
|
--cream: #f6f2e8;
|
|
--cream-2: #efe9da;
|
|
--cream-3: #ede7d7;
|
|
--ink: #33291d;
|
|
--ink-strong: #26201a;
|
|
--ink-soft: #3c3322;
|
|
--muted: #6c6150;
|
|
--muted-2: #8c8068;
|
|
--muted-3: #9a8d72;
|
|
--muted-4: #a99c82;
|
|
--brown: #9a6638;
|
|
--blue: #2c6fb3;
|
|
--blue-deep: #1e588f;
|
|
--navy: #13324f;
|
|
--gold: #e0a63c;
|
|
--teal: #6fb0c6;
|
|
--green: #1f8a5b;
|
|
--red: #d8472b;
|
|
--border: #e6dcc6;
|
|
--border-2: #f0e8d6;
|
|
--field-border: #ddd2bb;
|
|
--field-bg: #faf7ef;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--cream);
|
|
font-family: "Public Sans", system-ui, sans-serif;
|
|
color: var(--ink);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--muted-4);
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* ---- Animations ---- */
|
|
@keyframes plr-twinkle {
|
|
0% {
|
|
transform: translate(0, 0) scale(0.9) rotate(0deg);
|
|
opacity: 0.55;
|
|
}
|
|
25% {
|
|
transform: translate(4px, -9px) scale(1.15) rotate(15deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translate(-3px, -13px) scale(1.32) rotate(26deg);
|
|
opacity: 0.85;
|
|
}
|
|
75% {
|
|
transform: translate(-5px, -5px) scale(1.1) rotate(12deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(0.9) rotate(0deg);
|
|
opacity: 0.55;
|
|
}
|
|
}
|
|
@keyframes plr-floatlogo {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(-0.6deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-14px) rotate(0.6deg);
|
|
}
|
|
}
|
|
/* Dérive lente des étoiles. Utilise la propriété `translate` (indépendante de
|
|
`transform`) pour se cumuler avec le scintillement `plr-twinkle`. */
|
|
@keyframes plr-drift {
|
|
0%,
|
|
100% {
|
|
translate: 0 0;
|
|
}
|
|
33% {
|
|
translate: 12px -18px;
|
|
}
|
|
66% {
|
|
translate: -10px 10px;
|
|
}
|
|
}
|
|
|
|
.sparkle {
|
|
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
|
|
}
|
|
|
|
/* ---- Champ d'étoiles flottantes ---- */
|
|
.starfield {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.starfield .star {
|
|
position: absolute;
|
|
animation: plr-twinkle var(--tw, 3.2s) ease-in-out infinite,
|
|
plr-drift var(--dr, 9s) ease-in-out infinite;
|
|
}
|
|
|
|
/* ---- Scroll-reveal entrance animations ---- */
|
|
@keyframes plr-fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
}
|
|
.reveal.is-visible {
|
|
animation: plr-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
|
}
|
|
|
|
/* Staggered children (grids) */
|
|
.reveal-stagger > * {
|
|
opacity: 0;
|
|
}
|
|
.reveal-stagger.is-visible > * {
|
|
animation: plr-fade-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
|
}
|
|
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
|
|
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.1s; }
|
|
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
|
|
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
|
|
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
|
|
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.34s; }
|
|
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.4s; }
|
|
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.46s; }
|
|
.reveal-stagger.is-visible > *:nth-child(n + 9) { animation-delay: 0.52s; }
|
|
|
|
.twinkle {
|
|
animation: plr-twinkle 3.2s ease-in-out infinite;
|
|
}
|
|
.floatlogo {
|
|
animation: plr-floatlogo 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* ---- Hover lifts ---- */
|
|
.lift {
|
|
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
|
}
|
|
.lift:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 16px 30px -18px rgba(40, 30, 15, 0.45);
|
|
border-color: #d8cdb4;
|
|
}
|
|
.lift-card {
|
|
transition: transform 0.28s ease, box-shadow 0.28s ease;
|
|
}
|
|
.lift-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 24px 44px -24px rgba(40, 30, 15, 0.5);
|
|
}
|
|
.lift-cta {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.lift-cta:hover {
|
|
transform: translateY(-3px) scale(1.03);
|
|
box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.link-arrow:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---- Layout helpers ---- */
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 56px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
.grid-6 {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.grid-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.grid-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.grid-2 {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 22px;
|
|
}
|
|
.hero-grid {
|
|
grid-template-columns: 0.92fr 1.08fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
}
|
|
.dash-split {
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
.admins-split {
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.fiche-split {
|
|
grid-template-columns: 1.65fr 1fr;
|
|
gap: 26px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* ---- En-tête public ---- */
|
|
.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 18px clamp(16px, 5vw, 56px);
|
|
}
|
|
.site-header__brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-right: auto;
|
|
}
|
|
.site-header__brand.is-desktop-hidden {
|
|
display: none;
|
|
}
|
|
.site-header__brand img {
|
|
display: block;
|
|
width: auto;
|
|
height: 46px;
|
|
}
|
|
.site-header__nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
margin-left: auto;
|
|
}
|
|
.site-header__link {
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.site-header__link.is-active {
|
|
color: var(--ink-soft);
|
|
font-weight: 600;
|
|
}
|
|
.site-header__cta {
|
|
padding: 10px 18px;
|
|
border-radius: 999px;
|
|
background: var(--brown);
|
|
color: #fff;
|
|
font-size: 14.5px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
/* Ligne 1 : logo + accès adhérent. Ligne 2 : la navigation, répartie sur
|
|
toute la largeur plutôt que repliée en escalier. */
|
|
.site-header {
|
|
flex-wrap: wrap;
|
|
gap: 10px 12px;
|
|
padding: 12px 16px;
|
|
}
|
|
.site-header__brand,
|
|
.site-header__brand.is-desktop-hidden {
|
|
display: inline-flex;
|
|
}
|
|
.site-header__brand img {
|
|
height: 38px;
|
|
}
|
|
.site-header__nav {
|
|
order: 3;
|
|
flex: 1 1 100%;
|
|
margin-left: 0;
|
|
gap: 6px;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #e2d6bd;
|
|
padding-top: 10px;
|
|
}
|
|
.site-header__link {
|
|
font-size: 14px;
|
|
}
|
|
.site-header__cta {
|
|
padding: 9px 15px;
|
|
font-size: 13.5px;
|
|
}
|
|
}
|
|
|
|
/* ---- Public footer & legal pages ---- */
|
|
.site-footer {
|
|
background: var(--cream-2);
|
|
/* Filet doré : referme la page au lieu d'une simple ligne grise. */
|
|
border-top: 3px solid var(--gold);
|
|
}
|
|
/* Quatre colonnes : à trois, la dernière laissait un tiers de la largeur vide. */
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr));
|
|
gap: 40px;
|
|
align-items: start;
|
|
}
|
|
.footer-brand img {
|
|
display: block;
|
|
width: 96px;
|
|
height: auto;
|
|
}
|
|
.footer-tagline {
|
|
margin: 10px 0 0;
|
|
max-width: 340px;
|
|
color: var(--muted);
|
|
font-size: 13.5px;
|
|
line-height: 1.65;
|
|
}
|
|
.footer-title {
|
|
margin: 0 0 14px;
|
|
color: var(--brown);
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
color: var(--muted);
|
|
font-size: 13.5px;
|
|
}
|
|
.footer-links a,
|
|
.footer-links button {
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
.footer-links a:hover,
|
|
.footer-links button:hover {
|
|
color: var(--brown);
|
|
transform: translateX(2px);
|
|
}
|
|
/* Boutons sociaux libellés : plus lisibles que deux icônes isolées, et ils
|
|
donnent enfin du contenu à la quatrième colonne. */
|
|
.footer-social {
|
|
/* Grille à une colonne dimensionnée sur son contenu : tous les boutons
|
|
prennent la largeur du plus long au lieu de s'étirer sur la colonne ou de
|
|
former un escalier. */
|
|
display: inline-grid;
|
|
grid-template-columns: minmax(150px, max-content);
|
|
gap: 9px;
|
|
}
|
|
.footer-social a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 13px;
|
|
border: 1px solid #e2d6bd;
|
|
border-radius: 11px;
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: border-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
.footer-social a:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
.footer-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
margin-top: 16px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.footer-contact a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.footer-contact a:hover {
|
|
color: var(--brown);
|
|
}
|
|
.footer-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px 20px;
|
|
flex-wrap: wrap;
|
|
border-top: 1px solid #ded2b9;
|
|
margin-top: 34px;
|
|
padding-top: 18px;
|
|
color: var(--muted-2);
|
|
font-size: 12.5px;
|
|
}
|
|
.footer-bottom__place {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.footer-bottom__place::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--gold);
|
|
}
|
|
.legal-content h2 {
|
|
font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
|
|
color: var(--ink-strong);
|
|
font-size: 20px;
|
|
margin: 28px 0 8px;
|
|
}
|
|
.legal-content p,
|
|
.legal-content li {
|
|
color: var(--muted);
|
|
font-size: 14.5px;
|
|
line-height: 1.75;
|
|
}
|
|
.legal-content p {
|
|
margin: 0 0 12px;
|
|
}
|
|
.legal-content ul {
|
|
margin: 8px 0 14px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.grid-6 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.grid-4 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.grid-3 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.dash-split,
|
|
.admins-split,
|
|
.fiche-split {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 860px) {
|
|
.container {
|
|
padding: 0 24px;
|
|
}
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.grid-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.footer-grid {
|
|
/* Quatre colonnes ne tiennent plus : la marque prend toute la ligne. */
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 30px;
|
|
}
|
|
.footer-grid > :first-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.grid-6,
|
|
.grid-3 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
/* Les compteurs du tableau de bord restent sur deux colonnes : empilés, ils
|
|
imposaient un écran entier de défilement pour quatre chiffres. */
|
|
.grid-4 {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
.footer-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 26px;
|
|
}
|
|
.footer-grid > :first-child,
|
|
/* « Nous suivre » resterait seule dans une colonne, la moitié droite vide. */
|
|
.footer-grid > :last-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.footer-social {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.footer-bottom {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
/* Évite tout débordement horizontal sur mobile. */
|
|
html,
|
|
body {
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
/* Tables/listes larges du back-office : défilement horizontal contenu. */
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* ---- « Ce que l'association vous apporte » (page Association) ---- */
|
|
.pillars-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
.pillar-card {
|
|
padding: 18px 18px 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
.pillar-card__index {
|
|
color: var(--gold);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.pillar-card__title {
|
|
margin: 8px 0 7px;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
}
|
|
.pillar-card__text {
|
|
margin: 0;
|
|
color: #a9c4da;
|
|
font-size: 13.5px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.pillars-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.pillars-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ---- Compteurs du tableau de bord ---- */
|
|
.stat-card {
|
|
padding: 20px;
|
|
}
|
|
.stat-card__label {
|
|
margin-bottom: 8px;
|
|
color: var(--muted-3);
|
|
font-size: 13px;
|
|
}
|
|
.stat-card__value {
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
}
|
|
.stat-card__hint {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.stat-card {
|
|
padding: 14px;
|
|
}
|
|
.stat-card__label {
|
|
margin-bottom: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.stat-card__value {
|
|
font-size: 26px;
|
|
}
|
|
.stat-card__hint {
|
|
margin-top: 3px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* ---- Liste des adhérents : tableau sur grand écran, fiches sur téléphone ---- */
|
|
.member-row {
|
|
display: grid;
|
|
grid-template-columns: 1.6fr 1fr 1.2fr 0.9fr 0.8fr;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.member-row__identity {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.member-row__mail {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.member-row__action {
|
|
text-align: right;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
/* Un tableau à 5 colonnes est illisible sur un téléphone : chaque adhérent
|
|
devient une fiche qui se replie, sans défilement horizontal. */
|
|
.member-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 9px 10px;
|
|
}
|
|
/* Doit rester après `.member-row` : même spécificité, c'est l'ordre qui tranche. */
|
|
.member-row.member-head {
|
|
display: none;
|
|
}
|
|
.member-row__identity {
|
|
flex: 1 1 100%;
|
|
}
|
|
/* Base 0 : les métadonnées ne réclament pas leur largeur de contenu, donc la
|
|
ligne ne se replie pas et c'est le texte qui se rogne. Chaque fiche tient
|
|
ainsi sur deux lignes, toujours de la même façon. */
|
|
.member-row__meta {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 13px !important;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.member-row__action {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* ---- Backend layout ---- */
|
|
.backend {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: var(--cream-3);
|
|
}
|
|
.sidebar {
|
|
width: 248px;
|
|
flex-shrink: 0;
|
|
background: var(--navy);
|
|
color: #cfe0ee;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 22px 16px;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
.sidebar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 6px 8px 18px;
|
|
}
|
|
.sidebar-close {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* 40px : cible tactile confortable au pouce. */
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #cfe0ee;
|
|
cursor: pointer;
|
|
}
|
|
.sidebar-nav {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
/* Sans min-height:0 un enfant flex refuse de rétrécir : la zone débordait
|
|
sous la carte utilisateur, qui interceptait les clics sur les derniers
|
|
liens au lieu de laisser défiler le menu. */
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
.sidebar-section {
|
|
padding: 16px 10px 7px;
|
|
color: #5f7d97;
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.sidebar-nav > div:first-child .sidebar-section {
|
|
padding-top: 4px;
|
|
}
|
|
.sidebar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
margin-top: 14px;
|
|
padding: 11px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
/* Sur grand écran les actions vivent dans l'entête, pas dans la barre. */
|
|
.sidebar-actions {
|
|
display: none;
|
|
gap: 9px;
|
|
margin-top: 12px;
|
|
}
|
|
.nav-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
width: 100%;
|
|
text-align: left;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: "Public Sans", sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding: 11px 12px;
|
|
border-radius: 10px;
|
|
margin-bottom: 3px;
|
|
transition: background 0.15s;
|
|
text-decoration: none;
|
|
background: transparent;
|
|
color: #9bb6cd;
|
|
}
|
|
.nav-btn:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: #cfe0ee;
|
|
}
|
|
.nav-btn.active {
|
|
background: rgba(224, 166, 60, 0.22);
|
|
color: #fff;
|
|
box-shadow: inset 3px 0 0 var(--gold);
|
|
}
|
|
.sidebar-backdrop {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 40;
|
|
border: 0;
|
|
padding: 0;
|
|
background: rgba(19, 50, 79, 0.5);
|
|
}
|
|
.backend-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 18px 32px;
|
|
background: var(--cream);
|
|
border-bottom: 1px solid #e2d6bd;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
}
|
|
.backend-header__title {
|
|
margin: 0;
|
|
color: var(--ink-strong);
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
}
|
|
.backend-header__sub {
|
|
margin-top: 2px;
|
|
color: var(--muted-3);
|
|
font-size: 13px;
|
|
}
|
|
.backend-header__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.backend-burger {
|
|
display: none;
|
|
padding: 9px;
|
|
border: 1px solid #d8cdb4;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
cursor: pointer;
|
|
}
|
|
.backend-action {
|
|
display: inline-block;
|
|
border: 1px solid #d8cdb4;
|
|
border-radius: 10px;
|
|
padding: 9px 15px;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-family: inherit;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.backend-action--strong {
|
|
background: #fff;
|
|
color: var(--brown);
|
|
font-weight: 700;
|
|
}
|
|
.backend-content {
|
|
flex: 1;
|
|
padding: 28px 32px 44px;
|
|
min-width: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d8cdb4;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Sous 1024px la barre latérale devient un tiroir : l'empiler en ligne rendait
|
|
la navigation illisible sur téléphone. */
|
|
@media (max-width: 1024px) {
|
|
.backend {
|
|
flex-direction: column;
|
|
}
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 50;
|
|
width: min(304px, 86vw);
|
|
height: 100dvh;
|
|
padding: 18px 14px;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.25s ease;
|
|
box-shadow: 0 0 40px rgba(19, 50, 79, 0.35);
|
|
}
|
|
.sidebar.is-open {
|
|
transform: translateX(0);
|
|
}
|
|
.sidebar-close,
|
|
.sidebar-actions {
|
|
display: flex;
|
|
}
|
|
.sidebar-actions .backend-action {
|
|
flex: 1;
|
|
border-color: rgba(255, 255, 255, 0.22);
|
|
color: #cfe0ee;
|
|
text-align: center;
|
|
}
|
|
.sidebar-actions form {
|
|
flex: 1;
|
|
}
|
|
.sidebar-actions .backend-action--strong {
|
|
width: 100%;
|
|
background: var(--gold);
|
|
border-color: var(--gold);
|
|
color: var(--ink);
|
|
}
|
|
.sidebar-backdrop {
|
|
display: block;
|
|
}
|
|
.backend-burger {
|
|
display: inline-flex;
|
|
}
|
|
.backend-header__actions {
|
|
display: none;
|
|
}
|
|
.backend-header {
|
|
padding: 13px 16px;
|
|
gap: 12px;
|
|
}
|
|
.backend-header__title {
|
|
font-size: 18px;
|
|
}
|
|
.backend-header__sub {
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.backend-content {
|
|
padding: 18px 16px 40px;
|
|
}
|
|
}
|
|
|
|
/* ---- Forms ---- */
|
|
.field {
|
|
width: 100%;
|
|
border: 1px solid var(--field-border);
|
|
border-radius: 10px;
|
|
padding: 11px 13px;
|
|
font-size: 14px;
|
|
font-family: "Public Sans", sans-serif;
|
|
color: var(--ink-soft);
|
|
background: var(--field-bg);
|
|
}
|
|
.field:focus {
|
|
outline: 2px solid rgba(44, 111, 179, 0.35);
|
|
outline-offset: 1px;
|
|
}
|
|
.field-label {
|
|
display: block;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: var(--muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
/* Suggestions de tags : pastilles cliquables sous le champ. */
|
|
.tag-suggestions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
.tag-suggestions__label {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--muted-2);
|
|
margin-right: 2px;
|
|
}
|
|
.tag-suggestion {
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
padding: 5px 11px;
|
|
border-radius: 999px;
|
|
border: 1px dashed #d8cdb4;
|
|
background: #faf7ef;
|
|
color: var(--ink-soft);
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
.tag-suggestion:hover {
|
|
background: #f6efdc;
|
|
border-color: var(--gold);
|
|
}
|
|
.tag-suggestion--all {
|
|
border-style: solid;
|
|
color: var(--brown);
|
|
}
|
|
/* Conseil de rédaction sous un champ : discret, mais lu avant de saisir. */
|
|
.field-hint {
|
|
margin: 6px 0 0;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
color: var(--muted-2);
|
|
}
|
|
|
|
/* ---- Studio e-mail Plein R ---- */
|
|
.email-workbench {
|
|
display: grid;
|
|
grid-template-columns: 370px minmax(0, 1fr);
|
|
gap: 26px;
|
|
align-items: start;
|
|
}
|
|
.email-editor-card {
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-top: 5px solid var(--gold);
|
|
border-radius: 16px;
|
|
padding: 23px;
|
|
box-shadow: 0 22px 44px -38px rgba(19, 50, 79, 0.75);
|
|
}
|
|
.email-editor-kicker {
|
|
color: var(--brown);
|
|
font-size: 10.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.email-preview-shell {
|
|
border: 1px solid #d8cdb4;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
background: #f6f2e8;
|
|
box-shadow: 0 24px 48px -38px rgba(19, 50, 79, 0.65);
|
|
}
|
|
.email-preview-shell iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 760px;
|
|
border: 0;
|
|
background: #f6f2e8;
|
|
}
|
|
.email-preview-shell.compact iframe {
|
|
height: 590px;
|
|
}
|
|
.email-primary-button,
|
|
.email-secondary-button,
|
|
.meeting-email-button {
|
|
border-radius: 10px;
|
|
padding: 11px 14px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
.email-primary-button {
|
|
border: 1px solid #13324f;
|
|
background: #13324f;
|
|
color: #fff;
|
|
}
|
|
.email-secondary-button {
|
|
border: 1px solid #d8cdb4;
|
|
background: #fff;
|
|
color: #5a5040;
|
|
}
|
|
.email-primary-button:hover { background: #1e588f; }
|
|
.email-secondary-button:hover { border-color: #9a6638; color: #9a6638; }
|
|
.email-primary-button:disabled,
|
|
.email-secondary-button:disabled { opacity: 0.5; cursor: wait; }
|
|
.meeting-email-button {
|
|
width: 100%;
|
|
margin-top: 9px;
|
|
border: 1px solid #d6b66f;
|
|
background: #fff8e8;
|
|
color: #7a5428;
|
|
}
|
|
.meeting-email-button:hover { background: #f7e8bf; }
|
|
.meeting-email-workbench {
|
|
display: grid;
|
|
grid-template-columns: 330px minmax(0, 1fr);
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
.meeting-registration-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.meeting-registration-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.email-workbench,
|
|
.meeting-email-workbench { grid-template-columns: 1fr; }
|
|
.email-preview-shell iframe { height: 620px; }
|
|
}
|
|
|
|
/* ---- Fiche adhérent : horaires et contact ---- */
|
|
.profile-hero-action {
|
|
padding: 11px 18px;
|
|
border: 1px solid #d8cdb4;
|
|
border-radius: 11px;
|
|
background: #fff;
|
|
color: #3c3322;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
|
|
}
|
|
.profile-hero-action:hover {
|
|
border-color: #2c6fb3;
|
|
color: #2c6fb3;
|
|
transform: translateY(-1px);
|
|
}
|
|
.profile-hero-action--primary {
|
|
border-color: #2c6fb3;
|
|
background: #2c6fb3;
|
|
color: #fff;
|
|
}
|
|
.profile-hero-action--primary:hover {
|
|
background: #235d97;
|
|
color: #fff;
|
|
}
|
|
.practical-section {
|
|
overflow: hidden;
|
|
padding: 26px 28px 28px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: #fff;
|
|
}
|
|
.practical-section__heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
/* Pastille de section, identique aux badges « Bons plans » du reste du site. */
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 12px;
|
|
border-radius: 999px;
|
|
background: #fdeccd;
|
|
color: var(--brown);
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.eyebrow::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--gold);
|
|
}
|
|
.open-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-width: 154px;
|
|
padding: 8px 13px;
|
|
border: 1px solid #f2d5cf;
|
|
border-radius: 999px;
|
|
background: #fbe9e6;
|
|
color: var(--red);
|
|
}
|
|
.open-status > span {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
background: var(--red);
|
|
}
|
|
.open-status div {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
.open-status strong {
|
|
font-size: 12.5px;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
}
|
|
.open-status small {
|
|
margin-top: 2px;
|
|
color: #b1786c;
|
|
font-size: 10.5px;
|
|
}
|
|
.open-status.is-open {
|
|
border-color: #c7e6d5;
|
|
background: #e6f4ec;
|
|
color: var(--green);
|
|
}
|
|
.open-status.is-open > span {
|
|
background: var(--green);
|
|
}
|
|
.open-status.is-open small {
|
|
color: #6d9d86;
|
|
}
|
|
.practical-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
|
|
gap: 14px;
|
|
}
|
|
.schedule-card,
|
|
.contact-card {
|
|
min-width: 0;
|
|
padding: 18px;
|
|
border: 1px solid var(--border-2);
|
|
border-radius: 16px;
|
|
background: var(--field-bg);
|
|
}
|
|
.practical-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--border-2);
|
|
}
|
|
.practical-card-title__icon {
|
|
display: grid;
|
|
width: 35px;
|
|
height: 35px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 11px;
|
|
background: #f6efdc;
|
|
color: var(--brown);
|
|
}
|
|
.practical-card-title__icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.practical-card-title__icon--blue {
|
|
background: #eaf0f6;
|
|
color: var(--blue);
|
|
}
|
|
.practical-card-title span:not(.practical-card-title__icon) {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
color: var(--muted-3);
|
|
font-size: 9.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.practical-card-title h3 {
|
|
margin: 0;
|
|
color: var(--ink-strong);
|
|
font-size: 15.5px;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
}
|
|
.schedule-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 8px;
|
|
}
|
|
.schedule-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(90px, 0.75fr) minmax(120px, 1.25fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 38px;
|
|
padding: 7px 9px;
|
|
border: 1px solid transparent;
|
|
border-radius: 10px;
|
|
color: var(--muted);
|
|
font-size: 12.5px;
|
|
}
|
|
.schedule-row.is-today {
|
|
border-color: var(--border);
|
|
background: #fff;
|
|
}
|
|
.schedule-row__day {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
font-weight: 600;
|
|
}
|
|
.schedule-row__day small {
|
|
margin-top: 1px;
|
|
color: var(--brown);
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
.schedule-row > strong {
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
.schedule-row > strong.is-closed {
|
|
color: var(--muted-4);
|
|
font-weight: 600;
|
|
}
|
|
.contact-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.contact-action {
|
|
display: grid;
|
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 11px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
|
|
}
|
|
.contact-action:hover {
|
|
border-color: var(--border);
|
|
background: #fff;
|
|
transform: translateX(2px);
|
|
}
|
|
.contact-action__icon {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border-radius: 10px;
|
|
background: #eaf0f6;
|
|
color: var(--blue);
|
|
}
|
|
.contact-action__icon svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.contact-action__copy {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
.contact-action__copy strong {
|
|
color: var(--ink-strong);
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
}
|
|
.contact-action__copy > span {
|
|
overflow: hidden;
|
|
margin-top: 2px;
|
|
color: var(--muted-2);
|
|
font-size: 10.5px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.contact-action__arrow {
|
|
color: var(--muted-4);
|
|
font-size: 14px;
|
|
}
|
|
.practical-empty {
|
|
padding: 20px 4px 8px;
|
|
color: var(--muted-4);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ---- Éditeur hebdomadaire des horaires ---- */
|
|
.hours-editor {
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
.hours-editor__hint {
|
|
margin: 5px 0 12px;
|
|
color: #93866f;
|
|
font-size: 12px;
|
|
}
|
|
.hours-editor__days {
|
|
overflow: hidden;
|
|
border: 1px solid #e2d7c1;
|
|
border-radius: 13px;
|
|
background: #faf7ef;
|
|
}
|
|
.hours-editor__day {
|
|
display: grid;
|
|
grid-template-columns: 150px minmax(0, 1fr);
|
|
min-height: 58px;
|
|
padding: 11px 13px;
|
|
border-bottom: 1px solid #ebe2d0;
|
|
}
|
|
.hours-editor__day:last-child { border-bottom: 0; }
|
|
.hours-editor__day.is-open { background: #fff; }
|
|
.hours-editor__day-head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
.hours-editor__day-head > strong {
|
|
color: #3a3125;
|
|
font-size: 13px;
|
|
}
|
|
.hours-editor__toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #9b5c51;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.hours-editor__toggle:has(input:checked) { color: #1f7a53; }
|
|
.hours-editor__toggle input {
|
|
width: 15px;
|
|
height: 15px;
|
|
accent-color: #1f8a5b;
|
|
}
|
|
.hours-editor__slots {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
}
|
|
.hours-editor__slot {
|
|
display: grid;
|
|
grid-template-columns: minmax(112px, 1fr) minmax(112px, 1fr) 28px;
|
|
align-items: end;
|
|
gap: 7px;
|
|
}
|
|
.hours-editor__slot label {
|
|
display: grid;
|
|
grid-template-columns: 22px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #93866f;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
.hours-editor__slot input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 8px 7px;
|
|
border: 1px solid #ddd2bb;
|
|
border-radius: 8px;
|
|
background: #faf7ef;
|
|
color: #3c3322;
|
|
font: inherit;
|
|
}
|
|
.hours-editor__slot input:focus {
|
|
outline: 2px solid rgba(44, 111, 179, 0.3);
|
|
outline-offset: 1px;
|
|
}
|
|
.hours-editor__remove {
|
|
width: 28px;
|
|
height: 34px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #b06a5e;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.hours-editor__add {
|
|
align-self: flex-start;
|
|
padding: 2px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #2c6fb3;
|
|
font: inherit;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.practical-section { padding: 21px 16px; }
|
|
.practical-section__heading {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.practical-grid { grid-template-columns: 1fr; }
|
|
.schedule-card,
|
|
.contact-card { padding: 15px; }
|
|
.profile-hero-action {
|
|
flex: 1 1 130px;
|
|
text-align: center;
|
|
}
|
|
.hours-editor__day {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
.hours-editor__day-head {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 460px) {
|
|
.schedule-row {
|
|
grid-template-columns: minmax(82px, 0.7fr) minmax(0, 1.3fr);
|
|
}
|
|
.schedule-row > strong {
|
|
line-height: 1.4;
|
|
}
|
|
.hours-editor__slot {
|
|
grid-template-columns: 1fr 1fr 28px;
|
|
}
|
|
.hours-editor__slot label {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|