/* ==========================================================================
   CBR-Cloud — /service/serveurs-jeux : le SOCLE COMMUN
   Chargée par les trois états de la famille (catalogue, page d'offre, page
   « arrive bientôt »), AVANT la feuille de l'état :
   service-jeux-catalogue.css ou service-jeux-offre.css.

   Ici : jetons, gardes contre les feuilles du gabarit, focus, boutons,
   badges et étiquettes, prix, accordéon, fiche de caractéristiques. Rien qui
   ne serve qu'à un seul état.

   LA FAMILLE VISUELLE EST CELLE DES PAGES REFAITES (/, /contact, pied de
   page) : Poppins pour les titres, DM Sans pour le texte, un seul bleu
   d'action (#1257F0, survol #0B44C4), l'encre #0B1F44, des ombres légères et
   des boutons sans halo. Les valeurs viennent de public/accueil-style.css et
   public/contact-style.css ; elles ne sont pas « à peu près ».
   ========================================================================== */

/* DM SANS 600, POUR LES BOUTONS. Le gabarit ne charge que 400, 500 et 700
   (asset/fonts/pied-poppins-dmsans.css) : un 600 demandé sortait en 700.
   Mêmes fichiers woff2 que ces trois graisses — une police variable —, donc
   rien de plus à télécharger ; c'est la déclaration de /contact. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/asset/fonts/fichiers/dmsans-850928f518.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/asset/fonts/fichiers/dmsans-002a94d0e2.woff2) 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;
}

/* LE FOND DU GABARIT EST SOMBRE (z-style.css : #181a1b et trois dégradés).
   La page est claire : ce fond se voyait dans la gouttière de défilement et
   au rebond, sous un pied de page blanc. Même neutralisation que l'accueil
   et /contact ; la règle vise `body`, et cette feuille n'est chargée que par
   la famille serveurs-jeux. */
body {
  background-color: #fff !important;
  background-image: none !important;
}

/* ==========================================================================
   Jetons
   ========================================================================== */
