/* ============================================================
   123Pozicky.eu — public.css
   Styles du site vitrine (accueil). Chargé APRÈS theme.css.
   ============================================================ */

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
a{ text-decoration:none; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Inscription à la lettre d'information, dans le pied de page ── */
.foot-news{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  /* Espace ÉGAL au-dessus et au-dessous : cette zone est encadrée par deux
     filets — le sien en haut, celui de .foot-bottom en bas. Avec 4px sous le
     contenu, le second semblait collé. Les 24px laissent aussi la place au
     message d'état, qui est hors flux et se pose juste sous le formulaire. */
  padding:24px 0; margin-top:8px; border-top:1px solid rgba(255,255,255,.1);
}
.foot-news-txt{ flex:1; min-width:240px; }
.foot-news-txt h4{ margin:0 0 5px; font-size:14.5px; font-weight:600; }
.foot-news-txt p{ margin:0; font-size:12.5px; line-height:1.55; opacity:.72; }

/* Champ et bouton sur UNE SEULE ligne, jamais l'un sous l'autre.
   nowrap l'impose ; la base souple du champ (0 1 260px) le laisse rétrécir
   plutôt que de repousser le bouton. */
.foot-news-form{ display:flex; gap:8px; flex-wrap:nowrap; align-items:center; position:relative; }
.foot-news-form input[type=email]{
  height:42px; flex:0 1 260px; min-width:0; padding:0 14px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07); color:#fff; font-size:13.5px;
}
.foot-news-form input[type=email]::placeholder{ color:rgba(255,255,255,.5); }
.foot-news-form input[type=email]:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.12);
}
.foot-news-form button{
  height:42px; padding:0 22px; border:0; border-radius:var(--radius-pill); cursor:pointer;
  flex:0 0 auto; white-space:nowrap;
  background:var(--gold); color:#0B4F3C; font-size:13.5px; font-weight:700;
  transition:transform .14s ease, box-shadow .14s ease;
}
.foot-news-form button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(201,162,75,.9); }
.foot-news-form button:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

/* Pot de miel : invisible pour l'œil ET pour les lecteurs d'écran, mais présent
   dans le formulaire — un automate le remplit, une personne jamais. */
.foot-news-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
/* HORS FLUX. Avec flex-basis:100% et min-height:1em, ce message réservait une
   ligne entière dans le formulaire même vide : c'est lui qui faisait passer le
   bouton sous le champ. Il s'affiche maintenant sous le formulaire sans peser
   sur la mise en page (le formulaire porte déjà position:relative). */
.foot-news-msg{
  position:absolute; top:100%; left:14px; right:0;
  margin:4px 0 0; font-size:12px;
}
.foot-news-msg.ok{ color:var(--gold); }
.foot-news-msg.err{ color:#F0A9A6; }

/* Inscription réussie : le message PREND LA PLACE du champ et du bouton.
   Hors flux, il était calé sur la largeur du formulaire ; une fois champ et
   bouton masqués, le formulaire se réduisait à rien, et le message, large
   d'autant, s'empilait mot par mot — « C'est / noté, / merci. ». Remis dans le
   flux, c'est lui qui donne désormais sa largeur au formulaire.
   (Les messages d'ERREUR restent hors flux, sous le champ : là, le champ est
   encore affiché et le formulaire garde sa largeur.) */
.foot-news-form.is-done .foot-news-msg{
  position:static; margin:0;
  min-height:42px;                 /* hauteur du champ : rien ne saute à l'écran */
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; line-height:1.4;
}
/* Pastille de validation : le message se lit d'un coup d'œil comme une
   réussite, pas comme une simple ligne de texte doré. */
.foot-news-form.is-done .foot-news-msg::before{
  content:"\2713"; flex:0 0 auto;  /* ✓, écrit en code : indépendant de l'encodage du fichier */
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(201,162,75,.16); border:1px solid rgba(201,162,75,.45);
  font-size:13px; font-weight:700;
}

@media (max-width:720px){
  .foot-news{ flex-direction:column; align-items:stretch; gap:16px; }
  .foot-news-form input[type=email]{ flex:1; min-width:0; }
}

/* ── Désinscription : une page d'une seule phrase, arrivée depuis un e-mail.
   Elle doit rassurer et ne rien demander. ── */
.unsub-wrap{ display:flex; justify-content:center; padding-block:80px 100px; }
.unsub-card{
  max-width:520px; width:100%; text-align:center;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:20px;
  padding:44px 36px; box-shadow:0 20px 50px -30px rgba(7,51,40,.35);
}
.unsub-ico{
  width:58px; height:58px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
}
.unsub-ico svg{ width:28px; height:28px; }
.unsub-ico.ok{ background:var(--green-soft); color:var(--pine); }
.unsub-ico.bad{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.unsub-card h1{
  margin:0 0 12px; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:26px; line-height:1.3; color:var(--pine-deep);
}
.unsub-card p{ margin:0 0 26px; font-size:15px; line-height:1.65; color:var(--ink-soft); }

@media (max-width:640px){
  .unsub-wrap{ padding-block:52px 68px; }
  .unsub-card{ padding:34px 22px; }
  .unsub-card h1{ font-size:22px; }
}
section{ padding:76px 0; }
/* garde-fous anti-débordement : les enfants de grilles peuvent rétrécir */
.hero-grid > *, .bank-grid > *, .sim-card > *, .foot-grid > *, .nav > *{ min-width:0; }
img,svg{ max-width:100%; }

/* ------------------------------------------------------------ header */

/* Barre du haut. Les liens sont collés au logo et les actions poussées à droite
   (margin-left:auto) : le bloc d'actions change de largeur selon la connexion
   (« Connexion » + « Faire une demande », ou « Mon espace ») sans plus décaler
   les menus, qui étaient centrés dans l'espace restant. Liens sur une seule
   ligne (nowrap) ; sous 1100 px ils passent dans le burger.
   Touche dorée, discrète : filet or au centre de la bordure basse, soulignement
   or au survol des liens, contour or au survol de « Connexion ». */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,244,.88);
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, var(--line) 0%, rgba(201,162,75,.55) 22%, var(--gold) 50%, rgba(201,162,75,.55) 78%, var(--line) 100%);
}
.site-header .wrap{ max-width:1320px; }
/* padding-block et non « padding » : l'élément porte aussi .wrap, dont la marge
   latérale était remise à zéro — logo et burger collés au bord de l'écran. */
