/* ═══════════════════════════════════════════════════════════════
   GIRI APP — thème ÉMERAUDE & LAITON (choix de Maha, 29/07/2026)
   Vert profond, laiton, lueur premium. Sert la page d'accueil
   (encarts d'applications) et les pages de présentation.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --fond:#04241a; --fond2:#063124; --fond3:#02180f;
  --surface:rgba(212,175,110,.055); --surface2:rgba(212,175,110,.10);
  --txt:#f2f8f3; --txt2:#a7c0b2; --txt3:#7d9b8b;
  --ligne:rgba(212,175,110,.26); --ligne2:rgba(212,175,110,.45);
  --or:#d4af6e; --or-clair:#f0d9a8; --or-fonce:#a07f3e; --sur-or:#08201a;
  --vert:#4ade9c;
  --tf:'Cormorant Garamond',Georgia,serif;
  --tc:'Manrope','Segoe UI',system-ui,sans-serif;
  --r:14px;
  --lueur-or:0 0 34px rgba(212,175,110,.30);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--txt);font-family:var(--tc);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums}
.deco{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 16% -12%, rgba(212,175,110,.17), transparent 66%),
    radial-gradient(900px 600px at 92% 10%, rgba(20,190,130,.19), transparent 70%),
    radial-gradient(800px 560px at 50% 108%, rgba(212,175,110,.11), transparent 64%),
    linear-gradient(180deg, rgba(0,60,42,.5), transparent 45%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}

h1,h2,h3,h4{font-family:var(--tf);font-weight:600;letter-spacing:.2px;line-height:1.12}
a{color:var(--or);text-decoration:none}
.in{max-width:1200px;margin:0 auto;padding:0 26px}
.lab{font-family:var(--tc);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--or)}

/* ── barre haute ── */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(4,36,26,.95),rgba(4,36,26,.7));border-bottom:1px solid var(--ligne)}
.hd{display:flex;align-items:center;gap:15px;padding:13px 26px;max-width:1200px;margin:0 auto}
.marq{display:flex;align-items:center;gap:13px;color:var(--txt)}
.marq img{height:40px;width:auto;display:block;filter:drop-shadow(0 0 13px rgba(212,175,110,.45))}
.marq span{font-family:var(--tf);font-size:21px;font-weight:600;letter-spacing:.6px}
.marq b{color:var(--or)}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lk{padding:9px 14px;border-radius:9px;font-size:15px;font-weight:600;color:var(--txt2);transition:.16s}
.lk:hover{color:var(--or);background:var(--surface)}

/* ── boutons laiton ── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border:0;
  cursor:pointer;border-radius:10px;font-family:var(--tc);font-weight:700;font-size:15.5px;letter-spacing:.2px;
  color:var(--sur-or);background:linear-gradient(135deg,var(--or-clair),var(--or) 48%,var(--or-fonce));
  box-shadow:0 8px 26px rgba(212,175,110,.26),inset 0 1px 0 rgba(255,255,255,.35);transition:.18s}
.bouton:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(212,175,110,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.bouton.creux{background:transparent;color:var(--or);box-shadow:inset 0 0 0 1px var(--ligne2)}
.bouton.creux:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--or)}
.bouton.plein{width:100%;padding:17px}
.bouton.petit{padding:10px 19px;font-size:14.5px;border-radius:9px}
.bouton:disabled{opacity:.55;cursor:wait}

/* ── badges d'état ── */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--tc);font-size:10.5px;font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase;padding:6px 13px;border-radius:7px;margin-bottom:18px;white-space:nowrap}
.badge i{width:7px;height:7px;border-radius:50%;display:block}
.b-vente{color:var(--sur-or);background:linear-gradient(135deg,var(--or-clair),var(--or) 55%,var(--or-fonce));
  box-shadow:0 4px 16px rgba(212,175,110,.35)}
