/* ==========================================================================
   CBR-Cloud — /service/serveurs-jeux : l'état CATALOGUE
   D'après la maquette v2 de Dorian (serveurs-jeux-standalone v2.dc.html).
   Chargée APRÈS service-jeux.css (jetons, boutons, prix, accordéon, fiche).

   1. Héros · 2. Bandeau d'atouts · 3. Catalogue et cartes
   5. Bandeau « nouveaux jeux » · 6. Étapes · 7. Trois atouts · 8. FAQ
   9. Fenêtre « Détails » · 10. Responsive (tout reflue sous 900 px)

   LES MESURES PARTENT DE LA MAQUETTE (styles en ligne de la v2) ; seuls les
   gris trop clairs pour 4,5:1 sont remontés (jetons de service-jeux.css).

   PLUS LARGE ET PLUS GROS QUE LA MAQUETTE (demande de Tristan du 01/10/2026) :
   « tout est trop dans le milieu, pas assez gros ». Sur un écran de 1920 px,
   la colonne de 1240 px laissait 340 px vides de chaque côté et des cartes de
   280 px écrites en 12,5 px. La page s'ouvre donc à 1680 px (jeton --sj-max
   du socle, partagé avec la page d'offre), les cartes passent à 280 px au
   moins (380 au large) et tous les textes gagnent 1 à 4 px.

   AUCUNE LARGEUR FIXE qui dépasse l'écran : grilles en auto-fit/minmax, et
   min-width: 0 sur les enfants de grille. Pas de style en ligne dans la vue.
   ========================================================================== */

/* ==========================================================================
   1. Héros
   ========================================================================== */
.sj-hero {
  background: linear-gradient(180deg, var(--sj-hero-haut) 0%, var(--sj-hero-bas) 100%);
  border-bottom: 1px solid var(--sj-bord);
  overflow: hidden;
}
.sj-hero > .sj-conteneur { padding-top: 64px; padding-bottom: 10px; }
.sj-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.sj-hero__texte { min-width: 0; }

/* La pastille « DDoS inclus » : bouclier vert plein, filet vert d'eau. */
.sj-puce {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 13px;
  border-radius: 999px;
  background: var(--sj-carte);
  border: 1.5px solid var(--sj-vert-bord);
  box-shadow: 0 3px 12px rgba(24, 178, 132, .1);
  font-family: var(--sj-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--sj-texte);
}
.sj-puce svg { flex: 0 0 auto; color: var(--sj-vert); }

.sj-hero__titre {
  margin-top: 22px;
  font-size: clamp(36px, 3.6vw, 66px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--sj-texte);
}
.sj-hero__titre span { display: block; color: var(--sj-accent); }
.sj-hero__chapo {
  margin-top: 20px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--sj-texte-3);
}

/* Recherche et filtres : sans script, ils ne feraient rien — cachés.
   « sj-js » est posée sur <html> dès le <head> (vue d'entrée) et retirée au
   chargement si le script de la page ne s'est pas exécuté. */
html:not(.sj-js) .sj-outils { display: none; }
.sj-outils { margin-top: 32px; max-width: 600px; }
.sj-recherche {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord-champ);
  box-shadow: 0 4px 14px rgba(17, 42, 79, .06);
}
.sj-recherche svg { flex: 0 0 auto; color: var(--sj-texte-3); }
.sj-recherche:focus-within { border-color: var(--sj-accent); outline: 2px solid var(--sj-focus); outline-offset: 2px; }
.sj-recherche input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16.5px;
  color: var(--sj-texte);
  -webkit-appearance: none;
  appearance: none;
}
.sj-recherche input::-webkit-search-cancel-button { cursor: pointer; }