.nav{ display:flex; align-items:center; padding-block:14px; gap:clamp(20px, 2.4vw, 40px); }
.logo{
  display:inline-flex; align-items:center; gap:5px;   /* « 123 » collé au nom : un seul logo, pas deux blocs */
  font-family:var(--font-display); font-weight:700; font-size:20px;
  color:var(--pine-deep); letter-spacing:-.015em; white-space:nowrap;
}
.logo-word{ display:inline; }
.logo-tld{ color:var(--green-mid); }
.logo-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(155deg, var(--pine) 0%, var(--green-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:700; font-family:var(--font-mono);
}
nav.links{ display:flex; align-items:center; gap:clamp(16px, 1.7vw, 28px); font-size:14.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
nav.links a{ color:inherit; }
nav.links > a{ position:relative; padding:8px 0; transition:color .15s ease; }
nav.links > a::after{
  content:""; position:absolute; left:0; right:0; bottom:1px; height:2px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform .2s ease;
}
nav.links > a:hover{ color:var(--pine-deep); }
nav.links > a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.site-header .btn-ghost:hover{ border-color:var(--gold); box-shadow:0 8px 18px -12px rgba(201,162,75,.6); }
.site-header .nav-bar-cta.btn-primary{ box-shadow:inset 0 0 0 1px rgba(201,162,75,.35), 0 10px 22px -12px rgba(11,79,60,.55); }
/* Doublon des actions destiné au menu mobile : invisible tant que la barre
   les affiche elle-même. */
.nav-menu-cta{ display:none; }
.btn-nav{ padding:11px 20px; }
/* Sélecteur de langue : voir assets/css/lang.css (feuille unique). */
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; }
.burger span{ width:22px; height:2px; background:var(--pine-deep); border-radius:2px; }

/* ------------------------------------------------------------ hero */

.hero{ padding:76px 0 56px; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-120px; right:-160px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,143,91,.16) 0%, rgba(47,143,91,0) 70%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; }
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green-mid); background:var(--green-soft);
  padding:7px 14px; border-radius:var(--radius-pill); margin-bottom:22px;
}
.eyebrow-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-mid); }
.hero-title{
  font-size:clamp(34px,4.6vw,54px); line-height:1.06;
  letter-spacing:-.01em; color:var(--pine-deep); margin-bottom:22px;
}
.hero-title em{
  font-style:italic; color:var(--pine);
  background:linear-gradient(180deg, transparent 62%, var(--green-soft) 62%);
}
.hero-sub{ font-size:17px; color:var(--ink-soft); max-width:480px; margin-bottom:30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.trust-row{ display:flex; gap:28px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); }
.trust-row .item{ display:flex; align-items:center; gap:8px; }
.trust-row svg{ flex-shrink:0; color:var(--green-mid); }

