/* ============================================================
Chearish - signature de marque (signe « cœur en barres » + nom)
CSS pur, aucune dépendance JS. Chargé par les 12 pages.
Balisage (voir index.html) :
Géométrie : grille 512x512 de la marque (source de la marque, hors de ce dépôt), viewBox resserré sur le
contenu utile (x 61-451, y 82-428). L'animation dépasse de quelques unités :
le SVG est en overflow:visible, donc rien n'est rogné.
Modificateurs
--md en-têtes sobres (nom 20 px, signe 34 px)
--side barres latérales (nom 22 px, signe 33 px)
--loop battement discret toutes les 5 s au repos (pages publiques)
--still pas d'apparition (pied de page) : battement au survol seulement
--on-red signature entièrement blanche (fond rouge)
Sans modificateur : en-tête de l'accueil (nom 24 px, signe 38 px).
Indicateur de chargement : voir `.brand-loader` en fin de feuille.
============================================================ */
.brand-sig {
--bs-mark: #C62E29; /* signe */
--bs-ink: #111827; /* nom */
--bs-hear: #C62E29; /* « hear » */
--bs-focus: #C62E29; /* anneau de focus */
--bs-h: 1.6em; /* hauteur du signe (relative à la taille du nom) */
display: inline-flex;
align-items: center;
flex: none;
gap: .3em;
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--bs-ink);
text-decoration: none;
white-space: nowrap;
border-radius: .35em;
-webkit-tap-highlight-color: transparent;
}
.brand-sig--md { font-size: 1.25rem; --bs-h: 1.7em; }
.brand-sig--side { font-size: 1.375rem; --bs-h: 1.5em; }
/* Téléphones étroits : la signature est plus large que l'ancien nom seul.
Le signe reste >= 28 px de haut (1.6 x 20 = 32 px). */
@media (max-width: 359px) {
.brand-sig:not(.brand-sig--md):not(.brand-sig--side) { font-size: 1.25rem; }
}
/* En-tête de l'accueil entre 768 et 1023 px (nav visible, pas encore de place
pour la signature pleine taille : sinon « Nous contacter », « Espace Client »
et « Obtenir Chearish » passent sur deux lignes en français). */
@media (min-width: 768px) and (max-width: 1023px) {
.brand-sig:not(.brand-sig--md):not(.brand-sig--side) { font-size: 1.25rem; }
}
/* En-têtes sobres sous 400 px : le signe seul (>= 32 px, battement conservé).
Le nom reste porté par l'aria-label du lien. Le pied de page (--still) garde
son nom : il a toute la largeur. */
@media (max-width: 399px) {
.brand-sig--md:not(.brand-sig--still) .brand-name { display: none; }
}
.brand-sig:focus-visible {
outline: 2px solid var(--bs-focus);
outline-offset: 4px;
}
.brand-mark {
display: block;
flex: none;
height: var(--bs-h);
width: calc(var(--bs-h) * 1.1272); /* 390 / 346 : dimensions fixées, pas de saut de mise en page */
overflow: visible;
fill: var(--bs-mark);
}
.brand-name {
font-weight: 700;
line-height: 1;
letter-spacing: -.035em;
color: var(--bs-ink);
}
.brand-hear { color: var(--bs-hear); }
/* ── Fond sombre (thème sombre : dashboard, history, admin) ── */
html.dark .brand-sig {
--bs-mark: #FFFFFF;
--bs-ink: #FFFFFF;
--bs-hear: #EF4444;
--bs-focus: #FFFFFF;
}
/* ── Fond rouge : tout en blanc ── */
.brand-sig--on-red,
html.dark .brand-sig--on-red {
--bs-mark: #FFFFFF;
--bs-ink: #FFFFFF;
--bs-hear: #FFFFFF;
--bs-focus: #FFFFFF;
}
/* ============================================================
Animations - uniquement transform / translate / scale / opacity (pas de mise en page).
Chaque barre se met à l'échelle sur sa hauteur, autour de son centre.
- `translate` + `scale` (propriétés individuelles) : apparition (une fois,
donc sans coût au repos), qui se compose avec les battements sans être coupée.
- `transform` : battements et indicateur de chargement. Sur un SVG,
seul `transform` est composité (hors du fil principal) ; une boucle infinie
sur `scale` déclenchait un recalcul de style à chaque trame, en permanence.
L'état de repos (sans animation) est le cœur complet.
============================================================ */
.brand-bar {
transform-box: fill-box;
transform-origin: center;
animation: brand-in .8s linear calc(var(--i, 0) * 40ms) backwards;
}
/* Hauteurs de départ « égaliseur » : --dy ramène la barre sur l'axe central
(y = 256), --sa / --sb sont deux états d'égaliseur, en facteur de la hauteur
finale de la barre (130, 229, 287, 306, 287, 229, 130). */
.brand-bar:nth-child(1) { --dy: 64px; --sa: .85; --sb: 1.30; }
.brand-bar:nth-child(2) { --dy: 55.5px; --sa: .74; --sb: .50; }
.brand-bar:nth-child(3) { --dy: 27.5px; --sa: .42; --sb: .80; }
.brand-bar:nth-child(4) { --dy: -19px; --sa: .72; --sb: .42; }
.brand-bar:nth-child(5) { --dy: 27.5px; --sa: .50; --sb: .73; }
.brand-bar:nth-child(6) { --dy: 55.5px; --sa: .46; --sb: .66; }
.brand-bar:nth-child(7) { --dy: 64px; --sa: 1.20; --sb: .77; }
/* Apparition (~0,9 s avec le décalage d'onde) : les barres naissent à hauteur
d'égaliseur, changent d'état, puis se rangent en cœur avec un léger rebond. */
@keyframes brand-in {
0% { opacity: 0; translate: 0 var(--dy); scale: 1 calc(var(--sa) * .35); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
16% { opacity: 1; translate: 0 var(--dy); scale: 1 var(--sa); animation-timing-function: ease-in-out; }
38% { opacity: 1; translate: 0 var(--dy); scale: 1 var(--sb); animation-timing-function: linear; }
50% { opacity: 1; translate: 0 var(--dy); scale: 1 var(--sb); animation-timing-function: cubic-bezier(.3, 1.35, .5, 1); }
100% { opacity: 1; translate: 0 0; scale: 1 1; }
}
/* Battement au repos : « poum-poum » (+10 % puis +7 %) puis long repos, période 5 s.
Montée 50 ms (sortie cubique), retombée ~170 ms (lissée). L'onde part de la barre
centrale : décalage de 28 ms par rang (--i = distance à la barre centrale). */
@keyframes brand-beat {
0% { transform: scaleY(1); }
4% { transform: scaleY(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
5% { transform: scaleY(1.10); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
8.4% { transform: scaleY(1); }
10% { transform: scaleY(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
11% { transform: scaleY(1.07); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
14.4% { transform: scaleY(1); }
100% { transform: scaleY(1); }
}
/* Battement au survol / focus : immédiat, un peu plus marqué (+12 % puis +8 %), 0,85 s. */
@keyframes brand-beat-h {
0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
6% { transform: scaleY(1.12); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
26% { transform: scaleY(1); }
35% { transform: scaleY(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
41% { transform: scaleY(1.08); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
61% { transform: scaleY(1); }
100% { transform: scaleY(1); }
}
/* Pages publiques : battement discret toutes les 5 s, le premier ~2,8 s après l'apparition. */
.brand-sig--loop .brand-bar {
animation:
brand-in .8s linear calc(var(--i, 0) * 40ms) backwards,
brand-beat 5s linear calc(2.8s + var(--i, 0) * 28ms) infinite;
}
/* Survol / focus clavier : on ne change que la liste des animations en ajoutant le
battement ; `brand-in` garde le même nom et n'est pas rejouée. */
.brand-sig:hover .brand-bar,
.brand-sig:focus-visible .brand-bar {
animation:
brand-in .8s linear calc(var(--i, 0) * 40ms) backwards,
brand-beat-h .85s linear calc(var(--i, 0) * 28ms);
}
/* Pied de page : pas d'apparition, battement au survol seulement. */
.brand-sig--still .brand-bar { animation: none; }
.brand-sig--still:hover .brand-bar,
.brand-sig--still:focus-visible .brand-bar {
animation: brand-beat-h .85s linear calc(var(--i, 0) * 28ms);
}
/* ============================================================
Indicateur de chargement : le signe à 5 barres, parcouru par une vague
d'attente de gauche à droite (hauteur 1,0 -> 0,55 en sinus doux, aller-retour,
période 1,1 s, chaque barre décalée de 1/5 de période, comme dans l'app).
`transform` seul sur les barres : composité, aucun recalcul de style par trame.
Chargement… <- texte accessible (annoncé par role="status")
Couleur : --bl-color (rouge de marque, blanc en thème sombre). Taille : --bl-size
(hauteur du signe). Dans une zone déjà annoncée (role="status" / aria-live),
omettre role="status" du loader pour ne pas doubler l'annonce.
Au repos (mouvement réduit) : cœur complet, immobile.
============================================================ */
.brand-loader {
--bl-color: #C62E29;
--bl-size: 2rem;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: .75rem;
}
html.dark .brand-loader { --bl-color: #FFFFFF; }
.brand-loader__mark {
display: block;
flex: none;
height: var(--bl-size);
width: calc(var(--bl-size) * 1.1272); /* 390 / 346, comme .brand-mark */
overflow: visible;
fill: var(--bl-color);
}
.brand-loader__bar {
transform-box: fill-box;
transform-origin: center;
/* Phase : la barre i est en retard de i/5 de période sur la barre 0 (la vague
va de gauche à droite) ; le keyframe part du maximum, d'où le quart de période
en plus. Délai = i x 0,22 s + 0,275 s - 2 x 1,1 s : toujours négatif, donc pas
d'attente au départ. Hauteur = 0,775 + 0,225 x sin(2 pi (t / 1,1 s - i / 5)). */
animation: brand-load 1.1s linear calc(var(--i, 0) * .22s - 1.925s) infinite;
}
@keyframes brand-load {
0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
50% { transform: scaleY(.55); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
100% { transform: scaleY(1); }
}
/* Loader resté dans une zone masquée (tiroir fermé, aria-hidden="true") : en pause. */
:not(svg)[aria-hidden="true"] .brand-loader__bar { animation-play-state: paused; }
/* Mouvement réduit : aucune animation, le cœur complet reste affiché. */
@media (prefers-reduced-motion: reduce) {
.brand-loader__bar,
.brand-bar,
.brand-sig--loop .brand-bar,
.brand-sig:hover .brand-bar,
.brand-sig:focus-visible .brand-bar,
.brand-sig--still:hover .brand-bar,
.brand-sig--still:focus-visible .brand-bar {
animation: none !important;
}
}