/* Pages de pub (quiz-ads, radar-ads, budget-ads) — habillage Talmo commun (21/10/2026, skill pages-ads).
   Chargé APRÈS le <style> de chaque page : il remplace les anciennes couleurs (navy/gold de Clément Invest Dubai) par la
   charte Talmo et ajoute la barre du logo, le bandeau photo et le pied de page légal. Fond clair = body.ads-clair,
   fond marine = body.ads-sombre. Polices : /assets/fonts/polices.css (hébergées, pas d'appel Google : RGPD). */
:root{
  --marine:#0B1F3B; --signal:#FFD400; --ardoise:#2B3442; --sable:#F7F3EC; --lin:#EFE7DA; --ivoire:#FCFAF6;
  --filet:#E4DACB; --taupe:#5E5A54; --or:#C9A55C; --or-texte:#7A5C22; --marine-nuit:#071528; --marine-haut:#163460;
  --ombre-2:0 1px 2px rgba(11,31,59,.05),0 8px 20px -4px rgba(11,31,59,.12),0 24px 48px -16px rgba(11,31,59,.16);
  --ui:"Instrument Sans",system-ui,-apple-system,sans-serif; --wide:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* anciennes variables des pages, remappées */
  --navy:#0B1F3B; --navy-2:#163460; --text:#0B1F3B; --gold-pale:#EFE7DA; --off-white:#F7F3EC; --off:#F7F3EC;
  --gray-600:#5E5A54; --gray-400:#6F6A62; --gray-200:#E4DACB; --gray-100:#EFE7DA; --gray-50:#FCFAF6;
}
body.ads-clair{ --gold:#7A5C22; --gold-light:#7A5C22; }
body.ads-sombre{ --gold:#C9A55C; --gold-light:#C9A55C; --white:#FFFFFF; }

body.ads-clair,body.ads-sombre{font-family:var(--ui)!important;-webkit-font-smoothing:antialiased}
body.ads-clair,body.ads-clair.quiz-active{background:var(--sable)!important;color:var(--ardoise)}
body.ads-sombre{background:radial-gradient(120% 80% at 20% 0%,var(--marine-haut) 0%,var(--marine) 45%,var(--marine-nuit) 100%) fixed!important}
.ads-clair input,.ads-sombre input,.ads-clair button,.ads-sombre button{font-family:var(--ui)!important}

/* Bouton d'action = jaune signal, pilule (un seul type d'élément jaune par écran) */
.btn-primary,.btn-or,.ads-btn{background:var(--signal)!important;color:var(--marine)!important;border:0;border-radius:999px!important;
  min-height:54px;font-weight:700!important;box-shadow:0 1px 0 rgba(11,31,59,.15),0 8px 20px -6px rgba(201,165,92,.55);transition:transform .2s ease-out,filter .2s}
.btn-primary:hover,.btn-or:hover,.ads-btn:hover{transform:translateY(-1px);filter:brightness(1.03);opacity:1}
.btn-primary:disabled,.btn-or:disabled{filter:grayscale(.4);opacity:.6}

/* Barre du logo (haut de chaque page) */
.ads-barre{display:flex;justify-content:center;align-items:center;padding:14px 16px 6px}
.ads-barre img{height:26px;width:auto;display:block}

/* Bandeau photo de Clément (preuve humaine dans le premier écran) */
.ads-photo{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--ombre-2);background:var(--marine);aspect-ratio:720/388}
.ads-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ads-photo .ads-badge{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.96);color:var(--marine);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:600;line-height:1.2;box-shadow:0 4px 14px rgba(11,31,59,.25)}
.ads-photo .ads-badge small{display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;color:var(--taupe);letter-spacing:.02em}