/* Carte taux signature */
.rate-card{
  background:var(--surface-deep); border-radius:20px;
  padding:30px 30px 26px; color:#fff;
  box-shadow:var(--shadow-float);
}
.rate-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:22px; }
.rate-card-label{ font-size:13px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.rate-badge{
  background:rgba(201,162,75,.18); color:var(--gold);
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.rate-compare{ display:flex; align-items:flex-end; gap:22px; margin-bottom:20px; }
.rate-old{ font-size:26px; color:rgba(255,255,255,.4); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); }
.rate-new{ font-size:56px; font-weight:600; letter-spacing:-.02em; }
.rate-new span{ font-size:24px; vertical-align:top; position:relative; top:8px; }
.rate-delta{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(124,227,166,.15); color:var(--mint-glow);
  font-size:13px; font-weight:600; padding:5px 11px; border-radius:var(--radius-sm); margin-bottom:22px;
}
.mini-schedule{ background:rgba(255,255,255,.06); border-radius:12px; padding:16px; }
.mini-schedule-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mini-schedule-row:last-child{ border-bottom:none; }
.mini-schedule-row .m{ color:rgba(255,255,255,.55); }
.mini-schedule-row .v{ font-weight:600; }

/* ------------------------------------------------------------ section partenaires (2 pistes, modèle Eurofunded) */

.partners-section{
  position:relative; overflow:hidden; padding:72px 0;
  background-color:var(--surface-deep);
  background-image:
    radial-gradient(1100px 420px at 12% -10%, rgba(47,143,91,.38), transparent 60%),
    radial-gradient(1000px 420px at 92% 115%, rgba(201,162,75,.16), transparent 62%),
    linear-gradient(135deg, var(--surface-deep) 0%, var(--surface-deep-2) 55%, var(--pine) 130%);
}
.partners-section::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 100%);
  pointer-events:none;
}
.partners-section > *{ position:relative; z-index:1; }
.partners-section .section-eyebrow{ color:var(--mint-glow); }
.partners-title{ color:#fff; text-align:center; margin-bottom:12px; }
.partners-subtitle{ color:rgba(255,255,255,.66); max-width:640px; margin:0 auto 40px; text-align:center; font-size:15px; line-height:1.6; }
/* Aucun partenaire déclaré : la section garde son titre, et le dit simplement.
   Couleur explicite — le fond de cette section est vert profond, un texte
   laissé à la couleur d'encre par défaut y serait illisible. */
.partners-empty{
  margin:0 auto; max-width:560px; padding:22px 26px;
  text-align:center; font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.72);
  border:1px dashed rgba(255,255,255,.22); border-radius:14px;
}

.partners-marquee{
  position:relative; width:100%; overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* ⚠️ NI « gap » NI « padding » sur la piste — et ce n'est pas un détail de
   style : l'animation revient à translateX(-50%), ce qui ne retombe sur le
   second exemplaire QUE si la largeur totale vaut exactement deux fois celle
   d'un exemplaire. Un padding de piste et un gap (qui n'existe pas APRÈS la
   dernière pastille) décalaient la boucle d'une vingtaine de pixels : le
   défilement SAUTAIT à chaque cycle, toutes les 46 secondes.
   L'espacement est donc porté par la pastille elle-même (margin-right), ce qui
   rend la largeur strictement périodique et la boucle invisible. */
/* Durée calibrée sur la LONGUEUR de la piste, pas choisie au hasard : elle
   était de 46 s pour une vingtaine de pastilles. Les pistes portent désormais
   une trentaine d'établissements chacune — à durée égale, le défilement
   paraîtrait s'emballer. Allongée proportionnellement, la vitesse apparente
   reste la même. */