.sj {
  /* LES COULEURS DE LA MAQUETTE V2 (consigne du designer, 26/09/2026) :
     le bleu produit #1570ef pour l'action et les liens, #1170F4 pour les
     pictogrammes. #1570ef : 4,57:1 sur blanc, blanc dessus 4,57:1. */
  --sj-accent:          #1570ef;
  --sj-accent-fonce:    #0f5ed4;   /* survol ; blanc dessus : 5,9:1 */
  --sj-accent-clair:    #e8f0fe;   /* pastilles et tuiles douces */
  --sj-accent-survol:   #ffffff;   /* survol du bouton secondaire : il reste blanc (maquette) */
  --sj-bord-secondaire: #dbe4f0;   /* contour du bouton secondaire */
  --sj-lien:            var(--sj-accent);
  --sj-ico:             #1170F4;

  /* Encre et gris. Contrastes mesurés sur le fond le plus foncé où ils
     paraissent (#EEF4FC, bas du héros) : texte-2 5,9:1, texte-3 4,68:1.
     #69778F, le gris du pied, n'est PAS repris : 4,32:1 sur #F7FAFD. */
  /* Les gris de la maquette qui tiennent 4,5:1 : #8a99ad et #7b8aa0, ses
     gris les plus clairs, n'y arrivent pas (2,9 et 3,5:1) et sont remplacés
     par #5c6b81. */
  --sj-texte:           #0d1b2e;
  --sj-texte-2:         #45566e;
  --sj-texte-3:         #5c6b81;

  --sj-fond:            #f4f7fb;
  --sj-carte:           #ffffff;
  --sj-bord:            #e6ecf4;
  --sj-bord-fort:       #dbe4f0;
  --sj-bord-doux:       #edf1f7;   /* filets internes des cartes */
  --sj-vert:            #17c090;   /* bouclier de la pastille « DDoS inclus » */
  --sj-vert-bord:       #8fdcc8;
  --sj-ambre:           #9a5b00;   /* « À configurer », 5,6:1 sur #f4f8ff */
  --sj-bleu-pale:       #f4f8ff;   /* encarts d'information de la maquette */
  --sj-bleu-pale-bord:  #e2ecfb;
  --sj-picto-sombre:    #3890ff;   /* pictogrammes des étapes, sur bleu nuit */
  /* Les fonds et filets propres à la maquette v2. */
  --sj-hero-haut:       #fbfdff;
  --sj-hero-bas:        #eef4fc;
  --sj-visuel-fond:     #0f1724;   /* derrière une jaquette qui charge */
  --sj-cadre-clair:     #5aa9ff;   /* cadre pixel de la bannière du héros */
  --sj-cadre-fonce:     #0a58d0;
  --sj-bleu-voile:      #f0f6ff;   /* bandeau « nouveaux jeux » */
  --sj-bleu-voile-bord: #d9e6fb;
  --sj-bleu-estim:      #f1f5ff;   /* estimation du sur-mesure */
  --sj-bord-leger:      #ecf0f5;
  /* Filtres, boutons blancs et bandeau « nouveaux jeux » de la maquette v2. */
  --sj-filtre-bord:     #dde6f1;
  --sj-filtre-texte:    #3c4c63;   /* 9,4:1 sur blanc */
  --sj-encre-bouton:    #24344b;   /* texte des boutons blancs, 12,5:1 */
  --sj-bord-suggestion: #cfdef5;
  --sj-fond-ico:        #fbfcfe;
  --sj-picto-plein:     #061b3a;   /* remplissage des grands pictogrammes */
  /* Le contour d'un champ de saisie : 3,16:1 sur #EEF4FC, 3,5:1 sur blanc
     (WCAG 1.4.11). C'est le --gris de /contact. */
  --sj-bord-champ:      #7A8AA5;

  --sj-sombre-1:        #04122a;
  --sj-sombre-2:        #0b2247;
  --sj-sur-sombre:      #9ab0cf;   /* 8,4:1 sur --sj-sombre-1 */

  --sj-focus:           var(--sj-accent);
  --sj-focus-sombre:    #8fc0ff;   /* 9,9:1 sur --sj-sombre-1 */

  /* rythme */
  --sj-max:             1240px;
  --sj-gouttiere:       28px;
  --sj-rayon:           14px;      /* cartes, comme /contact */
  --sj-rayon-sm:        10px;      /* boutons, champs */
  --sj-ombre:           0 2px 10px rgba(17, 42, 79, .05);
  --sj-ombre-h:         0 14px 32px rgba(17, 42, 79, .12);

  /* typographie */
  --sj-titre:      Poppins, "Segoe UI", system-ui, sans-serif;
  --sj-texte-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--sj-fond);
  color: var(--sj-texte);
  font-family: var(--sj-texte-font);
  /* LA PAGE POSE SA PROPRE BASE au lieu d'hériter de celle du site
     (fp-universal.css : body 14px/1.6 !important). Presque tout ici porte sa
     taille ; ce qui n'en porte pas prend la taille de texte de /contact. */
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sj *,
.sj *::before,
.sj *::after { box-sizing: border-box; }

/* ==========================================================================
   Les gardes — ce que les feuilles du gabarit reposent PAR TYPE

   Bootstrap 3, z-style.css et fp-universal.css visent des balises : `p`,
   `a`, `h1`…`h6`, `ul`, `label`. L'héritage depuis `.sj` ne pèse rien contre
   eux. Toutes les gardes passent donc par :where(), qui les ramène au poids
   de `.sj` seul, (0,1,0) : assez pour battre un sélecteur de type, trop peu
   pour gêner une classe.

   CE N'EST PAS UNE COQUETTERIE. Écrites `.sj p` et `.sj h1`, elles pesaient
   (0,1,1) et battaient TOUTES les règles de composant à une classe : les
   marges du héros, des chapôs, de la note sous les options et du prix
   tombaient à zéro (pastille, H1 et chapô collés), et les titres voulus en
   600 sortaient en 700. Même piège, même parade que public/accueil-style.css.
   ========================================================================== */

/* Montserrat. z-style.css pose `a` et `p { font-family: Montserrat }` : 170
   textes de la page sortaient dans une troisième police, et deux boutons
   voisins en avaient deux (« Voir l'offre » est un <a>, « Détails » un
   <button>). */
.sj :where(a, p, b, strong, em, small, span, div, li, dt, dd, label,
           button, input, select, textarea, summary, figcaption) {
  font-family: inherit;
}

