/* ═══════════════════════════════════════════════════════════════════════════
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('/veillee/assets/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:linear-gradient(158deg,#ffffff 0%,#fffdf7 42%,#fffaef 72%,#fffdf8 100%);
position:relative;
}
/* les veines : un SVG dessiné, posé par la page (voir .veines-svg ci-dessous).
⛔ des dégradés CSS ne font pas des veines — la maison a tranché le 09/08 sur
« Ils témoignent » : de longues courbes de Bézier dorées, avec une lueur. */
.marbre-fond{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
background:linear-gradient(158deg,#ffffff 0%,#fffdf7 42%,#fffaef 72%,#fffdf8 100%)}
.marbre-fond .veines-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.marbre-lumiere{position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse 70% 50% at 50% 6%,rgba(255,255,255,.9),transparent 70%),
radial-gradient(ellipse 52% 42% at 90% 94%,rgba(247,227,164,.2),transparent 68%)}
/* 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 ────────────────────────────────────────────────────────────
⛔ v4 — DÉCISION MAHA (18/08) : « reprends ce bouton-là ! pour tout ! »
Le bouton de `giriacademie.com/affilie` devient LE bouton de la maison. On
abandonne la pilule à capitales espacées : place au rectangle arrondi 16 px,
au serif en casse normale, et au dégradé oblique à quatre arrêts qui finit
dans le bronze. Aucun reflet qui balaie : la matière suffit.
Recette exacte, ne pas la réinventer :
· fond linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%)
· bord 1px rgba(160,120,64,.55) · texte #3a2708 (serif, casse normale)
· ombres 0 2px 6px rgba(74,48,12,.12) + 0 10px 26px rgba(74,48,12,.18)
+ inset 0 1px 0 rgba(255,255,255,.55) */
.g-btn,.cta,.bouton{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--m-serif);font-size:21px;font-weight:500;letter-spacing:.2px;
line-height:1.2;color:#3a2708;text-decoration:none;cursor:pointer;text-align:center;
padding:18px 34px;border-radius:16px;position:relative;
border:1px solid rgba(160,120,64,.55);
font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
box-shadow:0 2px 6px rgba(74,48,12,.12), 0 10px 26px rgba(74,48,12,.18),
inset 0 1px 0 rgba(255,255,255,.55);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.g-btn:hover,.cta:hover,.bouton:hover{transform:translateY(-2px);
box-shadow:0 4px 10px rgba(74,48,12,.14), 0 16px 38px rgba(74,48,12,.24),
inset 0 1px 0 rgba(255,255,255,.7)}
.g-btn:active,.cta:active,.bouton:active{transform:translateY(0);
box-shadow:0 1px 4px rgba(74,48,12,.14), 0 5px 14px rgba(74,48,12,.18),
inset 0 1px 0 rgba(255,255,255,.45)}
.g-btn:disabled,.g-btn[disabled],.cta:disabled,.cta[disabled],.doux[disabled]{
opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.45)}
.g-btn:focus-visible,.g-porte:focus-visible{outline:none;
box-shadow:0 0 0 3px rgba(232,192,120,.6)}
/* le second : le marbre bordé d'or — la porte qui découvre */
.g-btn.creux,.doux{
font-family:var(--m-serif);font-size:19px;font-weight:500;letter-spacing:.2px;
line-height:1.2;color:#4a3520;cursor:pointer;text-decoration:none;text-align:center;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:17px 30px;border-radius:16px;
border:1px solid rgba(160,120,64,.45);
background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88));
box-shadow:0 2px 6px rgba(74,48,12,.08), 0 10px 26px rgba(74,48,12,.12),
inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.g-btn.creux:hover,.doux:hover{transform:translateY(-2px);border-color:rgba(160,120,64,.75);
box-shadow:0 4px 10px rgba(74,48,12,.10), 0 16px 38px rgba(74,48,12,.18),
inset 0 1px 0 rgba(255,255,255,.95)}
.g-btn.nu{background:none;border:1px solid transparent;color:#7a5f14;
font-family:var(--m-serif);font-size:18px;font-weight:500;letter-spacing:.2px;
padding:14px 20px;box-shadow:none}
.g-btn.nu:hover{background:rgba(247,227,164,.4);transform:none;box-shadow:none}
.g-btn.menu,.cta.menu{font-size:18px;padding:15px 26px}
/* ── 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-color:transparent;
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) — mêmes pilules, en plus petit ── */
.g-choix{display:flex;flex-wrap:wrap;gap:10px}
.g-choix button{font-family:var(--m-serif);font-size:16px;font-weight:500;
letter-spacing:.2px;line-height:1.2;
padding:13px 22px;border-radius:999px;cursor:pointer;color:#7a5f14;
background:linear-gradient(180deg,#fffdf6,#f7f0dd);
border:1px solid rgba(160,130,42,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s,color .3s}
.g-choix button:hover{transform:translateY(-2px);color:#5a4109;border-color:rgba(160,130,42,.75)}
.g-choix button[aria-pressed="true"]{color:#422d06;font-weight:700;
border-color:rgba(122,95,20,.7);
background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);color:#3a2708;
box-shadow:0 2px 6px rgba(74,48,12,.12), 0 8px 20px rgba(74,48,12,.16),
inset 0 1px 0 rgba(255,255,255,.55)}
/* ═══ LE CATALOGUE — les variantes que réclame l'écosystème Giri ═══════════
Toutes bâties sur le même vocabulaire (pilule · retour clair · capitales
espacées · filet fin). On n'ajoute jamais une forme : on ajoute un usage. */
/* ── LES TAILLES ── */
.g-btn.grand{font-size:26px;padding:24px 48px}
.g-btn.petit{font-size:16px;padding:12px 22px}
.g-btn.large{width:100%}
/* ── LE BOUTON DE VENTE : le prix fait partie du geste ── */
.g-btn.prix{flex-direction:column;gap:4px;padding:18px 40px;line-height:1.15;font-size:19px}
.g-btn.prix .somme{font-size:30px;letter-spacing:.02em;font-weight:600;
font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.g-btn.prix .somme sup{font-size:.5em;vertical-align:top;top:.32em;position:relative;margin-left:.06em}
.g-btn.prix .avant{font-size:14px;opacity:.7;text-decoration:line-through}
/* ── L'ÉTAT « EN COURS » : le bouton dit ce qu'il fait ── */
.g-btn.encours{pointer-events:none;color:rgba(66,45,6,.6)}
.g-btn.encours::before{content:'';width:15px;height:15px;border-radius:50%;flex:none;
border:2px solid rgba(66,45,6,.28);border-top-color:#422d06;animation:g-tourne .8s linear infinite}
@keyframes g-tourne{to{transform:rotate(360deg)}}
/* ── L'ÉTAT « RÉUSSI » : un succès qui se VOIT (règle de la maison) ── */
.g-btn.reussi{background:linear-gradient(180deg,#e8f3d8 0%,#c6dfa6 30%,#8fb85f 70%,#c6dfa6 100%);
border-color:rgba(74,104,32,.55);color:#2c3f12;text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* ── LE GRAVE : annuler, quitter, supprimer — sobre, jamais rouge criard ── */
.g-btn.grave{background:linear-gradient(180deg,#fdf6f4,#f6e8e4);
border-color:rgba(140,60,40,.32);color:#8c3c28;text-shadow:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(120,50,30,.1)}
.g-btn.grave:hover{border-color:rgba(140,60,40,.6);color:#6d2c1c;filter:none}
/* ── LE GROUPE SEGMENTÉ : plusieurs vues d'une même chose ── */
.g-groupe{display:inline-flex;padding:5px;border-radius:16px;
background:linear-gradient(180deg,#fffdf6,#f5eeda);border:1px solid rgba(160,130,42,.32);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.g-groupe button{border:0;background:none;cursor:pointer;border-radius:12px;
font-family:var(--m-serif);font-size:17px;font-weight:500;letter-spacing:.2px;
color:#7a5f14;padding:12px 24px;transition:.3s}
.g-groupe button[aria-pressed="true"]{color:#422d06;font-weight:700;
background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);color:#3a2708;
box-shadow:0 2px 6px rgba(74,48,12,.14), inset 0 1px 0 rgba(255,255,255,.5)}
/* ── LE RETOUR : discret, en haut à gauche, toujours le même ── */
.g-retour{font-family:var(--m-serif);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:#7a5f14;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
padding:14px 20px;line-height:1;border-radius:999px;
background:linear-gradient(180deg,#fffdf6,#f7f0dd);border:1px solid rgba(160,130,42,.42);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 5px 14px rgba(138,101,18,.14);transition:.3s}
.g-retour:hover{transform:translateY(-2px);color:#5a4109;border-color:rgba(160,130,42,.8)}
/* ── L'AJOUT : un geste léger, qui n'a pas à crier ── */
.g-plus{width:46px;height:46px;border-radius:50%;border:1px dashed rgba(160,130,42,.5);
background:rgba(255,253,246,.7);color:#a0822a;font-size:22px;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:.3s}
.g-plus:hover{border-style:solid;border-color:#c9971b;color:#7a5f14;transform:rotate(90deg)}
/* ── SUR FOND SOMBRE (portail « écrin brun-or ») ────────────────────────────
Le même geste, mais le marbre n'est plus là pour porter le contraste. */
.sombre .g-btn,.g-btn.sur-sombre{
border-color:rgba(240,208,96,.5);color:#2a1c02;
background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(0,0,0,.45)}
.sombre .g-btn.creux,.g-btn.creux.sur-sombre{
background:rgba(240,208,96,.07);border-color:rgba(240,208,96,.34);color:#f0d060;
box-shadow:inset 0 1px 0 rgba(240,208,96,.12)}
.sombre .g-btn.creux:hover,.g-btn.creux.sur-sombre:hover{
background:rgba(240,208,96,.16);border-color:rgba(240,208,96,.7);color:#fff3d0}
/* ⛔ le nu doit REMETTRE le fond à zéro : sinon il hérite du lingot sombre
défini juste au-dessus et l'action tertiaire se déguise en action principale. */
.sombre .g-btn.nu,.g-btn.nu.sur-sombre{
background:none;background-image:none;border-color:transparent;
box-shadow:none;text-shadow:none;color:#e2c56a}
.g-btn.nu.sur-sombre:hover{background:rgba(240,208,96,.12)}
/* ── LE FLOTTANT : une seule action, toujours à portée ── */
.g-flottant{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:30;
width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;padding:0;
background-color:transparent; /* sinon le fond natif du