.partners-track{
  display:flex; width:max-content;
  animation:partnersScroll 72s linear infinite;
  /* Promotion en couche : la section porte un fond quadrillé et deux masques
     dégradés, coûteux à repeindre. Pas de translateZ(0) ici — il écraserait le
     transform que l'animation pilote. */
  will-change:transform;
  backface-visibility:hidden;
}
.partners-track--reverse{ animation-direction:reverse; animation-duration:60s; }
.partners-marquee:hover .partners-track{ animation-play-state:paused; }
@keyframes partnersScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.partner-chip{
  flex:0 0 auto; height:70px; min-width:180px; padding:0 26px; margin-right:20px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface-chip); border-radius:14px;
  box-shadow:0 12px 28px rgba(2,6,23,.30);
  font-size:14.5px; font-weight:600; color:var(--pine-deep); white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
}
.partner-chip:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(2,6,23,.42); }
/* La pastille s'ÉLARGIT pour les sigles longs : min-width et non width. Les
   noms réels ne tiennent pas tous en deux lettres — « SLSP », « ČSOB »,
   « MMB », « 365 » débordaient d'un carré de 34px calibré pour « NB ».

   Fond SOUTENU et texte blanc, comme .pros-ava et .topbar-avatar ailleurs dans
   le projet. L'ancien couple (--green-soft pâle sur --pine) se fondait dans le
   chip, qui est blanc : le sigle flottait, délavé, à côté d'un nom bien plus
   lisible que lui. Le chip étant blanc dans LES DEUX thèmes, cette règle vaut
   aussi en sombre — d'où la surcharge retirée de theme.css. */
.partner-chip .partner-mark{
  min-width:34px; height:34px; padding:0 7px; border-radius:9px;
  background:var(--pine); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
.partner-logo{ height:38px; width:auto; max-width:150px; object-fit:contain; display:block; }
@media (prefers-reduced-motion:reduce){ .partners-track{ animation:none; } }

/* ------------------------------------------------------------ sections communes */

.section-head{ max-width:640px; margin-bottom:48px; }
.section-eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--green-mid); margin-bottom:12px;
}
.section-eyebrow.mint{ color:var(--mint-glow); }
.section-head h2{ color:var(--pine-deep); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:16px; margin:0; }

/* ------------------------------------------------------------ catégories */

/* Carte = photo illustrative sous un voile vert du site, légèrement floutée,
   qui laisse deviner l'image ; le texte se pose en bas, là où le voile est le
   plus dense. La réaction reste celle d'avant : contour vert + léger soulèvement
   (au survol, et au toucher sur mobile), mais en DORÉ : un contour vert se
   perdait dans le voile vert. L'anneau intérieur double le contour. */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--pine-deep); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; min-height:290px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  color:#fff; display:flex; flex-direction:column;
}
.cat-card:hover, .cat-card:active{
  border-color:var(--gold); transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--gold), 0 16px 32px -16px rgba(201,162,75,.55);
}
.cat-photo{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none;
  object-fit:cover; filter:blur(1.5px) saturate(.9); transform:scale(1.06);   /* l'échelle masque le bord flou */
}
.cat-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(11,79,60,.42) 0%, rgba(7,51,40,.74) 50%, rgba(7,51,40,.93) 100%);
}
.cat-icon{
  width:44px; height:44px; border-radius:11px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#fff;
}
.cat-card h3{ font-size:17px; margin:auto 0 8px; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.25); }
.cat-card p{ font-size:14px; color:rgba(255,255,255,.8); margin:0 0 14px; }
.cat-rate{ font-size:13px; color:var(--mint-glow); font-weight:600; }
/* Simulateur : même construction, voile plus clair tirant vers le vert moyen. */
.cat-card-all{ border-color:transparent; }
.cat-card-all::before{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(47,143,91,.38) 0%, rgba(11,79,60,.72) 50%, rgba(7,51,40,.92) 100%);
}
@media (max-width:640px){ .cat-card{ min-height:230px; } }

/* ------------------------------------------------------------ simulateur */