/* Titres. Bootstrap impose aussi `line-height: 1.1` par type : un nom de jeu
   sur deux lignes avait ses lignes qui se touchaient. */
.sj :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--sj-titre);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.sj :where(p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.sj :where(ul, ol) { padding: 0; list-style: none; }
/* Bootstrap met les <label> en gras avec une marge basse de 5 px. */
.sj :where(label) { margin: 0; font-weight: inherit; max-width: none; }
.sj :where(img) { max-width: 100%; height: auto; }
.sj :where(button) { cursor: pointer; }

/* Liens. :where(.sj) et non .sj : écrite `.sj a`, la couleur battait tous
   les boutons qui sont des <a>. Le survol ET le focus sont repris, parce que
   Bootstrap pose `a:focus { color: #23527c; text-decoration: underline }`. */
:where(.sj) a { color: var(--sj-lien); text-decoration: none; }
:where(.sj) a:hover,
:where(.sj) a:focus { color: var(--sj-accent-fonce); text-decoration: none; }

/* ────────────────────────────────────────────────────────────────────────
   [hidden] DOIT GAGNER SUR TOUT `display` DE LA PAGE.

   `hidden` est un style d'agent utilisateur : sa specificite est nulle, donc
   la moindre regle de ces feuilles le bat. Concretement, le bouton de
   commande du sur-mesure porte .sj-btn { display: inline-flex } et restait
   affiche malgre son attribut — deux boutons de commande cote a cote, dont un
   qui contredisait l'autre.

   Le defaut ne se voit qu'a l'execution : le balisage est juste, le
   JavaScript pose bien l'attribut, et aucun test de chaines ne le remarque.
   ──────────────────────────────────────────────────────────────────────── */
.sj [hidden] { display: none !important; }

/* ==========================================================================
   Focus, sélection, champs
   ========================================================================== */

/* LE FOCUS NE CHANGE PAS LA FORME DE L'ÉLÉMENT. La règle portait
   `border-radius: 6px` : au clavier, les filtres en pilule, l'interrupteur
   et la croix ronde devenaient des rectangles. Le contour suit déjà le
   rayon de l'élément. (0,2,0) : il bat le `a:focus` de Bootstrap (0,1,1). */
.sj :focus-visible {
  outline: 2px solid var(--sj-focus);
  outline-offset: 2px;
}
/* Au clic, rien : Bootstrap dessine sinon son propre anneau sur `a:focus`. */
.sj :focus:not(:focus-visible) { outline: none; }
.sj--sombre :focus-visible { outline-color: var(--sj-focus-sombre); }

/* z-normalize.css sélectionne en BLANC sur un voile bleu clair : 1,4:1 sur
   une page claire, le texte sélectionné disparaissait. */
.sj ::selection { background: rgba(21, 112, 239, .2); color: var(--sj-texte); }
.sj--sombre ::selection { background: rgba(143, 192, 255, .35); color: #fff; }

/* Un texte d'exemple reste un texte : 5,18:1 sur blanc. `opacity: 1` parce
   que Firefox l'atténue de lui-même. */
.sj ::placeholder { color: var(--sj-texte-3); opacity: 1; }

.sj-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* LA ZONE SÛRE DES CÔTÉS. Le gabarit déclare `viewport-fit=cover` : couché,
   un iPhone à encoche étend la page sous l'encoche et les coins arrondis, et
   iOS n'y ajoute plus de marge. La gouttière de 20 px y posait le texte sous
   l'encoche (47 à 59 px). Sans encoche, env() vaut 0 et rien ne change. */
.sj-conteneur {
  width: 100%;
  max-width: var(--sj-max);
  margin-inline: auto;
  padding-left: max(var(--sj-gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sj-gouttiere), env(safe-area-inset-right, 0px));
}

/* D1 : « Commande en ligne bientôt ouverte », une ligne près du titre, pas un
   bandeau — sous le titre du catalogue, et sous l'en-tête de la page d'offre. */
.sj-info {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sj-texte-2);
}
.sj-info svg { flex: 0 0 auto; margin-top: 1px; color: var(--sj-accent); }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────
   Celui de la page d'offre et celui de la page d'un jeu à venir. Les
   séparateurs sont dessinés : un « › » écrit serait lu à voix haute. */
.sj-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  font-size: 13.5px;
  color: var(--sj-texte-3);
}
.sj-ariane li { display: inline-flex; align-items: center; min-width: 0; }
.sj-ariane li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
/* Le lien fait 22 px de haut : sa zone de toucher s'étend à 44 px sans
   déplacer la ligne. */
