/* ============================================================
   SAWAKONEKT — Design system partagé (pages partenaires)
   Aligné sur index.html : palette safou/teal, Sora/Inter
============================================================ */
:root{
  --safou:#FF6B35;--safou-600:#E85620;--teal:#0A9396;--teal-700:#07747A;--gold:#F4A261;--sable:#FEFBF6;
  --ink:#141B26;--ink-soft:#3A4453;--muted:#6B7686;--line:#ECE4D7;--surface:#FFFFFF;--midnight:#0A1320;--midnight-soft:#111E2E;
  --radius:18px;--radius-sm:12px;--radius-lg:28px;

  /* ── ENCRES DÉRIVÉES DU KIT — reprises telles quelles de app.css ────────────
     Elles n'étaient définies NULLE PART ici. Les pages partenaires ne chargent
     que `partners.css` (jamais `app.css`) : les sept encres que T7 a calibrées
     pour être lisibles n'existaient donc pas sur la façade, et celle-ci peignait
     son texte avec `--safou-600` — une couleur de REMPLISSAGE. D'où « Conditions
     Générales » SOUS LE SEUIL sur quatre pages, et le lavis safou sur cinq.
     Symptôme le plus net : `.reserve-modele` s'écrivait déjà
     `var(--muted-600,#5b6470)` — le repli tirait à chaque rendu depuis le jour
     de son écriture, sans erreur, sans avertissement. Une variable non définie
     ne se plaint pas ; elle se contente de rendre une autre couleur.
     Aucune valeur nouvelle : ces treize lignes sont la copie du kit, portée là
     où il manquait. Toute NOUVELLE teinte remonte à T7 avec son cas.
     ⚠ Source unique = app.css l.41-56. Ne pas faire diverger. */
  --muted-600:#677281;   /* texte secondaire sur clair */
  --safou-700:#DB3B00;   /* variante portant un libellé BLANC */
  --rouge:#DB242A;       /* état d'échec, sur blanc */
  --rouge-wash:#FBE9EA;--teal-wash:#E6F1F2;--gold-wash:#FEF6EF;--safou-wash:#FFF0EB;
  --encre-warn:#B5570D;  /* encre d'attente — sur son lavis et sur sable */
  --encre-err:#D12228;   /* encre d'échec — sur son lavis et sur sable */
  --encre-safou:#AE3C12; /* encre safou — sur son lavis et sur sable */
  /* ⚠ UN CHIFFRE APPARTIENT AU HEX DE SA LIGNE. Ces deux annotations portaient
     encore les ratios EXACTS de #6A7585 et #CF3700 — les valeurs que T7 a remplacées
     après que je les aie importées. Le commentaire
     ne bouge pas quand la couleur bouge — et un seuil juste posé à côté d'une
     valeur fausse est plus dangereux qu'aucun seuil, parce qu'il se relit comme
     une vérification. Recalculés contre les hex réellement présents. */
  --encre-neutre:#636D7C;
  /* Encre secondaire sur fond SOMBRE. Elle n'existait que dans `index.html` ; T7
     l'a déclarée dans `app.css`, elle se branche donc ici comme les autres. Sans
     elle, une page partenaire qui a besoin d'un gris lisible sur nuit n'avait
     que deux issues : une teinte posée à l'œil, ou un littéral recopié — c'est la
     seconde qui s'est produite (cf. `.codeblock .c`, corrigé dans le même lot).
     ⚠ VALEUR RELEVÉE le 2026-08-26 par T7 (#7D8897 → #909AA6), au titre de la
     remontée demandée ci-dessous : la famille sombre est un token de kit, T2 avait
     raison de ne pas trancher ici. L'ancienne tenait sur les deux fonds NUS
     et tombait SOUS LE SEUIL dès qu'une carte posait son voile blanc — vraie
     là où on l'avait mesurée, fausse là où on allait la poser. Les deux chiffres
     ci-dessus appartenaient au hex qu'ils accompagnaient : ils partent avec lui.
     ✅ `--sur-sombre` est ARBITRÉ : il devient `--ink-soft-sombre` (#BFC2C5) et il
     EST déclaré dans `app.css`. Son ancien nom disait son fond, pas son rang. La
     famille sombre miroite désormais la claire : blanc / --ink-soft-sombre /
     --muted-sombre  ↔  --ink / --ink-soft / --muted-600. Reprise ici quand une
     page partenaire en aura besoin — aucune ne l'emploie aujourd'hui. */
  --muted-sombre:#909AA6; /* rang 3 sur nuit — tient jusqu'au pire fond de carte sombre */
  --line-carte:#D8C7AC;--line-fort:#AF8D56;
  --shadow-sm:0 2px 8px rgba(20,27,38,.05);--shadow:0 18px 40px -18px rgba(20,27,38,.22);--shadow-lg:0 40px 80px -30px rgba(20,27,38,.35);
  --maxw:1100px;--ease:cubic-bezier(.22,1,.36,1);
  --grad-bridge:linear-gradient(90deg,var(--teal) 0%,var(--gold) 50%,var(--safou) 100%);
  --grad-warm:linear-gradient(135deg,var(--safou) 0%,var(--gold) 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--sable);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora', sans-serif;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink)}
p{margin:0}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}
::selection{background:var(--safou);color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(56px,9vw,110px);position:relative}
/* ⚠ LAVIS SOLIDES, PAS DES rgba(). Un lavis translucide laisse remonter le fond
   de section : la MÊME pastille rendait TROIS contrastes différents selon
   la section qui remontait dessous — un seul code source, aucun maîtrisé. `--teal-wash`/`--safou-wash` sont opaques : le résultat ne dépend
   plus de ce qu'il y a dessous. Encres appariées du kit (jamais `--safou-600`,
   qui est un remplissage). */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Sora', sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);background:var(--teal-wash);padding:7px 15px;border-radius:100px}