.sim-section{ padding-top:60px; }
.sim-card{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--sim-bg); border:1px solid var(--sim-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.sim-left{ padding:34px; }
.sim-mode{
  display:inline-flex; gap:4px; margin-bottom:26px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px;
}
.sim-mode button{
  border:none; background:transparent; cursor:pointer;
  padding:9px 18px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.sim-mode button.active{ background:var(--pine); color:#fff; }
.sim-left select{ margin-bottom:24px; }
/* La grille des types de crédit a remplacé un <select>, qui portait ses 24 px
   de marge basse — elle est arrivée sans. « Montant » se retrouvait collé sous
   la dernière rangée de boutons, sur tous les appareils. Le libellé au-dessus
   reprend lui aussi son air : il suivait les onglets de segment d'un peu trop
   près. */
.sim-left .cat-picker{ margin-bottom:26px; }
.sim-left > label{ display:block; margin-bottom:10px; }
.sim-field{ margin-bottom:22px; }
.sim-field-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sim-field-head label{ margin:0; }
.sim-field-head output{ font-size:15px; font-weight:600; color:var(--pine); }
input[type=range]{
  width:100%; appearance:none; -webkit-appearance:none; height:6px;
  background:linear-gradient(90deg, var(--pine) var(--fill,50%), var(--line) var(--fill,50%));
  border-radius:999px; outline:none; margin:6px 0;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--bg-panel); border:2px solid var(--pine);
  box-shadow:0 1px 4px rgba(11,79,60,.25); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-panel); border:2px solid var(--pine);
  box-shadow:0 1px 4px rgba(11,79,60,.25); cursor:pointer;
}
.sim-note{ font-size:12.5px; color:var(--ink-faint); margin:18px 0 0; }

.sim-right{ background:var(--sim-right-bg); color:#fff; padding:34px; display:flex; flex-direction:column; }
.sim-monthly-label{ font-size:13px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:6px; }
.sim-monthly{ font-size:clamp(34px,3.4vw,46px); font-weight:600; color:var(--gold); margin-bottom:20px; letter-spacing:-.01em; }
.sim-rows{ margin-bottom:22px; }
.sim-row{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.sim-row span:first-child{ color:rgba(255,255,255,.6); }
.sim-row span:last-child{ font-weight:600; }
.sim-schedule{ background:rgba(255,255,255,.06); border-radius:12px; padding:16px; margin-bottom:24px; }
.sim-schedule-title{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:10px; }
.sim-schedule table{ width:100%; border-collapse:collapse; }
.sim-schedule th{
  text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:rgba(255,255,255,.5); font-weight:600; padding:4px 0 8px;
}
.sim-schedule th:first-child, .sim-schedule td:first-child{ text-align:left; }
.sim-schedule td{
  text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:12.5px; padding:6px 0; border-top:1px solid rgba(255,255,255,.08);
}
.sim-cta{ margin-top:auto; align-self:flex-start; }

/* ------------------------------------------------------------ étapes */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step{ position:relative; padding:0 20px 0 0; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:22px; right:-9px; width:18px; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
}
.step-num{
  font-size:13px; font-weight:600; color:var(--green-mid);
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--green-mid);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; background:var(--bg-panel);
}
.step h3{ font-size:16.5px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ------------------------------------------------------------ banking */

.bank-section{
  background:var(--surface-deep); border-radius:28px; padding:60px; color:#fff;
  position:relative; overflow:hidden;
}
.bank-section::after{
  content:""; position:absolute; bottom:-140px; left:-100px; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,.12) 0%, transparent 70%);
}
.bank-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; position:relative; }
.bank-grid h2{ color:#fff; }
.bank-grid p.desc{ color:rgba(255,255,255,.68); font-size:16px; margin-bottom:24px; }
.bank-feat{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.bank-feat svg{ flex-shrink:0; margin-top:2px; color:var(--mint-glow); }
.bank-feat div b{ display:block; font-size:14.5px; margin-bottom:2px; }
.bank-feat div span{ font-size:13.5px; color:rgba(255,255,255,.6); }

.dash-mock{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:26px;
}
.dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.dash-top .acc{ font-size:13px; color:rgba(255,255,255,.55); }
.dash-top .amt{ font-size:30px; font-weight:600; }
.dash-chip{ background:rgba(124,227,166,.15); color:var(--mint-glow); font-size:12px; font-weight:700; padding:5px 10px; border-radius:7px; }
.dash-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:20px; }
.dash-cal span{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:11px; border-radius:6px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.45);
}
.dash-cal span.due{ background:var(--gold); color:var(--pine-deep); font-weight:700; }
.dash-cal span.out{ opacity:.45; }   /* jours du mois précédent, avant l'échéance */
.dash-row{ display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
.dash-row .l{ color:rgba(255,255,255,.55); }
.dash-row .r{ font-weight:600; }

/* ------------------------------------------------------------ témoignages (carrousel) */

.testi-section{ padding-bottom:60px; }
.testi-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none; }
.testi-arrows{ display:flex; gap:10px; flex-shrink:0; }
.testi-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-panel); color:var(--pine-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.testi-arrow:hover{ border-color:var(--pine); background:var(--green-soft); }
.testi-track{
  display:flex; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{
  flex:0 0 360px; scroll-snap-align:start;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:26px; margin:0;
  display:flex; flex-direction:column;
}
.testi-stars{ color:var(--gold); display:flex; gap:3px; margin-bottom:14px; }
.testi-card blockquote{ margin:0 0 20px; font-size:14.5px; color:var(--ink); line-height:1.6; }
.testi-card figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--green-soft); color:var(--pine);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px;
}
.testi-card figcaption b{ display:block; font-size:14px; }
.testi-card figcaption em{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-soft); }