.sj-filtres { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.sj-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 19px;
  border-radius: 999px;
  border: 1px solid var(--sj-filtre-bord);
  background: var(--sj-carte);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sj-filtre-texte);
}
.sj-filtre svg { flex: 0 0 auto; }
.sj-filtre:hover { border-color: var(--sj-accent); color: var(--sj-accent); }
.sj-filtre[aria-pressed="true"] { background: var(--sj-accent); border-color: var(--sj-accent); color: #fff; }

/* --------------------------------------------------------------------------
   Le visuel — la bannière de jeux dans un cadre « pixel » à bandes bleues
   (demande du 28/09/2026, d'après le cadre vert des visuels Minecraft).
   Quatre couches emboîtées, toutes découpées par le même escalier
   (.sj-pixel, marche = --px) : bande bleue, filet nuit, liseré clair, image.
   Une cinquième, l'ombre, est décalée en bas à gauche comme un bloc de jeu.
   Le halo et la trame de points, derrière, fondent le cadre dans le fond
   clair du héros.
   -------------------------------------------------------------------------- */
.sj-pixel {
  --m1: var(--px);
  --m2: calc(var(--px) * 2);
  --m3: calc(var(--px) * 3);
  clip-path: polygon(
    var(--m3) 0, calc(100% - var(--m3)) 0,
    calc(100% - var(--m3)) var(--m1), calc(100% - var(--m2)) var(--m1),
    calc(100% - var(--m2)) var(--m2), calc(100% - var(--m1)) var(--m2),
    calc(100% - var(--m1)) var(--m3), 100% var(--m3),
    100% calc(100% - var(--m3)), calc(100% - var(--m1)) calc(100% - var(--m3)),
    calc(100% - var(--m1)) calc(100% - var(--m2)), calc(100% - var(--m2)) calc(100% - var(--m2)),
    calc(100% - var(--m2)) calc(100% - var(--m1)), calc(100% - var(--m3)) calc(100% - var(--m1)),
    calc(100% - var(--m3)) 100%, var(--m3) 100%,
    var(--m3) calc(100% - var(--m1)), var(--m2) calc(100% - var(--m1)),
    var(--m2) calc(100% - var(--m2)), var(--m1) calc(100% - var(--m2)),
    var(--m1) calc(100% - var(--m3)), 0 calc(100% - var(--m3)),
    0 var(--m3), var(--m1) var(--m3),
    var(--m1) var(--m2), var(--m2) var(--m2),
    var(--m2) var(--m1), var(--m3) var(--m1)
  );
}

.sj-banniere {
  --px: 8px;
  --decale: 14px;                  /* décalage de l'ombre en escalier */
  position: relative;
  min-width: 0;
  margin: 34px -30px 34px var(--decale);   /* déborde à droite, comme la maquette */
}
/* Halo bleu et trame de points : le cadre sort du fond au lieu d'y être posé. */
.sj-banniere::before {
  content: "";
  position: absolute;
  inset: -70px -90px -70px -60px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(17, 112, 244, .2), rgba(17, 112, 244, 0) 72%),
    radial-gradient(rgba(17, 112, 244, .22) 1.2px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, black 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 45%, transparent 100%);
}
.sj-banniere__corps { position: relative; z-index: 1; }
.sj-banniere__ombre {
  position: absolute;
  inset: var(--decale) var(--decale) calc(var(--decale) * -1) calc(var(--decale) * -1);
  background: linear-gradient(135deg, var(--sj-sombre-2), var(--sj-sombre-1));
}
.sj-banniere__cadre {
  position: relative;
  padding: 10px;
  background: linear-gradient(135deg, var(--sj-cadre-clair) 0%, var(--sj-accent) 38%, var(--sj-cadre-fonce) 100%);
}
.sj-banniere__filet { padding: 4px; background: var(--sj-sombre-1); }
.sj-banniere__lisere {
  position: relative;
  padding: 3px;
  background: linear-gradient(180deg, var(--sj-focus-sombre) 0%, var(--sj-picto-sombre) 100%);
}
.sj-banniere__image {
  position: relative;
  display: block;
  aspect-ratio: 7 / 5;
  background: var(--sj-visuel-fond);
  overflow: hidden;
}
/* Le panorama (3,2:1) défile dans la fenêtre : les trois scènes y passent. */
.sj-banniere__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
}
/* Voile nuit en bas et reflet bleu sur les bords : l'image, très chaude,
   se rattache aux bleus du site. */
.sj-banniere__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 18, 42, .18) 0%, rgba(4, 18, 42, 0) 22%, rgba(4, 18, 42, 0) 58%, rgba(4, 18, 42, .62) 100%),
    linear-gradient(90deg, rgba(17, 112, 244, .26) 0%, rgba(17, 112, 244, 0) 16%, rgba(17, 112, 244, 0) 84%, rgba(17, 112, 244, .26) 100%);
}