.sj-ariane a { position: relative; color: var(--sj-texte-2); }
.sj-ariane a::after { content: ""; position: absolute; inset: -11px -4px; }
.sj-ariane a:hover,
.sj-ariane a:focus { color: var(--sj-accent); }
.sj-ariane [aria-current] { color: var(--sj-texte); font-weight: 600; overflow-wrap: anywhere; }

/* ==========================================================================
   Boutons — ceux de l'accueil (.ac-btn) et de /contact

   48 px, 15 px en 600, rayon 10, AUCUNE ombre : le halo bleu sous chaque
   bouton plein n'existe nulle part ailleurs sur le site. La hauteur est un
   plancher (`min-height`) : un libellé qui passe sur deux lignes à 320 px
   agrandit le bouton au lieu de déborder.
   ========================================================================== */
.sj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--sj-rayon-sm);
  font-family: var(--sj-texte-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s, border-color .16s, color .16s;
}
.sj-btn svg { flex: 0 0 auto; }

/* `.sj` devant : (0,2,0) bat `:where(.sj) a:hover` et le `a:focus` de
   Bootstrap, qui repeindraient sinon le libellé d'un bouton-lien. */
.sj .sj-btn--primaire {
  background: var(--sj-accent);
  border-color: var(--sj-accent);
  color: #fff;
}
.sj .sj-btn--primaire:hover,
.sj .sj-btn--primaire:focus {
  background: var(--sj-accent-fonce);
  border-color: var(--sj-accent-fonce);
  color: #fff;
}

/* Le bouton secondaire de la maquette : blanc, filet gris, texte encre ; le
   survol passe le filet et le texte au bleu. */
.sj .sj-btn--secondaire {
  background: var(--sj-carte);
  border-color: var(--sj-bord-secondaire);
  color: var(--sj-texte-2);
}
.sj .sj-btn--secondaire:hover,
.sj .sj-btn--secondaire:focus {
  background: var(--sj-accent-survol);
  border-color: var(--sj-accent);
  color: var(--sj-accent);
}

/* Petit : dans une carte, deux boutons côte à côte font ~118 px chacun à
   1440 ; le padding de la base les ferait déborder. */
.sj-btn--sm { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* fp-responsive.css relève les commandes à 40 px sous 768 px avec
   `.fpr-contenu a[class*="btn"]:not([data-fpr-garder])`, (0,3,1), chargé
   APRÈS cette feuille. Pour nous c'est un plafond, pas un plancher : il
   ramenait les boutons de 48 à 40 px. Même parade que l'accueil — reprendre
   le :not() à l'identique pour passer à (0,4,0). */
.fpr-contenu .sj .sj-btn:not([data-fpr-garder]) { min-height: 48px; }
.fpr-contenu .sj .sj-btn--sm:not([data-fpr-garder]) { min-height: 44px; }

/* ==========================================================================
   Badges et étiquettes — 12 px au moins

   Le badge « Prochainement » est le SEUL signal qu'un jeu ne se commande pas
   encore : il était en 10,5 px sur 70 cartes.

   .sj-badge        pastille posée en haut à gauche d'un visuel ;
                    `--flux` la remet dans le flux du texte.
   .sj-badge--douce bleu pâle, pour une mention qui ne doit pas rivaliser
                    avec le bouton d'action (ex. « Recommandée »).
   .sj-etiq         petite étiquette DANS une commande (« −15 % »).
   ========================================================================== */
.sj-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: #fff;
  background: var(--sj-accent);
  pointer-events: none;
}
.sj-badge--flux { position: static; }
/* Sur fond bleu pâle, le texte passe au bleu foncé : #1570ef n'y tient que
   3,99:1, #0f5ed4 y tient 5,1:1. */
