/* Site de réservation (index.html) : feuille de style sortie de la page pour être
gardée en cache par le téléphone. Toute modification : incrémenter ?v= dans index.html. */
/* ════════════════════════════════════════════════════════
FCUTZ BOOKING — Premium Gold/Black UI · UX Pro Max
════════════════════════════════════════════════════════ */
:root{
color-scheme:dark;
--bg:#060606; --bg2:#0C0C0C; --bg3:#141414; --bg4:#1C1C1C; --bg5:#262626;
--border:#1F1F1F; --border-gold:#2A2A2A;
/* --gold-deep sert deux fois : depart des degrades dores, et couleur de
texte dans le pave legal. A #8A6E36 il echouait des deux cotes — le noir
pose dessus tombait a 4,2:1, et lui-meme a 3,9:1 sur fond noir. Eclairci
juste ce qu'il faut, les deux passent le seuil AA sans que l'or change
d'humeur. */
/* Saturation remontee de 50 a 66 % a luminosite egale : l'or reste noble,
il cesse d'etre beige. Les contrastes y gagnent au passage — noir pose
dessus 9,9:1, en texte sur fond sombre 9,1:1. --gold-deep suit, sature
mais toujours au-dessus du seuil dans les deux sens (5,9 et 5,4). */
--gold:#DAB149; --gold-2:#F1CC6F; --gold-3:#FFE9A8; --gold-deep:#AF842C;
/* --text-3 portait les mentions secondaires a 4,1:1, sous le seuil ;
--text-4 les mentions legales a 2,0:1, c'est-a-dire a la limite du
visible. Les deux remontent, --text-4 restant le plus efface des deux
puisqu'il ne sert plus qu'aux textes de remplacement des champs. */
--text:#F5F0E6; --text-2:#B8B2A7; --text-3:#8F8880; --text-4:#6E665C;
--success:#4ABA6A; --danger:#E05050; --warning:#E8A84A;
--sh-gold:none;
--ease:cubic-bezier(.4,0,.2,1);
--ease-pop:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
html{touch-action:manipulation;background:#060606}
html,body{overscroll-behavior:none}
body{
background:transparent;color:var(--text);font-family:'Syne',sans-serif;font-size:14px;line-height:1.5;
min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-x:clip;
padding-bottom:env(safe-area-inset-bottom);
}
body::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
body::after{display:none}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit;outline:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(218,177,73,.18);border-radius:2px}
/* ── POLICES HÉBERGÉES ──
Unbounded, Syne et Bricolage Grotesque (licence SIL OFL 1.1, textes dans
fonts/polices/OFL-*.txt). Avant le 21/10/2026 elles venaient de Google Fonts :
chaque visite écrivait à Google, et la page dépendait de deux serveurs de plus.
Ce sont les mêmes fichiers (variables : un fichier sert tous les poids), déclarés
poids par poids avec les mêmes plages de caractères que le CSS de Google, donc
le rendu est identique. Seuls le latin et le latin étendu sont gardés : le
cyrillique, le grec et le vietnamien ne servent à rien sur un site de Lannion.
Un fichier modifié : changer son ?v= ici et dans le d'index.html
(/fonts/* est gardé un an). */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/polices/unbounded-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/polices/unbounded-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/polices/unbounded-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/polices/unbounded-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/polices/unbounded-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/polices/unbounded-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/polices/unbounded-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/polices/unbounded-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/polices/unbounded-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/polices/unbounded-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/polices/syne-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/polices/syne-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/polices/syne-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/polices/syne-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/polices/syne-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/polices/syne-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/polices/syne-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/polices/syne-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/polices/syne-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/polices/syne-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-stretch:100%;font-display:swap;src:url(../fonts/polices/bricolage-grotesque-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-stretch:100%;font-display:swap;src:url(../fonts/polices/bricolage-grotesque-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ── SPLASH ── */
/* Le nom FCUTZ arrive sur la fumée du fond, se pose, puis file se ranger dans
l'en-tête, à la place exacte du mot-logo.
Au repos, il est celui de l'écran de lancement iOS (/img/splash-b-*.png,
outils/icones/splash.sh) : 17,5 % de la largeur, centré. Toute retouche de
taille ou de place ici doit être reportée dans splash.sh, et inversement. */
#splash{
position:fixed;inset:0;z-index:9999;overflow:hidden;
display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
/* Le splash est TRANSPARENT : derrière le nom, c'est le vrai fond du site qui
tourne déjà. Seul le contenu de la page est tenu caché le temps du splash —
la classe est posée par le script sous le markup et retirée à la sortie. */
html.splash-on body>:not(#splash):not(canvas){opacity:0!important;pointer-events:none!important}
/* Pont entre l'écran de lancement iOS et le fond animé : tant que le canvas
WebGL n'a pas peint sa première image, c'est ce voile qui tient l'écran. Il
s'efface dès que le fond est prêt (.fond-pret). */
.splash-fond{
position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 45%, #10100D 0%, #07080A 55%, #050506 100%) center/cover no-repeat;
transition:opacity .5s var(--ease);
}
#splash.fond-pret .splash-fond{opacity:0}
/* Le rendu du shader (231 Ko) n'est chargé QUE dans l'app installée, où il
prolonge exactement l'écran de lancement iOS. Une règle de media query qui ne
correspond pas n'entraîne AUCUN téléchargement. */
@media (display-mode: standalone){
.splash-fond{
background-image:url(/img/splash-fond-b.png),
radial-gradient(ellipse at 50% 45%, #10100D 0%, #07080A 55%, #050506 100%);
background-size:cover, cover;
background-position:center, center;
background-repeat:no-repeat, no-repeat;
}
}
.splash-camera,.splash-scene{position:relative}
.splash-mot{
font-family:'FcutzLogo','Unbounded',sans-serif;font-weight:900;color:var(--text);
font-size:17.5vw;letter-spacing:-.27vw;line-height:.92;white-space:nowrap;
text-shadow:none;
}
/* Chaque lettre est une boîte à elle (inline-block, sinon pas de
transformation) ; la police n'a pas de crénage entre ces glyphes, le mot
garde donc au pixel près la largeur de l'écran de lancement iOS. */
.splash-mot span{display:inline-block}
/* Rouleaux : une copie du nom posée sur l'autre, chaque lettre est une fenêtre
(rognée en haut et en bas seulement) où défile une bande de lettres. La
lettre de la fenêtre, transparente, ne sert qu'à lui donner sa largeur. */
.splash-rouleaux{position:absolute;left:0;top:0}
.splash-rouleaux span{position:relative;color:transparent;text-shadow:none;clip-path:inset(0 -60% 0 -60%)}
.splash-bande{position:absolute;left:0;right:0;top:0;text-align:center;color:var(--text);text-shadow:none;will-change:transform}
.splash-bande i{display:block;height:.92em;font-style:normal}
/* Repère de ligne de base : posé un instant dans un texte pour savoir où
tombent ses lettres (le nom du splash, le mot-logo de l'en-tête). */
.splash-repere{display:inline-block;width:0;height:0;vertical-align:baseline}
/* Tant que la police n'est pas prête, rien n'est montré — voir le script sous
le markup. Sans ça le mot s'afficherait dans la police de secours, puis
changerait. */
#splash.police-attendue .splash-camera{visibility:hidden}
/* Repli — mouvement réduit demandé, ou navigateur sans animations Web : le nom
posé, en fondu. */
#splash.simple .splash-mot{animation:splash-fondu .45s var(--ease) both}
@keyframes splash-fondu{from{opacity:0}}
/* ── MOT-LOGO ──
Unbounded 900 dessine les trois barres hautes du mot a des epaisseurs
differentes : 215 unites pour le F, 230 pour le T, 198 pour le Z. Les trois
partent du meme sommet, mais leur dessous ne tombe pas au meme endroit — a la
taille du splash, l'ecart entre le T et le Z fait deux pixels pleins.
Cette police ne contient que F, C, U, T et Z, avec le dessous du T et celui du
Z ramenes sur celui du F (535). Rien d'autre ne l'utilise : le reste de la
page reste sur Unbounded. Elle sert aussi aux icones et aux ecrans de
lancement, via outils/icones/fcutz-logo.ttf — meme dessin partout. */
@font-face{
font-family:'FcutzLogo';font-weight:900;font-style:normal;font-display:block;
src:url(data:font/woff2;base64,d09GMgABAAAAAALIABAAAAAABUwAAAJvAAGzdQAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwwBmA/U1RBVCoATBEICoJIgg4BNgIkAxgLDgAEIAWBYgcgDAcb7ANAHoVNmes0MiQyXhyF6w/zIyjHsL0kRVRl26oqwAdHEgAUgyIjaDyicu8A3esY/Bz72x7iZkk0QTKzkaET4Uv+cxZa7vgDSaS31BI5wN8iS+iNEy4PJKCkLWmRBhyABa3N6ddHIk9paQCBdkASQoMQaDVEDrXWzScEHApUAAKtpughjXMi+yuLciB3IrEkD3JtUi55IbeggXSH3gJYd8uJXTCKSMiG5dm4yg/4gjWi8lflpvwLORCQltM3xhAhNAv0ozCEPpeeUUKxIAmI9nwbkJDRjwj0YzEDWjVLkjXchIqqwJmQyeqnulsX6owAQIgKP2gE7WjCZnAZQAGEJAkxUdhLGWyvfn195ep6f6caGYa7++0tlGfy+J2r6/UV1weoB3MiH82PzlPg28zC03Ccl6X9mCAEDjcsXXF336xQuSNdfwGmrS0Oh/JRXQ5s4sfsA1futJKRg9CatovEvMWyshMrbTUEFMnfSNuPj4yJVZCGtq+ZmbZPkKaViY/UT4e3lyqMivl/Rqu0qIv+Z+IqXU/z/h1h5GC8WfP6QN9gf0dzkH6cmTi2GFZethiWNJY5RZt8fTh5ZNfw8blxMDmtk3kOEIjnpY0+Kcrx/Db/OUj+AV/t+1qAb48DphCt32SUQKMEgj+W/DIXojmYprugMZ+ATV7DWBZnkz0gmithlO1oo9BoAg2Cak22IaK0CP3gOOnUz9k0JV1artGIEC+KdicfTrRrdZUbZ6FCRFHgI1+6fEFSpSuVI1ERQ3rMGTBkzY8jP9ZC5UmSr1SeFKlS6HKSI1Gy7Hw3XKpM6TKU8EgoVDctfUPVnrDcBw==) format('woff2');
}
/* ── HEADER ── */
/* Un vrai bandeau, pas un simple haut de page : il a son propre fond, il reste
en haut quand on defile, et il porte la meme matiere de verre que la barre
d'etapes — les deux se repondent d'un bord a l'autre de l'ecran. */
/* Le contenu defile sous la Dynamic Island : l'en-tete part avec la page, donc
plus rien n'occupe le haut de l'ecran. Ce voile ancre eteint la zone sure —
plein jusqu'a l'ile, puis un fondu de 34 px pour que le contenu n'y entre pas
au couteau. Il porte le meme z-index que l'en-tete mais le precede dans le
balisage : la bulle passe donc devant et le fondu ne l'assombrit pas. Hauteur
du fondu seul la ou il n'y a pas d'encoche. */
.voile-haut{
position:fixed;z-index:2;left:0;right:0;top:0;
height:env(safe-area-inset-top,0px);
background:#060606;
pointer-events:none;
}
/* En-tete sobre, refait le 24/09/2026 : l'ancienne bulle doree (bordure
or, cases dorees autour de chaque icone, ombre portee, pastille en degrade)
faisait gadget. Ici, un bandeau noir plein avec un filet en bas, le mot-logo
a gauche comme une vraie enseigne, les icones nues a droite et, pour un
client reconnu, sa photo Instagram (ou son initiale) dans un rond. Sticky :
il reste en haut quand on defile, sans padding a compenser plus bas. */
.header{
position:sticky;top:0;z-index:20;
background:var(--bg);
border-bottom:1px solid rgba(255,255,255,.06);
padding:calc(env(safe-area-inset-top,0px) + 6px)
calc(14px + env(safe-area-inset-right,0px))
6px
calc(16px + env(safe-area-inset-left,0px));
}
.h-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
max-width:536px;margin:0 auto;min-height:46px}
.h-name{
font-family:'FcutzLogo','Unbounded',sans-serif;font-size:21px;font-weight:900;
color:var(--text);letter-spacing:-.3px;line-height:1;white-space:nowrap;text-decoration:none;
}
.h-side{display:flex;align-items:center;gap:2px;min-width:0}
.h-ico{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:var(--text-2);transition:color .2s,background .2s;
}
.h-ico i{font-size:20px}
.h-ico:active{background:#1B1B1B;color:var(--text)}
/* Inconnu : un simple lien texte. Reconnu : un rond de 34 px, la photo
Instagram du client si sa fiche est reliee a une conversation, sinon son
initiale sur fond neutre. */
.h-account{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
height:38px;margin-left:6px;padding:0 2px 0 8px;background:none;border:0;
color:var(--text);font-family:inherit;font-size:13px;font-weight:600;
cursor:pointer;white-space:nowrap}
.h-account.avatar{width:34px;height:34px;padding:0;border-radius:50%;overflow:hidden;
background:var(--bg4);border:1px solid rgba(255,255,255,.14);
font-family:'Unbounded',sans-serif;font-size:13px;font-weight:800;color:var(--text)}
.h-account.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Le rang du client autour de sa photo : un anneau taille dans la MEME matiere
que la plaque de « Mon recap » (img/rang-*.jpg), pour qu'on reconnaisse le
rang d'un coup d'oeil sans ouvrir l'espace. L'anneau est la bordure elle-meme,
remplie par la photo de matiere (background en border-box) — le rond garde
donc sa place, sans element en plus. Un reflet en fait le tour, comme celui
qui traverse la plaque. Le rang vient de /api/loyalty, jamais d'un calcul ici. */
.h-account.avatar[data-rang]{position:relative;overflow:visible;width:38px;height:38px;
border:3px solid transparent;
background:linear-gradient(var(--bg4),var(--bg4)) padding-box, var(--rang-matiere) center/cover no-repeat border-box;
box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 12px color-mix(in srgb, var(--rang) 45%, transparent)}
.h-account.avatar[data-rang]::after{content:'';position:absolute;inset:-3px;border-radius:50%;padding:3px;pointer-events:none;
background:conic-gradient(from 0deg, transparent 0 60%, rgba(255,255,255,.75) 74%, transparent 88%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:rangTour 4.5s linear infinite}
@keyframes rangTour{to{transform:rotate(1turn)}}
.h-account.avatar[data-rang="diamant"]{--rang:#8FD8E8;--rang-matiere:url('../img/rang-diamant.jpg')}
.h-account.avatar[data-rang="or"]{--rang:#DAB149;--rang-matiere:url('../img/rang-or.jpg')}
.h-account.avatar[data-rang="argent"]{--rang:#B0B8C0;--rang-matiere:url('../img/rang-argent.jpg')}
.h-account.avatar[data-rang="bronze"]{--rang:#C0A060;--rang-matiere:url('../img/rang-bronze.jpg')}
@media (prefers-reduced-motion:reduce){.h-account.avatar[data-rang]::after{animation:none}}
/* ── ROULETTE ──
Un ticket toutes les 5 coupes, sur la roue du rang : cuivre (Bronze),
acier (Argent), or (Or), cristal taille en facettes (Diamant). Chaque rang
a sa couleur de metal (--m1/--m2/--m3), posee sur la carte et sur la scene.
C'est le serveur qui tire ; la roue ne fait que tourner jusqu'a la case
qu'il indique. */
.rl-bronze {--m1:#F6C9A0;--m2:#C07A45;--m3:#6E3616;--lueur:rgba(192,110,55,.38);--lampe:#FFB77E}
.rl-argent {--m1:#FFFFFF;--m2:#B9C0CA;--m3:#5D646E;--lueur:rgba(190,205,225,.30);--lampe:#EAF3FF}
.rl-or {--m1:#FFF1B8;--m2:#DAB149;--m3:#86611A;--lueur:rgba(218,177,73,.38);--lampe:#FFE08A}
.rl-diamant{--m1:#FFFFFF;--m2:#9FE0EE;--m3:#3F8FA5;--lueur:rgba(143,216,232,.38);--lampe:#D8FAFF}
.rl-btn{flex-shrink:0;border:0;border-radius:10px;padding:10px 16px;font:600 14px/1 inherit;font-family:inherit;color:#0A0A0A;cursor:pointer;
background:var(--m2);box-shadow:none;transition:transform .08s,box-shadow .08s}
.rl-btn:active{transform:translateY(3px);box-shadow:none}
.rl-btn:focus-visible{outline:2px solid var(--m1);outline-offset:3px}
.rl-btn:disabled{opacity:.45;cursor:default}
.rl-gain{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;
background:#131313;border:1px solid color-mix(in srgb,var(--m2) 25%,transparent);font-size:13px;color:var(--text)}
.rl-gain i{color:var(--m2);font-size:18px}
.rl-gain small{display:block;color:var(--text-3);font-size:11px;margin-top:2px}
#rl-scene{position:fixed;inset:0;z-index:450;background:#060606;display:none;overflow-y:auto;
flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(24px + env(safe-area-inset-bottom,0px))}
#rl-scene.ouvert{display:flex}
.rl-fermer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:40px;height:40px;border-radius:50%;
border:0;background:#1B1B1B;color:var(--text-2);font-size:20px;cursor:pointer;z-index:2}
.rl-entete{position:relative;text-align:center}
.rl-entete b{display:block;font-family:'Unbounded',sans-serif;font-weight:800;font-size:22px;color:var(--m2)}
.rl-entete small{display:block;margin-top:4px;font-size:13px;color:var(--text-3)}
.rl-roue{position:relative;width:min(86vw,360px);aspect-ratio:1;max-width:100%}
.rl-roue > svg.rl-disque{width:100%;height:100%;display:block;transition:transform 5.4s cubic-bezier(.1,.7,.07,1);filter:none}
.rl-pointe{position:absolute;left:50%;top:-14px;width:44px;height:58px;transform:translateX(-50%);transform-origin:50% 18px;z-index:3;filter:none}
#rl-scene.tourne .rl-pointe{animation:rl-tic .11s ease-in-out infinite alternate}
@keyframes rl-tic{from{transform:translateX(-50%) rotate(-9deg)}to{transform:translateX(-50%) rotate(4deg)}}
.rl-lampe{fill:var(--lampe);opacity:.35}
#rl-scene.tourne .rl-lampe.a{animation:rl-chasse .36s steps(1) infinite}
#rl-scene.tourne .rl-lampe.b{animation:rl-chasse .36s steps(1) .18s infinite}
#rl-scene.fin .rl-lampe{animation:rl-vainqueur .5s ease-in-out 6 alternate;opacity:1}
@keyframes rl-vainqueur{from{opacity:.3}to{opacity:1}}
.rl-gagnante{animation:rl-brille 1s ease-in-out 3 alternate}
.rl-resultat{position:relative;min-height:54px;text-align:center;font-size:15px;color:var(--text)}
.rl-resultat b{color:var(--m1);font-weight:700}
.rl-resultat small{display:block;margin-top:4px;color:var(--text-3);font-size:12px}
#rl-scene .rl-btn{position:relative;min-width:180px;padding:14px 22px;font-size:15px}
.rl-eclat{position:absolute;z-index:4;width:7px;height:7px;border-radius:2px;pointer-events:none;animation:rl-eclat 1.1s ease-out forwards}
@media (prefers-reduced-motion:reduce){.rl-roue > svg.rl-disque{transition-duration:.01s}#rl-scene .rl-pointe,#rl-scene .rl-lampe,.rl-gagnante,.rl-eclat{animation:none!important}}
/* ── ÉTAPES (barre du bas) ──
Même langage que la barre de navigation du dashboard (.mnav) : une bulle
flottante en verre qui ne colle pas aux bords, pas un bandeau. Les étapes y
sont cliquables — goStep() refuse déjà les sauts en avant tant que la
prestation, le créneau ou les coordonnées manquent, la barre n'a donc rien à
verrouiller de son côté. */
.steps{
display:flex;align-items:stretch;justify-content:space-around;gap:2px;
position:fixed;z-index:110;
left:calc(12px + env(safe-area-inset-left,0px));
right:calc(12px + env(safe-area-inset-right,0px));
bottom:calc(12px + env(safe-area-inset-bottom,0px) - var(--vv-bas,0px));
max-width:536px;margin:0 auto;
transition:bottom .3s var(--ease);
padding:7px 6px;
background:#101012;
border:1px solid var(--bg5);
border-radius:20px;
box-shadow:none;
}
.step{
flex:1;min-width:0;min-height:46px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
border:0;background:none;cursor:pointer;font-family:inherit;color:var(--text-3);
border-radius:16px;transition:color .22s var(--ease),background .22s var(--ease);
}
.step i{font-size:19px;line-height:1}
.step-l{font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:inherit}
.step.done{color:var(--text-2)}
.step.active{color:var(--gold);background:#292315}
/* Le verre seul ne suffit pas : une photo claire qui defile dessous reste
lisible au travers. Le voile eteint le bas de la page avant la barre. */
.steps-voile{
position:fixed;z-index:109;left:0;right:0;
bottom:calc(0px - var(--vv-bas,0px));
/* 74 px pour la barre (12 de marge + 62 de haut) en noir plein, et un fondu
court juste au-dessus : plus long, il eteignait le bouton Continuer, qui
s'arrete a une dizaine de pixels de la barre. */
height:calc(74px + env(safe-area-inset-bottom,0px));
background:#060606;
pointer-events:none;
}
/* ── MAIN ── */
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:16px calc(18px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}
.wrap.at-success{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.section{display:none;animation:secIn .35s var(--ease)}
.section.active{display:block}
/* Les etapes defilent lateralement, dans le sens de la marche : la suivante
entre par la droite, celle qu'on retrouve en revenant entre par la gauche.
goStep() pose .retour avant d'activer la section. */
@keyframes secIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes secInRetour{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.section.retour{animation-name:secInRetour}
.s-title{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.5px;margin-bottom:16px}
/* ── SERVICE CARDS ── */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.svc-list>.svc:last-child:nth-child(odd){grid-column:1}
.svc{
position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:16px;
text-align:left;
overflow:hidden;cursor:pointer;
transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .1s var(--ease);
display:flex;flex-direction:column;
}
.svc:active{transform:scale(.98)}
.svc.sel{border-color:var(--gold);background:#181610}
.svc.sel{box-shadow:none}
.svc-img-wrap{position:relative;width:100%;aspect-ratio:1.4/1;background:#0A0A0A;overflow:hidden}
.svc-img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.svc-body{padding:14px;display:flex;flex-direction:column;gap:4px}
.svc-name{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.3px}
/* La description vit en base depuis le debut et n'etait jamais rendue : un
visiteur devait deviner ce qu'est une « Transformation » a 20 euros. */
.svc-desc{font-size:11.5px;color:var(--text-3);line-height:1.4}
.svc.sel .svc-name{color:var(--gold)}
.svc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.svc-price{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:900;color:var(--gold);letter-spacing:-.5px}
.svc-dur{font-size:11px;color:var(--text-3);display:inline-flex;align-items:center;gap:3px}
.svc-check{
position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.34);background:#080808;
display:flex;align-items:center;justify-content:center;color:transparent;
transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease-pop);
z-index:1;
}
.svc.sel .svc-check{background:var(--gold);border-color:var(--gold);color:#080808;transform:scale(1.15)}
/* ── ADDONS ── */
.section-h{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.3px;margin:18px 0 10px;color:var(--text)}
.addons{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.addon{
background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;
text-align:left;
cursor:pointer;transition:.2s var(--ease);display:flex;align-items:center;gap:12px;
}
.addon:active{transform:scale(.99)}
.addon.sel{border-color:var(--gold);background:#181610}
.addon-img{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#0A0A0A}
.addon-name{flex:1;min-width:0;font-size:15.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addon-dur{font-size:11px;font-weight:400;color:var(--text-3);margin-left:6px}
.addon-price{flex-shrink:0;font-family:'Unbounded',sans-serif;font-size:14px;font-weight:800;color:var(--gold)}
.addon-price + .addon-check{margin-left:-4px}
.addon-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0;transition:.2s var(--ease)}
.addon.sel .addon-check{background:var(--gold);border-color:var(--gold);color:#080808}
/* ── CALENDAR ── */
.cal-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:none}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month{font-family:'Unbounded',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.3px;text-transform:capitalize}
.cal-nav{
width:34px;height:34px;border-radius:10px;
background:var(--bg3);border:1px solid var(--border);color:var(--text);
display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:.2s var(--ease);
}
.cal-nav:disabled{opacity:.25;cursor:default;pointer-events:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
@media(max-width:500px){.cal-grid{gap:3px}}
.cal-dn{font-size:10.5px;color:var(--text-3);text-align:center;padding:4px 0;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.cal-d{
aspect-ratio:1;display:flex;align-items:center;justify-content:center;
border-radius:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
transition:background .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
border:1px solid transparent;background:transparent;min-height:42px;
}
.cal-d:active:not(.past):not(.closed):not(.empty){transform:scale(.88);transition-duration:.06s}
@media(max-width:500px){.cal-d{font-size:12px;min-height:36px;border-radius:8px}}
.cal-d.today{color:var(--gold);font-weight:500}
/* Un jour ferme n'est pas un jour annule : plus de rature, une simple mise en
retrait. Et l'etat efface est rendu par une couleur, pas par une opacite —
a .25 le chiffre tombait a 2:1 de contraste, c'est-a-dire illisible. */
.cal-d.past,.cal-d.closed{opacity:1;color:var(--text-4);pointer-events:none;text-decoration:none}
/* Le point sous le chiffre dit « il reste de la place ici », sans rien ecrire.
Une journee ouverte mais pleine garde son chiffre, en retrait, et reste
cliquable : on peut vouloir s'inscrire sur la liste d'attente. */
.cal-d.libre{position:relative}
.cal-d.libre::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold)}
.cal-d.sel.libre::after{background:#080808}
.cal-d.complet{color:var(--text-3)}
.cal-d.empty{pointer-events:none;opacity:0}
.cal-d.sel{background:var(--gold);color:#080808;font-weight:800;box-shadow:none;border-color:var(--gold-2)!important;color:#080808!important}
.cal-d.sel.today{background:var(--gold);color:#080808;font-weight:800;box-shadow:none;border-color:var(--gold-2)}
.cal-panne{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:26px 18px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.cal-panne i{font-size:30px;color:var(--gold)}
.cal-panne b{color:var(--text)}
.cal-loading{grid-column:1/-1;text-align:center;padding:24px;color:var(--text-3);font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:8px}
.cal-loading::before{content:'';width:16px;height:16px;border:2px solid var(--bg5);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── SLOTS ── */
.slots-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.slots-h-t{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;color:var(--text)}
.slots-h-d{font-size:11px;color:var(--text-3)}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;animation:fadeSlots .22s var(--ease) both}
@keyframes fadeSlots{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot{
background:var(--bg2);border:1px solid var(--border);border-radius:12px;
padding:14px 6px;text-align:center;font-size:13px;cursor:pointer;
font-family:'Unbounded',sans-serif;font-weight:700;color:var(--text);
transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
min-height:48px;display:flex;align-items:center;justify-content:center;
}
.slot:active{transform:scale(.93);transition-duration:.06s}
.slot.sel{background:var(--gold);color:#080808;border:2px solid var(--gold);box-shadow:none;font-weight:900;animation:selPop .22s var(--ease-pop) both}
@keyframes selPop{from{opacity:.7}to{opacity:1}}
/* Les heures se posent l'une apres l'autre plutot que d'apparaitre en bloc.
Le decalage est porte par --i, ecrit sur chaque bouton au rendu ; le retard
commun vient de --retard, que l'etape 2 rallonge le temps que le calendrier
finisse de glisser. */
.slot{animation:slotArrive .34s cubic-bezier(.16,1,.3,1) both;
animation-delay:calc(var(--retard,0ms) + var(--i,0) * 30ms)}
@keyframes slotArrive{
from{opacity:0;transform:translateY(9px) scale(.95)}
to{opacity:1;transform:none}
}
@media(min-width:480px){.slots{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(min-width:768px){.slots{grid-template-columns:repeat(4,1fr);gap:8px}.slot{padding:11px 4px;min-height:auto}}
/* ── JOUR COMPLET ── */
.slots-zone{position:relative}
/* Le panneau ne se pose plus PAR-DESSUS les heures : il les remplace.
Superpose, il heritait de la hauteur de la grille qu'il couvrait — un pave
au texte colle en haut, aux bords, jamais centre — et les heures barrees se
devinaient dessous. En bloc ordinaire il a sa propre hauteur et son propre
air. Le titre « Creneaux libres » s'efface avec elles : il n'y en a aucune. */
.slots-zone.full .slots,.slots-zone.partial .slots{display:none}
#slots-wrap:has(.slots-zone.full) .slots-h,
#slots-wrap:has(.slots-zone.partial) .slots-h{display:none}
.slots-full{display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:34px 24px;margin-bottom:16px;animation:fadeSlots .25s var(--ease) both;background:var(--bg2);border:1px solid var(--border);border-radius:16px}
.slots-zone.full .slots-full{display:flex}
.slots-full-title{font-family:'Unbounded',sans-serif;font-size:20px;font-weight:900;letter-spacing:-.5px;line-height:1.25;color:var(--text);text-shadow:none}
.slots-full-link{
display:inline-flex;align-items:center;gap:9px;
background:var(--gold);
color:#080808;font-family:'Unbounded',sans-serif;font-size:12px;font-weight:800;
padding:14px 20px;border-radius:16px;text-decoration:none;
box-shadow:none;
transition:transform .12s var(--ease), box-shadow .15s var(--ease);
}
/* Le second choix garde la forme du premier mais pas son or : un aplat
sombre, pas un bouton transparent. Pose sur les heures barrees qu'il
recouvre, le fond translucide les laissait lire au travers. */
.slots-full-link.second{
background:#131313;border:1px solid rgba(218,177,73,.45);color:var(--gold);
box-shadow:none;
}
.slots-full-link i{font-size:19px}
.slots-full-link:active{transform:scale(.95)}
/* ── PLEIN POUR CETTE PRESTA SEULEMENT (il reste des trous plus courts) ── */
.slots-partial{display:none;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:34px 24px;margin-bottom:16px;animation:fadeSlots .25s var(--ease) both;background:var(--bg2);border:1px solid var(--border);border-radius:16px}
.slots-zone.partial .slots-partial{display:flex}
.slots-partial-sub{font-size:12.5px;line-height:1.55;color:var(--text-2);max-width:290px;text-shadow:none}
.slots-partial-sub b{color:var(--gold-2);font-weight:700}
/* ── INPUTS ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:1.5px;color:var(--text-3);text-transform:uppercase;font-weight:700;margin-bottom:7px}
.field .input,.field input,.field select,.field textarea{
width:100%;background:var(--bg2);border:2px solid var(--border);border-radius:12px;
color:var(--text);font-family:'Syne',sans-serif;font-size:16px;font-weight:500;
padding:14px 16px;transition:.2s var(--ease);min-height:48px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);border-width:2px;background:var(--bg3)}
.field input::placeholder{color:var(--text-4)}
#b-phone{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px}
.fields-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:480px){.fields-row{grid-template-columns:1fr 1fr}}
/* ── RECAP ── */
.recap{
background:#181610;
border:1px solid var(--border-gold);border-radius:16px;padding:16px;margin-bottom:16px;
box-shadow:none;
}
.recap-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--bg5);font-size:13px;gap:10px}
.recap-row:first-child{padding-top:0}
.recap-row:last-child{border-bottom:none;padding-bottom:0;padding-top:12px;margin-top:4px;border-top:1px solid var(--bg5)}
.recap-label{color:var(--text-3);font-size:11.5px;font-weight:600;letter-spacing:.3px}
.recap-val{color:var(--text);font-weight:600;text-align:right;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recap-row:last-child .recap-label{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:1.5px}
.recap-row:last-child .recap-val{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:900;color:var(--gold);letter-spacing:-.5px}
/* ── PAY OPTIONS ── */
.pay-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.pay-opt{
text-align:left;width:100%;
background:var(--bg2);border:1px solid var(--border);border-radius:12px;
padding:14px 16px;cursor:pointer;transition:.2s var(--ease);
display:flex;align-items:center;gap:14px;
}
.pay-opt.sel{border-color:var(--gold);background:#16140F}
.pay-opt-icon{width:42px;height:42px;border-radius:12px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold);flex-shrink:0}
.pay-opt.sel .pay-opt-icon{background:#312A17}
.pay-opt-body{flex:1;min-width:0}
.pay-opt-title{font-size:13.5px;font-weight:700;color:var(--text)}
.pay-opt-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.pay-opt-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s var(--ease)}
.pay-opt.sel .pay-opt-radio{border-color:var(--gold)}
.pay-opt.sel .pay-opt-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--gold)}
/* ── BUTTONS ── */
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:16px 24px;border-radius:16px;
font-family:'Syne',sans-serif;font-size:13px;font-weight:700;
letter-spacing:1px;text-transform:uppercase;cursor:pointer;
transition:.25s var(--ease);min-height:52px;
}
@media(max-width:500px){.btn{min-height:48px;font-size:12px}}
.btn-gold{background:var(--gold);color:#080808;box-shadow:none}
.btn-gold:active:not(:disabled){transform:translateY(0)}
.btn-out{background:transparent;color:var(--text-2);border:1px solid var(--border);margin-top:10px}
/* Le bouton creme : celui de « Nouvelle reservation » dans l'espace client, et
donc aussi « Retour » dans le parcours, pour que les deux se ressemblent. */
.btn-creme{background:var(--text);color:#0A0A0A;border-color:transparent}
.btn-creme:active:not(:disabled){opacity:.85}
/* L'opacite eteint le texte, la bordure et le fond ensemble : le libelle du
bouton en attente tombait a 2,2:1. L'etat se dit maintenant en couleurs. */
.btn:disabled{pointer-events:none;background:var(--bg3);color:var(--text-3);border:1px solid var(--border);box-shadow:none;background-image:none}
.btn-ghost{background:transparent;color:var(--gold);border:1.5px solid var(--bg5)}
.btn-danger{background:transparent;color:#E05050;border:1.5px solid rgba(224,80,80,.25)}
.rdv-actions{display:flex;flex-direction:column;gap:var(--ecart,12px);width:100%;max-width:400px;margin:0 auto}
.rdv-actions .btn-out,.rdv-actions .btn-ghost,.rdv-actions .btn-danger{margin-top:0}
.rdv-actions-sep{height:1px;background:var(--border);margin:2px 0}
.cancel-dialog{padding:14px;background:#170F0F;border:1px solid rgba(224,80,80,.18);border-radius:16px}
.cancel-dialog-msg{font-size:13px;font-weight:600;color:#F0A8A8;margin-bottom:12px;text-align:center}
.cancel-dialog-row{display:flex;gap:8px}
.cancel-dialog-row .btn{flex:1;min-height:44px;font-size:12px;padding:10px 6px;margin-top:0}
/* ── SUCCESS ── */
/* Meme discipline que « mon rendez-vous » : tous les blocs a la meme largeur,
separes du meme ecart, decide ici et pas carte par carte. L'entete — la
pastille, le titre, la phrase — garde son air. */
.success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 16px;
--bloc:400px;--ecart:12px}
.success > *:not(.success-icon):not(h2):not(p){
width:100%;max-width:var(--bloc);margin-top:var(--ecart)}
.success > div:empty{display:none}
.success-icon{
width:96px;height:96px;border-radius:50%;
background:var(--gold);
display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
font-size:48px;color:#080808;
box-shadow:none;
animation:successPop .6s var(--ease-pop) both;
}
@keyframes successPop{from{opacity:0}to{opacity:1}}
/* A la confirmation d'un RDV, la pastille suit la vibration (Ressenti, dans le
script) : un point de lumiere qui grossit et s'embrase de plus en plus vite
jusqu'a 77 %, se contracte pendant le souffle (77-80 %), puis eclot sur le
coup final et le ting (80 %). La duree est posee par le script. */
.success-icon.montee{animation-name:successMontee;animation-timing-function:linear}
.success-icon.montee i{animation-name:successCoche;animation-duration:inherit;animation-fill-mode:both;animation-timing-function:linear}
@keyframes successMontee{
0%{transform:scale(.1);opacity:0;box-shadow:none;
animation-timing-function:cubic-bezier(.55,0,.85,.4)}
6%{opacity:.8}
77%{transform:scale(.46);opacity:1;
box-shadow:none;
animation-timing-function:cubic-bezier(.3,0,.7,1)}
80%{transform:scale(.4);
box-shadow:none;
animation-timing-function:cubic-bezier(.16,1,.3,1)}
88%{transform:scale(1.1)}
100%{transform:scale(1);opacity:1;box-shadow:none}
}
@keyframes successCoche{
0%,80%{opacity:0;transform:scale(.4) rotate(-12deg)}
90%{opacity:1;transform:scale(1.15) rotate(0)}
100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.success-icon.montee{animation-name:successPop;animation-duration:.3s!important;animation-delay:0s}
.success-icon.montee i{animation:none}
}
.success h2{font-family:'Unbounded',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.success p{color:var(--text-2);font-size:13px;line-height:1.7}
.success-recap{background:var(--bg2);border:1px solid var(--border-gold);border-radius:16px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:10px;box-shadow:none}
.success-recap-item{display:flex;align-items:center;gap:12px;font-size:13.5px}
.success-recap-item i{font-size:18px;color:var(--gold);flex-shrink:0}
/* Ligne adresse cliquable → ouvre Google Maps */
/* Qui reserve, rappele sur la validation : c'est la contrepartie du saut de
l'etape Infos — le client reconnu ne repasse plus par les champs, il faut donc
qu'il voie sous quel nom et quel numero part la reservation, et qu'il puisse y
revenir d'un geste. */
.qui{display:flex;align-items:center;gap:9px;margin:-4px 0 14px;padding:10px 13px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.qui i{font-size:16px;color:var(--gold);flex-shrink:0}
.qui-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qui-mod{flex-shrink:0;background:none;border:0;padding:0;font-family:inherit;font-size:12px;font-weight:700;color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* Version d'une ligne, pour l'etape Infos : le detail complet est repris juste
apres, a la validation. Le tableau de quatre lignes y coutait 180 px, soit
exactement ce qui faisait deborder l'ecran. */
.recap.mini{padding:11px 14px;margin-bottom:14px}
.recap-mini{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.5px;font-weight:600;color:var(--text-2)}
.recap-mini i{font-size:16px;color:var(--gold);flex-shrink:0}
.rm-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-prix{flex-shrink:0;font-family:'Unbounded',sans-serif;font-size:15px;font-weight:900;color:var(--gold);letter-spacing:-.3px}
.recap-map{cursor:pointer;border-radius:10px;margin:-4px -6px;padding:4px 6px;transition:background .2s}
.recap-map:focus-visible{background:#1F1B11;outline:none}
.recap-map .rm-go{display:block;font-size:11px;color:var(--gold);font-weight:700;margin-top:2px}
/* ── CARTE FIDÉLITÉ ──
Dix cases en deux rangées de cinq, lisibles sans une ligne d'explication :
une coche = une coupe faite, un numéro = celles qui restent, la roue de la
5e case = la roulette, le cadeau = la coupe offerte. Le compteur à droite
du titre dit où on en est, et devient « Coupe offerte » quand la carte est
pleine. Crème et noir : l'or ne sert plus ici. */
.fid-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:left;box-shadow:none;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.fid-card.show{opacity:1;transform:translateY(0)}
.fid-card.gold{border-color:rgba(245,240,230,.28)}
.fid-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--text)}
.fid-title i{font-size:19px;color:var(--text-3)}
.fid-compte{margin-left:auto;font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--text-3)}
.fid-compte b{font-weight:800;color:var(--text)}
.fid-compte.offerte{font:700 11px/1 'Syne',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0A0A0A;background:var(--text);padding:7px 11px;border-radius:999px}
.fid-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:300px;margin:0 auto}
.fid-slot{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(245,240,230,.14);display:flex;align-items:center;justify-content:center;color:rgba(245,240,230,.32);position:relative}
.fid-slot i{transition:none}
.fid-n{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:600}
.fid-slot .ti-check{display:none;font-size:21px}
.fid-slot.filled{background:var(--text);border-color:var(--text);color:#0A0A0A}
.fid-slot.filled .ti-check{display:block}
.fid-slot.filled .fid-n{display:none}
.fid-slot.next{border-color:var(--text);color:var(--text)}
.fid-slot.filled.pop i{animation:fidStamp .45s cubic-bezier(.4,0,.2,1) both}
@keyframes fidStamp{from{opacity:0}to{opacity:1}}
/* Nouveau tampon (gagné depuis la dernière visite) : le coche arrive, avec sa pastille +1 */
.fid-slot.stamp-new i{animation:fidStampBig .75s cubic-bezier(.4,0,.2,1) both}
@keyframes fidStampBig{from{opacity:0}to{opacity:1}}
.fid-plus1{position:absolute;top:-10px;right:-8px;background:var(--text);color:#0A0A0A;border:2px solid var(--bg2);font-size:9px;font-weight:800;font-family:'Unbounded',sans-serif;padding:2px 6px;border-radius:10px;box-shadow:none;animation:fidPlus1 .5s cubic-bezier(.4,0,.2,1) .4s both;z-index:2}
@keyframes fidPlus1{from{opacity:0}to{opacity:1}}
/* La roulette garde la couleur de son rang : c'est la seule case qui en a une. */
.fid-slot.roulette{border-color:color-mix(in srgb,var(--m2) 65%,transparent)}
.fid-slot.roulette.filled{border-color:var(--m2);background:color-mix(in srgb,var(--m2) 20%,transparent)}
.fid-slot.roulette svg{width:24px;height:24px;flex:none;display:block;margin:auto}
/* Ticket gagné : la 5e case s'ouvre au toucher, et la carte porte le bouton.
Pas de carte « roulette » à part : elle n'existe qu'à ce moment. */
.fid-slot.roulette.pret{cursor:pointer}
.fid-roulette:not([class*="rl-"]){--m1:#FFF1B8;--m2:#DAB149;--m3:#86611A}
.fid-roulette{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center}
.fid-roulette .rl-btn{min-width:190px;padding:12px 18px}
.fid-roulette .rl-gain{width:100%;margin-top:0;text-align:left}
@media (prefers-reduced-motion:reduce){.fid-slot.roulette.pret{animation:none}}
.fid-slot.roulette:not(.filled) svg{opacity:.85}
.fid-slot.reward{font-size:21px}
.fid-slot.reward.next{background:var(--text);border-color:var(--text);color:#0A0A0A}
/* ── RÉCAP CLIENT ──
Ce que le client a laissé ici : ses venues, son total, sa distance à la coupe
offerte. Même largeur que la carte de fidélité qu'il suit, sinon les deux
blocs de « Mon espace » ne s'alignent pas. */
.ps-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px 14px;box-shadow:none;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.ps-card.show{opacity:1;transform:translateY(0)}
.ps-title{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:14px}
.ps-title i{font-size:15px}
.ps-grid{display:flex;flex-wrap:wrap;gap:8px}
/* Trois par rangee, et ce qui reste s'etire : quatre tuiles font 3 + 1 pleine
largeur, cinq font 3 + 2. Une grille fixe laissait une case vide, qui se lit
comme un chiffre manquant. */
.ps-tile{flex:1 1 calc(33.333% - 6px);min-width:88px;background:#16140F;border:1px solid var(--border-gold);border-radius:12px;padding:12px 6px;text-align:center}
/* Les lapins ne sont pas une performance : ni or, ni mis en avant. */
.ps-tile.alerte{background:#191010;border-color:rgba(224,80,80,.22)}
.ps-tile.alerte .ps-v{color:#F0A8A8}
.ps-v{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:900;color:var(--gold);letter-spacing:-.6px;line-height:1.15}
.ps-v.mot{font-size:13px;letter-spacing:-.2px}
.ps-l{font-size:11px;font-weight:600;color:var(--text-3);margin-top:6px;line-height:1.3}
.ps-foot{margin-top:12px;font-size:11.5px;color:var(--text-3);line-height:1.45;text-align:center}
/* ── MON SAMEDI ──
La proposition de garder son creneau, et le rappel de la serie en cours. */
.sam-card{padding:16px 15px;border-radius:16px;
background:#1F1B11;
border:1px solid var(--border-gold);box-shadow:none;text-align:left}
.sam-titre{display:flex;align-items:center;gap:8px;font-family:'Unbounded',sans-serif;font-size:13.5px;font-weight:800;
color:var(--text);letter-spacing:-.2px;margin-bottom:5px}
.sam-titre i{font-size:18px;color:var(--gold);flex-shrink:0}
/* Cartes dépliables de l'espace client : repliées, on ne voit que le titre
et une ligne de résumé ; le choix ouvert/fermé est retenu par carte. */
.depliable > [role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.depliable > [role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.dp-chevron{font-size:14px;margin-left:6px;transition:transform .2s;display:inline-block}
.depliable:not(.replie) .dp-chevron{transform:rotate(180deg)}
.sam-titre .dp-chevron{margin-left:auto;color:var(--text-3)}
.ps-card.replie > :not(.ps-title):not(.ps-rang),
.sam-card.replie > :not(.sam-titre):not(.sam-sous){display:none}
.ps-card.replie .ps-rang{margin-bottom:0}
.sam-card.replie .sam-sous{margin-bottom:0}
.sam-sous{font-size:12.5px;color:var(--text-3);line-height:1.5;margin-bottom:13px}
.sam-sous b{color:var(--gold);font-weight:700}
/* Trois rythmes sur une rangee, et le dernier s'etire s'il reste seul. */
/* Les heures du samedi, format des creneaux de reservation en plus compact :
c'est le meme geste, il doit se reconnaitre. */
.sam-heures{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px}
.sam-h{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:11px 4px;
font-family:'Unbounded',sans-serif;font-size:12.5px;font-weight:700;color:var(--text);
cursor:pointer;min-height:44px;transition:border-color .15s,background .15s,transform .1s}
.sam-h:active{transform:scale(.93)}
.sam-h[disabled]{opacity:.32;cursor:default;text-decoration:line-through}
.sam-retour{margin-top:10px;background:none;border:0;padding:0;font-family:inherit;font-size:11.5px;
font-weight:700;color:var(--text-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sam-choix{display:flex;flex-direction:column;gap:7px}
.sam-choix .btn{margin-top:0;font-size:12.5px;padding:12px 10px}
.sam-dates{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.sam-date{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.sam-date i{font-size:15px;color:var(--gold);flex-shrink:0}
.sam-stop{margin-top:12px;background:none;border:0;padding:0;font-family:inherit;font-size:11.5px;font-weight:700;
color:var(--text-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sam-stop:hover{color:#F0A8A8}
/* Le rang, en tete du recap : c'est la seule ligne qui dit quelque chose de la
personne plutot que de ses chiffres, elle passe donc devant eux. La couleur
vient du rang lui-meme (--rang), pour que la carte change d'allure et pas
seulement de mot. */
/* Chaque rang porte sa matiere : taille de diamant, or coule, metal brosse.
Tout est calcule en CSS — une photo de texture pese, se pixellise sur un
ecran dense, et il en faudrait quatre dont les droits tiennent. Les plaques
restent sombres et les reflets plafonnes : c'est un fond, le mot doit rester
lisible par-dessus. */
.ps-rang{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
margin:0 0 14px;padding:11px 14px;border-radius:12px;
border:1px solid color-mix(in srgb, var(--rang) 34%, transparent);
background:#0D0D11;
box-shadow:none}
/* La matiere. */
.ps-rang::before{content:'';position:absolute;inset:0;pointer-events:none}
/* Le reflet qui traverse la plaque, comme la lumiere sur du metal qu'on tourne. */
/* Le texte repasse devant : les deux pseudo-elements sont positionnes, ils
couvriraient un contenu qui ne l'est pas. */
.ps-rang > *{position:relative;z-index:1}
.ps-rang i{font-size:17px;color:var(--rang);text-shadow:none}
.ps-rang-n{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:900;letter-spacing:-.2px;color:var(--rang);text-shadow:none}
.ps-rang-s{font-size:11px;font-weight:600;color:rgba(255,255,255,.62);text-shadow:none}
/* Les quatre matieres sont de vraies photos, recadrees en bande et reduites a
640x160 (11 a 28 Ko chacune, chargees seulement quand le recap s'affiche).
Le voile sombre est pris au centre et s'efface sur les bords : le mot reste
lisible sans eteindre les reflets, qui sont tout l'interet. */
.ps-rang.diamant::before,.ps-rang.or::before,.ps-rang.argent::before,.ps-rang.bronze::before{
background-position:center;background-size:cover;background-repeat:no-repeat}
.ps-rang.or::before{background-image:url('../img/rang-or.jpg');background-color:#4c3e26;background-blend-mode:multiply}
.ps-rang.argent::before{background-image:url('../img/rang-argent.jpg');background-color:#44474b;background-blend-mode:multiply}
.ps-rang.bronze::before{background-image:url('../img/rang-bronze.jpg');background-color:#4a3524;background-blend-mode:multiply}
/* Diamant — une vraie pierre taillee, recadree dans une zone sans filigrane.
Elle est bien plus claire que les metaux : son voile est donc plus appuye,
sinon le mot se perd dans les facettes blanches. */
.ps-rang.diamant::before{background-image:url('../img/rang-diamant.jpg');background-color:#3a4a58;background-blend-mode:multiply}
/* ── MON RDV (écran récap post-booking) ── */
/* Tous les blocs de cet ecran font la MEME largeur et sont separes du MEME
ecart. C'est pose ici, sur la colonne, et pas bloc par bloc : chaque carte
qui reglait sa propre largeur et sa propre marge finissait par en avoir une
differente des autres, et un bloc ajoute plus tard repartait de travers —
c'est comme ca que « Ton samedi » est sorti plus large que le recap, et colle
au bouton d'en dessous. Les enfants ne portent donc ni largeur ni marge
verticale : ils remplissent.
`:empty` compte comme un enfant : sans cette regle, un conteneur vide (pas de
carte de fidelite, pas de serie) laisserait un trou dans la pile. */
/* Refonte du 07/10/2026 : l'espace client empilait cinq cartes dorees
(rendez-vous, fidelite, recap, samedi, boutons) sous une pastille doree de
96 px. Maintenant : un en-tete sobre, la carte du rendez-vous, UN bloc a
lignes fines pour tout ce qui concerne le client (fidelite, rendez-vous
auto, recap), puis des tuiles. L'or ne reste que sur de petits details
(tampons de la carte, rang) ; la matiere de l'ecran est le creme et le noir. */
.my-rdv{display:flex;flex-direction:column;align-items:center;padding:4px 0 8px;text-align:left;
--bloc:400px;--ecart:12px;
--esp-surf:#0E0E0E;--esp-line:rgba(245,240,230,.09);--esp-or:rgba(218,177,73,.8)}
.my-rdv > *{width:100%;max-width:var(--bloc);margin-top:var(--ecart)}
.my-rdv > .mr-entete{margin-top:0}
.my-rdv > div:empty{display:none}
.mr-entete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:2px 2px 6px}
.my-rdv-tag{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text-3)}
.my-rdv-name{grid-column:1/-1;grid-row:2;font-family:'Unbounded',sans-serif;font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.2}
/* Le rendez-vous auto est un reglage qu'on touche une fois, pas une rubrique
de l'ecran : un petit bouton en haut a droite, qui deplie son panneau. */
.mr-auto-btn{grid-area:1/2;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;
background:none;border:1px solid var(--esp-line);color:var(--text-2);cursor:pointer;
font:600 12px/1 'Syne',sans-serif;transition:background .2s,border-color .2s}
.mr-auto-btn[hidden]{display:none}
.mr-auto-btn i{font-size:15px;color:var(--text-3)}
.mr-auto-btn.actif i{color:var(--esp-or)}
.mr-auto-btn.ouvert{background:rgba(245,240,230,.06);border-color:rgba(245,240,230,.2);color:var(--text)}
.mr-auto-btn:active{background:rgba(245,240,230,.1)}
.mr-auto-btn:focus-visible{outline:2px solid var(--text-2);outline-offset:2px}
.esp-auto{background:var(--esp-surf);border:1px solid var(--esp-line);border-radius:18px}
.esp-auto:not(.ouvert){display:none}
.my-rdv-card{background:var(--esp-surf);border:1px solid var(--esp-line);border-radius:18px;padding:18px}
/* Le moment d'abord : l'heure en grand, le jour au-dessus, et en dessous ce
qui est fait et son prix. Plus de quatre lignes a icones identiques. */
.mr-pour{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--text-2)}
.mr-pour i{font-size:16px;color:var(--text-3)}
.mr-quand{display:flex;flex-direction:column;gap:3px}
.mr-jour{font-size:13px;font-weight:600;color:var(--text-2)}
.mr-jour::first-letter{text-transform:uppercase}
.mr-heure{font-family:'Unbounded',sans-serif;font-size:36px;font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--text)}
.mr-detail{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--esp-line);font-size:14px;font-weight:600;color:var(--text)}
.mr-prix{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:700;color:var(--text);white-space:nowrap}
/* Plusieurs RDV listes : le meme ecart que partout ailleurs. */
#mr-list{display:flex;flex-direction:column;gap:var(--ecart)}
/* Fidelite et recap : plus des cartes empilees sur l'ecran, mais deux tuiles
(comme Rappels et Itineraire) qui ouvrent chacune une modale. La tuile dit
l'essentiel en une ligne (6/10, Argent) ; le detail est dans la modale, dont
les cartes perdent leur boite : c'est la modale qui fait la boite. */
.esp-modale .modale{padding:22px 20px 20px}
/* Le titre de la modale ne passe jamais sous la croix de fermeture. */
.esp-modale .modale-titre{padding-right:44px}
.esp-modale .fid-card,.esp-modale .ps-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.esp-modale .fid-title,.esp-modale .ps-title{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0 0 18px;padding-right:44px;
font-family:'Syne',sans-serif;font-size:16px;font-weight:700;letter-spacing:0;white-space:nowrap;text-transform:none;color:var(--text)}
.esp-modale .fid-title > i,.esp-modale .ps-title > i{font-size:20px;color:var(--text-3)}
/* « Coupe offerte » ne tient pas à côté du titre sans toucher la croix : elle a
sa propre ligne, sous le titre, alignée à gauche. */
.fid-offerte{margin:-6px 0 16px}
.fid-offerte .fid-compte.offerte{display:inline-block}
.esp-modale .ps-tile{background:rgba(245,240,230,.04);border:0;padding:12px 10px;text-align:left}
.esp-modale .ps-tile.alerte{background:rgba(224,80,80,.07)}
.esp-modale .ps-v{font-size:17px;color:var(--text)}
.esp-modale .ps-v.mot{font-size:13px}
.esp-modale .ps-l{margin-top:4px}
.esp-modale .ps-foot{text-align:left;margin-top:14px}
.esp-modale .ps-rang{margin:0 0 14px}
/* L'en-tete du client : sa photo, son nom, son Insta, son numero. */
.my-rdv .mr-entete .my-rdv-name{display:none}
.esp-profil{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:16px;padding:14px 0 4px}
.esp-profil[hidden]{display:none}
.esp-photo{position:relative;flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
background:#16140F;border:2px solid var(--esp-line);color:var(--text);font:800 32px/1 'Unbounded',sans-serif}
.esp-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Meme anneau que la photo de l'en-tete (matiere du rang, halo, reflet qui
tourne), a la taille de la grande photo. */
.esp-photo[data-rang]{overflow:visible;border:5px solid transparent;
background:linear-gradient(#16140F,#16140F) padding-box, var(--rang-matiere) center/cover no-repeat border-box;
box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--rang) 45%, transparent)}
.esp-photo[data-rang] img{border-radius:50%}
.esp-photo[data-rang]::after{content:'';position:absolute;inset:-5px;border-radius:50%;padding:5px;pointer-events:none;
background:conic-gradient(from 0deg, transparent 0 60%, rgba(255,255,255,.75) 74%, transparent 88%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:rangTour 4.5s linear infinite}
.esp-photo[data-rang="diamant"]{--rang:#8FD8E8;--rang-matiere:url('../img/rang-diamant.jpg')}
.esp-photo[data-rang="or"]{--rang:#DAB149;--rang-matiere:url('../img/rang-or.jpg')}
.esp-photo[data-rang="argent"]{--rang:#B0B8C0;--rang-matiere:url('../img/rang-argent.jpg')}
.esp-photo[data-rang="bronze"]{--rang:#C0A060;--rang-matiere:url('../img/rang-bronze.jpg')}
@media (prefers-reduced-motion:reduce){.esp-photo[data-rang]::after{animation:none}}
.esp-ident{min-width:0;display:flex;flex-direction:column;gap:5px}
.esp-nom{font-family:'Unbounded',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.15;color:var(--text);overflow-wrap:anywhere}
.esp-ligne{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-2);min-width:0}
.esp-ligne[hidden]{display:none}
.esp-ligne i{font-size:16px;color:var(--text-3);flex:none}
.esp-ligne span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le panneau « rendez-vous auto » (ouvert par le bouton de l'en-tete). */
.esp-auto .sam-card{background:none;border:0;border-radius:0;box-shadow:none;padding:2px 16px 14px;text-align:left}
.esp-auto .sam-titre{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:46px;margin:0;
font-family:'Syne',sans-serif;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text)}
.esp-auto .sam-titre i:not(.dp-chevron){font-size:19px;color:var(--text-3)}
.esp-auto .sam-sous{margin:0 0 14px}
.esp-auto .sam-sous b{color:var(--text)}
.esp-auto .sam-h{background:rgba(245,240,230,.04);border-color:var(--esp-line)}
.esp-auto .sam-date i{color:var(--text-3)}
/* Les tuiles : des CARRES sur deux colonnes, qui forment un grand carre (2 x 2)
sur l'espace client comme sur l'ecran « RDV confirme ». Le bouton plein
« Nouvelle reservation » reste une barre creme sur toute la largeur dans
l'espace, et devient la quatrieme tuile creme sur l'ecran de confirmation.
Le creme plutot que l'or : c'est la couleur du texte du site. Sur une
grande largeur, les carres se mettent en ligne, dans une colonne contenue. */
.rdv-actions.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
--esp-surf:#0E0E0E;--esp-line:rgba(245,240,230,.09)}
.rdv-actions.tuiles > :not(.esp-act){grid-column:1/-1}
.tuiles .esp-act{flex-direction:column;gap:8px;aspect-ratio:1;min-height:0;min-width:0;padding:12px;border-radius:18px;
background:var(--esp-surf);border:1px solid var(--esp-line);color:var(--text);margin-top:0;
font-size:13px;font-weight:600;letter-spacing:.2px;text-transform:none;text-align:center;line-height:1.25}
.tuiles .esp-act[hidden]{display:none}
.tuiles .esp-act i{font-size:28px;color:var(--text-2)}
.tuiles .esp-act .esp-val{display:block;margin-top:-3px;font-size:12px;font-weight:600;color:var(--text-3)}
.tuiles .esp-act .esp-val:empty{display:none}
.tuiles .esp-act:active{background:#171717}
.tuiles .esp-act.esp-large{grid-column:1/-1;aspect-ratio:auto;min-height:64px;flex-direction:row}
.tuiles .esp-act.esp-large i{font-size:22px}
.tuiles .esp-act.esp-cta{background:var(--text);color:#0A0A0A;border:0}
.tuiles .esp-act.esp-cta i{color:#0A0A0A}
.tuiles .esp-act.esp-cta:active{background:var(--text);opacity:.85}
.tuiles .esp-act.attention{border-color:rgba(245,240,230,.5)}
.my-rdv .esp-cta:not(.esp-act){min-height:52px;background:var(--text);color:#0A0A0A;border:0;margin-top:0}
.my-rdv .esp-cta:not(.esp-act):active{opacity:.85}
@media(hover:hover){.tuiles .esp-act:hover{border-color:rgba(245,240,230,.22)}.tuiles .esp-act.esp-cta:hover{background:#fff}.my-rdv .esp-cta:not(.esp-act):hover{background:#fff}}
@media(min-width:768px){.rdv-actions.tuiles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px}}
/* Dans l'espace client : gros carres, deux par rangee (fidelite, recap,
rappels, itineraire), puis la barre creme. */
.my-rdv .rdv-actions.tuiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.my-rdv .tuiles .esp-act{gap:10px;font-size:15px}
.my-rdv .tuiles .esp-act i{font-size:34px}
.my-rdv .tuiles .esp-act .esp-val{font-size:13px}
.my-rdv .tuiles .esp-cta{order:-1;min-height:58px;font-size:14px}
/* Les deux gestes d'une carte de la liste : petits, neutres, dans la carte. */
.mr-mini{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 8px;border-radius:12px;
background:rgba(245,240,230,.05);border:1px solid var(--esp-line);color:var(--text);cursor:pointer;
font:600 13px/1.2 'Syne',sans-serif;transition:background .2s}
.mr-mini:active{background:rgba(245,240,230,.1)}
.mr-mini.plein{background:var(--text);color:#0A0A0A;border-color:transparent}
.mr-mini.danger{color:#F0A8A8;border-color:rgba(224,80,80,.28);background:transparent}
.mr-mini:disabled{opacity:.5;cursor:default}
.mr-decalage{margin-top:14px;padding:13px;border-radius:12px;background:rgba(245,240,230,.04);border:1px solid var(--esp-line);font-size:13px;line-height:1.5;color:var(--text-2)}
.mr-decalage b{color:var(--text)}
.mr-decalage-row{display:flex;gap:8px;margin-top:12px}
/* Les deux boutons d'une carte de la liste. La classe existe pour que la
carte, une fois passee en grille sur deux colonnes, puisse leur rendre la
ligne entiere — sans elle ils tombaient dans la colonne de gauche. */
/* Un rendez-vous pose par la serie le dit : sans ca, le client ne sait pas
pourquoi il a un rendez-vous qu'il ne se souvient pas d'avoir pris. */
.mr-recurrent{display:flex;align-items:center;gap:7px;margin-top:14px;
font-size:12px;font-weight:600;color:var(--text-3)}
.mr-recurrent i{font-size:15px}
.mr-card-actions{display:flex;gap:8px;margin-top:16px}
/* .btn-out porte une marge haute pour s empiler sous un bouton principal :
dans une rangee elle desaligne les deux boutons de quelques pixels. */
.mr-card-actions>.btn{margin-top:0}
/* Les blocs de l'ecran « mon rendez-vous » partagent la largeur de la carte.
C'etait ecrit en style en ligne sur chacun : impossible a elargir ensuite
pour une tablette, un attribut style battant n'importe quelle regle. */
/* La largeur des blocs vit dans --bloc, sur .my-rdv. Les regles par id qui
etaient ici redisaient la meme chose bloc par bloc, et un bloc ajoute plus
tard etait oublie — c'est comme ca que « Ton samedi » est sorti plus large
que les autres. */
.mr-annule{text-align:center;padding:16px;background:#1D1111;border:1px solid rgba(224,80,80,.2);border-radius:12px;color:#F0A8A8;font-size:13px;font-weight:600}
/* ── RETROUVER MON RDV ── */
.fb-box{margin-top:16px;padding:18px 16px 16px;background:#181610;border:1px solid var(--border-gold);border-radius:16px;text-align:left}
.fb-title{display:flex;align-items:center;gap:8px;font-family:'Unbounded',sans-serif;font-size:13px;font-weight:800;color:var(--text);margin-bottom:5px;letter-spacing:-.2px}
.fb-title i{font-size:18px;color:var(--gold)}
.fb-sub{font-size:12px;color:var(--text-3);margin-bottom:14px;line-height:1.45}
.fb-msg{font-size:12.5px;font-weight:600;margin-top:12px;text-align:center;padding:10px 12px;border-radius:10px;line-height:1.4}
.fb-msg.ko{color:#F0A8A8;background:#1F1212;border:1px solid rgba(224,80,80,.22)}
.fb-msg.ok{color:var(--gold);background:#1C1911;border:1px solid var(--border-gold)}
.fb-cta{margin-top:10px}
/* ── TOAST ── */
/* ── MODALES ── */
/* Le format de la carte d'inscription de TrimSync, pour toute modale du site :
carte pleine, filet dore a peine visible, 20 px de rayon, ombre douce,
titre net aligne a gauche. Elle entre d'un seul glissement. */
.modale-voile{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;touch-action:none;
padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
background:rgba(6,6,6,.84);animation:modaleVoileIn .3s ease both}
@keyframes modaleVoileIn{from{opacity:0}to{opacity:1}}
.modale{position:relative;width:100%;max-width:420px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
background:var(--bg3);border:1px solid var(--bg5);border-radius:20px;padding:28px 24px;
box-shadow:none;animation:modaleIn .4s var(--ease-pop) both}
@keyframes modaleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modale-titre{font-family:'Bricolage Grotesque','Syne',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.25;color:var(--text);margin-bottom:4px}
.modale-sub{font-size:14px;line-height:1.5;color:var(--text-3);margin:0 0 20px}
.modale-fermer{position:absolute;top:20px;right:18px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--text-3);font-size:15px;cursor:pointer;z-index:2;transition:background .2s,color .2s}
.modale-fermer:active{background:rgba(255,255,255,.14);color:var(--text)}
#toast{position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:50%;transform:translateX(-50%) translateY(-20px);background:var(--bg3);border:1px solid var(--border-gold);border-radius:12px;padding:12px 20px;font-size:13px;font-weight:600;line-height:1.45;z-index:9000;opacity:0;transition:all .35s var(--ease);pointer-events:none;max-width:min(92vw,420px);text-align:center;box-shadow:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Les fonds teintes etaient poses en rgba : ils REMPLACAIENT le fond opaque du
toast au lieu de s'y ajouter, et le message se lisait par-dessus le mot-logo.
Les memes teintes, mais deja fondues dans le noir du toast. */
#toast.t-g{border-color:rgba(74,186,106,.35);background:#16231C;color:#8EE4C6}
#toast.t-r{border-color:rgba(224,80,80,.35);background:#251719;color:#F0A8A8}
#toast.t-gold{border-color:var(--border-gold);color:var(--gold)}
/* ── RESPONSIVE ── */
@media(min-width:520px){
.svc-list{grid-template-columns:repeat(2,1fr)}
.pay-opts{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
/* .svc-list reste en 2 colonnes même sur petit mobile : Coupe Simple et
Transformation sont affichées côte à côte, pas empilées. */
.slots{grid-template-columns:repeat(3,1fr)}
.fields-row{grid-template-columns:1fr}
.h-name{font-size:19px}
.h-ico{width:34px;height:34px}
.h-ico i{font-size:19px}
.step-l{font-size:11px;letter-spacing:.2px}
.wrap{padding:18px calc(14px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px))}
.wrap.at-success{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.s-title{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ── FOCUS STATES ── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.svc:focus-visible{outline-offset:0;border-radius:16px}
.addon:focus-visible{outline-offset:0;border-radius:12px}
.slot:focus-visible{outline-offset:0;border-radius:12px}
.cal-d:focus-visible{outline-offset:0;border-radius:8px}
.cal-nav:focus-visible{outline-offset:0;border-radius:10px}
.btn:focus-visible{outline-offset:0;border-radius:16px}
.pay-opt:focus-visible{outline-offset:0;border-radius:12px}
/* ── PIED LEGAL ── */
/* Le salon : ou et quand, en clair au-dessus des mentions. Meme discretion que
le pave legal, un cran plus lisible : c'est une information, pas une mention. */
#pied-salon{
margin-top:34px;padding-top:20px;border-top:1px solid var(--border);
display:flex;flex-direction:column;align-items:center;gap:6px;
text-align:center;font-size:12px;line-height:1.5;color:var(--text-3);
}
#pied-salon .ps-quoi{color:var(--text-2);font-weight:600;letter-spacing:.2px}
#pied-salon address{font-style:normal}
#pied-salon a{color:inherit;text-decoration:none}
#pied-salon a:hover{color:var(--text)}
#pied-salon i{font-size:13px;margin-right:5px;vertical-align:-1px;color:var(--gold)}
/* Lien vers /barbier-lannion : souligné, pour qu'on le reconnaisse comme un lien
au milieu de lignes d'information. */
#pied-salon .ps-plus{margin-top:4px}
#pied-salon .ps-plus a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border-gold);text-underline-offset:3px}
#pied-salon .ps-plus a:hover{color:var(--text);text-decoration-color:var(--gold)}
#pied-legal{
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:14px;padding:4px 0;
font-size:11px;letter-spacing:.3px;color:var(--text-4);
}
#pied-legal a{color:var(--text-3);text-decoration:none}
/* La regle d'annulation, a l'endroit ou elle engage : juste avant le bouton
qui valide, et non repliee au fond de la page. */
.note-annulation{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;color:var(--text-3)}
.note-annulation i{font-size:15px;color:var(--gold);flex-shrink:0}
/* ── CONSENT CHECKBOX ── */
.consent-label{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:10px}
.consent-label input[type="checkbox"]{margin-top:3px;flex-shrink:0;accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.consent-label span{font-size:12px;color:var(--text-2);line-height:1.6}
.consent-label a{color:var(--gold);text-decoration:underline}
/* ── SURVOL ──
Un telephone n'a pas de curseur : apres un appui, l'element garde l'etat de
survol jusqu'au prochain appui ailleurs — une carte reste doree, un bouton
reste souleve. Le survol est donc reserve aux appareils qui pointent vraiment.
Les etats de selection (.sel) et le focus clavier, eux, restent dehors. */
@media (hover:hover) and (pointer:fine){
.h-ico:hover{background:#272114;border-color:rgba(218,177,73,.38)}
.h-account:hover{background:#272114;border-color:rgba(218,177,73,.38)}
.svc:hover .svc-img{transform:scale(1.04)}
.cal-nav:hover{border-color:var(--gold);color:var(--gold);background:#16140F}
.slot:hover{border-color:var(--gold);color:var(--gold);background:#16140F}
.slots-full-link:hover{box-shadow:none}
.btn-gold:hover:not(:disabled){transform:translateY(-1px);box-shadow:none}
.btn-out:hover{border-color:var(--gold);color:var(--gold)}
.btn-creme:hover{background:#fff;color:#0A0A0A;border-color:transparent}
.btn-ghost:hover{background:#181610;border-color:var(--gold)}
.btn-danger:hover{background:#1D1111;border-color:rgba(224,80,80,.45)}
.svc:hover{border-color:var(--gold);background:#181610}
.addon:hover{border-color:var(--gold);background:#181610}
.pay-opt:hover{border-color:var(--gold);background:#16140F}
.recap-map:hover{background:#1F1B11;outline:none}
}
/* ════════════════════════════════════════════════════════
TABLETTE, ORDINATEUR, TELEPHONE COUCHE
════════════════════════════════════════════════════════
La page est dessinee pour un telephone tenu a la main : une colonne de
560 px, un bouton pleine largeur, une barre d'etapes flottante en bas.
Telle quelle sur un iPad ou un 27 pouces, elle reste ce meme ruban etroit
au milieu du vide — le fond anime y occupe plus de place que le contenu.
Ces regles n'ajoutent aucun element : elles redistribuent ceux qui
existent des qu'il y a de la place, et toutes sont en min-width — le
telephone n'en lit aucune.
>= 768 tablette portrait — colonne a 720, options sur deux colonnes
>= 1024 iPad paysage et ordinateur — colonne a 1000, calendrier et
creneaux cote a cote, formulaires ramenes a 600
>= 1440 la colonne cesse de grandir
Puis un cas a part : le telephone couche, ou c'est la hauteur qui manque
et pas la largeur. */
/* ── VIGNETTE LARGE ──
Des que la carte depasse la largeur d'une main, la photo carree prend les
trois quarts de sa hauteur et le prix se retrouve relegue tout en bas. Ce
palier arrive avant celui de la tablette : une fenetre de navigateur a
demi ouverte tombe entre les deux. */
@media(min-width:600px){
.svc-img-wrap{aspect-ratio:1.9/1}
.svc-body{padding:15px 16px}
.svc-name{font-size:15px}
.svc-price{font-size:20px}
}
/* ── UNE SEULE LARGEUR ──
L'en-tete, la colonne de contenu et la barre d'etapes partagent la meme
largeur, et les cartes qu'elles encadrent aussi. La version precedente
plafonnait les deux bulles a 640 pendant que le contenu montait a 1000 et
qu'une carte de rendez-vous restait a 440 : trois largeurs empilees sur le
meme ecran, et la page paraissait mal montee. Ici une seule valeur, et
24 px de marge de chaque cote — sur une tablette elle prend donc tout
l'ecran, sur un ordinateur elle s'arrete avant de rendre les lignes
illisibles. */
@media(min-width:768px){
body>canvas{opacity:.72}
.header{padding:calc(env(safe-area-inset-top,0px) + 8px) calc(24px + env(safe-area-inset-right,0px)) 8px calc(24px + env(safe-area-inset-left,0px))}
.h-bar{max-width:920px}
.steps{
left:calc(24px + env(safe-area-inset-left,0px));
right:calc(24px + env(safe-area-inset-right,0px));
max-width:920px;
}
/* 968 = 920 de contenu + les 24 px de marge interne de chaque cote : le bord
du texte tombe exactement sous le bord de la bulle. */
.wrap{max-width:968px;padding:20px calc(24px + env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px))}
.h-name{font-size:24px}
.s-title{font-size:22px;margin-bottom:18px}
.section-h{font-size:14.5px;margin:22px 0 12px}
/* ── REGLE DES RANGEES ──
Tout ce qui se range en rangee — prestations, options, boutons — est en
flex avec retour a la ligne et une base commune, jamais en grille a
nombre de colonnes fixe. C'est la seule facon d'etre juste quel que soit
le nombre d'elements : le navigateur en met autant qu'il en tient par
ligne, et ceux de la derniere ligne s'etirent pour la remplir. A quatre
ils font quatre colonnes, a trois ils en font trois, a cinq il y en a
trois puis deux moities — jamais un element seul a gauche avec un trou a
sa droite.
Ne pas revenir a grid-template-columns + :nth-child ici : la regle de
l'orpheline suppose un nombre de colonnes connu, et elle compte des
enfants que display:none a deja retires de la mise en page. */
.svc-list,.addons,.rdv-actions,.my-rdv-actions{
display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;
}
.svc-list>*,.addons>*,.rdv-actions>.btn,.my-rdv-actions>.btn{flex:1 1 240px;min-width:0}
/* Ce qui n'est pas un bouton coupe la rangee : un trait de separation ou une
demande de confirmation n'a rien a faire a cote d'une action. */
.rdv-actions>.rdv-actions-sep,.rdv-actions>.cancel-dialog,
.my-rdv-actions>.rdv-actions-sep,.my-rdv-actions>.cancel-dialog{flex:1 1 100%}
.svc-list>.svc:last-child:nth-child(odd){grid-column:auto}
.addon{padding:13px 15px}
/* Sur ordinateur les photos sources sont carrees (~480 px) : les couper a
2.3/1 sous 185 px n'en gardait qu'une bande, et la page restait vide.
Elles s'affichent en entier, carrees, et la liste prend la place qu'elle
merite. */
.svc-img-wrap{aspect-ratio:1/1}
.svc-body{padding:17px 18px;gap:6px}
.svc-name{font-size:16.5px}
.svc-price{font-size:22px}
.svc-dur{font-size:12px}
/* Sans cela, sept colonnes sur 900 px donnent des cases de 120 px de haut :
un calendrier qui remplit l'ecran pour trente chiffres. */
.cal-card{padding:20px}
.cal-month{font-size:17px}
.cal-nav{width:38px;height:38px}
.cal-dn{font-size:10.5px}
.cal-d{aspect-ratio:auto;height:52px;min-height:0;font-size:14px;border-radius:10px}
.recap{padding:18px}
.recap-row{font-size:14px}
/* Les cartes cessent d'etre plus etroites que la barre qui les surplombe.
Pour que la largeur gagnee serve a quelque chose, leurs lignes se rangent
sur deux colonnes plutot que de s'etirer avec un vide a droite. */
.success-recap,.my-rdv-card,.rdv-actions{max-width:none;width:100%}
.my-rdv{--bloc:none}
.fid-slots{max-width:340px}
/* Sur une grande largeur, le moment et le detail se mettent cote a cote. */
.my-rdv-card{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding:20px 22px}
.my-rdv-card .mr-detail{flex:1 1 220px;margin:0;padding:0;border:0}
.my-rdv-card .mr-pour,.my-rdv-card .mr-recurrent,.my-rdv-card .mr-decalage,.my-rdv-card .mr-card-actions{flex:1 1 100%;margin-top:0;margin-bottom:0}
/* Le padding lateral de la confirmation rentrait ses cartes de 16 px : elles
ne tombaient plus sous le bord de la bulle comme tout le reste. */
.success{padding:32px 0}
.success-recap{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;padding:18px 20px}
.rdv-actions .btn,.my-rdv-actions .btn{margin-top:0}
/* Etape 3 — deux champs par ligne : un « Telephone » de 900 px de large ne
se remplit pas mieux qu'un de 400, il se lit juste moins bien. */
#s3.active{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
#s3>.s-title,#s3>.recap,#s3>.fields-row,#s3>.qui,
#s3>.field:last-of-type,#s3>.btn{grid-column:1/-1}
}
/* ── ORDINATEUR ET iPAD PAYSAGE ── */
@media(min-width:1024px){
/* Sur un ecran d'ordinateur le fond occupe les deux tiers de la surface :
il est attenue une seconde fois, et la lueur ramenee au centre, derriere
la colonne, plutot que dans deux coins opposes. */
body>canvas{opacity:.55}
body::after{
display:none;
}
.wrap{padding-top:24px}
.s-title{font-size:23px}
/* ETAPE 2 — le calendrier glisse pour laisser entrer les heures.
Les deux colonnes existent des l'arrivee sur l'etape, mais la seconde est
a 0fr : le calendrier occupe toute la largeur et s'y tient centre. Quand
un jour est choisi, selectDay() pose .slots-on, la seconde colonne s'ouvre
a 1fr et la transition fait glisser le calendrier vers la gauche pendant
que les heures se decouvrent. Sans elle, les deux sautaient d'un coup a
leur place : on croyait a un defaut d'affichage.
Les grandeurs en fr s'interpolent — c'est ce qui rend grid-template-columns
animable ; le gap est anime avec, sinon 24 px de vide restent a droite du
calendrier avant meme qu'il y ait quoi que ce soit a leur droite. */
#s2.active{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,0fr);
column-gap:0;
align-items:start;
/* Une courbe qui depasse legerement puis revient : la colonne s'ouvre
comme on ecarte un rideau, au lieu de glisser a vitesse constante. */
transition:grid-template-columns .6s cubic-bezier(.4,0,.2,1),
column-gap .6s cubic-bezier(.4,0,.2,1);
}
#s2.slots-on{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
/* .vient-d-ouvrir n'est posee QUE lorsque la colonne s'ouvre pour la
premiere fois (selectDay). Changer de jour ensuite ne doit pas rejouer le
glissement ni faire attendre une demi-seconde avant de voir les heures. */
#s2.vient-d-ouvrir>.cal-card{animation:calSeTasse .6s cubic-bezier(.4,0,.2,1) both}
@keyframes calSeTasse{
0%{transform:scale(1)}
38%{transform:scale(.972)}
100%{transform:scale(1)}
}
/* Les heures n'entrent qu'une fois le calendrier arrive : avant, elles se
dessinaient dans une colonne encore en train de s'ouvrir et la mise en
page paraissait coincee. */
#s2>#slots-wrap,#s2>#btn-step2{transition:opacity .28s ease}
#s2.vient-d-ouvrir>#btn-step2{transition-delay:.42s}
/* Le bloc des heures passe de display:none a display:block dans la meme
image que le changement d opacite : une transition ne demarre pas dans ce
cas, l element apparait d un coup. Une animation, si. Sans elle, le titre
« Creneaux libres » se posait dans une colonne encore en train de s ouvrir. */
#s2.vient-d-ouvrir>#slots-wrap{animation:heuresEntrent .34s var(--ease) .38s both}
@keyframes heuresEntrent{from{opacity:0}to{opacity:1}}
/* Le retard commun des heures ne vaut que la ou le calendrier glisse : sur
un telephone la colonne ne bouge pas, rien ne justifierait d attendre. */
#s2.vient-d-ouvrir .slot{--retard:440ms}
#s2>.s-title{grid-column:1/-1;grid-row:1}
/* Le calendrier garde la meme largeur maximale dans les deux etats : seule
la colonne qui le porte retrecit, donc il n'a rien a rattraper une fois
l'animation finie. */
#s2>.cal-card{grid-column:1;grid-row:2;width:100%;max-width:560px;margin:0 auto}
#s2>#slots-wrap{grid-column:2;grid-row:2;overflow:hidden}
/* Chaque bouton fait la largeur de ce qu'il commande : Retour sous le
calendrier, Continuer sous les heures, tous deux decolles de la colonne
qu'ils terminent. Ils gardent leur ordre dans le balisage — l'action
principale reste la premiere au clavier. */
#s2>.btn-out{grid-column:1;grid-row:3;width:100%;max-width:560px;margin:18px auto 0}
#s2>#btn-step2{grid-column:2;grid-row:3;width:100%;margin-top:18px;overflow:hidden}
/* Tant qu'aucun jour n'est choisi, la colonne de droite est fermee : ce qui
s'y trouve n'a pas a transparaitre dans un filet de quelques pixels. Le
bouton y est de toute facon desactive, il ne peut pas etre atteint au
clavier pendant ce temps. */
#s2:not(.slots-on)>#slots-wrap,
#s2:not(.slots-on)>#btn-step2{opacity:0}
#s2.slots-on .slots{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}
/* ── GRAND ECRAN ──
La colonne grandit encore un peu, d'un seul tenant : les bulles, le contenu
et les cartes ensemble. Passe cette valeur une ligne se lit moins bien, pas
mieux, et ce qui reste est de la marge. */
@media(min-width:1440px){
.h-bar,.steps{max-width:1040px}
.wrap{max-width:1088px}
}
/* ── TELEPHONE COUCHE ──
Ici la largeur ne manque pas, c'est la hauteur : entre la bulle du haut, la
barre d'etapes du bas et une vignette carree de prestation, il ne restait
rien. Le seuil de 520 px de haut ne peut pas attraper un iPad couche, qui
fait 768 px au minimum. */
@media(orientation:landscape) and (max-height:520px){
.header{padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:6px}
.h-bar{min-height:40px}
.h-name{font-size:19px}
.wrap{padding-top:8px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.s-title{font-size:17px;margin-bottom:10px}
.section-h{margin:12px 0 8px}
/* Une vignette carree de prestation prendrait toute la hauteur utile. */
.svc-img-wrap{aspect-ratio:3.2/1}
.addons{grid-template-columns:1fr 1fr;gap:8px}
.cal-d{aspect-ratio:auto;height:36px;min-height:0}
.success{padding:12px}
.success-icon{width:62px;height:62px;font-size:30px;margin-bottom:12px}
.success h2{font-size:19px}
.steps{padding:4px 6px}
.step{min-height:38px;gap:1px}
.step i{font-size:16px}
.steps-voile{height:calc(58px + env(safe-area-inset-bottom,0px));background:#060606}
}