/* Page des partenaires - styles partages.
 *
 * Deux pages rendent le meme catalogue : /api/partenaires.php cote
 * serveur, accessible pendant la maintenance, et /partenaires.html cote
 * navigateur, qui prendra le relais ensuite. Elles emettent les memes
 * classes « pt- » et ne stylent plus rien elles-memes.
 *
 * Reecrit le 19 aout 2026. Mes ajouts successifs par tube shell avaient
 * abime les caracteres non-ASCII en leur retirant leur premier octet.
 * Le navigateur tolere ca dans un commentaire, pas dans un `content:` :
 * une puce s'affichait « []A1 » sur toutes les cartes. Tous les glyphes
 * vivent donc desormais en echappement CSS, insensible a l'encodage.
 *
 * Deux couleurs cohabitent, et il ne faut pas les confondre :
 *   --marque  : la couleur du partenaire, sur sa carte a lui.
 *   --section : une teinte par famille d'offres, sur les en-tetes.
 */

/* Visible des lecteurs d'ecran, absente de l'affichage. Un champ sans
   libelle n'est pas navigable au clavier ni annonce a la voix. */
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================
   Ossature
   ========================================================== */

.pt-page{max-width:1560px;margin:0 auto;padding:44px 32px 96px;
  position:relative;z-index:1}

/* Trois taches au lieu d'une : le fond n'est plus un aplat noir mais
   une profondeur, et les teintes reprennent celles des familles.
   La page paraissait eteinte parce que rien ne vivait derriere. */
.pt-lueur{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 32% at 50% -6%,rgba(85,230,149,.20),transparent 70%),
    radial-gradient(38% 30% at 8% 26%,rgba(78,168,255,.11),transparent 68%),
    radial-gradient(34% 28% at 96% 62%,rgba(181,136,255,.10),transparent 66%)}

/* Texture carbone, tres discrete, derriere les lueurs de couleur : le
   fond restait un aplat noir des qu'on sortait des taches degradees. */