.sj-banniere__pastille {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  border: 2px solid rgba(143, 192, 255, .6);
  background: rgba(4, 18, 42, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--sj-titre);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.sj-banniere__voyant {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--sj-picto-sombre);
  box-shadow: 0 0 0 3px rgba(56, 144, 255, .3);
}

/* Les ornements pixelisés, posés à cheval sur le cadre. */
.sj-banniere__px, .sj-banniere__bloc { position: absolute; z-index: 2; display: block; }
.sj-px-clair { fill: var(--sj-focus-sombre); }
.sj-px-plein { fill: var(--sj-accent); }
.sj-px-ombre { fill: var(--sj-sombre-2); }
.sj-px-blanc { fill: #fff; }
.sj-banniere__px--nuage { width: 128px; height: 64px; top: -36px; right: 42px; }
.sj-banniere__px--bouclier { width: 63px; height: 70px; left: -44px; bottom: 58px; }
.sj-banniere__bloc { width: 12px; height: 12px; background: var(--sj-picto-sombre); }
.sj-banniere__bloc--1 { top: -24px; right: 190px; width: 10px; height: 10px; background: var(--sj-focus-sombre); }
.sj-banniere__bloc--2 { top: -46px; right: 14px; }
.sj-banniere__bloc--3 { left: -34px; bottom: 150px; width: 9px; height: 9px; background: var(--sj-focus-sombre); }

@media (prefers-reduced-motion: no-preference) {
  /* 22 s par traversée (36 s auparavant) et à vitesse constante : demande de
     Tristan du 29/09/2026 — le panorama se lisait trop lentement, et restait
     figé près de deux secondes à l'arrivée sur la page (palier de 0 à 8 %
     plus départ en douceur). Il part désormais dès l'affichage. */
  .sj-banniere__image img { animation: sj-panorama 22s linear infinite alternate; }
  .sj-banniere:hover .sj-banniere__image img { animation-play-state: paused; }
  .sj-banniere__px--nuage { animation: sj-flotte 2.4s steps(3, end) infinite alternate; }
  .sj-banniere__bloc--1 { animation: sj-flotte 1.8s steps(2, end) infinite alternate; }
  .sj-banniere__bloc--3 { animation: sj-flotte 2.1s steps(2, end) infinite alternate-reverse; }
  .sj-banniere__voyant { animation: sj-voyant 1.6s steps(2, jump-none) infinite; }
}
/* Pas de palier au départ : c'est lui qu'on voit en arrivant. Le palier de
   droite reste — une courte pause avant le retour, qui ne retarde rien. */
@keyframes sj-panorama {
  0%        { object-position: 0% 45%; }
  92%, 100% { object-position: 100% 45%; }
}
@keyframes sj-flotte { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes sj-voyant { 50% { box-shadow: 0 0 0 5px rgba(56, 144, 255, .12); } }

/* Le refus d'une commande, en tête de page. */
.sj-alerte {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord-fort);
  border-left: 4px solid var(--sj-accent);
  border-radius: var(--sj-rayon-sm);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sj-texte);
}
.sj-alerte svg { flex: 0 0 auto; margin-top: 1px; color: var(--sj-accent); }

/* ==========================================================================
   2. Bandeau d'atouts — une carte blanche, des filets verticaux
   ========================================================================== */
/* La maquette le pose en image (bandeau-atouts-v6.png, 640 px au plus, rayon
   12, ombre douce) : mêmes proportions ici, en HTML. 48 px sous le héros : ses
   44 px de marge basse plus les 4 du bloc du bandeau. */
.sj-atouts {
  margin-top: 48px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  /* Toute la largeur de la page : à 1680 px, un bandeau calé à gauche laissait
     un tiers de vide à sa droite. Trois atouts (textes de Tristan). */
  padding: 22px 0;
  background: var(--sj-carte);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(17, 42, 79, .08), 0 1px 2px rgba(17, 42, 79, .04);
}
.sj-atout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 26px;
  min-width: 0;
}
.sj-atout + .sj-atout { border-left: 1px solid var(--sj-bord-fort); }
.sj-atout__ico { flex: 0 0 auto; display: flex; color: var(--sj-accent); }
.sj-atout__titre {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sj-texte);
}
.sj-atout__sous { display: block; margin-top: 3px; font-size: 14.5px; color: var(--sj-texte-3); }