.testi-more{ margin-top:8px; text-align:center; }

/* ------------------------------------------------------------ page témoignages */

.tpage-hero{ padding:56px 0 8px; }
.tpage-hero .section-head{ margin-bottom:0; }
.tpage-count{ margin-top:14px; color:var(--green-mid); font-weight:600; font-size:14px; }
.tpage-list{ padding:40px 0 56px; }
.tpage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tpage-grid .testi-card{ flex:none; }
.tpage-pager{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-top:36px; color:var(--ink-soft); font-size:14px;
}

.tform-section{ padding:0 0 76px; }
.tform{ max-width:720px; margin:0 auto; padding:36px; }
.tform-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.tform textarea{ resize:vertical; margin-bottom:18px; }
.tform-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tform-msg{ font-size:14px; font-weight:500; }
.tform-msg.is-ok{ color:var(--status-approved-text); }
.tform-msg.is-err{ color:var(--status-rejected-text); }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.star-picker{ display:flex; gap:6px; padding:10px 0 0; }
.star-picker button{
  background:none; border:none; cursor:pointer; padding:2px;
  color:var(--line-strong); transition:color .1s ease, transform .1s ease;
}
.star-picker button svg{ width:24px; height:24px; }
.star-picker button.on{ color:var(--gold); }
.star-picker button:hover{ transform:scale(1.15); }

/* ------------------------------------------------------------ page produit */

.ppage-hero{ padding:64px 0 40px; position:relative; isolation:isolate; overflow:hidden; }

/* Photo du produit (la même que sa carte d'accueil) derrière le haut de page,
   sous un voile doré : crème presque opaque à gauche où se lit le texte, qui
   s'éclaircit vers la droite pour laisser voir l'image autour de la carte des
   conditions, halo or en haut à droite, fin filet doré, et fondu vers le fond
   de page en bas pour que la section s'incruste sans bord visible. */
.ppage-photo{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ppage-photo img{
  width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  filter:blur(2px) saturate(.8) sepia(.18); transform:scale(1.04);   /* l'échelle masque le bord flou */
}
.ppage-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 60%, var(--bg) 100%),
    repeating-linear-gradient(135deg, rgba(201,162,75,.07) 0 1px, transparent 1px 9px),
    radial-gradient(900px 520px at 88% 10%, rgba(201,162,75,.30), transparent 70%),
    linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-mid) 36%, var(--veil-warm) 60%, var(--veil-edge) 100%);
}
.ppage-hero.has-photo .rate-card{ box-shadow:0 0 0 1px rgba(201,162,75,.4), var(--shadow-float); }
@media (max-width:980px){
  /* Une seule colonne : le texte passe par-dessus toute la largeur, le voile
     devient vertical et laisse l'image apparaître surtout en haut. */
  .ppage-photo::after{
    background:
      linear-gradient(180deg, var(--veil-warm) 0%, var(--veil-mid) 34%, var(--veil-strong) 70%, var(--bg) 100%),
      repeating-linear-gradient(135deg, rgba(201,162,75,.08) 0 1px, transparent 1px 9px),
      radial-gradient(600px 380px at 90% 0%, rgba(201,162,75,.34), transparent 70%);
  }
}
.ppage-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
.ppage-grid > *{ min-width:0; }
.ppage-title{
  font-size:clamp(30px,4vw,46px); line-height:1.08;
  color:var(--pine-deep); margin-bottom:18px; letter-spacing:-.01em;
}
.ppage-bullets{ margin:26px 0 30px; }
.ppage-feat svg{ color:var(--green-mid); }
.ppage-feat div b{ color:var(--ink); font-size:15px; }
.ppage-side{ display:flex; flex-direction:column; gap:18px; }
.ppage-example{ margin-top:18px; background:rgba(255,255,255,.06); border-radius:12px; padding:16px; }
.ppage-example-body{ font-size:13.5px; color:rgba(255,255,255,.85); margin:0 0 10px; line-height:1.6; }
.ppage-example-note{ font-size:12px; color:rgba(255,255,255,.5); margin:0; }
.ppage-docs h3{ margin-bottom:14px; }
.ppage-docs ul{ list-style:none; margin:0; padding:0; }
.ppage-docs li{
  font-size:14px; color:var(--ink-soft);
  padding:9px 0 9px 26px; position:relative;
  border-bottom:1px solid var(--line);
}
.ppage-docs li:last-child{ border-bottom:none; }
.ppage-docs li::before{
  content:""; position:absolute; left:2px; top:14px;
  width:8px; height:8px; border-radius:50%;
  background:var(--green-soft); border:2px solid var(--green-mid);
}
.ppage-cta{ padding-top:20px; }

