@import 'tailwindcss'; @source '../views'; @source '../../app/Http/Controllers/Site'; /* Feuille de style du site vitrine, indépendante de app.css (espace connecté). Direction visuelle : « éditorial doux ». Fond ivoire, encre chaude, sérif fin, séparation des sections par le vide plutôt que par des aplats contrastés, et photographies en arche. Aucune bordure décorative : la hiérarchie repose sur l'espace, le poids typographique et des filets d'un pixel. Les valeurs pilotées depuis l'administration (couleur d'accent, polices, arrondi) arrivent en variables `--site-*` posées sur par le layout public. Tout le reste en dérive, y compris les deux ambiances clair/sombre sélectionnées via l'attribut data-theme. */ @theme inline { --font-display: var(--site-font-heading, Georgia, serif); --font-body: var(--site-font-body, system-ui, sans-serif); --font-sans: var(--site-font-body, system-ui, sans-serif); --color-surface: var(--surface); --color-raised: var(--raised); --color-sunken: var(--sunken); --color-line: var(--line); --color-line-strong: var(--line-strong); --color-ink: var(--ink); --color-ink-muted: var(--ink-muted); --color-ink-subtle: var(--ink-subtle); --color-accent: var(--site-accent, #b0846a); --color-accent-ink: var(--site-accent-contrast, #ffffff); --radius-site: var(--site-radius, 3px); --radius-site-lg: calc(var(--site-radius, 3px) * 2); --shadow-soft: var(--elevation-1); --shadow-lift: var(--elevation-2); /* Rythme vertical commun. Fluide plutôt que par paliers : le site respire autant sur un grand écran que sur un téléphone, sans multiplier les variantes responsives dans les vues. */ --spacing-section: clamp(4.5rem, 9vw, 8.5rem); --spacing-section-sm: clamp(3rem, 6vw, 5rem); } /* Ambiance claire : celle par défaut pour un salon de coiffure. */ :root, :root[data-theme='light'] { --surface: oklch(0.984 0.009 84); --raised: oklch(1 0 0); --sunken: oklch(0.953 0.017 79); --line: oklch(0.906 0.013 79); --line-strong: oklch(0.802 0.02 74); --ink: oklch(0.255 0.018 52); --ink-muted: oklch(0.478 0.018 52); --ink-subtle: oklch(0.618 0.016 55); --elevation-1: 0 1px 2px oklch(0.3 0.02 60 / 0.04), 0 10px 30px oklch(0.3 0.02 60 / 0.05); --elevation-2: 0 2px 4px oklch(0.3 0.02 60 / 0.05), 0 22px 50px oklch(0.3 0.02 60 / 0.09); } /* Ambiance sombre : un brun chaud très désaturé, pas un noir d'encre. Le but est une lumière tamisée de fin de journée, pas un contraste dramatique. */ :root[data-theme='dark'] { --surface: oklch(0.212 0.012 58); --raised: oklch(0.258 0.013 58); --sunken: oklch(0.176 0.01 58); --line: oklch(0.32 0.011 58); --line-strong: oklch(0.45 0.014 58); --ink: oklch(0.958 0.006 82); --ink-muted: oklch(0.775 0.011 82); --ink-subtle: oklch(0.63 0.012 82); --elevation-1: 0 1px 2px oklch(0 0 0 / 0.25), 0 10px 30px oklch(0 0 0 / 0.22); --elevation-2: 0 2px 4px oklch(0 0 0 / 0.28), 0 22px 50px oklch(0 0 0 / 0.32); } @layer base { *, ::after, ::before { border-color: var(--line); } html { background-color: var(--surface); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { background-color: var(--surface); color: var(--ink); font-family: var(--font-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; line-height: 1.6; } /* Grain optionnel, activable dans Réglages → Apparence. Volontairement plus discret qu'une texture d'affiche : on cherche le papier, pas l'encre. */ body[data-grain='1']::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Les titres restent en graisse moyenne : un sérif éditorial se tient par son dessin et son interlettrage, pas par le gras. */ h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: var(--site-tracking-heading, -0.01em); text-transform: var(--site-case-heading, none); font-weight: 500; line-height: 1.14; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } ::selection { background-color: color-mix( in oklab, var(--color-accent) 22%, transparent ); color: var(--ink); } ::placeholder { color: var(--ink-subtle); } } @layer components { /* Conteneur commun à toutes les sections du site. */ .site-container { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 640px) { .site-container { padding-inline: 2.5rem; } } /* Variante resserrée pour les pages de lecture (article, page libre, FAQ). */ .site-container-narrow { max-width: 48rem; } /* Échelle typographique. Plafonnée bien plus bas que sur une affiche : le titre d'accueil doit rester une phrase qu'on lit, pas un logotype. */ .display-hero { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.08; } .display-page { font-size: clamp(2.1rem, 4.2vw, 3.2rem); } .display-section { font-size: clamp(1.85rem, 3.2vw, 2.65rem); } .display-card { font-size: clamp(1.25rem, 1.6vw, 1.5rem); } /* Chapô : un cran au-dessus du corps de texte, sans devenir un titre. */ .lead { max-width: 38rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); } @media (min-width: 640px) { .lead { font-size: 1.125rem; } } /* Petit intitulé au-dessus des titres de section. Capitales espacées en couleur d'accent, sans filet : le tiret décoratif appartenait à un autre registre. */ .kicker { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-accent); } /* Même intitulé, mais neutre : pour les colonnes de pied de page. */ .kicker-quiet { color: var(--ink-subtle); } /* Numérotation éditoriale : « 01 ─ Coupe ». */ .ordinal { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; color: var(--color-accent); font-variant-numeric: tabular-nums; } /* Filet d'un pixel, seule ligne décorative du site. */ .hairline { border-top: 1px solid var(--line); } /* Ligne d'informations pratiques (adresse · horaires · téléphone). Le point médian est posé en CSS sur les éléments qui suivent le premier : aucun séparateur orphelin quand un réglage n'est pas renseigné. */ .meta-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; } .meta-inline > * + *::before { content: '·'; margin-right: 0.85rem; color: var(--line-strong); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-site); padding: 0.9rem 1.65rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Bouton compact : en-tête et encarts latéraux. */ .btn-sm { padding: 0.65rem 1.15rem; font-size: 0.8125rem; } .btn-primary { background-color: var(--color-accent); color: var(--color-accent-ink); } .btn-primary:hover { background-color: color-mix(in oklab, var(--color-accent) 86%, black); } .btn-outline { border: 1px solid var(--line-strong); color: var(--ink); } .btn-outline:hover { border-color: var(--ink); background-color: color-mix(in oklab, var(--ink) 4%, transparent); } /* Lien-action : remplace le bouton bordé partout où celui-ci alourdissait la page (fin de carte, « voir tout » d'une section). */ .btn-text { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--ink); padding-bottom: 0.2rem; border-bottom: 1px solid var(--line-strong); transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease; } .btn-text:hover { color: var(--color-accent); border-color: var(--color-accent); gap: 0.85rem; } /* Carte sans liseré : c'est l'ombre très basse et le fond légèrement plus clair que la page qui la détachent. */ .card { background-color: var(--raised); border-radius: var(--radius-site-lg); box-shadow: var(--elevation-1); } /* Carte transparente : sert de simple regroupement, sans matière. */ .card-plain { background-color: transparent; border-radius: var(--radius-site-lg); } /* Bloc d'appoint sur fond sable, pour les encadrés latéraux. */ .card-sand { background-color: var(--sunken); border-radius: var(--radius-site-lg); } /* Conteneur d'image : fond de repli pendant le chargement. */ .media { overflow: hidden; border-radius: var(--radius-site-lg); background-color: var(--sunken); } /* Photographie en arche, signature de la direction. Le rayon est exprimé en pourcentage pour que la courbe suive la largeur réelle de l'image. */ .media-arch { overflow: hidden; background-color: var(--sunken); border-radius: 50% 50% var(--radius-site-lg) var(--radius-site-lg) / 32% 32% var(--radius-site-lg) var(--radius-site-lg); } /* Arche adoucie, pour les portraits en colonne étroite. */ .media-arch-soft { overflow: hidden; background-color: var(--sunken); border-radius: 46% 46% var(--radius-site-lg) var(--radius-site-lg) / 18% 18% var(--radius-site-lg) var(--radius-site-lg); } /* Pastille de filtre (galerie). Sans bordure au repos. */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.45rem 0.95rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); background-color: color-mix(in oklab, var(--sunken) 70%, transparent); transition: background-color 0.2s ease, color 0.2s ease; } .chip:hover { background-color: var(--sunken); color: var(--ink); } .chip-active { background-color: var(--ink); color: var(--surface); } .chip-active:hover { background-color: var(--ink); color: var(--surface); } /* Ligne de tarif avec pointillés de liaison, comme une carte de prestations imprimée. Le pointillé occupe l'espace libre entre le libellé et le prix. */ .leader { display: flex; align-items: baseline; gap: 0.75rem; } .leader::after { content: ''; flex: 1 1 auto; order: 1; min-width: 1.5rem; translate: 0 -0.28em; border-bottom: 1px dotted var(--line-strong); opacity: 0.7; } .leader > :last-child { order: 2; } /* Guillemet d'ouverture surdimensionné des témoignages. */ .quote-mark { display: block; font-family: var(--font-display); font-size: 3.5rem; line-height: 0.6; color: var(--color-accent); opacity: 0.35; } /* Champs de formulaire du site public. */ .field { width: 100%; background-color: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-site); padding: 0.8rem 1rem; color: var(--ink); font-size: 0.9375rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field:hover { border-color: var(--line-strong); } .field:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 14%, transparent); } .field-label { display: block; margin-bottom: 0.45rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); } .field-error { margin-top: 0.4rem; font-size: 0.8125rem; color: oklch(0.55 0.17 25); } :root[data-theme='dark'] .field-error { color: oklch(0.72 0.16 25); } /* Contenu riche saisi dans l'éditeur de l'administration. */ .prose-site { color: var(--ink-muted); line-height: 1.75; max-width: 40rem; } .prose-site-wide { max-width: none; } .prose-site > * + * { margin-top: 1.15em; } .prose-site h2, .prose-site h3 { color: var(--ink); margin-top: 2.2em; margin-bottom: 0.6em; } .prose-site h2 { font-size: 1.7rem; } .prose-site h3 { font-size: 1.3rem; } .prose-site a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s ease; } .prose-site a:hover { color: var(--color-accent); } .prose-site strong { color: var(--ink); font-weight: 600; } .prose-site ul, .prose-site ol { padding-left: 1.4rem; } .prose-site ul { list-style: disc; } .prose-site ol { list-style: decimal; } .prose-site li + li { margin-top: 0.4em; } /* Citation sans filet vertical : un léger retrait et l'italique du sérif suffisent à la détacher du fil du texte. */ .prose-site blockquote { margin-inline: 0; padding-left: 1.5rem; font-family: var(--font-display); font-size: 1.3rem; font-style: italic; line-height: 1.5; color: var(--ink); } .prose-site img { border-radius: var(--radius-site-lg); max-width: 100%; height: auto; } }