/* ==========================================================================
   3. Catalogue et cartes de jeu
   ========================================================================== */
.sj-catalogue { padding-top: 64px; }
.sj-bloc + .sj-bloc { margin-top: 48px; }
.sj-bloc__tete { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 20px; }
.sj-catalogue { padding-bottom: 8px; }
.sj-bloc__intro { min-width: 0; flex: 1 1 320px; }
.sj-bloc__ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.sj-bloc__ico { display: flex; color: var(--sj-accent); }
.sj-titre-section { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--sj-texte); }
.sj-bloc__chapo { margin-top: 10px; font-size: 16px; color: var(--sj-texte-3); }

.sj-catalogue .sj-info { margin-top: 18px; font-size: 15.5px; }

/* La grille de la maquette : auto-fit, colonnes de 250 px au moins — quatre
   à 1440, trois vers 1000 px. */
.sj-grille-jeux {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
/* Quatre colonnes dès 1280 px, jamais cinq : huit cartes au premier rendu
   font deux rangées pleines, et la carte grandit avec l'écran (280 px à
   1280, 380 à 1920) au lieu de céder la place à une cinquième. */
@media (min-width: 1280px) {
  .sj-grille-jeux { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Toutes les cartes au premier rendu (06/10/2026) : plus de repli à huit. */
.sj-carte-jeu {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord);
  border-radius: var(--sj-rayon);
  overflow: hidden;
  box-shadow: var(--sj-ombre);
  transition: box-shadow .18s;
}
.sj-carte-jeu:hover,
.sj-carte-jeu:focus-within { box-shadow: var(--sj-ombre-h); }
.sj-carte-jeu__visuel {
  position: relative;
  height: clamp(170px, 13vw, 220px);
  background: var(--sj-visuel-fond);
  overflow: hidden;
}
.sj-carte-jeu__visuel :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-carte-jeu__corps { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.sj-carte-jeu__nom { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.sj .sj-carte-jeu__lien { color: var(--sj-texte); }
/* Le lien du titre couvre toute la carte ; les boutons passent au-dessus. */
.sj-carte-jeu__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sj .sj-carte-jeu__lien:hover,
.sj .sj-carte-jeu__lien:focus { color: var(--sj-accent); }
.sj-carte-jeu__lien:focus-visible { outline: none; }
.sj-carte-jeu:has(.sj-carte-jeu__lien:focus-visible) { outline: 2px solid var(--sj-focus); outline-offset: 2px; }

/* La pastille « Populaire » sur le visuel, en haut à gauche (maquette). */
.sj-carte-jeu__badge { z-index: 2; font-size: 12.5px; font-weight: 700; padding: 4px 11px; }
.sj-carte-jeu__specs { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--sj-texte-3); }
.sj-carte-jeu__specs li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sj-carte-jeu__specs svg { flex: 0 0 auto; color: var(--sj-accent); }

.sj-carte-jeu .sj-prix-bloc {
  padding-top: 30px;
  background: linear-gradient(var(--sj-bord-doux), var(--sj-bord-doux)) left 16px / 100% 1px no-repeat;
}
.sj-carte-jeu__actions {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sj .sj-carte-jeu__actions .sj-btn { min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; }
.sj .sj-carte-jeu__actions .sj-btn--primaire { font-weight: 700; }
.sj .sj-carte-jeu__actions .sj-btn--secondaire { font-weight: 500; color: var(--sj-encre-bouton); }
.sj-carte-jeu .sj-prix-bloc__label { font-size: 13px; }
.sj-carte-jeu .sj-prix :is(b, strong) { font-size: 25px; }
.sj-carte-jeu .sj-prix small { font-size: 13.5px; }

.sj-vide {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--sj-rayon);
  background: var(--sj-carte);
  border: 1px dashed var(--sj-bord-fort);
  color: var(--sj-texte-2);
  font-size: 14.5px;
}
.sj-vide__actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }

.sj-encart {
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  border-radius: var(--sj-rayon);
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord);
}
.sj-encart__ico { flex: 0 0 auto; display: flex; color: var(--sj-accent); }
.sj-encart p { margin-top: 8px; color: var(--sj-texte-2); }
.sj-encart__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ==========================================================================
   5. Bandeau « De nouveaux jeux arrivent bientôt »
   ========================================================================== */
.sj-suggestion-zone { padding-top: 40px; padding-bottom: 64px; }
.sj-suggestion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: 28px 34px;
  border-radius: var(--sj-rayon);
  background: var(--sj-bleu-voile);
  border: 1px solid var(--sj-bleu-voile-bord);
}
.sj-suggestion__ico {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sj-carte);
  border: 1px solid var(--sj-bleu-voile-bord);
  color: var(--sj-accent);
}
.sj-suggestion__texte { flex: 1 1 240px; min-width: 0; }
.sj-suggestion__texte h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sj-suggestion__texte p { margin-top: 6px; font-size: 15.5px; color: var(--sj-texte-3); }
.sj-suggestion__actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sj .sj-suggestion__actions .sj-btn { min-height: 48px; padding: 0 22px; gap: 9px; font-size: 15px; font-weight: 500; border-color: var(--sj-bord-suggestion); color: var(--sj-encre-bouton); }
.sj-suggestion .sj-btn svg { color: var(--sj-accent); }

