/* ==========================================================
Balise (Zoom In Media) — Landing Page SEO Local
Design system : thème clair par défaut, sections sombres
ponctuelles pour le rythme. Signature "rayon" (balise/portée).
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Cairo:wght@400;500;600;700;800&display=swap');
:root{
/* ---- Thème CLAIR (par défaut) ---- */
--bg:#F4F6F9;
--surface:#FFFFFF;
--surface-2:#EBEFF5;
--surface-3:#DFE5EE;
--border:rgba(16,25,43,0.10);
--border-strong:rgba(16,25,43,0.20);
--text:#101928;
--text-muted:#4E5C77;
--text-faint:#8B97AC;
--accent:#C9780A;
--teal:#0E9C7E;
--alert:#C94430;
--teal-dim:rgba(14,156,126,0.10);
--alert-dim:rgba(201,68,48,0.08);
/* ---- Constantes de marque (ne changent pas entre les sections) ---- */
--accent-bright:#FFB020;
--accent-hover:#FFC456;
--accent-ink:#241705;
--teal-solid:#14B892;
/* Navbar (suit le thème global, pas les sections) */
--nav-bg:rgba(255,255,255,0.78);
--nav-bg-scrolled:rgba(255,255,255,0.94);
--nav-border:rgba(16,25,43,0.08);
/* Typo */
--font-display:'Instrument Serif', Georgia, serif;
--font-body:'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono:'IBM Plex Mono', 'Courier New', monospace;
/* Layout */
--max-w: 1180px;
--radius-sm:8px;
--radius-md:14px;
--radius-lg:26px;
--radius-pill:999px;
--shadow-card: 0 20px 50px -24px rgba(16,25,43,0.18);
--shadow-glow: 0 0 0 1px rgba(255,176,32,0.35), 0 14px 36px -12px rgba(255,176,32,0.30);
}
/* ---- Thème SOMBRE — sections pleine largeur (.section--dark, .hero)
ET panneaux encastrés ponctuels (.panel-dark) pour la variété ---- */
.hero, .section--dark, .panel-dark{
--bg:#0B1220;
--surface:#121B2E;
--surface-2:#182541;
--surface-3:#1D2C4D;
--border:rgba(140,160,190,0.14);
--border-strong:rgba(140,160,190,0.28);
--text:#F3F5F8;
--text-muted:#8CA0BE;
--text-faint:#5A6C8A;
--accent:#FFB020;
--teal:#2DD4A7;
--alert:#FF6B57;
--teal-dim:rgba(45,212,167,0.14);
--alert-dim:rgba(255,107,87,0.14);
background:var(--bg);
color:var(--text);
}
/* ---- Bande AMBRE pleine largeur (au même titre que .section--dark) ---- */
.section--amber{
--bg:#FFB020;
--surface:#FFC85C;
--surface-2:#FFD98A;
--surface-3:#FFE3A8;
--border:rgba(36,23,5,0.16);
--border-strong:rgba(36,23,5,0.28);
--text:#241705;
--text-muted:#5C3D08;
--text-faint:#8A5F12;
--accent:#241705;
--teal:#0A6B54;
--alert:#8A2C1D;
--teal-dim:rgba(10,107,84,0.14);
--alert-dim:rgba(138,44,29,0.12);
background:linear-gradient(118deg, #FFC13A 0%, var(--bg) 42%, #F98C1D 100%);
color:var(--text);
position:relative;
overflow:hidden;
}
/* Motif "rayon" en filigrane, signature visuelle de la marque */
.amber-rings{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.amber-rings svg{ width:100%; height:100%; }
.amber-rings circle{ fill:none; stroke:rgba(36,23,5,0.10); stroke-width:1.5; }
.section--amber .section__inner{ position:relative; z-index:1; }
.amber-copy{ display:flex; flex-direction:column; gap:12px; max-width:620px; }
.amber-tag{
display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
padding:6px 14px; border-radius:var(--radius-pill);
background:rgba(36,23,5,0.10); border:1px solid rgba(36,23,5,0.16);
font-family:var(--font-mono); font-size:11px; font-weight:600;
letter-spacing:0.06em; text-transform:uppercase; color:var(--text);
}
.amber-tag svg{ width:13px; height:13px; flex-shrink:0; }
body.ar .amber-tag{ font-family:'Cairo', sans-serif; letter-spacing:0; text-transform:none; font-size:12px; }
/* ---- Chevauchement : une carte déborde sur la bande pleine largeur voisine ---- */
.overlap-up{ position:relative; margin-top:-72px; z-index:6; }
.overlap-down{ position:relative; margin-bottom:-72px; z-index:6; }
@media (max-width:760px){ .overlap-up{ margin-top:-40px; } .overlap-down{ margin-bottom:-40px; } }
/* ---- Barre de confiance (chevauche hero → constat), teal ---- */
.trust-bar{
position:relative;
background:linear-gradient(135deg, var(--teal-solid), #0D7A5F);
color:#fff;
border-radius:28px;
padding:36px 40px;
display:flex; gap:0; flex-wrap:wrap; align-items:stretch;
box-shadow:0 34px 74px -22px rgba(13,122,95,0.45);
overflow:hidden;
}
.trust-bar__rings{ position:absolute; inset:0; pointer-events:none; }
.trust-bar__rings svg{ width:100%; height:100%; }
.trust-bar__rings circle{ fill:none; stroke:rgba(255,255,255,0.12); stroke-width:1.5; }
.trust-bar__item{ position:relative; flex:1; min-width:180px; text-align:start; padding:0 26px; z-index:1; }
.trust-bar__item:first-child{ padding-inline-start:0; }
.trust-bar__item + .trust-bar__item{ border-inline-start:1px solid rgba(255,255,255,0.16); }
.trust-bar__icon{ position:absolute; top:-8px; inset-inline-end:2px; width:68px; height:68px; opacity:0.16; z-index:0; pointer-events:none; }
.trust-bar__icon svg{ width:100%; height:100%; }
.trust-bar__num{ position:relative; font-family:var(--font-mono); font-size:38px; font-weight:700; letter-spacing:-0.01em; display:block; margin-bottom:6px; }
.trust-bar__label{ position:relative; font-size:12.5px; opacity:0.88; line-height:1.5; max-width:220px; }
@media (max-width:760px){
.trust-bar{ flex-direction:column; padding:28px; gap:22px; }
.trust-bar__item{ max-width:none; padding:0; }
.trust-bar__item:first-child{ padding-inline-start:0; }
.trust-bar__item + .trust-bar__item{ border-inline-start:none; border-top:1px solid rgba(255,255,255,0.16); padding-top:22px; }
.trust-bar__icon{ width:52px; height:52px; top:-4px; }
}
/* Panneau encastré, jamais pleine largeur — ombre portée pour le détacher de la page */
.panel-dark{
border-radius:32px;
padding:52px 44px;
box-shadow:0 40px 90px -32px rgba(11,18,32,0.38);
}
.panel-amber{
background:linear-gradient(135deg, var(--accent-bright), #FF9A2E);
color:var(--accent-ink);
border-radius:32px;
padding:44px 48px;
box-shadow:0 30px 70px -28px rgba(255,176,32,0.5);
}
@media (max-width:700px){
.panel-dark, .panel-amber{ padding:32px 24px; border-radius:22px; }
}
/* ---- Bouton clair/sombre global — bascule TOUTE la page ---- */
html[data-theme="dark"] body{
--bg:#0B1220;
--surface:#121B2E;
--surface-2:#182541;
--surface-3:#1D2C4D;
--border:rgba(140,160,190,0.14);
--border-strong:rgba(140,160,190,0.28);
--text:#F3F5F8;
--text-muted:#8CA0BE;
--text-faint:#5A6C8A;
--accent:#FFB020;
--teal:#2DD4A7;
--alert:#FF6B57;
--teal-dim:rgba(45,212,167,0.14);
--alert-dim:rgba(255,107,87,0.14);
--nav-bg:rgba(11,18,32,0.78);
--nav-bg-scrolled:rgba(11,18,32,0.94);
--nav-border:rgba(140,160,190,0.16);
background:var(--bg);
color:var(--text);
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
transition:background .2s ease, color .2s ease;
}
/* ---- Langue : AR par défaut, bascule instantanée sans rechargement ---- */
body.fr .ar-only{ display:none!important; }
body.ar .fr-only{ display:none!important; }
body.ar{ font-family:'Cairo', sans-serif; }
body.ar .mono{ font-family:'IBM Plex Mono', monospace; } /* les chiffres restent en numération occidentale même en arabe */
/* Un nombre isolé en dir="ltr" garde son propre "start" à gauche par défaut (sa direction est ltr) ;
sans ce correctif il resterait collé à gauche de son bloc alors que son label voisin est à droite (rtl).
On force ici l'alignement à droite pour ces blocs d'affichage — jamais sur les champs de formulaire. */
body.ar span[dir="ltr"], body.ar div[dir="ltr"]{ text-align:right; }
body::before{
content:'';
position:fixed; inset:0;
background:
radial-gradient(55% 40% at 16% -6%, rgba(255,176,32,0.07), transparent 60%),
radial-gradient(45% 35% at 100% 0%, rgba(14,156,126,0.05), transparent 60%);
pointer-events:none;
z-index:0;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-0.01em; }
body.ar h1, body.ar h2, body.ar h3, body.ar h4{ font-family:'Cairo', sans-serif; font-weight:700; letter-spacing:0; }
.mono{ font-family:var(--font-mono); }
.section{ position:relative; padding:104px 0; z-index:1; background:var(--bg); color:var(--text); }
.section--tight{ padding:72px 0; }
.section__inner{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }
.section__inner--narrow{ max-width:860px; }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--accent); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,176,32,0.18); }
.sec-title{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; max-width:760px; color:var(--text); }
body.ar .sec-title{ font-size:clamp(19px,2.6vw,27px); line-height:1.4; }
@media (max-width:640px){ body.ar .sec-title{ font-size:19px; } }
.sec-sub{ color:var(--text-muted); font-size:17px; max-width:640px; margin-bottom:44px; }
.accent{ color:var(--accent); font-style:italic; }
.teal-text{ color:var(--teal); }
/* ---------- Boutons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:15px 28px; border-radius:var(--radius-pill);
font-family:var(--font-body); font-weight:600; font-size:15px;
border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn--primary{ background:var(--accent-bright); color:var(--accent-ink); box-shadow:var(--shadow-glow); }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.btn--ghost{ background:transparent; border-color:var(--border-strong); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent-bright); color:var(--accent); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:13.5px; }
/* ---------- Navbar (chrome fixe, suit le thème global) ---------- */
.navbar{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:16px 0;
background:var(--nav-bg);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--nav-border);
transition:background .25s ease, padding .25s ease, box-shadow .25s ease;
}
.navbar.is-scrolled{ background:var(--nav-bg-scrolled); padding:12px 0; box-shadow:0 8px 30px -18px rgba(16,25,43,0.25); }
.navbar__inner{ max-width:var(--max-w); margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; color:var(--text); }
.brand__mark{ width:30px; height:30px; border-radius:9px; background:var(--accent-bright); position:relative; flex-shrink:0; }
.brand__mark::after{ content:''; position:absolute; inset:9px; border-radius:50%; background:var(--accent-ink); }
.brand__tag{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:0.06em; }
@media (max-width:420px){ .brand__tag{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:14.5px; color:var(--text-muted); transition:color .18s ease; position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.is-active{ color:var(--text); }
.nav-links a.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent-bright); border-radius:2px; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
display:none; background:none; border:none; cursor:pointer;
width:44px; height:44px; flex-shrink:0;
align-items:center; justify-content:center;
border-radius:var(--radius-sm);
transition:background .18s ease;
}
.nav-toggle:hover{ background:var(--surface-2); }
.nav-toggle__bars{ display:block; width:20px; height:14px; position:relative; }
.nav-toggle__bars i{
position:absolute; inset-inline:0; height:2px; border-radius:2px;
background:var(--text); transition:transform .28s ease, opacity .2s ease, top .28s ease;
}
.nav-toggle__bars i:nth-child(1){ top:0; }
.nav-toggle__bars i:nth-child(2){ top:6px; }
.nav-toggle__bars i:nth-child(3){ top:12px; }
/* Passage en croix quand le menu est ouvert */
.nav-toggle.is-open .nav-toggle__bars i:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars i:nth-child(2){ opacity:0; }
.nav-toggle.is-open .nav-toggle__bars i:nth-child(3){ top:6px; transform:rotate(-45deg); }
/* Le CTA du menu déroulant : masqué en desktop, il n'existe que sur mobile */
.nav-links__cta{ display:none; }
/* Bascule AR/FR : une seule capsule claire, la langue active en pastille pleine */
.lang-toggle{
display:flex; align-items:center; gap:0; flex-shrink:0;
padding:3px; border-radius:999px;
background:var(--surface); border:1px solid var(--border-strong);
}
.lang-btn{
padding:7px 16px; border-radius:999px; font-family:var(--font-mono); font-size:12px; font-weight:700;
letter-spacing:0.03em; color:var(--text-muted); background:transparent; border:none; cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.lang-btn:hover{ color:var(--text); }
.lang-btn.active{ background:var(--accent-bright); color:var(--accent-ink); }
.theme-toggle{
width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center;
font-size:16px; flex-shrink:0; transition:border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover{ border-color:var(--accent-bright); transform:rotate(-12deg); }
.theme-toggle .icon-dark{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-light{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-dark{ display:block; }
/* ---------- Hero (toujours sombre — voir override .hero plus haut) ---------- */
.hero{ position:relative; padding:172px 0 120px; overflow:hidden; }
.hero__inner{ max-width:var(--max-w); margin:0 auto; padding:0 28px; position:relative; z-index:2; }
.hero__content{ max-width:700px; }
.hero h1{ font-size:clamp(38px,5.6vw,64px); margin-bottom:26px; color:var(--text); }
body.ar .hero h1{ font-size:clamp(20px,3vw,34px); line-height:1.45; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero h1 strong{ font-weight:inherit; color:var(--accent); }
/* L'italique n'existe pas en typographie arabe : jamais de penchement en mode AR */
body.ar em, body.ar i, body.ar .accent{ font-style:normal; }
.hero__sub{ font-size:18.5px; color:var(--text-muted); max-width:560px; margin-bottom:38px; }
.hero__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.hero__note{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.hero__visual{ position:absolute; top:50%; inset-inline-end:6%; transform:translateY(-50%); width:300px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:18px; }
@media (max-width:1180px){ .hero__visual{ width:270px; inset-inline-end:3%; } }
@media (max-width:1080px){ .hero__visual{ inset-inline-end:2%; width:250px; } .hero-seq-visual.is-visible{ opacity:0.9; } }
@media (max-width:900px){ .hero__visual{ display:none; } }
/* ---- Mockup téléphone : recherche Google animée, jouée une seule fois ---- */
.phone-mock{
position:relative; width:100%; aspect-ratio:9/17.5;
background:#101928; border-radius:34px; padding:12px;
box-shadow:0 45px 90px -25px rgba(16,25,43,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.phone-mock__notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:34%; height:20px; background:#101928; border-radius:0 0 14px 14px; z-index:2; }
.phone-mock__screen{
position:relative; width:100%; height:100%; overflow:hidden;
background:var(--surface); border-radius:24px; padding:34px 14px 16px;
display:flex; flex-direction:column; gap:10px;
}
.phone-search{
display:flex; align-items:center; gap:8px; padding:11px 14px;
background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px;
flex-shrink:0;
}
.phone-search__icon{ width:15px; height:15px; flex-shrink:0; color:var(--text-faint); }
.phone-search__text{ font-family:var(--font-mono); font-size:11.5px; color:var(--text); white-space:nowrap; overflow:hidden; }
.phone-search__cursor{ width:1.5px; height:13px; background:var(--text-faint); animation:heroCursorBlink 1s steps(1) infinite; flex-shrink:0; }
@keyframes heroCursorBlink{ 50%{ opacity:0; } }
.phone-results{ display:flex; flex-direction:column; gap:8px; }
.phone-result{
display:flex; align-items:center; gap:10px; padding:10px 11px;
background:var(--surface); border:1px solid var(--border); border-radius:12px;
opacity:0; transform:translateY(10px);
transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.phone-result.is-visible{ opacity:1; transform:translateY(0); }
.phone-result--you{ border-color:rgba(255,176,32,0.5); background:linear-gradient(120deg, rgba(255,176,32,0.10), var(--surface) 70%); }
.phone-result__rank{ width:18px; height:18px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); font-size:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phone-result--you .phone-result__rank{ background:var(--accent-bright); color:var(--accent-ink); font-weight:700; }
.phone-result__info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.phone-result__name{ font-size:11.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone-result__meta{ font-size:10px; color:var(--accent-bright); }
.phone-results__fade{ position:absolute; bottom:0; inset-inline:0; height:46px; background:linear-gradient(to bottom, transparent, var(--surface)); pointer-events:none; }
.hero__visual-caption{ font-size:12.5px; color:var(--text-faint); text-align:center; max-width:230px; line-height:1.6; }
/* ---- Badge, bouton "play", ligne de réassurance ---- */
.hero__badge{
display:inline-flex; align-items:center; padding:7px 16px; margin-bottom:22px;
border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border-strong);
font-size:12.5px; font-weight:600; color:var(--text-muted);
}
body.ar .hero__badge{ font-family:'Cairo', sans-serif; }
.btn--play{ display:inline-flex; align-items:center; gap:9px; background:transparent; border:none; color:var(--text-muted); font-size:14.5px; font-weight:500; padding:11px 4px; }
.btn--play:hover{ color:var(--text); }
.btn--play svg{ width:30px; height:30px; flex-shrink:0; border:1.5px solid var(--border-strong); border-radius:50%; padding:5px; transition:border-color .2s ease, color .2s ease; }
.btn--play:hover svg{ border-color:var(--accent-bright); color:var(--accent-bright); }
.hero__reassurance{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:8px; }
.hero__reassurance span{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-muted); }
.hero__reassurance svg{ width:15px; height:15px; color:var(--teal); flex-shrink:0; }
body.ar .hero__reassurance span{ font-size:12.5px; }
/* ---------- Reveal on scroll ---------- */
/* ==========================================================
SYSTÈME D'ANIMATION
1. .reveal — apparition d'un élément à l'entrée dans l'écran
2. .stagger — ses enfants apparaissent en cascade, pas d'un bloc
3. --reveal-delay — décalage posé par le JS (en-têtes de section, index)
Courbe unique dans toute la page pour un rythme cohérent.
========================================================== */
.reveal{
opacity:0; transform:translateY(24px);
transition:opacity .65s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
transform .65s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal.is-visible.is-settled{ will-change:auto; }
/* Cascade interne : les enfants entrent l'un après l'autre */
.stagger > *{
opacity:0; transform:translateY(18px);
transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
transform .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
}
.stagger.is-visible > *{ opacity:1; transform:translateY(0); }
/* ==========================================================
SÉQUENCE D'ENTRÉE DU HERO
Le hero n'attend pas le scroll : il joue sa propre mise en
scène au chargement. Tempo plus ample que le reveal standard
(accueil, pas défilement), et une entrée en échelle pour les
éléments décoratifs — un contraste voulu avec le glissement
du texte, pour donner du relief sans sortir du langage visuel
déjà établi.
========================================================== */
.hero-seq{
transition:opacity .85s cubic-bezier(.19,.68,.32,1) var(--reveal-delay, 0ms),
transform .85s cubic-bezier(.19,.68,.32,1) var(--reveal-delay, 0ms);
}
.hero-seq-visual{
opacity:0;
transform:translateY(-50%) scale(0.94);
transition:opacity 1.1s cubic-bezier(.19,.68,.32,1), transform 1.1s cubic-bezier(.19,.68,.32,1);
}
.hero-seq-visual.is-visible{ opacity:1; transform:translateY(-50%) scale(1); }
@media (prefers-reduced-motion: reduce){
.hero-seq-visual{ opacity:1 !important; transform:translateY(-50%) !important; transition:none !important; }
}
/* Accessibilité : aucun mouvement si le système le demande */
@media (prefers-reduced-motion: reduce){
.reveal, .stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ---------- Stat blocks (section 2) ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:8px; }
.stat-card{ background:var(--surface); padding:34px 26px; text-align:start; }
.stat-card__num{ font-family:var(--font-mono); font-size:clamp(26px,3vw,34px); color:var(--accent); font-weight:600; margin-bottom:10px; display:block; }
.stat-card__label{ color:var(--text-muted); font-size:14.5px; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:1fr; } }
/* ---------- Liste de signes (section 3, sombre) ---------- */
.signs{ display:grid; gap:14px; margin-top:36px; }
@media (min-width:760px){ .signs{ grid-template-columns:1fr 1fr; } .sign:last-child{ grid-column:1 / -1; } }
.sign{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.sign__num{ font-family:var(--font-mono); color:var(--alert); font-size:13px; flex-shrink:0; padding-top:3px; }
.sign strong{ color:var(--text); }
.sign p{ color:var(--text-muted); font-size:15px; margin-top:4px; }
/* ---------- Piliers (section 4) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:16px; }
.pillar{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.pillar--wide{ grid-column:1 / -1; }
.pillar__index{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent); margin-bottom:14px; letter-spacing:0.08em; }
.pillar h3{ font-size:22px; margin-bottom:10px; font-family:var(--font-body); font-weight:600; color:var(--text); }
.pillar__lead{ color:var(--text-muted); font-size:14.5px; margin-bottom:18px; }
.pillar ul{ display:grid; gap:10px; margin-top:auto; }
.pillar li{ display:flex; gap:10px; font-size:14.5px; color:var(--text); align-items:flex-start; }
.pillar li::before{ content:''; display:block; width:15px; height:15px; margin-top:3px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml;utf8,"); }
.pillar--accent{ border-color:rgba(255,176,32,0.35); background:linear-gradient(160deg, rgba(255,176,32,0.07), var(--surface) 55%); }
.pillar-split__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px; }
.pillar-split__col{ padding:22px 24px; background:var(--surface-2); border-radius:var(--radius-md); }
.pillar-split__col h4{ font-size:16.5px; font-weight:600; color:var(--text); margin-bottom:9px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pillar-split__full{ font-size:11px; font-weight:400; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0.01em; }
.pillar-split__col > p{ color:var(--text-muted); font-size:14px; margin-bottom:16px; line-height:1.5; }
.pillar-split__col ul{ display:grid; gap:9px; margin-top:0; }
.pillar-split__col li{ display:flex; gap:9px; font-size:13.5px; color:var(--text); align-items:flex-start; }
.pillar-split__col li::before{ content:''; display:block; width:14px; height:14px; margin-top:3px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml;utf8,"); }
@media (max-width:820px){ .pillar-split__grid{ grid-template-columns:1fr; } }
.pillar-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.pillar-tag{
display:inline-flex; align-items:center; gap:9px;
padding:11px 18px; border-radius:var(--radius-pill);
border:1.5px solid var(--accent-bright); background:var(--surface);
font-size:13.5px; font-weight:500; color:var(--text); white-space:nowrap;
}
.pillar-tag svg{ color:var(--accent-bright); flex-shrink:0; }
@media (max-width:640px){ .pillar-tag{ white-space:normal; } }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }
/* ---------- Étapes (section 5, sombre) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:16px; }
.step{ background:var(--surface); padding:30px 24px; position:relative; }
.step__num{ font-family:var(--font-mono); font-size:32px; color:var(--accent); opacity:0.55; margin-bottom:16px; }
.step h4{ font-size:17px; font-family:var(--font-body); font-weight:600; margin-bottom:8px; color:var(--text); }
.step p{ font-size:14px; color:var(--text-muted); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
/* ---------- Simulateur (section 6) ---------- */
.simulator{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; box-shadow:var(--shadow-card); }
.sim-form{ display:grid; gap:20px; }
.sim-field label{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; font-family:var(--font-mono); letter-spacing:0.03em; }
.sim-field select, .sim-field input[type=text]{
width:100%; padding:13px 16px; background:var(--surface-2); border:1px solid var(--border-strong);
border-radius:var(--radius-sm); color:var(--text); font-size:14.5px;
}
.sim-choice{ display:flex; gap:8px; flex-wrap:wrap; }
.sim-choice button{
padding:9px 15px; border-radius:var(--radius-pill); border:1px solid var(--border-strong);
background:transparent; color:var(--text-muted); font-size:13.5px; transition:all .16s ease;
}
.sim-choice button.is-active{ background:var(--accent-bright); border-color:var(--accent-bright); color:var(--accent-ink); font-weight:600; }
.sim-result{ text-align:center; }
.gauge{ position:relative; width:180px; height:180px; margin:0 auto 22px; }
.gauge svg{ transform:rotate(-90deg); }
.gauge__track{ fill:none; stroke:var(--surface-2); stroke-width:10; }
.gauge__value{ fill:none; stroke:var(--accent-bright); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.gauge__label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge__num{ font-family:var(--font-mono); font-size:30px; color:var(--accent); font-weight:600; }
.gauge__cap{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; }
.sim-result__text{ color:var(--text-muted); font-size:14.5px; margin-bottom:22px; min-height:66px; }
@media (max-width:820px){ .simulator{ grid-template-columns:1fr; padding:28px; } }
/* ---------- Checklist de l'audit gratuit (remplace l'ancien simulateur) ---------- */
.audit-checklist{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.audit-check{ display:flex; gap:14px; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.audit-check__icon{ width:26px; height:26px; border-radius:50%; background:var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.audit-check__icon svg{ width:13px; height:13px; }
.audit-check strong{ display:block; color:var(--text); font-size:15px; margin-bottom:5px; }
.audit-check p{ color:var(--text-muted); font-size:13.5px; }
@media (max-width:900px){ .audit-checklist{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .audit-checklist{ grid-template-columns:1fr; } }
/* ---------- Notre approche (section 7, sombre) ---------- */
.approach-list{ display:grid; gap:16px; margin:28px 0 40px; }
.approach-item{ display:flex; gap:16px; padding:20px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.approach-item__icon{ width:34px; height:34px; border-radius:50%; background:var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.approach-item__icon svg{ width:17px; height:17px; }
.commitment-box{ background:linear-gradient(160deg, #FFF3DC, #FFE3B0); border:1.5px solid rgba(224,137,10,0.45); border-radius:28px; padding:40px 44px; }
.commitment-box h3{ font-family:var(--font-body); font-weight:600; font-size:18px; color:#8A5300; margin-bottom:14px; }
.commitment-box p{ color:#6B4A1E; font-size:15px; margin-bottom:14px; line-height:1.6; }
.commitment-box p:last-child{ margin-bottom:0; color:#4A3410; font-weight:500; }
/* ---------- Radius profiles (section 8) ---------- */
.radius-profiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.radius-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); }
.radius-card__viz{ width:100%; height:110px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; }
.radius-card h4{ font-family:var(--font-body); font-weight:600; font-size:16px; margin-bottom:10px; color:var(--text); }
.radius-card p{ font-size:14px; color:var(--text-muted); }
.radius-card--mid{ border-color:rgba(255,176,32,0.35); }
@media (max-width:900px){ .radius-profiles{ grid-template-columns:1fr; } }
/* ---------- Secteurs (section 9, sombre) ---------- */
.sector-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.sector-card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 18px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); }
.sector-card__icon{ width:36px; height:36px; border-radius:50%; background:rgba(36,23,5,0.08); color:var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sector-card__icon svg{ width:18px; height:18px; }
.sector-card__name{ font-size:14px; font-weight:600; color:var(--text); line-height:1.3; }
.sector-card__ex{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); }
@media (max-width:900px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sector-grid{ grid-template-columns:1fr; } }
/* ---------- Tarifs (section 10) ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.price-card--highlight{ border-color:var(--accent-bright); box-shadow:var(--shadow-glow); position:relative; }
body.fr .price-card--highlight::before{ content:'Le plus choisi'; }
body.ar .price-card--highlight::before{ content:'الأكثر اختياراً'; }
.price-card--highlight::before{ position:absolute; top:-13px; inset-inline-start:28px; background:var(--accent-bright); color:var(--accent-ink); font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:var(--radius-pill); }
.price-card h4{ font-family:var(--font-body); font-weight:600; font-size:18px; margin-bottom:6px; color:var(--text); }
.price-card__sub{ color:var(--text-muted); font-size:13.5px; margin-bottom:20px; }
.price-card__amount{ font-family:var(--font-mono); font-size:32px; color:var(--accent); margin-bottom:4px; }
.price-card__period{ color:var(--text-faint); font-size:12.5px; margin-bottom:24px; }
.price-card ul{ display:grid; gap:10px; margin-bottom:26px; flex:1; }
.price-card li{ font-size:13.5px; color:var(--text); display:flex; gap:8px; }
.price-card li::before{ content:''; display:inline-block; width:14px; height:14px; margin-top:3px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml;utf8,"); }
/* Carte Audit horizontale, avant la grille */
.price-card--horizontal{
flex-direction:row; align-items:center; justify-content:space-between; gap:36px;
margin-bottom:20px; padding:32px 40px;
}
.price-card--horizontal__main{ flex:1; }
.price-card--horizontal__main .price-card__sub{ margin-bottom:14px; }
.price-card--horizontal__list{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.price-card--horizontal__list li{ font-size:13px; color:var(--text-muted); display:flex; gap:6px; align-items:center; }
.price-card--horizontal__list li::before{ content:''; display:inline-block; width:14px; height:14px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml;utf8,"); }
.price-card--horizontal__side{ flex-shrink:0; width:220px; text-align:start; }
.price-card--horizontal__side .price-card__amount{ margin-bottom:2px; }
.price-card--horizontal__side .price-card__period{ margin-bottom:16px; }
@media (max-width:760px){
.price-card--horizontal{ flex-direction:column; align-items:stretch; padding:28px 24px; }
.price-card--horizontal__side{ width:100%; }
}
/* Encart Google Ads — même famille visuelle, prix mis en avant clairement */
.ads-note{ margin-top:24px; padding:24px 26px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-md); }
.ads-note__top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ads-note__title{ display:block; font-family:var(--font-body); font-weight:600; font-size:15.5px; color:var(--text); margin-bottom:6px; }
.ads-note__desc{ font-size:13.5px; color:var(--text-muted); max-width:520px; }
.ads-note__price{ display:flex; align-items:baseline; gap:6px; flex-shrink:0; }
.ads-note__price .mono{ font-size:26px; color:var(--accent); font-weight:600; }
.ads-note__period{ font-size:12.5px; color:var(--text-faint); }
@media (max-width:640px){ .ads-note__top{ flex-direction:column; align-items:flex-start; } }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
/* ---------- FAQ (section 11, sombre) ---------- */
.faq-filters{ display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.faq-filter{ padding:9px 18px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:transparent; color:var(--text-muted); font-size:13.5px; transition:all .16s ease; }
.faq-filter.is-active{ background:var(--accent-bright); border-color:var(--accent-bright); color:var(--accent-ink); font-weight:600; }
.faq-list{ display:grid; gap:12px; }
.faq-item{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; }
.faq-q{ width:100%; text-align:start; padding:20px 22px; background:none; border:none; color:var(--text); font-size:15.5px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q__plus{ font-family:var(--font-mono); color:var(--accent); font-size:18px; transition:transform .25s ease; flex-shrink:0; }
.faq-item.is-open .faq-q__plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a__inner{ padding:0 22px 20px; color:var(--text-muted); font-size:14.5px; line-height:1.65; }
/* ---------- Preuve sociale (section 12) ---------- */
/* ---------- Preuve sociale — section travaillée, pas une grille blanche ---------- */
.section--proof{
position:relative; overflow:hidden;
background:linear-gradient(178deg, var(--surface-2) 0%, var(--bg) 58%);
}
.proof-rings{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.proof-rings svg{ width:100%; height:100%; }
.proof-rings circle{ fill:none; stroke:var(--border); stroke-width:1.5; }
.section--proof .section__inner{ position:relative; z-index:1; }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.t-card{
position:relative; margin:0; overflow:hidden;
display:flex; flex-direction:column; gap:14px;
padding:30px 28px 26px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:0 18px 40px -26px rgba(16,25,43,0.28);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Filet ambre en tête de carte : rattache la section à la signature de marque */
.t-card::before{
content:''; position:absolute; top:0; inset-inline:0; height:3px;
background:linear-gradient(90deg, var(--accent-bright), rgba(255,176,32,0));
}
.t-card:hover{
transform:translateY(-5px);
box-shadow:0 30px 60px -28px rgba(16,25,43,0.38);
border-color:rgba(255,176,32,0.45);
}
/* Guillemet en filigrane, pas un caractère posé au-dessus du texte */
.t-card__mark{
position:absolute; top:-26px; inset-inline-end:14px;
font-family:var(--font-display); font-size:150px; line-height:1;
color:var(--accent-bright); opacity:0.13; pointer-events:none; user-select:none;
}
.t-card__stars{ display:flex; gap:3px; color:var(--accent-bright); }
.t-card__stars svg{ width:14px; height:14px; }
.t-card__text{
position:relative; margin:0; flex:1;
font-size:14.5px; line-height:1.75; color:var(--text);
}
.t-card__author{
display:flex; align-items:center; gap:12px;
padding-top:18px; margin-top:4px;
border-top:1px solid var(--border);
}
.t-card__avatar{
width:40px; height:40px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--teal-dim); color:var(--teal);
border:1px solid rgba(20,184,146,0.28);
}
.t-card__avatar svg{ width:19px; height:19px; }
.t-card__id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.t-card__name{ font-weight:600; font-size:13.5px; color:var(--text); }
.t-card__meta{ font-size:11.5px; color:var(--text-faint); line-height:1.4; }
@media (max-width:900px){ .t-grid{ grid-template-columns:1fr; gap:16px; } }
@media (max-width:640px){
.t-card{ padding:24px 20px 22px; }
.t-card__mark{ font-size:110px; top:-18px; }
.t-card__text{ font-size:14px; }
}
/* ---------- CTA final + formulaire (section 13, sombre) ---------- */
.cta-final{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border-radius:32px; border:1px solid var(--border); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 50px 100px -30px rgba(11,18,32,0.4); }
.cta-final__copy{ padding:56px; display:flex; flex-direction:column; justify-content:center; }
.cta-final__copy h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:16px; color:var(--text); }
body.ar .cta-final__copy h2{ font-size:clamp(19px,2.6vw,27px); line-height:1.45; }
.cta-final__copy p{ color:var(--text-muted); font-size:15.5px; }
.cta-final__form{ padding:56px; background:var(--surface); border-inline-start:1px solid var(--border); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-family:var(--font-mono); color:var(--text-muted); margin-bottom:7px; letter-spacing:0.03em; }
.field input, .field select, .field textarea{
width:100%; padding:13px 15px; background:var(--surface-2); border:1px solid var(--border-strong);
border-radius:var(--radius-sm); color:var(--text); font-size:14.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent-bright); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-error{ color:var(--alert); font-size:12.5px; margin-top:6px; display:none; }
.field-error.is-visible{ display:block; }
.honeypot{ position:absolute; left:-9999px; opacity:0; }
.field-checkbox{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-muted); margin-bottom:18px; cursor:pointer; }
.field-checkbox input{ width:17px; height:17px; accent-color:var(--accent-bright); flex-shrink:0; }
.form-presel{
display:flex; align-items:center; justify-content:space-between; gap:12px;
background:var(--teal-dim); border:1px solid rgba(45,212,167,0.35); border-radius:var(--radius-sm);
padding:12px 16px; margin-bottom:18px; font-size:13px; color:var(--text);
}
.form-presel a{ color:var(--teal); font-family:var(--font-mono); font-size:11.5px; flex-shrink:0; }
.cta-final__gmap{ margin-top:32px; max-width:400px; }
.cta-final__gmap .gmap__label{ background:var(--surface); }
.form-note{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-top:14px; text-align:center; }
.form-success{ display:none; text-align:center; padding:30px 0; }
.form-success.is-visible{ display:block; }
.form-success__icon{ width:52px; height:52px; border-radius:50%; background:var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.form-success__icon svg{ width:24px; height:24px; }
@media (max-width:900px){ .cta-final{ grid-template-columns:1fr; } .cta-final__form{ border-inline-start:none; border-top:1px solid var(--border); } .cta-final__copy, .cta-final__form{ padding:36px 26px; } }
/* ---------- À propos (section 14) ---------- */
.about-box{ display:flex; gap:28px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-card); }
.about-box__mark{ width:52px; height:52px; border-radius:14px; background:var(--accent-bright); flex-shrink:0; }
/* ---------- Footer ---------- */
.footer{ padding:64px 0 32px; border-top:1px solid var(--border); background:var(--bg); }
.footer__inner{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1.3fr 1fr; gap:32px; padding-bottom:40px; }
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col--brand{ gap:16px; }
.footer__col .brand{ font-size:16px; }
.footer__title{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:2px; }
.footer__col a{ font-size:13.5px; color:var(--text-muted); transition:color .15s ease; }
.footer__col a:hover{ color:var(--accent); }
.footer__desc{ font-size:13px; color:var(--text-faint); line-height:1.6; max-width:280px; }
.footer__text{ font-size:13px; color:var(--text-faint); line-height:1.6; }
.footer__wa-link{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--teal); font-weight:500; width:fit-content; }
.footer__wa-link:hover{ color:var(--teal); opacity:0.8; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:24px; border-top:1px solid var(--border); }
.footer__bottom p{ margin:0; color:var(--text-faint); font-size:12.5px; }
.footer__note{ max-width:420px; text-align:right; }
@media (max-width:900px){
.footer__grid{ grid-template-columns:1fr 1fr; }
.footer__col--brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
.footer__grid{ grid-template-columns:1fr; }
.footer__bottom{ flex-direction:column; align-items:flex-start; }
.footer__note{ text-align:start; }
}
/* ---------- WhatsApp flottant (constante, indépendante du thème) ---------- */
.wa-float{
position:fixed; bottom:24px; inset-inline-end:24px; z-index:90;
width:56px; height:56px; border-radius:50%; background:var(--teal-solid);
display:flex; align-items:center; justify-content:center; color:#fff;
box-shadow:0 10px 30px -6px rgba(20,184,146,0.5);
transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.08); }
/* ---------- Contenu de la bande/panneau ambre ---------- */
.panel-amber__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.panel-amber h3, .section--amber h3{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); max-width:600px; color:var(--text); }
body.ar .panel-amber h3, body.ar .section--amber h3{ font-family:'Cairo', sans-serif; font-weight:700; font-size:clamp(16px,1.8vw,21px); line-height:1.45; }
@media (max-width:640px){ body.ar .panel-amber h3, body.ar .section--amber h3{ font-size:16px; } }
.panel-amber .btn--dark, .section--amber .btn--dark{ background:var(--accent-ink); color:#FFE7B8; }
.panel-amber .btn--dark:hover, .section--amber .btn--dark:hover{ background:#3A2408; transform:translateY(-2px); }
/* ---------- Mockup fiche Google Business (animé) ---------- */
.gbp-card{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
padding:22px; width:280px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
animation:gbp-float 5s ease-in-out infinite;
}
@keyframes gbp-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.gbp-card__top{ display:flex; gap:12px; margin-bottom:14px; }
.gbp-card__avatar{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--accent-bright),#FF8A3D); flex-shrink:0; }
.gbp-card__name{ font-family:var(--font-body); font-weight:600; font-size:14.5px; color:var(--text); margin-bottom:3px; }
.gbp-card__stars{ font-size:12px; color:var(--accent-bright); letter-spacing:1px; }
.gbp-card__stars span{ color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0; margin-inline-start:4px; }
.gbp-card__cat{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.gbp-card__badges{ display:flex; gap:8px; margin-bottom:14px; }
.gbp-badge{ font-size:11px; font-family:var(--font-mono); padding:4px 10px; border-radius:var(--radius-pill); background:var(--teal-dim); color:var(--teal); display:inline-flex; align-items:center; gap:5px; }
.gbp-badge__dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(45,212,167,0.5); } 50%{ opacity:0.6; box-shadow:0 0 0 5px rgba(45,212,167,0); } }
.gbp-badge--ghost{ background:var(--surface-2); color:var(--text-muted); }
.gbp-card__actions{ display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-top:12px; font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.gbp-card--floating{ position:absolute; }
/* ---------- Illustration carte Google Maps (rues, pins, rayon) ---------- */
.gmap{ position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; background:#E8EDF3; border:1px solid var(--border); }
.gmap__roads{ position:absolute; inset:0; }
.gmap__block{ position:absolute; background:#D7E0EA; border-radius:3px; }
.gmap__pin{ position:absolute; width:22px; height:22px; transform:translate(-50%,-100%); }
.gmap__pin svg{ width:100%; height:100%; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.gmap__pin--you{ width:30px; height:30px; z-index:3; }
.gmap__radius{ position:absolute; border:2px dashed rgba(255,176,32,0.55); border-radius:50%; background:rgba(255,176,32,0.08); animation:gmap-pulse 3s ease-in-out infinite; }
@keyframes gmap-pulse{ 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }
.gmap__label{ position:absolute; bottom:12px; inset-inline-start:12px; background:var(--surface); padding:6px 12px; border-radius:var(--radius-pill); font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); box-shadow:var(--shadow-card); }
/* ---------- Local pack animé : classement à 4 positions + barre de temps ---------- */
.lp-block{ margin-top:22px; }
.lp-ranking{ position:relative; width:100%; height:384px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:8px; box-shadow:var(--shadow-card); overflow:hidden; }
.lp-row{
position:absolute; left:8px; right:8px; top:8px; height:80px;
display:flex; flex-direction:column; justify-content:center; gap:9px;
padding:0 16px; border-radius:var(--radius-md);
font-size:13.5px; color:var(--text-muted);
transition:transform 1s cubic-bezier(.65,0,.35,1), background .5s ease;
}
.lp-row__top{ display:flex; align-items:center; gap:12px; }
.lp-row__bottom{ display:flex; align-items:center; justify-content:space-between; padding-inline-start:32px; }
.lp-row__rank{ font-family:var(--font-mono); font-size:12px; width:20px; flex-shrink:0; color:var(--text-faint); transition:color .4s ease; }
.lp-row__name{ flex:1; color:var(--text); font-weight:500; }
.lp-row__name em, .lp-row__name strong{ font-style:normal; color:var(--teal); font-size:11px; font-weight:400; opacity:0; transition:opacity .4s ease; }
.lp-row__meta{ font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); flex-shrink:0; }
.lp-row__stars{ color:var(--accent-bright); font-size:11px; letter-spacing:1.5px; }
.lp-row__reviews{ color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0; font-size:10.5px; margin-inline-start:3px; }
.lp-row__ctr{ font-size:11px; color:var(--text-muted); flex-shrink:0; }
body.fr .lp-row__ctr::after{ content:' des clics'; color:var(--text-faint); }
body.ar .lp-row__ctr::after{ content:' من النقرات'; color:var(--text-faint); }
.lp-row--you.lp-row--leader{ background:var(--teal-dim); }
.lp-row--you.lp-row--leader .lp-row__rank{ color:var(--teal); }
.lp-row--you.lp-row--leader .lp-row__name em, .lp-row--you.lp-row--leader .lp-row__name strong{ opacity:1; }
/* ---- Timeline horizontale (remplace l'ancienne barre verticale, occupe toute la largeur) ---- */
/* ---- Barre de recherche animée (au-dessus du classement) ---- */
.lp-search{ display:inline-flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-strong); border-radius:999px; padding:14px 22px; max-width:420px; margin-bottom:26px; box-shadow:var(--shadow-card); }
.lp-search__icon{ width:17px; height:17px; flex-shrink:0; color:var(--text-faint); }
.lp-search__text{ font-family:var(--font-mono); font-size:13.5px; color:var(--text); white-space:nowrap; }
.lp-search__cursor{ width:1.5px; height:15px; background:var(--text-faint); animation:lpCursorBlink 1s steps(1) infinite; }
@keyframes lpCursorBlink{ 50%{ opacity:0; } }
/* ---- Grille classement (gauche) + explications (droite) — utilise toute la largeur de la section ---- */
.lp-grid{ display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:52px; align-items:start; }
.lp-explain{ position:relative; padding-top:6px; }
.lp-explain__step{ position:relative; display:flex; gap:18px; padding-bottom:36px; }
.lp-explain__step:last-child{ padding-bottom:0; }
.lp-explain__step::after{ content:''; position:absolute; inset-inline-start:8px; top:22px; bottom:-14px; width:2px; background:var(--border-strong); }
.lp-explain__step:last-child::after{ display:none; }
.lp-explain__dot{ position:relative; z-index:1; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--surface); border:3px solid var(--border-strong); flex-shrink:0; transition:background .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease; }
.lp-explain__step.is-active .lp-explain__dot{ background:var(--accent-bright); border-color:var(--accent-bright); transform:scale(1.15); box-shadow:0 0 0 5px rgba(255,176,32,0.20); }
.lp-explain__step.is-done .lp-explain__dot{ background:var(--teal); border-color:var(--teal); }
.lp-explain__month{ display:block; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; transition:color .4s ease, font-weight .4s ease; }
.lp-explain__body h4{ font-size:15.5px; font-weight:600; color:var(--text-faint); margin:0 0 5px; transition:color .4s ease; }
.lp-explain__body p{ font-size:13px; color:var(--text-faint); line-height:1.5; max-width:420px; opacity:0.55; transition:color .4s ease, opacity .4s ease; }
.lp-explain__step.is-active .lp-explain__month{ color:var(--accent); font-weight:700; }
.lp-explain__step.is-active .lp-explain__body h4{ color:var(--text); }
.lp-explain__step.is-active .lp-explain__body p{ color:var(--text-muted); opacity:1; }
.lp-explain__step.is-done .lp-explain__body h4{ color:var(--text-muted); }
.lp-explain__step.is-done .lp-explain__body p{ opacity:0.8; color:var(--text-faint); }
.lp-caption{ font-size:12.5px; color:var(--text-faint); max-width:700px; margin-top:20px; line-height:1.6; }
@media (max-width:900px){ .lp-grid{ grid-template-columns:1fr; gap:30px; } }
@media (max-width:520px){ .lp-search{ max-width:100%; } .lp-search__text{ overflow:hidden; text-overflow:ellipsis; } }
/* ---------- Icônes écosystème Google (couleurs officielles, formes reconnaissables) ---------- */
.google-icons{ display:flex; gap:14px; flex-wrap:wrap; margin:32px 0 8px; }
.google-icon{ display:flex; align-items:center; gap:12px; padding:14px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:var(--shadow-card); }
.google-icon svg{ flex-shrink:0; }
.google-icon span.label{ font-size:13.5px; color:var(--text); font-weight:500; }
/* ---------- Calculateur de délai & trafic (prédicteur) ---------- */
.predictor{
background:var(--surface); border:1px solid var(--border); border-radius:32px;
padding:44px; box-shadow:0 40px 90px -28px rgba(11,18,32,0.3);
}
.predictor__intro{ max-width:640px; margin-bottom:32px; }
.predictor__body{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.predictor__inputs{ display:grid; gap:20px; }
.predictor__inputs input[type=range]{
width:100%; accent-color:var(--accent-bright); height:4px;
}
.range-ticks{ display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }
.predictor__toggle{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--text); cursor:pointer; }
.predictor__results{ display:flex; flex-direction:column; gap:14px; }
.predictor__result-card{
background:var(--surface-2); border:1px solid var(--border-strong); border-radius:18px;
padding:20px 24px; display:flex; flex-direction:column; gap:6px;
}
.predictor__result-label{ font-size:12.5px; color:var(--text-muted); font-family:var(--font-mono); }
.predictor__result-card--chart{ gap:10px; }
.pchart{ display:flex; align-items:flex-end; gap:3px; height:90px; margin-top:8px; }
.pchart__col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.pchart__bar{ width:100%; max-width:16px; border-radius:3px 3px 1px 1px; background:var(--surface-3); transition:height .5s cubic-bezier(.22,1,.36,1); }
.pchart__col--last .pchart__bar{ background:var(--accent-bright); }
.pchart__month{ font-size:8.5px; color:var(--text-faint); font-family:var(--font-mono); margin-top:5px; white-space:nowrap; }
.pchart__caption{ font-size:11.5px; color:var(--text-faint); line-height:1.5; margin-top:2px; }
.predictor__result-value{ font-size:28px; color:var(--accent); font-weight:600; }
.predictor__disclaimer{ font-size:12px; color:var(--text-faint); line-height:1.6; }
@media (max-width:820px){
.predictor{ padding:28px 22px; }
.predictor__body{ grid-template-columns:1fr; gap:28px; }
}
/* ---------- Calculateur interactif (tarifs) ---------- */
.calc-widget{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:32px; margin-top:40px; }
.calc-widget__title{ font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--text); margin-bottom:18px; }
.calc-plans{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.calc-plan{ flex:1; min-width:140px; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); text-align:start; font-size:13.5px; }
.calc-plan strong{ display:block; color:var(--text); font-size:14.5px; margin-bottom:2px; }
.calc-plan.is-active{ border-color:var(--accent-bright); background:linear-gradient(160deg, rgba(255,176,32,0.12), var(--surface)); color:var(--text); }
.calc-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
.calc-row:last-of-type{ border-bottom:none; }
.calc-row label{ font-size:14.5px; display:flex; align-items:center; gap:12px; color:var(--text); }
.calc-row__price{ font-size:15px; color:var(--accent); font-weight:600; flex-shrink:0; }
.calc-row__period{ font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--text-faint); margin-inline-start:2px; }
/* Sous-panneau budget Google Ads (quand l'option est activée) */
.calc-ads-budget{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:20px 22px; margin:4px 0 14px; }
.calc-ads-budget__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.calc-ads-budget__title{ font-size:13.5px; font-weight:600; color:var(--text); }
.calc-ads-budget__note{ font-size:11px; font-family:var(--font-mono); color:var(--teal); background:var(--teal-dim); padding:4px 10px; border-radius:var(--radius-pill); }
.calc-ads-budget__row{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.calc-ads-budget__row input[type=range]{ flex:1; accent-color:var(--accent-bright); height:4px; }
.calc-ads-budget__row .mono{ flex-shrink:0; font-size:13.5px; color:var(--text); min-width:88px; text-align:right; }
.calc-ads-budget__days{ display:flex; gap:8px; margin-bottom:16px; }
.calc-ads-budget__days button{ flex:1; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); font-size:12.5px; text-align:center; }
.calc-ads-budget__days button span{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
.calc-ads-budget__days button.is-active{ border-color:var(--accent-bright); background:linear-gradient(160deg, rgba(255,176,32,0.14), var(--surface)); color:var(--text); }
.calc-ads-budget .calc-line{ border-bottom:none; padding:10px 0 0; }
.calc-line{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; font-size:14px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.calc-line .mono{ color:var(--text); }
.calc-total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; padding-top:20px; border-top:1px solid var(--border-strong); }
.calc-total__num{ font-family:var(--font-mono); font-size:28px; color:var(--accent); }
.switch{ position:relative; width:42px; height:24px; background:var(--surface-3); border-radius:var(--radius-pill); border:1px solid var(--border-strong); flex-shrink:0; }
.switch::after{ content:''; position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%; background:var(--text-muted); transition:transform .18s ease, background .18s ease; }
.switch.is-on{ background:rgba(255,176,32,0.22); border-color:var(--accent-bright); }
.switch.is-on::after{ transform:translateX(18px); background:var(--accent-bright); }
body.ar .switch.is-on::after{ transform:translateX(-18px); }
/* ---------- Responsive nouveaux composants ---------- */
@media (max-width:640px){
.gbp-card{ width:230px; padding:16px; }
.panel-amber__inner{ flex-direction:column; align-items:flex-start; }
}
/* ---------- Responsive nav ---------- */
@media (max-width:860px){
.nav-links{ display:none; }
.nav-links.is-open{
display:flex; flex-direction:column; gap:0;
position:absolute; top:100%; left:0; right:0; z-index:101;
background:var(--surface); opacity:1;
border-bottom:1px solid var(--border); padding:8px 20px 20px;
box-shadow:0 16px 30px -10px rgba(16,25,43,0.2);
}
.nav-links.is-open a{ padding:14px 0; border-bottom:1px solid var(--border); color:var(--text); }
.nav-toggle{ display:flex; }
/* Le CTA quitte la barre (elle débordait) et se pose en bas du menu déroulant */
.nav-cta > .btn{ display:none; }
.nav-links.is-open .nav-links__cta{
display:flex; justify-content:center; width:100%;
margin-top:16px; padding:14px 22px; border:none;
min-height:48px;
}
.nav-cta{ gap:10px; }
}
@media (max-width:420px){
.nav-cta{ gap:7px; }
.lang-btn{ padding:6px 11px; font-size:11px; }
.theme-toggle{ width:36px; height:36px; }
.navbar__inner{ padding:0 16px; }
}
/* ---------- Utilitaires ---------- */
.hidden{ display:none !important; }
.text-center{ text-align:center; }
/* ==========================================================
MOBILE — 85% du trafic attendu.
Bloc ajouté en fin de feuille : n'affecte QUE les petits
écrans, la version desktop reste strictement inchangée.
========================================================== */
/* ---- Tablette et en-dessous ---- */
@media (max-width:820px){
.hero{ padding:132px 0 76px; }
.section{ padding:72px 0; }
.section--tight{ padding:48px 0; }
}
/* ---- Mobile ---- */
@media (max-width:640px){
.section__inner{ padding:0 20px; }
.hero__inner{ padding:0 20px; }
.navbar__inner{ padding:0 20px; }
.footer__inner{ padding:0 20px; }
.hero{ padding:118px 0 60px; }
.section{ padding:60px 0; }
.section--tight{ padding:40px 0; }
/* Titres : Cairo est large, on plafonne en dur plutôt qu'en vw */
body.ar .hero h1{ font-size:23px; line-height:1.5; }
body.ar .sec-title{ font-size:19px; line-height:1.45; }
.hero__sub{ font-size:15px; }
.sec-sub{ font-size:14.5px; }
/* Boutons : cibles tactiles confortables + pleine largeur pour les CTA du hero */
.btn{ min-height:48px; padding:13px 22px; }
.btn--sm{ min-height:40px; }
.hero__actions{ flex-direction:column; align-items:stretch; gap:10px; }
.hero__actions .btn{ width:100%; justify-content:center; }
/* Champs de formulaire : 16px minimum, sinon iOS zoome à la mise au point */
.field input, .field select, .field textarea{ font-size:16px; padding:14px 15px; }
.sim-field select, .sim-field input[type=text]{ font-size:16px; }
.field-row{ grid-template-columns:1fr; }
/* Classement local : contenu compacté pour tenir dans la hauteur de ligne fixe */
.lp-ranking{ height:340px; }
.lp-row{ height:72px; padding:0 12px; gap:7px; font-size:12.5px; }
.lp-row__name{ font-size:13px; }
.lp-row__meta{ font-size:10.5px; }
.lp-row__bottom{ padding-inline-start:26px; }
.lp-row__stars{ font-size:10px; letter-spacing:1px; }
.lp-row__reviews{ font-size:9.5px; }
.lp-row__ctr{ font-size:10.5px; }
/* Le suffixe « des clics / من النقرات » fait déborder la ligne sur petit écran */
body.fr .lp-row__ctr::after, body.ar .lp-row__ctr::after{ content:''; }
.lp-search{ padding:12px 16px; }
.lp-search__text{ font-size:12px; }
.lp-explain__body p{ font-size:12.5px; }
/* Trust bar */
.trust-bar__num{ font-size:32px; }
/* Calculateurs */
.calc-widget{ padding:22px 18px; }
.calc-plan{ min-width:100%; }
.calc-total__num{ font-size:23px; }
.calc-ads-budget__days{ flex-wrap:wrap; }
.calc-ads-budget__days button{ flex:1 1 100%; min-height:44px; }
.predictor__result-value{ font-size:26px; }
/* Tarifs */
.price-card{ padding:26px 22px; }
.price-card__amount{ font-size:30px; }
.ads-note{ padding:20px 18px; }
/* Formulaire */
.cta-final__copy, .cta-final__form{ padding:32px 20px; }
/* Bandeau ambre */
.panel-amber__inner{ gap:18px; }
.panel-amber__inner .btn{ width:100%; justify-content:center; }
/* WhatsApp flottant : plus discret, ne masque pas les CTA */
.wa-float{ width:50px; height:50px; bottom:16px; inset-inline-end:16px; }
}
/* ---- Petits mobiles (≤ 380px) ---- */
@media (max-width:380px){
.section__inner, .hero__inner, .navbar__inner, .footer__inner{ padding:0 16px; }
body.ar .hero h1{ font-size:21px; }
body.ar .sec-title{ font-size:18px; }
.trust-bar__num{ font-size:28px; }
.lp-row__meta{ display:none; }
.price-card__amount{ font-size:27px; }
.calc-total__num{ font-size:21px; }
}
/* ==========================================================
MOBILE — TITRES SECONDAIRES
Cairo rend plus large qu'une police latine à corps égal :
tous les niveaux de titre sont abaissés en mode arabe sur
petit écran. Le desktop et la version française sont intacts.
========================================================== */
@media (max-width:640px){
/* Titres — toutes langues */
.cta-final__copy h2{ font-size:24px; line-height:1.25; }
.pillar h3{ font-size:19px; }
.step h4{ font-size:16px; }
.price-card h4{ font-size:17px; }
.commitment-box h3{ font-size:16.5px; }
.radius-card h4{ font-size:15.5px; }
.pillar-split__col h4{ font-size:15.5px; }
.lp-explain__body h4{ font-size:14.5px; }
.calc-widget__title{ font-size:15px; }
.sec-sub{ margin-bottom:30px; }
/* Titres — spécifique arabe (Cairo, plus large) */
body.ar .cta-final__copy h2{ font-size:20px; line-height:1.45; }
body.ar .pillar h3{ font-size:17px; line-height:1.45; }
body.ar .step h4{ font-size:15px; }
body.ar .price-card h4{ font-size:16px; }
body.ar .commitment-box h3{ font-size:15.5px; line-height:1.5; }
body.ar .radius-card h4{ font-size:15px; }
body.ar .pillar-split__col h4{ font-size:14.5px; }
body.ar .lp-explain__body h4{ font-size:14px; }
body.ar .calc-widget__title{ font-size:14.5px; }
body.ar .ads-note__title{ font-size:14.5px; }
body.ar .ads-note__desc{ font-size:13px; }
body.ar .sign strong{ font-size:14.5px; }
body.ar .audit-check strong{ font-size:14.5px; }
body.ar .approach-item strong{ font-size:14.5px; }
body.ar .sec-sub{ font-size:14px; line-height:1.7; }
body.ar .hero__sub{ font-size:14.5px; line-height:1.75; }
body.ar .pillar__lead{ font-size:14px; }
body.ar .commitment-box p{ font-size:14px; }
body.ar .sign p, body.ar .step p{ font-size:13.5px; }
body.ar .t-card__text{ font-size:13.5px; }
body.ar .faq-q{ font-size:14.5px; }
body.ar .faq-a__inner{ font-size:14px; }
}
@media (max-width:380px){
body.ar .cta-final__copy h2{ font-size:19px; }
body.ar .pillar h3{ font-size:16px; }
body.ar .price-card h4{ font-size:15px; }
body.ar .faq-q{ font-size:13.5px; }
}
/* ==========================================================
BLOC « EN CLAIR » — répond aux 3 questions du visiteur
avant toute statistique : on fait quoi, ça rapporte quoi,
comment on le constate.
========================================================== */
.clear-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.clear-card{
position:relative; display:flex; flex-direction:column; gap:12px;
padding:30px 26px 28px;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.clear-card:hover{ transform:translateY(-4px); box-shadow:0 28px 55px -30px rgba(16,25,43,0.35); }
/* La carte centrale — le bénéfice — est celle qu'on veut voir en premier */
.clear-card--accent{
border-color:rgba(255,176,32,0.40);
background:linear-gradient(165deg, rgba(255,176,32,0.09), var(--surface) 58%);
}
.clear-card__step{
position:absolute; top:22px; inset-inline-end:24px;
font-size:12px; font-weight:600; color:var(--text-faint); opacity:0.65;
}
.clear-card__icon{
width:42px; height:42px; border-radius:12px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--teal-dim); color:var(--teal);
}
.clear-card--accent .clear-card__icon{ background:rgba(255,176,32,0.18); color:var(--accent); }
.clear-card__icon svg{ width:21px; height:21px; }
.clear-card h3{ font-size:18px; font-family:var(--font-body); font-weight:600; color:var(--text); }
body.ar .clear-card h3{ font-family:'Cairo', sans-serif; font-weight:700; font-size:17px; }
.clear-card p{ font-size:14.5px; line-height:1.7; color:var(--text-muted); }
/* Ligne « ce que ça change » en pied de pilier — le bénéfice concret */
.pillar__result{
margin-top:18px; padding-top:16px;
border-top:1px dashed var(--border-strong);
font-size:14px; line-height:1.65; color:var(--text-muted);
}
.pillar__result strong{ color:var(--teal); font-weight:600; }
@media (max-width:900px){ .clear-grid{ grid-template-columns:1fr; gap:14px; } }
@media (max-width:640px){
.clear-card{ padding:24px 20px; }
.clear-card h3{ font-size:16.5px; }
body.ar .clear-card h3{ font-size:15.5px; }
.clear-card p{ font-size:14px; }
body.ar .clear-card p{ font-size:13.5px; }
.pillar__result{ font-size:13.5px; }
body.ar .pillar__result{ font-size:13px; }
}
/* ==========================================================
FAQ — panneau ambre encadré, pas une bande pleine largeur.
Traitement distinct du reste de la page : deux colonnes,
intitulé et relance à gauche, questions à droite.
Évite aussi d'enchaîner deux fonds sombres avec le CTA final.
========================================================== */
.faq-panel{
/* Palette ambre appliquée localement : tout ce qui est à l'intérieur s'y adapte */
--bg:#FFB020;
--surface:rgba(255,255,255,0.55);
--surface-2:#FFD98A;
--border:rgba(36,23,5,0.16);
--border-strong:rgba(36,23,5,0.30);
--text:#241705;
--text-muted:#5C3D08;
--text-faint:#8A5F12;
--accent:#241705;
position:relative; overflow:hidden;
display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:48px;
padding:52px 48px;
border-radius:32px;
background:linear-gradient(122deg, #FFC13A 0%, var(--bg) 46%, #F98C1D 100%);
color:var(--text);
box-shadow:0 34px 80px -34px rgba(255,176,32,0.55);
}
.faq-panel__rings{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.faq-panel__rings svg{ width:100%; height:100%; }
.faq-panel__rings circle{ fill:none; stroke:rgba(36,23,5,0.10); stroke-width:1.5; }
.faq-panel__aside, .faq-panel__main{ position:relative; z-index:1; }
.faq-panel__aside{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.faq-panel__aside .sec-title{ margin-bottom:14px; }
/* Cartes de question : fond translucide sur l'ambre, pas de blanc plat */
.faq-panel .faq-item{
background:rgba(255,255,255,0.52);
border-color:rgba(36,23,5,0.14);
backdrop-filter:blur(3px);
transition:background .2s ease, border-color .2s ease;
}
.faq-panel .faq-item:hover{ background:rgba(255,255,255,0.72); }
.faq-panel .faq-item.is-open{ background:rgba(255,255,255,0.82); border-color:rgba(36,23,5,0.26); }
.faq-panel .faq-q__plus{ color:var(--accent-ink); }
/* Filtre actif : encre sur ambre, l'inverse du reste de la page */
.faq-panel .faq-filter{ border-color:rgba(36,23,5,0.28); color:var(--text-muted); }
.faq-panel .faq-filter:hover{ color:var(--text); }
.faq-panel .faq-filter.is-active{ background:var(--accent-ink); border-color:var(--accent-ink); color:#FFD98A; }
@media (max-width:900px){
.faq-panel{ grid-template-columns:1fr; gap:28px; padding:40px 32px; }
}
@media (max-width:640px){
.faq-panel{ padding:30px 20px; border-radius:24px; gap:24px; }
}
/* --- Encadré "Ce qu'il faut retenir" --- */
.recap-box{
max-width:640px; margin:36px auto 0; padding:28px 32px;
background:var(--surface-2); border:1px solid var(--border); border-radius:20px;
}
.recap-box__title{ display:block; font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; }
body.ar .recap-box__title{ font-family:'Cairo', sans-serif; text-transform:none; letter-spacing:0; }
.recap-box ul{ display:grid; gap:10px; }
.recap-box li{ position:relative; padding-inline-start:22px; font-size:14.5px; color:var(--text-muted); line-height:1.6; }
.recap-box li::before{
content:''; position:absolute; inset-inline-start:0; top:7px; width:8px; height:8px; border-radius:50%; background:var(--accent-bright);
}
@media (max-width:640px){
.gplayer__stage{ height:380px; }
.gplayer__grid{ grid-template-columns:repeat(4,1fr); gap:10px; }
.gcard__avatar{ width:32px; height:32px; }
.recap-box{ padding:22px 20px; }
}
/* ==========================================================
ENCADRÉ DE CONCLUSION — réutilisé dans presque toutes les
nouvelles sections (3 à 11) : referme chaque section sur
une idée simple, fond légèrement distinct du reste.
========================================================== */
.conclusion-panel{
max-width:680px; margin:40px auto 0; padding:26px 32px;
background:var(--surface-2); border:1px solid var(--border); border-radius:18px;
text-align:center;
}
.section--amber .conclusion-panel{ background:rgba(255,255,255,0.85); border-color:rgba(36,23,5,0.10); box-shadow:0 16px 34px -24px rgba(36,23,5,0.3); }
.section--amber .conclusion-panel p{ color:#5C3D08; }
.section--amber .conclusion-panel strong{ color:#241705; }
.conclusion-panel p{ font-size:15px; line-height:1.7; color:var(--text-muted); }
.conclusion-panel strong{ color:var(--text); }
.conclusion-panel--dark{ background:rgba(255,255,255,0.05); border-color:var(--border); }
/* ==========================================================
SECTION 3 — Illustration "spotlight" (deux vitrines)
========================================================== */
/* ==========================================================
SECTION 4 — Illustration "rayonnement" (recherche → actions)
========================================================== */
/* ==========================================================
Illustration animée section 4 — même mécanique que la section 2
(recherche → fiche qui s'allume → résultat), mais en format
compact : pas de coque de téléphone, largeur suffisante pour
qu'aucun nom de résultat ne passe à la ligne. Boucle ~13s.
========================================================== */
@keyframes g3Breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.018); } }
@keyframes g3GlowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.95; } }
.cg{ max-width:460px; margin:36px auto 16px; }
.cg-stage{ position:relative; width:100%; height:230px; }
.cg-layer{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
opacity:0; transform:scale(0.95); pointer-events:none;
transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.cg-layer.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
.cg-searchbar{
display:flex; align-items:center; gap:8px; padding:12px 18px; min-width:260px;
background:rgba(255,255,255,0.05); border:1px solid var(--border-strong); border-radius:999px;
}
.cg-searchbar svg{ width:14px; height:14px; color:var(--text-faint); flex-shrink:0; }
.cg-searchbar span:not(.cg-caret){ font-family:var(--font-mono); font-size:11px; color:var(--text); white-space:nowrap; }
.cg-caret{ width:1.5px; height:12px; background:var(--text-faint); animation:heroCursorBlink 1s steps(1) infinite; flex-shrink:0; }
.cg-card{
position:relative; width:270px; padding:18px 20px; border-radius:20px;
background:rgba(255,255,255,0.05); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.13);
animation:g3Breathe 4.6s ease-in-out infinite;
}
.cg-card__glow{
position:absolute; inset:-40px; z-index:-1; border-radius:32px;
background:radial-gradient(circle at 25% 20%, rgba(255,176,32,0.2), transparent 65%);
filter:blur(20px); animation:g3GlowPulse 4.6s ease-in-out infinite;
}
.cg-card__top{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.cg-card__thumb{ width:36px; height:36px; border-radius:11px; background:linear-gradient(145deg, rgba(255,176,32,0.3), rgba(255,176,32,0.08)); flex-shrink:0; }
.cg-card__id{ display:flex; flex-direction:column; gap:3px; }
.cg-card__name{ font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; }
body.ar .cg-card__name{ font-family:'Cairo', sans-serif; }
.cg-card__stars{ display:flex; gap:2px; color:var(--accent-bright); }
.cg-card__stars svg{ width:9px; height:9px; fill:currentColor; }
.cg-card__signals{ display:flex; gap:8px; }
.cg-signal{
display:flex; align-items:center; gap:5px; padding:6px 9px; border-radius:9px;
background:rgba(255,255,255,0.04); color:var(--text-faint);
opacity:0.4; transform:scale(0.94);
transition:opacity .6s cubic-bezier(.22,1,.36,1) var(--sd,0ms), transform .6s cubic-bezier(.22,1,.36,1) var(--sd,0ms),
background .4s ease var(--sd,0ms), color .4s ease var(--sd,0ms);
}
.cg-signal svg{ width:10px; height:10px; flex-shrink:0; }
.cg-signal span{ font-size:9.5px; font-weight:500; white-space:nowrap; }
.cg-card.is-lit .cg-signal{ opacity:1; transform:scale(1); background:rgba(14,156,126,0.14); color:var(--teal); }
/* Le résultat tient sur une seule ligne — largeur volontairement généreuse */
.cg-result{
display:flex; align-items:center; gap:9px; padding:11px 18px; min-width:280px; width:max-content; max-width:100%;
background:rgba(255,176,32,0.09); border:1px solid rgba(255,176,32,0.3); border-radius:13px; white-space:nowrap;
}
.cg-result__rank{ width:18px; height:18px; border-radius:50%; background:var(--accent-bright); color:var(--accent-ink); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cg-result__name{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; }
body.ar .cg-result__name{ font-family:'Cairo', sans-serif; }
.cg-result__stars{ display:flex; gap:1px; color:var(--accent-bright); flex-shrink:0; }
.cg-result__stars svg{ width:9px; height:9px; fill:currentColor; }
.cg-outcomes{ display:flex; gap:12px; }
.cg-outcome{
display:flex; flex-direction:column; align-items:center; gap:6px; width:64px;
opacity:0; transform:translateY(8px) scale(0.92);
transition:opacity .55s cubic-bezier(.34,1.56,.64,1) var(--od,0ms), transform .55s cubic-bezier(.34,1.56,.64,1) var(--od,0ms);
}
.cg-outcomes.is-visible .cg-outcome{ opacity:1; transform:translateY(0) scale(1); }
.cg-outcome svg{
width:15px; height:15px; color:var(--teal); padding:9px; box-sizing:content-box;
background:rgba(14,156,126,0.12); border:1px solid rgba(14,156,126,0.24); border-radius:12px;
animation:g3GlowPulse 3.4s ease-in-out infinite;
}
.cg-outcome span{ font-size:9.5px; color:var(--text-muted); text-align:center; font-weight:500; white-space:nowrap; }
@media (max-width:640px){
.cg-stage{ height:250px; }
.cg-card{ width:88vw; max-width:270px; }
.cg-result{ min-width:0; padding:10px 14px; }
}
@media (prefers-reduced-motion: reduce){
.cg-card, .cg-card__glow, .cg-outcome svg{ animation:none !important; }
.cg-layer, .cg-signal, .cg-outcome{ transition:none !important; }
}
.cost-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.cost-card{ padding:22px 18px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px; }
.cost-card__icon{ width:34px; height:34px; border-radius:10px; background:rgba(255,176,32,0.12); color:var(--accent-bright); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cost-card__icon svg{ width:17px; height:17px; }
.cost-card h3{ font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px; font-family:var(--font-body); }
body.ar .cost-card h3{ font-family:'Cairo', sans-serif; }
.cost-card p{ font-size:13px; color:var(--text-muted); line-height:1.6; }
/* ==========================================================
SECTION 6 — Grille des 6 piliers
========================================================== */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.pillar-mini{
position:relative; overflow:hidden;
padding:28px 24px 26px; background:var(--surface); border:1px solid var(--border-strong); border-radius:18px;
box-shadow:0 18px 40px -28px rgba(16,25,43,0.22);
transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pillar-mini::before{
content:''; position:absolute; top:0; inset-inline:0; height:3px; transform:scaleX(0); transform-origin:left;
background:linear-gradient(90deg, var(--accent-bright), var(--teal)); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
body.ar .pillar-mini::before{ transform-origin:right; }
.pillar-mini:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,0.4); box-shadow:0 30px 60px -30px rgba(16,25,43,0.32); }
.pillar-mini:hover::before{ transform:scaleX(1); }
.pillar-mini__icon{
display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:13px;
background:var(--teal-dim); color:var(--teal); margin-bottom:18px;
transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.pillar-mini:hover .pillar-mini__icon{ transform:scale(1.08) rotate(-4deg); background:rgba(255,176,32,0.14); color:var(--accent-bright); box-shadow:0 0 0 6px rgba(255,176,32,0.08); }
.pillar-mini__icon svg{ width:21px; height:21px; }
.pillar-mini h3{ font-size:16.5px; font-weight:600; color:var(--text); margin-bottom:8px; font-family:var(--font-body); }
body.ar .pillar-mini h3{ font-family:'Cairo', sans-serif; }
.pillar-mini p{ font-size:13.5px; color:var(--text-muted); line-height:1.65; }
/* ==========================================================
SECTION 7 — Grille d'expertise (accordéon à 8 cartes)
========================================================== */
.expertise-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px; }
.expertise-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.expertise-card__head{ width:100%; display:flex; align-items:center; gap:12px; padding:18px 20px; background:none; border:none; cursor:pointer; text-align:start; }
.expertise-card__icon{ width:32px; height:32px; flex-shrink:0; border-radius:9px; background:var(--surface-2); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.expertise-card__icon svg{ width:16px; height:16px; }
.expertise-card__title{ flex:1; font-size:14.5px; font-weight:600; color:var(--text); }
body.ar .expertise-card__title{ font-family:'Cairo', sans-serif; font-size:14px; }
.expertise-card__plus{ font-size:16px; color:var(--text-faint); transition:transform .25s ease; flex-shrink:0; }
.expertise-card.is-open .expertise-card__plus{ transform:rotate(45deg); color:var(--accent); }
.expertise-card__body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.expertise-card.is-open .expertise-card__body{ max-height:280px; }
.expertise-card__body p{ padding:0 20px 10px; font-size:13px; color:var(--text-muted); line-height:1.6; }
.expertise-card__body ul{ display:flex; flex-wrap:wrap; gap:7px; padding:0 20px 20px; }
.expertise-card__body li{ font-size:11.5px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:999px; }
/* ==========================================================
SECTION 8 — Grille des secteurs (fond ambre)
========================================================== */
.sector-mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.sector-mini{
position:relative; overflow:hidden;
display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
padding:26px 18px 24px; background:rgba(255,255,255,0.92); border:1px solid rgba(36,23,5,0.10); border-radius:18px;
box-shadow:0 16px 34px -22px rgba(36,23,5,0.35);
transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.sector-mini::after{
content:''; position:absolute; top:0; inset-inline:0; height:3px; transform:scaleX(0); transform-origin:left;
background:linear-gradient(90deg, #241705, rgba(36,23,5,0.35)); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
body.ar .sector-mini::after{ transform-origin:right; }
.sector-mini:hover{
background:#fff; transform:translateY(-6px);
box-shadow:0 28px 50px -22px rgba(36,23,5,0.45); border-color:rgba(36,23,5,0.18);
}
.sector-mini:hover::after{ transform:scaleX(1); }
.sector-mini__icon{
width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:13px;
background:linear-gradient(145deg, #FFC13A, #F98C1D); color:#241705;
box-shadow:0 8px 16px -6px rgba(36,23,5,0.35);
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.sector-mini:hover .sector-mini__icon{ transform:scale(1.1) rotate(-6deg); }
.sector-mini__icon svg{ width:21px; height:21px; }
.sector-mini__name{ font-size:14.5px; font-weight:700; color:#241705; }
body.ar .sector-mini__name{ font-family:'Cairo', sans-serif; }
.sector-mini__text{ font-size:12px; color:#5C3D08; line-height:1.55; }
/* ==========================================================
SECTION 9 — Comparaison agence + engagements
========================================================== */
.agency-vs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.agency-vs__col{ padding:26px 24px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:18px; }
.agency-vs__col--us{ border-color:rgba(255,176,32,0.4); background:linear-gradient(165deg, rgba(255,176,32,0.09), rgba(255,255,255,0.02) 60%); }
.agency-vs__label{ display:block; font-size:14px; font-weight:700; color:var(--text); margin-bottom:16px; }
body.ar .agency-vs__label{ font-family:'Cairo', sans-serif; }
.agency-vs__col ul{ display:grid; gap:10px; }
.agency-vs__col li{ font-size:13.5px; color:var(--text-muted); line-height:1.5; position:relative; padding-inline-start:20px; }
.agency-vs__col li::before{ content:''; position:absolute; inset-inline-start:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--text-faint); }
.agency-vs__col--us li::before{ background:var(--accent-bright); }
.commit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.commit-mini{ text-align:center; padding:20px 14px; }
.commit-mini__icon{ width:36px; height:36px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,0.06); color:var(--accent-bright); }
.commit-mini__icon svg{ width:18px; height:18px; }
.commit-mini h3{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; font-family:var(--font-body); }
body.ar .commit-mini h3{ font-family:'Cairo', sans-serif; }
.commit-mini p{ font-size:12.5px; color:var(--text-muted); line-height:1.5; }
/* ==========================================================
SECTION 10 — Tableau de bord illustré (valeurs fictives)
========================================================== */
.dash-mock{ max-width:600px; margin:36px auto 0; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 70px -30px rgba(16,25,43,0.3); }
.dash-mock__top{ display:flex; gap:6px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.dash-mock__dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.dash-mock__body{ padding:26px; background:var(--surface); display:flex; flex-direction:column; gap:22px; }
.dash-mock__chart{ display:flex; align-items:flex-end; gap:10px; height:90px; }
.dash-mock__bar{ flex:1; height:var(--h); background:linear-gradient(to top, var(--accent-bright), var(--accent-hover)); border-radius:5px 5px 0 0; }
.dash-mock__widgets{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dash-mock__widget{ padding:14px; background:var(--surface-2); border-radius:12px; text-align:center; }
.dash-mock__widget span{ display:block; font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--teal); }
.dash-mock__widget em{ font-style:normal; font-size:11px; color:var(--text-faint); }
.dash-mock__disclaimer{ text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:10px; }
.indicator-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.indicator-mini{ padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.indicator-mini h3{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; font-family:var(--font-body); }
body.ar .indicator-mini h3{ font-family:'Cairo', sans-serif; }
.indicator-mini p{ font-size:12.5px; color:var(--text-muted); line-height:1.55; }
/* ==========================================================
SECTION 12 — Étapes du formulaire + réassurance
========================================================== */
.cta-steps{ display:flex; flex-direction:column; gap:18px; margin-top:28px; }
.cta-step{ display:flex; gap:14px; align-items:flex-start; }
.cta-step__num{ width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cta-step h4{ font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:4px; font-family:var(--font-body); }
body.ar .cta-step h4{ font-family:'Cairo', sans-serif; }
.cta-step p{ font-size:13px; color:var(--text-muted); line-height:1.55; }
.cta-reassurance{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; }
.cta-reassurance span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.cta-reassurance svg{ width:13px; height:13px; color:var(--teal); flex-shrink:0; }
/* ==========================================================
SECTION 13 — Rue à deux commerces (dernier déclic)
========================================================== */
.last-nudge{ text-align:center; }
.street-illustration{ position:relative; height:150px; margin-bottom:8px; }
.street-illustration__searches{ display:flex; justify-content:center; gap:70px; margin-bottom:8px; }
.street-search{ width:26px; height:26px; opacity:0.5; }
.street-search svg{ width:100%; height:100%; color:var(--text-faint); }
.street-search:nth-child(2){ opacity:0.3; }
.street-row{ display:flex; justify-content:center; align-items:flex-end; gap:80px; }
.street-shop{ position:relative; width:64px; height:64px; color:var(--text-faint); }
.street-shop svg{ width:100%; height:100%; }
.street-shop--busy{ color:var(--accent); }
.street-people{ position:absolute; bottom:-4px; inset-inline-start:50%; transform:translateX(-50%); display:flex; gap:4px; }
.street-people i{ width:5px; height:12px; border-radius:3px; background:var(--accent-bright); display:block; }
.last-nudge__reassurance{ max-width:480px; margin:22px auto 0; font-size:13px; color:var(--text-faint); line-height:1.6; }
@media (max-width:900px){
.agency-vs, .expertise-grid{ grid-template-columns:1fr; }
.cost-grid, .commit-grid, .indicator-grid, .dash-mock__widgets{ grid-template-columns:repeat(2,1fr); }
.pillar-grid{ grid-template-columns:1fr 1fr; }
.sector-mini-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
.pillar-grid, .sector-mini-grid{ grid-template-columns:1fr 1fr; }
.cost-grid, .commit-grid, .indicator-grid, .dash-mock__widgets{ grid-template-columns:1fr; }
.street-illustration__searches, .street-row{ gap:32px; }
.radiate-actions{ inset-inline-end:0; font-size:16px; gap:12px; }
}
/* ---- Étoiles de notation (remplacent le caractère ★ par du SVG) ---- */
.g-stars{ display:inline-flex; gap:1px; vertical-align:middle; }
.g-star svg{ width:11px; height:11px; }
.g-star--full{ color:var(--accent-bright); }
.g-star--full svg{ fill:currentColor; }
.g-star--empty{ color:var(--border-strong); }
.g-star--empty svg{ fill:none; }
/* ==========================================================
SECTION 3 — Duel de cartes (remplace l'ancienne petite
illustration déconnectée + comparaison plate). La carte
gagnante porte sa propre mise en lumière ; un indicateur
"VS" ancre visuellement l'opposition entre les deux.
========================================================== */
.duel{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:40px; align-items:stretch; }
.duel__card{
position:relative; overflow:hidden;
padding:30px 28px; background:var(--surface); border:1px solid var(--border); border-radius:22px;
display:flex; flex-direction:column;
}
.duel__card--win{ border-color:rgba(255,176,32,0.45); box-shadow:0 30px 65px -32px rgba(255,176,32,0.35); }
.duel__glow{
position:absolute; top:-40%; inset-inline-end:-30%; width:70%; height:90%;
background:radial-gradient(circle, rgba(255,176,32,0.16), transparent 70%);
pointer-events:none;
}
.duel__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.duel__badge{ position:relative; z-index:1; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.duel__badge svg{ width:18px; height:18px; }
.duel__badge--dim{ background:var(--surface-2); color:var(--text-faint); }
.duel__badge--bright{ background:rgba(255,176,32,0.16); color:var(--accent-bright); }
.duel__label{ position:relative; z-index:1; font-size:16px; font-weight:700; color:var(--text); }
body.ar .duel__label{ font-family:'Cairo', sans-serif; }
.duel__intro{ position:relative; z-index:1; font-size:14.5px; color:var(--text-muted); line-height:1.6; margin-bottom:16px; }
.duel__but{ position:relative; z-index:1; font-size:12px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px; }
body.ar .duel__but{ font-family:'Cairo', sans-serif; text-transform:none; letter-spacing:0; }
.duel__list{ position:relative; z-index:1; display:grid; gap:11px; margin-bottom:22px; flex:1; }
.duel__list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); line-height:1.4; }
.duel__list svg{ width:16px; height:16px; flex-shrink:0; }
.duel__list--bad svg{ color:var(--alert); }
.duel__list--good svg{ color:var(--teal); }
.duel__list--good li{ color:var(--text); }
.duel__result{
position:relative; z-index:1; display:flex; align-items:center; gap:10px;
padding:14px 16px; border-radius:13px; background:var(--surface-2);
font-size:13px; color:var(--text-muted); line-height:1.5;
}
.duel__result svg{ width:17px; height:17px; flex-shrink:0; color:var(--text-faint); }
.duel__result--win{ background:rgba(255,176,32,0.10); color:var(--text); }
.duel__result--win svg{ color:var(--accent-bright); }
.duel__vs{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
width:46px; height:46px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border-strong);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-faint);
}
body.ar .duel__vs{ font-family:'Cairo', sans-serif; }
@media (max-width:820px){
.duel{ grid-template-columns:1fr; gap:44px; }
.duel__vs{ top:0; transform:translate(-50%,-50%); }
}
/* ---- Variante "neutre" du duel (section 5) : les deux cartes sont
légitimes, ce n'est pas une compétition gagnant/perdant — juste
deux points de vue différents sur la même réalité. ---- */
.duel__list--neutral svg{ width:7px; height:7px; color:var(--text-faint); }
.duel__list--neutral li{ color:var(--text-muted); }
/* ---- Illustration section 5 : deux réalités qui ne se recouvrent pas ---- */
.reality-split{ display:flex; align-items:center; justify-content:center; gap:20px; margin:40px 0; flex-wrap:wrap; }
.reality-split__card{
position:relative; width:200px; padding:26px 20px; border-radius:20px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:12px;
}
.reality-split__card--warm{
background:rgba(255,255,255,0.05); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,176,32,0.26);
animation:g3Breathe 4.8s ease-in-out infinite;
}
.reality-split__glow{
position:absolute; inset:-30px; z-index:-1; border-radius:32px;
background:radial-gradient(circle, rgba(255,176,32,0.16), transparent 68%);
filter:blur(16px); animation:g3GlowPulse 4.8s ease-in-out infinite;
}
.reality-split__card--dim{ background:var(--surface-2); border:1px dashed var(--border-strong); opacity:0.72; }
.reality-split__icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.reality-split__icon svg{ width:100%; height:100%; }
.reality-split__card--warm .reality-split__icon{ color:var(--accent-bright); }
.reality-split__card--dim .reality-split__icon{ color:var(--text-faint); }
.reality-split__label{ font-size:13px; color:var(--text-muted); line-height:1.5; }
.reality-split__card--warm .reality-split__label{ color:var(--text); font-weight:600; }
.reality-split__divider{
display:flex; align-items:center; justify-content:center; text-align:center;
width:88px; font-size:11.5px; color:var(--text-faint); line-height:1.4; flex-shrink:0;
}
@media (max-width:640px){
.reality-split{ flex-direction:column; }
.reality-split__divider{ width:auto; }
}
/* ==========================================================
SECTION 2 — "Salle" d'analyse (concept d'origine, restauré)
Boucle automatique ~25s : recherche → salle de profils flottants
→ faisceau qui révèle des signaux (synchronisé à la position de
chaque carte) → sélection → détachement → retour aux résultats
→ actions. Tout en transform/opacity uniquement.
========================================================== */
.g2{ max-width:1000px; margin:40px auto 0; }
.g2-stage{
position:relative; width:100%; aspect-ratio:1000/520; max-height:520px;
border-radius:28px; overflow:hidden;
background:radial-gradient(120% 140% at 50% 0%, var(--surface-2) 0%, var(--surface) 60%);
border:1px solid var(--border);
box-shadow:0 50px 110px -40px rgba(16,25,43,0.4);
}
.g2-layer{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
opacity:0; transform:scale(0.96); pointer-events:none;
transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.g2-layer.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
/* ---- Calque téléphone ---- */
.g2-layer--phone{ gap:64px; }
.g2-phone{
position:relative; width:210px; height:430px; flex-shrink:0;
background:#101928; border-radius:32px; padding:11px;
box-shadow:0 35px 70px -22px rgba(16,25,43,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.g2-phone__notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:34%; height:18px; background:#101928; border-radius:0 0 12px 12px; z-index:2; }
.g2-phone__screen{
position:relative; width:100%; height:100%; overflow:hidden; background:var(--surface);
border-radius:22px; padding:30px 13px 14px; display:flex; flex-direction:column; gap:10px;
}
.g2-searchbar{ display:flex; align-items:center; gap:7px; padding:10px 13px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; flex-shrink:0; }
.g2-searchbar svg{ width:14px; height:14px; color:var(--text-faint); flex-shrink:0; }
.g2-searchbar span:not(.g2-caret){ font-family:var(--font-mono); font-size:10.5px; color:var(--text); white-space:nowrap; overflow:hidden; }
.g2-caret{ width:1.5px; height:12px; background:var(--text-faint); animation:heroCursorBlink 1s steps(1) infinite; flex-shrink:0; }
.g2-spinner{ display:flex; gap:5px; align-items:center; justify-content:center; height:0; overflow:hidden; opacity:0; transition:opacity .3s ease, height .3s ease; }
.g2-spinner.is-visible{ opacity:1; height:20px; }
.g2-spinner i{ width:6px; height:6px; border-radius:50%; background:var(--accent-bright); animation:g2Bounce 1s ease-in-out infinite; }
.g2-spinner i:nth-child(2){ animation-delay:.15s; }
.g2-spinner i:nth-child(3){ animation-delay:.3s; }
@keyframes g2Bounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-5px); opacity:1; } }
.g2-results{ display:flex; flex-direction:column; gap:8px; opacity:0; transition:opacity .4s ease; }
.g2-results.is-visible{ opacity:1; }
.g2r{
display:flex; align-items:center; gap:9px; padding:9px 10px;
background:var(--surface); border:1px solid var(--border); border-radius:11px;
opacity:0; transform:translateY(8px);
transition:opacity .5s cubic-bezier(.22,.61,.36,1) var(--gd,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--gd,0ms);
}
.g2-results.is-visible .g2r{ opacity:1; transform:translateY(0); }
.g2r__rank{ width:16px; height:16px; border-radius:50%; background:var(--accent-bright); color:var(--accent-ink); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.g2r__name{ font-size:10.5px; font-weight:600; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g2r__stars{ display:flex; gap:1px; color:var(--accent-bright); flex-shrink:0; }
.g2r__stars svg{ width:8px; height:8px; fill:currentColor; }
.g2-actions{ display:flex; flex-direction:column; gap:22px; opacity:0; transform:translateX(12px); transition:opacity .5s ease, transform .5s ease; }
body.ar .g2-actions{ transform:translateX(-12px); }
.g2-actions.is-visible{ opacity:1; transform:translateX(0); }
.g2-action{
display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(8px);
transition:opacity .45s ease var(--gd,0ms), transform .45s ease var(--gd,0ms);
}
.g2-actions.is-visible .g2-action{ opacity:1; transform:translateY(0); }
.g2-action svg{ width:17px; height:17px; color:var(--teal); flex-shrink:0; padding:8px; box-sizing:content-box; background:var(--teal-dim); border-radius:10px; }
.g2-action span{ font-size:12.5px; color:var(--text-muted); font-weight:500; }
/* ---- Calque salle : cartes flottantes ---- */
.g2-layer--room{ padding:36px; }
.g2-beam{
position:absolute; top:-10%; inset-inline-start:0; width:100%; height:55%;
background:linear-gradient(to bottom, rgba(255,176,32,0.16), transparent);
opacity:0; transform:translateY(-40px);
transition:opacity .6s ease, transform 5.6s cubic-bezier(.37,0,.63,1);
pointer-events:none;
}
.g2-beam.is-active{ opacity:1; transform:translateY(340px); }
.g2-cards{ position:relative; width:100%; height:100%; }
.g2c{
position:absolute; left:var(--x); top:var(--y); width:118px;
padding:10px 12px; border-radius:14px;
background:rgba(255,255,255,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.7); box-shadow:0 14px 30px -14px rgba(16,25,43,0.25);
opacity:0; transform:translateY(16px) scale(0.85);
transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--gd,0ms),
transform .55s cubic-bezier(.22,.61,.36,1) var(--gd,0ms),
filter .6s ease, box-shadow .4s ease;
animation:g2Float 4.5s ease-in-out infinite;
animation-delay:var(--gd,0ms);
}
html[data-theme="dark"] .g2c{ background:rgba(30,40,60,0.55); border-color:rgba(255,255,255,0.12); }
.g2-cards.is-visible .g2c{ opacity:1; transform:translateY(0) scale(1); }
@keyframes g2Float{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-5px) scale(1); } }
.g2-cards.is-visible.is-selecting .g2c{ filter:grayscale(0.5) opacity(0.55); }
.g2-cards.is-visible.is-selecting .g2c[data-picked="1"]{ filter:none; box-shadow:0 20px 40px -14px rgba(255,176,32,0.4); border-color:rgba(255,176,32,0.55); }
.g2-cards.is-visible.is-detaching .g2c{ opacity:0; transform:translateY(10px) scale(0.85); transition-delay:0ms; }
.g2-cards.is-visible.is-detaching .g2c[data-picked="1"]{ opacity:1; transform:translateY(-6px) scale(1.12); }
.g2c__icon{ width:22px; height:22px; border-radius:7px; background:var(--surface-2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.g2c__icon svg{ width:12px; height:12px; }
.g2c__name{ display:block; font-size:10px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.g2c__stars{ display:flex; gap:1px; color:var(--accent-bright); }
.g2c__stars svg{ width:7px; height:7px; fill:currentColor; }
.g2c__badges{ position:absolute; top:-5px; inset-inline-end:-5px; display:flex; gap:2px; }
.g2c__badge{
width:9px; height:9px; border-radius:50%; background:var(--teal); border:1.5px solid var(--surface);
opacity:0; transform:scale(0); transition:opacity .3s ease var(--bd,0ms), transform .3s ease var(--bd,0ms);
}
.g2-cards.is-visible.is-scanning .g2c__badge{ opacity:1; transform:scale(1); }
@media (max-width:900px){
.g2-layer--phone{ flex-direction:column; gap:24px; }
.g2-actions{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
body.ar .g2-actions{ transform:translateY(12px); }
.g2-actions{ transform:translateY(12px); }
.g2-actions.is-visible{ transform:translateY(0); }
}
@media (max-width:640px){
.g2-stage{ aspect-ratio:340/560; max-height:none; border-radius:22px; }
.g2-phone{ width:150px; height:310px; padding:8px; }
.g2-phone__screen{ padding:22px 10px 10px; }
.g2c{ width:88px; padding:7px 9px; }
.g2-cards{ padding:0; }
}
@media (prefers-reduced-motion: reduce){
.g2-layer, .g2c, .g2-beam, .g2-action, .g2r{ transition:none !important; animation:none !important; }
}