/* ========================================================================== CBR-Cloud — /service/serveurs-jeux/{slug} : la PAGE D’OFFRE D'après la maquette v2 de Dorian (serveurs-jeux-standalone v2.dc.html). Chargée après service-jeux.css : jetons, gardes, focus, boutons, badges, étiquettes, prix, accordéon et fiche viennent du socle. Ici, seulement ce qui n’existe que sur cette page. 1. Cadre et fil · 2. Fiche du jeu (colonne de gauche) · 3. Le choix (période, « Personnalisé », formules) · 4. Options et configuration libre 5. Configuration du serveur · 6. Récapitulatif · 7. Inclus et FAQ 8. Responsive (tout reflue sous 900 px ; barre fixe sur téléphone) Les montants ne se coupent jamais (.sj-prix, .sj-montant : nowrap). ========================================================================== */ .sj-offre { /* Le rouge d'un refus de commande : 6,1:1 sur son fond. */ --sj-erreur: #B42318; --sj-erreur-fond: #FEF3F2; --sj-erreur-bord: #FECDCA; /* L'ombre de la barre fixe du téléphone, portée vers le haut. */ --sj-ombre-haut: 0 -8px 22px rgba(17, 42, 79, .08); padding-block: 20px 64px; } /* ========================================================================== 1. Cadre ========================================================================== */ .sj-offre .sj-ariane ol { font-size: 13px; } /* Le dernier cran de la maquette, « Voir l’offre » : bleu, en gras. */ .sj-offre .sj-ariane .sj-ariane__courant { color: var(--sj-accent-fonce); font-weight: 700; } .sj-offre .sj-ariane li > span:not([aria-current]) { color: var(--sj-texte-2); } .sj-offre__info { margin-top: 14px; } /* LA FICHE EST EN DEUX MORCEAUX, UNE SEULE CARTE À L'ÉCRAN : le haut et le bas, l'un sous l'autre dans leur conteneur (.sj-fiche-colonne), à gauche ; le choix à droite. Sous 900 px, le conteneur s'efface et le choix passe entre les deux (voir Responsive) : c'est pour ce cas que haut et bas gardent leurs zones de grille. */ .sj-offre__grille { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: "fiche principal"; column-gap: 22px; align-items: start; } .sj-fiche-colonne { grid-area: fiche; min-width: 0; } .sj-fiche-jeu--haut { grid-area: haut; } .sj-fiche-jeu--bas { grid-area: bas; } .sj-offre__principal { grid-area: principal; display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* LA FICHE RESTE EN PLACE PENDANT QU'ON CHOISIT (Dorian, 27/09/2026) : elle colle sous la barre du site — et sous le bandeau du personnel quand il y en a un, dont header.js publie la hauteur —, à 20 px d'air. Plus haute que la fenêtre, elle défile d'elle-même, sous la souris ; ailleurs, c'est la page qui défile, et une fois la fiche au bout, la molette repasse à la page (pas d'overscroll-behavior: contain, qui donnait l'impression d'être bloqué). AU-DESSUS DE 992 px SEULEMENT : en dessous, le gabarit pose overflow-x: hidden sur et plus rien ne colle — même seuil que la barre elle-même. SANS BARRE DE DÉFILEMENT, et PAS COUPÉE EN BAS (Dorian, même jour) : son contenu reste en haut pendant tout le choix, puis le script (service-jeux-offre.js, initFicheColonne) le déroule sur les derniers pixels de la grille, au rythme de la page — son bas arrive avec celui des offres. La barre n'avait donc plus rien à dire, et mangeait 8 px de la carte. Le rayon est celui de la carte : le conteneur coupe ce qui défile sous ses coins, au lieu d'un bord droit. */ @media (min-width: 992px) { .sj-fiche-colonne { position: sticky; top: calc(var(--barre-h, 0px) + var(--bandeau-personnel-h, 0px) + 20px); max-height: calc(100vh - var(--barre-h, 0px) - var(--bandeau-personnel-h, 0px) - 40px); overflow-x: hidden; overflow-y: auto; border-radius: 16px; scrollbar-width: none; } .sj-fiche-colonne::-webkit-scrollbar { display: none; } } /* Les cartes blanches de la maquette : filet gris, rayon 14. */ .sj-panneau { padding: 22px; background: var(--sj-carte); border: 1px solid var(--sj-bord); border-radius: var(--sj-rayon); min-width: 0; } .sj-panneau__titre { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--sj-texte); } /* ========================================================================== 2. La fiche du jeu ========================================================================== */ .sj-fiche-jeu { display: flex; flex-direction: column; gap: 16px; padding: 18px; background: var(--sj-carte); border: 1px solid var(--sj-bord); border-radius: 16px; min-width: 0; } @media (min-width: 901px) { .sj-fiche-jeu--haut { border-bottom: 0; border-radius: 16px 16px 0 0; padding-bottom: 0; } .sj-fiche-jeu--bas { border-top: 0; border-radius: 0 0 16px 16px; padding-top: 16px; } } .sj-fiche-jeu__visuel { height: 200px; border-radius: 12px; overflow: hidden; background: var(--sj-visuel-fond); } .sj-fiche-jeu__visuel :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; } .sj-offre__h1 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; color: var(--sj-texte); overflow-wrap: anywhere; } .sj-offre__description { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--sj-texte-3); } .sj-fiche-jeu .sj-fiche-specs { margin-top: 0; gap: 14px; } .sj-fiche-jeu .sj-fiche-specs b { font-size: 13.5px; font-weight: 700; } .sj-aide { display: flex; gap: 13px; padding: 15px; border-radius: 12px; background: var(--sj-bleu-pale); border: 1px solid var(--sj-bleu-pale-bord); } .sj-aide svg { flex: 0 0 auto; color: var(--sj-ico); } .sj-aide b { display: block; font-size: 13.5px; font-weight: 700; color: var(--sj-texte); } .sj-aide p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--sj-texte-3); } /* Bleu foncé : sur le bleu pâle de l'encart, le bleu d'action tient 4,26:1. */ .sj .sj-aide a { position: relative; display: inline-block; margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--sj-accent-fonce); } /* La zone de toucher s'étend à 44 px sans déplacer le texte. */ .sj-aide a::after, .sj-ferme__lien::after { content: ""; position: absolute; inset: -12px -6px; } /* ========================================================================== 3. Le choix : période, « Personnalisé », formules ========================================================================== */ .sj-choix__titre { font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--sj-texte); } .sj-choix__sous { margin-top: 7px; font-size: 13.5px; color: var(--sj-texte-3); } .sj-choix__barre { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } /* Mensuel / Annuel : deux boutons radio habillés en onglets. */ .sj-periode { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 5px; min-width: 0; border: 1px solid var(--sj-bord); border-radius: 12px; background: var(--sj-carte); } .sj-periode__choix { position: relative; display: block; } .sj-periode__radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .sj-periode__face { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 20px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--sj-texte-2); cursor: pointer; } .sj-periode__radio:checked + .sj-periode__face { background: var(--sj-accent); color: #fff; --sj-etiq-fond: rgba(255, 255, 255, .22); --sj-etiq-texte: #fff; } .sj-periode__radio:checked + .sj-periode__face .sj-etiq { background: #fff; color: var(--sj-accent); } .sj-periode__radio:focus-visible + .sj-periode__face { outline: 2px solid var(--sj-focus); outline-offset: 2px; } /* Offres / Personnalisé : l'habillage de Mensuel / Annuel, par ses classes (sj-periode), pour qu'aucune retouche de l'un n'oublie l'autre. Visible avec le script seulement — sans lui, les curseurs ne chiffreraient rien. Il remplace le bouton « Personnalisé » (27/09/2026). */ html:not(.sj-js) .sj-mode { display: none; } /* La configuration libre prend la place de la grille des formules : elle en reprend l'écart au sélecteur. */ .sj-choix .sj-perso { margin-top: 20px; } .sj-note { margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--sj-texte-2); } .sj-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--sj-ico); } .sj-alerte { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--sj-erreur-bord); border-radius: var(--sj-rayon-sm); background: var(--sj-erreur-fond); color: var(--sj-erreur); font-size: 14.5px; font-weight: 500; line-height: 1.5; } .sj-alerte svg { flex: 0 0 auto; margin-top: 2px; } /* LA GRILLE SUIT LE NOMBRE DE FORMULES (data-nb) ET LA LARGEUR DE SA COLONNE (requête de conteneur), pas celle de l'écran. La maquette posait repeat(auto-fit, minmax(190px, 1fr)) : à 1000 px, quatre formules y tombaient en trois plus une orpheline. Quatre → 4, 2 ou 1 colonne(s) ; trois → 3 ou 1 ; deux → 2 ou 1. Au-delà de quatre, la règle de la maquette. */ .sj-groupe { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; container: sj-formules / inline-size; } .sj-formules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; } @container sj-formules (min-width: 400px) { .sj-formules:is([data-nb="2"], [data-nb="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sj-formules:not([data-nb="1"], [data-nb="2"], [data-nb="3"], [data-nb="4"]) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } @container sj-formules (min-width: 580px) { .sj-formules[data-nb="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container sj-formules (min-width: 780px) { .sj-formules[data-nb="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sj-formule { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 18px; background: var(--sj-carte); border: 1.5px solid var(--sj-bord); border-radius: var(--sj-rayon); box-shadow: 0 1px 2px rgba(17, 42, 79, .04); cursor: pointer; transition: border-color .16s, box-shadow .16s; } .sj-formule:hover { border-color: var(--sj-bord-secondaire); } .sj-formule:has(.sj-formule__radio:checked) { border-color: var(--sj-accent); box-shadow: 0 10px 26px rgba(21, 112, 239, .16); } .sj-formule:has(.sj-formule__radio:focus-visible) { outline: 2px solid var(--sj-focus); outline-offset: 2px; } .sj-formule__radio { position: absolute; opacity: 0; width: 1px; height: 1px; } /* La pastille « POPULAIRE » de la maquette : dans la carte, en haut à droite (14 px du bord, 16 du haut). Le nom de la formule lui laisse sa place, pour qu'une carte étroite ne la fasse pas recouvrir le nom. */ .sj-formule__badge { position: absolute; right: 14px; top: 16px; padding: 4px 9px; border-radius: 999px; background: var(--sj-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; } .sj-formule:has(.sj-formule__badge) .sj-formule__nom { padding-right: 84px; } .sj-formule__nom { display: block; font-family: var(--sj-titre); font-size: 16px; font-weight: 700; color: var(--sj-texte); overflow-wrap: anywhere; } .sj-formule__prix { margin-top: 16px; flex-wrap: wrap; } .sj-formule__prix b { font-size: 22px; } .sj-formule__prix small { font-size: 12px; } .sj-formule__engagement { margin-top: 4px; font-size: 12.5px; color: var(--sj-texte-3); } .sj-formule__specs { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--sj-texte-2); } .sj-formule__specs > span { display: flex; align-items: center; gap: 9px; } .sj-formule__specs svg { flex: 0 0 auto; color: var(--sj-accent); } /* Ce que la formule inclut, sous ses ressources : même liste, coche au lieu du pictogramme de ressource. */ .sj-formule__specs.sj-formule__inclus-liste { margin-top: 10px; } /* Juste sous le contenu, comme la maquette (son « margin-top: 18px » annule le « auto ») : le bouton ne descend pas au pied d'une carte étirée. */ .sj-formule__cta { margin-top: 0; padding-top: 18px; display: block; } .sj-formule__cta > span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 9px; background: var(--sj-accent); color: #fff; font-size: 13px; font-weight: 700; } /* « Commander » de la carte choisie : le bleu foncé de la maquette. */ .sj-formule:has(.sj-formule__radio:checked) .sj-formule__cta-choisir { background: var(--sj-accent-fonce); } /* « Bon à savoir » : les notes de formule, sous la grille (27/09/2026). Elles étaient dans leur carte, sur ce même bleu pâle ; ici l'encart porte la note de .sj-note et le cadre des encarts d'information (.sj-aide). */ .sj-note-formules { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--sj-bleu-pale-bord); border-radius: 12px; background: var(--sj-bleu-pale); } .sj-note-formules__titre { display: block; font-weight: 700; color: var(--sj-texte); } .sj-note-formules p { margin-top: 3px; } .sj-mention-prix { margin-top: 12px; font-size: 13px; color: var(--sj-texte-3); } /* Le prix suit la période cochée — sans script par :has(), et avec lui par la classe .sj-offre--annuel pour un navigateur sans :has(). */ .sj-offre .sj-si-annuel { display: none; } .sj-offre:is(.sj-offre--annuel, :has(.sj-periode__radio[value="annuel"]:checked)) .sj-si-annuel { display: inline; } .sj-offre:is(.sj-offre--annuel, :has(.sj-periode__radio[value="annuel"]:checked)) .sj-si-mensuel { display: none; } .sj-offre:is(.sj-offre--annuel, :has(.sj-periode__radio[value="annuel"]:checked)) .sj-formule__engagement.sj-si-annuel { display: block; } /* ========================================================================== 4. Options supplémentaires (bientôt) et configuration libre ========================================================================== */ .sj-options__liste { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; } .sj-option { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .sj-option__texte { flex: 1 1 160px; min-width: 0; } .sj-option__texte b { display: block; font-size: 13.5px; font-weight: 700; color: var(--sj-texte); } .sj-option__texte small { display: block; margin-top: 3px; font-size: 12.5px !important; line-height: 1.5; color: var(--sj-texte-3); } /* À la place de l'interrupteur de la maquette : rien ne se commande encore. */ .sj-bientot-pastille { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--sj-accent-clair); color: var(--sj-accent-fonce); font-size: 12px; font-weight: 700; } .sj-options__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sj-bord-doux); font-size: 12.5px; line-height: 1.6; color: var(--sj-texte-3); } .sj-perso__sous { margin-top: 5px; font-size: 13px; color: var(--sj-texte-3); } .sj-curseurs { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; } .sj-curseur__label { display: block; font-size: 13px; font-weight: 700; color: var(--sj-texte-2); } .sj-curseur__ligne { margin-top: 8px; display: flex; align-items: center; gap: 10px; } .sj-curseur__ligne input[type="range"] { flex: 1; min-width: 0; accent-color: var(--sj-accent); } .sj-pas { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--sj-bord-champ); background: var(--sj-carte); color: var(--sj-texte-2); font-size: 16px; line-height: 1; } .sj-pas[aria-disabled="true"] { opacity: .45; cursor: default; } .sj-curseur__valeur { flex: 0 0 auto; min-width: 86px; height: 30px; padding: 0 8px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--sj-bord); font-size: 13px; font-weight: 700; color: var(--sj-texte); white-space: nowrap; } .sj-estimation { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 14px 16px; border-radius: 12px; background: var(--sj-bleu-estim); } .sj-estimation__label { display: block; font-size: 13px; font-weight: 700; color: var(--sj-texte); } .sj-estimation__periode { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sj-texte-3); } .sj-estimation .sj-prix b { color: var(--sj-accent); } .sj-estimation__note, .sj-estimation__taxes { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--sj-texte-3); } /* ========================================================================== 5. Configuration du serveur (#707) — seulement si le jeu a une famille active ; aujourd'hui, jamais servi. ========================================================================== */ .sj-config__texte { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--sj-texte-3); } .sj-config__voies { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .sj-config__voies li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sj-bleu-pale); font-size: 13px; line-height: 1.55; color: var(--sj-texte-2); } .sj-config__voies svg { flex: 0 0 auto; margin-top: 2px; color: var(--sj-ico); } .sj-config__voies b { color: var(--sj-texte); } .sj-config__etat { color: var(--sj-ambre); } /* LES DEUX ONGLETS DU CONFIGURATEUR INTÉGRÉ (maquette v2). Deux boutons radio du formulaire, invisibles mais focalisables, AVANT l'en-tête et les deux vues : le sélecteur ~ montre la vue de l'onglet coché et colore son étiquette, sans une ligne de script. Aucun coché = aucune vue (cfgChoice: null dans la maquette). Le configurateur lui-même est stylé par configuration-jeu.css, chargée par la page seulement dans ce cas. */ .sj-config--onglets { position: relative; margin: 0; min-width: 0; } .sj-config__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .sj-config__tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .sj-config__intro { flex: 1 1 260px; min-width: 0; } .sj-config__onglets { display: inline-flex; gap: 4px; padding: 5px; border-radius: 12px; background: var(--sj-carte); border: 1px solid var(--sj-bord); } .sj-config__onglet { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--sj-texte-2); cursor: pointer; } .sj-config__onglet:hover { color: var(--sj-accent); } .sj-config__radio[value="maintenant"]:checked ~ .sj-config__tete .sj-config__onglet--maintenant, .sj-config__radio[value="plus_tard"]:checked ~ .sj-config__tete .sj-config__onglet--plus-tard { background: var(--sj-accent); color: #fff; } .sj-config__radio[value="maintenant"]:focus-visible ~ .sj-config__tete .sj-config__onglet--maintenant, .sj-config__radio[value="plus_tard"]:focus-visible ~ .sj-config__tete .sj-config__onglet--plus-tard { outline: 2px solid var(--sj-focus); outline-offset: 2px; } .sj-config__vue { display: none; } .sj-config__radio[value="maintenant"]:checked ~ .sj-config__vue--maintenant { display: block; margin-top: 18px; } .sj-config__radio[value="plus_tard"]:checked ~ .sj-config__vue--plus-tard { display: block; margin-top: 16px; } .sj-config__plus-tard { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sj-bleu-pale); font-size: 13px; line-height: 1.55; color: var(--sj-texte-2); } .sj-config__plus-tard svg { flex: 0 0 auto; color: var(--sj-accent); } @media (max-width: 560px) { .sj-config__onglets { display: flex; width: 100%; } .sj-config__onglet { flex: 1 1 0; white-space: normal; text-align: center; padding: 6px 10px; } } /* ========================================================================== 6. Récapitulatif ========================================================================== */ .sj-recap { display: flex; flex-direction: column; gap: 12px; } .sj-recap__barre { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 20px 24px; background: var(--sj-carte); border: 1px solid var(--sj-bord); border-radius: var(--sj-rayon); } .sj-recap__selection { flex: 1 1 200px; min-width: 0; } .sj-recap__label { display: block; font-size: 13px; color: var(--sj-texte-3); } .sj-recap__ligne { margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; } .sj-recap__ligne > b { font-size: 14.5px; font-weight: 700; color: var(--sj-texte); } .sj-recap__voir { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--sj-accent); min-height: 24px; } .sj-recap__voir:hover { text-decoration: underline; } html:not(.sj-js) .sj-recap__voir { display: none; } .sj-recap__total .sj-prix b { font-size: 22px; } .sj-recap__action { margin-left: auto; } .sj-recap__boutons { display: flex; flex-wrap: wrap; gap: 10px; } /* SANS SCRIPT, LE TOTAL EST CELUI DE LA FORMULE PRÉSÉLECTIONNÉE : dès que le visiteur en coche une autre, la phrase remplace le prix périmé. Le script pose .sj-offre--script et tient le total à jour. */ .sj-recap__selection .sj-recap__sans-script { display: none; } .sj-offre:not(.sj-offre--script):has(.sj-formule__radio:checked:not([checked]), .sj-periode__radio:checked:not([checked])) :is([data-sj-selection], .sj-recap__total) { display: none; } .sj-offre:not(.sj-offre--script):has(.sj-formule__radio:checked:not([checked]), .sj-periode__radio:checked:not([checked])) .sj-recap__sans-script { display: block; } /* « Voir le détail » */ .sj-detail { padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; background: var(--sj-carte); border: 1px solid var(--sj-bord); border-radius: var(--sj-rayon); } .sj-detail > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--sj-texte-2); } .sj-detail dd { margin: 0; font-weight: 700; color: var(--sj-texte); white-space: nowrap; } .sj-detail__total { padding-top: 10px; border-top: 1px solid var(--sj-bord-doux); } .sj-ferme { display: flex; align-items: center; gap: 12px; max-width: 340px; } .sj-ferme svg { flex: 0 0 auto; color: var(--sj-texte-3); } .sj-ferme__titre { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--sj-texte); } .sj-ferme__lien { position: relative; display: inline-block; margin-top: 2px; font-size: 14px; font-weight: 600; } .sj-ferme__formule { display: none; } .sj-recap__explication { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sj-bleu-pale); font-size: 13.5px; line-height: 1.55; color: var(--sj-texte-2); } .sj-recap__explication svg { flex: 0 0 auto; margin-top: 1px; color: var(--sj-ico); } /* ========================================================================== 7. Ce qui est inclus, FAQ ========================================================================== */ .sj-bas-offre { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; } .sj-inclus { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; } .sj-inclus li { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--sj-texte-2); } .sj-inclus svg { flex: 0 0 auto; margin-top: 1px; color: var(--sj-accent); } .sj-faq-offre { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .sj-faq-offre .sj-accordeon__tete { padding: 12px 14px; font-size: 12.5px; color: var(--sj-encre-bouton); } .sj-faq-offre .sj-accordeon__corps { padding: 0 14px 13px; font-size: 13px; } /* ========================================================================== 8. Responsive ========================================================================== */ @media (max-width: 1100px) { .sj-inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* SOUS 900 PX, TOUT S'EMPILE : la fiche du jeu, puis le choix. */ @media (max-width: 900px) { .sj-offre__grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "haut" "principal" "bas"; row-gap: 20px; } /* Le conteneur de la fiche s'efface : haut et bas redeviennent des cases de la grille, et le choix se place entre eux. */ .sj-fiche-colonne { display: contents; } .sj-bas-offre { grid-template-columns: minmax(0, 1fr); } .sj-fiche-jeu__visuel { height: auto; aspect-ratio: 16 / 7; } .sj-recap__action { margin-left: 0; } } @media (max-width: 599px) { .sj-inclus { grid-template-columns: minmax(0, 1fr); } .sj-panneau, .sj-recap__barre { padding: 18px; } /* Les deux sélecteurs — Mensuel / Annuel, Offres / Personnalisé — prennent chacun la largeur : l'un sous l'autre, onglets partagés à parts égales. */ .sj-periode { width: 100%; } .sj-periode__choix { flex: 1; } .sj-periode__face { width: 100%; justify-content: center; padding: 0 10px; } } /* Cibles tactiles de 44 px partout où l'on vise au doigt. */ @media (max-width: 900px), (pointer: coarse) { .sj-pas { width: 44px; height: 44px; } .sj-periode__face { min-height: 44px; } .sj-recap__voir { min-height: 44px; } } /* ── TÉLÉPHONE : LA BARRE DU RÉCAPITULATIF EST FIXE EN BAS ──────────────── Le total et l'action restent sous le pouce pendant qu'on choisit. « position: fixed » et non « sticky » : le gabarit pose overflow-x: hidden sur sous 992 px, ce qui empêche tout collage. La page réserve en bas la hauteur de la barre (mesurée par le script dans --sj-barre-h ; 120 px sans lui). PAS SOUS 300 PX DE HAUTEUR (zoom 400 %) : elle y mangerait l'écran, et reste dans le flux. */ @media (max-width: 899px) and (min-height: 300px) { html { scroll-padding-bottom: calc(var(--sj-barre-h, 120px) + 12px); } body { padding-bottom: var(--sj-barre-h, 120px); } .sj-recap__barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "selection action" "total action"; align-items: center; gap: 0 14px; padding: 10px max(var(--sj-gouttiere), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--sj-gouttiere), env(safe-area-inset-left, 0px)); border: 0; border-top: 1px solid var(--sj-bord-fort); border-radius: 0; box-shadow: var(--sj-ombre-haut); } .sj-recap__selection { grid-area: selection; } .sj-recap__total { grid-area: total; } .sj-recap__action { grid-area: action; } .sj-recap__barre .sj-recap__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sj-recap__ligne { margin-top: 0; } .sj-recap__ligne > b { font-size: 13px; font-weight: 600; color: var(--sj-texte-2); } /* « Voir le détail » ouvrirait un panneau sous la barre : hors de la barre fixe, il ne sert qu'aux écrans larges. */ .sj-recap__barre .sj-recap__voir { display: none; } .sj-recap__total .sj-prix b { font-size: 20px; } .sj-recap__boutons { flex-direction: column; gap: 6px; } .sj-recap__boutons .sj-btn, .sj-recap__action > .sj-btn { min-height: 44px; padding: 0 14px; font-size: 14px; } .sj-offre__info { display: none; } .sj-ferme { gap: 8px; max-width: 260px; } .sj-ferme svg { display: none; } .sj-ferme__titre { font-size: 13.5px; text-wrap: balance; } .sj-ferme__lien { font-size: 13.5px; } } @media (forced-colors: active) { .sj-formule:has(.sj-formule__radio:checked) { outline: 3px solid Highlight; } .sj-periode__radio:checked + .sj-periode__face { outline: 2px solid Highlight; } }