.sj-badge--douce { background: var(--sj-accent-clair); color: var(--sj-accent-fonce); }

/* ══════════════════════════════════════════════════════════════════════════
   LA PASTILLE « PROCHAINEMENT ».

   Elle ne doit PAS ressembler à une pastille d'action. Le bleu de la
   pastille par défaut est celui des boutons de la page : posé sur un jeu
   qu'on ne peut pas encore commander, il invite à cliquer là où il n'y a
   rien.

   Ardoise sourde, texte clair : elle se lit sans appeler. Le contraste reste
   au-dessus de 4,5:1 (8,5:1 posée sur du blanc), parce qu'une mention qu'on
   ne lit pas ne prévient personne — et c'est justement son seul rôle.
   ══════════════════════════════════════════════════════════════════════════ */
.sj-badge--bientot {
  background: rgba(15, 26, 45, .82);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #E8EEF8;
}

/* L'ÉTIQUETTE LIT SES COULEURS DANS DEUX PROPRIÉTÉS, et c'est ce qui la
   garde lisible sur une commande active peinte en bleu. Le voile blanc à
   22 % d'avant laissait du blanc sur #488ff3 : 3,23:1. Sur une commande
   active, elle s'inverse en pastille blanche (bleu sur blanc, 5,76:1).

   Les trois formes d'« actif » de la page sont couvertes ; un autre balisage
   (un <label> qui ENVELOPPE son bouton radio, par exemple) pose lui-même
   --sj-etiq-fond et --sj-etiq-texte sur son état actif. */
.sj-etiq {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  background: var(--sj-etiq-fond, var(--sj-accent-clair));
  color: var(--sj-etiq-texte, var(--sj-accent-fonce));
}
.sj :is([aria-pressed="true"], [aria-checked="true"], :checked + label) {
  --sj-etiq-fond: #fff;
  --sj-etiq-texte: var(--sj-accent);
}

/* ==========================================================================
   Prix

   Un montant ne se coupe jamais : « 41,22 $ » en fin de ligne et « CA » au
   début de la suivante. Le format reste « 9,99 $ CA » à espaces ordinaires
   (celui des tests et du reste du site) ; c'est le CSS qui interdit la
   coupure.

   .sj-prix     le montant (<b> ou <strong>) suivi de sa période (<small>) ;
   .sj-montant  un montant pris dans une phrase.
   ========================================================================== */
.sj-prix {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.sj-prix :is(b, strong) {
  font-family: var(--sj-titre);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sj-texte);
}
.sj-prix small { font-size: 12px; color: var(--sj-texte-3); }
.sj-montant { white-space: nowrap; }

/* Un mot composé qui ne se coupe pas à son trait d'union : « Écrivez- » en
   fin de ligne et « nous » dessous, sur un appel à l'action à 320 px. Pas de
   trait d'union insécable (U+2011) : DM Sans n'a pas ce glyphe, il sortirait
   dans une police de secours. */
.sj-insecable { white-space: nowrap; }

/* LE FILET GARDE 16 PX D'AIR AU-DESSUS DE LUI. `margin-top: auto` le cale
   en bas de la carte, mais il vaut 0 quand les cartes d'une rangée ont la
   même hauteur : le filet touchait alors la dernière caractéristique, sur
   toutes les cartes. Le trait est donc peint DANS le bloc, 16 px sous son
   bord : l'air ne dépend plus de ce qui précède. */
.sj-prix-bloc {
  margin-top: auto;
  padding-top: 31px;   /* 16 d'air + 1 de filet + 14 */
  background: linear-gradient(var(--sj-bord), var(--sj-bord)) left 16px / 100% 1px no-repeat;
}
.sj-prix-bloc > span,
.sj-prix-bloc__label { font-size: 12.5px; color: var(--sj-texte-3); }

/* ==========================================================================
   Accordéon (FAQ du catalogue et de la page d'offre)

   Deux balisages sont lus :

     <details class="sj-accordeon">
       <summary class="sj-accordeon__tete"><span>Question</span><svg…></summary>
       <div class="sj-accordeon__corps"><p>…</p></div>
     </details>

   — le repli natif, sans script, et la recherche du navigateur ouvre le
   panneau qui contient le terme cherché (c'est le modèle de /contact) ;

     <div class="sj-accordeon"><h3><button class="sj-accordeon__tete"
       aria-expanded="false" aria-controls="…">…</button></h3>
       <div class="sj-accordeon__corps" hidden>…</div></div>

   — l'ancien, piloté par service-jeux.js, lisible tant qu'il reste en place.
   ========================================================================== */