/* Titre principal des pages de pub */
.ads-titre{font-family:var(--wide);font-variation-settings:"wdth" 100;font-weight:700;letter-spacing:-.01em;line-height:1.12;color:var(--marine);text-wrap:balance}
.ads-sombre .ads-titre{color:#fff}
.ads-titre em{font-style:normal;background:linear-gradient(transparent 62%,rgba(255,212,0,.85) 62%);padding:0 .06em}
.ads-sombre .ads-titre em{background:none;color:var(--or)}

/* Puces de réassurance sous le bouton */
.ads-rassure{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12.5px;color:var(--taupe);margin-top:12px}
.ads-sombre .ads-rassure{color:rgba(255,255,255,.7)}
.ads-rassure span:before{content:"✓ ";color:var(--or-texte);font-weight:700}
.ads-sombre .ads-rassure span:before{color:var(--or)}

/* Pied de page légal Talmo */
.ads-pied{max-width:520px;margin:28px auto 0;padding:16px 16px 24px;text-align:center;font-size:11px;line-height:1.5;color:var(--taupe)}
.ads-sombre .ads-pied{color:rgba(255,255,255,.55)}
.ads-pied a{color:inherit}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Champ WhatsApp avec indicatif */
.ads-tel{display:flex;gap:8px;width:100%}
.ads-tel select{flex:none;width:96px;border:1.5px solid var(--filet);border-radius:12px;background:#fff;color:var(--marine);font:600 15px var(--ui);padding:0 8px;min-height:50px}
.ads-tel input{flex:1;min-width:0}
.ads-sombre .ads-tel select{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.ads-sombre .ads-tel select option{color:#0B1F3B}

/* Aperçu du résultat avant le formulaire */
.ads-apercu{background:var(--marine);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:16px;text-align:left}
.ads-apercu .sur{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.ads-apercu b.nom{display:block;font-family:var(--wide);font-size:21px;line-height:1.2;margin:6px 0 10px}
.ads-apercu p{font-size:14px;line-height:1.45;margin:6px 0 0;color:rgba(255,255,255,.88)}
.ads-apercu .verrou{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;color:var(--or)}

/* Écran de fin commun */
.ads-fin{max-width:440px;margin:0 auto;text-align:center;padding:8px 4px}
.ads-fin-coche{width:64px;height:64px;border-radius:50%;background:#1F9D67;display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 10px 24px -8px rgba(31,157,103,.6)}
.ads-fin .ads-titre{font-size:26px}
.ads-fin-resultat{margin:16px 0 4px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--ombre-2);color:var(--ardoise);font-size:15px;line-height:1.45;text-align:left}
.ads-sombre .ads-fin-resultat{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.ads-fin-resultat b{color:var(--marine)}
.ads-sombre .ads-fin-resultat b{color:#fff}
.ads-fin-etapes{list-style:none;margin:18px 0 20px;padding:0;text-align:left;display:grid;gap:10px;font-size:15px;line-height:1.45;color:var(--ardoise)}
.ads-sombre .ads-fin-etapes{color:rgba(255,255,255,.88)}
.ads-fin-etapes li{padding-left:14px;border-left:3px solid var(--or)}
.ads-fin-etapes b{color:var(--marine)}
.ads-sombre .ads-fin-etapes b{color:#fff}
.ads-fin .mono{font-family:var(--mono);white-space:nowrap;font-size:.92em}
.ads-btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-decoration:none;font-size:17px;padding:15px 20px}
.ads-fin-note{font-size:13px;color:var(--taupe);margin-top:10px}
.ads-sombre .ads-fin-note{color:rgba(255,255,255,.6)}
.ads-fin-signe{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font-size:13.5px;line-height:1.35;text-align:left;color:var(--taupe)}
.ads-sombre .ads-fin-signe{color:rgba(255,255,255,.7)}
.ads-fin-signe img{border-radius:50%;box-shadow:var(--ombre-2)}
.ads-fin-signe b{color:var(--marine)}
.ads-sombre .ads-fin-signe b{color:#fff}

/* Mention de consentement sous le bouton */
.ads-mention{text-align:center;font-size:11.5px;line-height:1.45;color:var(--taupe);margin-top:10px}
.ads-sombre .ads-mention{color:rgba(255,255,255,.55)}
.ads-mention a{color:inherit}

/* Quiz : contenu en haut de l'écran (pas centré verticalement), pas de fondu sur le premier écran (écran vide sinon) */
.ads-clair .quiz-wrapper{justify-content:flex-start;min-height:0;padding-top:10px}
.ads-clair .intro-compact{animation:none}
.ads-photo .ads-badge{left:auto;right:10px}

/* Calculateur : contenu en haut de l'écran, pas de fondu sur le premier écran */
.ads-sombre .ecran{justify-content:flex-start;min-height:0;padding-top:12px}
.ads-sombre #e-accroche{animation:none}
.ads-sombre .carte .ads-tel select{background:#fff;color:var(--marine);border-color:var(--filet)}
.ads-sombre .carte .ads-mention{color:var(--taupe)}

/* Calculateur sur fond sable (23/10, décision de Clément : plus d'écran d'accueil, visuels « ce que tu achètes ») */
.ads-clair .ecran{justify-content:flex-start;min-height:0;padding-top:10px;animation:none}
.ads-clair .ecran h2{color:var(--marine)}.ads-clair .ecran h2 em{color:var(--or-texte)}
.ads-clair .ecran .sous{color:var(--taupe)}.ads-clair .ecran .etape{color:var(--or-texte)}
.ads-clair .ecran .petit,.ads-clair .ecran .note,.ads-clair .ecran .lien,.ads-clair .ecran .retour{color:var(--taupe)}
.ads-clair .roue-cadre{background:#fff;border:0;box-shadow:var(--ombre-2)}
.ads-clair .roue div{color:#9A948A}.ads-clair .roue div.actif{color:var(--marine)}
.ads-clair .roue-viseur{border-color:rgba(201,165,92,.75);background:rgba(201,165,92,.1)}
.ads-clair .saisie input{background:#fff;border-color:var(--filet);color:var(--marine)}
.ads-clair .saisie input::placeholder{color:#9A948A}.ads-clair .saisie span{color:var(--taupe)}
.ads-clair .ecran .carte{box-shadow:var(--ombre-2)}.ads-clair .resultat-tete h2{color:var(--marine)}

/* Cartes photo « ce que tu peux acheter » (budget-ads, quiz-ads, 23/10) : visuels fournis par Clément, prix de départ réels */
.sur-titre{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-texte);margin:6px 0 8px;text-align:center}
.cartes-biens{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:2px 0 0}
.cartes-biens .bc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--ombre-2);text-align:left}
.cartes-biens .bc:nth-child(2){transform:translateY(-8px)}
.cartes-biens img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.cartes-biens b{display:block;font:600 12.5px/1.2 var(--ui);color:var(--marine);padding:7px 8px 0}
.cartes-biens small{display:block;font:500 10px/1.3 var(--mono);color:var(--or-texte);padding:2px 8px 8px}
.legende-cartes{font-size:11.5px;color:var(--taupe);text-align:center;margin:8px 0 0;line-height:1.4}

/* Aperçu de résultat flouté (budget-ads, 23/10, Clément : « un listing avec photos comme un résultat flouté ») */
.resultat-flou{position:relative;background:#fff;border-radius:16px;padding:8px;box-shadow:var(--ombre-2);margin:2px 0 14px;overflow:hidden}
.resultat-flou ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.resultat-flou li{display:flex;align-items:center;gap:10px;background:var(--ivoire);border-radius:11px;padding:5px 8px 5px 5px}
.resultat-flou li img{width:64px;height:46px;object-fit:cover;border-radius:8px;flex:none}
.resultat-flou li div{display:grid;gap:2px;min-width:0}
.resultat-flou li b{font:600 13px/1.2 var(--ui);color:var(--marine)}
.resultat-flou li small{font:500 11px var(--mono);color:var(--or-texte)}
.resultat-flou li:nth-child(n+2){filter:blur(3px);opacity:.8}
.resultat-flou li:nth-child(1) b,.resultat-flou li:nth-child(1) small{filter:blur(2.5px)}
.resultat-flou .verrou-flou{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);background:var(--marine);color:#fff;font:600 13px var(--ui);padding:9px 14px;border-radius:999px;box-shadow:var(--ombre-2);white-space:nowrap}