de #content dépassant 30 mots.
AUCUNE césure automatique : hyphens: manual.
hyphens: auto coupait les mots en fin de ligne
(« bou-quets », « com-pose », « ma-riée ») — jugé
disgracieux. Ne pas remettre auto sans hyphenate-limit-chars.
La justification est réservée aux écrans larges : sous 900px
la mesure est trop courte et, sans césure, les espaces
s'étireraient. En dessous : alignement à gauche.
text-wrap: pretty améliore le line-breaking sur navigateurs
modernes (Chrome 117+, Safari 17.5+, Firefox 121+).
============================================================ */
p.long-text {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
text-wrap: pretty;
}
@media (min-width: 900px) {
p.long-text {
text-align: justify;
text-align-last: left;
}
}
/* Opt-out manuel : forcer l'alignement gauche même sur long
*/
p.no-justify,
p.no-justify.long-text {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
/* ==========================================================================
12. RAFFINEMENTS DESIGN — micro-détails pour signer la marque
(typographie OpenType, marqueur jaune, reflet boutons, scrollbar branded,
focus rings, sélection texte) — facilement retirable sans casser le site.
========================================================================== */
/* ---- Typographie : ligatures, kerning, optical sizing -------------------- */
html {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4,
.title-accent,
.eyebrow {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "dlig" 1;
}
h1 {
letter-spacing: -0.035em;
}
h1, h2 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
/* ---- Sélection texte (jaune Choufleurs) --------------------------------- */
::selection {
background: var(--color-secondary);
color: var(--color-text);
text-shadow: none;
}
[data-theme="dark"] ::selection {
background: var(--color-secondary);
color: #3D4242;
}
/* ---- Scrollbar branded (limitée à la page entière) ---------------------- */
html {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) var(--color-bg-alt);
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track {
background: var(--color-bg-alt);
}
html::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 10px;
border: 3px solid var(--color-bg-alt);
}
html::-webkit-scrollbar-thumb:hover {
background: var(--color-primary-dark);
}
/* ---- Focus rings unifiés ------------------------------------------------- */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
transition: outline-offset var(--duration-fast) ease;
}
.btn:focus-visible {
outline-offset: 4px;
}
/* ---- Marqueur jaune sous les title-accent (signature graphique) --------- */
/* Donne l'impression que les mots-clés italiques sont "surlignés au marqueur" */
.title-accent {
position: relative;
display: inline-block;
z-index: 0;
}
/* Marqueur jaune via background-image (au lieu d'un ::after en position absolute)
pour fonctionner aussi quand le titre wrappe sur plusieurs lignes.
ÉPAISSEUR FIXE (0.42em) + POSITION 88% → robuste au resize et au wrap multi-lignes. */
.title-accent {
background-image: linear-gradient(
to right,
var(--title-marker, rgba(212, 145, 0, 0.42)),
var(--title-marker, rgba(212, 145, 0, 0.42))
);
background-repeat: no-repeat;
background-size: 100% 0.42em;
background-position: 0 88%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 0.12em;
border-radius: 0.15em;
transition: filter 0.3s ease;
}
[data-theme="dark"] .title-accent {
--title-marker: rgba(183, 132, 28, 0.5);
}
.title-accent:hover {
filter: brightness(1.05) saturate(1.1);
}
/* Ancien marqueur ::after désactivé : remplacé par le background-image
qui fonctionne aussi sur titres wrappés. */
.title-accent::after {
display: none;
}
.title-accent:hover::after {
opacity: 0.62;
}
[data-theme="dark"] .title-accent::after {
opacity: 0.5;
}
/* ---- Reflet diagonal au survol des boutons primaires/secondaires -------- */
.btn-primary,
.btn-secondary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary::after,
.btn-secondary::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -75%;
width: 50%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.28) 50%,
transparent 100%
);
pointer-events: none;
transition: left 0.7s var(--ease-out);
z-index: 0;
}
.btn-primary:hover::after,
.btn-secondary:hover::after {
left: 175%;
}
.btn-primary > *,
.btn-secondary > * {
position: relative;
z-index: 1;
}
/* ---- Petit "tiret" devant les eyebrow non centrés ----------------------- */
/* (Marque visuelle subtile, façon revue de design) */
.eyebrow {
position: relative;
}
main > section:not(:has(.section-header)) .eyebrow,
.hero .eyebrow,
.story .eyebrow,
.lockheure .eyebrow,
.livraison .eyebrow,
.editorial-hero .eyebrow {
padding-left: 1.625rem;
}
main > section:not(:has(.section-header)) .eyebrow::before,
.hero .eyebrow::before,
.story .eyebrow::before,
.lockheure .eyebrow::before,
.livraison .eyebrow::before,
.editorial-hero .eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1.125rem;
height: 2px;
background: var(--color-primary);
transform: translateY(-50%);
border-radius: 2px;
}
/* ==========================================================================
13. ÉDITORIAL BOTANIQUE — vision magazine de fleuriste
Lettrines · rules décoratives · gradient mesh · typo dramatique
========================================================================== */
/* Note : les lettrines (drop caps) en bleu sur le 1er paragraphe d'intro/story
ont été retirées (preference design). */
/* ---- Rule décorative au-dessus des section-header centrés --------------- */
.section-header {
position: relative;
}
.section-header::before {
content: '';
display: block;
width: 56px;
height: 1px;
background: var(--color-primary);
margin: 0 auto var(--space-md);
opacity: 0.4;
}
/* Sur les heros et page-heros, on ne met pas la rule (déjà décoré) */
.hero .section-header::before,
.page-hero .section-header::before,
.editorial-hero .section-header::before,
.lock-hero .section-header::before,
.livraison-hero .section-header::before {
display: none;
}
/* ---- Typographie hero plus dramatique ---------------------------------- */
.hero h1 {
font-size: clamp(3rem, 2rem + 5vw, 6.5rem);
letter-spacing: -0.045em;
line-height: 1.02;
}
.hero h1 .word {
display: inline-block;
}
/* Plus de respiration sur le subtitle hero pour contraste */
.hero-subtitle {
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
line-height: 1.55;
max-width: 540px;
}
/* ---- Gradient mesh sur le hero d'accueil (texture + profondeur) -------- */
.hero {
background:
radial-gradient(ellipse 60% 40% at 18% 28%, rgba(212, 145, 0, 0.18), transparent 70%),
radial-gradient(ellipse 55% 45% at 82% 72%, rgba(61, 66, 66, 0.16), transparent 70%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(245, 239, 230, 0.65), transparent 65%),
var(--color-bg);
}
[data-theme="dark"] .hero {
background:
radial-gradient(ellipse 60% 40% at 18% 28%, rgba(212, 145, 0, 0.08), transparent 70%),
radial-gradient(ellipse 55% 45% at 82% 72%, rgba(61, 66, 66, 0.12), transparent 70%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(42, 36, 24, 0.5), transparent 65%),
var(--color-bg);
}
/* ---- Eyebrow plus marqué (style folio de magazine) --------------------- */
.eyebrow {
font-size: 0.78rem;
letter-spacing: 0.18em;
font-weight: 700;
}
/* ---- Marqueur sur title-accent qui « monte » au scroll (subtil) --------
On anime maintenant background-size du span (au lieu d'un scale sur ::after),
pour rester compatible avec les titres multi-lignes. */
@keyframes title-accent-reveal {
from { background-size: 0% 0.42em; }
to { background-size: 100% 0.42em; }
}
.reveal.visible .title-accent {
animation: title-accent-reveal 0.9s var(--ease-out) 0.3s backwards;
}
/* ==========================================================================
TITRES DORÉS — effet TYPEWRITER char-par-char (règle globale du site).
Testé initialement sur la home, étendu à toutes les pages. Un JS
(page-home-typewriter.js) wrappe chaque char des .title-accent /
.title-yellow dans avec --i pour le stagger.
Le surlignage jaune est retiré partout et l'effet marker/reveal est
désactivé pour éviter les conflits (les chars gèrent leur propre reveal).
========================================================================== */
.title-accent {
background-image: none;
padding: 0;
border-radius: 0;
}
/* Chars : opacity + micro-slide, staggered via --i (défini par le JS).
PAR DÉFAUT visibles (fallback graceful si JS lent ou observer manqué).
Cachés UNIQUEMENT quand le parent a .ph-armed (JS a wrappé et va animer)
MAIS pas encore .ph-visible. Dès que .ph-visible arrive → animation. */
.ph-char {
display: inline-block;
}
/* .ph-word regroupe les chars d'un même mot en un bloc atomique nowrap,
pour empêcher le browser de couper un mot au milieu (chaque .ph-char
étant inline-block créerait sinon un breakpoint entre chaque lettre). */
.ph-word {
display: inline-block;
white-space: nowrap;
}
.ph-armed:not(.ph-visible) .ph-char {
opacity: 0;
transform: translateY(3px);
}
.ph-visible .ph-char {
/* `both` = backwards+forwards : pendant animation-delay, applique l'état
`from` (opacity 0). Sans ça, le char reste visible pendant son delay puis
flash invisible → visible → effet de "sweep noir" qui parcourt le mot. */
animation: page-home-char-in 0.35s ease-out both;
animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes page-home-char-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
/* Neutralise le fade-in-up des .word dorés du hero (sinon leur opacity
parent multiplierait celle des chars → effet noyé). Les mots non-dorés
du hero comme "Fleuriste" gardent leur fade-in-up existant. */
.hero h1 .title-accent .word,
.hero h1 .title-yellow .word,
.hero h1 .word.title-yellow {
opacity: 1;
transform: none;
animation: none;
}
/* On désactive l'ancienne animation marker (title-accent-reveal) —
elle animait un background qui n'existe plus. */
.reveal.visible .title-accent {
animation: none;
}
/* Respect prefers-reduced-motion : les chars apparaissent tous en même
temps, sans stagger ni translation. */
@media (prefers-reduced-motion: reduce) {
.ph-char {
animation: none;
opacity: 1;
transform: none;
}
}
/* ---- Détail typographique : citations en italique avec barre ----------- */
blockquote {
position: relative;
padding-left: 1.5rem;
font-style: italic;
font-family: var(--font-display);
}
blockquote::before {
content: '';
position: absolute;
left: 0;
top: 0.4em;
bottom: 0.4em;
width: 3px;
background: var(--color-secondary);
border-radius: 2px;
}
/* ---- Liens en ligne dans les paragraphes : underline custom ------------ */
main p a:not(.btn),
.intro-content p a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
background-image: linear-gradient(
to top,
transparent 0,
transparent 0.05em,
var(--color-secondary) 0.05em,
var(--color-secondary) 0.25em,
transparent 0.25em
);
background-position: 0 88%;
background-repeat: no-repeat;
background-size: 100% 100%;
transition: background-size 0.3s ease, color 0.3s ease;
}
main p a:not(.btn):hover,
.intro-content p a:hover {
color: var(--color-primary-dark);
background-size: 100% 110%;
}
/* ==========================================================================
14. TASTE PASS — Signatures graphiques (frontend-design / anti-AI-slop)
Grain papier + squiggle jaune + marqueur nav + ornements eyebrows.
========================================================================== */
/* ---- Grain papier subtil (effet imprimé magazine) ---------------------- */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
mix-blend-mode: multiply;
}
[data-theme="dark"] body::after {
opacity: 0.06;
mix-blend-mode: screen;
}
@media print { body::after { display: none; } }
/* Note : le squiggle SVG (vague jaune) sous .title-yellow a été retiré
(preference design). .title-yellow conserve juste la couleur jaune. */
/* ---- Marqueur jaune sur le menu (remplace l'underline basique) -------- */
.nav-link::after {
content: '';
position: absolute;
bottom: 0.05em;
left: -0.1em;
right: -0.1em;
width: auto;
height: 0.55em;
background: var(--color-secondary);
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition:
transform 0.4s var(--ease-out),
opacity 0.3s ease;
border-radius: 999px;
z-index: -1;
}
.nav-link {
position: relative;
z-index: 0;
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1);
opacity: 0.48;
width: auto;
}
/* On désactive la couleur primary qui était sur le hover de nav-link
pour que le marqueur jaune soit la seule signature visuelle */
.nav-link:hover {
color: var(--color-text);
}
[data-theme="dark"] .nav-link:hover {
color: #F0F4F8;
}
.nav-link.active {
color: var(--color-text);
font-weight: 600;
}
/* ---- Ornement avant les eyebrows centrés (sections-headers) ----------- */
/* Petit ✦ ou trait avant le label, pour donner du caractère éditorial */
.section-header .eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.section-header .eyebrow::before {
content: '';
display: inline-block;
width: 1.25rem;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
position: static;
transform: none;
}
.section-header .eyebrow::after {
content: '';
display: inline-block;
width: 1.25rem;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
}
/* ---- Refinements complémentaires --------------------------------------- */
/* Légère rotation organique sur les avatars d'avis (effet polaroid main) */
.retro-card-avatar {
transform: rotate(-3deg);
transition: transform 0.4s var(--ease-out);
}
.retro-card:hover .retro-card-avatar {
transform: rotate(2deg) scale(1.04);
}
/* Stabilise l'animation marker-draw qui ne doit jamais cliper le marqueur */
.title-accent {
isolation: isolate;
}