.b-vente i{background:var(--sur-or)}
.b-on{color:var(--vert);border:1px solid rgba(74,222,156,.35);background:rgba(74,222,156,.08)}
.b-on i{background:var(--vert);box-shadow:0 0 9px var(--vert);animation:battement 2s ease-in-out infinite}
.b-inv{color:var(--or);border:1px solid var(--ligne);background:var(--surface)}
.b-inv i{background:var(--or)}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══ ACCUEIL : les encarts d'applications ═══ */
.ouverture{padding:76px 0 12px;text-align:center}
.ouverture h1{font-size:clamp(35px,5.4vw,62px);margin:22px 0 18px}
.ouverture h1 em{font-style:italic;color:var(--or)}
.ouverture p{font-size:clamp(16.5px,2vw,20px);color:var(--txt2);max-width:660px;margin:0 auto;font-weight:500}
.filet{width:76px;height:1px;margin:30px auto 0;
  background:linear-gradient(90deg,transparent,var(--or),transparent)}

.encarts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding:52px 0 0}
.encart{position:relative;display:flex;flex-direction:column;gap:11px;padding:30px 28px 26px;
  border-radius:var(--r);border:1px solid var(--ligne);color:var(--txt);
  background:linear-gradient(165deg,rgba(212,175,110,.09),rgba(6,49,36,.7) 55%,rgba(2,24,15,.85));
  box-shadow:0 20px 55px rgba(0,0,0,.42);isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* la lueur premium : un halo de laiton qui se lève au survol */
.encart::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(150deg,rgba(240,217,168,.75),rgba(212,175,110,.18) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .22s ease}
.encart::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-2;opacity:0;
  box-shadow:0 0 0 1px rgba(212,175,110,.5),0 0 44px 6px rgba(212,175,110,.30),0 0 120px 30px rgba(212,175,110,.14);
  transition:opacity .24s ease}
.encart:hover{transform:translateY(-6px);border-color:var(--ligne2);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.encart:hover::before{opacity:1}
.encart:hover::after{opacity:1}
.encart .ic{font-size:31px;line-height:1;filter:sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(1.04) drop-shadow(0 3px 12px rgba(0,0,0,.5))} /* [2026-07-31] emojis multicolores unifiés en ton laiton */
.encart h2{font-size:25px;font-weight:600}
.encart p{font-size:15.5px;color:var(--txt2);flex:1}
.encart .bas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--ligne)}
.encart .prix{font-family:var(--tf);font-size:23px;color:var(--or);font-weight:600}
.encart .prix small{font-family:var(--tc);font-size:12.5px;color:var(--txt3);font-weight:600;letter-spacing:.4px}
.encart .fl{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--or);
  display:inline-flex;align-items:center;gap:7px;transition:gap .18s ease;white-space:nowrap}
.encart:hover .fl{gap:12px}
.encart .badge{margin:0}
/* encart contact : deux portes, WhatsApp ou l'Assistance en ligne */
.encart .choix{display:inline-flex;align-items:center;gap:24px;flex-wrap:wrap}
.encart .choix .fl:hover{gap:12px;text-decoration:underline;text-underline-offset:4px}
/* l'application phare occupe deux colonnes quand la place existe */
.encart.phare{grid-column:span 2}
.encart.phare h2{font-size:31px}
.encart .apercu{margin:6px 0 4px;border-radius:10px;overflow:hidden;border:1px solid var(--ligne)}
.encart.phare .apercu img{width:100%;height:238px;object-fit:cover;object-position:top center;display:block}
/* encart simple avec vignette : l'image absorbe l'espace libre de la carte étirée
   (image en absolu = elle ne dicte jamais la hauteur, elle la remplit) */
.encart:not(.phare) .apercu{position:relative;flex:1 1 auto;min-height:150px}
.encart:not(.phare) .apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;display:block}
.encart:not(.phare):has(.apercu) p{flex:initial}
/* l'encart de contact ferme la grille sur deux colonnes, en miroir du phare */
.encart.contact{grid-column:span 2;
  background:linear-gradient(165deg,rgba(212,175,110,.14),rgba(6,49,36,.72) 55%,rgba(2,24,15,.85))}
@media(max-width:719px){.encart.phare,.encart.contact{grid-column:span 1}}

