html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Sparky — style commun (Offres, Agents, Demos, Contact) */
/* ============================================================
SPARKY — FusionIQ Agency
Feuille de style partagée — DA BD (comic-book)
Palette : navy #12395C / teal #5B8A9A / gold #C9A227 / crème #FAF5EA
============================================================ */
:root{
--navy:#12395C;
--navy-dark:#0E2C47;
--teal:#5B8A9A;
--gold:#C9A227;
--cream:#FAF5EA;
--cream-2:#F2EBDB;
--ink:#12395C;
--muted:#3b5064;
--magenta:#C96A9E;
--violet:#7C6BC9;
--green:#3E8E6E;
--orange:#E08A3C;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
font-family:'Plus Jakarta Sans', sans-serif;
background:var(--cream);
color:var(--ink);
line-height:1.5;
}
h1,h2,h3,h4,.logo,.btn{ font-family:'Baloo 2', sans-serif; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 24px; }
/* ---------- Motifs & utilitaires BD ---------- */
.halftone{
background-image: radial-gradient(rgba(18,57,92,0.16) 1.6px, transparent 1.6px);
background-size: 15px 15px;
}
.halftone-light{
background-image: radial-gradient(rgba(255,255,255,0.25) 1.6px, transparent 1.6px);
background-size: 15px 15px;
}
.eyebrow{
display:inline-block; background:#0A161D; color:#fff;
padding:clamp(7px,.55vw,12px) clamp(18px,1.6vw,32px);
border-radius:40px; font-size:clamp(14px,1.15vw,21px); font-weight:800;
letter-spacing:clamp(1.5px,.14vw,2.6px);
margin-bottom:clamp(16px,1.4vw,26px); text-transform:uppercase; font-family:'Baloo 2';
}
.eyebrow.on-dark{ background:#fff; color:var(--navy-dark); }
.ph{
background:repeating-linear-gradient(45deg, #ffffff40, #ffffff40 8px, transparent 8px, transparent 16px);
border:3px dashed currentColor;
border-radius:16px;
display:flex; align-items:center; justify-content:center;
text-align:center; font-size:13px; font-weight:700;
opacity:0.85; padding:12px; color:var(--teal);
}
.comic-card{
background:#fff; border:3px solid var(--navy); border-radius:20px;
box-shadow:6px 6px 0 var(--navy);
}
.sparkle{ position:absolute; font-size:22px; color:var(--gold); }
.section{ padding:70px 0; }
.section-dark{ background:var(--navy); color:#fff; }
.section-darker{ background:var(--navy-dark); color:#fff; }
.section-white{ background:#fff; }
.center{ text-align:center; }
h2.title{ font-size:32px; color:var(--navy); margin-bottom:10px; line-height:1.2; }
.section-dark h2.title, .section-darker h2.title{ color:#fff; }
p.sub{ color:var(--muted); font-size:15px; max-width:640px; margin-bottom:38px; }
.center p.sub{ margin-left:auto; margin-right:auto; }
.section-dark p.sub, .section-darker p.sub{ color:#d7e2ea; }
/* ---------- Boutons ---------- */
.btn{
display:inline-block; font-weight:700; font-size:14px; padding:11px 24px;
border-radius:30px; border:3px solid var(--navy); background:var(--gold); color:#fff;
box-shadow:4px 4px 0 var(--navy); transition:transform .1s, box-shadow .1s;
}
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
.btn-outline{ background:var(--cream); color:var(--navy); }
.btn-outline.on-dark{ background:var(--navy); color:#fff; border-color:#fff; box-shadow:4px 4px 0 #fff; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-lg{ font-size:16px; padding:14px 30px; }
/* ---------- Header ---------- */
header{ background:var(--cream); padding:20px 0; position:sticky; top:0; z-index:20; border-bottom:3px solid var(--navy); }
header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ font-weight:800; font-size:22px; letter-spacing:0.5px; color:var(--navy); display:flex; align-items:center; gap:10px; }
.logo img.l1{ height:26px; width:auto; display:block; }
.logo img.l2{ height:20px; width:auto; display:block; }
.nav{ display:flex; gap:32px; font-size:15px; font-weight:600; font-family:'Plus Jakarta Sans'; }
.nav a{ padding-bottom:3px; border-bottom:3px solid transparent; }
.nav a:hover{ color:var(--teal); }
.nav a.active{ color:var(--navy); border-bottom-color:var(--gold); }
/* ---------- Hero de page interne ---------- */
.page-hero{ padding:64px 0 56px; position:relative; }
.page-hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; }
.page-hero h1{ font-size:44px; font-weight:800; line-height:1.15; color:var(--navy); }
.page-hero p.lead{ font-size:17px; margin:18px 0 28px; color:var(--muted); max-width:470px; }
.page-hero .ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-visual{ aspect-ratio:1/1; position:relative; }
.hero-visual .ph{ height:100%; }
.hero-visual img{ width:100%; height:100%; object-fit:cover; border-radius:20px; border:3px solid var(--navy); box-shadow:6px 6px 0 var(--navy); }
.badges{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.badge-pill{
font-size:12px; font-weight:700; color:var(--navy); background:#fff;
border:2px solid var(--navy); border-radius:20px; padding:6px 14px;
box-shadow:3px 3px 0 var(--navy);
}
/* ---------- Bande de résultats / chiffres ---------- */
.outcomes{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.outcome{
background:#fff; border:3px solid var(--navy); border-radius:18px; box-shadow:5px 5px 0 var(--navy);
padding:22px; position:relative;
}
.outcome .num{ font-family:'Baloo 2'; font-size:30px; font-weight:800; color:var(--gold); display:block; line-height:1.1; }
.outcome b{ display:block; font-family:'Baloo 2'; font-size:16px; color:var(--navy); margin:6px 0 6px; }
.outcome span{ font-size:13px; color:var(--muted); }
/* ---------- Steps / tabs (comment ça marche) ---------- */
.steps-wrap{ display:grid; grid-template-columns:240px 1fr; gap:40px; }
.steps{ display:flex; flex-direction:column; gap:6px; }
.steps button{
background:#ffffff10; border:2px solid transparent; color:#ffffff90; text-align:left; padding:12px 18px;
font-family:'Baloo 2'; font-size:14px; font-weight:700; letter-spacing:0.5px; cursor:pointer;
border-radius:14px;
}
.steps button.active{ color:var(--navy); background:var(--gold); border-color:#0A161D; box-shadow:3px 3px 0 #0A161D; }
.step-panel{ display:none; }
.step-panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.step-content h3{ font-size:26px; margin-bottom:12px; }
.step-content p{ color:#d7e2ea; max-width:480px; margin-bottom:14px; font-size:15px; }
.step-content ul{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px; color:#d7e2ea; }
.step-content ul li:before{ content:"✓ "; color:var(--gold); font-weight:800; }
.step-illus{ height:230px; color:#ffffffcc; background:#ffffff10; border-color:#ffffff60; }
.step-illus img{ width:100%; height:230px; object-fit:cover; border-radius:16px; border:3px solid #fff; box-shadow:6px 6px 0 rgba(0,0,0,0.25); }
/* ---------- Deux colonnes "vous / nous" ---------- */
.split-def{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.def-col{ background:#fff; border:3px solid var(--navy); border-radius:20px; box-shadow:6px 6px 0 var(--navy); padding:26px; }
.def-col.navy{ background:var(--navy); color:#fff; box-shadow:6px 6px 0 var(--gold); }
.def-col h3{ font-size:20px; margin-bottom:6px; }
.def-col p.mini{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.def-col.navy p.mini{ color:#c6d5e2; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
font-size:12px; font-weight:700; border:2px solid var(--navy); border-radius:16px;
padding:6px 12px; background:var(--cream-2); color:var(--navy);
}
.def-col.navy .chips span{ background:transparent; border-color:var(--gold); color:var(--gold); }
/* ---------- Grille de fonctionnalités / cartes ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature{
background:#fff; border:3px solid var(--navy); border-radius:20px; box-shadow:5px 5px 0 var(--navy);
padding:22px; display:flex; flex-direction:column; gap:10px;
}
.feature .icon{
width:44px; height:44px; border-radius:50%; border:3px solid var(--navy);
display:flex; align-items:center; justify-content:center; font-size:20px;
background:var(--cream-2); box-shadow:3px 3px 0 var(--navy);
}
.feature h3{ font-size:17px; color:var(--navy); }
.feature p{ font-size:14px; color:var(--muted); }
.feature .ph{ height:130px; margin-bottom:4px; }
/* ---------- Tarifs ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.plan{
background:#fff; border:3px solid var(--navy); border-radius:22px; box-shadow:6px 6px 0 var(--navy);
padding:28px 24px; position:relative;
}
.plan.featured{ background:var(--navy); color:#fff; box-shadow:6px 6px 0 var(--gold); }
.plan .tag{
position:absolute; top:-14px; right:20px; background:var(--gold); color:#fff;
border:3px solid var(--navy); border-radius:20px; padding:3px 14px; font-size:11px;
font-weight:800; font-family:'Baloo 2'; letter-spacing:1px; text-transform:uppercase;
}
.plan h3{ font-size:22px; margin-bottom:4px; }
.plan .price{ font-family:'Baloo 2'; font-size:34px; font-weight:800; color:var(--gold); line-height:1.2; }
.plan .price small{ font-size:14px; font-weight:600; color:var(--muted); }
.plan.featured .price small{ color:#c6d5e2; }
.plan p.desc{ font-size:14px; color:var(--muted); margin:10px 0 18px; }
.plan.featured p.desc{ color:#d7e2ea; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:9px; font-size:14px; margin-bottom:22px; color:var(--muted); }
.plan.featured ul{ color:#e6eef4; }
.plan ul li:before{ content:"✓ "; color:var(--gold); font-weight:800; }
.plan .btn{ width:100%; text-align:center; }
/* ---------- Tableau comparatif ---------- */
table.compare-table{ width:100%; border-collapse:separate; border-spacing:0; max-width:820px; margin:0 auto; background:#fff; border:3px solid var(--navy); border-radius:20px; box-shadow:6px 6px 0 var(--navy); overflow:hidden; }
table.compare-table th, table.compare-table td{ padding:15px 18px; text-align:left; font-size:14px; border-bottom:2px solid var(--navy); }
table.compare-table tr:last-child td{ border-bottom:none; }
table.compare-table th{ color:#fff; background:var(--navy); font-family:'Baloo 2'; font-size:15px; }
.yes{ color:#2f7d4f; font-weight:800; }
.no{ color:#b23b3b; font-weight:800; }
/* ---------- Confiance / intégrations ---------- */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:44px; }
.trust-item{ font-size:13px; color:#d7e2ea; background:#ffffff0d; border:2px solid #ffffff40; border-radius:14px; padding:16px; }
.trust-item b{ display:block; color:#fff; font-size:14px; margin-bottom:6px; font-family:'Baloo 2'; }
.integrations{ display:flex; gap:14px; flex-wrap:wrap; }
.integrations span{ border:2px solid var(--gold); color:var(--gold); border-radius:20px; padding:8px 16px; font-size:12px; font-weight:700; }
/* ---------- Filtres + cartes démos ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.filters button{
font-family:'Baloo 2'; font-weight:700; font-size:13px; letter-spacing:0.5px; cursor:pointer;
background:#fff; color:var(--navy); border:3px solid var(--navy); border-radius:24px;
padding:8px 18px; box-shadow:3px 3px 0 var(--navy); transition:transform .1s, box-shadow .1s;
}
.filters button:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--navy); }
.filters button.active{ background:var(--gold); color:#fff; }
.demo-card{
background:#fff; border:3px solid var(--navy); border-radius:20px; box-shadow:5px 5px 0 var(--navy);
overflow:hidden; display:flex; flex-direction:column;
}
.demo-card .thumb{ height:150px; border:none; border-bottom:3px solid var(--navy); border-radius:0; background:var(--cream-2); color:var(--teal); }
.demo-card .body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.demo-card .meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tag-pill{ font-size:11px; font-weight:800; font-family:'Baloo 2'; letter-spacing:0.5px; text-transform:uppercase;
border:2px solid var(--navy); border-radius:14px; padding:3px 10px; background:var(--cream-2); color:var(--navy); }
.tag-pill.gold{ background:var(--gold); color:#fff; }
.tag-pill.teal{ background:var(--teal); color:#fff; }
.demo-card h3{ font-size:18px; color:var(--navy); }
.demo-card p{ font-size:14px; color:var(--muted); flex:1; }
.demo-card .listen{ font-family:'Baloo 2'; font-weight:700; font-size:14px; color:var(--navy); border-top:2px dashed var(--navy); padding-top:12px; margin-top:6px; }
/* ---------- Transcript / bulle de dialogue ---------- */
.transcript{ display:flex; flex-direction:column; gap:14px; }
.bubble{ max-width:78%; padding:14px 18px; border:3px solid var(--navy); border-radius:18px; font-size:14px; box-shadow:4px 4px 0 var(--navy); }
.bubble b{ display:block; font-family:'Baloo 2'; font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.bubble.client{ background:#fff; color:var(--muted); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.client b{ color:var(--teal); }
.bubble.sparky{ background:var(--navy); color:#e6eef4; align-self:flex-end; border-bottom-right-radius:4px; box-shadow:4px 4px 0 var(--gold); }
.bubble.sparky b{ color:var(--gold); }
/* ---------- Timeline étapes numérotées ---------- */
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tl-item{ background:#fff; border:3px solid var(--navy); border-radius:20px; box-shadow:5px 5px 0 var(--navy); padding:24px; }
.tl-item .step-num{
width:42px; height:42px; border-radius:50%; background:var(--gold); color:#fff;
border:3px solid var(--navy); box-shadow:3px 3px 0 var(--navy);
display:flex; align-items:center; justify-content:center; font-family:'Baloo 2'; font-weight:800; margin-bottom:14px;
}
.tl-item h3{ font-size:18px; color:var(--navy); margin-bottom:6px; }
.tl-item p{ font-size:14px; color:var(--muted); }
/* ---------- Formulaire ---------- */
.form-card{ background:#fff; border:3px solid var(--navy); border-radius:22px; box-shadow:6px 6px 0 var(--navy); padding:30px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-family:'Baloo 2'; font-weight:700; font-size:13px; color:var(--navy); }
.field input, .field select, .field textarea{
font-family:'Plus Jakarta Sans'; font-size:14px; color:var(--navy);
background:var(--cream); border:2px solid var(--navy); border-radius:12px; padding:11px 14px; width:100%;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:3px 3px 0 var(--gold); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted); margin-bottom:18px; }
.consent input{ margin-top:3px; width:16px; height:16px; }
.contact-info{ display:flex; flex-direction:column; gap:16px; }
.info-item{ background:#fff; border:3px solid var(--navy); border-radius:18px; box-shadow:5px 5px 0 var(--navy); padding:18px 20px; }
.info-item b{ display:block; font-family:'Baloo 2'; font-size:15px; color:var(--navy); margin-bottom:4px; }
.info-item span, .info-item a{ font-size:14px; color:var(--muted); }
.info-item a:hover{ color:var(--teal); }
/* ---------- Valeurs ---------- */
.value{ background:#ffffff0d; border:2px solid #ffffff40; border-radius:18px; padding:22px; }
.value .n{ font-family:'Baloo 2'; font-size:13px; font-weight:800; color:var(--gold); letter-spacing:2px; }
.value h3{ font-size:18px; color:#fff; margin:6px 0 8px; }
.value p{ font-size:14px; color:#d7e2ea; }
/* ---------- Équipe / agents ---------- */
.team-grid{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; }
.agent{ width:130px; text-align:center; }
.agent .avatar{
width:110px; height:110px; border-radius:50%; margin:0 auto 10px; display:block;
border:3px solid var(--navy); box-shadow:4px 4px 0 var(--navy);
object-fit:cover; background:var(--cream-2);
}
.agent b{ display:block; font-size:15px; color:var(--navy); font-family:'Baloo 2'; }
.agent span{ font-size:12px; color:var(--muted); }
/* ---------- Fondateur ---------- */
.founder .wrap{ display:flex; gap:32px; align-items:center; max-width:800px; }
.founder img{ width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid var(--navy); box-shadow:4px 4px 0 var(--navy); flex-shrink:0; }
.founder p{ font-size:15px; color:var(--muted); }
.founder b{ color:var(--navy); font-family:'Baloo 2'; }
/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; }
details{ border:2px solid var(--navy); border-radius:14px; padding:16px 20px; margin-bottom:12px; background:#fff; }
summary{ cursor:pointer; font-weight:700; color:var(--navy); font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:16px; font-family:'Baloo 2'; }
summary::-webkit-details-marker{ display:none; }
details p{ margin-top:10px; font-size:14px; color:var(--muted); }
/* ---------- CTA final ---------- */
.cta-final{ background:var(--gold); text-align:center; padding:60px 24px; color:#fff; position:relative; overflow:hidden; }
.cta-final h2{ font-size:30px; margin-bottom:10px; font-family:'Baloo 2'; position:relative; z-index:1; }
.cta-final p{ position:relative; z-index:1; margin-bottom:22px; font-size:15px; }
.cta-final .btn{ position:relative; z-index:1; }
/* ---------- Footer ---------- */
footer{ background:var(--navy-dark); color:#d7e2ea; padding:50px 0 24px; font-size:13px; border-top:4px solid var(--gold); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
footer h4{ color:#fff; font-size:13px; margin-bottom:12px; font-family:'Baloo 2'; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
footer a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid #ffffff20; padding-top:20px; opacity:0.6; }
.footer-logo{ display:flex; align-items:center; gap:10px; }
.footer-logo .box{ display:inline-flex; }
.footer-logo .box img{ height:22px; width:auto; display:block; }
.footer-logo .box.small{ }
.footer-logo .box.small img{ height:20px; }
/* ---------- Responsive ---------- */
@media (max-width:900px){
.outcomes, .grid-4, .trust-grid{ grid-template-columns:repeat(2,1fr); }
.grid-3, .pricing, .timeline{ grid-template-columns:1fr; }
}
@media (max-width:820px){
.page-hero .wrap{ grid-template-columns:1fr; }
.hero-visual{ order:-1; max-width:260px; margin:0 auto; }
.page-hero h1{ font-size:34px; }
.steps-wrap{ grid-template-columns:1fr; }
.steps{ flex-direction:row; overflow-x:auto; padding-bottom:4px; }
.steps button{ white-space:nowrap; }
.step-panel.active{ grid-template-columns:1fr; }
.split-def, .grid-2, .form-row{ grid-template-columns:1fr; }
.founder .wrap{ flex-direction:column; text-align:center; }
.footer-grid{ grid-template-columns:1fr 1fr; }
.nav{ display:none; }
h2.title{ font-size:26px; }
}
/* ===== Peaufinage ===== */
html{ scroll-behavior:smooth; }
header .wrap{ position:relative; }
.btn{ transition:transform .12s, box-shadow .12s; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
.btn-outline.on-dark:hover{ box-shadow:6px 6px 0 #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
.feature, .demo-card, .plan, .outcome, .tl-item, .info-item{ transition:transform .12s, box-shadow .12s; }
.feature:hover, .outcome:hover, .tl-item:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--navy); }
.plan:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--navy); }
.plan.featured:hover{ box-shadow:8px 8px 0 var(--gold); }
a.demo-card{ color:inherit; }
a.demo-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--navy); }
a.demo-card:hover .listen{ color:var(--gold); }
.agent .avatar{ transition:transform .15s; }
.agent:hover .avatar{ transform:translateY(-4px) rotate(-2deg); }
details summary span:last-child{ transition:transform .2s; display:inline-block; }
details[open] summary span:last-child{ transform:rotate(180deg); }
.menu-btn{ display:none; background:#fff; border:3px solid var(--navy); border-radius:12px;
box-shadow:3px 3px 0 var(--navy); font-size:18px; line-height:1; padding:7px 13px;
cursor:pointer; color:var(--navy); font-family:'Baloo 2'; font-weight:800; }
@media (max-width:820px){
.menu-btn{ display:block; }
.nav.open{ display:flex; position:absolute; top:calc(100% + 20px); left:-24px; right:-24px;
flex-direction:column; gap:0; background:var(--cream); border-top:3px solid var(--navy);
border-bottom:3px solid var(--navy); padding:8px 24px 14px; z-index:30; }
.nav.open a{ padding:12px 0; border-bottom:1px dashed rgba(18,57,92,.25); }
.nav.open a:last-child{ border-bottom:none; }
}
.form-status{ display:none; margin-top:14px; font-size:14px; font-weight:700; color:var(--navy);
background:var(--cream-2); border:2px solid var(--navy); border-radius:12px; padding:12px 16px; }
.form-status.show{ display:block; }
.form-status.is-error{ color:#7a1f1f; background:#fbe9e9; border-color:#c94b4b; }
/* --- logo Sparky anime --- */
.sparky-anim{ display:block; width:auto; overflow:visible; }
.sparky-anim .ltr{
fill:currentColor; stroke:currentColor; stroke-width:2;
stroke-dasharray:var(--len); stroke-dashoffset:var(--len); fill-opacity:0;
animation:spk-draw .55s ease-out forwards, spk-fill .3s ease-out forwards;
animation-delay:calc(var(--i)*.085s), calc(var(--i)*.085s + .4s);
}
@keyframes spk-draw{ to{ stroke-dashoffset:0 } }
@keyframes spk-fill{ to{ fill-opacity:1; stroke-width:0 } }
.sparky-anim .spk-sheen{ opacity:0; animation:spk-sheen 1.1s ease-in-out 1.4s forwards }
@keyframes spk-sheen{ 0%{transform:translateX(-40%);opacity:0} 25%{opacity:1} 100%{transform:translateX(340%);opacity:0} }
.sparky-anim .spk-chip{ opacity:0; transform-origin:center; animation:spk-chip .45s cubic-bezier(.34,1.56,.64,1) .95s forwards }
@keyframes spk-chip{ 0%{opacity:0;transform:scale(.3) rotate(-30deg)} 100%{opacity:1;transform:none} }
.sparky-anim .spk-bot{ opacity:0; transform-origin:center bottom; animation:spk-bot .6s cubic-bezier(.34,1.56,.64,1) 1.15s forwards }
@keyframes spk-bot{ 0%{opacity:0;transform:translateY(14%) scale(.55) rotate(-12deg)} 100%{opacity:1;transform:none} }
header .sparky-anim{ height:40px }
.eyebrow .sparky-anim{ height:22px }
.footer-logo .sparky-anim{ height:36px }
@media (max-width:600px){ header .sparky-anim{ height:32px } }
@media (prefers-reduced-motion:reduce){
.sparky-anim .ltr{animation:none;fill-opacity:1;stroke-width:0}
.sparky-anim .spk-chip,.sparky-anim .spk-bot{animation:none;opacity:1}
.sparky-anim .spk-sheen{animation:none;opacity:0}
}
/* ===== ruban defilant ===== */
.strip{
padding:0; overflow:hidden; position:relative;
border-top:3px solid var(--navy); border-bottom:3px solid var(--navy);
background:#fff;
}
.strip::before, .strip::after{
content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
.strip::before{ left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.strip::after { right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.strip .marquee{ display:flex; width:max-content; animation:strip-scroll 32s linear infinite; }
.strip .marquee:hover{ animation-play-state:paused; }
.strip .track{ display:flex; align-items:center; flex:0 0 auto; }
.strip .item{
display:inline-flex; align-items:center; gap:9px;
padding:22px 30px; font-weight:700; font-size:13px; letter-spacing:0.6px;
color:var(--navy); white-space:nowrap;
}
.strip .item .emo{ font-size:17px; line-height:1; }
.strip .sep{ color:var(--gold); font-size:15px; opacity:.9; }
@keyframes strip-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width:600px){
.strip .item{ padding:18px 20px; font-size:12px }
.strip .marquee{ animation-duration:24s }
}
@media (prefers-reduced-motion:reduce){
.strip .marquee{ animation:none; width:100%; justify-content:space-around }
.strip .track:nth-child(2){ display:none }
}
.demo-card .thumb{ width:100%; height:150px; object-fit:cover; display:block;
border-bottom:3px solid var(--navy); }
.demo-card .gain{ font-size:13px; font-weight:700; color:#2f7d4f;
background:#eef7f1; border-radius:9px; padding:8px 11px; margin:10px 0 4px; line-height:1.45; }
.badge-prix{ display:inline-flex; align-items:center; background:var(--gold); color:#fff;
font-weight:800; font-size:13px; padding:7px 14px; border-radius:30px;
border:3px solid var(--navy); box-shadow:3px 3px 0 var(--navy); white-space:nowrap; }
/* ===== corrections responsive mobile ===== */
@media (max-width:820px){
/* tableaux : defilement horizontal contenu plutot que debordement de page */
.legal table, .compare-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
white-space:nowrap; max-width:100%; }
.legal table td, .legal table th{ white-space:normal; min-width:130px; }
/* onglets de process : bande defilante au lieu de debordement */
.steps{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; gap:8px; padding-bottom:6px; max-width:100%; }
.steps::-webkit-scrollbar{ display:none }
.steps button{ flex:0 0 auto }
/* filtres de demos : idem */
.filters{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; gap:8px; max-width:100%; }
.filters::-webkit-scrollbar{ display:none }
.filters button{ flex:0 0 auto }
}
@media (max-width:600px){
/* barre d'en-tete : rien ne doit sortir du cadre */
/* CORRECTIF : 'overflow:hidden' ici clippait le menu deroulant (position:absolute)
-> le menu s'ouvrait mais restait invisible. On clippe le logo, pas le conteneur. */
header .wrap{ max-width:100%; overflow:visible }
header .logo{ min-width:0; overflow:hidden }
.menu-btn{ flex:0 0 auto }
/* confort tactile : cibles d'au moins 40px */
.nav a, footer a{ display:inline-block; padding:6px 0; min-height:34px; line-height:1.6 }
}
/* ===== Zoe interactive ===== */
#zoe-live .zoe-secteurs{ display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 22px; }
#zoe-live .zs{ background:rgba(255,255,255,.09); color:#fff; border:2px solid rgba(255,255,255,.3);
border-radius:30px; padding:10px 18px; font-family:inherit; font-weight:700; font-size:14px;
cursor:pointer; transition:.18s; }
#zoe-live .zs:hover{ background:rgba(255,255,255,.18) }
#zoe-live .zs.active{ background:var(--gold); border-color:var(--gold); color:#fff; }
.zoe-live{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start; }
@media (max-width:900px){ .zoe-live{ grid-template-columns:1fr } }
.zoe-phone{ background:#fff; border:3px solid #0E2C47; border-radius:20px; padding:18px;
box-shadow:7px 7px 0 rgba(0,0,0,.3); }
.zoe-head{ display:flex; align-items:center; gap:13px; }
.zoe-head b{ display:block; font-family:'Baloo 2',cursive; font-size:19px; color:var(--navy); }
.zoe-av{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--navy); flex:0 0 auto; }
.zoe-etat{ font-size:13px; color:#5f7183; }
.zoe-chrono{ margin-left:auto; font-weight:800; font-size:15px; color:var(--navy);
background:#f1f0e8; border-radius:20px; padding:5px 13px; font-variant-numeric:tabular-nums; }
.zoe-onde{ display:flex; align-items:center; justify-content:center; gap:4px; height:46px; margin:14px 0 6px; }
.zoe-onde span{ width:5px; height:8px; border-radius:3px; background:var(--teal, #5B8A9A); opacity:.35; }
.zoe-onde.on span{ animation:zoe-w .85s ease-in-out infinite; opacity:1; }
.zoe-onde.on span:nth-child(2n){ animation-delay:.1s } .zoe-onde.on span:nth-child(3n){ animation-delay:.22s }
.zoe-onde.on span:nth-child(4n){ animation-delay:.33s } .zoe-onde.on span:nth-child(5n){ animation-delay:.15s }
@keyframes zoe-w{ 0%,100%{ height:8px } 50%{ height:34px } }
.zoe-transcript{ min-height:210px; max-height:280px; overflow-y:auto; padding:6px 2px; }
.zoe-vide{ color:#8b98a5; font-size:14px; font-style:italic; text-align:center; padding:70px 20px; margin:0; }
.zoe-bulle{ max-width:84%; padding:11px 15px; border-radius:16px; margin-bottom:9px; font-size:14.5px;
line-height:1.55; animation:zoe-in .28s ease-out; }
@keyframes zoe-in{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.zoe-bulle.client{ background:#f1f0e8; color:#22384c; border:2px solid #ddd8c9; border-bottom-left-radius:5px; }
.zoe-bulle.sparky{ background:var(--navy); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.zoe-bulle .qui{ display:block; font-size:11px; font-weight:800; letter-spacing:.5px;
text-transform:uppercase; opacity:.65; margin-bottom:3px; }
.zoe-points{ display:inline-flex; gap:4px; padding:4px 0 }
.zoe-points i{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5;
animation:zoe-p 1s infinite; }
.zoe-points i:nth-child(2){ animation-delay:.15s } .zoe-points i:nth-child(3){ animation-delay:.3s }
@keyframes zoe-p{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }
.zoe-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.zoe-actions .btn{ font-size:15px; padding:12px 22px; }
.zoe-crm{ background:#fff; border:3px solid #0E2C47; border-radius:20px; padding:20px;
box-shadow:7px 7px 0 rgba(0,0,0,.3); }
.zoe-crm-head{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:14px;
color:var(--navy); padding-bottom:12px; border-bottom:2px solid #e8e4d8; margin-bottom:14px; }
.pastille{ width:10px; height:10px; border-radius:50%; background:#c9ccd0; flex:0 0 auto; }
.zoe-crm.actif .pastille{ background:#2f7d4f; animation:zoe-pulse 1.4s infinite }
@keyframes zoe-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,125,79,.5) } 50%{ box-shadow:0 0 0 7px rgba(47,125,79,0) } }
.zoe-champs{ list-style:none; padding:0; margin:0; min-height:190px; }
.zoe-champs li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0;
border-bottom:1px dashed #e3dfd2; font-size:14px; animation:zoe-in .3s ease-out; }
.zoe-champs .k{ color:#5f7183; font-weight:600; flex:0 0 auto }
.zoe-champs .v{ color:var(--navy); font-weight:800; text-align:right }
.zoe-fin{ margin-top:16px; background:#eef7f1; border:2px solid #cfe6d8; border-radius:14px; padding:15px; }
.zoe-fin b{ color:#2f7d4f; font-size:15px; display:block; margin-bottom:5px; }
.zoe-fin p{ font-size:13.5px; color:#22384c; margin:0 0 12px; line-height:1.55; }
.zoe-fin .btn{ font-size:14px; padding:11px 20px; }
@media (prefers-reduced-motion:reduce){
.zoe-onde.on span, .zoe-points i, .zoe-crm.actif .pastille{ animation:none }
.zoe-bulle, .zoe-champs li{ animation:none }
}
/* ===== trois modes ===== */
#modes .modes-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 20px; }
#modes .mt{ background:#fff; color:var(--navy); border:3px solid var(--navy); border-radius:30px;
padding:11px 20px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
box-shadow:3px 3px 0 var(--navy); transition:.15s; }
#modes .mt:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--navy); }
#modes .mt.active{ background:var(--gold); color:#fff; }
.modes-scene{ display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:start;
background:#fff; border:3px solid var(--navy); border-radius:20px; padding:24px;
box-shadow:6px 6px 0 var(--navy); }
@media (max-width:760px){ .modes-scene{ grid-template-columns:1fr; text-align:center } }
.modes-robot{ text-align:center; }
.modes-robot img{ width:96px; height:auto; display:block; margin:0 auto 10px; transition:.3s; }
.mr-neutre{ filter:none }
.mr-perdu{ animation:mr-shake .5s ease-in-out 2; filter:grayscale(.55) }
.mr-content{ animation:mr-bounce .55s cubic-bezier(.34,1.56,.64,1) }
.mr-parle{ animation:mr-float 1.6s ease-in-out infinite }
@keyframes mr-shake{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 75%{transform:rotate(7deg)} }
@keyframes mr-bounce{ 0%{transform:translateY(9px) scale(.9)} 100%{transform:none} }
@keyframes mr-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.mr-badge{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.4px;
padding:6px 13px; border-radius:20px; background:#f1f0e8; color:#5f7183; }
.mr-badge.ko{ background:#fdecec; color:#b3261e }
.mr-badge.ok{ background:#eef7f1; color:#2f7d4f }
.modes-chat{ min-height:230px; }
.mc-bulle{ max-width:88%; padding:12px 16px; border-radius:16px; margin-bottom:10px;
font-size:14.5px; line-height:1.6; animation:mc-in .3s ease-out; text-align:left; }
@keyframes mc-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.mc-bulle.client{ background:#f1f0e8; border:2px solid #ddd8c9; color:#22384c; border-bottom-left-radius:5px; }
.mc-bulle.bot{ background:var(--navy); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.mc-bulle.bot.ko{ background:#b3261e; }
.mc-menu{ display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 10px; }
.mc-menu span{ background:#fff; border:2px solid #c9ccd0; border-radius:20px; padding:7px 14px;
font-size:13px; font-weight:700; color:#5f7183; }
.mc-onde{ display:inline-flex; align-items:center; gap:3px; height:18px; margin-left:8px; vertical-align:middle }
.mc-onde i{ width:3px; height:6px; border-radius:2px; background:currentColor; animation:mc-w .8s ease-in-out infinite }
.mc-onde i:nth-child(2){animation-delay:.12s} .mc-onde i:nth-child(3){animation-delay:.24s}
.mc-onde i:nth-child(4){animation-delay:.36s} .mc-onde i:nth-child(5){animation-delay:.15s}
@keyframes mc-w{ 0%,100%{height:6px} 50%{height:16px} }
.modes-verdict{ grid-column:1/-1; border-top:2px dashed #e3dfd2; padding-top:16px; margin-top:4px;
font-size:14.5px; line-height:1.65; color:#22384c; text-align:left; }
.modes-verdict b{ color:var(--navy) }
@media (prefers-reduced-motion:reduce){
.mr-perdu,.mr-content,.mr-parle,.mc-bulle,.mc-onde i{ animation:none }
.mr-perdu{ filter:grayscale(.55) }
}
/* ===== flow voiceflow ===== */
.vf-flow{ width:100%; }
.vf-flow svg{ width:100%; height:auto; display:block; overflow:visible; }
.vf-flow .vf-n{ opacity:0; transform-origin:center; animation:vf-pop .45s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(var(--i)*.55s); }
@keyframes vf-pop{ 0%{opacity:0; transform:scale(.6) translateY(10px)} 100%{opacity:1; transform:none} }
.vf-flow .vf-l{ stroke-dasharray:220; stroke-dashoffset:220; animation:vf-draw .5s ease-out forwards; animation-delay:calc(var(--i)*.55s + .35s); }
@keyframes vf-draw{ to{ stroke-dashoffset:0 } }
.vf-flow .vf-check{ stroke-dasharray:40; stroke-dashoffset:40; animation:vf-draw .35s ease-out 2.85s forwards; }
.vf-flow .vf-cursor{ animation:vf-move 3.1s cubic-bezier(.5,.05,.5,.95) forwards; }
@keyframes vf-move{
0%{ transform:translate(120px,70px); opacity:0 }
8%{ opacity:1 }
22%{ transform:translate(330px,140px) }
44%{ transform:translate(556px,200px) }
66%{ transform:translate(190px,278px) }
88%{ transform:translate(516px,312px) }
100%{ transform:translate(516px,312px); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
.vf-flow .vf-n{ animation:none; opacity:1 }
.vf-flow .vf-l, .vf-flow .vf-check{ animation:none; stroke-dashoffset:0 }
.vf-flow .vf-cursor{ display:none }
}
/* ===== audit final : confort mobile ===== */
/* le reflet du logo ne doit pas creer de zone de defilement */
.sparky-anim{ overflow:hidden !important; }
/* bouton menu : cible tactile de 44px minimum (recommandation Apple/Google) */
.menu-btn{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
/* le bouton n'existe QUE sur petit écran : sur ordinateur la navigation est déjà visible */
@media (max-width:820px){ .menu-btn{ display:inline-flex; } }
/* etiquettes des cartes demo : lisibles sur mobile */
.tag-pill{ font-size:12px !important; }
@media (max-width:600px){
/* premiere rangee d'onglets : pleinement contenue */
.steps, .filters{ margin-left:0; margin-right:0; }
.steps button, .filters button{ font-size:13px; padding:9px 14px; }
}
/* header mobile : le CTA passe dans le menu, seul le hamburger reste */
@media (max-width:640px){
header .wrap > div:last-child > .btn{ display:none; }
header .wrap{ gap:8px; }
}
/* etiquette 'Le plus choisi' lisible */
.tag{ font-size:12px !important; }
/* le reflet termine sa course hors cadre : on fige sa position finale dans le cadre */
.sparky-anim .spk-sheen{ will-change:transform; }
@keyframes spk-sheen{ 0%{transform:translateX(-40%);opacity:0} 25%{opacity:1} 99%{opacity:0} 100%{transform:translateX(240%);opacity:0} }
/* filet de securite : aucune page ne doit jamais defiler horizontalement */
html, body{ overflow-x:clip; max-width:100%; }
/* ===== menu robuste ===== */
header{ position:relative; z-index:1000; }
@media (max-width:900px){
.nav.open{ z-index:1001; }
}
/* ===== zoe : appel vocal ===== */
.zoe-call{ max-width:520px; margin:0 auto; background:#fff; border:3px solid #0E2C47;
border-radius:22px; padding:22px; box-shadow:7px 7px 0 rgba(0,0,0,.3); }
.zoe-call .zoe-head{ display:flex; align-items:center; gap:13px; text-align:left; }
.zoe-call .zoe-av{ width:54px; height:54px; border-radius:50%; object-fit:cover;
border:3px solid var(--navy); flex:0 0 auto; }
.zoe-call .zoe-id b{ display:block; font-family:'Baloo 2',cursive; font-size:20px; color:var(--navy); }
.zoe-call .zoe-etat{ font-size:13px; color:#5f7183; }
.zoe-call .zoe-chrono{ margin-left:auto; font-weight:800; font-size:15px; color:var(--navy);
background:#f1f0e8; border-radius:20px; padding:5px 13px; font-variant-numeric:tabular-nums; }
.zoe-scene{ display:flex; align-items:center; justify-content:center; padding:38px 0 30px; }
.zoe-orbe{ position:relative; width:170px; height:170px; display:flex;
align-items:center; justify-content:center; }
.zo-cercle{ position:absolute; inset:0; border-radius:50%; }
.zo-cercle.c1{ background:radial-gradient(circle at 35% 30%, #7fb2c4, var(--teal, #5B8A9A) 60%, #3d6b7c); box-shadow:0 10px 30px rgba(91,138,154,.45), inset 0 -8px 18px rgba(0,0,0,.18); }
.zo-cercle.c2{ inset:-14px; border:3px solid rgba(91,138,154,.4); }
.zo-cercle.c3{ inset:-30px; border:2px solid rgba(91,138,154,.22); }
.zo-coeur{ position:relative; font-size:52px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
/* etat en appel : respiration + ondes */
.zoe-orbe.parle .zo-cercle.c1{ animation:zo-souffle 1.6s ease-in-out infinite; }
.zoe-orbe.parle .zo-cercle.c2{ animation:zo-onde 1.9s ease-out infinite; }
.zoe-orbe.parle .zo-cercle.c3{ animation:zo-onde 1.9s ease-out .5s infinite; }
@keyframes zo-souffle{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
@keyframes zo-onde{ 0%{ transform:scale(.92); opacity:.8 } 100%{ transform:scale(1.22); opacity:0 } }
.zoe-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.zoe-actions .btn{ font-size:15px; padding:13px 26px; }
.zoe-stop{ border-color:#b3261e !important; color:#b3261e !important; }
.zoe-note{ font-size:12.5px; color:#8b98a5; margin:14px 0 0; }
@media (prefers-reduced-motion:reduce){
.zoe-orbe.parle .zo-cercle{ animation:none }
}
/* ===== enrichissement couleur (0 Ko : uniquement du CSS) ===== */
/* fond crème vivant : dégradé chaud + halo doré/teal très diffus */
body{
background-color:var(--cream);
background-image:
radial-gradient(900px 520px at 12% -5%, rgba(201,162,39,.13), transparent 62%),
radial-gradient(760px 460px at 92% 22%, rgba(91,138,154,.15), transparent 60%),
radial-gradient(680px 400px at 25% 88%, rgba(201,106,158,.08), transparent 60%);
background-attachment:fixed;
}
@media (max-width:820px){ body{ background-attachment:scroll; } }
/* sections claires : plus de blanc plat, un voile chaud */
.section-white{
background:linear-gradient(180deg,#ffffff 0%,#FDFBF6 100%);
}
/* sections navy : profondeur au lieu d'un aplat */
.section-dark{
background:
radial-gradient(700px 420px at 85% 8%, rgba(91,138,154,.28), transparent 58%),
radial-gradient(600px 380px at 8% 92%, rgba(201,162,39,.16), transparent 58%),
var(--navy);
}
.section-darker{
background:
radial-gradient(650px 400px at 15% 5%, rgba(91,138,154,.22), transparent 60%),
var(--navy-dark);
}
/* filet doré discret entre les grandes sections */
.section + .section{ position:relative; }
.section + .section::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:min(120px,30%); height:3px; border-radius:3px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:.55;
}
.section-dark + .section-dark::before,
.section-dark::before{ opacity:.35 }
/* trame de points BD, très légère, sur les sections sombres */
.section-dark::after, .section-darker::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.055) 1.5px, transparent 1.5px);
background-size:22px 22px;
}
.section-dark, .section-darker{ position:relative; overflow:hidden; }
.section-dark > .wrap, .section-darker > .wrap{ position:relative; z-index:1; }
/* ===== planche BD des agents ===== */
.equipe-planche{ text-align:center; }
.equipe-planche .eyebrow{ margin-bottom:14px; }
.equipe-planche p.sub{ margin:0 auto 30px; max-width:720px; color:#d7e2ea; }
.planche-img{
width:100%; max-width:1100px; height:auto; display:block; margin:0 auto;
border:4px solid #0E2C47; border-radius:20px;
box-shadow:8px 8px 0 rgba(0,0,0,.32);
}
@media (max-width:760px){
.planche-img{ max-width:520px; border-width:3px; border-radius:14px; box-shadow:5px 5px 0 rgba(0,0,0,.32); }
}
/* ===== bandeaux scènes BD (image en fond CSS, texte en vrai HTML) ===== */
.scene{
position:relative; overflow:hidden;
background-color:var(--navy-dark);
padding:0;
}
.scene::before{
content:""; position:absolute; inset:0;
background-size:cover; background-repeat:no-repeat;
background-position:center;
}
.scene::after{ content:""; position:absolute; inset:0; }
.scene{ aspect-ratio:10/3; } /* même ratio que l'image : aucun rognage */
.scene .wrap{ position:relative; z-index:2; height:100%; min-height:380px; display:flex; align-items:center; }
.scene-txt{ max-width:520px; }
.scene h2{
font-family:'Baloo 2',cursive; font-size:clamp(25px,3.4vw,36px); line-height:1.15;
color:#fff; margin:0 0 12px; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.scene p{
color:#e6eef4; font-size:15.5px; line-height:1.7; margin:0 0 20px;
text-shadow:0 1px 10px rgba(0,0,0,.4);
}
/* texte à DROITE (personnages à gauche) */
.scene-droite .wrap{ justify-content:flex-end; }
.scene-droite .scene-txt{ text-align:left; }
.scene-droite::after{
background:linear-gradient(270deg, rgba(14,44,71,.95) 0%, rgba(14,44,71,.80) 38%, rgba(14,44,71,.28) 72%, rgba(14,44,71,.15) 100%);
}
/* texte à GAUCHE (personnages à droite) */
.scene-gauche .wrap{ justify-content:flex-start; }
.scene-gauche::after{
background:linear-gradient(90deg, rgba(14,44,71,.95) 0%, rgba(14,44,71,.80) 38%, rgba(14,44,71,.28) 72%, rgba(14,44,71,.15) 100%);
}
.scene-accueil::before{ background-image:image-set(url("scene-accueil-1400.webp") 1x, url("scene-accueil-2600.webp") 2x); }
.scene-prospection::before{ background-image:image-set(url("scene-prospection-1400.webp") 1x, url("scene-prospection-2600.webp") 2x); }
.scene-studio::before{ background-image:image-set(url("scene-studio-1400.webp") 1x, url("scene-studio-2600.webp") 2x); }
/* écrans larges : sans ça, le fichier 1400px serait étiré jusqu'à x1,37 et donc flou */
@media (min-width:1600px){
.scene-accueil::before{ background-image:image-set(url("scene-accueil-1900.webp") 1x, url("scene-accueil-3400.webp") 2x); }
.scene-prospection::before{ background-image:image-set(url("scene-prospection-1900.webp") 1x, url("scene-prospection-3400.webp") 2x); }
.scene-studio::before{ background-image:image-set(url("scene-studio-1900.webp") 1x, url("scene-studio-3400.webp") 2x); }
}
/* @@SCENES-TRES-GRANDS-ECRANS@@
1440p, 4K et 5K affichés à 100 % : au-delà de ~2000px de fenêtre, le fichier
1900px serait étiré et flou. On monte progressivement en résolution. */
@media (min-width:2000px){
.scene-accueil::before{ background-image:image-set(url("scene-accueil-2600.webp") 1x, url("scene-accueil-3840.webp") 2x); }
.scene-prospection::before{ background-image:image-set(url("scene-prospection-2600.webp") 1x, url("scene-prospection-3840.webp") 2x); }
.scene-studio::before{ background-image:image-set(url("scene-studio-2600.webp") 1x, url("scene-studio-3840.webp") 2x); }
}
@media (min-width:2700px){
.scene-accueil::before{ background-image:image-set(url("scene-accueil-3840.webp") 1x, url("scene-accueil-3840.webp") 2x); }
.scene-prospection::before{ background-image:image-set(url("scene-prospection-3840.webp") 1x, url("scene-prospection-3840.webp") 2x); }
.scene-studio::before{ background-image:image-set(url("scene-studio-3840.webp") 1x, url("scene-studio-3840.webp") 2x); }
}
@media (max-width:820px){
/* sur mobile le voile passe en vertical : les personnages restent visibles en haut */
.scene .wrap{ min-height:400px; align-items:flex-end; padding-top:150px; padding-bottom:30px; }
.scene-droite .wrap, .scene-gauche .wrap{ justify-content:flex-start; }
.scene-droite::after, .scene-gauche::after{
background:linear-gradient(180deg, rgba(14,44,71,.30) 0%, rgba(14,44,71,.82) 42%, rgba(14,44,71,.96) 100%);
}
.scene{ aspect-ratio:auto; }
.scene::before{ background-position:center top; }
/* mobile : image carrée cadrée sur les personnages (un panorama y serait illisible) */
.scene-accueil::before{ background-image:image-set(url("scene-accueil-carre-800.webp") 1x, url("scene-accueil-carre-1200.webp") 2x, url("scene-accueil-carre-1400.webp") 3x); }
.scene-prospection::before{ background-image:image-set(url("scene-prospection-carre-800.webp") 1x, url("scene-prospection-carre-1200.webp") 2x, url("scene-prospection-carre-1400.webp") 3x); }
.scene-studio::before{ background-image:image-set(url("scene-studio-carre-800.webp") 1x, url("scene-studio-carre-1200.webp") 2x, url("scene-studio-carre-1400.webp") 3x); }
.scene-txt{ max-width:100%; }
}
/* bouton menu : icone qui bascule burger -> croix (aucun JS supplementaire) */
.menu-btn{ font-size:0 !important; }
.menu-btn::before{ content:"\2630"; font-size:19px; line-height:1; display:block; }
.menu-btn[aria-expanded="true"]::before{ content:"\2715"; }
/* ============================================================
INTERACTIVITE GLOBALE — apparition au defilement + retour haut
Les classes sont posees par JS : sans JS, tout reste visible.
============================================================ */
.rv{ opacity:0; transform:translateY(18px); }
.rv-on{ opacity:1; transform:none; transition:opacity .55s ease-out, transform .55s cubic-bezier(.22,.9,.3,1); }
.rv-d1{ transition-delay:.07s } .rv-d2{ transition-delay:.14s } .rv-d3{ transition-delay:.21s }
/* en-tete qui se compacte au defilement */
header{ transition:padding .22s ease, box-shadow .22s ease; }
header.compact{ padding:11px 0; box-shadow:0 6px 22px rgba(18,57,92,.14); }
/* bouton retour en haut */
.haut{
position:fixed; right:20px; bottom:20px; z-index:60;
width:48px; height:48px; border-radius:50%; cursor:pointer;
background:var(--gold); color:#fff; border:3px solid var(--navy);
box-shadow:4px 4px 0 var(--navy); font-size:19px; line-height:1;
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transform:translateY(14px);
transition:opacity .25s, transform .25s, visibility .25s;
}
.haut.on{ opacity:1; visibility:visible; transform:none; }
.haut:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
.haut:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--navy); }
@media (max-width:600px){ .haut{ right:14px; bottom:14px; width:44px; height:44px; } }
/* barre de progression de lecture */
.lecture{
position:fixed; top:0; left:0; height:3px; width:0; z-index:70;
background:linear-gradient(90deg,var(--gold),var(--teal)); pointer-events:none;
transition:width .1s linear;
}
@media (prefers-reduced-motion:reduce){
.rv,.rv-on{ opacity:1 !important; transform:none !important; transition:none !important; }
header,.haut{ transition:none }
.lecture{ display:none }
}
/* ═══════════════════════════════════════════════════════════
OFFRES SPARKY — onglets, cartes, mise en avant
═══════════════════════════════════════════════════════════ */
/* ---------- Onglets de familles ---------- */
.offer-tabs{
display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
margin:26px 0 34px;
}
.offer-tab{
font-family:'Baloo 2',cursive; font-weight:700; font-size:16px;
color:var(--navy); background:#fff;
border:3px solid var(--navy); border-radius:40px;
padding:11px 24px; cursor:pointer;
box-shadow:4px 4px 0 var(--navy);
transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
.offer-tab:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
.offer-tab:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
.offer-tab.is-active{
background:var(--gold); color:#fff; border-color:var(--navy);
box-shadow:4px 4px 0 var(--navy);
}
.offer-tab:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.offer-panel{ display:none; }
.offer-panel.is-active{ display:block; animation:panneauEntre .32s ease-out; }
@keyframes panneauEntre{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:none; }
}
/* ---------- Intro de famille + icône ---------- */
.offer-intro{ max-width:780px; margin:0 auto 32px; text-align:center; }
.offer-intro h3{
font-family:'Baloo 2',cursive; font-size:clamp(24px,3vw,32px);
color:var(--navy); margin:0 0 12px;
display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.offer-intro p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0; }
.offer-ico{
width:54px; height:54px; flex:0 0 auto; border-radius:50%;
box-shadow:3px 3px 0 rgba(0,0,0,.20); display:block;
}
/* ---------- Grille 4 offres (Voice) ---------- */
.pricing-4{ grid-template-columns:repeat(4,1fr); gap:18px; }
/* ---------- Détails internes des cartes ---------- */
/* bloc « Installation » : lisible d'un coup d'œil, jamais noyé sous l'abonnement */
.plan-install{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
margin:10px 0 2px; padding:9px 13px;
background:rgba(18,57,92,.06);
border:2px solid rgba(18,57,92,.20); border-radius:12px;
}
.plan-install .pi-lib{
font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
color:var(--muted);
}
.plan-install .pi-val{
font-family:'Baloo 2',cursive; font-weight:800; font-size:18px;
color:var(--navy); white-space:nowrap;
}
.plan.featured .plan-install{
background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30);
}
.plan.featured .plan-install .pi-lib{ color:#c6d5e2; }
.plan.featured .plan-install .pi-val{ color:var(--gold); }
@media (max-width:1180px){ .plan-install .pi-val{ font-size:19px; } }
.plan-inclus{
display:block; font-size:13px; font-weight:600; color:var(--teal);
margin:8px 0 0;
}
.plan.featured .plan-inclus{ color:var(--gold); }
.plan-techno{
font-size:12.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
color:var(--muted); margin:8px 0 14px;
}
.plan.featured .plan-techno{ color:#c6d5e2; }
.plan-sous-titre{
font-family:'Baloo 2',cursive; font-size:14px; font-weight:700;
color:var(--navy); margin:4px 0 8px;
}
.plan.featured .plan-sous-titre{ color:#fff; }
.plan ul.plan-exclus{ margin-bottom:16px; }
.plan ul.plan-exclus li:before{ content:"✕ "; color:#b23b3b; font-weight:800; }
.plan.featured ul.plan-exclus li:before{ color:#e08a8a; }
.plan ul.plan-exemples{ margin-bottom:16px; }
.plan ul.plan-exemples li:before{ content:"→ "; color:var(--teal); font-weight:800; }
.plan.featured ul.plan-exemples li:before{ color:var(--gold); }
.plan .btn, .plan .btn-outline{ margin-top:auto; }
.plan{ display:flex; flex-direction:column; }
/* ---------- Mise en avant dynamique de l'offre recommandée ---------- */
@media (min-width:900px){
.plan.featured{ transform:scale(1.035); z-index:2; position:relative; }
.plan.featured:hover{ transform:scale(1.035) translate(-2px,-2px); }
}
.plan.featured .tag{ animation:pulseReco 2.6s ease-in-out infinite; }
@keyframes pulseReco{
0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,.55); }
50% { box-shadow:0 0 0 9px rgba(201,162,39,0); }
}
@media (prefers-reduced-motion:reduce){
.plan.featured .tag{ animation:none; }
.offer-panel.is-active{ animation:none; }
}
/* ---------- Dépassements ---------- */
.depassements{
max-width:720px; margin:34px auto 0;
background:#fff; border:3px solid var(--navy); border-radius:20px;
box-shadow:6px 6px 0 var(--navy); padding:22px 26px;
}
.depassements h4{
font-family:'Baloo 2',cursive; font-size:20px; color:var(--navy);
margin:0 0 14px; text-align:center;
}
.depassements ul{ list-style:none; margin:0; padding:0; }
.depassements li{
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
padding:10px 0; border-bottom:2px dotted rgba(18,57,92,.16);
font-size:14.5px; color:var(--muted);
}
.depassements li:last-child{ border-bottom:none; }
.depassements li b{ color:var(--gold); font-family:'Baloo 2',cursive; font-size:16px; white-space:nowrap; }
/* ---------- Mention légale sous une famille ---------- */
.mention-offre{
max-width:760px; margin:26px auto 0; padding:16px 20px;
background:rgba(91,138,154,.10); border-left:4px solid var(--teal);
border-radius:0 12px 12px 0;
font-size:13.5px; line-height:1.65; color:var(--muted);
}
/* ---------- Tableau récapitulatif ---------- */
.recap-table{
width:100%; max-width:900px; margin:0 auto;
border-collapse:separate; border-spacing:0;
background:#fff; border:3px solid var(--navy); border-radius:20px;
box-shadow:6px 6px 0 var(--navy); overflow:hidden;
}
.recap-table th, .recap-table td{
padding:14px 18px; text-align:left; font-size:14px;
border-bottom:2px solid rgba(18,57,92,.14);
}
.recap-table thead th{
background:var(--navy); color:#fff;
font-family:'Baloo 2',cursive; font-size:15px; border-bottom:none;
}
.recap-table tbody tr:last-child td{ border-bottom:none; }
.recap-table tbody tr:hover{ background:rgba(201,162,39,.07); }
.recap-table tr.is-reco{ background:rgba(201,162,39,.12); }
.recap-table tr.is-reco:hover{ background:rgba(201,162,39,.18); }
.recap-table tr.is-reco td:first-child{ box-shadow:inset 4px 0 0 var(--gold); }
.mini-tag{
display:inline-block; background:var(--gold); color:#fff;
font-size:10.5px; font-weight:700; letter-spacing:.4px;
padding:2px 8px; border-radius:20px; margin-left:6px; vertical-align:middle;
}
/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1180px){
.pricing-4{ grid-template-columns:repeat(2,1fr); gap:22px; }
}
@media (max-width:780px){
.pricing-4{ grid-template-columns:1fr; }
/* l'offre recommandée passe en premier sur mobile */
.plan.featured{ order:-1; }
.pricing, .pricing-4{ display:flex; flex-direction:column; }
}
@media (max-width:600px){
.offer-tabs{ gap:9px; margin:20px 0 28px; }
.offer-tab{ font-size:14px; padding:9px 16px; box-shadow:3px 3px 0 var(--navy); }
.offer-intro h3{ gap:10px; }
.offer-ico{ width:42px; height:42px; box-shadow:2px 2px 0 rgba(0,0,0,.20); }
.depassements{ padding:18px 18px; }
.depassements li{ flex-direction:column; gap:2px; align-items:flex-start; }
/* le tableau récapitulatif devient des cartes — jamais de défilement horizontal */
.recap-table{
border:none; box-shadow:none; background:transparent;
display:block; max-width:100%;
}
.recap-table thead{ display:none; }
.recap-table tbody, .recap-table tr, .recap-table td{ display:block; width:100%; }
.recap-table tr{
background:#fff; border:3px solid var(--navy); border-radius:16px;
box-shadow:5px 5px 0 var(--navy); margin-bottom:16px; padding:6px 4px;
overflow:hidden;
}
.recap-table tr.is-reco{ box-shadow:5px 5px 0 var(--gold); background:#fff; }
.recap-table tr.is-reco td:first-child{ box-shadow:none; }
.recap-table td{
border-bottom:2px dotted rgba(18,57,92,.14);
display:flex; justify-content:space-between; align-items:baseline; gap:14px;
text-align:right; padding:11px 16px;
}
.recap-table tr td:last-child{ border-bottom:none; }
.recap-table td:before{
content:attr(data-label);
font-family:'Baloo 2',cursive; font-weight:700; color:var(--navy);
text-align:left; flex:0 0 auto;
}
}
/* ---------- CTA final à trois boutons ---------- */
.cta-boutons{
display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:8px;
}
@media (max-width:640px){
.cta-boutons{ flex-direction:column; align-items:stretch; gap:11px; }
.cta-boutons .btn{ width:100%; text-align:center; }
}
.btn-gold{ background:var(--gold); color:#fff; }
/* ═══════════════════════════════════════════════════════════
AGENTS DÉCORATIFS — page Offres
Mêmes règles que l'accueil : décoratifs, chargés uniquement
quand la gouttière est assez large, jamais sur mobile.
═══════════════════════════════════════════════════════════ */
.a-agents{ position:relative; }
.a-agents > .wrap{ position:relative; z-index:2; }
.agent-deco{
position:absolute; bottom:0; z-index:1; width:auto; height:auto; max-width:none;
pointer-events:none; user-select:none;
filter:drop-shadow(8px 8px 0 rgba(18,57,92,.15));
display:none;
}
/* @@AGENT-MIROIR@@
Cinq personnages regardaient vers l'extérieur de la page. On les retourne
en CSS plutôt que de modifier les .webp : l'image source reste intacte et
la correction est réversible en retirant la classe dans le HTML.
Le miroir doit être ré-appliqué dans chaque état animé, sinon l'animation
d'apparition (qui redéfinit transform) annulerait le retournement. */
.agent-deco.agent-mirror{ transform:scaleX(-1); }
.agent-deco.rv{ opacity:0; }
.ad-gauche.rv{ transform:translateX(-52px); }
.ad-droite.rv{ transform:translateX(52px); }
.agent-deco.rv{ transition:opacity .75s cubic-bezier(.22,.9,.3,1), transform .75s cubic-bezier(.22,.9,.3,1); }
.agent-deco.rv-on{ opacity:1; transform:none; animation:flotteOffres 5.4s ease-in-out .9s infinite; }
.agent-deco.agent-mirror.rv-on{ transform:scaleX(-1); animation:flotteOffresMirror 5.4s ease-in-out .9s infinite; }
.ad-droite.rv-on{ animation-delay:2.2s; animation-duration:6.1s; }
@keyframes flotteOffres{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
@keyframes flotteOffresMirror{ 0%,100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-13px); } }
@media (prefers-reduced-motion:reduce){
.agent-deco{ animation:none !important; transition:none !important;
opacity:1 !important; transform:none !important; }
/* sans cette ligne, transform:none ci-dessus remettrait les personnages
retournés dans leur sens d'origine chez les visiteurs qui ont activé
la réduction des animations. */
.agent-deco.agent-mirror{ transform:scaleX(-1) !important; }
}
/* Seuil abaissé de 1600px à 1200px : au-dessus de 1600px seulement, les
personnages restaient invisibles sur la majorité des portables (1366,
1440 et même 1536px). La largeur mini garantit qu'ils restent lisibles
dans une gouttière étroite. */
@media (min-width:1428px){
.solutions-agents .agent-bloc{
display:block;
/* le contenu fait 1180px : le personnage doit tenir dans la gouttière
restante, sinon il chevauche le texte. 10px de marge au bord,
8px de respiration côté contenu. */
width:min(520px, calc((100vw - 1132px) / 2 - 18px));
/* centrage vertical d'un élément absolu : top+bottom à 0 et marges auto.
Épinglé en haut (top:210px), l'agent flottait avec 57 % de vide
en dessous et paraissait détaché du contenu qu'il présente. */
top:0; bottom:0; height:fit-content; margin-block:auto;
}
.solutions-agents .ag-gauche{ left:10px; }
.solutions-agents .ag-droite{ right:10px; }
}
/* @@AGENTS-AUTRES-PAGES@@
Agents décoratifs sur Agents / Démos / Contact.
Même principe que l'accueil : ils n'apparaissent que si la gouttière
est assez large, et la section reçoit la hauteur nécessaire pour
qu'aucun personnage ne déborde sur la section voisine. */
@media (min-width:1428px){
.modes-agents, .demos-agents, .contact-agents{
min-height:900px; display:flex; flex-direction:column; justify-content:center;
}
.modes-agents .agent-bloc,
.demos-agents .agent-bloc,
.contact-agents .agent-bloc{
display:block;
width:min(500px, calc((100vw - 1132px) / 2 - 18px));
top:0; top:0; bottom:0; height:fit-content; margin-block:auto; height:fit-content; margin-block:auto;
}
.modes-agents .ag-gauche,
.demos-agents .ag-gauche,
.contact-agents .ag-gauche{ left:clamp(8px, 1.4vw, 34px); }
.modes-agents .ag-droite,
.demos-agents .ag-droite,
.contact-agents .ag-droite{ right:clamp(8px, 1.4vw, 34px); }
}
/* @@ATOUT-OFFRE@@ — encart de mise en avant (ex. multilingue) */
.atout-offre{
max-width:820px; margin:34px auto 0; padding:26px 30px;
background:linear-gradient(135deg, rgba(201,162,39,.13), rgba(91,138,154,.10));
border:3px solid var(--navy); border-radius:22px;
box-shadow:6px 6px 0 var(--navy); text-align:center;
}
.atout-offre h4{
font-family:'Baloo 2',cursive; font-size:clamp(19px,1.7vw,26px);
color:var(--navy); margin:0 0 10px;
}
.atout-offre p{
font-size:15.5px; line-height:1.7; color:var(--muted); margin:0;
max-width:660px; margin-inline:auto;
}
@media (max-width:600px){ .atout-offre{ padding:20px 18px; border-radius:16px; } }
/* @@STYLE-BULLE@@
Le style visuel de la bulle n'existait QUE dans style-home.css :
sur Offres / Agents / Démos / Contact, le texte s'affichait nu,
sans fond, sans contour, sans queue. */
.agent-bulle{
position:absolute; z-index:3;
background:#fff; color:var(--navy);
border:3px solid var(--navy); border-radius:20px;
padding:13px 17px; width:max-content; max-width:250px;
font-family:'Baloo 2',cursive; font-weight:700;
font-size:clamp(14px,1.05vw,17px); line-height:1.35;
box-shadow:5px 5px 0 rgba(18,57,92,.22);
}
.agent-bulle::before, .agent-bulle::after{
content:""; position:absolute; bottom:-19px; border:10px solid transparent;
}
.ab-gauche{ left:58%; bottom:auto; top:2%; }
.ab-gauche::before{ left:26px; border-top-color:var(--navy); border-width:13px; bottom:-26px; }
.ab-gauche::after { left:29px; border-top-color:#fff; border-width:10px; bottom:-19px; }
.ab-droite{ right:58%; bottom:auto; top:2%; }
.ab-droite::before{ right:26px; border-top-color:var(--navy); border-width:13px; bottom:-26px; }
.ab-droite::after { right:29px; border-top-color:#fff; border-width:10px; bottom:-19px; }
/* @@BASE-AGENT-BLOC@@
Règle de base indispensable : sans elle, le personnage est masqué sur
mobile mais SA BULLE reste affichée — un bloc de texte orphelin en
pleine page. Le bloc entier est masqué et n'est réactivé que par les
media queries des pages qui l'utilisent. */
.agent-bloc{ display:none; position:absolute; z-index:1; pointer-events:none; }
.agent-bloc > .agent-deco{ position:static; display:block; width:100%; height:auto; }
/* @@ANIM-AGENT-BLOC@@
L'observateur d'apparition suit .agent-bloc (le personnage ET sa bulle).
Les anciennes règles ne visaient que .agent-deco : sans ceci, les agents
des pages Offres / Agents / Démos / Contact restaient figés. */
.agent-bloc.rv{ opacity:0; }
.agent-bloc.ag-gauche.rv{ transform:translateX(-44px); }
.agent-bloc.ag-droite.rv{ transform:translateX(44px); }
.agent-bloc.rv{
transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
}
.agent-bloc.rv-on{
opacity:1; transform:none;
animation:flotteOffres 5.4s ease-in-out .9s infinite;
}
.agent-bloc.ag-droite.rv-on{ animation-duration:6.1s; animation-delay:1.9s; }
/* la bulle apparaît juste après le personnage */
.agent-bloc.rv .agent-bulle{ opacity:0; transform:translateY(10px) scale(.95); }
.agent-bloc .agent-bulle{
transition:opacity .45s ease .35s, transform .45s cubic-bezier(.3,1.4,.5,1) .35s;
}
.agent-bloc.rv-on .agent-bulle{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
.agent-bloc, .agent-bloc .agent-bulle{
animation:none !important; transition:none !important;
opacity:1 !important; transform:none !important;
}
}
/* @@RECAP-AGENTS@@ — bas de la page offres : Iris et Victor autour du récapitulatif */
@media (min-width:1600px){
.recap-agents{ min-height:820px; display:flex; flex-direction:column; justify-content:center; }
.recap-agents .agent-bloc{
display:block;
width:min(500px, calc((100vw - 1210px) / 2 - 18px));
top:0; bottom:0; height:fit-content; margin-block:auto;
}
.recap-agents .ag-gauche{ left:clamp(8px, 1.4vw, 34px); }
.recap-agents .ag-droite{ right:clamp(8px, 1.4vw, 34px); }
}
/* @@SECTION-FONDATEUR@@ */
.fond-grille{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
.fond-photo img{
width:200px; height:200px; border-radius:50%; object-fit:cover; display:block;
border:5px solid var(--navy); box-shadow:7px 7px 0 var(--gold);
}
.fond-txt .title{ margin-bottom:4px; }
.fond-role{
font-family:'Baloo 2',cursive; font-size:17px; color:var(--gold);
margin:0 0 16px; font-weight:700;
}
.fond-txt p{ color:var(--muted); font-size:15.5px; line-height:1.75; margin:0 0 14px; max-width:640px; }
.fond-liens{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (min-width:860px){
.fond-grille{ grid-template-columns:auto 1fr; gap:48px; align-items:start; }
.fond-photo img{ width:240px; height:240px; }
}
@media (max-width:600px){
.fond-liens .btn{ width:100%; text-align:center; }
}
/* @@FONDATEUR@@ — présentation d'Idrice */
.fondateur-grille{ display:grid; gap:clamp(24px,3vw,54px); align-items:center; }
.fondateur-photo{
width:clamp(150px,20vw,260px); height:auto; border-radius:50%;
border:5px solid var(--navy); box-shadow:7px 7px 0 var(--gold);
display:block; justify-self:center;
}
.fondateur-role{
font-family:'Baloo 2',cursive; font-weight:700; color:var(--gold);
font-size:clamp(15px,1.2vw,19px); margin:-6px 0 14px;
}
.fondateur-txt .sub{ margin-bottom:14px; }
.fondateur-txt .btn{ margin-top:6px; }
@media (min-width:900px){
.fondateur-grille{ grid-template-columns:auto minmax(0,1fr); text-align:left; }
.fondateur-txt{ max-width:680px; }
}
@media (max-width:899px){
.fondateur-grille{ text-align:center; justify-items:center; }
}
.fondateur-liens{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (max-width:600px){ .fondateur-liens{ justify-content:center; } }
/* @@CTA-AGENTS@@ — mascotte + bulle dans les CTA finaux (zone de conversion) */
.cta-agents{ position:relative; overflow:hidden; }
@media (min-width:1600px){
/* hauteur réservée : la mascotte fait ~1,52 x sa largeur, il faut
que la section soit plus haute qu'elle, sinon elle déborde. */
/* align-items:center est indispensable : sans lui, les enfants d'un
conteneur flex en colonne s'étirent sur toute la largeur — le bouton
du CTA faisait 1872 px de large au lieu de sa taille naturelle. */
.cta-agents{ min-height:460px; display:flex; flex-direction:column;
justify-content:center; align-items:center; }
.cta-agents .cta-agent{
display:block; bottom:14px;
width:min(210px, calc((100vw - 1180px) / 2 - 26px));
}
.cta-agents .ag-droite{ right:clamp(10px, 1.5vw, 40px); }
}
/* Dans les CTA finaux la gouttière est étroite : la bulle est repositionnée
AU-DESSUS de la mascotte et calée à droite, sinon elle mord sur les
boutons et le texte de la section. */
@media (min-width:1600px){
.cta-agents .agent-bulle{
right:0; left:auto; top:auto; bottom:calc(100% + 16px);
max-width:250px; width:max-content; font-size:15px; padding:11px 15px;
}
.cta-agents .agent-bulle::before{ right:32px; left:auto; }
.cta-agents .agent-bulle::after { right:35px; left:auto; }
}
/* @@BULLES-DANS-LE-FLUX@@
Correction structurelle. Les bulles étaient en position:absolute avec
des décalages en pourcentage : elles sortaient de la boîte de leur
bloc et recouvraient le contenu, sans qu'aucun test ne le détecte
(les contrôles ne mesuraient que l'image, pas la bulle).
Désormais le bloc est une colonne flex : bulle au-dessus, personnage
en dessous. La boîte du bloc englobe les deux, donc tout débordement
devient mesurable — et impossible à manquer. */
.agent-bloc{ flex-direction:column; align-items:stretch; }
.agent-bloc > .agent-bulle{
position:static !important;
right:auto !important; left:auto !important; top:auto !important; bottom:auto !important;
margin:0 0 14px 0; width:auto; max-width:100%;
align-self:center;
}
.agent-bloc > .agent-bulle::before,
.agent-bloc > .agent-bulle::after{ display:none; }
/* Le paragraphe du CTA n'avait aucune largeur maximale : il occupait
toute la section (24 → 1896 px) et entrait donc dans la gouttière
réservée à la mascotte. On le borne et on le centre. */
.cta-final p{ max-width:720px; margin-left:auto; margin-right:auto; }
.cta-final h2{ max-width:900px; margin-left:auto; margin-right:auto; }
/* @@FAMILLES@@ — présentation interactive des services (aucun tarif ici) */
.fam-onglets{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin:26px 0 30px; }
.fam-tab{
font-family:'Baloo 2',cursive; font-weight:700; font-size:clamp(14px,1.05vw,17px);
color:var(--navy); background:#fff; border:3px solid var(--navy); border-radius:40px;
padding:10px 22px; cursor:pointer; box-shadow:4px 4px 0 var(--navy);
transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
.fam-tab:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
.fam-tab:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
.fam-tab.is-active{ background:var(--gold); color:#fff; }
.fam-tab:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.fam-panneau{ display:none; }
.fam-panneau.is-active{ display:block; animation:famEntre .3s ease-out; }
@keyframes famEntre{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .fam-panneau.is-active{ animation:none; } }
.fam-grille{
display:grid; gap:clamp(20px,2.5vw,40px); align-items:start;
background:#fff; border:3px solid var(--navy); border-radius:22px;
box-shadow:7px 7px 0 var(--navy); padding:clamp(22px,2.4vw,38px);
max-width:1000px; margin:0 auto;
}
@media (min-width:860px){ .fam-grille{ grid-template-columns:1.25fr 1fr; } }
.fam-txt h3{ font-family:'Baloo 2',cursive; font-size:clamp(21px,2vw,29px); color:var(--navy); margin:0 0 14px; }
.fam-txt p{ font-size:15.5px; line-height:1.7; color:var(--muted); margin:0 0 13px; }
.fam-quand{ padding:11px 15px; background:rgba(201,162,39,.13); border-radius:12px; }
.fam-quand b{ color:var(--navy); }
.fam-pas{ padding:11px 15px; background:rgba(91,138,154,.12); border-radius:12px; }
.fam-pas b{ color:var(--navy); }
.fam-txt .btn{ margin-top:6px; }
.fam-liste{ list-style:none; margin:0; padding:0; }
.fam-liste li{
position:relative; padding:9px 0 9px 26px; font-size:15px; line-height:1.55; color:var(--muted);
border-bottom:2px dotted rgba(18,57,92,.14);
}
.fam-liste li:last-child{ border-bottom:none; }
.fam-liste li:before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800; }
.fam-note{ text-align:center; font-size:14.5px; color:var(--muted); margin:24px 0 0; }
.fam-note a{ color:var(--navy); font-weight:700; }
img[src*="agent-clara"],
img[src*="agent-hugo"],
img[src*="agent-victor"]{ transform:scaleX(-1); }
/* @@LANGUES-DRAPEAUX@@ — puces de langues du bloc multilingue (offres) */
.langues-flags{
display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
margin-top:20px;
}
.flag-chip{
display:inline-flex; align-items:center; gap:9px;
background:#fff; border:2.5px solid var(--navy); border-radius:16px;
padding:7px 14px; box-shadow:3px 3px 0 var(--navy);
font-family:'Baloo 2',cursive; font-weight:700; font-size:13.5px; color:var(--navy);
transition:transform .12s, box-shadow .12s;
}
.flag-chip:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--navy); }
.flag-chip svg{ display:block; flex-shrink:0; }
.flag-chip.flag-plus{ background:var(--gold); color:#fff; }
@media (max-width:640px){
.langues-flags{ gap:9px; }
.flag-chip{ font-size:12px; padding:6px 11px; gap:7px; }
.flag-chip svg{ width:28px; height:20px; }
}
/* @@DEPASSEMENTS-INTRO@@ — explication flux d'appels / tokens */
.depassements-intro{
font-size:14px; line-height:1.7; color:var(--muted);
margin:0 0 18px; text-align:left;
}