/* ==========================================================================
   6. Les étapes — fond bleu nuit, pictogrammes lumineux, flèches
   ========================================================================== */
.sj-etapes {
  padding: 76px 0 84px;
  background: radial-gradient(90% 70% at 50% 0%, var(--sj-sombre-2) 0%, var(--sj-sombre-1) 100%);
  color: #fff;
}
.sj-etapes h2 { text-align: center; font-size: clamp(28px, 2.6vw, 42px); letter-spacing: -.025em; color: #fff; }
.sj-etapes__conteneur { max-width: calc(1440px + 2 * var(--sj-gouttiere)); }
.sj-etapes__chapo { margin-top: 14px; text-align: center; font-size: 17px; color: var(--sj-sur-sombre); }
/* La piste de la maquette : quatre colonnes égales, une flèche entre chaque
   (1fr auto 1fr auto 1fr auto 1fr), 6 px d'écart. */
.sj-etapes__piste {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.sj-etapes__fleche {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 54px;
  color: var(--sj-picto-sombre);
}
.sj-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.sj-etape__ico {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-picto-sombre);
  filter: drop-shadow(0 0 6px rgba(56, 144, 255, .5)) drop-shadow(0 0 18px rgba(56, 144, 255, .3));
}
.sj-etape__ico .sj-picto-plein { fill: var(--sj-picto-plein); }
.sj-etape__titre { margin-top: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.sj-etape__texte { margin-top: 12px; max-width: 290px; font-size: 15.5px; line-height: 1.6; color: var(--sj-sur-sombre); }

/* ==========================================================================
   7. Trois atouts
   ========================================================================== */
.sj-atouts-zone { padding-top: 64px; }
.sj-cartes-atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.sj-carte-atout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 32px 32px 34px;
  min-width: 0;
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord-leger);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 42, 79, .04);
}
.sj-carte-atout__ico {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--sj-fond-ico);
  border: 1px solid var(--sj-bord-leger);
  color: var(--sj-ico);
}
.sj-carte-atout__corps { flex: 1 1 170px; min-width: 0; }
.sj-carte-atout h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--sj-texte); }
.sj-carte-atout p { margin-top: 10px; font-size: 15.5px; line-height: 1.8; color: var(--sj-texte-2); }

/* ==========================================================================
   8. FAQ — deux piles indépendantes
   ========================================================================== */
.sj-faq { padding-top: 60px; padding-bottom: 76px; }
.sj-faq__tete { display: flex; align-items: center; gap: 11px; }
.sj-faq__tete svg { flex: 0 0 auto; color: var(--sj-accent); }
.sj-faq .sj-titre-section { font-size: 28px; }
.sj-faq__chapo { margin-top: 10px; font-size: 15.5px; color: var(--sj-texte-3); }
.sj-faq .sj-accordeon__tete { font-size: 15.5px; padding: 18px 22px; color: var(--sj-encre-bouton); }
.sj-faq__colonnes {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  align-items: start;
}
.sj-faq__colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ==========================================================================
   9. Fenêtre « Détails »

   Cachée par défaut ; affichée par la classe que pose le script, ou — sans
   script — par :target, puisque « Détails » est un lien vers son ancre.
   z-index 10000 : au-dessus du bandeau du site (9999), que le script rend
   inerte.
   ========================================================================== */