/* ------------------------------------------------------------ FAQ */

.faq-section{ padding:64px 0 76px; }
.faq-list{ max-width:760px; }
.faq-item{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:12px;
  transition:border-color .15s ease;
}
.faq-item[open]{ border-color:var(--green-mid); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; list-style:none;
  padding:18px 22px;
  font-weight:600; font-size:15.5px; color:var(--pine-deep);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-chevron{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--green-soft); color:var(--pine);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600;
  transition:transform .15s ease;
}
.faq-item[open] .faq-chevron{ transform:rotate(45deg); }
.faq-item p{ margin:0; padding:0 22px 20px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }

/* ------------------------------------------------------------ contact */

.cpage-section{ padding:64px 0 76px; }
.cpage-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:start; }
.cpage-grid > *{ min-width:0; }
.cpage-info h3{ margin-bottom:18px; }
.cpage-info-row{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px; color:var(--ink-soft);
  padding:10px 0; border-bottom:1px solid var(--line);
}
.cpage-info-row:last-child{ border-bottom:none; }
.cpage-info-row svg{ color:var(--green-mid); flex-shrink:0; }
.cpage-form{ max-width:none; margin:0; }

/* ------------------------------------------------------------ pages légales */

.legal-section{ padding:64px 0 76px; }
.legal-page{ max-width:760px; }
.legal-page h1{ font-size:clamp(28px,3.6vw,40px); color:var(--pine-deep); margin-bottom:8px; }
/* 28px sous la date : l'espace que tenait le bandeau « Document de travail »,
   retiré le 2026-09-19 à la demande de l'utilisateur. */
.legal-meta{ font-size:13px; color:var(--ink-faint); margin-bottom:28px; }
.legal-page h2{
  font-family:var(--font-body); font-weight:600;
  font-size:17px; color:var(--pine-deep);
  margin:28px 0 8px;
}
.legal-page p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; }

/* ------------------------------------------------------------ CTA + footer */