.eyebrow.warm{color:var(--encre-safou);background:var(--safou-wash)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700}
.h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:700}
.h3{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:600}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink-soft)}
.muted{color:var(--muted)}
.grad-text{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}.mx{margin-inline:auto}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Sora', sans-serif;font-weight:600;font-size:1.02rem;padding:15px 30px;border-radius:100px;border:0;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.btn svg{width:19px;height:19px;transition:transform .35s var(--ease)}
/* OPTION A — encre sombre sur safou : #fff échoue, --ink passe avec deux fois la marge.
   Ordre du Régent 2026-08-25. L'orange est intact, c'est l'encre qui bouge. */
.btn-primary{background:var(--safou);color:var(--ink);box-shadow:0 14px 30px -10px rgba(255,107,53,.6)}
.btn-primary:hover{background:var(--safou-600);transform:translateY(-3px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-block{width:100%}
/* header */
header{position:fixed;inset:0 0 auto 0;z-index:90;padding-block:14px;transition:background .35s,box-shadow .35s}
header.scrolled{background:rgba(254,251,246,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:'Sora', sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.brand .logo{width:34px;height:34px;flex:none}.brand b{color:var(--safou)}
.nav-back{font-size:.92rem;font-weight:500;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px}
.nav-back svg{width:17px;height:17px}.nav-back:hover{color:var(--ink)}
/* hero */
.phero{position:relative;padding-top:120px;padding-bottom:clamp(40px,6vw,72px);overflow:hidden}
.phero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(55% 50% at 12% 20%,rgba(10,147,150,.14),transparent 70%),radial-gradient(55% 55% at 90% 80%,rgba(255,107,53,.16),transparent 70%)}
.phero .container{position:relative;z-index:2}
.phero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:center}
.phero h1{margin:18px 0 18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-art-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.hero-art-img img{width:100%;height:100%;object-fit:cover}
/* highlight banner (promo) */
.promo{display:flex;align-items:center;gap:16px;background:var(--midnight);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-top:26px;box-shadow:var(--shadow)}
.promo .amt{font-family:'Sora', sans-serif;font-weight:700;font-size:clamp(1.3rem,2.4vw,1.8rem);background:var(--grad-bridge);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.promo p{font-size:.92rem;color:rgba(255,255,255,.75)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
/* OPTION A ÉTENDUE — ordre du Régent 2026-08-25, arbitrage ②.
   Le principe ratifié n'est pas « le bouton », c'est « jamais de blanc sur safou :
   la couleur est trop claire pour le porter ». Ce chiffre d'étape était #fff sur
   --grad-warm (safou→gold) : MESURÉ sous le seuil du texte courant ET sous
   celui du grand texte. --ink tient sur TOUTE la course du dégradé, du point le
   plus sombre (safou) au plus clair (gold). Le dégradé est INTACT — l'encre bouge.
   Trouvé par la sonde, pas à l'œil : il portait la même faute que le bouton, à un
   endroit que l'ordre ne nommait pas. */
.step .n{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--grad-warm);color:var(--ink);font-family:'Sora', sans-serif;font-weight:700;margin-bottom:18px}
.step h3{margin-bottom:9px}.step p{color:var(--ink-soft);font-size:.95rem}
/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:rgba(10,147,150,.1);margin-bottom:16px}
.card .ic svg{width:25px;height:25px;color:var(--teal)}
.card h3{font-size:1.08rem;margin-bottom:8px}.card p{font-size:.92rem;color:var(--ink-soft)}
/* requirements list */
.req{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.req li{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.req .ck{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(10,147,150,.12);color:var(--teal);margin-top:1px}
.req .ck svg{width:15px;height:15px}
.req b{display:block;font-family:'Sora', sans-serif;font-weight:600;margin-bottom:2px}
.req span.d{font-size:.9rem;color:var(--ink-soft)}
/* dark section */
.dark{background:var(--midnight);color:#fff}
.dark .h2,.dark h3{color:#fff}.dark .lead{color:rgba(255,255,255,.72)}.dark .eyebrow{color:var(--gold);background:rgba(244,162,97,.14)}
/* FAQ */
.faq{display:grid;gap:12px;max-width:780px;margin-inline:auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:'Sora', sans-serif;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{width:22px;height:22px;flex:none;position:relative;transition:transform .3s}
.faq summary .pl::before,.faq summary .pl::after{content:'';position:absolute;background:var(--safou);border-radius:2px}
.faq summary .pl::before{top:10px;left:3px;right:3px;height:2px}
.faq summary .pl::after{left:10px;top:3px;bottom:3px;width:2px;transition:transform .3s}
.faq details[open] summary .pl::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--encre-safou)}
.faq .a{padding:0 22px 20px;color:var(--ink-soft);font-size:.95rem}
/* form */
.form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);max-width:640px;margin-inline:auto}
.field{margin-bottom:16px}
/* Texte d'aide sous un champ. STYLE UN ÉLÉMENT, PAS UNE CLASSE NOUVELLE :
   `.aide` existe déjà dans roles.css et `.req` dans app.css — introduire ici un
   troisième nom pour la même chose aurait été le doublon que le Régent interdit.
   Mesuré avant ajout : 0 <small> dans un .field sur la version committée, donc
   cette règle ne repeint rien d'existant. */
.field small{display:block;margin-top:6px;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--ink-soft);margin-bottom:7px}
.input,.select,.textarea{width:100%;padding:14px 16px;border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;background:var(--sable);border:2px solid var(--line);color:var(--ink);transition:border-color .25s,box-shadow .25s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--safou);box-shadow:0 0 0 4px rgba(255,107,53,.15);background:#fff}
.textarea{min-height:110px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7686' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* min-height:44px — la CASE mesure 18px, mais c'est le LABEL qui bascule la case
   quand on le touche : la cible effective est donc cette boîte-ci. Mesurée à 390px
   elle rendait 43,50px — elle ratait la borne WCAG 2.5.5 de UN DEMI-PIXEL, ce qu'aucune
   relecture ne voit et qu'un doigt, lui, ne pardonne pas. align-items:flex-start est
   conservé : la case reste alignée sur la première ligne, seule la zone touchable grandit. */
.consent{display:flex;gap:11px;align-items:flex-start;min-height:44px;font-size:.85rem;color:var(--ink-soft);margin:6px 0 18px}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--safou);flex:none}
.consent a{color:var(--encre-safou);text-decoration:underline}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.92rem;display:none}
.form-msg.show{display:block}
.form-msg.success{background:rgba(10,147,150,.12);border:1px solid rgba(10,147,150,.35);color:var(--teal-700)}
.form-msg.error{background:rgba(179,58,58,.1);border:1px solid rgba(179,58,58,.3);color:#9b2c2c}
/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.section-head.center{margin-inline:auto}
.section-head .h2{margin:16px 0 14px}
/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.65);padding-block:clamp(46px,6vw,64px) 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .brand{color:#fff;margin-bottom:14px}
footer h5{font-family:'Sora', sans-serif;color:#fff;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer a:hover{color:var(--safou)}
/* Pas de `color` ici : la ligne hérite du pied (blanc à 65 %). Elle
   portait `rgba(255,255,255,.45)` → MESURÉ sous le seuil, sur les CINQ
   pages. La hiérarchie ne se perd pas — le corps plus petit et le filet au-dessus
   la disent déjà. Une atténuation qui coûte de la lisibilité se remplace par une
   qui n'en coûte pas ; ici, la meilleure valeur était une déclaration en moins. */
.footer-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.82rem}
/* responsive */
@media(max-width:900px){
  .phero-grid{grid-template-columns:1fr}.phero-art{order:-1;max-width:480px;margin-inline:auto}
  .steps,.cards{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .steps,.cards,.footer-grid{grid-template-columns:1fr}
  .promo{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}
.brand .wm{color:var(--ink);letter-spacing:.02em}

/* Étiquette obligatoire sur tout montant de rémunération partenaire.
   Ordre du Régent 2026-08-25 : les montants du modèle s'affichent, TOUJOURS
   étiquetés « fourchette du modèle, à fixer au contrat — pas des revenus
   constatés ». Un chiffre de rémunération sans cette réserve est la seule
   sur-promesse de la façade qui se conteste devant un juge et pas devant un
   client : ne JAMAIS retirer ce style sans retirer les montants avec. */
/* `color:inherit` — et c'est le seul choix juste. Cette réserve est posée sur
   DEUX fonds : une carte nuit (§Revenus) et une réponse de FAQ sur sable. Une
   couleur fixe est fausse sur l'un des deux par construction ; elle l'était sur
   le fond nuit. Elle s'écrivait `var(--muted-600,#5b6470)` alors que
   `--muted-600` n'était défini nulle part dans cette feuille : le repli tirait à
   chaque rendu, en silence, depuis le premier jour. Hériter du texte qu'elle
   accompagne la rend juste sur tout fond présent ET à venir. L'italique et le
   corps réduit portent seuls la subordination — ce qui est préférable pour une
   mention à portée juridique, qu'on ne cherche pas à rendre discrète. */
.reserve-modele{display:block;margin-top:6px;font-size:.82rem;font-style:italic;opacity:1;color:inherit}

/* ── CIBLES TACTILES ─────────────────────────────────────────────────────────
   Mesuré au rendu (390×844), pas en feuille : les contrôles de chrome peignent
   entre 20 et 40 px de haut. On pose un plancher de 44 px sur la BOÎTE, sans
   toucher au corps du texte ni aux couleurs.

   CE QUI N'EST PAS ICI, ET POURQUOI. Les liens DANS une phrase — mentions de
   consentement, prose légale — sont laissés tels quels : WCAG 2.5.8 exempte
   explicitement le lien en ligne dans un bloc de texte, et l'agrandir disloquerait
   le paragraphe qu'il sert. 71 des « échecs » relevés par la sonde sont de
   ceux-là. Les listes de liens de pied, elles, ne sont pas des phrases : une
   liste de navigation n'a aucune exemption, donc elle est traitée.

   44 = 2.5.5 (AAA) et guides mobiles. 2.5.8 (AA) n'exige que 24 : le plancher
   posé ici est plus haut que l'obligation, délibérément. */
.brand, .nav-back{min-height:44px}
footer ul{gap:0}                      /* la hauteur de cible remplace l'écart : sans ça le pied double */
footer ul a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}