/* ═══ PAGES D'APPLICATION ═══ */
.retour{display:inline-block;font-size:14px;font-weight:600;color:var(--txt2);margin-bottom:26px}
.retour:hover{color:var(--or)}
.hero{padding:44px 0 10px}
.h-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);display:flex;align-items:center;gap:16px;margin-bottom:8px}
.hero h1 .ic{font-size:.8em;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.promesse{font-family:var(--tf);font-size:clamp(21px,2.6vw,28px);color:var(--or);font-style:italic;margin-bottom:16px}
.accroche{font-size:18px;color:var(--txt2);margin-bottom:26px;max-width:560px}
.tarif{display:flex;align-items:flex-end;gap:11px;margin-bottom:24px}
.tarif .p{font-family:var(--tf);font-size:64px;font-weight:600;line-height:.88;color:var(--or);
  text-shadow:0 0 30px rgba(212,175,110,.35)}
.tarif sup{font-family:var(--tf);font-size:26px;color:var(--or);font-weight:600}
.tarif .par{color:var(--txt2);font-size:16px;font-weight:600;padding-bottom:6px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ctas.centre{justify-content:center}
.pour{font-size:14.5px;color:var(--txt3);font-style:italic}
.ecran{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);
  box-shadow:0 0 46px rgba(212,175,110,.16),0 26px 70px rgba(0,0,0,.5)}
.ecran img{width:100%;height:auto;display:block}
.ecran.vide{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,rgba(212,175,110,.09),rgba(2,24,15,.8))}
.ic-geante{font-size:62px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}

.bloc{padding:62px 0 0}
.tsect{font-size:clamp(24px,3vw,34px);margin-bottom:28px}
.centre{text-align:center}
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.atout{padding:26px 26px 24px;border:1px solid var(--ligne);border-radius:var(--r);background:var(--surface);
  transition:transform .18s ease,box-shadow .18s ease}
.atout:hover{transform:translateY(-4px);box-shadow:var(--lueur-or)}
.atout .n{font-family:var(--tf);font-size:15px;color:var(--or);letter-spacing:2px}
.atout h3{font-size:20.5px;margin:8px 0 8px}
.atout p{font-size:15.5px;color:var(--txt2)}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.etape{position:relative;padding:26px 24px;border-radius:var(--r);background:var(--surface);
  border-left:2px solid var(--or)}
.etape .num{position:absolute;top:-15px;left:22px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--tf);font-size:17px;font-weight:700;color:var(--sur-or);
  background:linear-gradient(135deg,var(--or-clair),var(--or-fonce));box-shadow:0 4px 16px rgba(212,175,110,.4)}
.etape h3{font-size:19.5px;margin:12px 0 7px}
.etape p{font-size:15px;color:var(--txt2)}
.faq{display:flex;flex-direction:column;gap:2px}
.faq .q{padding:22px 24px;border-bottom:1px solid var(--ligne)}
.faq .q:first-child{border-top:1px solid var(--ligne)}
.faq h3{font-size:19.5px;margin-bottom:6px}
.faq p{font-size:15.5px;color:var(--txt2)}
.final{padding:70px 0 10px}

/* ── bloc d'achat ── */
.achat{padding:62px 0 0;scroll-margin-top:86px}
.a-in{max-width:620px;margin:0 auto;padding:38px 38px 34px;border-radius:var(--r);
  border:1px solid var(--ligne2);background:linear-gradient(165deg,rgba(212,175,110,.10),rgba(2,24,15,.86));
  box-shadow:0 0 50px rgba(212,175,110,.18),0 28px 70px rgba(0,0,0,.5)}
.a-in h2{font-size:29px;margin-bottom:8px}
.a-sous{color:var(--txt2);font-size:15.5px;margin-bottom:26px}
label{display:block;font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--or);margin-bottom:8px}
input[type=text],input[type=email]{width:100%;padding:14px 15px;font-size:16.5px;font-family:var(--tc);
  font-weight:600;border:1px solid var(--ligne);border-radius:10px;background:rgba(2,20,13,.75);
  color:var(--txt);margin-bottom:20px}
input::placeholder{color:#5f7d6d}
input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(212,175,110,.18)}
#carte{padding:15px;border:1px solid var(--ligne);border-radius:10px;background:rgba(2,20,13,.75);
  margin-bottom:22px;min-height:52px}