.cta-band{
  background:var(--cta-bg); border:1px solid var(--cta-line);
  border-radius:var(--radius-lg); padding:56px 60px; text-align:center;
}
.cta-band h2{ color:var(--pine-deep); margin-bottom:14px; }
.cta-band p{ color:var(--ink-soft); margin-bottom:28px; font-size:16px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-white{ background:var(--bg-panel); }

/* Pied de page : NOIR FRANC dans les deux thèmes, sur toutes les pages du site.
   Il était déjà écrit pour un fond foncé — champ e-mail en blanc, filets en
   rgba(255,255,255,…) — mais AUCUNE règle ne lui donnait de fond : en thème
   clair, le texte blanc du champ se posait donc sur le fond clair de la page.
   Le noir referme la page et la détache du corps du site, clair comme sombre.
   Conséquence : les couleurs de texte ne peuvent plus suivre --ink-soft, qui
   est sombre en thème clair et deviendrait illisible ici. */
footer{
  background:#04100C; color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.10);
  padding:48px 0 30px; margin-top:20px;
}
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.foot-logo{ margin-bottom:14px; }
/* Le logo porte --pine-deep : vert sombre en thème clair, invisible sur noir. */
footer .logo{ color:#fff; }
.foot-desc{ font-size:14px; color:rgba(255,255,255,.60); max-width:280px; }
.foot-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.52); margin-bottom:16px; font-weight:600; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot-grid ul a{ font-size:14px; color:rgba(255,255,255,.74); transition:color .15s ease; }
.foot-grid ul a:hover{ color:var(--gold); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13px; color:rgba(255,255,255,.55); padding-top:24px; border-top:1px solid rgba(255,255,255,.10);
}

/* ------------------------------------------------------------ responsive */

/* Burger sous 1280 px (et non plus 980) : en dessous, les cinq liens, la langue
   et les deux boutons ne tiennent pas sur une ligne. Mesuré sur les libellés les
   plus longs (roumain, français, allemand, grec) : à 1250 px le français
   touchait déjà le sélecteur de langue. Un écran de 1280 px garde les liens. */
@media (max-width:1279px){
  nav.links{ display:none; }
  /* Les actions quittent la barre pour le menu : à cette largeur, la barre
     n'a la place que du logo, de la langue et du burger. */
  .nav-bar-cta{ display:none; }
  .burger{ display:flex; }
  .site-header.nav-open nav.links{
    display:flex; flex-direction:column; align-items:stretch; gap:18px; white-space:normal;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-panel); border-bottom:1px solid var(--line);
    padding:22px 24px 24px;
    box-shadow:0 24px 40px -26px rgba(7,51,40,.5);
    max-height:calc(100dvh - 100%); overflow-y:auto;
  }
  .site-header.nav-open nav.links a{ padding:2px 0; }
  .site-header.nav-open nav.links > a::after{ display:none; }
  .nav-menu-cta{
    display:flex; flex-direction:column; gap:10px;
    margin-top:6px; padding-top:18px; border-top:1px solid var(--line);
  }
  .nav-menu-cta .btn{ width:100%; justify-content:center; padding:12px 16px; }
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .rate-card{ max-width:460px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .sim-card{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .step::after{ display:none; }
  .bank-grid{ grid-template-columns:1fr; gap:36px; }
  .bank-section{ padding:40px 26px; }
  .testi-head{ flex-direction:column; align-items:flex-start; }
  .tpage-grid{ grid-template-columns:1fr 1fr; }
  .ppage-grid{ grid-template-columns:1fr; gap:32px; }
  .cpage-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:600px){
  .wrap{ padding:0 16px; }
  section{ padding:48px 0; }
  .hero{ padding:36px 0 32px; }

  /* header compact : plus aucun débordement à 360px */
  .nav{ padding-block:12px; gap:8px; }
  .site-header .wrap{ padding-inline:20px; }   /* logo et burger décollés des bords */
  .logo{ font-size:16px; gap:4px; }
  .logo-mark{ width:28px; height:28px; font-size:12px; border-radius:7px; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-primary{ padding:9px 13px; font-size:12.5px; }
  .burger{ padding:4px; }

  .hero-sub{ font-size:15.5px; }
  .rate-card{ padding:22px 18px; max-width:none; }
  .rate-compare{ gap:14px; }
  .rate-old{ font-size:20px; }
  .rate-new{ font-size:42px; }
  .rate-card-top{ flex-direction:column; gap:8px; }
  .trust-row{ gap:12px; flex-direction:column; align-items:flex-start; }

  .partners-section{ padding:52px 0; }
  /* margin-right et non « gap » sur la piste : l'espacement doit rester porté
     par la pastille, sinon la boucle à -50% se décale et le carrousel saute
     (voir le commentaire de .partners-track). */
  .partner-chip{ font-size:13px; height:60px; min-width:150px; padding:0 18px; margin-right:14px; }
  .partner-logo{ height:32px; max-width:120px; }

  .cat-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .sim-left,.sim-right{ padding:22px 18px; }
  .sim-monthly{ font-size:32px; }
  .sim-mode{ width:100%; }
  .sim-mode button{ flex:1; padding:9px 8px; font-size:12.5px; }

  .bank-section{ padding:32px 18px; border-radius:20px; }
  .dash-mock{ padding:18px; }
  .dash-top .amt{ font-size:24px; }

  .testi-card{ flex:0 0 86%; padding:20px; }
  .testi-arrow{ width:40px; height:40px; }
  .tpage-grid{ grid-template-columns:1fr; }
  .tform{ padding:24px 18px; }
  .tform-row{ grid-template-columns:1fr; gap:0; }
  .tform-row > div{ margin-bottom:18px; }

  .cta-band{ padding:36px 20px; }
  .cta-actions .btn{ width:100%; }
  /* Pied de page entièrement CENTRÉ sur mobile : réduit à une seule colonne, un
     alignement à gauche laissait des blancs irréguliers à droite. Le champ et
     son bouton gardent leur ligne commune et occupent toute la largeur. */
  footer{ text-align:center; }
  .foot-grid{ grid-template-columns:1fr; justify-items:center; }
  .foot-desc{ margin-inline:auto; }
  .foot-grid ul{ align-items:center; }
  .foot-news{ align-items:center; }
  .foot-news-txt{ min-width:0; }        /* 240px débordait sur un écran de 280px */
  .foot-news-form{ justify-content:center; width:100%; }
  /* Pas de padding propre ici : les 24px symétriques du bureau valent aussi en
     mobile. Ils suffisent au message d'état, qui est hors flux et tient sur
     deux lignes sur un écran étroit sans atteindre le texte du bas. */
  .foot-news-msg{ left:0; text-align:center; }
  /* Mobile : le message de réussite se centre comme le reste du pied de page,
     et peut passer sur deux lignes sans jamais s'écraser. */
  .foot-news-form.is-done .foot-news-msg{ justify-content:center; }
  .foot-bottom{ flex-direction:column; align-items:center; }
}