.sj-accordeon {
  /* PAS d'`overflow: hidden` : il rognait l'anneau de focus des questions
     (0 pixel visible sur les quinze de la page). Rien ici ne dépasse du
     rayon : la tête n'a pas de fond. */
  background: var(--sj-carte);
  border: 1px solid var(--sj-bord);
  border-radius: var(--sj-rayon-sm);
  /* Une question ne s'étire jamais sur la hauteur de sa rangée : dans la
     grille à deux colonnes, ouvrir une réponse faisait de sa voisine fermée
     une case blanche de 320 px. `width` la garde pleine largeur quand son
     parent est une colonne flex. */
  align-self: start;
  width: 100%;
}

.sj-accordeon__tete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border: 0;
  /* Le rayon de la carte, moins son filet : l'anneau de focus en épouse les
     coins. Posé en permanence et non au focus — la forme ne bouge pas. */
  border-radius: calc(var(--sj-rayon-sm) - 1px);
  background: transparent;
  text-align: left;
  /* La police est redite : dans l'ancien balisage, le bouton hérite de son
     <h3>, donc de Poppins — en 500, graisse que la page ne charge pas, rendue
     en 600. Les questions de /contact et de l'accueil sont en DM Sans 500. */
  font-family: var(--sj-texte-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--sj-texte-2);
  cursor: pointer;
  list-style: none;          /* <summary> : pas de triangle natif */
}
.sj-accordeon__tete::-webkit-details-marker { display: none; }
.sj-accordeon__tete::marker { content: ""; }
.sj-accordeon__tete:hover { color: var(--sj-accent); }
.sj-accordeon__tete > span { flex: 1; min-width: 0; }
.sj-accordeon__tete svg {
  flex: 0 0 auto;
  color: var(--sj-texte-3);
  transition: transform .2s;
}
.sj-accordeon[open] > .sj-accordeon__tete svg,
.sj-accordeon__tete[aria-expanded="true"] svg { transform: rotate(180deg); }

/* L'anneau DANS la carte : rien au-dessus ne peut le rogner, et il ne
   chevauche pas la question voisine. */
.sj-accordeon__tete:focus-visible { outline-offset: -2px; }

.sj-accordeon__corps {
  padding: 0 18px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sj-texte-2);
}
/* Deux paragraphes d'une réponse s'enchaînaient sans aucun espace. */
.sj-accordeon__corps p + p { margin-top: .6em; }
/* Un lien DANS une phrase se voit sans la couleur : bleu et gris-bleu du texte
   ne s'écartent que de 1,1:1 (WCAG 1.4.1). Souligné aussi au survol et au
   focus : la règle des liens du socle retire le soulignement, à poids égal
   mais plus haut dans la feuille. */
.sj-accordeon__corps a,
.sj-accordeon__corps a:hover,
.sj-accordeon__corps a:focus { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Fiche de caractéristiques (modale du catalogue, colonne de l'offre)

   <li>{icône}<span><b>Libellé</b><small>Valeur</small></span></li>
   ========================================================================== */
.sj-fiche-specs {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sj-fiche-specs li { display: flex; align-items: flex-start; gap: 12px; }
.sj-fiche-specs svg { flex: 0 0 auto; margin-top: 3px; color: var(--sj-ico); }
.sj-fiche-specs b { display: block; font-size: 14px; font-weight: 600; color: var(--sj-texte); }
.sj-fiche-specs small {
  display: block;
  margin-top: 1px;
  /* fp-universal.css impose `small { font-size: 12px !important }` à tout
     le site : sans la même marque, la valeur restait à 12 px. */
  font-size: 13px !important;
  color: var(--sj-texte-3);
}

/* ==========================================================================
   Responsive (commun)
   ========================================================================== */
@media (max-width: 900px) {
  .sj { --sj-gouttiere: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sj *,
  .sj *::before,
  .sj *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}