.rassure{font-size:13.5px;color:var(--txt3);text-align:center;margin-top:16px;line-height:1.6}
.msg{padding:14px 17px;border-radius:10px;font-size:15px;margin-bottom:20px;display:none;font-weight:600}
.msg.err{display:block;background:rgba(255,90,110,.10);border:1px solid rgba(255,90,110,.42);color:#ff9fae}
.msg.ok{display:block;background:rgba(74,222,156,.10);border:1px solid rgba(74,222,156,.42);color:var(--vert)}

footer{margin-top:86px;border-top:1px solid var(--ligne);background:rgba(2,24,15,.5)}
.ft{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:28px 26px;max-width:1200px;
  margin:0 auto;font-size:14.5px;color:var(--txt3)}
.ft a{color:var(--txt3)}
.ft a:hover{color:var(--or)}
.ft .sp{margin-left:auto}

@media(max-width:940px){
  .h-grid{grid-template-columns:1fr;gap:30px}
  .ecran{order:-1}
  .a-in{padding:30px 24px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  /* voile plus opaque : en défilement, rien ne doit se lire à travers la barre */
  header{background:linear-gradient(180deg,rgba(4,36,26,.97),rgba(4,36,26,.88))}
  .hd{flex-wrap:wrap;padding:11px 18px;gap:9px}
  .hd nav{width:100%;margin-left:0;gap:2px}
  .hd nav .lk{padding:7px 10px;font-size:14px}
  /* barre compacte une fois qu'on défile : logo réduit + Connexion, une seule ligne */
  header.compacte .hd{flex-wrap:nowrap;padding:8px 18px}
  header.compacte .lk{display:none}
  header.compacte .hd nav{width:auto;margin-left:auto}
  header.compacte .marq img{height:30px}
  header.compacte .marq span{font-size:18px}
  header.compacte .bouton.petit{padding:8px 15px;font-size:13.5px}
  .marq img,.marq span,.hd,.bouton.petit{transition:all .22s ease}
  .ouverture{padding:48px 0 6px}
  .encarts{padding:38px 0 0;gap:18px}
  /* cartes condensées : le médaillon rejoint le titre, la page respire deux fois plus court */
  .encart{display:grid;grid-template-columns:auto 1fr;align-content:start;
    column-gap:14px;row-gap:9px;padding:20px 18px 16px}
  .encart .ic{grid-row:1;width:46px;height:46px;font-size:22px;align-self:center}
  .encart.phare .ic{width:52px;height:52px;font-size:25px}
  .encart h2{grid-column:2;align-self:center;font-size:21.5px}
  .encart.phare h2{font-size:24px}
  .encart p,.encart .apercu,.encart .bas{grid-column:1/-1}
  .encart p{font-size:14.8px}
  .encart .bas{margin-top:2px;padding-top:13px;flex-wrap:wrap}
  footer{margin-top:48px}
  .ft .sp{margin-left:0}
}
/* l'adresse et le numéro ne se coupent jamais en leur milieu */
.ft .sp a{white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════════════════════════════════════════════════════════
   FINITIONS PREMIUM — matière, lumière, ornements, gestes
   (ajouté le 30/07/2026 ; tout est neutralisé par prefers-reduced-motion)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. le liseré de laiton en tête de page : la signature ── */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--or-fonce) 12%,var(--or-clair) 50%,var(--or-fonce) 88%,transparent)}
header{border-bottom:0;box-shadow:0 1px 0 var(--ligne),0 18px 40px -30px rgba(0,0,0,.9)}

/* ── 2. détails système que les maisons soignent ── */
::selection{background:rgba(212,175,110,.28);color:#fff}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}
html{scrollbar-width:thin;scrollbar-color:rgba(212,175,110,.45) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(2,20,13,.5)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--or-fonce),rgba(212,175,110,.35));
  border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--or),var(--or-fonce));background-clip:content-box}

/* ── 3. matière : lumière au sommet, ombre au pied ── */
.encart,.porte,.atout,.etape,.a-in,.boite,.demo,.pa{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -18px 30px -26px rgba(0,0,0,.9),0 18px 48px rgba(0,0,0,.36)}
.encart::before{opacity:.42}

/* la lueur suit le curseur — le détail qui se remarque sans se voir */
.encart,.porte,.atout{--mx:50%;--my:0%}
.encart .halo,.porte .halo,.atout .halo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .28s ease;
  background:radial-gradient(340px 220px at var(--mx) var(--my),rgba(240,217,168,.16),transparent 68%)}