.sj-modale {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(6, 18, 38, .5);
  overscroll-behavior: contain;
}
.sj:not(.sj--js) .sj-modale:target,
.sj-modale.sj-modale--ouverte { display: flex; }

/* LE VERROU EST SUR <html> : fp-universal.css y pose overflow-y: scroll
   !important, c'est lui qui défile. */
html.sj-modale-ouverte { overflow: hidden !important; }

.sj-modale__boite {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sj-carte);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(6, 18, 38, .35);
}
.sj-modale__boite:focus { outline: none; }
@media (forced-colors: active) {
  .sj-modale__boite { border: 2px solid CanvasText; }
}
.sj-modale__defile { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.sj .sj-modale__defile:focus-visible { outline-offset: -3px; }
.sj-modale__visuel { height: 190px; overflow: hidden; background: var(--sj-visuel-fond); }
.sj-modale__visuel :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 44 × 44 : la cible tactile de la page (32 px dans la maquette). */
.sj-modale__fermer {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--sj-texte-2);
}
.sj .sj-modale__fermer:hover,
.sj .sj-modale__fermer:focus { background: #fff; color: var(--sj-accent); }
.sj-modale__corps { padding: 22px 24px 20px; }
.sj-modale__nom { font-family: var(--sj-titre); font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--sj-texte); }
.sj-modale__ligne-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sj-modale__badge { position: static; font-size: 11.5px; font-weight: 700; }
.sj-modale__desc { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--sj-texte-3); }
.sj-modale .sj-fiche-specs li > span { min-width: 0; }
.sj-modale__pied {
  flex: 0 0 auto;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--sj-bord-doux);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.sj-modale__prix { flex: 1 1 130px; min-width: 0; }
.sj-modale__taxes { display: block; font-size: 12.5px; color: var(--sj-texte-3); }

/* ==========================================================================
   10. Responsive — tout reflue sous 900 px, sans défilement horizontal
   ========================================================================== */
@media (max-width: 1100px) {
  .sj-etapes__piste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
  .sj-etapes__fleche { display: none; }
}
@media (max-width: 900px) {
  .sj-hero > .sj-conteneur { padding-top: 36px; }
  .sj-hero__grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sj-outils, .sj-hero__chapo { max-width: none; }
  /* Le cadre passe sous le texte, sur toute la largeur ; plus large que
     haut (16/10, puis 4/3 sur téléphone) ; marches et ornements rapetissent. */
  .sj-banniere { --px: 6px; margin: 34px 0 30px var(--decale); }
  .sj-banniere__image { aspect-ratio: 16 / 10; }
  .sj-banniere__px--nuage { width: 96px; height: 48px; top: -28px; right: 24px; }
  .sj-banniere__px--bouclier, .sj-banniere__bloc--3 { display: none; }
  /* Le bandeau d'atouts s'empile : les filets deviennent horizontaux. */
  .sj-atouts { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; padding: 6px 4px; }
  .sj-atout { justify-content: flex-start; }
  .sj-atout { padding: 14px 18px; }
  .sj-atout + .sj-atout { border-left: 0; border-top: 1px solid var(--sj-bord-fort); }
  .sj-faq__colonnes { grid-template-columns: minmax(0, 1fr); }
  .sj-suggestion__actions { margin-left: 0; }
}
@media (max-width: 599px) {
  .sj-titre-section { font-size: 26px; }
  .sj-banniere { --px: 4px; --decale: 8px; }
  .sj-banniere__image { aspect-ratio: 4 / 3; }
  .sj-banniere__cadre { padding: 6px; }
  .sj-banniere__filet { padding: 3px; }
  .sj-banniere__lisere { padding: 2px; }
  .sj-banniere__pastille { left: 12px; bottom: 12px; font-size: 12.5px; padding: 6px 11px 6px 9px; }
  .sj-banniere__bloc--1 { right: 140px; }
  .sj-grille-jeux { grid-template-columns: minmax(0, 1fr); }
  .sj-etapes__piste { grid-template-columns: minmax(0, 1fr); }
  .sj-suggestion { padding: 20px; }
  .sj-carte-atout { padding: 20px; }
  .sj-modale { padding: 14px; }
}
@media (max-height: 500px) {
  .sj-modale__visuel { display: none; }
}