/** * Roue de la fortune — page publique. * * Habillée par la charte du RESTAURATEUR : toutes les couleurs et polices * viennent des variables `--titre`, `--text`, `--bandeau`, `--background`, * `--text_dans_bandeau`, `--police_titre` et `--police_texte`, injectées côté * serveur par `fortune-wheel/index.php`. Aucune couleur de marque WiicMenu ici. * * Les valeurs de repli des `var()` servent au cas où un restaurant aurait un * thème incomplet en base — la page reste lisible, en neutre. * * Portée : tout est préfixé `.fw-`. La page charge `customStyle.css` pour ses * 44 @font-face et ses conventions ; un sélecteur d'élément nu s'y heurterait. */ .fw-page { margin: 0; padding: 0; background: var(--background, #fff); color: var(--text, #333); font-family: var(--police_texte, system-ui, -apple-system, sans-serif); font-size: var(--text_font_size, 16px); line-height: 1.55; min-height: 100vh; } .fw-page.fw-modale-ouverte { overflow: hidden; } /* ⚠️ NEUTRALISER `[hidden]`, SANS QUOI TOUTE LA PAGE S'EMPILE. * * La règle `[hidden] { display: none }` du navigateur n'a AUCUNE spécificité : * n'importe quelle règle d'auteur qui pose un `display` la bat. Or les écrans * sont des `.fw-carte { display: flex }` et le volet un * `.fw-volet { display: flex }` — les six écrans s'affichaient donc à la suite, * et le volet, en `position: fixed; inset: 0`, recouvrait le tout. * * C'est le piège déjà payé sur `popup-plat-edition.css` (cf. CLAUDE.md), et la * raison pour laquelle `.fw-modale[hidden]` existait déjà plus bas : cette * règle-ci le généralise à tout ce que le JS montre et masque. */ .fw-page [hidden] { display: none !important; } /* ⚠️ `box-sizing: border-box`, SANS QUOI TOUT CHAMP EN `width: 100%` DÉBORDE. * * Cette page ne charge aucun socle CSS qui le pose : `customStyle.css` ne le * déclare pas globalement. Les champs du formulaire, en `width: 100%` avec * 13px de padding et 1px de bordure, sortaient donc de 28px hors de leur * conteneur — assez pour que le bord droit dépasse celui de la pop-up. * * Posé sur toute la page plutôt que sur les seuls `.fw-input` : le prochain * élément en `width: 100%` avec du padding aurait le même défaut, et rien ne * l'aurait signalé. */ .fw-page, .fw-page *, .fw-page *::before, .fw-page *::after { box-sizing: border-box; } /* ─── Barre ───────────────────────────────────────────────────────────────── */ .fw-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--bandeau, #94D8A8); color: var(--text_dans_bandeau, #fff); min-height: 56px; } .fw-topbar__nom { font-family: var(--police_titre, Georgia, serif); font-size: 17px; font-weight: 700; color: var(--text_dans_bandeau, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Seul élément compressible de la barre : c'est lui qui cède quand la place manque, et son ellipsis absorbe la coupe. Sans `min-width: 0`, un enfant flex refuse de descendre sous la largeur de son contenu et pousserait le sélecteur de langue hors de l'écran. */ min-width: 0; } /* Groupe de droite : le sélecteur de langue seul. `flex: none` pour qu'il ne se comprime jamais — un drapeau écrasé devient illisible. */ .fw-topbar__actions { display: flex; align-items: center; gap: 12px; flex: none; } /* Le burger est celui d'`offre.php` : déclencheur `.navbar-mobile__toggler` habillé par `customStyle.css`, panneau `#main-nav` monté par `hcMobileNav` et habillé par `vendor/hcmobilenav/demo.css` + `css/index-menu-burger.css`. Rien à styler ici — et surtout rien à redéfinir, sous peine de faire diverger les deux pages que le visiteur enchaîne. */ /* ─── Sélecteur de langue ───────────────────────────────────────────────────── Balisage conventionnel de `WiicI18n.monterSelecteur`. La couleur suit `--text_dans_bandeau` et n'est PAS figée à blanc : environ un quart des restaurants ont un bandeau clair, sur lequel un chevron blanc disparaît. Piège déjà corrigé sur les barres de navigation des autres pages publiques. */ .lang-switcher { position: relative; flex: none; } .lang-switcher__toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; padding: 6px 8px; color: var(--text_dans_bandeau, #fff); font-family: inherit; font-size: 16px; line-height: 1; } .lang-switcher__chevron { font-size: 11px; } .lang-switcher__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: none; margin: 0; padding: 6px 0; list-style: none; min-width: 178px; max-height: 60vh; overflow-y: auto; background: var(--background, #fff); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .lang-switcher__menu.show { display: block; } .lang-switcher__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--text, #222); text-align: start; } .lang-switcher__item:hover, .lang-switcher__item:focus-visible { background: color-mix(in srgb, var(--text, #222) 9%, transparent); } /* En lecture droite-à-gauche, le menu s'ancre à l'autre bord. */ [dir="rtl"] .lang-switcher__menu { right: auto; left: 0; } /* ─── Couverture ──────────────────────────────────────────────────────────── */ .fw-couverture { height: 150px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 720px) { .fw-couverture { height: 210px; } } /* ─── Structure ───────────────────────────────────────────────────────────── */ .fw-main { max-width: 560px; margin: 0 auto; padding: 18px 16px 60px; } /* ⚠️ FOND DU RESTAURATEUR, PAS DU BLANC. * * Les couleurs de titre et de texte sont choisies dans `modification.php` pour * être lisibles sur LA COULEUR DE FOND qu'il a réglée juste à côté — pas sur du * blanc. Une carte blanche en dur rendait donc invisibles les chartes aux * polices très claires. `.plat` sur le menu fait exactement pareil : * `background-color: var(--background)`. * * L'ombre suit `--box_shadow_color`, le triplet rvb de la couleur de texte, * comme sur le menu : une ombre noire fixe disparaît sur un thème sombre. */ .fw-carte { background: var(--background, #fff); border-radius: 16px; padding: 26px 22px; box-shadow: 0 6px 26px rgba(var(--box_shadow_color, 0, 0, 0), .17); display: flex; flex-direction: column; gap: 16px; } .fw-ecran--centre { align-items: center; text-align: center; } /* ─── La roue en fond de l'écran d'accueil ───────────────────────────────────── * * Une roue agrandie et rognée, qui tourne derrière le haut de la carte. Elle * remplace le pictogramme 🎡 : le visiteur arrive par un QR code, sans contexte, * et l'objet dit mieux que l'emoji ce qu'on lui propose. * * ⚠️ LE MOYEU EST SUR LE BORD, PAS SUR LE COIN — ET C'EST LA DONNÉE QUI L'IMPOSE. * * Un moyeu posé sur le coin ne laisse voir qu'un QUADRANT, donc un quart des * parts. Or 476 des 558 restaurants qui ont configuré leur roue ont CINQ LOTS * OU MOINS (médiane : 3) : le quadrant ne leur montrait qu'une seule part, * c'est-à-dire un aplat de couleur — vérifié en rendu sur `Le grand café`, * 4 lots, où la bande était un rectangle jaune uni. * * Sur le bord droit, au milieu de la bande, c'est une DEMI-roue qui passe : * deux parts au minimum, le moyeu, et l'arc du bord à gauche. Le cadrage * reste très serré — environ un quart du disque est réellement visible — mais * ce qu'on en voit se lit comme une roue à n'importe quel nombre de lots. * * ⚠️ DEUX CALQUES, PAS UN SEUL DÉGRADÉ D'OPACITÉ. * * `.fw-roue-fond__bande` montre la roue EN PLEINE COULEUR, sur une hauteur où * aucun texte ne passe — d'où le `padding-top` de la carte, qui lui réserve * la place. `.fw-roue-fond__trace` la prolonge sur toute la carte, très * atténuée, pour qu'elle ne s'arrête pas net sous le titre. * * Un masque en dégradé aurait fait la même chose avec un calque de moins, * mais il échoue mal : un moteur qui ignore `mask-image` laisserait la roue * en pleine couleur SOUS LE TEXTE, donc illisible. Ici chaque calque est * borné par sa propre boîte, et le pire des cas reste lisible. * * ⚠️ L'OPACITÉ DE LA TRACE EST UN SEUIL MESURÉ, PAS UN GOÛT. Sur un thème * sombre (`Le grand café`, texte #e1d3b0 sur fond #674741), le contraste ne * vaut déjà que 5,3:1 SANS rien derrière. Mesuré sur ce thème : 24 % le * faisaient tomber à 3,4:1 et 9 % à 4,44:1, tous deux sous le seuil AA de * 4,5:1 ; 7 % le laissent à 4,6:1. Ne pas la remonter sans remesurer — et * noter que le pire fond n'est pas une part colorée mais le FILET CLAIR * entre deux parts, qui éclaircit davantage que le jaune. * * Les couleurs viennent de `WiicRoue.degradeConique()` — cf. le commentaire du * gabarit : aucune n'est écrite ici, sous peine de voir le fond et la roue * qu'on lance diverger. */ .fw-accueil { /* Hauteur de la bande, et donc hauteur d'axe du moyeu (la moitié). Déclarée une fois ici : les trois règles qui en dépendent ne peuvent pas dériver. */ --fw-bande: 170px; position: relative; /* C'est la carte qui rogne la roue, et ses coins arrondis avec : sans ça elle déborderait sur la page et ne se lirait plus comme un fond. */ overflow: hidden; /* La place réservée à la bande. Elle remplace le pictogramme (42px, plus les 16px de `gap`) qu'elle a fait disparaître : le coût net en hauteur est d'une quarantaine de pixels, et le bouton reste au-dessus de la ligne de flottaison sur un téléphone. */ padding-top: calc(var(--fw-bande) + 18px); } /* Le contenu passe AU-DESSUS du fond. Posé sur les enfants plutôt qu'un `z-index: -1` sur le fond : un indice négatif l'enverrait DERRIÈRE le fond de la carte, où il serait invisible. */ .fw-accueil > *:not(.fw-roue-fond) { position: relative; z-index: 1; } .fw-roue-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .fw-roue-fond__bande { position: absolute; top: 0; left: 0; right: 0; height: var(--fw-bande); overflow: hidden; /* Le bord bas s'éteint au lieu de trancher : sans ça la bande se lit comme une photo recadrée posée sur la carte, pas comme un fond. Si le moteur ignore le masque, on retombe simplement sur l'arête franche. */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%); } .fw-roue-fond__trace { position: absolute; inset: 0; opacity: .07; } /* La bande porte un CANVAS, la trace un dégradé conique — cf. le commentaire du gabarit. Le canvas est le seul des deux à savoir écrire les noms des lots ; à 7 % d'opacité la trace n'en aurait rien montré, et un second canvas aurait doublé le tampon pour un décor illisible. */ .fw-roue-fond__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; /* Sans quoi la roue décrirait une orbite au lieu de tourner sur elle-même — même ligne que sur `.fw-roue__canvas`. */ transform-origin: 50% 50%; animation: fw-roue-fond-tourne 30s linear infinite; } /* ⚠️ LE MOYEU EST À GAUCHE, ET CE N'EST PAS UN CHOIX ESTHÉTIQUE : C'EST LE SENS DE LECTURE DES LIBELLÉS. `dessiner()` écrit chaque nom LE LONG DE SON RAYON, lu de l'intérieur vers le bord — c'est la disposition de toutes les roues de loterie. Conséquence : sur la moitié DROITE du disque le texte est à l'endroit, sur la moitié gauche il est à l'envers. Une vraie roue montre les deux et l'œil l'accepte ; ici on n'en voit qu'une moitié, toujours la même. Avec le moyeu à droite, les trois ou quatre libellés visibles sortaient donc TOUS renversés — constaté en rendu. Le moyeu à gauche, la moitié visible est la droite, et tout se lit. ⚠️ Pour la même raison, cette roue NE SE RETOURNE PAS en arabe ni en hébreu, contrairement au reste de la page : la miroiter remettrait les libellés à l'envers. C'est un décor, et un décor lisible vaut mieux qu'un décor symétrique. La bande et la trace ayant la MÊME largeur et la même origine (la carte), le pourcentage et le `translate` y placent le disque au même endroit : les deux calques se superposent exactement, et la trace prolonge la bande sans décrochement. */ .fw-roue-fond__cadre { position: absolute; top: 0; left: 0; /* Diamètre = 1,12 × la largeur de la carte, donc un rayon de 0,56 × : l'arc du bord reste dans le champ à droite de la bande, ce qui referme la forme. ⚠️ Ce rapport se règle AVEC la hauteur de bande, pas indépendamment : c'est lui qui fixe la distance des libellés au moyeu, donc l'ouverture angulaire dans laquelle ils restent visibles. Grossir le disque sans grandir la bande fait ressortir les noms du cadre. */ width: 112%; aspect-ratio: 1 / 1; transform: translate(-50%, calc(-50% + var(--fw-bande) / 2)); } .fw-roue-fond__disque { position: absolute; /* 4px et non 0 : `dessiner()` réserve exactement cette marge au canvas (`rayon = centre - 4`). Les deux calques se superposant dans la bande, un disque plus large y laisserait dépasser un liseré de couleur. */ inset: 4px; border-radius: 50%; background: var(--fw-roue-fond, none); /* Contour sombre, même valeur que `WiicRoue.FILET_FOND` — deux définitions voisines auraient fini par diverger. Sous la bande, où le canvas est rogné, c'est la seule chose qui ferme le disque : sur une roue à trois ou quatre lots il n'y a qu'une ou deux parts, et sans cette arête elles se liraient comme un aplat de couleur posé là. */ box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .7); /* Lente : c'est un fond, pas un manège. À ce rayon, un tour en 30 s suffit largement à ce que le mouvement se remarque. Les deux calques partagent la même animation et sont révélés dans la même image : ils tournent donc ensemble, sans qu'il faille les synchroniser. */ animation: fw-roue-fond-tourne 30s linear infinite; } /* Le curseur qui désigne la part gagnante, comme sur la vraie roue. * * ⚠️ IL EST À 3 HEURES, PAS EN HAUT, et c'est la géométrie qui l'impose : le * moyeu étant sur le bord gauche, le sommet du disque est très au-dessus de * la carte (le centre est à 52px du haut pour un rayon de plus de 200) — un * curseur en haut ne serait jamais visible. Le seul point du bord qui passe * dans la bande est celui de droite, à la hauteur du moyeu. * * Il ne désigne donc pas la part 0, contrairement à celui de `.fw-roue`. Sans * conséquence : cette roue-ci est décorative, elle tourne en continu et * n'annonce aucun résultat. Ne pas s'en servir comme repère de calcul. * * Mêmes proportions et même couleur que `.fw-roue__pointeur` — 14px de demi-base, * 24px de hauteur, débord de 8px — pour que le visiteur retrouve le même objet * trois écrans plus loin. L'ombre portée est un peu plus marquée : ici la pointe * passe sur les parts, dont certaines peuvent être proches de `--titre`. */ .fw-roue-fond__curseur { position: absolute; top: 50%; right: -8px; transform: translateY(-50%); z-index: 2; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-right: 24px solid var(--titre, #1a1a1a); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)); } @keyframes fw-roue-fond-tourne { to { transform: rotate(360deg); } } /* Qui a demandé le calme ne reçoit pas une roue qui tourne en permanence derrière le texte qu'il est en train de lire. Même règle que les confettis et que les quatre animations du bandeau d'`offre.php`. */ @media (prefers-reduced-motion: reduce) { .fw-roue-fond__disque, .fw-roue-fond__canvas { animation: none; } } } .fw-pictogramme { font-size: 42px; line-height: 1; text-align: center; } .fw-titre { font-family: var(--police_titre, Georgia, serif); font-size: var(--title_font_size, 22px); line-height: 1.25; color: var(--titre, #1a1a1a); margin: 0; text-align: center; text-wrap: balance; } .fw-sous-titre { font-family: var(--police_titre, Georgia, serif); font-size: 15px; color: var(--titre, #1a1a1a); margin: 0 0 8px; } .fw-texte { margin: 0; text-align: center; color: var(--text, #444); } .fw-texte--petit { font-size: 13.5px; opacity: .82; } .fw-erreur { margin: 0; padding: 10px 12px; border-radius: 9px; background: #fbeeec; color: #8d382d; font-size: 13.5px; text-align: center; } .fw-lien { align-self: center; color: var(--titre, #1a1a1a); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; } /* ─── Avertissement du passage par Google ─────────────────────────────────── */ /* ⚠️ Les trois valeurs sont EN DUR et reprises du triplet d'alerte des emails (`EMAIL_COLOR_WARNING` et ses deux fonds). Ce sont les seules couleurs de cette page à ne pas dériver de la charte : un avertissement peint aux couleurs du restaurant se lit comme une décoration, pas comme une alerte. Même arbitrage que celui déjà inscrit pour les emails. */ .fw-avertissement { width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 50%; background: #fffbeb; border: 2px solid #fde68a; color: #b45309; display: flex; align-items: center; justify-content: center; /* Pas d'animation : cette page fait déjà tourner une roue et tirer des confettis. Un pictogramme qui clignote en plus se lirait comme du décor, et demanderait une garde `prefers-reduced-motion` pour rien. */ } /* ─── Étapes du passage par Google ────────────────────────────────────────── */ .fw-etapes { list-style: none; /* `
    ` conserve son retrait par défaut et sa numérotation native : la première est remplacée par nos propres pastilles, la seconde masquée. La balise reste un `
      ` parce que l'ordre a un sens — un lecteur d'écran doit l'entendre. */ margin: 4px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 15px; text-align: start; } .fw-etape { display: flex; align-items: flex-start; gap: 12px; } /* Pastille numérotée, aux couleurs du bandeau — la seule surface colorée de la pop-up, donc ce que l'œil suit pour dérouler les trois étapes. */ .fw-etape__num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bandeau, #94D8A8); color: var(--text_dans_bandeau, #fff); /* ⚠️ Liseré dérivé du TEXTE, pas du bandeau. Environ un quart des restaurants ont un bandeau clair — sur le resto 24 il est blanc, et la pastille se fondait dans la pop-up : il ne restait qu'un chiffre flottant. Sur une pastille colorée ce liseré ne se voit pas ; sur une pastille claire, c'est lui qui dessine le cercle. Même piège que les bordures de champ, déjà corrigé plus haut dans cette feuille. */ border: 1px solid color-mix(in srgb, var(--text, #333) 20%, transparent); font-family: var(--police_titre, Georgia, serif); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; /* Aligne la pastille sur la PREMIÈRE ligne du texte plutôt que sur le haut de la boîte : sur une étape de trois lignes, un centrage vertical la ferait flotter au milieu. */ margin-top: 1px; } .fw-etape__txt { color: var(--text, #333); font-size: 15px; line-height: 1.45; } /* Le pictogramme suit le texte dans le fil, avec un espace insécable de fait : `vertical-align: middle` le pose sur la ligne de base du mot qui le précède, comme le ferait une émoji. */ .fw-etape__icone { vertical-align: middle; margin-inline-start: 5px; /* Le trait prend la couleur du texte : sur un thème sombre comme sur un thème clair, le pictogramme reste lisible sans valeur en dur. */ color: var(--text, #333); } /* ─── Liste des lots ──────────────────────────────────────────────────────── */ .fw-lots { border-top: 1px solid var(--line, #e6e6e6); border-bottom: 1px solid var(--line, #e6e6e6); padding: 16px 0; } /* Classement vertical, du lot le plus RARE au plus courant : le n°1 est le plus difficile à décrocher. L'ordre est décidé côté serveur (cf. `index.php`), le client ne reçoit aucune probabilité. */ .fw-lots__liste { list-style: none; /* le rang est rendu à la main, pas par la puce native */ margin: 0; padding: 0; display: flex; flex-direction: column; /* Interligne serré : la liste peut compter jusqu'à 20 lots, et chaque ligne porte déjà son fond et son filet — elles restent distinctes sans qu'il faille les écarter. C'est la hauteur totale qui décide si le bouton reste visible sans défiler. Le rang est écrit dans le balisage plutôt que par `counter-reset` : il doit rester lisible même si la feuille ne charge pas. */ gap: 1px; } .fw-lot-ligne { display: flex; align-items: center; gap: 11px; padding: 2px 2px; border-radius: 11px; background: color-mix(in srgb, var(--bandeau, #94D8A8) 12%, var(--background, #fff)); border: 1px solid color-mix(in srgb, var(--bandeau, #94D8A8) 28%, var(--background, #fff)); font-size: 15.5px; color: var(--text, #333); /* `start` et non `left` : la liste suit le sens de lecture en arabe et en hébreu, où le rang doit rester du côté du début de ligne. */ text-align: start; } .fw-lot-ligne__rang { flex: none; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; font-weight: 700; /* Les chiffres s'alignent en colonne d'une ligne à l'autre. */ font-variant-numeric: tabular-nums; background: var(--background, #fff); color: var(--titre, #1a1a1a); border: 1px solid color-mix(in srgb, var(--bandeau, #94D8A8) 40%, var(--background, #fff)); } .fw-lot-ligne__nom { flex: 1; min-width: 0; /* sans quoi un nom long déborde de la carte */ line-height: 1.35; } /* Collée au dernier mot du nom. `margin-inline-start` et non `margin-left` : en arabe et en hébreu la couronne doit se placer de l'autre côté. */ .fw-lot-ligne__couronne { margin-inline-start: 5px; font-size: 16px; /* `white-space: nowrap` sur rien ne suffirait : c'est le nœud texte précédent qui décide du retour à la ligne. La couronne suit simplement le flux. */ } /* Le lot le plus rare : fond et pastille pleins, aux couleurs du bandeau. */ .fw-lot-ligne--premier { background: color-mix(in srgb, var(--bandeau, #94D8A8) 24%, var(--background, #fff)); border-color: var(--bandeau, #94D8A8); font-weight: 600; } .fw-lot-ligne--premier .fw-lot-ligne__rang { background: var(--bandeau, #94D8A8); color: var(--text_dans_bandeau, #fff); border-color: var(--bandeau, #94D8A8); } /* ─── Boutons ─────────────────────────────────────────────────────────────── */ /* Le bouton doit se lire comme une TOUCHE À ENFONCER, pas comme un bandeau de couleur. Sans relief, un rectangle plein aux couleurs du restaurant se confond avec un simple aplat décoratif et le visiteur ne pense pas à cliquer. D'où l'arête inférieure pleine, doublée d'une ombre portée. ⚠️ L'arête, le reflet et l'ombre sont CALCULÉS EN PHP (`fortuneWheelReliefBouton`) et injectés en variables. Ils l'étaient en `color-mix(… , #000)`, qui assombrit toujours : sur un bandeau déjà presque noir l'arête disparaissait, et sur un bandeau blanc le reflet blanc ne se voyait pas. Choisir le SENS du contraste demande de connaître la luminance, ce qu'aucune fonction CSS ne permet aujourd'hui. */ .fw-bouton { align-self: stretch; padding: 15px 22px; border: 0; border-radius: 12px; background: var(--bandeau, #94D8A8); color: var(--text_dans_bandeau, #fff); font-family: var(--police_titre, Georgia, serif); font-size: 16.5px; font-weight: 700; letter-spacing: .01em; cursor: pointer; /* Quatre couches, chacune pour une raison : 1. un rehaut clair en haut -> la surface paraît bombée, éclairée du dessus ; 2. un contour complet -> les CÔTÉS et le HAUT sont délimités. Sans lui, seule l'arête basse existait et le bouton se fondait dans la carte blanche sur trois côtés ; 3. l'arête basse -> l'épaisseur, celle qui s'enfonce au clic ; 4. l'ombre portée -> le décollement du fond. Toutes dérivent de `--bandeau` : aucune couleur étrangère à la charte. */ box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, var(--fw-bouton-rehaut, .3)), 0 0 0 2px var(--fw-bouton-arete, rgba(0, 0, 0, .45)), 0 4px 0 var(--fw-bouton-arete, rgba(0, 0, 0, .45)), 0 7px 16px rgba(var(--fw-bouton-ombre, 0, 0, 0), .22); transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; } /* Deux curseurs qui désignent le libellé, de part et d'autre — la forme du * curseur de la roue, reprise en petit : le même objet dit « c'est ici ». * * ⚠️ EN PSEUDO-ÉLÉMENTS, ET NON EN BALISES. Le libellé de ce bouton est posé par * `data-i18n`, qui écrit dans `textContent` : deux `` enfants seraient * effacés au premier changement de langue. Un `::before` et un `::after` * survivent, eux, à la réécriture du texte. * * ⚠️ BORDURES LOGIQUES (`border-inline-start/end`) ET NON `left`/`right`. Un * conteneur flex range ses items dans le SENS DE LECTURE : en arabe, le * `::before` passe à droite du texte. Avec des bordures physiques il y * pointerait vers l'extérieur ; les logiques se retournent avec lui, et la * paire de règles `[dir="rtl"]` devient inutile. * * `currentColor` plutôt que `--text_dans_bandeau` : les curseurs suivent alors * l'atténuation de `:disabled` et tout futur état du bouton sans y penser. */ .fw-bouton--curseurs { display: flex; align-items: center; justify-content: center; gap: 12px; } .fw-bouton--curseurs::before, .fw-bouton--curseurs::after { content: ''; /* Sans quoi la pointe s'écrase quand le libellé est long — « Participar en el juego » tient tout juste sur la largeur d'un téléphone. */ flex: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .fw-bouton--curseurs::before { border-inline-start: 11px solid currentColor; } .fw-bouton--curseurs::after { border-inline-end: 11px solid currentColor; } /* Le bouton du volet est un `` : il mène au webmail. `.fw-bouton` étant écrite pour un `