.pt-carbone{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.4;mix-blend-mode:overlay;
  background-image:
    linear-gradient(27deg,#000 5px,transparent 5px) 0 5px,
    linear-gradient(207deg,#000 5px,transparent 5px) 10px 0,
    linear-gradient(27deg,#0a0a0a 5px,transparent 5px) 0 10px,
    linear-gradient(207deg,#0a0a0a 5px,transparent 5px) 10px 5px,
    linear-gradient(90deg,#111 10px,transparent 10px),
    linear-gradient(#161616 25%,#0d0d0d 25%,#0d0d0d 50%,
      transparent 50%,transparent 75%,#161616 75%,#161616);
  background-size:20px 20px}

.pt-titre{font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;margin:0 0 12px;
  letter-spacing:-.02em;
  background:linear-gradient(120deg,#ffffff 18%,var(--green) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(85,230,149,.22))}
.pt-chapo{color:#C7D3CC;margin:0 0 28px;max-width:64ch;
  font-size:1.14rem;line-height:1.62}

.pt-avis{border:1px solid rgba(85,230,149,.32);border-radius:16px;
  padding:18px 22px;font-size:1.02rem;line-height:1.62;margin:0 0 34px;
  color:#DCE8E1;
  background:linear-gradient(180deg,rgba(85,230,149,.10),rgba(85,230,149,.03))}
.pt-avis strong{color:var(--green-soft)}

.pt-erreur{border:1px solid rgba(255,127,143,.45);
  background:rgba(255,127,143,.09);border-radius:14px;padding:14px 18px;
  margin:0 0 24px;color:var(--danger)}

/* ==========================================================
   Recapitulatif : le tableau que les moteurs et les IA reprennent
   le plus, place tot pour que la position dans le document compte.
   ========================================================== */

.pt-recap{margin:0 0 44px}
.pt-recap-titre{margin:0 0 8px;font-size:1.5rem;font-weight:800;
  color:#F2F5F3;letter-spacing:-.01em}
.pt-recap-sous{margin:0 0 20px;color:var(--muted);font-size:.94rem;max-width:64ch}

.pt-recap-cadre{overflow-x:auto;border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.pt-recap-table{border-collapse:collapse;width:100%;min-width:480px;font-size:.9rem}
.pt-recap-table th,.pt-recap-table td{padding:13px 18px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08)}
.pt-recap-table thead th{font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.14);white-space:nowrap}
.pt-recap-table tbody tr:last-child th,
.pt-recap-table tbody tr:last-child td{border-bottom:0}
.pt-recap-table tbody tr:hover{background:rgba(255,255,255,.03)}
.pt-recap-table th[scope="row"]{font-weight:700}
.pt-recap-table th[scope="row"] a{color:#F2F5F3;text-decoration:none}
.pt-recap-table th[scope="row"] a:hover{color:var(--green-soft);text-decoration:underline}
.pt-recap-gain{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
.pt-recap-gain-neutre{color:var(--muted);font-style:italic}

@media(max-width:640px){
  .pt-recap-table{min-width:420px;font-size:.86rem}
  .pt-recap-table th,.pt-recap-table td{padding:11px 14px}
}

/* ==========================================================
   Onglets : les offres d'un cote, le simulateur de l'autre
   ----------------------------------------------------------
   Le compteur de pas et les liens de parrainage ne repondent pas a la
   meme question. Les empiler obligeait a faire defiler l'un pour
   atteindre l'autre.
   ========================================================== */

.pt-onglets{display:flex;gap:6px;padding:5px;margin:0 0 28px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(0,0,0,.26);width:fit-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
.pt-onglets::-webkit-scrollbar{display:none}

.pt-onglet{flex:0 0 auto;min-height:44px;padding:11px 22px;border-radius:10px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:.9rem;font-weight:700;white-space:nowrap;
  font-family:inherit;transition:background .16s ease,color .16s ease}
.pt-onglet:hover{color:var(--text)}
.pt-onglet[aria-selected="true"]{background:var(--surface-2);color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.4)}
.pt-onglet:focus-visible{outline:2px solid var(--green-soft);outline-offset:2px}

.pt-volet[hidden]{display:none}

/* ==========================================================
   Barre d'outils : recherche, familles, tri
   ========================================================== */

.pt-outils{display:grid;gap:14px;margin:0 0 28px}

.pt-recherche{position:relative}
.pt-recherche input{width:100%;padding:15px 18px 15px 48px;border-radius:14px;
  font-size:1rem;color:var(--text);font-family:inherit;
  border:1px solid var(--line);background:rgba(0,0,0,.3);
  transition:border-color .16s ease,box-shadow .16s ease}
.pt-recherche input::placeholder{color:var(--muted)}
.pt-recherche input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(85,230,149,.22)}
.pt-recherche::before{content:"\1F50D\FE0E";position:absolute;left:17px;
  top:50%;transform:translateY(-50%);font-size:1rem;opacity:.5;
  pointer-events:none}

.pt-familles{display:flex;gap:6px;padding:5px;border-radius:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.26);
  overflow-x:auto;scrollbar-width:none}
.pt-familles::-webkit-scrollbar{display:none}

.pt-famille{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:10px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;font-size:.86rem;font-weight:600;
  white-space:nowrap;font-family:inherit;
  transition:background .16s ease,color .16s ease}
.pt-famille:hover{color:var(--text)}
.pt-famille[aria-pressed="true"]{color:var(--text);
  background:color-mix(in srgb,var(--section,var(--green)) 20%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--section,var(--green)) 42%,transparent)}
.pt-famille:focus-visible{outline:2px solid var(--green-soft);outline-offset:2px}
.pt-famille svg{width:15px;height:15px;flex:0 0 auto}

.pt-tri{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.8rem;color:var(--muted)}
.pt-tri-bouton{min-height:44px;padding:11px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:.8rem;font-weight:600;font-family:inherit;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.pt-tri-bouton:hover{color:var(--text);border-color:var(--line-strong)}
.pt-tri-bouton[aria-pressed="true"]{color:var(--text);
  border-color:var(--green);background:rgba(85,230,149,.12)}
.pt-tri-bouton:focus-visible{outline:2px solid var(--green-soft);outline-offset:2px}

.pt-compte{margin:0 0 18px;font-size:.85rem;color:var(--muted)}

/* ==========================================================
   Sections : une teinte par famille
   ----------------------------------------------------------
   La couleur du partenaire reste sur sa carte. Ici c'est la famille
   qu'on doit reperer d'un coup d'oeil.
   ========================================================== */

.pt-section{margin:0 0 40px}
.pt-section[hidden]{display:none}

.pt-section--banque{--section:#55e695}
.pt-section--investissement{--section:#4EA8FF}
.pt-section--cashback{--section:#B588FF}
.pt-section--applications{--section:#FFB454}
.pt-section--paris{--section:#FF7A6B}
.pt-section--autres{--section:#8E9BAE}

/* --- bandeau legal des jeux d'argent ---
   Volontairement sobre : un avertissement habille comme une promotion
   ne se lit plus comme un avertissement. Il occupe toute la largeur de
   la famille, au-dessus des cartes, jamais en bas de page. */
.pt-jeu{margin:0 0 26px;padding:18px 20px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--section) 42%,transparent);
  background:color-mix(in srgb,var(--section) 9%,#0C1512)}
.pt-jeu-age{display:flex;align-items:center;gap:10px;margin:0 0 9px;
  font-weight:800;font-size:.95rem;color:#FFF}
.pt-jeu-age span{flex:0 0 auto;padding:3px 9px;border-radius:999px;
  font-size:.8rem;letter-spacing:.02em;color:#150707;
  background:var(--section)}
.pt-jeu-texte{margin:0 0 9px;font-size:.92rem;line-height:1.55;
  font-weight:600;color:#FFEAE7}
.pt-jeu-precision{margin:0;font-size:.86rem;line-height:1.55;
  color:#C7D3CC}

.pt-cat{display:flex;align-items:center;gap:13px;margin:0 0 22px;
  font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--section,var(--muted));font-weight:700}
.pt-cat svg{width:17px;height:17px;flex:0 0 auto;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--section) 70%,transparent))}
.pt-cat::before{content:"";flex:0 0 auto;width:7px;height:7px;
  border-radius:50%;background:var(--section);
  box-shadow:0 0 12px var(--section)}
.pt-cat::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--section) 45%,transparent),transparent)}
.pt-cat-compte{flex:0 0 auto;font-size:.72rem;letter-spacing:.06em;
  color:var(--muted);text-transform:none}

/* ==========================================================
   Grille et cartes
   ========================================================== */

/* Flex plutot que grid : une rangee incomplete se centre au lieu de
   rester collee a gauche avec un trou a droite. Le `max-width` garde
   des cartes de meme largeur d'une section a l'autre - sans lui, une
   section de trois offres aurait des cartes plus larges qu'une section
   de quatre. */
.pt-grille{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.pt-carte{flex:1 1 300px;max-width:364px}

.pt-carte{position:relative;display:flex;flex-direction:column;
  overflow:hidden;border-radius:18px;padding:24px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.pt-carte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--marque);
  box-shadow:0 0 18px color-mix(in srgb,var(--marque) 65%,transparent)}

/* Une aura de la couleur du partenaire, derriere la carte. Elle est
   deja visible au repos - sur mobile il n'y a pas de survol - et
   s'intensifie quand on approche. */
.pt-carte::after{content:"";position:absolute;inset:-1px;border-radius:18px;
  pointer-events:none;opacity:.5;transition:opacity .25s ease;
  background:radial-gradient(70% 42% at 50% 0%,
    color-mix(in srgb,var(--marque) 16%,transparent),transparent 72%)}
.pt-carte:hover::after{opacity:1}

.pt-carte:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--marque) 45%,var(--line));
  box-shadow:0 18px 44px rgba(0,0,0,.5),
    0 0 34px -6px color-mix(in srgb,var(--marque) 45%,transparent)}

/* Le contenu passe devant l'aura. */
.pt-carte > *{position:relative;z-index:1}
.pt-carte[hidden]{display:none}

.pt-entete{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 16px}

.pt-logo{flex:0 0 auto;width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;font-weight:800;font-size:1.3rem;
  color:#0a0f0d;letter-spacing:-.02em;background:var(--marque);
  box-shadow:0 3px 0 rgba(0,0,0,.4),
    0 0 0 3px color-mix(in srgb,var(--marque) 22%,transparent),
    0 0 30px color-mix(in srgb,var(--marque) 55%,transparent)}
.pt-logo img{width:54px;height:54px;border-radius:14px;object-fit:cover;
  display:block}

/* La couleur de la famille, pas celle du partenaire : c'est cette
   etiquette qui doit se reperer d'un coup d'oeil avec l'en-tete de
   section, meme au milieu d'une grille de cartes aux teintes toutes
   differentes. */
.pt-etiquette{flex:0 0 auto;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;padding:5px 11px;
  border-radius:999px;color:var(--section,var(--marque));
  border:1px solid color-mix(in srgb,var(--section,var(--marque)) 38%,transparent);
  background:color-mix(in srgb,var(--section,var(--marque)) 12%,transparent)}

/* Blanc legerement adouci : le blanc pur reste reserve aux chiffres et
   au titre principal, pour que ces noms ne leur fassent pas concurrence. */
.pt-nom{margin:0 0 7px;font-size:1.52rem;font-weight:800;color:#F2F5F3;
  letter-spacing:-.015em;min-height:1.72em}

/* Hauteurs reservees. Un resume d'une ligne et un resume de trois
   decalaient tout ce qui suit, et deux cartes voisines n'alignaient
   plus ni leurs etoiles ni leurs atouts. */
.pt-resume{margin:0 0 18px;color:#B9C6BF;font-size:1rem;
  line-height:1.56;min-height:4.7em}

/* --- le chiffre --- */
.pt-gain{margin:0 0 14px;min-height:78px}
.pt-gain-nombre{display:block;font-size:2.75rem;font-weight:800;line-height:1;
  color:var(--marque);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-shadow:0 0 26px color-mix(in srgb,var(--marque) 40%,transparent)}
.pt-gain-suffixe{display:block;margin-top:6px;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:#AEBDB5;font-weight:600}
.pt-gain-forme{display:block;margin-top:5px;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:#FFC93C}

/* Un montant que la marque ne communique pas. L'afficher comme les
   autres ferait passer une absence d'information pour une promesse. */
.pt-gain-inconnu{margin:0 0 14px;font-size:.88rem;color:var(--muted);
  font-style:italic;padding:9px 12px;border-radius:10px;
  border:1px dashed var(--line-strong);
  /* Meme hauteur que le bloc chiffre : sans ca, une offre sans montant
     remonte tout le reste de sa carte. */
  min-height:78px;display:flex;align-items:center}

/* --- note publique --- */
.pt-avis-ligne{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 16px;font-size:.9rem;color:#AEBDB5;min-height:1.4em}
.pt-etoiles{position:relative;display:inline-block;flex:0 0 auto;
  font-size:1.05rem;line-height:1;letter-spacing:.1em;
  color:rgba(255,255,255,.16)}
.pt-etoiles-pleines{position:absolute;left:0;top:0;overflow:hidden;
  white-space:nowrap;color:#FFC93C;
  text-shadow:0 0 10px rgba(255,201,60,.42)}
.pt-avis-chiffre{color:var(--text);font-weight:700}

/* --- avertissement de risque : avant les atouts --- */
.pt-risque{display:flex;gap:9px;margin:0 0 14px;padding:11px 13px;
  border-radius:11px;font-size:.82rem;line-height:1.5;color:var(--text);
  border:1px solid rgba(255,201,60,.4);background:rgba(255,201,60,.1)}
.pt-risque::before{content:"\26A0\FE0E";flex:0 0 auto;color:#FFC93C}

/* --- atouts --- */
.pt-atouts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;
  align-content:start;min-height:3.4em}
.pt-atouts li{display:flex;align-items:flex-start;gap:10px;
  font-size:.95rem;color:#E4EDE8;line-height:1.5}
.pt-atouts li::before{content:"\2022";flex:0 0 auto;color:var(--marque);
  font-size:1.1rem;line-height:1.2}

/* --- repli : conditions et code --- */
.pt-detail{margin:0 0 16px;border-top:1px solid var(--line);padding-top:14px}
.pt-detail summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  min-height:40px;margin:-6px -8px;padding:6px 8px;border-radius:8px;
  list-style:none;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:#B9C6BF;
  transition:color .16s ease}
.pt-detail summary::-webkit-details-marker{display:none}
.pt-detail summary:hover{color:var(--text)}
.pt-detail summary:focus-visible{outline:2px solid var(--green-soft);
  outline-offset:3px;border-radius:4px}
.pt-detail summary::before{content:"+";flex:0 0 auto;width:18px;height:18px;
  display:grid;place-items:center;border-radius:5px;font-size:.95rem;
  line-height:1;color:var(--marque);
  border:1px solid color-mix(in srgb,var(--marque) 40%,transparent)}
.pt-detail[open] summary::before{content:"\2013"}

.pt-etapes{list-style:none;counter-reset:e;margin:14px 0 0;padding:0;
  display:grid;gap:9px}
.pt-etapes li{counter-increment:e;display:flex;align-items:flex-start;
  gap:12px;font-size:.94rem;color:#C2CFC8;line-height:1.55}
.pt-etapes li::before{content:counter(e);flex:0 0 auto;width:21px;height:21px;
  border-radius:50%;display:grid;place-items:center;font-size:.7rem;
  font-weight:800;color:#05130c;margin-top:1px;background:var(--marque);
  box-shadow:0 0 10px color-mix(in srgb,var(--marque) 50%,transparent)}

.pt-note{margin:16px 0 0;color:#B0BEB7;font-size:.92rem;line-height:1.62}

/* ==========================================================
   Code de parrainage : un encadre qu'on copie
   ----------------------------------------------------------
   Il etait noye dans un paragraphe : le selectionner a la main sur
   mobile etait le vrai frottement de la page.
   ========================================================== */

.pt-code{margin:14px 0 0}
.pt-code-label{display:block;margin:0 0 7px;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.pt-code-btn{display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;padding:13px 15px;cursor:pointer;border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;
  font-weight:700;letter-spacing:.08em;color:var(--text);text-align:left;
  /* Une feuille globale met les boutons en majuscules. Ici c'est une
     faute : « kpaglh » deviendrait « KPAGLH », et un code de parrainage
     saisi dans la mauvaise casse ne fonctionne pas. */
  text-transform:none;
  border:1px dashed color-mix(in srgb,var(--marque) 55%,transparent);
  background:color-mix(in srgb,var(--marque) 10%,transparent);
  transition:background .16s ease,border-color .16s ease}
.pt-code-btn:hover{background:color-mix(in srgb,var(--marque) 20%,transparent);
  border-style:solid}
.pt-code-btn:focus-visible{outline:3px solid var(--green-soft);
  outline-offset:2px}
.pt-code-btn svg{width:17px;height:17px;flex:0 0 auto;opacity:.65}
.pt-code-btn[data-copie="1"]{border-style:solid;border-color:var(--green);
  background:rgba(85,230,149,.18)}

/* ==========================================================
   Appel a l'action
   ========================================================== */

.pt-cta{margin-top:auto;display:block;text-align:center;padding:17px 26px;
  border-radius:13px;text-decoration:none;font-weight:800;font-size:1rem;
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  color:#04160b;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--marque) 78%,#ffffff),var(--marque));
  /* Le halo prend la couleur du partenaire et reste visible sans
     survol : sur mobile il n'y en a pas. */
  box-shadow:0 4px 0 color-mix(in srgb,var(--marque) 60%,#000000),
    0 8px 18px rgba(0,0,0,.45),
    0 0 22px 1px color-mix(in srgb,var(--marque) 34%,transparent);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.pt-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 6px 0 color-mix(in srgb,var(--marque) 60%,#000000),
    0 12px 26px rgba(0,0,0,.5),
    0 0 36px 5px color-mix(in srgb,var(--marque) 60%,transparent)}
.pt-cta:active{transform:translateY(3px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--marque) 60%,#000000),
    0 3px 8px rgba(0,0,0,.5),
    0 0 18px 2px color-mix(in srgb,var(--marque) 48%,transparent)}
.pt-cta:focus-visible{outline:3px solid var(--green-soft);outline-offset:3px}

.pt-vide{padding:40px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:16px}

.pt-pied{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.83rem;display:flex;flex-wrap:wrap;
  gap:12px 20px;align-items:center}
.pt-pied a{color:var(--muted)}
.pt-pied a:hover{color:var(--green-soft)}

.pt-pied-marque{display:inline-flex;align-items:center;gap:10px;
  text-decoration:none}
.pt-pied-marque img{display:block;border-radius:9px}
.pt-pied-marque span{font:700 12px Orbitron,sans-serif;letter-spacing:.14em;
  color:#E7F3EC}

/* La marque en tete de page : la page n'a pas de barre de navigation,
   ce lien est donc le seul rappel de qui parle - et le seul chemin
   visible vers l'accueil. */
.pt-entete-marque{display:inline-flex;align-items:center;gap:11px;
  margin:0 0 26px;text-decoration:none}
.pt-entete-marque img{display:block;border-radius:10px}
.pt-entete-marque span{font:700 14px Orbitron,sans-serif;
  letter-spacing:.16em;color:#E7F3EC}
.pt-entete-marque:hover span{color:var(--green-soft)}

/* La pastille de verification, descendue de l'en-tete : elle date la
   page sans voler la vedette au titre, et son design la demarque des
   simples liens du pied. */
.pt-kicker{display:inline-flex;align-items:center;gap:10px;
  padding:8px 15px;border-radius:999px;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;color:#C7D3CC;
  border:1px solid rgba(85,230,149,.28);
  background:linear-gradient(180deg,rgba(85,230,149,.12),rgba(85,230,149,.04))}
.pt-kicker-point{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--green);box-shadow:0 0 12px var(--green);
  animation:pt-pouls 2.6s ease-in-out infinite}

@keyframes pt-pouls{
  0%,100%{opacity:.55;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

/* ==========================================================
   Simulateur
   ========================================================== */

.si-titre{font-size:clamp(1.5rem,3.6vw,2rem);margin:0 0 10px;line-height:1.15;
  letter-spacing:-.02em}
.si-chapo{color:var(--muted);margin:0 0 26px;max-width:60ch;font-size:.95rem;
  line-height:1.6}

.si-curseur{padding:26px;border-radius:18px;margin:0 0 26px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface))}

.si-curseur-tete{display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;margin:0 0 16px}
.si-curseur-tete span{font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.si-curseur-valeur{font-size:1.9rem;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.si-curseur input[type="range"]{width:100%;height:26px;cursor:pointer;
  appearance:none;-webkit-appearance:none;background:transparent}
.si-curseur input[type="range"]::-webkit-slider-runnable-track{height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),rgba(85,230,149,.18))}
.si-curseur input[type="range"]::-moz-range-track{height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),rgba(85,230,149,.18))}
.si-curseur input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;
  width:24px;height:24px;margin-top:-8px;border-radius:50%;
  background:var(--green);border:3px solid #04160b;
  box-shadow:0 0 16px rgba(85,230,149,.6)}
.si-curseur input[type="range"]::-moz-range-thumb{width:24px;height:24px;
  border-radius:50%;background:var(--green);border:3px solid #04160b;
  box-shadow:0 0 16px rgba(85,230,149,.6)}
.si-curseur input[type="range"]:focus-visible{outline:2px solid var(--green-soft);
  outline-offset:6px;border-radius:999px}

.si-bornes{display:flex;justify-content:space-between;margin:8px 0 0;
  font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}

.si-total{margin:26px 0 0;padding:30px 24px;border-radius:16px;
  text-align:center;color:#04160b;
  background:linear-gradient(160deg,#7bf0b4,var(--green));
  box-shadow:0 0 44px rgba(85,230,149,.28)}
.si-total-titre{display:block;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;opacity:.75}
.si-total-valeur{display:block;margin:8px 0 6px;
  font-size:clamp(2.6rem,8vw,4rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.si-total-note{display:block;font-size:.88rem;font-weight:600;opacity:.85}

/* L'estimation doit se voir, pas se cacher en gris clair sous le pli :
   le chiffre au-dessus vient d'un taux moyen, pas d'un releve. */
.si-reserve{margin:16px 0 0;padding:13px 15px;border-radius:12px;
  font-size:.83rem;line-height:1.55;color:var(--text);
  border:1px solid rgba(255,201,60,.4);background:rgba(255,201,60,.1)}
.si-reserve strong{color:#FFC93C}

.si-apps{display:grid;gap:16px;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.si-app{position:relative;overflow:hidden;padding:20px;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.si-app::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--marque)}

.si-nom{margin:0 0 14px;font-size:1.1rem;font-weight:800;color:var(--text)}

.si-champ{display:block;margin:0 0 14px}
.si-champ span{display:block;margin:0 0 6px;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.si-champ input{width:100%;padding:11px 14px;border-radius:11px;
  font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text);font-family:inherit;border:1px solid var(--line);
  background:rgba(0,0,0,.3);
  transition:border-color .16s ease,box-shadow .16s ease}
.si-champ input:focus{outline:none;border-color:var(--marque);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marque) 26%,transparent)}

.si-resultat{margin:0 0 16px;padding:12px 14px;border-radius:11px;
  font-size:.86rem;line-height:1.55;color:var(--text);
  border:1px solid color-mix(in srgb,var(--marque) 32%,transparent);
  background:color-mix(in srgb,var(--marque) 10%,transparent)}
.si-resultat--attente{border-color:rgba(255,201,60,.36);
  background:rgba(255,201,60,.09)}

.si-table{width:100%;border-collapse:collapse;font-size:.82rem}
.si-table caption{text-align:left;padding-bottom:8px;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.si-table th{text-align:left;padding:6px 8px;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line)}
.si-table td{padding:7px 8px;color:var(--text);
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.si-table tr:last-child td{border-bottom:0}
.si-table th:last-child,.si-table td:last-child{text-align:right;
  color:var(--muted)}

/* --- paliers de retrait : ce qui compte, ce qui est hors de portee --- */

/* Le palier sur lequel le simulateur calcule. Le lecteur doit pouvoir
   verifier d'ou sort le chiffre sans lire le code. */
.si-retenu td{color:var(--text);font-weight:700}
.si-marque-retenu{display:inline-block;margin-left:7px;padding:1px 7px;
  border-radius:999px;font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:#04160b;
  background:var(--marque)}

/* Un palier qui demande un niveau ou une ligue reste affiche, mais il
   ne doit pas se lire comme une promesse : il est grise et etiquete. */
.si-bloque td{color:var(--muted);opacity:.72}
.si-verrou{display:inline-block;margin-left:7px;padding:1px 7px;
  border-radius:999px;font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:#FFC93C;
  border:1px solid rgba(255,201,60,.42);
  background:rgba(255,201,60,.1)}

.si-remarque{margin:10px 0 0;font-size:.8rem;line-height:1.5;
  color:#C7D3CC;padding:9px 11px;border-radius:10px;
  border-left:2px solid color-mix(in srgb,var(--marque) 55%,transparent);
  background:rgba(255,255,255,.03)}

.si-source{margin:12px 0 0;font-size:.75rem;color:var(--muted);
  font-style:italic}

/* ==========================================================
   Adaptations
   ========================================================== */

@media(min-width:1500px){
  .pt-grille{grid-template-columns:repeat(4,1fr)}
  .pt-page{padding:52px 40px 110px}
}

@media(max-width:1024px){
  .pt-page{padding:32px 20px 70px}
  .pt-grille{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

  /* Les cases « arrive prochainement » ne servent qu'a completer une
     rangee de trois. Sous cette largeur la grille en compte deux, et
     la case restante se retrouve seule sur sa ligne : une carte deux
     fois moins haute que ses voisines, qui ne dit rien. */
  .pt-carte--venir{display:none}
}

@media(max-width:640px){
  .pt-page{padding:26px 16px 60px}
  .pt-grille{grid-template-columns:1fr;gap:14px}
  .pt-carte{padding:18px}
  .pt-gain-nombre{font-size:2rem}
  .pt-onglets,.pt-familles{width:100%}
  .si-curseur{padding:20px}
  .si-total{padding:24px 18px}
  /* Une cible tactile doit faire au moins 44 px de haut. */
  .pt-code-btn{min-height:48px}
  .pt-cta{padding:16px 24px}
}

/* Le mouvement est un confort, jamais une condition d'usage. */
@media(prefers-reduced-motion:reduce){
  .pt-carte,.pt-cta,.pt-onglet,.pt-famille,.pt-code-btn{transition:none}
  .pt-carte:hover,.pt-cta:hover,.pt-cta:active{transform:none}
}

/* ==========================================================
   Cases a venir
   ----------------------------------------------------------
   Une section d'une seule offre laissait deux trous dans la rangee.
   Ces cartes les comblent et disent que la famille va s'etoffer :
   plus honnete qu'un vide, et la rangee redevient complete.
   ========================================================== */

.pt-carte--venir{border-style:dashed;
  border-color:color-mix(in srgb,var(--section,#8E9BAE) 30%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01));
  align-items:center;justify-content:center;text-align:center;
  min-height:340px}
.pt-carte--venir::before,.pt-carte--venir::after{display:none}
.pt-carte--venir:hover{transform:none;box-shadow:none;
  border-color:color-mix(in srgb,var(--section,#8E9BAE) 48%,transparent)}

.pt-venir-icone{width:56px;height:56px;border-radius:16px;display:grid;
  place-items:center;margin:0 0 18px;font-size:1.5rem;
  color:var(--section,#8E9BAE);
  border:1px dashed color-mix(in srgb,var(--section,#8E9BAE) 42%,transparent);
  background:color-mix(in srgb,var(--section,#8E9BAE) 8%,transparent)}

.pt-venir-titre{margin:0 0 8px;font-size:1.1rem;font-weight:700;color:#C7D3CC}
.pt-venir-texte{margin:0;font-size:.95rem;line-height:1.55;color:#8A978F;
  max-width:26ch}

/* ==========================================================
   Halo en mouvement sur les boutons
   ----------------------------------------------------------
   Un balayage lent traverse le bouton, puis s'accelere au survol. Le
   mouvement reste lent : un bouton qui clignote fatigue en trois
   secondes.
   ========================================================== */

.pt-cta{position:relative;overflow:hidden;isolation:isolate}

.pt-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,
    rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-120%);
  animation:pt-balayage 4.5s ease-in-out infinite}

@keyframes pt-balayage{
  0%,58%{transform:translateX(-120%)}
  86%,100%{transform:translateX(120%)}
}

.pt-cta:hover::before{animation-duration:1.5s}

/* L'anneau qui respire sous le bouton, dans la couleur du partenaire.
   Il vit derriere, donc il ne gene aucun clic. */
/* Datee sur chaque fiche plutot qu'une seule fois en tete : une
   affirmation generale se croit ou ne se croit pas, une date repetee
   se verifie. Posee juste avant le bouton, dernier element lu avant
   le clic. */
.pt-verifie{display:flex;align-items:center;gap:7px;margin:0 0 12px;
  font-size:.76rem;letter-spacing:.02em;color:var(--muted)}
.pt-verifie span{color:var(--marque);font-weight:800}

.pt-cta-halo{position:relative;margin-top:auto}
.pt-cta-halo::after{content:"";position:absolute;inset:6px 12px;
  border-radius:14px;z-index:0;pointer-events:none;
  background:var(--marque);filter:blur(17px);opacity:.34;
  animation:pt-respire 3.4s ease-in-out infinite}
.pt-cta-halo .pt-cta{position:relative;z-index:1;margin-top:0}

@keyframes pt-respire{
  0%,100%{opacity:.26;transform:scale(.97)}
  50%{opacity:.5;transform:scale(1.02)}
}

/* Soulignement anime sous les onglets et les familles. */
.pt-famille,.pt-onglet{position:relative}
.pt-famille::after,.pt-onglet::after{content:"";position:absolute;
  inset:auto 14px 5px;height:2px;border-radius:2px;
  background:var(--section,var(--green));
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease}
.pt-famille:hover::after,.pt-onglet:hover::after,
.pt-famille[aria-pressed="true"]::after,
.pt-onglet[aria-selected="true"]::after{transform:scaleX(1)}

/* Rien de tout ca ne s'impose a qui a demande moins de mouvement. */
@media(prefers-reduced-motion:reduce){
  .pt-cta::before{display:none}
  .pt-cta-halo::after{animation:none}
  .pt-famille::after,.pt-onglet::after{transition:none}
}

/* ==========================================================
   En-tete
   ----------------------------------------------------------
   La page ouvrait sur un titre seul dans le noir. Un bandeau de
   confiance, un titre en deux temps et un encadre qui ressemble a
   quelque chose donnent enfin une entree.
   ========================================================== */

.pt-hero{position:relative;margin:0 auto 48px;padding:8px 0 4px;
  max-width:980px;text-align:center;
  display:flex;flex-direction:column;align-items:center}

.pt-titre{font-size:clamp(2.5rem,7vw,4.4rem);line-height:1.02;
  margin:0 0 22px;text-wrap:balance;letter-spacing:-.035em;font-weight:800;color:#FFFFFF;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  filter:none}

/* Le mot qui porte la promesse : degrade de marque, et un soulignement
   qui suit la ligne de base plutot qu'un cadre. */
.pt-titre-fort{position:relative;display:inline-block;font-style:italic;
  background:linear-gradient(102deg,var(--green) 8%,#7BF0B4 52%,#4EA8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(85,230,149,.34))}
.pt-titre-fort::after{content:"";position:absolute;left:2%;right:2%;
  bottom:-.06em;height:.07em;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.7}

.pt-hero .pt-chapo{font-size:1.2rem;max-width:60ch;color:#C7D3CC;
  margin:0 auto 30px;text-align:center;text-wrap:balance}

/* L'encadre de transparence : une vraie carte, pas un liseré. */
/* --- l'aveu ---
   L'argument le plus rare de la page : on signale les offres dont le
   lecteur ne tire rien. Il vit sous le tableau recapitulatif, sans
   couleur de promotion : c'est un aveu, pas une accroche. */
.pt-franchise{margin:14px 0 0;padding:15px 20px;
  border-radius:14px;text-align:left;font-size:.98rem;line-height:1.6;
  color:#E4EDE8;border:1px solid rgba(255,201,60,.32);
  background:rgba(255,201,60,.07)}
.pt-franchise-chiffre{display:inline-block;min-width:1.9em;
  margin-right:4px;padding:1px 9px;border-radius:999px;
  font-weight:800;color:#0f0b02;background:#FFC93C;text-align:center}

.pt-avis{display:flex;align-items:flex-start;gap:15px;text-align:left;
  max-width:820px;
  border:1px solid rgba(85,230,149,.3);border-radius:18px;
  padding:20px 24px;margin:0;color:#DCE8E1;
  font-size:1.02rem;line-height:1.62;
  background:linear-gradient(135deg,rgba(85,230,149,.13),rgba(85,230,149,.03) 62%);
  box-shadow:0 0 40px rgba(85,230,149,.08)}
.pt-avis p{margin:0}
.pt-avis strong{color:#FFFFFF}
.pt-avis em{color:var(--green-soft);font-style:normal;font-weight:600}
.pt-avis-icone{flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  border:1px solid rgba(85,230,149,.34);
  background:rgba(85,230,149,.12)}
.pt-avis-icone::before{content:"\2139\FE0E";font-size:1rem;color:var(--green)}

/* ==========================================================
   Selecteur d'objectif
   ========================================================== */

.ob-bloc{margin:0 0 48px;padding:32px;border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}

.ob-titre{margin:0 0 10px;font-size:clamp(1.6rem,3.6vw,2.2rem);
  font-weight:800;letter-spacing:-.02em;color:#F2F5F3;line-height:1.15}
.ob-chapo{margin:0 0 26px;color:#B9C6BF;font-size:1.02rem;line-height:1.6;
  max-width:64ch}

.ob-paliers{display:grid;gap:12px;margin:0 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.ob-palier{display:flex;flex-direction:column;gap:7px;cursor:pointer;
  padding:20px 22px;border-radius:16px;text-align:left;font-family:inherit;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.26);
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.ob-palier:hover{transform:translateY(-2px);
  border-color:rgba(85,230,149,.4);background:rgba(85,230,149,.07)}
.ob-palier[aria-selected="true"]{border-color:var(--green);
  background:linear-gradient(180deg,rgba(85,230,149,.16),rgba(85,230,149,.05));
  box-shadow:0 0 0 1px rgba(85,230,149,.35),0 10px 30px rgba(0,0,0,.4)}
.ob-palier:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px}

.ob-palier-libelle{font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#9EAEA5}
.ob-palier[aria-selected="true"] .ob-palier-libelle{color:var(--green-soft)}
.ob-palier-cible{font-size:2rem;font-weight:800;color:#FFFFFF;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.ob-volet[hidden]{display:none}

.ob-contexte{margin:0 0 12px;font-size:.88rem;color:#9EAEA5;
  letter-spacing:.02em}

/* Le verdict dit la verite du catalogue, y compris quand elle deçoit. */
.ob-verdict{margin:0 0 20px;padding:14px 18px;border-radius:13px;
  font-size:1rem;line-height:1.55;color:#DCE8E1;
  border:1px solid rgba(85,230,149,.3);background:rgba(85,230,149,.09)}
.ob-verdict strong{color:var(--green);font-weight:800}
.ob-verdict--court{border-color:rgba(255,201,60,.4);
  background:rgba(255,201,60,.09)}
.ob-verdict--court strong{color:#FFC93C}

/* Le verdict se terminait sur « il manque 325 EUR », un constat sans
   suite. Le bouton donne une premiere marche a qui vient d'etre
   convaincu. */
.ob-action{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 22px}
.ob-bouton{position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:54px;padding:15px 24px;border-radius:14px;
  text-decoration:none;font-weight:800;font-size:1.02rem;
  color:#04160b;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,#8CF5B8,var(--green,#55e695));
  box-shadow:0 4px 0 color-mix(in srgb,var(--green) 62%,#000000),
    0 10px 24px rgba(0,0,0,.4);
  animation:ob-halo 2.4s ease-in-out infinite;
  transition:transform .16s ease,filter .16s ease}
.ob-bouton:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ob-bouton:active{transform:translateY(3px)}
.ob-bouton:focus-visible{outline:3px solid var(--green-soft);outline-offset:3px}
.ob-bouton strong{padding:4px 12px;border-radius:999px;
  font-size:.92rem;color:#0A1F14;
  background:rgba(4,22,11,.14);
  box-shadow:0 0 0 1px rgba(4,22,11,.18) inset}

/* Le halo respire en continu : c'est le seul element anime de la
   section, donc l'oeil tombe dessus sans qu'on ait besoin d'en faire
   plus. L'ombre portee 3D reste constante, seule la lueur varie. */
@keyframes ob-halo{
  0%,100%{box-shadow:0 4px 0 color-mix(in srgb,var(--green) 62%,#000000),
    0 10px 24px rgba(0,0,0,.4),
    0 0 18px 0 rgba(85,230,149,.25)}
  50%{box-shadow:0 4px 0 color-mix(in srgb,var(--green) 62%,#000000),
    0 10px 24px rgba(0,0,0,.4),
    0 0 46px 8px rgba(85,230,149,.55)}
}
.ob-action-note{font-size:.86rem;color:var(--muted)}

.ob-cartes{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.ob-carte{position:relative;display:flex;flex-direction:column;gap:7px;
  padding:22px;border-radius:16px;text-decoration:none;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.ob-carte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--marque)}
.ob-carte:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--marque) 55%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.45),
    0 0 26px color-mix(in srgb,var(--marque) 24%,transparent)}
.ob-carte:focus-visible{outline:3px solid var(--green-soft);outline-offset:3px}

.ob-rang{position:absolute;top:16px;right:18px;font-size:.72rem;
  font-weight:800;letter-spacing:.08em;color:#7A8880}
.ob-carte-gain{font-size:1.9rem;font-weight:800;line-height:1;
  color:var(--marque);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px color-mix(in srgb,var(--marque) 40%,transparent)}
.ob-carte-nom{font-size:1.16rem;font-weight:700;color:#F2F5F3}
.ob-carte-resume{font-size:.92rem;line-height:1.5;color:#A9B7AF;flex:1}
.ob-carte-lien{margin-top:6px;font-size:.86rem;font-weight:700;
  color:var(--marque)}

@media(max-width:640px){
  .ob-bloc{padding:22px 18px}
  .pt-avis{flex-direction:column;gap:12px;padding:18px}
}

/* ==========================================================
   FAQ : memes questions que le FAQPage du balisage, rien de plus.
   ========================================================== */

.pt-faq{margin:0 0 48px;max-width:820px}
.pt-faq-titre{margin:0 0 20px;font-size:1.5rem;font-weight:800;
  color:#F2F5F3;letter-spacing:-.01em}

.pt-faq-item{border-top:1px solid var(--line);padding:16px 0}
.pt-faq-item:last-child{border-bottom:1px solid var(--line)}
.pt-faq-item summary{display:flex;align-items:center;gap:12px;cursor:pointer;
  min-height:40px;margin:-6px -8px;padding:6px 8px;border-radius:8px;
  list-style:none;font-size:1rem;font-weight:700;color:#E7F3EC;
  transition:color .16s ease}
.pt-faq-item summary::-webkit-details-marker{display:none}
.pt-faq-item summary:hover{color:var(--green-soft)}
.pt-faq-item summary:focus-visible{outline:2px solid var(--green-soft);
  outline-offset:3px;border-radius:4px}
.pt-faq-item summary::before{content:"+";flex:0 0 auto;width:22px;height:22px;
  display:grid;place-items:center;border-radius:6px;font-size:1.05rem;
  line-height:1;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.pt-faq-item[open] summary::before{content:"\2013"}
.pt-faq-item p{margin:12px 0 0 34px;color:#C2CFC8;font-size:.94rem;
  line-height:1.6;max-width:none}

@media(prefers-reduced-motion:reduce){
  .ob-palier,.ob-carte{transition:none}
  .ob-palier:hover,.ob-carte:hover{transform:none}
  .ob-bouton{animation:none;
    box-shadow:0 4px 0 color-mix(in srgb,var(--green) 62%,#000000),
      0 10px 24px rgba(0,0,0,.4),
      0 0 26px 1px rgba(85,230,149,.32)}
  .pt-kicker-point{animation:none}
}