.encart:hover .halo,.porte:hover .halo,.atout:hover .halo{opacity:1}
.atout{position:relative;overflow:hidden}

/* ── 4. médaillon autour des icônes : l'emoji devient un bijou ── */
.encart .ic,.porte .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(240,217,168,.22),rgba(2,24,15,.75) 70%);
  box-shadow:inset 0 0 0 1px rgba(212,175,110,.42),inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.44);
  font-size:26px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.porte .ic{width:46px;height:46px;font-size:21px}
.encart:hover .ic,.porte:hover .ic{transform:translateY(-2px) scale(1.05);
  box-shadow:inset 0 0 0 1px rgba(240,217,168,.7),inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(212,175,110,.24)}
.encart.phare .ic{width:64px;height:64px;font-size:31px}

/* ── 5. reflet qui balaie le laiton ── */
.bouton{position:relative;overflow:hidden}
.bouton::after{content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.bouton:hover::after{animation:reflet .85s ease-out}
@keyframes reflet{to{left:150%}}

/* ── 6. ornement de section : filet et losange ── */
.orne{display:flex;align-items:center;gap:14px;justify-content:center;margin:0 auto 6px;max-width:220px}
.orne i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ligne2))}
.orne i:last-child{background:linear-gradient(90deg,var(--ligne2),transparent)}
.orne b{width:7px;height:7px;transform:rotate(45deg);background:var(--or);
  box-shadow:0 0 12px rgba(212,175,110,.6)}
.sh .num,.bloc-titre h2{position:relative}

/* ── 7. apparitions : cascade au chargement, révélation au défilement ── */
@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rev.vu{opacity:1;transform:none}
}

/* ── 8. l'aperçu du phare respire au survol ── */
.encart.phare .apercu{position:relative}
.encart.phare .apercu img{transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease}
.encart.phare:hover .apercu img{transform:scale(1.035);filter:saturate(1.06) brightness(1.04)}
.encart.phare .apercu::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(2,24,15,.5));opacity:.9}

/* ── 9. recherche des applications (accueil) ── */
.cherche{max-width:430px;margin:30px auto 0;position:relative}
.cherche input{width:100%;padding:14px 46px 14px 46px;font-size:16px;font-family:var(--tc);font-weight:600;
  color:var(--txt);background:rgba(2,20,13,.55);border:1px solid var(--ligne);border-radius:30px;
  text-align:center;transition:border-color .2s ease,box-shadow .2s ease}
.cherche input::placeholder{color:var(--txt3);font-weight:500}
.cherche input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(212,175,110,.14)}
.cherche .loupe{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--or);
  opacity:.75;font-size:15px;pointer-events:none}
.cherche .vide{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--txt3);
  background:none;border:0;cursor:pointer;font-size:19px;line-height:1;display:none;padding:4px}
.cherche.plein .vide{display:block}
.cherche .vide:hover{color:var(--or)}
.rien{text-align:center;color:var(--txt2);padding:40px 0 0;font-size:16px;display:none}
.encart.masque{display:none}

/* ── 10. transition douce d'une page à l'autre (navigateurs compatibles) ── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:fondSortie .26s ease both}
  ::view-transition-new(root){animation:fondEntree .32s ease both}
}
@keyframes fondSortie{to{opacity:0;transform:translateY(-6px)}}
@keyframes fondEntree{from{opacity:0;transform:translateY(8px)}}
header{view-transition-name:tete}

/* ── 11. petites finesses typographiques ── */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.tarif .p,.encart .prix,.kpi b{font-feature-settings:'lnum' 1,'tnum' 1}
.promesse::after{content:'';display:block;width:52px;height:1px;margin-top:14px;
  background:linear-gradient(90deg,var(--or),transparent)}

@media (prefers-reduced-motion:reduce){
  .bouton::after{display:none}
  .encart.phare:hover .apercu img{transform:none}
}

/* état « bientôt disponible » : le bouton existe, mais il ne promet rien */
.bouton.fige{cursor:default;opacity:.62;filter:saturate(.7);box-shadow:inset 0 0 0 1px var(--ligne2)}
.bouton.fige::after{display:none}
.tel{font-size:14.5px;color:var(--txt2);margin-top:14px}
.tel a{font-weight:700;white-space:nowrap}