/* ═══════════════════════════════════════════════════════════════════════════
MARBRE PREMIUM + BOUTONS GIRI — la matière et les gestes, au même endroit.
Décision Maha, 18/08/2026 : « pose le marbre premium en arrière-plan ».
⛔ Le marbre est en CSS PUR, pas en image. Trois essais de texture générée
ont donné du gris froid, puis du camouflage doré, puis un fond doré à veines
claires — une image se rate, un dégradé jamais. En prime : zéro octet à
télécharger, net sur tous les écrans, et impossible à casser par un cache.
Usage :
puis · boutons : class="g-btn", "g-btn creux",
"g-btn rond", "g-btn rond majeur".
═════════════════════════════════════════════════════════════════════════ */
:root{
--m-clair:#fdfaf2; --m-lait:#fffdf8; --m-sable:#f4ecda;
--m-or:#c9971b; --m-or-vif:#e8b93a; --m-or-lum:#f7e3a4; --m-or-profond:#8a6512;
--m-or-texte:#7a5a10; --m-encre:#221d15; --m-texte:#443c31; --m-doux:#6a6154;
--m-filet:rgba(201,151,27,.34); --m-filet-fin:rgba(201,151,27,.16);
/* ⛔ LE CERCLE DORÉ EST LE LOGO GIRI. Chaque projet redéfinit ce chemin. */
--m-logo:url('/assets/images/logos/golden-ball.png');
--m-serif:'Cormorant Garamond',Georgia,serif;
--m-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
}
/* ── LA MATIÈRE ─────────────────────────────────────────────────────────────
Quatre couches, de la plus lointaine à la plus proche :
1. la pierre — dégradé chaud de fond
2. la lumière — deux halos qui donnent le relief
3. les veines — deux nappes obliques très diffuses (2 à 4 %)
4. le grain — un bruit fin qui empêche l'effet « aplat plastique »
Aucune couche ne dépasse 6 % d'opacité : le marbre se sent, il ne se voit pas. */
.marbre{
background-color:var(--m-clair);
background-image:
/* 3 · les veines — ⛔ JAMAIS de repeating-linear-gradient : il fabrique un
quadrillage régulier qui fait papier peint, pas pierre. Des dégradés
UNIQUES, à angles et positions irrégulières, ne se répètent jamais. */
linear-gradient(107deg, transparent 18%, rgba(201,151,27,.05) 18.4%,
transparent 19%, transparent 46%, rgba(138,101,18,.03) 46.3%, transparent 47%),
linear-gradient(96deg, transparent 61%, rgba(201,151,27,.038) 61.5%,
transparent 62.2%, transparent 79%, rgba(201,151,27,.026) 79.3%, transparent 80%),
linear-gradient(72deg, transparent 33%, rgba(138,101,18,.03) 33.4%,
transparent 34.2%, transparent 88%, rgba(201,151,27,.022) 88.4%, transparent 89%),
linear-gradient(126deg, transparent 8%, rgba(201,151,27,.028) 8.5%,
transparent 9.3%, transparent 70%, rgba(138,101,18,.02) 70.4%, transparent 71%),
/* 2 · la lumière */
radial-gradient(ellipse 76% 54% at 50% -4%, rgba(255,255,255,.96), transparent 62%),
radial-gradient(ellipse 58% 46% at 84% 102%, rgba(247,227,164,.34), transparent 66%),
radial-gradient(ellipse 54% 44% at 10% 88%, rgba(255,255,255,.82), transparent 62%),
/* 1 · la pierre */
linear-gradient(152deg, var(--m-lait) 0%, var(--m-clair) 46%, var(--m-sable) 100%);
background-attachment:scroll; /* ⛔ jamais fixed : saccade sur mobile */
}
/* 4 · le grain — un SVG minuscule, en data URI.
⛔ z-index NÉGATIF, et surtout PAS de `.marbre > *{position:relative}` pour le
faire passer dessous : cette règle-là écrase le `position:fixed` des éléments
flottants (compteur, bouton de sortie) qui retombent dans le flux et s'étirent
sur toute la largeur. Vécu le 18/08 sur le deck. */
.marbre{position:relative}
.marbre::after{
content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
background-image:url("data:image/svg+xml;utf8,\
");
}
/* Une variante plus sombre, pour un panneau posé SUR le marbre. */
.marbre-panneau{
background:linear-gradient(165deg,#fffdf9,rgba(253,248,238,.92));
border:1px solid var(--m-filet-fin);border-radius:22px;
box-shadow:0 34px 80px -46px rgba(138,101,18,.55), inset 0 1px 0 #fff;
}
/* ── LES BOUTONS ────────────────────────────────────────────────────────────
⛔ v2 (18/08, Maha : « c'est moche, les ronds c'est trop moche »). Un
`linear-gradient` à trois arrêts ne fait pas du métal : il fait du plastique
jaune. Ce qui fait l'or, c'est (1) un `conic-gradient` — les reflets tournent
autour de la pièce comme sur du métal tourné, (2) un BISEAU en ombres
internes : arête claire en haut, ombre franche en bas, (3) un liseré ciselé
plus sombre que le corps, (4) un grain très fin qui casse l'aplat.
Et les icônes sont DESSINÉES (SVG), jamais des glyphes de police. */
/* ── ALIAS — les classes historiques des pages Giri pointent ici, pour qu'un
seul fichier commande l'apparence de tous les boutons de la maison. ── */
.cta,.bouton{ }
.doux{ }
.geste{ }
.g-btn,.cta,.bouton{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:17px 40px;cursor:pointer;border-radius:14px;
font-family:var(--m-serif);font-size:20px;font-weight:700;letter-spacing:.015em;
color:#231703;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;
font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
border:1px solid rgba(138,101,18,.55);
/* 1 · le métal — ⛔ pas de conic ici : sur une forme LARGE il dessine un
papillon au centre et ça fait bonbon. Une plaque d'or polie se lit en
BANDES horizontales : lumière haute, ligne d'ombre, rebond, base chaude.
(Le conic reste parfait sur les médaillons ronds, plus bas.) */
background:linear-gradient(177deg,
#f7e2a6 0%, #e6bd58 12%, #cfa02a 26%,
#b78a16 42%, #a2760d 50%, #ab7d10 58%, /* la ligne du texte : soutenue */
#c99a22 70%, #ddb03c 84%, #b6890f 100%);
/* 2 · le biseau + l'assise */
box-shadow:
inset 0 1.5px 0 rgba(255,248,225,.92),
inset 0 -2px 3px rgba(101,71,8,.42),
inset 2px 0 3px rgba(255,245,210,.28),
inset -2px 0 3px rgba(120,86,12,.24),
0 1.5px 0 rgba(122,90,16,.6),
0 12px 30px -14px rgba(138,101,18,.55);
transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s, filter .26s;
/* ⛔ PAS de halo clair sous un texte fin posé sur un fond clair : il mange les
contours et le mot paraît délavé. Une ombre SOMBRE très courte le pose net. */
text-shadow:0 1px 1px rgba(60,40,4,.28);
}
/* 3 · le grain, pour que l'or ne soit pas un aplat */
.g-btn::before,.cta::before,.bouton::before{
content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.26;
background-image:url("data:image/svg+xml;utf8,\
");
mix-blend-mode:overlay;
}
/* 4 · le reflet qui balaie — plus fin, plus rare qu'avant */
.g-btn::after,.cta::after,.bouton::after{content:'';position:absolute;top:0;left:-90%;width:42%;height:100%;
background:linear-gradient(102deg,transparent,rgba(255,255,255,.55),transparent);
animation:g-sheen 5.2s ease-in-out infinite}
@keyframes g-sheen{0%,68%{left:-90%}100%{left:150%}}
.g-btn:hover,.cta:hover,.bouton:hover{transform:translateY(-2px);filter:brightness(1.04);
box-shadow:inset 0 1.5px 0 rgba(255,248,225,.95), inset 0 -2px 3px rgba(101,71,8,.42),
inset 2px 0 3px rgba(255,245,210,.3), inset -2px 0 3px rgba(120,86,12,.26),
0 1.5px 0 rgba(122,90,16,.6), 0 18px 40px -14px rgba(138,101,18,.65)}
.g-btn:active,.cta:active,.bouton:active{transform:translateY(1px);
box-shadow:inset 0 2px 5px rgba(101,71,8,.5), inset 0 -1px 0 rgba(255,248,225,.5),
0 1px 0 rgba(122,90,16,.5), 0 6px 16px -10px rgba(138,101,18,.5)}
.g-btn:disabled,.g-btn[disabled],.cta:disabled,.cta[disabled],.doux[disabled]{opacity:.42;cursor:not-allowed;transform:none;filter:grayscale(.55)}
.g-btn:disabled::after,.g-btn[disabled]::after{animation:none}
.g-btn:focus-visible{outline:2px solid #8a6512;outline-offset:3px}
/* ── le creux : de l'ivoire gravé, pas un contour ── */
.g-btn.creux,.doux{
background:linear-gradient(180deg,#fffefb,#f7f0e0);
border:1px solid rgba(166,125,28,.5);color:#6a4c0c;
font-family:var(--m-sans);font-size:15px;font-weight:700;padding:14px 24px;
text-shadow:none;
box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(166,125,28,.16),
0 1px 0 rgba(166,125,28,.22), 0 8px 20px -12px rgba(138,101,18,.45)}
.g-btn.creux::after,.g-btn.creux::before,.doux::after,.doux::before{display:none}
.g-btn.creux:hover,.doux:hover{background:linear-gradient(180deg,#fffdf6,#f6ecd6);
border-color:rgba(166,125,28,.75);transform:translateY(-2px)}
.g-btn.nu{background:none;border:1px solid transparent;color:var(--m-or-texte);
font-family:var(--m-sans);font-size:15px;font-weight:700;padding:12px 16px;
box-shadow:none;text-shadow:none}
.g-btn.nu::after,.g-btn.nu::before{display:none}
.g-btn.nu:hover{background:rgba(247,227,164,.4);transform:none}
.g-btn.menu,.cta.menu{font-size:17px;padding:14px 30px}
/* ── LES MÉDAILLONS (ex-« ronds ») ──────────────────────────────────────────
Plus des pastilles avec un caractère au milieu : des médaillons ciselés,
avec un anneau, un creux central, et une icône DESSINÉE.
Utilisation :
*/
.g-med,.geste{
width:62px;height:62px;border-radius:50%;padding:0;cursor:pointer;flex:none;
display:inline-flex;align-items:center;justify-content:center;position:relative;
border:1px solid rgba(166,125,28,.3);
background:linear-gradient(180deg,#fffefb 0%,#f8f2e6 100%);
box-shadow:inset 0 1px 0 #fff, 0 6px 16px -10px rgba(138,101,18,.4);
transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s, border-color .24s;
}
.g-med svg,.geste svg{width:24px;height:24px;display:block}
.g-med svg *,.geste svg *{stroke:#a99b80;stroke-width:1.6;stroke-linecap:round;fill:none}
.g-med:hover,.geste:hover{transform:translateY(-3px);border-color:rgba(166,125,28,.7);
box-shadow:inset 0 1.5px 0 #fff, inset 0 -2px 4px rgba(138,101,18,.14),
0 1px 0 rgba(166,125,28,.3), 0 16px 34px -12px rgba(138,101,18,.6)}
.g-med:active,.geste:active{transform:translateY(0) scale(.96);
box-shadow:inset 0 2px 6px rgba(138,101,18,.28), 0 4px 12px -8px rgba(138,101,18,.5)}
/* ⛔⛔ LE MÉDAILLON MAJEUR EST **LE LOGO GIRI**, pas un disque doré inventé.
Règle de la maison [[feedback_cercle_dore_toujours_le_logo_giri]] : un cercle
d'or dans l'univers Giri, c'est la boule d'or — jamais un dégradé fabriqué,
jamais une icône plaquée par-dessus. Elle se suffit. */
.g-med.majeur,.geste.oui{
width:86px;height:86px;border:0;padding:0;background:none;
background-image:var(--m-logo);
/* ⛔ contain, jamais 100% 100% : la sphère du logo s'écrase et paraît ovale */
background-size:contain;background-position:center;background-repeat:no-repeat;
filter:drop-shadow(0 14px 26px rgba(138,101,18,.55));
box-shadow:none;
}
.g-med.majeur svg,.geste.oui svg{display:none} /* la boule ne porte rien */
.g-med.majeur:hover,.geste.oui:hover{transform:translateY(-4px) scale(1.05);
filter:drop-shadow(0 20px 34px rgba(138,101,18,.7)) brightness(1.06)}
.g-med.majeur:active,.geste.oui:active{transform:translateY(0) scale(.97);
filter:drop-shadow(0 8px 16px rgba(138,101,18,.5))}
.g-med[disabled],.geste[disabled]{opacity:.45;pointer-events:none}
/* pleine largeur sur petit écran : le pouce appuie, il ne vise pas */
@media(max-width:600px){
.g-btn:not(.nu){width:100%;padding:16px 24px}
.g-med,.g-med.majeur{width:66px;height:66px}
.g-med.majeur{width:82px;height:82px}
}
/* ── LE CHOIX (pastilles) ── */
.g-choix{display:flex;flex-wrap:wrap;gap:9px}
.g-choix button{padding:11px 18px;border-radius:999px;cursor:pointer;
border:1px solid rgba(166,125,28,.28);background:linear-gradient(180deg,#fffefb,#f7f0e0);
color:var(--m-doux);font-family:var(--m-sans);font-size:14px;font-weight:700;
box-shadow:inset 0 1px 0 #fff;
transition:transform .2s,border-color .2s,color .2s,box-shadow .2s}
.g-choix button:hover{border-color:rgba(166,125,28,.6);color:var(--m-encre);transform:translateY(-2px)}
.g-choix button[aria-pressed="true"]{border-color:#8a6512;color:#231703;
background:linear-gradient(180deg,#e2b84c,#b78a16);
text-shadow:0 1px 1px rgba(60,40,4,.25);
box-shadow:inset 0 1.5px 0 rgba(255,248,225,.9), inset 0 -2px 3px rgba(101,71,8,.35),
0 1px 0 #8a6512, 0 8px 20px -10px rgba(138,101,18,.6)}
@media (prefers-reduced-motion: reduce){
.g-btn::after{animation:none}
.g-med{transition:none}
.g-btn,.g-choix button{transition:none}
}