/* ═══════════════════════════════════════════════════════════════════════
LIVRE DE POLICE — page d'accueil V4 (maquettes d'Enyss du 20/08/2026)
Vrai HTML : chaque texte est du texte, chaque interface est du DOM.
Palette mesurée sur les maquettes : navy #041736 · rouge #E2131B ·
vert #00883A · gris #5E6A80. Titres : Fraunces (police de marque,
auto-hébergée — voir /css/brand-fonts.css). Corps : pile système Inter.
[Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
:root{
--navy:#041736; --navy-2:#0A2A55; --navy-3:#123B71;
--ink:#1A2947; --muted:#5E6A80; --faint:#5E6A80;
--red:#E2131B; --red-d:#BE1016; --green:#00883A; --gold:#F0A500;
--line:#E2E8F2; --line-2:#EDF1F7; --panel:#F4F7FB; --panel-2:#FAFCFE;
--r:16px; --r-s:11px;
--shadow:0 14px 34px rgba(4,23,54,.09);
--shadow-s:0 5px 16px rgba(4,23,54,.07);
--fd:'Fraunces',Georgia,'Times New Roman',serif;
--fb:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0;
-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--fb);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:absolute;left:-9999px;top:env(safe-area-inset-top,0px);z-index:3000;background:var(--navy);color:#fff;
padding:10px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:env(safe-area-inset-left,0px)}
#contenu:focus{outline:none}
:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px;border-radius:4px}
.wrap{max-width:1620px;margin:0 auto;padding:0 26px}
.sec{padding:88px 0}
.sec-panel{background:#FDFDFE}
/* ─── Typographie ─────────────────────────────────────────────────────── */
.eyebrow{color:var(--red);font-size:13px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase;margin:0 0 18px}
h1,h2,h3{margin:0;color:var(--navy);font-family:var(--fd);font-weight:640;
font-optical-sizing:auto;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(30px,2.9vw,48px);letter-spacing:-.032em;line-height:1.105}
h2{font-size:clamp(28px,2.85vw,47px)}
h3{font-size:21px;line-height:1.25}
h1 .red,h2 .red{color:var(--red)}
h1 .hl{display:block}
h1 .hl-2{font-size:.727em;line-height:1;margin-top:4px}
h1 .hl-3{margin-top:6px}
.lead{font-size:16px;line-height:1.38;color:var(--ink);margin:11px 0 0;max-width:56ch}
.hero-copy .lead{max-width:none}
.lead-strong{font-weight:700;color:var(--navy)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto;max-width:66ch}
/* ─── Boutons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
font:700 15px/1.2 var(--fb);border-radius:12px;padding:14px 22px;
border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(226,19,27,.28)}
.btn-primary:hover{background:var(--red-d)}
.btn-outline{background:#fff;color:var(--red);border-color:var(--red)}
.btn-outline:hover{background:#FFF4F4}
.btn-wa{background:#fff;color:var(--green);border-color:var(--green)}
.btn-wa:hover{background:#F1FBF5}
.btn-navy{background:var(--navy);color:#fff}
/* ─── Bandeau + en-tête ───────────────────────────────────────────────── */
.topbar{background:var(--navy);color:#fff;font-size:15px;font-weight:600;text-align:center}
.topbar a{display:inline-flex;align-items:center;gap:9px;padding:7px 14px}
.topbar-ic{width:16px;height:16px;color:#3ED47E}
.ldp-support-topbar-copy{line-height:1.35}
.ldp-support-topbar-ref{margin-left:5px;font-weight:850;letter-spacing:.025em;white-space:nowrap}
.header{position:relative;top:auto;z-index:1000;background:#fff;border-bottom:1px solid var(--line);
transition:box-shadow .2s}
.header.is-stuck{box-shadow:0 6px 24px rgba(4,23,54,.08)}
.header-in{display:flex;align-items:center;gap:30px;height:94px}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.brand img{width:352px;height:auto;margin-left:-8px}
.nav{display:flex;align-items:center;gap:54px;margin-left:auto;margin-right:96px}
.nav a{position:relative;font-size:17px;font-weight:650;color:var(--ink);padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;
background:var(--red);border-radius:2px;transition:right .2s}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav a.is-active{color:var(--red)}
.btn-dash{padding:18px 31px;border-radius:12px;font-size:17px;box-shadow:0 3px 10px rgba(226,19,27,.18)}
.nav-burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:10px;
background:#fff;cursor:pointer;place-content:center;gap:5px}
.nav-burger span:not(.sr-only){display:block;width:22px;height:2.5px;background:var(--navy);border-radius:2px}
/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:0;background:#fff;overflow:hidden;min-height:min(48.9vw,900px)}
.hero-grid{display:block;padding:35px 0 34px}
.hero .wrap{padding-left:34px}
.hero-copy{width:100%;max-width:100%;position:relative;z-index:3}
.hero-visual{position:absolute;top:0;right:0;bottom:auto;z-index:1;width:64.11%;max-width:1072px;
aspect-ratio:1072/813;margin:0}
.hero-visual>img,.hero-visual>picture,.hero-visual>picture>img{display:block;width:100%;height:100%}
.hero-benefits{display:grid;grid-template-columns:1.02fr 1.03fr 1.2fr .95fr;width:auto;border:1px solid var(--line);
border-radius:var(--r-s);background:#fff;margin-top:19px;box-shadow:var(--shadow-s);max-width:100%}
.hero-benefits span{display:flex;align-items:center;gap:9px;padding:13px 6px 13px 14px;font-size:12px;
font-weight:700;line-height:1.34;color:var(--navy)}
.hero-benefits b{font-weight:750}
.hero-benefits span:last-child{border-right:0}
.hero-benefits svg{width:27px;height:27px;flex:none;color:var(--red)}
.hero-benefits b{white-space:nowrap}
.hero-benefits small{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:2px}
.hero-line{margin:20px 0 0;font-size:15.5px}
.hero-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:32px;width:auto;max-width:100%}
.hero-cards article{background:#fff;border-radius:18px;display:flex;align-items:center;gap:10px;
min-width:0;padding:15px 11px;min-height:97px;text-align:left;font-size:12px;font-weight:650;color:var(--navy);
line-height:1.26;box-shadow:0 6px 18px rgba(15,30,60,.07)}
.hero-cards article span{min-width:0;overflow-wrap:anywhere}
.hero-cards svg{width:35px;height:35px;flex:none;color:var(--red)}
.hero-cards article:nth-child(2) svg,.hero-cards article:nth-child(4) svg{color:var(--navy)}
.hero-cta{display:flex;gap:17px;margin-top:33px;flex-wrap:nowrap;width:max-content;position:relative;z-index:2}
.hero-cta .btn{padding:22px 26px;white-space:nowrap;font-size:16px}
.trustline{margin:23px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.trustline i{font-style:normal;color:var(--red);margin:0 11px;font-size:17px;vertical-align:-1px}
/* la composition photo + écrans HTML par-dessus le noir des écrans */
.hero-visual{min-width:0}
.hero-visual>img,.hero-visual>picture,.hero-visual>picture>img{display:block;width:100%;height:auto}
.hero-grid>*,.sync-grid>*,.gestion-grid>*,.metiers-grid>*,.shop-grid>*,
.secu-grid>*,.pilot-grid>*,.accomp-grid>*,.pricing-grid>*,.final-grid>*,
.sync-diagram>*{min-width:0}
.cw-head{flex-wrap:wrap}
.screen-fill{position:absolute;overflow:hidden;background:#0B1220}
.screen-fill .fit{transform-origin:top left}
.fill-laptop{left:11.32%;top:8.62%;width:63.85%;height:52.28%}
.fill-phone{left:75.93%;top:46.98%;width:15.50%;height:45.36%;
clip-path:polygon(21% 0.4%,99.6% 3.4%,81.2% 99.6%,0.4% 95.2%)}
.fill-phone .fit{position:absolute;left:50%;top:50%;transform-origin:50% 50%}
/* ─── Mini interface produit (maquette d'application en DOM) ──────────── */
.app{display:flex;background:#F3F6FA;font-family:var(--fb);color:var(--ink);
--aw:1200;width:1200px;height:790px;font-size:12px;line-height:1.35}
.app-hero{width:950px;height:622px}
.app-hero .app-side{width:178px}
.app-side{width:212px;flex:none;background:linear-gradient(180deg,var(--navy),#0A2650);
color:#fff;padding:14px 12px;display:flex;flex-direction:column;gap:3px}
.app-brand{display:flex;gap:9px;align-items:center;font-weight:800;font-size:12.5px;
padding:4px 6px 14px;line-height:1.15}
.app-brand small{display:block;font-weight:600;font-size:9.5px;color:#9FB2D2}
.app-roundel{width:26px;height:26px;flex:none;border-radius:50%;
background:radial-gradient(circle at 50% 50%,var(--red) 0 29%,#fff 30% 55%,var(--navy) 56%);
border:2px solid #fff}
.app-menu a{display:flex;align-items:center;gap:9px;padding:7.5px 9px;border-radius:8px;
color:#C6D2E6;font-weight:650;font-size:11.5px}
.app-menu svg{width:14px;height:14px;flex:none}
.app-menu .on{background:rgba(255,255,255,.13);color:#fff}
.app-main{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.app-top{display:flex;align-items:center;gap:10px}
.app-title{font-family:var(--fd);font-weight:640;font-size:17px;color:var(--navy);margin-right:auto}
.app-search{flex:0 1 250px;display:flex;align-items:center;gap:7px;background:#fff;
border:1px solid var(--line);border-radius:8px;padding:6.5px 10px;color:var(--faint);font-size:10.5px}
.app-search svg{width:12px;height:12px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:6px 10px;
font-size:10.5px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.kpis{display:grid;grid-template-columns:repeat(var(--kn,4),1fr);gap:9px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.kpi small{display:block;font-size:9.5px;font-weight:650;color:var(--muted)}
.kpi{overflow:hidden}
.kpi b{display:block;font-size:12.5px;font-weight:800;color:var(--navy);margin:2px 0 1px;letter-spacing:-.01em;white-space:nowrap}
.kpi em{font-style:normal;font-size:9px;font-weight:750;color:var(--green)}
.app-cols{display:grid;gap:11px;min-height:0;flex:1}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.panel h4{margin:0 0 8px;font-size:10.5px;font-weight:800;color:var(--navy)}
.rowlist>div{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-2);font-size:10px}
.rowlist>div:first-child{border-top:0}
.rowlist .ph{width:24px;height:24px;flex:none;border-radius:6px;background:var(--panel);
display:grid;place-items:center;color:var(--muted);overflow:hidden}
.rowlist .ph svg{width:12px;height:12px}
.rowlist .ph img{width:100%;height:100%;object-fit:cover}
.rowlist b{font-size:10px;color:var(--navy);display:block;line-height:1.25}
.rowlist small{font-size:8.8px;color:var(--muted);display:block}
.rowlist .end{margin-left:auto;text-align:right;flex:none;display:grid;gap:2px;justify-items:end}
.stat{padding:7px 0;border-top:1px solid var(--line-2)}
.stat:first-child{border-top:0}
.stat small{display:block;font-size:9px;font-weight:650;color:var(--muted)}
.stat b{display:block;font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap}
.badge{display:inline-block;border-radius:6px;padding:2.5px 7px;font-size:8.6px;font-weight:750}
.b-green{background:#E5F6EC;color:#007A34}
.b-blue{background:#E8F0FE;color:#1751B8}
.b-amber{background:#FEF3DC;color:#9A6B00}
.b-red{background:#FDE8E9;color:var(--red-d)}
.donut{display:flex;flex-direction:column;gap:9px;align-items:center}
.donut-disc{width:88px;height:88px;flex:none;border-radius:50%;position:relative;
background:conic-gradient(#2E5EAA 0 32%,#3E9B6B 0 56%,#E2A63C 0 75%,#A855A0 0 87%,#5E6A80 0 95%,#C9D3E0 0)}
.donut-disc::after{content:attr(data-total);position:absolute;inset:19px;border-radius:50%;background:#fff;
display:grid;place-items:center;font-weight:800;font-size:11px;color:var(--navy);text-align:center}
.donut-leg{font-size:8.8px;color:var(--muted);display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:3px 10px;width:100%}
.donut-leg span{white-space:nowrap}
.donut-leg i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px;font-style:normal}
.panel.linechart{display:flex;flex-direction:column}
.linechart svg{width:100%;flex:1;min-height:70px}
.control-table{width:100%;border-collapse:collapse;font-size:9.2px}
.control-table th{font-size:8.2px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
text-align:left;padding:6px 7px;border-bottom:1.5px solid var(--line)}
.control-table td{padding:6px 5px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.control-table td:nth-child(n+2){white-space:nowrap}
.control-table td:first-child{min-width:66px}
.control-table td:nth-child(5){white-space:normal;min-width:74px}
.control-table td b{color:var(--navy)}
.control-table .hash{font-family:ui-monospace,Consolas,monospace;color:var(--muted);font-size:8.8px}
/* téléphone du hero : fiche objet */
.phone-app{width:300px;height:846px;background:#F5F7FA;font-size:11px;display:flex;flex-direction:column}
.phone-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 4px;
font-size:10px;font-weight:700;color:var(--navy)}
.phone-head{padding:4px 16px 6px;font-weight:800;color:var(--navy);font-size:19px;font-family:var(--fd);line-height:1.2}
.phone-head small{font-weight:600;color:var(--muted);display:block;font-size:9.5px}
.phone-photo{margin:6px 12px;background:#F5F6F8;border-radius:14px;
padding:10px;display:grid;place-items:center}
.phone-photo img{max-height:210px;width:auto}
.phone-body{padding:2px 14px 14px;display:grid;gap:7px}
.phone-name{font-weight:800;color:var(--navy);font-size:14px;line-height:1.25}
.phone-price{font-family:var(--fd);font-weight:640;color:var(--navy);font-size:22px}
.phone-attrs{padding:0 2px}
.phone-attrs div{display:flex;justify-content:space-between;padding:6.5px 0;font-size:11px}
.phone-attrs span{color:var(--muted)}
.phone-attrs b{color:var(--navy)}
.phone-cta{margin-top:4px;background:var(--navy);color:#fff;text-align:center;border-radius:11px;
padding:12px;font-weight:750;font-size:12px}
/* ─── 02 · Synchronisation ────────────────────────────────────────────── */
.sync-grid{display:grid;grid-template-columns:minmax(300px,34fr) 66fr;gap:44px;align-items:start}
.sync-side-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.mini-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:16px;box-shadow:var(--shadow-s)}
.mini-card svg{width:22px;height:22px;color:var(--red);margin-bottom:9px}
.mini-card b{display:block;color:var(--navy);font-size:14px;margin-bottom:4px}
.mini-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.sync-diagram{display:grid;grid-template-columns:150px minmax(220px,1fr) 150px 190px;gap:14px;align-items:center}
.sync-col{display:grid;gap:11px}
.node{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:11px 12px;
box-shadow:var(--shadow-s);position:relative}
.node svg{width:19px;height:19px;color:var(--red);margin-bottom:6px}
.node b{display:block;font-size:12px;color:var(--navy);line-height:1.2}
.node small{font-size:10px;color:var(--muted)}
.node::after{content:"";position:absolute;top:50%;width:14px;border-top:2px dashed #C4CFDE}
.sync-col-l .node::after{right:-15px}
.sync-col-r .node::after{left:-15px}
.fiche-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow);padding:16px}
.fiche-card figure{margin:0 0 10px;background:#FBFCFE;border:1px solid var(--line-2);
border-radius:12px;display:grid;place-items:center;padding:12px}
.fiche-card figure img{max-height:240px;width:auto}
.fiche-rows div{display:flex;justify-content:space-between;gap-10px;padding:8.5px 2px;
border-top:1px solid var(--line-2);font-size:13px}
.fiche-rows span{color:var(--muted)}
.fiche-rows b{color:var(--navy);text-align:right}
.dot-ok{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.sync-benefits{border-left:1px solid var(--line);padding-left:20px;display:grid;gap:18px}
.sync-benefits svg{width:22px;height:22px;color:var(--red);margin-bottom:7px}
.sync-benefits b{display:block;font-size:14px;color:var(--navy);line-height:1.3;margin-bottom:3px}
.sync-benefits p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
/* ─── 03 · Gestion complète ───────────────────────────────────────────── */
.gestion-grid{display:grid;grid-template-columns:minmax(340px,42fr) 58fr;gap:46px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
.tiles article{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
min-width:0;padding:13px 8px;text-align:center;font-size:11.5px;font-weight:700;
color:var(--navy);line-height:1.25;overflow-wrap:anywhere}
.tiles svg{width:20px;height:20px;margin:0 auto 7px;color:var(--red)}
.tiles article:nth-child(4n) svg{color:var(--red)}
.monitor{filter:drop-shadow(0 26px 40px rgba(4,23,54,.22))}
.monitor-screen{background:#0A0E16;border-radius:16px;padding:11px}
.monitor-screen .app{border-radius:9px;overflow:hidden}
.monitor-screen .app{width:100%;height:auto;min-height:0}
.monitor-foot{width:34%;height:12px;background:linear-gradient(#1A2333,#0A0E16);margin:0 auto;border-radius:0 0 6px 6px}
.monitor-base{width:15%;height:9px;background:#141B29;margin:0 auto;border-radius:6px 6px 10px 10px}
.band-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.band-3>div{display:flex;gap:14px;align-items:flex-start}
.band-3 .ic{width:44px;height:44px;flex:none;border-radius:50%;background:#E8EEF7;
display:grid;place-items:center;color:var(--navy)}
.band-3 .ic svg{width:21px;height:21px}
.band-3 b{display:block;color:var(--navy);font-size:15px;margin-bottom:3px}
.band-3 p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
/* ─── 04 · Métiers ────────────────────────────────────────────────────── */
.metiers-grid{display:grid;grid-template-columns:minmax(260px,26fr) 54fr 20fr;gap:30px 34px;align-items:start}
.metiers-grid>div:first-child{grid-column:1;grid-row:1}
.metiers-grid .metier-cards{grid-column:2;grid-row:1}
.metiers-grid .rail{grid-column:3;grid-row:1/3}
.metiers-grid .champs{grid-column:1/3;grid-row:2;margin-top:6px}
.callout{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
border-radius:var(--r-s);padding:16px 18px;font-size:14.5px;box-shadow:var(--shadow-s)}
.callout b{color:var(--navy)}
.callout .red{color:var(--red);font-weight:750}
.callout svg{width:22px;height:22px;color:var(--red);margin-bottom:8px}
.metier-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.metier-cards a{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s;display:block}
.metier-cards a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.metier-cards img{width:100%;aspect-ratio:1/1.32;object-fit:cover}
.metier-cards b{display:block;font-family:var(--fd);font-weight:640;color:var(--navy);
text-align:center;font-size:14.5px;padding:10px 6px;line-height:1.2}
.rail{display:grid;gap:13px}
.rail article{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
padding:15px;box-shadow:var(--shadow-s)}
.rail svg{width:21px;height:21px;color:var(--red);margin-bottom:8px}
.rail b{display:block;font-size:13.5px;color:var(--navy);margin-bottom:4px}
.rail p{margin:0;font-size:11.8px;color:var(--muted);line-height:1.45}
.champs{margin-top:36px;min-width:0}
.champs h3{font-size:clamp(20px,2vw,26px);text-align:center;margin-bottom:20px}
.champs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.champs-grid article{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
padding:14px;display:flex;gap:13px;box-shadow:var(--shadow-s)}
.champs-grid img{width:64px;height:64px;object-fit:contain;flex:none}
.champs-grid b{display:block;font-family:var(--fd);font-weight:640;color:var(--navy);font-size:14.5px;margin-bottom:5px}
.champs-grid li{font-size:11.8px;color:var(--muted);padding-left:12px;position:relative;line-height:1.55}
.champs-grid li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--red)}
/* ─── 05 · Boutique offerte ───────────────────────────────────────────── */
.shop-grid{display:grid;grid-template-columns:66fr minmax(270px,34fr);gap:30px;margin-top:40px;align-items:start}
.shop-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.shop-previews figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.shop-previews img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top}
.shop-previews figcaption{padding:9px 12px;font-size:12px;font-weight:700;color:var(--navy);
border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center}
.shop-previews figcaption small{color:var(--muted);font-weight:600}
.shop-rail{display:grid;gap:15px}
.shop-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px;box-shadow:var(--shadow-s)}
.shop-card h3{display:flex;gap:10px;align-items:center;font-size:16.5px;margin-bottom:12px}
.shop-card h3 svg{width:21px;height:21px;color:var(--red);flex:none}
.check-2col{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.check-2col li,.check-list li{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;color:var(--ink);line-height:1.4}
.check-2col svg,.check-list svg{width:15px;height:15px;flex:none;color:var(--red);margin-top:2px}
.check-list{display:grid;gap:8px}
.check-list.green svg{color:var(--green)}
.navy-band{margin-top:34px;background:var(--navy);border-radius:var(--r);color:#fff;
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:24px 22px}
.navy-band>div{display:flex;gap:13px;align-items:flex-start;padding:0 10px}
.navy-band .ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--red);
display:grid;place-items:center;color:#fff}
.navy-band .ic svg{width:20px;height:20px}
.navy-band b{display:block;font-size:14.5px;margin-bottom:3px}
.navy-band p{margin:0;font-size:12px;color:#B9C6DD;line-height:1.45}
/* ─── 06 · Sécurité et contrôle ───────────────────────────────────────── */
.secu-grid{display:grid;grid-template-columns:minmax(275px,27fr) 51fr 22fr;gap:30px;align-items:start}
.steps{display:grid;gap:9px;margin-top:24px}
.steps li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
border-radius:var(--r-s);padding:11px 14px;font-weight:700;color:var(--navy);font-size:14px;box-shadow:var(--shadow-s)}
.steps .num{width:26px;height:26px;flex:none;border-radius:50%;background:var(--navy);color:#fff;
display:grid;place-items:center;font-size:12.5px;font-weight:800}
.steps svg{width:18px;height:18px;color:var(--red);flex:none}
.control-window{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.cw-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.cw-title{font-family:var(--fd);font-weight:640;font-size:17px;color:var(--navy);margin-right:auto}
.cw-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 16px 4px}
.cw-kpis .kpi b{font-size:14px}
.cw-kpis .kpi em{color:var(--green)}
.cw-tabs{display:flex;gap:20px;padding:10px 16px 0;font-size:11.5px;font-weight:750;color:var(--muted)}
.cw-tabs .on{color:var(--navy);border-bottom:2.5px solid var(--red);padding-bottom:7px}
.cw-scroll{overflow-x:auto;padding:4px 16px 12px}
.cw-foot{font-size:10px;color:var(--muted);padding:0 16px 12px;display:flex;justify-content:space-between}
.verify-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px;box-shadow:var(--shadow-s)}
.verify-card h3{display:flex;gap:9px;align-items:center;font-size:16px}
.verify-card h3 svg{width:20px;height:20px;color:var(--navy);flex:none}
.verify-card>p{font-size:12px;color:var(--muted);margin:8px 0 12px}
.qr{width:150px;margin:0 auto;display:block}
.qr svg{width:100%;height:auto;color:var(--navy)}
.verify-id{text-align:center;margin:12px 0 4px;font-size:11px;color:var(--muted)}
.verify-id b{display:block;font-size:14.5px;color:var(--navy);letter-spacing:.02em}
.verify-ok{background:#E5F6EC;border-radius:10px;text-align:center;padding:10px;margin:12px 0}
.verify-ok b{color:#007A34;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px}
.verify-ok b svg{width:16px;height:16px}
.verify-ok small{color:#1D6B40;font-weight:650;font-size:11px}
.verify-meta{font-size:11px;color:var(--muted);display:grid;gap:7px}
.verify-meta b{color:var(--navy);display:block;font-size:11.5px}
.verify-meta .hash{font-family:ui-monospace,Consolas,monospace;word-break:break-all;font-size:10px}
.verify-note{margin-top:12px;text-align:center;font-size:10.5px;color:var(--faint);border-top:1px solid var(--line-2);padding-top:10px}
/* ─── 07 · Pilotage ───────────────────────────────────────────────────── */
.pilot-grid{display:grid;grid-template-columns:minmax(320px,38fr) 62fr;gap:44px;align-items:center}
.pilot-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.gains{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:17px;box-shadow:var(--shadow-s)}
.gains h3{color:var(--red);font-family:var(--fb);font-weight:800;font-size:15px;text-align:center;margin-bottom:12px}
.gains-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gains-row>div{text-align:center;padding:0 8px;border-left:1px solid var(--line-2)}
.gains-row>div:first-child{border-left:0}
.gains-row svg{width:21px;height:21px;margin:0 auto 6px;color:var(--navy)}
.gains-row b{display:block;font-size:13px;color:var(--navy);margin-bottom:2px}
.gains-row p{margin:0;font-size:11px;color:var(--muted);line-height:1.4}
.tablet{background:#0A0E16;border-radius:26px;padding:13px;filter:drop-shadow(0 26px 44px rgba(4,23,54,.25))}
.tablet .app{border-radius:15px;overflow:hidden}
.tablet .app{width:100%;height:auto}
/* ─── 08 · Accompagnement ─────────────────────────────────────────────── */
.accomp-grid{display:grid;grid-template-columns:minmax(300px,36fr) 34fr 30fr;gap:26px;align-items:start}
.wa-line{display:flex;align-items:center;gap:9px;margin:18px 0 0;font-weight:750;color:var(--navy);font-size:15px}
.wa-line svg{width:21px;height:21px;color:var(--green)}
.support-list{display:grid;gap:10px;margin-top:18px}
.support-list a{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
border-radius:var(--r-s);padding:13px 15px;box-shadow:var(--shadow-s);transition:transform .15s}
.support-list a:hover{transform:translateX(3px)}
.support-list svg{width:21px;height:21px;color:var(--red);flex:none}
.support-list b{display:block;color:var(--navy);font-size:14px}
.support-list small{color:var(--muted);font-size:12px}
.support-list .chev{margin-left:auto;color:var(--faint);width:16px;height:16px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.team-card img{width:100%;aspect-ratio:16/9.2;object-fit:cover}
.team-card>div{padding:20px;text-align:center}
.team-card h3{font-size:20px;margin-bottom:8px}
.team-card p{font-size:13.5px;color:var(--muted)}
.team-card .btn{width:100%}
.ou{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;font-weight:700;margin:13px 0}
.ou::before,.ou::after{content:"";flex:1;border-top:1px solid var(--line)}
.wa-num{border:1.5px solid var(--green);border-radius:12px;padding:12px;text-align:center}
.wa-num small{display:block;color:var(--green);font-weight:700;font-size:11.5px}
.wa-num b{display:block;color:var(--green);font-size:21px;letter-spacing:.04em;margin:2px 0}
.wa-num i{font-style:normal;font-size:11px;color:var(--muted);font-weight:600}
.chat-phone{background:#0A0E16;border-radius:30px;padding:11px;max-width:310px;margin:0 auto;
filter:drop-shadow(0 22px 36px rgba(4,23,54,.22))}
.chat-screen{background:#E7E1D8;border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.chat-head{background:var(--navy);color:#fff;display:flex;gap:9px;align-items:center;padding:12px 13px;font-size:12px;font-weight:750}
.chat-head .app-roundel{width:24px;height:24px}
.chat-head small{display:block;font-weight:600;color:#9BD8AE;font-size:9.5px}
.chat-body{padding:12px 11px;display:grid;gap:8px;font-size:11px;line-height:1.4}
.bub{max-width:86%;border-radius:12px;padding:8px 11px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bub.me{background:#D9F5D0;justify-self:end;border-bottom-right-radius:4px}
.bub.them{background:#fff;justify-self:start;border-bottom-left-radius:4px}
.bub time{display:block;text-align:right;font-size:8.5px;color:var(--faint);margin-top:2px}
.bub-file{display:flex;gap:9px;align-items:center;background:#fff;border-radius:12px;padding:9px 11px;justify-self:start;max-width:86%}
.bub-file .ic{width:30px;height:30px;flex:none;background:#FDE8E9;border-radius:8px;display:grid;place-items:center;color:var(--red)}
.bub-file .ic svg{width:15px;height:15px}
.bub-file b{font-size:10.5px;color:var(--navy);display:block}
.bub-file small{font-size:9px;color:var(--muted)}
.accomp-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.accomp-bottom>div{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
padding:16px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--shadow-s)}
.accomp-bottom .ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.accomp-bottom .ic svg{width:20px;height:20px}
.accomp-bottom b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:2px}
.accomp-bottom p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.contact-card{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:26px;box-shadow:var(--shadow-s);display:grid;grid-template-columns:minmax(260px,4fr) 6fr;gap:26px;align-items:start}
.contact-card h3{font-size:22px}
.contact-card>div>p{font-size:14px;color:var(--muted);margin-top:8px}
.contact-form{display:grid;gap:9px}
.contact-form label{font-size:12.5px;font-weight:750;color:var(--navy)}
.contact-form input,.contact-form textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;
padding:11px 13px;font:500 14px var(--fb);color:var(--ink);background:#FDFEFF}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--navy-3);border-color:var(--navy-3)}
.contact-form .btn{justify-self:start;margin-top:4px}
.cf-note{font-size:11.5px;color:var(--muted)}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;width:0;opacity:0}
/* ─── 09 · Tarifs ─────────────────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:31fr 34fr 35fr;gap:18px;margin-top:42px;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--red);
border-radius:var(--r);padding:26px 24px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column}
.price-gift{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:#FDE8E9;
display:grid;place-items:center;color:var(--red)}
.price-gift svg{width:25px;height:25px}
.price-n{font-family:var(--fd);font-weight:640;font-size:62px;line-height:1;color:var(--navy)}
.price-card .off{font-weight:750;color:var(--navy);font-size:15.5px}
.price-card hr{border:0;border-top:1px solid var(--line-2);margin:16px 0}
.price-m{font-family:var(--fd);font-weight:640;font-size:47px;color:var(--red);line-height:1}
.price-m small{font-size:16px;color:var(--ink);font-family:var(--fb);font-weight:700}
.price-annual{margin:16px 0 0;background:#F1FBF5;border:1.5px solid #BFE7CE;border-radius:12px;padding:12px}
.price-annual b{color:var(--navy);font-size:20px}
.price-annual span{color:var(--ink);font-size:13px;font-weight:650}
.price-annual em{display:inline-block;font-style:normal;background:var(--green);color:#fff;
font-size:11.5px;font-weight:750;border-radius:7px;padding:4px 10px;margin-top:7px}
.price-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:auto;padding-top:18px;font-size:10.8px;font-weight:700;color:var(--ink)}
.price-foot span{display:grid;gap:5px;justify-items:center;min-width:0;padding:0 4px;
border-left:1px solid var(--line-2);overflow-wrap:anywhere}
.price-foot span:first-child{border-left:0}
.price-foot svg{width:17px;height:17px;color:var(--navy)}
.includes-card,.compare-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-s)}
.compare-card{display:flex;flex-direction:column}
.compare-rows{flex:1;display:grid;align-content:space-evenly}
.includes-card h3,.compare-card h3{text-align:center;font-size:19px;margin-bottom:16px}
.includes-card .check-list{grid-template-columns:1fr;gap:9px;font-size:13.5px}
.compare-head{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;margin-bottom:14px}
.compare-head span{border-radius:9px;padding:9px 8px;font-size:11.5px;font-weight:750;text-align:center}
.compare-head span:first-child{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.compare-head b{font-size:12px;color:var(--muted)}
.compare-head span:last-child{background:var(--navy);color:#fff}
.compare-row{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;
padding:12px 0;border-top:1px solid var(--line-2);font-size:12.5px;font-weight:650}
.compare-row>span{display:flex;gap:8px;align-items:center;color:var(--muted);line-height:1.3}
.compare-row>span:last-child{color:var(--navy);font-weight:750}
.compare-row svg{width:17px;height:17px;flex:none}
.compare-row>span:last-child svg{color:var(--green)}
.compare-row b svg{width:15px;height:15px;color:var(--faint)}
.pricing-ctas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.pricing-ctas .btn{padding:17px 26px;font-size:16px}
.pricing-trust{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted);font-weight:650;
display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap}
.pricing-trust svg{width:16px;height:16px;color:var(--navy)}
.pricing-trust i{font-style:normal;color:var(--red)}
/* ─── 10 · Avis, CTA final, FAQ ───────────────────────────────────────── */
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:40px}
.avis-card{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;
padding:22px;min-height:250px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.avis-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.avis-card::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(4,14,30,.66),rgba(4,14,30,.88))}
.avis-card>*{position:relative;z-index:2}
.avis-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.avis-head b{font-size:16.5px;display:block}
.avis-head small{color:#EAF0F8;font-weight:600;font-size:12px}
.stars{color:var(--gold);display:flex;gap:3px;margin-bottom:11px}
.stars svg{width:16px;height:16px}
.avis-card blockquote{margin:0;font-size:13.8px;line-height:1.55;color:#EAF0F8}
.final-grid{display:grid;grid-template-columns:44fr 56fr;gap:26px;margin-top:44px;align-items:start}
.final-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);position:sticky;top:104px}
.final-card .ic{width:56px;height:56px;border-radius:16px;background:var(--panel);border:1px solid var(--line);
display:grid;place-items:center;color:var(--navy);margin-bottom:16px}
.final-card .ic svg{width:27px;height:27px}
.final-card h3{font-size:clamp(22px,2.1vw,29px)}
.final-card h3 .red{color:var(--red)}
.final-card>p{margin:12px 0 18px;font-size:14.5px;color:var(--muted)}
.final-card .btn{width:100%;margin-bottom:11px}
.final-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px;
border-top:1px solid var(--line-2);padding-top:16px;text-align:center;font-size:10.8px;font-weight:700;color:var(--navy)}
.final-mini svg{width:19px;height:19px;margin:0 auto 5px;color:var(--red)}
.final-mini .g svg{color:var(--green)}
.faq{display:grid;gap:9px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow-s)}
.faq summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
padding:15px 18px;font-weight:750;color:var(--navy);font-size:14.5px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 18px 16px;font-size:13.8px;color:var(--ink);line-height:1.65}
.faq details>div a{color:var(--red);font-weight:650;text-decoration:underline}
/* ─── Pied de page ────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);background:#fff;padding:52px 0 0;font-size:13px}
.footer-grid{display:grid;grid-template-columns:24fr 15fr 15fr 15fr 15fr 20fr;gap:26px}
.footer-brand img{width:218px}
.footer-brand p{margin-top:14px;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:30ch}
.footer h4{margin:4px 0 13px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.footer-grid a{display:block;padding:4.5px 0;color:var(--muted);font-weight:600}
.footer-grid a:hover{color:var(--red)}
.footer-wa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:17px;align-self:start}
.footer-wa .head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.footer-wa svg{width:26px;height:26px;color:var(--green);flex:none}
.footer-wa b{color:var(--navy);font-size:13.5px;line-height:1.3;display:block}
.footer-wa small{color:var(--muted);font-size:11.5px}
.footer-wa .btn{width:100%;margin-top:8px;background:var(--green);color:#fff;border-radius:9px;padding:10px;font-size:13px}
.footer-bottom{margin-top:40px;border-top:1px solid var(--line);padding:18px 0;
text-align:center;font-size:12px;color:var(--muted);font-weight:600}
.footer-bottom i{font-style:normal;margin:0 10px;color:var(--red)}
/* ─── Apparition au défilement ────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
/* Une apparition par translation peut momentanement pousser visuellement
un bloc sur le suivant pendant le defilement. Le fondu conserve le rythme
d'entree sans jamais modifier la geometrie ni creer de recouvrement. */
.reveal{opacity:0;transition:opacity .45s ease}
.reveal.is-in{opacity:1}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ─── Réactif ─────────────────────────────────────────────────────────── */
@media (max-width:1279px){
.nav{gap:22px}
.brand img{width:210px}
.metiers-grid{grid-template-columns:minmax(250px,30fr) 70fr}
.metiers-grid>div:first-child{grid-column:1;grid-row:auto}
.metiers-grid .metier-cards{grid-column:2;grid-row:auto}
.metiers-grid .rail{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(4,1fr)}
.metiers-grid .champs{grid-column:1/-1;grid-row:auto}
.sync-diagram{grid-template-columns:145px minmax(200px,1fr) 145px}
.sync-benefits{grid-column:1/-1;border-left:0;padding-left:0;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:18px}
.secu-grid{grid-template-columns:minmax(250px,34fr) 66fr}
.verify-card{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:center}
.accomp-grid{grid-template-columns:1fr 1fr}
.accomp-grid .chat-col{grid-column:1/-1}
}
@media (max-width:1279px){
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html.menu-open body{overflow:hidden}
.sec{padding:60px 0}
.topbar a{min-height:44px}
.header-in{position:relative;height:68px;gap:14px}
.brand img{width:196px}
.nav-burger{display:grid;flex:0 0 46px;margin-left:auto}
.nav{position:absolute;top:100%;left:50%;right:auto;width:100vw;
transform:translateX(-50%);background:#fff;flex-direction:column;
align-items:stretch;gap:0;padding:10px 24px max(16px,var(--safe-bottom));
border-bottom:1px solid var(--line);
box-shadow:0 18px 30px rgba(4,23,54,.18);display:none;
max-height:calc(100vh - 112px);max-height:var(--menu-max-height,calc(100dvh - 112px));
overflow-y:auto;overscroll-behavior:contain}
/* Le panneau ouvert occupe toute la hauteur disponible : aucun fragment
de la page ne reste visible sous les liens et ne semble leur appartenir. */
.nav.is-open{display:flex;
min-height:var(--menu-max-height,calc(100dvh - 112px))}
.nav a{padding:13px 2px;border-bottom:1px solid var(--line-2)}
.btn-dash span{display:none}
.btn-dash{width:46px;height:46px;flex:0 0 46px;padding:0}
.hero{min-height:0}
.hero-grid{padding:34px 0 8px}
.hero-copy{width:100%;min-width:0}
.hero-visual{position:relative;width:100%;aspect-ratio:auto}
.hero-visual>img,.hero-visual>picture,.hero-visual>picture>img{height:auto}
.hero-benefits{width:auto}
.hero-cta{flex-wrap:wrap;width:auto}
.sync-grid,.gestion-grid,.pilot-grid{grid-template-columns:1fr}
.hero{padding:42px 0 30px}
.hero-visual{max-width:640px;margin:14px auto 0}
.metiers-grid{grid-template-columns:1fr}
.metier-cards{grid-template-columns:repeat(3,1fr)}
.monitor .app,.tablet .app{flex-direction:column}
.monitor .app-side,.tablet .app-side{width:100%;padding:10px 12px}
.monitor .app-menu,.tablet .app-menu{display:none}
.app-cols{grid-template-columns:1fr!important}
.kpis{grid-template-columns:1fr 1fr}
.cw-kpis{grid-template-columns:1fr 1fr}
.app-top .app-search{display:none}
.metiers-grid .rail{grid-template-columns:repeat(2,1fr)}
.champs-grid{grid-template-columns:repeat(2,1fr)}
.shop-grid{grid-template-columns:1fr}
.navy-band{grid-template-columns:1fr 1fr;gap:20px}
.secu-grid{grid-template-columns:1fr}
.verify-card{grid-template-columns:1fr 1fr}
.accomp-grid{grid-template-columns:1fr}
.accomp-bottom{grid-template-columns:1fr}
.contact-card{grid-template-columns:1fr}
.pricing-grid{grid-template-columns:1fr}
.pricing-ctas{grid-template-columns:1fr}
.avis-grid{grid-template-columns:1fr}
.final-grid{grid-template-columns:1fr}
.band-3{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1/-1}
.footer-wa{grid-column:1/-1}
.sync-diagram{grid-template-columns:1fr 1fr}
.sync-diagram .fiche-col{grid-column:1/-1;grid-row:1}
.node::after{display:none}
.sync-benefits{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.wrap{padding:0 18px}
.hero-cta{display:grid;grid-template-columns:1fr;width:100%}
.hero-cta .btn{width:100%;padding:16px 14px;white-space:normal;font-size:14px}
.hero-benefits{grid-template-columns:1fr 1fr}
.hero-benefits span{border-right:0;border-bottom:1px solid var(--line-2)}
.hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.metier-cards{grid-template-columns:repeat(2,1fr)}
.metiers-grid .rail,.champs-grid,.check-2col{grid-template-columns:1fr}
.navy-band,.verify-card,.gains-row,.sync-benefits,.sync-diagram{grid-template-columns:1fr}
.final-mini{grid-template-columns:1fr 1fr}
.price-foot{grid-template-columns:1fr}
.price-foot span{border-left:0}
.footer-grid{grid-template-columns:1fr}
.topbar{font-size:12px}
/* Le pied de page canonique est en deux colonnes sur les autres pages.
Sur l'accueil mobile, ses deux listes Métiers deviennent une seule
liste continue et l'ensemble reste visuellement centré. */
#stage .lpf-foot{text-align:center}
#stage .lpf-brand img{margin-inline:auto}
#stage .lpf-brand p{margin-inline:auto}
#stage .lpf-grid>div:nth-child(5){margin-top:-26px}
#stage .lpf-grid>div:nth-child(5)>.lpf-title[aria-hidden="true"]{display:none}
#stage .lpf-wa-head{justify-content:center;text-align:left}
#accompagnement .contact-form .btn{width:100%}
}
@media (max-width:360px){
.header-in{gap:8px}
.brand img{width:150px;margin-left:0}
#tarifs .price-m{font-size:46px}
#tarifs .price-m small{font-size:14px}
}
/* ═══ LA SCENE (Grèbe-83) — canevas 1672px mis a l'echelle d'un seul facteur.
Le JS pose #stage{zoom:vw/1672} ; la regle calc() sert de secours sans JS.
Sous 1280px la scene s'efface : l'empilement mobile natif reprend. ═══ */
.viewport-shell{width:100%;overflow-x:clip}
@media (min-width:1280px){
#stage{width:1672px;zoom:calc(100vw / 1672px)}
/* les tailles en vw se figent au canevas : plus de dependance au viewport */
h1{font-size:48px}
h2{font-size:47px}
.hero{min-height:817px}
.hero-visual{max-width:none}
}
@media (max-width:1279px){
#stage{width:auto;zoom:1}
}
/* ══════════ Corrections mesurées (ex-fixes-bundle.css) ══════════ */
/* === accompagnement.css === */
/* ═══════════════════════════════════════════════════════════════════════
CORRECTIONS · section 08 « Accompagnement » (#accompagnement)
Écarts mesurés sur visual-08.png (grille 1672 px). Concaténé APRÈS
homepage-v4.css — toutes les règles sont scopées à #accompagnement.
Géométrie maquette : liste 518 px · gouttière 77 px · carte 455 px ·
téléphone 344×658 px (x=1168). [Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* Fond de section : blanc pur (mesuré 254,254,254) — les cartes gardent
leur filet gris pour rester lisibles sur blanc */
#accompagnement{background:#fff}
#accompagnement .support-list a,
#accompagnement .accomp-bottom>div{border-color:#E5E7EB}
/* ── Grille : 518 / 455 / téléphone, gouttière 77 px ──────────────────── */
/* Proportions exactes de la maquette (518+455+441 = zone utile 1568 px du
.wrap à pleine largeur) ; le téléphone se cale à gauche de sa colonne */
#accompagnement .accomp-grid{grid-template-columns:518fr 455fr 441fr;column-gap:77px}
/* ── Titre : capitale 28 px → corps 38 px max (Fraunces a une chasse plus
large que la fonte maquette : 38 px = capitale ~28 px ET la ligne rouge
tient sur UNE ligne, mesurée 572 px, en débordant dans la gouttière
comme sur la maquette) */
#accompagnement h2{font-size:38px;line-height:1.16;
width:max-content;max-width:calc(100% + 64px)}
/* Paragraphe d'introduction : le
du gabarit force la 3e ligne
(« Vous avancez plus vite, sans rester bloqué. ») comme la maquette */
#accompagnement .lead{margin-top:16px}
/* Ligne WhatsApp : icône 30 px (mesurée 31 px sur la maquette) */
#accompagnement .wa-line svg{width:30px;height:30px}
/* ── Liste des 5 cartes d'aide : pas 72 px, gap 3 px, icônes 30 px ────── */
#accompagnement .support-list{gap:3px;margin-top:16px}
#accompagnement .support-list a{min-height:69px;padding:11px 20px 11px 40px;gap:24px}
#accompagnement .support-list a>svg:not(.chev){width:30px;height:30px}
/* Chevron « > » épais navy en fin de carte (remplace la flèche grise) */
#accompagnement .support-list .chev{width:13px;height:13px;color:#1E293B}
/* ── Carte centrale : 455 px, photo détourée 14 px, titre 26 px ───────── */
#accompagnement .team-card{width:100%;max-width:455px}
#accompagnement .team-card img{width:calc(100% - 8px);margin:4px 4px 0;
border-radius:14px;aspect-ratio:447/267;object-fit:cover}
#accompagnement .team-card h3{font-size:26px;line-height:1.25;margin-bottom:8px}
#accompagnement .team-card>div{padding:18px 20px 20px}
#accompagnement .team-card p{font-size:14.5px;margin-bottom:14px}
/* Bouton rouge : 58 px de haut (maquette 414×58) */
#accompagnement .team-card .btn{height:58px;padding:0 22px}
/* Séparateur « OU » : pastille circulaire blanche sur une ligne CONTINUE */
#accompagnement .ou{position:relative;justify-content:center;gap:0;margin:9px 0;color:#1E293B}
#accompagnement .ou::before{content:"";position:absolute;left:0;right:0;top:50%;
border-top:1px solid var(--line);flex:none}
#accompagnement .ou::after{display:none}
#accompagnement .ou span{position:relative;z-index:1;width:44px;height:44px;
display:grid;place-items:center;background:#fff;border:1px solid #E2E8F0;
border-radius:50%;color:#1E293B;font-weight:700;font-size:12.5px}
/* Boîte verte : grande icône WhatsApp 55 px, 348×95, « Disponible 7j/7 »
en vert */
#accompagnement .wa-num{display:flex;align-items:center;justify-content:center;
gap:16px;max-width:348px;min-height:95px;margin:0 auto;padding:10px 16px}
#accompagnement .wa-num .wa-ic{width:55px;height:55px;flex:none;color:var(--green)}
#accompagnement .wa-num b{font-size:24px;line-height:1.15;margin:3px 0}
#accompagnement .wa-num small{font-size:13px;line-height:1.3}
#accompagnement .wa-num i{color:#007A34;font-weight:700;font-size:12px;line-height:1.3}
/* ── Mockup iPhone réaliste : 344×658, cadre sombre, encoche, x=1168 ──── */
#accompagnement .chat-col{width:100%}
#accompagnement .chat-phone{position:relative;width:100%;max-width:344px;height:658px;
margin:0;padding:0;display:flex;flex-direction:column;background:#0B0D11;
border:13px solid #17191D;border-radius:52px;filter:none;
box-shadow:0 0 0 2.5px #6A6F78,0 24px 44px rgba(4,23,54,.28)}
/* Boutons latéraux (silencieux + volumes à gauche, marche à droite) */
#accompagnement .ph-side{position:absolute;width:4px;background:#3A3E45;border-radius:2px}
#accompagnement .ph-mute{left:-18px;top:104px;height:24px}
#accompagnement .ph-vol1{left:-18px;top:152px;height:44px}
#accompagnement .ph-vol2{left:-18px;top:206px;height:44px}
#accompagnement .ph-power{right:-18px;top:168px;height:72px}
#accompagnement .chat-screen{flex:1;min-height:0;display:flex;flex-direction:column;
background:#fff;border-radius:39px;overflow:hidden}
/* Barre d'état : 11:30 + signal, wifi, batterie, sur fond blanc */
#accompagnement .ph-status{position:relative;display:flex;align-items:center;
justify-content:space-between;background:#fff;padding:13px 24px 6px;
font:750 13px/1 var(--fb);color:#0B1220}
#accompagnement .ph-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);
width:126px;height:26px;background:#0B0D11;border-radius:0 0 15px 15px}
#accompagnement .ph-notch::after{content:"";position:absolute;right:17px;top:8px;
width:8px;height:8px;border-radius:50%;background:#101B33}
#accompagnement .ph-status-ic{display:flex;align-items:center;gap:5px}
#accompagnement .ph-status-ic svg{display:block}
#accompagnement .s-cell{width:16px;height:16px}
#accompagnement .s-wifi{width:15px;height:15px}
#accompagnement .s-batt{width:24px;height:20px}
/* En-tête WhatsApp : FOND BLANC, flèche retour, badge vérifié vert,
2 icônes d'appel (remplace l'en-tête navy) */
#accompagnement .chat-head{background:#fff;color:#0B1220;gap:9px;
padding:6px 14px 10px;border-bottom:1px solid #E8E8E8}
#accompagnement .ch-back{width:20px;height:20px;flex:none}
#accompagnement .chat-head .app-roundel{width:34px;height:34px;border-color:#F2F2F2}
#accompagnement .ch-name{min-width:0}
#accompagnement .ch-name b{display:flex;align-items:center;gap:5px;
color:var(--navy);font-size:13.5px;line-height:1.2;white-space:nowrap}
#accompagnement .ch-badge{width:14px;height:14px;flex:none}
#accompagnement .chat-head small{color:#667781;font-size:10px}
#accompagnement .ch-calls{margin-left:auto;display:flex;align-items:center;gap:16px}
#accompagnement .ch-calls svg{width:20px;height:20px}
/* Fil de discussion : beige TRÈS clair, bulles ≤ 210 px, coches bleues */
#accompagnement .chat-body{flex:1;min-height:0;overflow:hidden;
background:#F1EEE8;padding:11px 12px;gap:6px;font-size:10.5px;line-height:1.4;
align-content:start}
#accompagnement .bub{max-width:210px;padding:6px 10px;border-radius:10px}
#accompagnement .bub.me{background:#D9F6CF}
#accompagnement .bub time{font-size:8.5px}
#accompagnement .ck{font-style:normal;color:#0A6E8E;letter-spacing:-.08em}
/* Pièce jointe : icône PDF carré rouge PLEIN, « PDF » blanc, coin plié */
#accompagnement .bub-file{max-width:210px}
#accompagnement .bub-file .ic{position:relative;width:34px;height:34px;
background:#DC2626;color:#fff;border-radius:8px;
font:800 9.5px/1 var(--fb);letter-spacing:.02em;display:grid;place-items:center}
#accompagnement .bub-file .ic::after{content:"";position:absolute;top:0;right:0;
width:9px;height:9px;border-radius:0 8px 0 5px;
background:linear-gradient(225deg,#fff 48%,#B91C1C 52%)}
/* Barre de saisie (+ · Message + émoji · caméra · micro) et barre home */
#accompagnement .chat-input{display:flex;align-items:center;gap:11px;
background:#fff;padding:10px 13px 6px;color:#0B1220}
#accompagnement .chat-input svg{flex:none}
#accompagnement .ci-plus{width:22px;height:22px}
#accompagnement .ci-field{flex:1;min-width:0;display:flex;align-items:center;
justify-content:space-between;gap:8px;border:1px solid #DDE1E5;border-radius:17px;
padding:6px 8px 6px 13px;color:#5E6A80;font-size:12.5px;line-height:1.2}
#accompagnement .ci-emoji{width:19px;height:19px;color:#6B7680}
#accompagnement .ci-cam,#accompagnement .ci-mic{width:21px;height:21px}
#accompagnement .ph-home{background:#fff;padding:5px 0 9px}
#accompagnement .ph-home i{display:block;width:126px;height:5px;border-radius:3px;
background:#0B0D11;margin:0 auto}
/* ── Rangée du bas : cartes 95 px, pastilles 52 px, ~24 px sous la grille */
#accompagnement .accomp-bottom{margin-top:24px;gap:22px}
#accompagnement .accomp-bottom>div{min-height:95px;padding:14px 24px;align-items:center}
#accompagnement .accomp-bottom .ic{width:52px;height:52px}
#accompagnement .accomp-bottom .ic svg{width:26px;height:26px}
#accompagnement .accomp-bottom b{font-size:16px;margin-bottom:3px}
#accompagnement .accomp-bottom p{font-size:13.5px}
/* ── Réactif : on répète les paliers de la feuille commune (nos règles
plus spécifiques les écraseraient sinon), puis on annule la géométrie
fixe sous 1280 px ────────────────────────────────────────────────────── */
@media (max-width:1279px){
#accompagnement .accomp-grid{grid-template-columns:1fr 1fr;column-gap:26px}
#accompagnement .chat-col{grid-column:1/-1}
#accompagnement .chat-phone{margin:0 auto}
}
@media (max-width:1279px){
#accompagnement .accomp-grid{grid-template-columns:1fr}
#accompagnement .accomp-bottom{grid-template-columns:1fr}
}
@media (max-width:1279px){
#accompagnement h2{width:auto;max-width:100%}
#accompagnement .team-card{max-width:none}
#accompagnement .chat-phone{height:auto;max-width:min(344px,100%)}
#accompagnement .chat-body{overflow:visible}
#accompagnement .accomp-bottom>div{min-height:0}
#accompagnement .support-list a{padding-left:20px;gap:16px}
}
/* === boutique.css === */
/* ═══════════════════════════════════════════════════════════════════════
FIX 05 · BOUTIQUE OFFERTE — écarts mesurés vs visual-05.png (grille 1672px)
Concaténé APRÈS homepage-v4.css. Toutes les règles sont scopées #boutique.
[Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* Fond blanc cassé de la section (écart : fond) */
#boutique{background:#FBFCFD}
/* Conteneur : contenu 1594px (x39→x1633 sur la grille 1672) (écart : marges) */
#boutique .wrap{max-width:1672px;padding:0 39px}
/* Grille 2 colonnes DÈS LE TITRE : gauche = titre + intro + vignettes,
droite = aside 331px calé en haut (écarts : position + largeur colonne) */
#boutique .shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 331px;
column-gap:35px;align-items:start}
#boutique .shop-layout>*{min-width:0}
#boutique .shop-rail{align-self:start;gap:21px}
/* Bloc titre + intro dans la colonne gauche (écarts : centrage titre,
largeur intro, ligne en gras, espacement intro→vignettes) */
#boutique .intro-block{margin-bottom:16px}
#boutique h2 .red{font-size:1.1em}
#boutique .intro-block .lead{max-width:830px}
#boutique .intro-block .lead-line{max-width:920px;margin-top:14px}
#boutique .lead-note{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* Vignettes : largeurs inégales 374/432/392, gouttières 15px, hauteur ~413px
donnée par le ratio naturel des captures (écart : taille vignettes) */
#boutique .shop-previews{grid-template-columns:374fr 432fr 392fr;gap:15px}
/* Cartes latérales : pictogramme navy 40px + titre serif 24px sur 1-2 lignes
(écart : en-têtes des cartes) */
#boutique .shop-card{padding:22px}
#boutique .shop-card h3{font-size:24px;line-height:1.15;gap:14px;margin-bottom:16px}
#boutique .shop-card h3 svg{width:40px;height:40px;color:var(--navy)}
/* Coches cerclées rouges 16px devant les 12 items (écart : coches) */
#boutique .check-2col svg{width:16px;height:16px;margin-top:1px}
/* « Tout est déjà dedans » : 2 colonnes × 3 lignes, pictogrammes rouges
dédiés, libellés semi-gras navy (écart : disposition interne) */
#boutique .check-2col.inclus{gap:14px 20px}
#boutique .check-2col.inclus li{font-size:13.2px;font-weight:600;color:var(--navy)}
#boutique .check-2col.inclus svg{width:17px;height:17px;margin-top:0}
/* Bandeau navy : pastilles 68px, titres 20px, descriptions 15px sur 2 lignes,
séparateurs verticaux clairs (écarts : bandeau + séparateurs) */
#boutique .navy-band{margin-top:29px;padding:40px 0;gap:0;
grid-template-columns:repeat(4,1fr)}
#boutique .navy-band>div{padding:6px 44px;gap:16px}
#boutique .navy-band>div+div{border-left:1px solid rgba(255,255,255,.22)}
#boutique .navy-band .ic{width:68px;height:68px}
#boutique .navy-band .ic svg{width:30px;height:30px}
#boutique .navy-band b{font-size:20px;margin-bottom:6px}
#boutique .navy-band p{font-size:15px;line-height:1.6;max-width:240px}
/* ═══ Mobile / tablette : on annule la géométrie fixe ═══ */
@media (max-width:1279px){
#boutique .wrap{padding:0 26px}
#boutique .shop-layout{grid-template-columns:1fr;row-gap:26px}
#boutique .navy-band{grid-template-columns:1fr 1fr;gap:22px;padding:26px 20px}
#boutique .navy-band>div{padding:0 6px;border-left:0}
#boutique .navy-band .ic{width:52px;height:52px}
#boutique .navy-band .ic svg{width:24px;height:24px}
#boutique .navy-band b{font-size:16px}
#boutique .navy-band p{font-size:13px;max-width:none}
#boutique .shop-card h3{font-size:20px}
#boutique .shop-card h3 svg{width:32px;height:32px}
}
@media (max-width:560px){
#boutique .wrap{padding:0 18px}
#boutique .navy-band{grid-template-columns:1fr}
#boutique .intro-block .lead-line{max-width:none}
}
/* === faq.css === */
/* ═══════════════════════════════════════════════════════════════════════
CORRECTIONS SECTION 10 (avis + CTA final + FAQ) — écarts mesurés entre
la maquette visual-10.png et le rendu (grille 1672px). Chargé APRÈS
homepage-v4.css : toutes les règles sont scopées à #faq.
═══════════════════════════════════════════════════════════════════════ */
/* Fond de section blanc (maquette ~#FEFEFE, rendu gris bleuté) */
#faq.sec-panel{background:#fff}
/* Conteneur : contenu 1334px centré (1334 + 2×26px de padding du .wrap) */
#faq .wrap{max-width:1386px}
/* Titre : ligne 1 navy PLUS PETITE (~408px de large) que la ligne 2 rouge
(~551px). À 1672px de viewport : 37px et 43px. */
#faq h2{font-size:37px;line-height:1.2}
#faq h2 .red{font-size:43px}
/* Cartes d'avis : 3×436px (colonnes 1fr du conteneur 1334), gap 11px,
hauteur ~210px, citation calée en bas, filet + ombre discrète.
Titre → cartes : 20px. */
#faq .avis-grid{margin-top:20px;gap:11px}
#faq .avis-card{min-height:210px;padding:20px 22px;border:1px solid #E5E8EE;
box-shadow:0 2px 6px rgba(15,33,73,.06)}
#faq .avis-card blockquote{margin-top:auto}
/* En-tête de carte d'avis : logo à gauche, nom + sous-titre à droite */
#faq .avis-head{gap:16px}
#faq .avis-logo{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover}
/* Carthago : wordmark serif espacé (pas de logo) */
#faq .avis-wordmark{font-family:var(--fd);font-weight:600;font-size:18px;
letter-spacing:.15em;text-transform:uppercase;line-height:1.25}
/* Étoiles : glyphes ~17px, rangée ~100px */
#faq .stars{gap:4px}
#faq .stars svg{width:17px;height:17px}
/* Rangée CTA + FAQ : 650px / 675px sur 1334, gap 10px, à 17px des avis */
#faq .final-grid{grid-template-columns:650fr 675fr;gap:10px;margin-top:17px}
/* ── Carte CTA « Prêt à centraliser » ─────────────────────────────────── */
#faq .final-card{padding:24px 28px;border:1px solid #E5E8EE;
box-shadow:0 2px 6px rgba(15,33,73,.06)}
#faq .final-flex{display:flex;align-items:center;gap:26px}
#faq .final-illu{flex:none;width:140px;height:auto;color:var(--navy)}
#faq .final-copy{flex:1;min-width:0}
#faq .final-card h3{font-size:24px}
#faq .final-copy p{margin:8px 0 14px;font-size:12.5px;color:var(--muted);line-height:1.55}
#faq .final-copy .prix-rouge{color:var(--red)}
/* Boutons : 391×38, sans halo ; secondaire blanc, filet gris, texte navy */
#faq .final-card .btn{width:391px;max-width:100%;height:38px;padding:0 16px;
font-size:14px;border-radius:10px;margin-bottom:10px;box-shadow:none}
#faq .final-card .btn svg{width:17px;height:17px}
#faq .final-card .btn-wa{background:#fff;color:var(--navy);
border:1px solid #D5DAE3;margin-bottom:0}
#faq .final-card .btn-wa:hover{background:#F7F9FC}
/* Les 4 arguments : icône 22px à GAUCHE du libellé, texte aligné à gauche,
filets verticaux entre items ; cadeau rouge, les autres navy */
#faq .final-mini{grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;
border-top:0;padding-top:4px;text-align:left;font-size:11.5px}
#faq .final-mini span{display:flex;align-items:center;gap:10px;
padding:2px 12px;border-left:1px solid var(--line-2)}
#faq .final-mini span:first-child{border-left:0;padding-left:0}
#faq .final-mini span .txt{display:block;padding:0;border-left:0}
#faq .final-mini svg{width:22px;height:22px;margin:0;flex:none;color:var(--navy)}
#faq .final-mini span:first-child svg{color:var(--red)}
#faq .final-mini .g svg{color:var(--navy)}
/* ── FAQ : UNE carte, rangées [question | réponse courte | chevron] ───── */
#faq .faq{display:block;background:#fff;border:1px solid #E5E8EE;border-radius:14px;
box-shadow:0 2px 6px rgba(15,33,73,.06);overflow:hidden;padding:6px 0}
#faq .faq details{background:transparent;border:0;border-radius:0;box-shadow:none}
#faq .faq details+details{border-top:1px solid #EEF0F4}
#faq .faq summary{display:grid;grid-template-columns:calc(42% - 12px) 1fr 14px;
column-gap:12px;align-items:center;min-height:32px;padding:7px 26px;font-size:12.5px;line-height:1.3}
#faq .faq-q{font-weight:750;color:var(--navy)}
#faq .faq-a{font-weight:450;color:var(--muted)}
/* chevron gris-bleu discret (au lieu du rouge) */
#faq .faq summary::after{margin-left:0;justify-self:end;align-self:center;
width:8px;height:8px;border-right:1.8px solid #8B98AD;border-bottom:1.8px solid #8B98AD}
#faq .faq details>div{padding:2px 26px 14px;font-size:13.3px}
/* ── Mobile / colonnes étroites : géométrie fixe annulée ──────────────── */
@media (max-width:1279px){
#faq .final-grid{grid-template-columns:1fr;gap:14px}
#faq .final-card{position:static;top:auto}
#faq .final-flex{flex-direction:column;align-items:flex-start;gap:14px}
#faq .final-illu{width:120px}
#faq .final-card .btn{width:100%;min-height:48px;padding:12px 16px}
#faq .final-mini{grid-template-columns:1fr 1fr;gap:10px 0}
#faq .final-mini span{padding:2px 10px}
#faq .final-mini span:nth-child(odd){border-left:0;padding-left:0}
#faq .avis-card{min-height:0}
#faq .faq summary{grid-template-columns:1fr 14px;row-gap:2px;padding:10px 18px}
#faq .faq-a{grid-column:1;grid-row:2}
#faq .faq summary::after{grid-column:2;grid-row:1}
#faq .faq details>div{padding:2px 18px 14px}
}
/* ═══ correctif Grèbe-83 : le logo d'enseigne n'est pas un fond de carte ═══
La règle du socle .avis-card img{position:absolute;inset:0;...} étirait
AUSSI le logo sur toute la carte (taches blanches, nom recouvert). */
#faq .avis-card img.avis-logo{position:static;inset:auto;width:56px;height:56px;
object-fit:cover;border-radius:12px;flex:none;z-index:2;background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.35)}
#faq .avis-head{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
#faq .avis-head b{display:block}
/* === fonctionnalites.css === */
/* ═══════════════════════════════════════════════════════════════════════
CORRECTIONS MESURÉES — section 02 · Fonctionnalités (#fonctionnalites)
Référence : visual-02.png, grille 1672 px. Chaque règle est scopée à
#fonctionnalites pour ne pas fuir sur les autres sections.
Concaténé APRÈS homepage-v4.css : gagne la cascade à spécificité égale.
[Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* ── Écart 12 · marge gauche du contenu : x≈46 sur la grille 1672
(26px de marge auto du .wrap + 20px de padding = 46px) ─────────── */
#fonctionnalites .wrap{padding-inline:20px}
/* ── Écart 13 · interligne du titre : bloc de 3 lignes ≈164px ───────── */
#fonctionnalites h2{line-height:1.16}
/* ── Écart 8 · paragraphe d'intro : césure en 4 lignes ──────────────── */
#fonctionnalites .lead{max-width:402px}
/* ── Écart 7 · « Moins de ressaisie… » en graisse normale
(le a été retiré du twig ; garde-fou si réintroduit) ──── */
#fonctionnalites .lead .lead-strong{font-weight:400;color:var(--ink)}
/* ── Écart 6 · mini-cartes « Conforme & sécurisé » / « Données
protégées » : grande icône rouge à gauche, titre à côté sur
2 lignes, description dessous, trait rouge souligné en bas ─────── */
#fonctionnalites .sync-side-cards{max-width:420px;gap:22px;margin-top:34px}
#fonctionnalites .mini-card{
display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto 1fr;
column-gap:14px;align-items:center;padding:20px 18px 16px;min-height:168px}
#fonctionnalites .mini-card svg{width:52px;height:52px;margin:0;grid-row:1}
#fonctionnalites .mini-card b{font-size:16px;line-height:1.25;margin:0}
#fonctionnalites .mini-card p{grid-column:1/-1;grid-row:2;margin:12px 0 0;
font-size:13.5px;line-height:1.5;color:#475569}
#fonctionnalites .mini-card::after{content:"";grid-column:1/-1;grid-row:3;
width:33px;height:3px;background:var(--red);margin-top:16px;align-self:end}
/* ── Écarts 1 + 2 + 11 · cartes du pipeline : icône navy 44px à
GAUCHE, titre à droite, sous-titre dessous ; rouge réservé aux
micro-accents (pastille du Devis, € de la Facture) ──────────────── */
#fonctionnalites .node{
display:grid;grid-template-columns:44px 1fr;column-gap:14px;
align-items:center;align-content:center;padding:12px 14px;min-height:90px}
#fonctionnalites .node svg{width:44px;height:44px;margin:0;grid-row:1/3;
color:#02112D}
#fonctionnalites .node b{grid-column:2;font-size:14px;line-height:1.25}
#fonctionnalites .node small{grid-column:2;font-size:12px;line-height:1.35;
margin-top:2px;color:var(--muted)}
#fonctionnalites .node svg .ic-acc{stroke:var(--red)}
#fonctionnalites .node svg .ic-dot{fill:var(--red);stroke:none}
#fonctionnalites .sync-col-r .node{min-height:118px}
/* ── Écarts 3 + 4 + 14 · fiche produit : photo pleine largeur sans
cadre (fond #F7F7F9, coins arrondis en haut, montre ≈57% de la
largeur), lignes au pas de ~47px, libellés #475569 ──────────────── */
#fonctionnalites .fiche-card{padding:0;overflow:hidden}
#fonctionnalites .fiche-card figure{margin:0;padding:0;border:0;
border-radius:var(--r) var(--r) 0 0;background:#F7F7F9;
display:grid;place-items:center;aspect-ratio:352/326}
#fonctionnalites .fiche-card figure img{width:62%;height:auto;
max-height:92%;object-fit:contain}
#fonctionnalites .fiche-rows{padding:6px 22px 12px}
#fonctionnalites .fiche-rows div{padding:13.5px 2px;font-size:13.5px}
#fonctionnalites .fiche-rows div:first-child{border-top:0}
#fonctionnalites .fiche-rows span{color:#475569}
/* ── Écart 5 · connecteurs SVG : cachés par défaut, montrés quand la
géométrie large est active (voir media ci-dessous) ──────────────── */
#fonctionnalites .sync-links{display:none}
/* ── Écarts 6bis (typo bénéfices) · valables à toutes largeurs ──────── */
#fonctionnalites .sync-benefits>div{display:grid;
grid-template-columns:48px 1fr;column-gap:20px;align-content:start}
#fonctionnalites .sync-benefits svg{width:48px;height:48px;margin:0;
grid-row:1/3;align-self:start}
#fonctionnalites .sync-benefits b{font-size:16px;line-height:1.3;margin:0}
#fonctionnalites .sync-benefits p{grid-column:2;margin:6px 0 0;
font-size:13.5px;line-height:1.5;color:#475569}
/* ═══ GÉOMÉTRIE LARGE (≥1181px) — proportions mesurées sur la grille
1672 : colonnes 189 | 56 | 352 | 55 | 175 | 78 | 242 px, soit
16.5% | 4.9% | 30.7% | 4.8% | 15.2% | 6.8% | reste.
En dessous de 1181px, la feuille commune reprend la main. ═══ */
@media (min-width:1280px){
/* Écart 8bis · colonne de texte ~420px, le diagramme prend le reste */
#fonctionnalites .sync-grid{
grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:36px}
/* Écarts 1 + 3 + 5 + 10 · grille du diagramme avec gouttières
réelles de ~56px pour les connecteurs coudés */
#fonctionnalites .sync-diagram{
grid-template-columns:16.5% 4.9% 30.7% 4.8% 15.2% 6.8% minmax(0,1fr);
gap:0;align-items:stretch}
#fonctionnalites .sync-col-l{grid-column:1;grid-row:1}
#fonctionnalites .sync-links-l{grid-column:2;grid-row:1}
#fonctionnalites .fiche-col{grid-column:3;grid-row:1}
#fonctionnalites .sync-links-r{grid-column:4;grid-row:1}
#fonctionnalites .sync-col-r{grid-column:5;grid-row:1}
#fonctionnalites .sync-benefits{grid-column:7;grid-row:1}
/* Écart 10 · rythme vertical : cartes réparties sur la hauteur de la
fiche centrale (~628px), écart ≥38px */
#fonctionnalites .sync-col{display:flex;flex-direction:column;
justify-content:space-between;gap:38px}
/* Écart 5 · connecteurs pointillés coudés avec flèches, dans les
gouttières ; remplacent les petits tirets .node::after */
#fonctionnalites .node::after{display:none}
#fonctionnalites .sync-links{display:block;position:relative;min-height:0}
#fonctionnalites .sync-links svg{position:absolute;inset:0;
width:100%;height:100%}
/* Écart 6ter · colonne bénéfices : 4 blocs répartis sur la hauteur,
séparés par un filet gris pleine largeur de colonne */
#fonctionnalites .sync-benefits{display:flex;flex-direction:column;
gap:0;padding-left:28px}
#fonctionnalites .sync-benefits>div{flex:1 1 0;padding-top:26px}
#fonctionnalites .sync-benefits>div:first-child{padding-top:0}
#fonctionnalites .sync-benefits>div:not(:last-child){
border-bottom:1px solid #E2E8F0}
}
/* Entre 1181 et 1420px les cartes sont étroites : icône réduite pour
laisser la place au titre */
@media (min-width:1280px) and (max-width:1420px){
#fonctionnalites .node{grid-template-columns:36px 1fr;column-gap:10px;
padding:10px 12px}
#fonctionnalites .node svg{width:36px;height:36px}
}
/* ═══ SÉCURITÉ MOBILE ET TABLETTE (≤1279px) : aucune
géométrie fixe ne doit déborder — la feuille commune gère la grille,
on adapte seulement nos tailles internes ═══ */
@media (max-width:1279px){
#fonctionnalites .node{grid-template-columns:34px 1fr;column-gap:10px;
min-height:0;padding:11px 12px}
#fonctionnalites .node svg{width:34px;height:34px}
#fonctionnalites .sync-col-r .node{min-height:0}
}
@media (max-width:1279px){
#fonctionnalites .lead{max-width:none}
#fonctionnalites .sync-side-cards{max-width:none}
#fonctionnalites .mini-card{min-height:0}
#fonctionnalites .sync-benefits svg{width:38px;height:38px}
#fonctionnalites .sync-benefits>div{grid-template-columns:38px 1fr;
column-gap:14px}
#fonctionnalites .fiche-card figure{aspect-ratio:auto;
padding:18px 0;min-height:260px}
#fonctionnalites .fiche-card figure img{width:auto;max-width:60%;
max-height:300px}
}
@media (max-width:560px){
/* deux mini-cartes côte à côte ne tiennent plus : on empile */
#fonctionnalites .sync-side-cards{grid-template-columns:1fr;gap:14px}
#fonctionnalites .mini-card{min-height:0}
}
/* === gestion.css === */
/* ═══════════════════════════════════════════════════════════════════════
CORRECTIONS SECTION 03 · GESTION (#gestion) — écarts mesurés maquette
visual-03.png. Chaque règle est scopée à #gestion : rien ne fuit sur
les autres sections. Concaténé APRÈS homepage-v4.css.
[Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* ── Marge haute : titre ~28px sous l'en-tête ─────────────────────────── */
#gestion.sec{padding-top:30px}
/* ── Grille : moniteur élargi à ~935px (55,9 % de 1672) ───────────────── */
#gestion .gestion-grid{grid-template-columns:minmax(340px,38.6fr) 61.4fr;gap:40px}
/* ── Intro : 4 lignes, interligne 1.45, lignes jusqu'à 540px ──────────── */
#gestion .lead{line-height:1.45;max-width:540px}
/* ── Soulignement rouge sous le bloc gras ─────────────────────────────── */
#gestion .accent-bar{width:60px;height:4px;background:#E11D2E;margin-top:13px;border-radius:2px}
/* ── Grille des 15 cartes : 565px, cartes ~134×88, icônes 34px ────────── */
#gestion .tiles{max-width:565px;gap:14px;margin-top:24px}
#gestion .tiles article{min-height:88px;padding:14px 6px;display:flex;flex-direction:column;
align-items:center;justify-content:center}
#gestion .tiles article svg{width:34px;height:34px;margin:0 0 10px;color:#0B2447}
#gestion .tiles article.t-red svg{color:#E11D2E}
/* ── Pied du moniteur : colonne trapézoïdale + socle (façon iMac) ─────── */
#gestion .m-neck{width:180px;height:52px;margin:0 auto;
background:linear-gradient(180deg,#15181f,#2b303b);
clip-path:polygon(20% 0,80% 0,81% 55%,100% 100%,0 100%,19% 55%)}
#gestion .m-base{width:240px;height:16px;margin:-2px auto 0;border-radius:50%;background:#15181f}
/* ── Barre latérale : 143px, navy uni, pilule bleu clair, pas ~35px ───── */
#gestion .monitor .app-side{width:143px;background:#042B63;padding:12px 8px;gap:2px}
#gestion .monitor .app-brand{font-size:11px;gap:7px;padding:2px 4px 12px}
#gestion .monitor .app-brand small{font-size:8.6px}
#gestion .monitor .app-roundel{width:22px;height:22px}
#gestion .monitor .app-menu a{padding:10.5px 8px;font-size:11px;gap:8px;color:#DCE6F5}
#gestion .monitor .app-menu .on{background:rgba(160,190,230,.45);border-radius:8px;color:#fff}
/* ── Cartes KPI : libellé sur une seule ligne ─────────────────────────── */
#gestion .kpi small{white-space:nowrap;font-size:9.3px}
/* ── Panneau donut : disque 128px à gauche, légende en colonne à droite ─ */
#gestion .g-donutp{display:flex;flex-direction:column}
#gestion .g-donut{flex:1;display:flex;gap:12px;align-items:center;min-width:0}
#gestion .g-disc{width:128px;height:128px;flex:none;border-radius:50%;position:relative;
background:conic-gradient(#3077E2 0 32.4%,#55B29A 0 56.5%,#A9C662 0 75.2%,
#F79A4E 0 87.5%,#DA6FA7 0 95.4%,#6F5CC3 0)}
#gestion .g-disc>span{position:absolute;inset:29px;border-radius:50%;background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#gestion .g-disc b{font-size:11.5px;font-weight:800;color:var(--navy);white-space:nowrap;letter-spacing:-.01em}
#gestion .g-disc small{font-size:9.5px;font-weight:600;color:var(--muted)}
#gestion .g-leg{flex:1;min-width:0;margin:0;padding:0;list-style:none;display:grid;gap:7px;
font-size:8.6px;font-weight:650;color:var(--ink)}
#gestion .g-leg li{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
#gestion .g-leg i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal}
#gestion .g-leg li>span{margin-left:auto;padding-left:6px;color:var(--muted)}
/* ── Panneau courbe : sélecteur, axes gradués, trait fin sans aplat ───── */
#gestion .g-chart-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
#gestion .g-chart-head h4{flex:1;margin:0}
#gestion .g-select{flex:none;display:inline-flex;align-items:center;gap:5px;background:#fff;
border:1px solid var(--line);border-radius:7px;padding:4px 8px;
font-size:9.5px;font-weight:650;color:var(--ink)}
#gestion .g-plot{flex:1;display:flex;gap:8px;min-height:0}
#gestion .g-y{flex:none;display:flex;flex-direction:column;justify-content:space-between;
align-items:flex-end;font-size:8.6px;color:var(--muted);padding-bottom:17px}
#gestion .g-area{flex:1;min-width:0;display:flex;flex-direction:column}
#gestion .g-area svg{width:100%;flex:1;min-height:90px}
#gestion .g-x{display:flex;justify-content:space-around;font-size:8.6px;color:var(--muted);padding-top:4px}
/* ── Listes : vignettes 28px, variation verte, montant négatif, liens ─── */
#gestion .g-listpanel{display:flex;flex-direction:column}
#gestion .g-listpanel .rowlist{flex:1}
#gestion .rowlist .ph{width:28px;height:28px}
#gestion .g-up{font-style:normal;font-size:8.8px;font-weight:750;color:var(--green)}
#gestion .rowlist .g-neg{color:#DC2626}
#gestion .g-link{display:block;text-align:center;font-size:11px;font-weight:700;color:#2563EB;
border-top:1px solid var(--line-2);margin-top:6px;padding:8px 0 1px;cursor:default}
#gestion .badge.g-orange{background:#FDF1E3;color:#EA8A2B}
#gestion .g-trans .rowlist b{font-size:9px;letter-spacing:-.01em}
#gestion .g-trans .rowlist small{font-size:8.3px}
/* ── Bande des 3 avantages : pastilles 67px, contenu centré ───────────── */
#gestion .band-3>div{justify-content:center}
#gestion .band-3 .ic{width:67px;height:67px;background:#E4EAF8}
#gestion .band-3 .ic svg{width:30px;height:30px}
#gestion .band-3 p{max-width:290px}
/* ── Mobile / tablette : annuler les géométries fixes ─────────────────── */
@media (max-width:1279px){
#gestion .gestion-grid{grid-template-columns:1fr;gap:34px}
#gestion .monitor .app-side{width:100%;padding:10px 12px}
#gestion .lead{max-width:none}
#gestion .tiles{max-width:none}
#gestion .g-donut{flex-wrap:wrap;justify-content:center}
#gestion .g-leg{flex:1 1 100%}
#gestion .m-neck{width:120px;height:36px}
#gestion .m-base{width:170px;height:12px}
#gestion .band-3>div{justify-content:flex-start}
#gestion .band-3 p{max-width:none}
}
@media (max-width:560px){
#gestion .tiles{grid-template-columns:1fr 1fr}
#gestion .kpi small{white-space:normal}
}
/* === metiers.css === */
/* ═══════════════════════════════════════════════════════════════════════
FIXES · 04 · Métiers — écarts mesurés vs maquette visual-04.png
Concaténé APRÈS homepage-v4.css ; toutes les règles sont scopées #metiers.
Attention : les règles à id battent les media queries de la feuille
commune → chaque géométrie fixe est ré-adaptée dans les blocs @media
en fin de fichier (mêmes seuils que la feuille commune : 1180/940/560).
═══════════════════════════════════════════════════════════════════════ */
/* Largeur générale : 1590px utiles, marges latérales 41px (maquette x41-x1630) */
#metiers>.wrap{max-width:1672px;padding:0 41px}
/* Fond de section : blanc quasi pur (maquette #FEFEFE) au lieu du gris bleuté */
#metiers.sec-panel{background:#fff}
/* 35px entre le bas du cadre Exemples et la fin de la section */
#metiers.sec{padding-bottom:35px}
/* Colonnes maquette : 364px texte · 879px grille photos · 285px rail, gouttières 30px */
#metiers .metiers-grid{grid-template-columns:minmax(260px,23fr) 55.5fr 18fr;gap:30px}
/* La grille photos démarre 31px PLUS HAUT que les deux colonnes latérales */
#metiers .metiers-grid>div:first-child,
#metiers .metiers-grid .rail{padding-top:31px}
/* Titre sur 4 lignes (2 navy + 2 rouges) comme la maquette, interligne ~49px.
NB : la maquette utilise une chasse plus étroite que notre Fraunces (le woff2
du projet n'a pas d'axe optique) ; à 47px la ligne « activité de l'occasion. »
mesure 478px et ne peut pas tenir dans la colonne de 364px. On garde donc la
STRUCTURE maquette (4 lignes, bloc ~184px de haut, interligne 49px) avec le
corps maximal qui la permet : 36px, approche -0.02em. */
#metiers h2{font-size:36px;line-height:1.36;letter-spacing:-.02em}
/* Paragraphe d'intro : corps 16px sur ~355px → coupe en 4 lignes après « mentions » */
#metiers .lead{max-width:355px;font-size:16px}
/* Encadré cible : icône 38px à GAUCHE centrée verticalement, fine bordure grise
sur les 4 côtés (plus de filet rouge), sans ombre */
#metiers .callout{display:flex;align-items:center;gap:24px;
border:1px solid var(--line);border-left:1px solid var(--line);
border-radius:12px;box-shadow:none;padding:20px 24px}
#metiers .callout svg{width:38px;height:38px;flex:none;margin-bottom:0}
#metiers .callout p{margin:0}
/* Grille photos : gouttières 10px, vignettes quasi carrées 169×184 (h/l ≈ 1,09) */
#metiers .metier-cards{gap:10px}
#metiers .metier-cards img{aspect-ratio:169/184}
/* Légendes : corps 21px, zone d'environ 65px sous la photo */
#metiers .metier-cards b{font-size:21px;padding:19px 6px}
/* Rail droit : icône rouge 33px à GAUCHE, texte à droite, cartes ~145px espacées
de 22px ; la colonne court sur les deux rangées et la 4e carte (Conformité
pratique) descend au niveau du cadre « Exemples de champs adaptés » */
#metiers .metiers-grid .rail{align-self:stretch}
#metiers .rail{display:flex;flex-direction:column;gap:22px}
#metiers .rail article{display:flex;align-items:center;gap:24px;padding:28px 22px}
#metiers .rail article:last-child{margin-top:auto}
#metiers .rail svg{width:33px;height:33px;flex:none;margin-bottom:0}
#metiers .rail b{font-size:16px;margin-bottom:6px}
#metiers .rail p{font-size:12.2px;line-height:1.5}
/* Cadre englobant « Exemples de champs adaptés » façon fieldset,
h3 en légende chevauchant la bordure haute, 32px sous la grille photos */
#metiers .metiers-grid .champs{margin-top:12px}
#metiers .champs{border:1px solid #E3E7EE;border-radius:14px;background:#fff;
padding:20px 14px}
#metiers .champs h3{font-size:21px;line-height:1.25;text-align:left;
width:fit-content;background:#fff;padding:0 12px;margin:-33px 0 10px 28%}
/* Mini-cartes Exemples : 4 colonnes gap 15px, ~160px de haut, images h 118px */
#metiers .champs-grid{gap:15px}
#metiers .champs-grid article{padding:20px 18px;align-items:center;gap:16px}
#metiers .champs-grid img{width:auto;height:118px;max-width:132px;object-fit:contain}
#metiers .champs-grid b{font-size:16.5px}
#metiers .champs-grid li{font-size:13px}
/* ─── Réactif : rendre la main aux dispositions de la feuille commune ──── */
@media (max-width:1279px){
#metiers .metiers-grid{grid-template-columns:minmax(250px,30fr) 70fr;gap:30px 34px}
#metiers .metiers-grid>div:first-child,
#metiers .metiers-grid .rail{padding-top:0}
#metiers .metiers-grid .rail{align-self:auto}
#metiers .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#metiers .rail article{padding:20px 18px}
#metiers .rail article:last-child{margin-top:0}
#metiers .metiers-grid .champs{margin-top:6px}
}
@media (max-width:1279px){
#metiers>.wrap{padding:0 26px}
#metiers .metiers-grid{grid-template-columns:1fr}
#metiers .metiers-grid>div:first-child,
#metiers .metiers-grid .metier-cards,
#metiers .metiers-grid .rail,
#metiers .metiers-grid .champs{grid-column:1;grid-row:auto}
#metiers .rail{grid-template-columns:repeat(2,1fr)}
#metiers h2{line-height:1.1}
#metiers .metier-cards b{font-size:17px;padding:12px 6px}
#metiers .champs h3{margin-left:12px}
#metiers .champs-grid img{height:96px}
}
@media (max-width:560px){
#metiers>.wrap{padding:0 18px}
#metiers .rail{grid-template-columns:1fr}
#metiers .champs-grid{grid-template-columns:1fr}
#metiers .champs{padding:16px 12px}
}
/* === pilotage.css === */
/* ═══════════════════════════════════════════════════════════════════════
FIXES · section 07 PILOTAGE (#pilotage) — écarts mesurés vs visual-07.
Concaténé APRÈS homepage-v4.css ; tout est scopé à #pilotage.
Grille de référence : 1672 px de large.
═══════════════════════════════════════════════════════════════════════ */
/* ── Cadre de section : marge gauche x40, droite 34, titre 44px sous l'en-tête */
#pilotage.sec{padding-top:32px}
#pilotage .wrap{max-width:1672px;padding-left:40px;padding-right:34px}
/* ── Deux colonnes : texte ~540px, mockup ~1010px (60,5%), gouttière 48px */
#pilotage .pilot-grid{grid-template-columns:minmax(320px,35fr) minmax(0,65fr);gap:48px}
/* ── Titre : capitale ~39px (police ~52px), coupé après « activité » (br dans le twig) */
#pilotage h2{font-size:52px}
/* ── Paragraphe d'intro : 3 lignes sur ~540px */
#pilotage .lead{max-width:540px}
/* ── 4 cartes bénéfices : une seule rangée, icône 44px navy, libellé centré 2 lignes */
#pilotage .pilot-cards{grid-template-columns:repeat(4,1fr);gap:20px}
#pilotage .mini-card{display:flex;flex-direction:column;align-items:center;
text-align:center;padding:30px 10px 22px;min-height:161px}
#pilotage .mini-card svg{width:44px;height:44px;color:var(--navy);margin:0 auto 16px}
#pilotage .mini-card b{font-size:13px;line-height:1.35;max-width:96px;margin:0 auto}
/* ── Encadré « Ce que vous gagnez » : ~190px de haut, plus d'air, icônes 30px */
#pilotage .gains{margin-top:28px;padding:28px 20px 26px}
#pilotage .gains h3{font-size:17px}
#pilotage .gains-row svg{width:30px;height:30px;margin-bottom:8px}
#pilotage .gains-row b{font-size:13.5px}
#pilotage .gains-row p{font-size:12px}
/* ── Mockup tablette : ratio h/l ≈ 0,75 (app ≈ 985×728 à l'échelle maquette) */
#pilotage .tablet .app{aspect-ratio:985/728}
/* ── Barre latérale : 17,7% du mockup, items de menu qui respirent (~45px de pas) */
#pilotage .tablet .app-side{width:17.7%;min-width:150px}
#pilotage .tablet .app-menu a{padding:13.5px 10px}
/* ── En-tête du dashboard : chips plus grands + icônes calendrier / download */
#pilotage .chip{padding:9px 13px;font-size:11px}
#pilotage .chip svg{width:16px;height:16px;flex:none}
#pilotage .chip-navy svg{width:14px;height:14px}
/* ── KPI : valeurs deux fois plus grandes, ligne « vs période précédente » */
#pilotage .kpi{padding:10px 14px}
#pilotage .kpi small{font-size:10.5px}
#pilotage .kpi b{font-size:21px;margin:3px 0 2px}
#pilotage .kpi em{font-size:10.5px}
#pilotage .kpi .kpi-vs{margin-top:3px;font-weight:600;color:var(--faint)}
/* ── Rangées internes : ratios mesurés sur la maquette */
#pilotage .row-charts{grid-template-columns:43fr 57fr;flex:23 1 0}
#pilotage .row-tables{grid-template-columns:43fr 22fr 33fr;flex:28 1 0}
/* ── Donut 155px, légende verticale à droite, libellés complets */
#pilotage .panel-donut{display:flex;flex-direction:column}
#pilotage .panel-donut .donut{flex:1;flex-direction:row;gap:12px;
align-items:center;justify-content:center}
#pilotage .donut-disc{width:155px;height:155px}
#pilotage .donut-disc::after{inset:33px;font-size:14px;line-height:1.3;padding:0 6px}
#pilotage .donut-leg{display:flex;flex-direction:column;gap:7px;width:auto;
font-size:10.5px;color:var(--ink)}
#pilotage .donut-leg i{width:9px;height:9px;border-radius:50%;margin-right:8px}
/* ── Graphique : « Par jour ⌄ » en navy avec caret */
#pilotage .chart-freq{float:right;display:inline-flex;align-items:center;gap:4px;
color:var(--navy);font-weight:700;font-size:10.5px}
#pilotage .chart-freq svg{width:11px;height:11px;min-height:0;flex:none}
#pilotage .linechart>svg{min-height:0}
/* ── Table « Top produits vendus » : 4 colonnes avec en-têtes */
#pilotage .ptable{width:100%;border-collapse:collapse}
#pilotage .ptable th{font-size:10.5px;font-weight:650;color:var(--muted);
text-align:left;padding:4px 0 6px;border-bottom:1px solid var(--line-2)}
#pilotage .ptable td{font-size:11px;color:var(--ink);padding:7px 0;
border-bottom:1px solid var(--line-2)}
#pilotage .ptable tr:last-child td{border-bottom:0}
#pilotage .ptable td:first-child{font-weight:700;color:var(--navy)}
#pilotage .ptable th:nth-child(3),#pilotage .ptable td:nth-child(3){text-align:center}
#pilotage .ptable th:nth-child(4),#pilotage .ptable td:nth-child(4){text-align:right}
/* ── Liens de pied des 3 cartes, au même niveau vertical */
#pilotage .row-tables .panel{display:flex;flex-direction:column}
#pilotage .row-tables .panel h4{flex:none}
#pilotage .plink{margin-top:auto;padding-top:10px;font-size:12px;font-weight:750;
color:var(--navy-3);white-space:nowrap}
/* ── Stocks : cartes internes plus hautes (mockup agrandi) */
#pilotage .stat{padding:10px 0}
#pilotage .stat small{font-size:10px}
#pilotage .stat b{font-size:20px}
/* ── Dernières transactions : montant + pastille « • Payée » sur la même ligne */
#pilotage .tx>div{padding:6px 0}
#pilotage .tx b{font-size:11px;white-space:nowrap}
#pilotage .tx small{font-size:10px}
#pilotage .tx .end{display:flex;flex-direction:row;align-items:center;gap:7px}
#pilotage .badge{font-size:9px;padding:2.5px 6px;white-space:nowrap}
/* ═══ ÉCRANS INTERMÉDIAIRES (941-1480px) — le mockup rétrécit : on relâche
le ratio fixe et les tailles qui ne tiennent plus ═══ */
@media (max-width:1480px){
#pilotage .tablet .app{aspect-ratio:auto}
#pilotage .row-charts,#pilotage .row-tables{flex:0 0 auto}
#pilotage .panel-donut .donut{flex-wrap:wrap}
#pilotage .donut-leg{font-size:10px}
#pilotage .kpi b{font-size:16px}
#pilotage .tx b{white-space:normal}
#pilotage .tx small{font-size:9px}
#pilotage .tx .end{flex-wrap:wrap;justify-content:flex-end;row-gap:2px}
#pilotage .badge{font-size:8.6px;padding:2px 5px}
#pilotage .tx b{font-size:10px}
#pilotage .ptable td{font-size:9.5px}
#pilotage .ptable th{font-size:9px}
#pilotage .stat small{overflow-wrap:anywhere}
#pilotage .stat b{font-size:16px}
#pilotage .plink{font-size:11px;white-space:normal}
}
/* ═══ MOCKUP ÉTROIT (941-1100px) — le dashboard passe en piles ═══ */
@media (max-width:1100px){
#pilotage .app-top{flex-wrap:wrap}
#pilotage .tablet .app-side{min-width:120px}
#pilotage .kpis{grid-template-columns:repeat(3,1fr)}
#pilotage .kpi b{font-size:14px}
#pilotage .row-charts,#pilotage .row-tables{grid-template-columns:1fr}
#pilotage .donut-disc{width:120px;height:120px}
#pilotage .donut-disc::after{inset:26px;font-size:11.5px}
}
/* ═══ MOBILE / TABLETTE — on neutralise la géométrie fixe (le socle commun
passe .pilot-grid en 1 colonne et .app en colonne à 940px) ═══ */
@media (max-width:1279px){
#pilotage.sec{padding-top:44px}
#pilotage .wrap{max-width:none;padding-left:26px;padding-right:26px}
#pilotage .pilot-grid{grid-template-columns:1fr;gap:32px}
#pilotage h2{font-size:40px}
#pilotage .lead{max-width:56ch}
#pilotage .pilot-cards{grid-template-columns:repeat(2,1fr);gap:12px}
#pilotage .mini-card{min-height:0;padding:20px 10px 16px}
#pilotage .mini-card svg{width:34px;height:34px;margin-bottom:10px}
#pilotage .tablet .app{aspect-ratio:auto}
#pilotage .tablet .app-side{width:100%;min-width:0}
#pilotage .panel-donut .donut{flex-wrap:wrap}
#pilotage .ptable td{font-size:10px}
#pilotage .ptable td:first-child{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:560px){
#pilotage .wrap{padding-left:18px;padding-right:18px}
}
/* === securite.css === */
/* ═══════════════════════════════════════════════════════════════════════
CORRECTIONS · section 06 « Sécurité et contrôle » (#securite)
Écarts mesurés sur visual-06.png (grille 1672 px). Concaténé APRÈS
homepage-v4.css — toutes les règles sont scopées à #securite.
[Grèbe-83 · PC2-260820-KCVH · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* Fond de section : blanc pur (mesuré 254,254,254 sur la maquette) */
#securite{background:#fff}
/* Titre : coupe en 4 lignes de la maquette (les
font la coupe ;
width:max-content laisse la 1re ligne déborder de ~13 px dans la
gouttière, comme sur la maquette — la police suit le vw, le débord
reste constant et ne touche jamais la carte) */
#securite .secu-copy h2{width:max-content;max-width:calc(100% + 28px);
font-size:44px;line-height:1.18}
/* ── Colonne gauche : chip numéroté SORTI de la carte, icônes navy ────── */
#securite .steps li{background:transparent;border:0;box-shadow:none;padding:0;gap:10px}
#securite .steps .step-card{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
padding:12px 14px;box-shadow:var(--shadow-s);max-width:350px}
#securite .steps .num{width:30px;height:30px;font-size:13px}
#securite .steps svg{color:var(--navy)}
/* ── Mockup « Mode contrôle » : sidebar navy + zone principale ────────── */
#securite .control-window{display:flex;align-items:stretch}
#securite .control-window .app-side{width:177px;gap:4px}
#securite .control-window .app-brand{padding:8px 6px 16px}
#securite .control-window .app-menu a{padding:9.5px 10px;font-size:12px}
#securite .control-window .app-menu svg{width:15px;height:15px}
#securite .cw-main{flex:1;min-width:0;display:flex;flex-direction:column}
#securite .cw-scroll{flex:1}
/* Bandeau d'en-tête : sans filet, titre plus grand, pilules de la maquette */
#securite .cw-head{border-bottom:0;padding:16px 16px 6px;gap:8px}
#securite .cw-title{font-size:19px}
#securite .app-search{border-radius:10px;padding:8.5px 10px;font-size:10px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#securite .cw-head .chip{padding:8px 10px}
#securite .cw-head .chip svg{width:13px;height:13px;flex:none}
#securite .chip-filter{background:#EAF1FB;border-color:#D7E4F6;color:#1A66C0}
/* KPIs : titre centré, icône navy à gauche de la valeur, sous-libellés gris */
#securite .cw-kpis{padding:10px 18px 6px;gap:12px}
#securite .cw-kpis .kpi{text-align:center;padding:12px 10px 11px}
#securite .cw-kpis .kpi small{font-size:11px;color:var(--navy);font-weight:700;white-space:nowrap}
#securite .kpi-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:7px 0 3px}
#securite .kpi-row svg{width:26px;height:26px;color:var(--navy);flex:none}
#securite .cw-kpis .kpi b{display:inline;font-size:20px;margin:0}
#securite .cw-kpis .kpi em{font-size:10.5px}
#securite .cw-kpis .kpi em.k-faint{color:var(--muted)}
#securite .cw-kpis .kpi em.k-grey{color:#5E6A80}
/* Tableau : casse mixte, rangées ~54 px, N° en graisse normale,
statut = pastille verte cerclée sans en-tête */
#securite .control-table{font-size:10.2px}
#securite .control-table th{text-transform:none;letter-spacing:0;font-size:10.2px;
color:var(--ink);background:#F0F2F7;padding:10px 6px;border-bottom:0;white-space:nowrap}
#securite .control-table th:first-child{border-radius:8px 0 0 8px}
#securite .control-table th:last-child{border-radius:0 8px 8px 0}
#securite .control-table td{padding:16px 6px}
#securite .control-table td:first-child{white-space:nowrap}
#securite .control-table td:nth-child(2){font-weight:400;color:var(--ink)}
#securite .control-table td:nth-child(5){max-width:76px}
#securite .control-table .hash{font-size:9.8px}
#securite .cw-status{text-align:right}
#securite .cw-status svg{width:18px;height:18px;color:var(--green);display:inline-block;vertical-align:middle}
#securite .cw-foot{padding:2px 18px 14px}
/* Mentions « démonstration » : conservées (obligation produit), discrètes et lisibles */
#securite .demo-note{font-style:normal;font-size:10px;color:var(--muted);font-weight:500}
/* ── Carte « Vérification publique » ──────────────────────────────────── */
#securite .verify-card h3{justify-content:center}
#securite .verify-scan{margin:10px 0 6px;text-align:center;font-size:12px;
color:var(--muted);line-height:1.5}
#securite .verify-id{color:var(--navy);font-size:13px;font-weight:650}
#securite .verify-id b{font-size:18px;margin-top:2px;white-space:nowrap}
/* ── CTA WhatsApp de section : reste dans le flux, sans masquer le contenu ── */
#securite .secu-wa-float{position:static;width:max-content;max-width:calc(100% - 92px);
margin:24px 46px 0 auto;display:flex;align-items:center;gap:9px;background:var(--green);color:#fff;
font:700 15px/1 var(--fb);padding:14px 22px;border-radius:999px;
box-shadow:0 12px 28px rgba(0,136,58,.35);transition:transform .15s,background .15s}
#securite .secu-wa-float:hover{background:#006B2E;transform:translateY(-1px)}
#securite .secu-wa-float svg{width:20px;height:20px;flex:none}
/* ── Géométrie desktop : proportions de la maquette (349/835/288),
carte ~700 px de haut, bas des 3 colonnes alignés ──────────────────── */
@media (min-width:1280px){
#securite .secu-grid{grid-template-columns:minmax(320px,26fr) 55fr 19fr;align-items:stretch}
#securite .control-window{min-height:690px}
#securite .verify-card{max-width:295px;width:100%;justify-self:end;
display:flex;flex-direction:column;justify-content:space-between;gap:4px}
#securite .control-table{table-layout:fixed;min-width:0}
#securite .control-table th{white-space:normal;line-height:1.2}
#securite .control-table th,#securite .control-table td{
min-width:0;max-width:none;overflow-wrap:anywhere;padding-right:4px;padding-left:4px}
#securite .control-table td:nth-child(3),
#securite .control-table td:nth-child(4),
#securite .control-table td:nth-child(5){white-space:normal}
#securite .control-table th:nth-child(1),#securite .control-table td:nth-child(1){width:19.2%}
#securite .control-table th:nth-child(2),#securite .control-table td:nth-child(2){width:16%}
#securite .control-table th:nth-child(3),#securite .control-table td:nth-child(3){width:12%}
#securite .control-table th:nth-child(4),#securite .control-table td:nth-child(4){width:12.8%}
#securite .control-table th:nth-child(5),#securite .control-table td:nth-child(5){width:12.7%}
#securite .control-table th:nth-child(6),#securite .control-table td:nth-child(6){width:11.3%}
#securite .control-table th:nth-child(7),#securite .control-table td:nth-child(7){width:11%}
#securite .control-table th:nth-child(8),#securite .control-table td:nth-child(8){width:5%}
#securite .control-table .cw-status{padding-right:2px;padding-left:2px}
#securite .verify-id b{letter-spacing:0}
}
/* ── Tablette / mobile : la géométrie fixe est annulée ou adaptée ─────── */
@media (max-width:1279px){
#securite .control-window .app-side{display:none}
#securite .control-table td{padding:10px 6px}
#securite .cw-title{font-size:18px}
#securite .steps .step-card{max-width:none}
}
@media (max-width:1279px){
#securite .cw-kpis .kpi small{white-space:normal}
#securite .secu-wa-float{display:none}
}
/* ═══ correctif Grèbe-83 : le tableau reste dans son conteneur défilant ═══ */
#securite .control-window{min-width:0}
#securite .cw-main{min-width:0;overflow:hidden}
#securite .cw-scroll{overflow-x:auto;min-width:0}
@media (max-width:1279px){
#securite .control-window{flex-direction:column}
#securite .control-window .app-side{width:100%;padding:10px 12px}
#securite .control-window .app-menu{display:none}
}
/* mobile : les cellules cessent d'imposer 604px de largeur incompressible */
@media (max-width:1279px){
#securite .control-table td,
#securite .control-table td:nth-child(n+2),
#securite .control-table td:first-child{white-space:normal}
#securite .control-table{font-size:9px}
}
/* mobile : colonnes Metier et Empreinte masquees (le tableau tient en 390px) */
@media (max-width:1279px){
#securite .control-table td:nth-child(3),#securite .control-table th:nth-child(3),
#securite .control-table td:nth-child(7),#securite .control-table th:nth-child(7){display:none}
}
@media (max-width:560px){
#securite .cw-scroll{overflow-x:hidden}
#securite .control-table{width:100%;min-width:0;table-layout:fixed}
#securite .control-table td:nth-child(2),#securite .control-table th:nth-child(2),
#securite .control-table td:nth-child(6),#securite .control-table th:nth-child(6){display:none}
#securite .control-table th,#securite .control-table td{
min-width:0!important;max-width:none;overflow-wrap:anywhere}
#securite .control-table th:nth-child(1),#securite .control-table td:nth-child(1){width:27%}
#securite .control-table th:nth-child(4),#securite .control-table td:nth-child(4){width:22%}
#securite .control-table th:nth-child(5),#securite .control-table td:nth-child(5){width:33%}
#securite .control-table th:nth-child(8),#securite .control-table td:nth-child(8){width:18%}
}
/* === tarifs.css === */
/* ═══════════════════════════════════════════════════════════════════════
FIXES · Section 09 — Tarifs (écarts mesurés maquette visual-09 ↔ rendu)
Chargé APRÈS homepage-v4.css. Toutes les règles sont scopées #tarifs
pour ne pas fuir sur les autres sections.
═══════════════════════════════════════════════════════════════════════ */
/* Marge au-dessus du titre : ~100px de vide → le titre commence juste sous l'en-tête */
#tarifs.sec{padding-top:12px}
/* Titre de section : +8 % (capitale 34px → 37px) */
#tarifs .center h2{font-size:51px}
/* Grille des 3 cartes : conteneur 1483px, colonnes 494/441/509, gouttières 20px.
margin-top 42px → 15px : espace sous-titre → cartes ramené de 51px à ~24px. */
#tarifs .pricing-grid{
max-width:1483px;
margin:15px auto 0;
grid-template-columns:494fr 441fr 509fr;
gap:20px;
}
/* ── Carte 1 · l'offre ─────────────────────────────────────────────────── */
/* Chiffre héros « 250 » : viser ~81px de hauteur de chiffres (84px à 1672px
de large ; en dessous, réduit en proportion pour ne pas déborder la carte) */
#tarifs .price-n{font-size:84px;line-height:1;font-weight:700}
/* Prix mensuel « 8,50 € » : ~71px de haut à 1672px (le small « HT / mois » ne bouge pas) */
#tarifs .price-m{font-size:76px;line-height:1}
/* Pictogramme cadeau : glyphe 26px, rouge plein */
#tarifs .price-gift svg{width:26px;height:26px;color:#d62828}
/* Encadré annuel : fond BLANC + bordure verte 2px, grand prix vert à gauche,
mention navy à sa droite, badge « Économisez » en dessous */
#tarifs .price-annual{background:#fff;border:2px solid #16a34a;border-radius:12px;
min-height:101px;padding:14px 18px;display:flex;flex-direction:column;
justify-content:center;gap:4px}
#tarifs .price-annual .pa-line{display:flex;align-items:center;gap:14px;text-align:left}
#tarifs .price-annual b{color:#0f8f51;font-size:42px;font-weight:700;
line-height:1;font-family:var(--fd)}
#tarifs .price-annual .pa-line span{color:#1e2a4a;font-size:15px;font-weight:650}
#tarifs .price-annual em{align-self:center;margin-top:2px}
/* Réassurance bas de carte : icône ~28px à GAUCHE d'un texte gras (2 lignes),
les séparateurs verticaux de la feuille commune sont conservés */
#tarifs .price-foot{font-size:12.5px}
#tarifs .price-foot span{display:flex;flex-direction:row;align-items:center;
gap:10px;text-align:left;padding:0 10px}
#tarifs .price-foot svg{width:28px;height:28px}
/* ── Carte 2 · Tout est inclus ─────────────────────────────────────────── */
/* Titre : capitale 14px → 17px (+20 %) */
#tarifs .includes-card h3{font-size:23px}
/* Retrait de la liste : 24px de padding carte + 21px = ~45px du bord */
#tarifs .includes-card .check-list{padding-left:21px}
/* Graisse uniforme semi-bold navy sur les 15 items */
#tarifs .includes-card .check-list li{font-weight:600;color:#1e2a4a;align-items:center}
/* Coche verte DANS UN CERCLE : anneau 26px, bordure 2px */
#tarifs .includes-card .check-ring{flex:none;width:26px;height:26px;
border:2px solid #16a34a;border-radius:50%;display:grid;place-items:center}
#tarifs .includes-card .check-ring svg{width:13px;height:13px;margin:0;color:#16a34a}
/* ── Carte 3 · comparatif ──────────────────────────────────────────────── */
/* Toggle : « VS » 18px gras navy ; pilules ~40px de haut ;
pilule claire gris neutre sans bordure marquée */
#tarifs .compare-head span{padding:11px 10px;font-size:12.5px}
#tarifs .compare-head span:first-child{background:#f4f5f7;border-color:transparent}
#tarifs .compare-head b{font-size:18px;font-weight:700;color:#1e2a4a}
/* 2 séparateurs seulement, ENTRE les rangs ; 1er rang ~64px sous le toggle
(on remplace la répartition space-evenly qui créait le vide de 90px) */
#tarifs .compare-rows{align-content:stretch}
#tarifs .compare-row{align-content:center;font-size:15px}
#tarifs .compare-row:first-child{border-top:0;margin-top:64px}
/* Icônes 30px navy, coches cerclées vertes 32px, flèche 26px navy,
libellés 15px semi-bold (repassent sur 2 lignes avec la colonne à 509px) */
#tarifs .compare-row>span{color:#1e2a4a;font-weight:600;font-size:15px}
#tarifs .compare-row svg{width:30px;height:30px}
#tarifs .compare-row>span:first-child svg{color:#1e2a4a}
#tarifs .compare-row>span:last-child svg{width:32px;height:32px;color:#16a34a}
#tarifs .compare-row b svg{width:26px;height:26px;color:#1e2a4a}
/* ── Rangée CTA : rouge 625px/72px, WhatsApp 802px/60px, écart 44px ────── */
#tarifs .pricing-ctas{max-width:1471px;margin-left:auto;margin-right:auto;
grid-template-columns:625fr 802fr;gap:44px}
#tarifs .pricing-ctas .btn-primary{min-height:72px}
#tarifs .pricing-ctas .btn-wa{min-height:60px;align-self:center;width:100%}
/* ── Ligne de réassurance finale : texte 18px, icônes 22px ─────────────── */
#tarifs .pricing-trust{font-size:18px}
#tarifs .pricing-trust svg{width:22px;height:22px}
/* ── Mobile/tablette : annuler ou adapter la géométrie fixe sous 1280 px. */
@media (max-width:1279px){
#tarifs.sec{padding-top:32px}
#tarifs .pricing-grid{grid-template-columns:1fr;max-width:none;gap:18px}
#tarifs .pricing-ctas{grid-template-columns:1fr;max-width:none;gap:14px}
#tarifs .pricing-ctas .btn-wa{align-self:auto}
#tarifs .price-n{font-size:64px}
#tarifs .price-card .off{display:block;font-size:14px;line-height:1.35}
#tarifs .price-card .off small{display:block;margin-top:4px;color:var(--muted);
font-size:12px;font-weight:600}
#tarifs .price-auto{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0}
#tarifs .price-auto svg{width:40px;height:40px;flex:none;color:var(--red)}
#tarifs .price-auto span{font-size:15px;line-height:1.35;color:var(--navy);
font-weight:650;text-align:left}
#tarifs .price-auto b{font-family:var(--fd);font-size:28px;font-weight:640;margin-right:3px}
#tarifs .price-auto small{display:block;margin-top:3px;color:var(--muted);
font-size:12px;font-weight:600}
#tarifs .price-m{font-size:54px}
#tarifs .price-annual b{font-size:32px}
#tarifs .compare-row:first-child{margin-top:20px}
#tarifs .pricing-trust{font-size:15px}
#tarifs .pricing-trust svg{width:18px;height:18px}
}
/* ═══════════════════════════════════════════════════════════════════════
V5 — AJUSTEMENTS MESURÉS SUR LES MAQUETTES DU 24/08/2026
Tout est calé sur le canevas de 1672 px : #stage applique zoom = vw/1672,
donc chaque coordonnée ci-dessous est la coordonnée de la maquette.
[Pinson-32 · MAC-260824-QNQM · Claude Code]
═══════════════════════════════════════════════════════════════════════ */
/* Toute la géométrie ci-dessous est calée sur le canevas 1672 px.
Sous 1280 px, #stage cesse de zoomer : la feuille commune reprend la main
avec ses règles d'empilement mobile — donc RIEN ici ne doit s'y appliquer. */
@media (min-width:1280px){
/* ─── 01 · HÉROS (géométrie fixe, bureau seulement) ───────────────── */
#hero .hero-copy{width:700px}
#hero .hero-benefits{width:656px}
#hero .hero-cards{width:656px}
/* ─── 02 · MÉTIERS ────────────────────────────────────────────────────
Repères maquette : colonne gauche 46→424 · vignettes 467→1299 (5 × 159,
gouttière 10,5) · rail 1340→1626 · champs 46→1305 · bandeau bas 46→1626. */
#metiers{padding:13px 0 38px;background:#fff}
#metiers>.wrap{max-width:1672px;padding:0 46px}
#metiers .metiers-grid{grid-template-columns:378px 832px 286px;column-gap:37px;row-gap:0;align-items:start}
#metiers .metiers-grid>div.metiers-intro{grid-column:1;grid-row:1;padding-top:0;padding-left:6px}
#metiers .metier-cards{grid-column:2;grid-row:1}
#metiers .metiers-grid>div.rail{grid-column:3;grid-row:1/3;margin-left:10px;padding-top:0;align-self:start}
#metiers .champs{grid-column:1/3;grid-row:2;margin-top:15px;padding-left:6px}
#metiers h2{font-size:36px;line-height:1.36;letter-spacing:-.042em;margin-top:14px;width:max-content;max-width:none}
#metiers .lead{max-width:none;font-size:16px;line-height:1.56;margin-top:26px}
#metiers .callout{display:flex;align-items:center;gap:22px;margin-top:39px;background:#fff;
border:1px solid var(--line);border-left:1px solid var(--line);border-radius:12px;
padding:20px 22px;box-shadow:var(--shadow-s)}
#metiers .callout svg{width:36px;height:36px;flex:none;margin-bottom:0;color:var(--red)}
#metiers .callout p{margin:0;font-size:17px;line-height:1.55;font-weight:700}
#metiers .metier-cards{grid-template-columns:repeat(5,159px);column-gap:10.5px;row-gap:9px}
#metiers .metier-cards a{border:1px solid var(--line-2);border-radius:10px;background:#fff}
#metiers .metier-cards img{width:159px;height:174px;aspect-ratio:auto;object-fit:cover}
#metiers .metier-cards b{font-size:15px;line-height:1.23;padding:14px 6px 7px;text-align:center;
min-height:58px}
#metiers .rail{display:grid;grid-template-rows:repeat(4,auto);gap:12px}
#metiers .rail article{display:grid;grid-template-columns:33px 1fr;column-gap:20px;align-items:start;
padding:22px 12px 22px 24px;border-radius:12px;min-height:130px;align-content:start}
#metiers .rail svg{width:33px;height:33px;flex:none;margin-bottom:0;margin-top:2px}
#metiers .rail b{font-size:16px;margin-bottom:9px;font-family:var(--fb);font-weight:700}
#metiers .rail p{font-size:12.2px;line-height:1.5}
#metiers .rail article:last-child{margin-top:0}
#metiers .champs{border:0;background:transparent;padding:0}
#metiers .champs h3{font-size:20px;line-height:1.25;text-align:center;width:auto;background:transparent;
margin:0 234px 3px 0;padding:0}
#metiers .champs-grid{grid-template-columns:repeat(5,1fr);gap:12px}
#metiers .champs-grid article{border:1px solid var(--line-2);border-radius:12px;background:#fff;
padding:7px 11px;gap:9px;align-items:center;min-height:132px}
#metiers .champs-grid img{width:auto;height:auto;max-width:88px;max-height:116px;object-fit:contain}
#metiers .champs-grid b{font-size:13.5px;letter-spacing:-.02em;margin-bottom:6px;white-space:nowrap}
#metiers .champs-grid li{font-size:12px;line-height:1.62;padding-left:14px}
.metiers-bottom{display:grid;grid-template-columns:425fr 375fr 380fr 400fr;gap:0;margin-top:26px;
padding-top:22px;padding-left:29px;border-top:1px solid var(--line-2)}
.metiers-bottom article{display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:center}
.metiers-bottom .rond{width:56px;height:56px;border-radius:50%;background:#EEF3FB;
display:grid;place-items:center}
.metiers-bottom .rond svg{width:27px;height:27px;color:var(--navy)}
.metiers-bottom b{display:block;font-family:var(--fd);font-weight:640;color:var(--navy);
font-size:16px;margin-bottom:6px}
.metiers-bottom p{margin:0;font-size:12.6px;color:var(--muted);line-height:1.5}
/* ─── 03 · SYNCHRONISATION ────────────────────────────────────────────
Colonnes maquette : intro 52→430 · nœuds gauche 464→653 · fiche 683→1100
· nœuds droite 1142→1323 · bénéfices 1363→1620. */
#fonctionnalites{padding:36px 0 34px;background:#fff}
#fonctionnalites .wrap{max-width:1672px;padding-inline:52px}
#fonctionnalites .sync-grid{grid-template-columns:378px minmax(0,1fr);gap:34px;align-items:start}
#fonctionnalites h2{font-size:40px;line-height:1.37;letter-spacing:-.042em;margin-top:0}
#fonctionnalites .lead{max-width:none;font-size:16px;line-height:1.63;margin-top:35px}
#fonctionnalites .lead+.lead{margin-top:23px}
#fonctionnalites .sync-side-cards{max-width:none;gap:15px;margin-top:44px}
#fonctionnalites .mini-card{padding:18px 16px 20px;border-radius:12px}
#fonctionnalites .mini-card svg{width:36px;height:36px}
#fonctionnalites .mini-card b{font-size:15.5px;line-height:1.28}
#fonctionnalites .mini-card p{margin-top:14px;font-size:12px;line-height:1.5}
#fonctionnalites .mini-card::after{margin-top:16px;width:38px;height:3px;background:var(--red);border-radius:2px}
#fonctionnalites .sync-grid{grid-template-columns:378px minmax(0,1fr);gap:34px}
#fonctionnalites .sync-diagram{
grid-template-columns:190px 30px 418px 42px 182px 40px minmax(0,1fr);
gap:0;align-items:start}
#fonctionnalites .sync-col{display:grid;gap:29px;justify-content:stretch;align-content:start;
padding-top:17px}
#fonctionnalites .sync-col-r{padding-top:17px}
#fonctionnalites .sync-benefits{padding-left:37px;gap:0}
#fonctionnalites .sync-benefits>div{flex:1 1 0;padding:29px 0 26px}
#fonctionnalites .sync-benefits>div:first-child{padding-top:38px}
#fonctionnalites .node{padding:16px 14px;border-radius:12px;min-height:96px;
grid-template-columns:40px 1fr;column-gap:14px;align-items:center}
#fonctionnalites .sync-col-r .node{min-height:96px}
#fonctionnalites .node svg{width:40px;height:40px;grid-row:1/3;align-self:center}
#fonctionnalites .node b{font-size:14.5px;line-height:1.25;font-weight:700}
#fonctionnalites .node small.maj{display:inline-flex;align-items:center;gap:7px;font-size:12.4px;
color:var(--green);margin-top:6px}
#fonctionnalites .node small.maj::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--green)}
#fonctionnalites .node small.maj-grise{color:var(--muted)}
#fonctionnalites .node small.maj-grise::before{background:#94A3B8}
/* La fiche objet : photos à gauche, caractéristiques à droite */
#fonctionnalites .fiche-card{padding:20px 16px 18px;border-radius:16px;background:#FCFDFE;
border:1px solid var(--line-2);box-shadow:0 10px 28px rgba(4,23,54,.06);overflow:visible}
#fonctionnalites .fiche-haut{display:grid;grid-template-columns:165px 1fr;column-gap:25px;align-items:start}
#fonctionnalites .fiche-photos{display:grid;gap:9px}
#fonctionnalites .fiche-photo{width:165px;height:242px;object-fit:cover;border-radius:10px}
#fonctionnalites .fiche-vignettes{display:grid;grid-template-columns:79px 78px;gap:8px}
#fonctionnalites .fiche-vignettes img{border-radius:7px;object-fit:cover}
#fonctionnalites .fiche-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin:0 0 12px}
#fonctionnalites .fiche-titre h3{font-size:20px;line-height:1.2}
#fonctionnalites .fiche-rows{padding:0}
#fonctionnalites .fiche-rows div{padding:6.5px 0;font-size:11.4px;border-top:0;gap:8px}
#fonctionnalites .fiche-rows b{white-space:nowrap}
#fonctionnalites .fiche-rows span{white-space:nowrap}
#fonctionnalites .fiche-rows span{color:var(--muted)}
#fonctionnalites .fiche-rows b{font-weight:600;color:var(--ink)}
#fonctionnalites .fiche-vehicule{margin-top:18px;background:#F5F7FB;border-radius:12px;padding:16px 18px}
#fonctionnalites .fiche-vehicule h4{margin:0 0 8px;font-family:var(--fd);font-weight:640;
font-size:16.5px;color:var(--navy)}
#fonctionnalites .fiche-vehicule-in{display:grid;grid-template-columns:132px 1fr;column-gap:14px;
align-items:center}
#fonctionnalites .fiche-vehicule-in p{margin:0;font-size:12.4px;line-height:1.55;color:var(--ink)}
#fonctionnalites .fiche-vehicule-in strong{font-weight:700;color:var(--navy)}
#fonctionnalites .sync-benefits svg{width:44px;height:44px}
#fonctionnalites .sync-benefits b{font-family:var(--fb);font-weight:700;font-size:16px;line-height:1.3}
#fonctionnalites .sync-benefits p{font-size:12.6px;line-height:1.5;margin-top:9px}
.sync-note{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin:14px 0 0 416px;width:782px;max-width:100%;
background:#F6F8FC;border-radius:12px;padding:16px 22px}
.sync-note svg{width:26px;height:26px;color:var(--navy);flex:none}
.sync-note p{margin:0;font-size:13.5px;color:var(--ink);flex:1}
.sync-note .drapeau{display:inline-flex;width:33px;height:23px;border-radius:3px;overflow:hidden;flex:none}
.sync-note .drapeau i{flex:1}
.sync-note .drapeau i:nth-child(1){background:#002395}
.sync-note .drapeau i:nth-child(2){background:#fff}
.sync-note .drapeau i:nth-child(3){background:#ED2939}
/* ─── 04 · GESTION ────────────────────────────────────────────────────
Repères : texte 46→621 · moniteur 690→1630 · bandeau bas 3 cartes. */
#gestion{padding:0 0 26px;background:#fff}
#gestion>.wrap{max-width:1672px;padding:0 46px}
#gestion .gestion-grid{display:grid;grid-template-columns:635px minmax(0,1fr);gap:0;align-items:start}
#gestion h2{font-size:46px;line-height:1.26;letter-spacing:-.045em;margin-top:-23px}
#gestion .lead{max-width:600px;font-size:15.5px;line-height:1.44;margin-top:19px}
#gestion .accent-bar{display:none}
#gestion .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
column-gap:11px;row-gap:11px;margin-top:22px}
#gestion .tiles article{background:#fff;border:1px solid var(--line-2);border-radius:11px;
display:grid;justify-items:center;align-content:center;gap:11px;padding:12px 4px;min-height:83px;
font-size:9.6px;font-weight:600;color:var(--navy);text-align:center;line-height:1.25;box-shadow:none;
letter-spacing:-.01em}
#gestion .tiles article svg{width:23px;height:23px;margin:0;color:var(--navy)}
#gestion .tiles article.t-red svg{color:var(--red)}
#gestion .tiles .tag-txt{display:grid;place-items:center;width:30px;height:24px;border:1.6px solid var(--navy);
border-radius:4px;font-size:8.5px;font-weight:800;letter-spacing:.02em;color:var(--navy)}
#gestion .gestion-visual{margin-top:6px}
#gestion .gestion-visual img{width:940px;max-width:none;height:auto}
.gestion-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin-top:-30px}
.gestion-bottom article{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:center;
background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:20px 24px;min-height:110px}
.gestion-bottom .rond{width:64px;height:64px;border-radius:50%;background:#EEF3FB;display:grid;place-items:center}
.gestion-bottom .rond svg{width:30px;height:30px;color:var(--navy)}
.gestion-bottom b{display:block;font-family:var(--fd);font-weight:640;color:var(--navy);
font-size:19px;margin-bottom:8px}
.gestion-bottom p{margin:0;font-size:13.4px;color:var(--muted);line-height:1.5}
/* ─── 05 · BOUTIQUE ───────────────────────────────────────────────────
Repères : colonne principale 44→1246 · rail 1281→1626 · aperçus y 352→778
· bandeau navy y 797→940. */
#boutique{padding:8px 0 0;background:#fff}
#boutique>.wrap{max-width:1672px;padding:0 44px}
#boutique .shop-layout{display:grid;grid-template-columns:1202px minmax(0,1fr);gap:35px;align-items:start}
#boutique .intro-block{text-align:center;margin:0 auto}
#boutique h2{font-size:43px;line-height:1.16;letter-spacing:-.042em}
#boutique .intro-block .lead{max-width:1279px;margin:14px auto 0;font-size:17px;line-height:1.47}
#boutique .lead-line{margin-top:20px}
#boutique .lead-note{margin:6px 0 0;font-size:11.5px;color:var(--faint)}
#boutique .shop-previews{display:grid;grid-template-columns:380fr 408fr 390fr;gap:14px;margin-top:20px}
#boutique .shop-previews figure{margin:0}
#boutique .shop-previews img{width:100%;height:auto;border-radius:12px;
box-shadow:0 8px 24px rgba(4,23,54,.08)}
#boutique .shop-rail{display:grid;gap:22px;align-content:start}
#boutique .shop-card{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:24px 26px 26px}
#boutique .shop-card h3{display:grid;grid-template-columns:32px 1fr;column-gap:14px;align-items:center;
font-size:21px;line-height:1.22;margin-bottom:20px}
#boutique .shop-card h3 svg{width:32px;height:32px;color:var(--navy)}
#boutique .check-2col{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:14px}
#boutique .check-2col li{display:grid;grid-template-columns:18px 1fr;column-gap:11px;align-items:center;
font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
#boutique .check-2col li svg{width:18px;height:18px;color:var(--red)}
#boutique .navy-band{margin-top:22px;border-radius:16px;padding:30px 26px}
/* ─── 06 · SÉCURITÉ ───────────────────────────────────────────────────
Repères : texte 41→420 · fenêtre « Mode contrôle » 467→1300 (h 690)
· carte « Vérification publique » 1342→1626. */
#securite{padding:23px 0 20px;background:#fff}
#securite>.wrap{max-width:1672px;padding:0 41px}
#securite .secu-grid{grid-template-columns:380px 834px minmax(0,1fr);
column-gap:47px;align-items:start}
#securite .control-window{min-height:0;height:690px}
#securite .secu-copy h2{font-size:44px;line-height:1.175;letter-spacing:-.042em;margin-top:0}
#securite .secu-copy .lead{max-width:none;font-size:15.5px;line-height:1.5;margin-top:26px}
#securite .verify-card{margin-left:8px}
/* 06 · compacité mesurée : 7 étapes de 504 à 875, 8 lignes de tableau en 690px */
#securite .secu-copy h2{max-width:calc(100% + 62px)}
#securite .steps{gap:8px;margin-top:22px}
#securite .steps .step-card{padding:11px 16px;min-height:44px;font-size:14px}
#securite .steps .num{width:28px;height:28px;font-size:12.5px}
#securite .steps .step-card svg{width:19px;height:19px}
#securite .control-table td{padding:9px 8px;font-size:11px}
#securite .control-table th{padding:9px 8px;font-size:10.5px}
#securite .cw-kpis{padding:12px 16px 8px;gap:11px}
#securite .cw-kpis .kpi{padding:10px 8px 9px}
#securite .cw-kpis .kpi b{font-size:18px}
/* ─── 07 · PILOTAGE ───────────────────────────────────────────────────
Repères : texte 42→570 · tablette 596→1652 (y 138→932). */
#pilotage{padding:34px 0 8px;background:#fff}
#pilotage>.wrap{max-width:1672px;padding:0 42px}
#pilotage .pilot-grid{grid-template-columns:554px minmax(0,1fr);column-gap:0;align-items:start}
#pilotage h2{font-size:41px;line-height:1.32;letter-spacing:-.042em;margin-top:0}
#pilotage .lead{max-width:none;font-size:15.5px;line-height:1.63;margin-top:27px}
#pilotage .pilot-visual{margin-top:-4px}
#pilotage .pilot-visual img{width:1056px;max-width:none;height:auto}
/* ─── 08 · ACCOMPAGNEMENT ─────────────────────────────────────────────
Repères : liste 47→553 · carte équipe 612→1124 · téléphone 1173→1532. */
#accompagnement{padding:6px 0 30px;background:#fff}
#accompagnement>.wrap{max-width:1672px;padding:0 47px}
#accompagnement .accomp-grid{grid-template-columns:506px 512px minmax(0,1fr);column-gap:59px}
#accompagnement h2{font-size:38px;line-height:1.2;letter-spacing:-.042em;width:max-content;max-width:calc(100% + 70px)}
#accompagnement .lead{max-width:none;font-size:15px;line-height:1.55;margin-top:20px}
#accompagnement .team-card img{width:calc(100% - 8px);max-width:none;height:auto}
/* ─── 09 · TARIFS ─────────────────────────────────────────────────────
La ligne « 60 véhicules gratuits à vie » de la maquette du 24/08. */
#tarifs{padding:18px 0 24px;background:#fff}
#tarifs>.wrap{max-width:1672px;padding:0 47px}
#tarifs h2{font-size:40px;line-height:1.2;letter-spacing:-.042em}
#tarifs .lead{font-size:15px;line-height:1.6;margin-top:14px;max-width:1100px}
#tarifs .price-card .off{font-size:14px;line-height:1.3}
#tarifs .price-card .off small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
#tarifs .price-auto{display:flex;align-items:center;justify-content:center;gap:13px;margin:2px 0 0}
#tarifs .price-auto svg{width:30px;height:30px;color:var(--red);flex:none}
#tarifs .price-auto span{font-size:14px;line-height:1.3;color:var(--navy);font-weight:600;text-align:left}
#tarifs .price-auto b{font-size:26px;font-family:var(--fd);font-weight:640;color:var(--navy);margin-right:2px}
#tarifs .price-auto small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
#tarifs .price-card hr{margin:14px 0}
#tarifs .price-n{font-size:52px}
#tarifs .price-m{margin-top:10px}
/* ─── 10 · AVIS + CTA + FAQ ───────────────────────────────────────────*/
#faq{padding:20px 0 0;background:#fff}
#faq h2{font-size:34px;line-height:1.28;letter-spacing:-.042em}
#faq .final-mini{grid-template-columns:repeat(5,auto);justify-content:start;gap:0 26px}
#faq .final-mini .txt{font-size:11.5px}
/* ─── 09 · TARIFS · resserrage mesuré (pas de 25,4 px sur la liste) ──── */
#tarifs .includes-card .check-list{gap:6px}
#tarifs .includes-card .check-list li{font-size:12.6px;line-height:1.25}
#tarifs .includes-card .check-ring{width:19px;height:19px}
#tarifs .includes-card .check-ring svg{width:10px;height:10px}
#tarifs .includes-card h3{font-size:21px;margin-bottom:12px}
#tarifs .price-card{padding-top:18px}
#tarifs .price-n{font-size:46px}
#tarifs .price-card hr{margin:11px 0}
#tarifs .price-m{margin-top:8px}
/* ─── 05 · BOUTIQUE · recalage de la hauteur de section ─────────────── */
#boutique{padding-top:0}
#boutique .navy-band{margin-top:14px;padding:22px 26px}
#boutique .intro-block .lead{margin-top:11px;line-height:1.42}
#boutique .lead-line{margin-top:15px}
#boutique .shop-previews{margin-top:14px}
/* ─── recalage final des hauteurs de section sur les maquettes ──────── */
/* 09 · les cartes doivent faire 483 px (mesuré), pas 558 */
#tarifs .includes-card .check-list{gap:3px}
#tarifs .includes-card .check-list li{font-size:12.2px;line-height:1.22}
#tarifs .includes-card{padding-top:18px;padding-bottom:18px}
#tarifs .includes-card h3{font-size:20px;margin-bottom:10px}
#tarifs .price-card{padding-top:14px;padding-bottom:14px}
#tarifs .price-foot{margin-top:12px}
/* 05 · l'intro doit finir à 212 et le bandeau faire 143 px */
#boutique .intro-block .lead{margin-top:8px;line-height:1.38}
#boutique .lead-line{margin-top:12px}
#boutique .shop-previews{margin-top:8px}
#boutique .navy-band{margin-top:12px;padding:16px 26px}
/* 07 · la tablette commence à 12 px du haut de section */
#pilotage .pilot-visual{margin-top:-10px}
/* 09 · la 3e carte imposait la hauteur : lignes à pas fixe, plus étirées */
#tarifs .compare-rows{flex:none;align-content:start;row-gap:30px}
#tarifs .compare-card{justify-content:flex-start}
/* 09 · la carte de prix imposait 554 px : ramenée à ~483 comme la maquette */
#tarifs .price-gift{width:42px;height:42px;margin-bottom:6px}
#tarifs .price-gift svg{width:21px;height:21px}
#tarifs .price-m{margin-top:4px;font-size:44px}
#tarifs .price-annual{margin-top:10px;padding:11px 14px}
#tarifs .price-annual .pa-line b{font-size:26px}
#tarifs .price-annual em{margin-top:5px;font-size:11.5px}
#tarifs .price-foot{margin-top:10px;padding-top:10px}
#tarifs .price-card hr{margin:9px 0}
#tarifs .price-auto{margin-top:1px}
}
/* ═══ V5 · empilement mobile des blocs nouveaux (sous 1280 px) ═══ */
@media (max-width:1279px){
#hero .hero-grid{padding-left:26px;padding-right:26px}
#faq .final-mini .g{grid-column:1/-1;justify-self:center;border-left:0;padding-inline:10px}
.metiers-bottom,.gestion-bottom{display:grid;grid-template-columns:1fr;gap:14px;
margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}
.metiers-bottom article,.gestion-bottom article{grid-template-columns:48px 1fr;column-gap:14px;
align-items:center;min-height:0}
.metiers-bottom .rond,.gestion-bottom .rond{width:48px;height:48px}
.metiers-bottom .rond svg,.gestion-bottom .rond svg{width:23px;height:23px}
.gestion-bottom article{padding:16px 18px}
.sync-note{display:flex;align-items:center;gap:14px;margin:20px 0 0;width:auto;
max-width:100%;padding:16px 18px;background:#F6F8FC;border-radius:12px}
.sync-note>svg{width:26px;height:26px;color:var(--navy);flex:none}
.sync-note>p{min-width:0;flex:1;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.sync-note>span{flex:none}
#fonctionnalites .fiche-haut{display:grid;grid-template-columns:1fr;gap:14px}
#fonctionnalites .fiche-photo{width:100%;height:auto;max-height:320px;object-fit:contain}
#fonctionnalites .fiche-vignettes{grid-template-columns:repeat(4,1fr)}
#fonctionnalites .fiche-vignettes img{width:100%;height:auto}
#fonctionnalites .fiche-vehicule-in{grid-template-columns:1fr;gap:10px}
#tarifs .price-auto{flex-wrap:wrap}
#tarifs .compare-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
#tarifs .compare-row>span{min-width:0;overflow-wrap:anywhere}
#boutique .shop-previews{grid-template-columns:1fr}
#metiers .champs-grid{grid-template-columns:1fr 1fr}
#metiers .champs-grid b{white-space:normal}
}
@media (max-width:560px){
#hero .hero-grid{padding-left:18px;padding-right:18px}
.hero-benefits b{white-space:normal}
#hero .hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#hero .hero-cards article,
#hero .hero-cards article span{min-width:0}
.sync-note{flex-direction:column;gap:10px;text-align:center;padding:18px}
.sync-note>svg{width:30px;height:30px}
#securite .verify-card{grid-template-columns:minmax(0,1fr)}
#securite .verify-card>*{min-width:0}
#securite .verify-id b{font-size:clamp(14px,5vw,18px)}
#metiers .metier-cards b{font-size:15px;padding:10px 4px;overflow-wrap:anywhere}
#metiers .champs-grid{grid-template-columns:1fr}
#metiers .champs-grid article,
#metiers .champs-grid article>div{min-width:0}
#tarifs .compare-card{padding-left:14px;padding-right:14px}
#tarifs .compare-row{gap:5px;font-size:12.5px}
#tarifs .compare-row>span{gap:5px;font-size:12px}
#tarifs .compare-row svg{width:22px;height:22px}
#tarifs .compare-row>span:last-child svg{width:24px;height:24px}
#tarifs .compare-row b svg{width:20px;height:20px}
#faq .final-mini{grid-template-columns:1fr 1fr}
}
@media (max-width:320px){
#hero .hero-cards article{flex-direction:column;justify-content:center;gap:6px;
padding:10px 8px;text-align:center}
#hero .hero-cards svg{width:30px;height:30px}
#metiers .champs-grid article{gap:12px;padding:16px 14px}
#metiers .champs-grid img{width:auto;height:auto;max-width:84px;max-height:84px}
#metiers .champs-grid li{font-size:12px;overflow-wrap:anywhere}
#accompagnement .ph-status{padding-inline:15px}
#accompagnement .ph-notch{width:96px}
#accompagnement .chat-head{gap:6px;padding:6px 8px 10px}
#accompagnement .ch-back{width:18px;height:18px}
#accompagnement .chat-head .app-roundel{width:30px;height:30px}
#accompagnement .ch-name b{gap:4px;font-size:13px}
#accompagnement .ch-calls{gap:0}
#accompagnement .ch-calls svg:last-child{display:none}
#faq .final-card{padding:22px 16px}
#faq .final-card .btn{padding-inline:12px;font-size:13.5px}
}
/* Le nom et sa coche restent dans l'en-tete du telephone de demonstration,
meme lorsque la maquette elle-meme devient tres etroite. */
@media (max-width:345px){
#accompagnement .ch-name{min-width:0}
#accompagnement .ch-name b{font-size:clamp(9px,3.7vw,12px)}
#accompagnement .ch-calls{display:none}
}
/* Entre 321 et 342 px, l'image automobile de la carte de champs prenait
encore trop de largeur et coupait le dernier mot du libelle. */
@media (min-width:321px) and (max-width:342px){
#metiers .champs-grid img{max-width:84px;max-height:84px}
}
/* Sous 328 px, quatre colonnes de tableau ne restent plus lisibles. Les
lignes deviennent de petites cartes : date au-dessus, operation et objet
au-dessous, puis le statut. Le thead reste disponible aux lecteurs d'ecran. */
@media (max-width:327px){
#securite .cw-scroll{padding-right:8px;padding-left:8px}
#securite .control-table{display:block;width:100%;table-layout:auto}
#securite .control-table thead{position:absolute;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap;border:0}
#securite .control-table tbody{display:grid;gap:7px}
#securite .control-table tr{display:grid;
grid-template-columns:minmax(48px,.55fr) minmax(0,1fr) 22px;
gap:4px 6px;padding:8px;border:1px solid var(--line-2);border-radius:9px}
#securite .control-table td{width:auto!important;min-width:0!important;max-width:none;
padding:0!important;border-bottom:0;font-size:9px;line-height:1.25;
white-space:normal;overflow-wrap:anywhere}
#securite .control-table td:nth-child(2),
#securite .control-table td:nth-child(3),
#securite .control-table td:nth-child(6),
#securite .control-table td:nth-child(7){display:none}
#securite .control-table td:nth-child(1){grid-column:1/-1;color:var(--muted);
font-size:8.5px;font-weight:650}
#securite .control-table td:nth-child(4){grid-column:1}
#securite .control-table td:nth-child(5){grid-column:2}
#securite .control-table td:nth-child(8){grid-column:3;align-self:center}
}
@media (max-width:293px){
.brand img{width:136px}
.nav-burger,.btn-dash{width:44px;height:44px;flex-basis:44px}
}
@media (max-width:310px){
#tarifs .compare-head{grid-template-columns:minmax(0,1fr);gap:6px}
#tarifs .compare-head span{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:275px){
.brand img{width:100px}
}
/* Entre le petit mobile et la tablette, les quatre avantages ne tiennent pas
sur une seule ligne (notamment en téléphone paysage). Deux colonnes gardent
chaque libellé lisible sans compter sur le masquage horizontal du hero. */
@media (max-width:719px){
#hero .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
#hero .hero-benefits span{min-width:0;border-right:0;border-bottom:1px solid var(--line-2)}
#hero .hero-benefits span:nth-last-child(-n+2){border-bottom:0}
#hero .hero-benefits b{white-space:normal}
}
@media (max-width:279px){
#hero .hero-benefits{grid-template-columns:minmax(0,1fr)}
#hero .hero-benefits span{border-bottom:1px solid var(--line-2)}
#hero .hero-benefits span:last-child{border-bottom:0}
#boutique .shop-card{min-width:0;padding:18px 14px}
#boutique .shop-card *{min-width:0}
#accompagnement h2{font-size:32px;overflow-wrap:anywhere}
#accompagnement .support-list a{min-width:0;padding:12px;gap:10px}
#accompagnement .support-list a span{min-width:0}
#accompagnement .support-list b,
#accompagnement .support-list small{overflow-wrap:anywhere}
#accompagnement .support-list .chev{display:none}
#accompagnement .accomp-bottom>div{min-width:0;padding:14px 12px;gap:10px;
align-items:flex-start}
#accompagnement .accomp-bottom>div>div{min-width:0}
#accompagnement .accomp-bottom .ic{width:42px;height:42px}
#accompagnement .accomp-bottom b,
#accompagnement .accomp-bottom p{overflow-wrap:anywhere}
#faq h2{font-size:29px}
#faq h2 .red{font-size:32px;overflow-wrap:anywhere}
#tarifs .price-foot span{display:grid;justify-items:center;min-width:0;
padding:8px 0;border-left:0;text-align:center;overflow-wrap:anywhere}
}
@media (max-width:287px){
#faq .final-mini{grid-template-columns:minmax(0,1fr)}
#faq .final-mini>span,
#faq .final-mini>span:nth-child(odd){min-width:0;border-left:0;padding:4px 0}
#faq .final-mini .g{grid-column:auto;justify-self:stretch;padding-inline:0}
#faq .final-mini .txt{min-width:0;overflow-wrap:anywhere}
}
/* Entre le grand mobile et la petite tablette, deux cartes avec leur image
deviennent trop serrées. Une colonne reste lisible jusqu'à 658 px ; ensuite
la cinquième carte est centrée pour ne pas laisser un trou visuel à droite. */
@media (min-width:561px) and (max-width:658px){
#metiers .champs-grid{grid-template-columns:minmax(0,1fr)}
#metiers .champs-grid article,
#metiers .champs-grid article>div{min-width:0}
}
@media (min-width:659px) and (max-width:899px){
#metiers .champs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#metiers .champs-grid article,
#metiers .champs-grid article>div{min-width:0}
#metiers .champs-grid article:last-child{grid-column:1/-1;justify-self:center;
width:calc((100% - 15px)/2)}
}
@media (min-width:561px) and (max-width:899px){
#metiers .metiers-bottom{grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:24px;row-gap:20px}
}
@media (max-width:1279px){
#securite .secu-copy h2{width:auto;max-width:100%}
#accompagnement .contact-form input:not([type="hidden"]),
#accompagnement .contact-form textarea{min-height:46px;font-size:16px}
#securite .verify-id,#securite .verify-id b{min-width:0;max-width:100%;
white-space:normal;overflow-wrap:anywhere}
}
/* Le texte agrandi à 200 % doit rester dans le flux sans être masqué par les
conteneurs mobiles. Les composants flexibles peuvent ainsi rétrécir et les
libellés longs reviennent à la ligne au lieu de déborder latéralement. */
@media (max-width:1279px){
h1,h2,h3,h4,h1 .red,h2 .red,h3 .red,h4 .red,
p,li,blockquote,strong,b,small,label,summary,a,button{
max-width:100%;overflow-wrap:break-word}
#hero .hero-benefits b{min-width:0;max-width:none;flex:1}
#metiers .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
#metiers .rail article{min-width:0;max-width:100%}
#metiers .rail article>div{min-width:0;max-width:100%;flex:1}
#boutique .shop-rail,
#accompagnement .support-list{grid-template-columns:minmax(0,1fr)}
#boutique .shop-card,
#boutique .shop-card h3,
#boutique .check-2col,
#boutique .check-2col li{min-width:0;max-width:100%}
#boutique .check-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
#accompagnement .support-list a{min-width:0;max-width:100%}
#accompagnement .support-list a>span{min-width:0;max-width:none;flex:1}
#accompagnement .support-list b,
#accompagnement .support-list small{overflow-wrap:anywhere}
#accompagnement .accomp-bottom>div{min-width:0;max-width:100%}
#accompagnement .accomp-bottom>div>div{min-width:0}
#tarifs .compare-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
#tarifs .compare-head span{min-width:0;overflow-wrap:anywhere}
#faq .avis-head>div{min-width:0;max-width:100%;flex:1}
#faq .avis-wordmark{max-width:100%;overflow-wrap:anywhere}
.app-search{min-width:0;white-space:normal;overflow-wrap:anywhere}
#securite .app-search{min-width:0;white-space:normal;overflow-wrap:anywhere;
text-overflow:clip}
.kpi{min-width:0}
.kpi b,.kpi small,.kpi em{white-space:normal;overflow-wrap:anywhere}
#faq .final-copy{width:100%;max-width:100%}
#faq .final-copy>*{min-width:0;max-width:100%}
#accompagnement .team-card .btn{height:auto;min-height:58px;
padding-block:12px;white-space:normal;line-height:1.35}
#accompagnement .ch-name b{white-space:normal;flex-wrap:wrap}
#faq .final-card .btn{height:auto;white-space:normal;line-height:1.35}
#faq .final-mini>span,#faq .final-mini .txt{min-width:0}
}
@media (max-width:560px){
#metiers .rail,
#boutique .check-2col{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:288px) and (max-width:1279px){
#faq .final-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
#gestion .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
#gestion .tiles article{min-width:0;overflow-wrap:anywhere}
#securite .control-table th{white-space:normal;overflow-wrap:anywhere;
line-height:1.15}
}
@media (max-width:1099px){
#hero .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
#hero .hero-benefits span{min-width:0;border-right:0;
border-bottom:1px solid var(--line-2)}
#hero .hero-benefits span:nth-last-child(-n+2){border-bottom:0}
#hero .hero-benefits b{white-space:normal}
}
#tarifs .ultra-break{display:none}
/* La regle mono-colonne des tout petits mobiles doit venir apres la regle
tablette ci-dessus. On reduit aussi les seuls titres dont la ponctuation
ou la derniere lettre pouvait se retrouver isolee a 240 px. */
@media (max-width:279px){
#hero .hero-benefits{grid-template-columns:minmax(0,1fr)}
#hero .hero-benefits span,
#hero .hero-benefits span:nth-last-child(-n+2){border-bottom:1px solid var(--line-2)}
#hero .hero-benefits span:last-child{border-bottom:0}
#hero .hero-cta .btn{padding-inline:10px;gap:8px;font-size:13.5px}
#metiers h2{font-size:32px}
#metiers .metier-cards b{font-size:13.5px;padding-inline:2px;overflow-wrap:normal}
#metiers .rail article{column-gap:14px;padding:16px 14px}
#metiers .rail b{overflow-wrap:normal}
#metiers .champs-grid article{flex-direction:column;align-items:center;text-align:center}
#metiers .champs-grid article>div{width:100%;min-width:0}
#metiers .champs-grid ul{display:inline-block;text-align:left}
#boutique .shop-card{padding-inline:12px}
#boutique .shop-card h3{grid-template-columns:28px minmax(0,1fr);column-gap:10px;font-size:19px}
#boutique .shop-card h3 svg{width:28px;height:28px}
#securite .secu-copy h2{font-size:34px;line-height:1.17}
#pilotage h2{font-size:30px}
#tarifs .center h2{font-size:34px;line-height:1.16}
#tarifs .ultra-break{display:block}
#faq h2 .red{font-size:29px}
#faq .avis-card{padding-inline:14px}
#faq .avis-head{gap:10px}
#faq .avis-card img.avis-logo{width:48px;height:48px}
#faq .avis-head b{font-size:15px}
}
@media (max-width:310px){
#tarifs .compare-row{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:12px}
#tarifs .compare-row>span{justify-content:center;text-align:center;overflow-wrap:normal}
#tarifs .compare-row>b{justify-self:center;transform:rotate(90deg)}
}
@media (min-width:900px) and (max-width:1279px){
#hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
column-gap:24px;align-items:center}
#hero .hero-copy{display:contents}
#hero .hero-copy h1{grid-column:1;grid-row:1;align-self:end}
#hero .hero-copy .lead{grid-column:1;grid-row:2;align-self:start}
#hero .hero-visual{grid-column:2;grid-row:1/3;width:100%;max-width:none;margin:0;align-self:center}
#hero .hero-benefits,#hero .hero-cards,#hero .hero-cta,#hero .trustline{grid-column:1/-1}
#metiers .metier-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
#metiers .rail{grid-template-columns:repeat(4,minmax(0,1fr))}
#metiers .champs-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
#metiers .champs-grid article{min-width:0;flex-direction:column;justify-content:flex-start;
text-align:center}
#metiers .champs-grid article>div{min-width:0;width:100%}
#metiers .champs-grid img{max-width:72px;max-height:84px}
#metiers .champs-grid ul{display:inline-block;text-align:left}
#metiers .metiers-bottom{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Les séries impaires restent centrées : aucune dernière carte ne doit
donner l'impression d'une colonne oubliée sur tablette ou mobile. */
@media (min-width:561px) and (max-width:899px){
#metiers .metier-cards a:last-child{grid-column:2;grid-row:4}
}
@media (max-width:560px){
#gestion .tiles article:last-child{grid-column:1/-1;justify-self:center;
width:calc((100% - 14px)/2)}
}
@media (min-width:561px) and (max-width:1279px){
#gestion .tiles article:last-child{grid-column:1/-1;justify-self:center;
width:calc((100% - 42px)/4)}
}
@media (min-width:561px){
#boutique .check-2col:not(.inclus)>li:last-child:nth-child(odd){
grid-column:1/-1;justify-self:center}
}
/* Sur le canevas bureau, les 17 cartes de gestion occupent trois rangées
pleines ; les deux dernières sont réparties symétriquement sur la 4e. */
@media (min-width:1280px){
#gestion .tiles article:nth-last-child(2){grid-column:2;grid-row:4}
#gestion .tiles article:last-child{grid-column:4;grid-row:4}
/* Le canevas est reduit jusqu'a 1280 px : ces cibles gardent ainsi
au moins 24 px une fois le facteur de scene applique. */
.viewport-shell .lpf-grid a{display:flex;align-items:center;min-height:32px}
.viewport-shell .lpf-foot .lpf-bottom a{display:inline-flex!important;
align-items:center;justify-content:center;min-width:32px;min-height:32px;
padding:4px 5px}
}
@media (max-width:1279px){
.viewport-shell .lpf-grid{grid-template-columns:1fr 1fr}
.viewport-shell .lpf-brand{grid-column:1/-1}
.viewport-shell .lpf-wa{grid-column:1/-1}
.viewport-shell .lpf-foot .lpf-bottom a{display:inline-flex!important;
align-items:center;min-height:32px;padding:4px 5px}
}
@media (max-width:560px){
.viewport-shell .lpf-grid{grid-template-columns:1fr}
.viewport-shell .lpf-bottom i{display:none}
.viewport-shell .lpf-bottom span{display:block;padding:2px 0}
}
/* Les ecrans avec encoche ou bords arrondis conservent leurs textes et
controles dans la zone reellement visible. Les valeurs sont nulles sur
les appareils sans marge de securite : aucun decalage n'y est ajoute. */
@media (max-width:1279px){
/* Sur mobile et tablette, l'en-tete reste dans le flux. Un en-tete collant
finissait necessairement par recouvrir un titre, une carte ou une image
au passage pendant le defilement, contrairement a la recette demandee. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
.header{position:relative;top:auto}
#stage .wrap{padding-left:max(26px,env(safe-area-inset-left,0px));
padding-right:max(26px,env(safe-area-inset-right,0px))}
/* Le logo deborde volontairement de 8 px pour son alignement optique.
Cette reserve l'empeche d'entrer dans une encoche laterale. */
#stage .header-in{padding-left:max(26px,calc(env(safe-area-inset-left,0px) + 8px))}
.topbar{padding-top:env(safe-area-inset-top,0px)}
.topbar a{padding-left:max(14px,env(safe-area-inset-left,0px));
padding-right:max(14px,env(safe-area-inset-right,0px))}
.nav{padding-left:max(24px,env(safe-area-inset-left,0px));
padding-right:max(24px,env(safe-area-inset-right,0px))}
.viewport-shell .lpf-wrap{padding-left:max(26px,env(safe-area-inset-left,0px));
padding-right:max(26px,env(safe-area-inset-right,0px))}
.viewport-shell .lpf-bottom{padding-left:max(26px,env(safe-area-inset-left,0px));
padding-right:max(26px,env(safe-area-inset-right,0px));
padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
#stage .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));
padding-right:max(18px,env(safe-area-inset-right,0px))}
#stage .header-in{padding-left:max(18px,calc(env(safe-area-inset-left,0px) + 8px))}
}
@media (max-width:360px){
/* Sous 360 px le logo n'a plus de marge negative. */
#stage .header-in{padding-left:max(18px,env(safe-area-inset-left,0px))}
}
@media (max-width:1279px) and (max-height:500px){
/* Le clavier mobile et les paysages bas ont trop peu de hauteur pour un
en-tete persistant : il reprend le flux et ne masque plus le champ actif. */
.header{position:relative;top:auto}
.sec{padding-top:36px;padding-bottom:36px}
#hero{padding-top:18px}
#hero .hero-grid{padding-top:0}
}
/* En paysage tres bas, le bandeau secondaire cede la place au parcours
principal. Chaque lien du menu peut alors entrer entier dans la zone de
defilement des hauteurs extremes. */
@media (max-width:1279px) and (max-height:280px){
html{scroll-padding-top:env(safe-area-inset-top,0px)}
.topbar{display:none}
/* Le bandeau masque n'absorbe plus l'encoche : l'en-tete reserve donc
lui-meme la zone haute avant d'afficher logo et commandes. */
.header{position:relative;top:auto;padding-top:env(safe-area-inset-top,0px)}
.header-in{height:44px}
.brand img{max-height:40px}
.nav-burger,.btn-dash{width:44px;height:44px;flex-basis:44px}
.nav{padding-top:0;padding-bottom:env(safe-area-inset-bottom,0px);
max-height:calc(100vh - 44px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
max-height:var(--menu-max-height,calc(100dvh - 44px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))}
.nav a{padding-top:6px;padding-bottom:6px;line-height:1.2}
}
/* Avec une encoche haute et seulement 120 a 140 px de viewport, les marges
du panneau ne doivent pas consommer la derniere cible tactile visible. */
@media (max-width:1279px) and (max-height:140px){
.nav{padding-top:0;padding-bottom:0}
.nav a{padding-top:2px;padding-bottom:2px;line-height:1.15}
}
/* Une fenêtre bureau très basse ne doit jamais piéger le bas de la carte CTA
hors de l'écran : dans ce cas elle reprend simplement le flux normal. */
@media (min-width:1280px) and (min-aspect-ratio:7/2){
/* Sur les formats panoramiques tres bas, le canevas reste a taille lisible
et ses contenus max-width demeurent centres dans toute la largeur. */
#stage{width:1672px;margin-inline:auto}
#faq .final-card{position:static;top:auto}
}
@media (min-width:1280px) and (max-width:1672px) and (min-aspect-ratio:7/2){
#stage{zoom:calc(100vw / 1672px)!important}
}
@media (min-width:1673px) and (min-aspect-ratio:7/2){
#stage{zoom:1!important}
}
/* Reflow extrême (fort zoom ou très petite fenêtre intégrée).
Sous 240 px, les pistes `1fr` conservaient encore la largeur minimale de
certains libellés : le débordement était ensuite masqué par les sections.
Toutes les pistes deviennent réellement réductibles et les compositions à
plusieurs colonnes reprennent une lecture verticale, centrée et complète. */
@media (max-width:239px){
#stage .wrap,
#hero .hero-grid,
#metiers>.wrap,
#pilotage .wrap,
.viewport-shell .lpf-wrap,
.viewport-shell .lpf-bottom{
padding-left:max(10px,env(safe-area-inset-left,0px))!important;
padding-right:max(10px,env(safe-area-inset-right,0px))!important
}
#stage .header-in{
height:auto;min-height:68px;gap:8px;
padding:6px max(8px,env(safe-area-inset-right,0px))
6px max(8px,env(safe-area-inset-left,0px))!important
}
.brand img{width:80px}
.hero-benefits,.hero-cards,.metier-cards,#metiers .rail,.champs-grid,
.metiers-bottom,.sync-side-cards,.sync-grid,.sync-diagram,.sync-benefits,
#fonctionnalites .fiche-haut,#fonctionnalites .fiche-vignettes,
#fonctionnalites .fiche-vehicule-in,.tiles,.gestion-bottom,
#boutique .shop-layout,#boutique .shop-previews,#boutique .check-2col,
#boutique .navy-band,.secu-grid,#securite .steps,#securite .verify-card,
.pilot-grid,#pilotage .pilot-cards,#pilotage .gains-row,
#accompagnement .accomp-grid,#accompagnement .accomp-bottom,
#accompagnement .contact-card,#tarifs .pricing-grid,#tarifs .price-foot,
#tarifs .pricing-ctas,#faq .avis-grid,#faq .final-grid,#faq .final-mini,
.viewport-shell .lpf-grid{
grid-template-columns:minmax(0,1fr)!important
}
#stage section *,#stage footer *{min-width:0;max-width:100%}
#metiers .rail article{
grid-template-columns:33px minmax(0,1fr);width:100%;
column-gap:12px;padding:14px 10px
}
#fonctionnalites .node{
grid-template-columns:32px minmax(0,1fr);column-gap:8px;padding:12px 9px
}
#fonctionnalites .node svg{width:32px;height:32px}
#fonctionnalites .fiche-card{padding-inline:8px}
#fonctionnalites .fiche-photo{width:100%;height:auto}
#boutique .navy-band{padding:14px 10px}
#boutique .navy-band>div{min-width:0;padding:8px 0;gap:10px}
#boutique .navy-band>div+div{
border-left:0;border-top:1px solid rgba(255,255,255,.22)
}
#boutique .navy-band .ic{width:48px;height:48px}
#boutique .navy-band .ic svg{width:24px;height:24px}
#boutique .navy-band b{font-size:16px}
#boutique .navy-band p{font-size:12px}
#securite .steps{grid-template-columns:minmax(0,1fr)}
#securite .steps li{width:100%;min-width:0;gap:6px}
#securite .steps .step-card{
width:100%;max-width:100%;padding:10px 8px;gap:7px
}
#securite .verify-card .qr{
width:min(150px,100%);height:auto;aspect-ratio:1
}
#pilotage .mini-card{width:100%;justify-self:stretch}
#accompagnement .chat-body{
grid-template-columns:minmax(0,1fr);padding-inline:8px
}
#accompagnement .bub,#accompagnement .bub-file{
width:auto;max-width:100%;min-width:0;overflow-wrap:anywhere
}
#tarifs .includes-card .check-list{padding-left:0}
#tarifs .includes-card .check-list li{min-width:0}
#tarifs .pricing-ctas .btn{
width:100%;min-width:0;padding-inline:8px;
white-space:normal;overflow-wrap:anywhere
}
h1,h2,h3,h4{overflow-wrap:anywhere}
}
/* À cette largeur, trois éléments de 44 px ne peuvent plus partager la même
ligne. La marque garde sa propre rangée et les deux commandes restent des
cibles tactiles de taille complète, centrées sur la suivante. */
@media (max-width:199px){
#stage .header-in{flex-wrap:wrap;justify-content:center}
#stage .header-in .brand{flex:1 0 100%;justify-content:center}
#stage .header-in .nav-burger{margin-left:auto}
#stage .header-in .btn-dash{margin-right:auto}
#hero .hero-cta .btn{padding-inline:6px;font-size:12.5px;gap:6px}
#metiers .callout{
flex-direction:column;align-items:center;text-align:center;
padding:12px 8px;gap:8px
}
#boutique .navy-band>div{
flex-direction:column;align-items:center;text-align:center
}
#accompagnement .bub-file{flex-direction:column;align-items:flex-start}
}
@media (max-width:159px){
.topbar{font-size:10px;line-height:1.3}
.topbar a{gap:4px;padding-inline:4px}
.brand img{width:70px}
h1{font-size:24px}
#metiers h2,#securite .secu-copy h2,#pilotage h2,
#accompagnement h2,#tarifs .center h2,#faq h2,#faq h2 .red{
font-size:24px;line-height:1.17
}
.eyebrow{font-size:10px;letter-spacing:.12em}
}
/* Repli progressif : si aucun script ne s'exécute, la navigation mobile ne
dépend pas d'un bouton inerte. Elle reste dans le flux, lisible et tactile. */
@media (max-width:1279px){
.no-js #stage .header-in{height:auto;min-height:68px;flex-wrap:wrap;padding-block:10px}
.no-js #stage .nav-burger{display:none}
.no-js #stage .nav{
position:static;order:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
flex:1 0 100%;width:100%;min-height:0;max-height:none;margin:0;padding:8px 0;
transform:none;overflow:visible;box-shadow:none;border-top:1px solid var(--line);
border-bottom:0
}
.no-js #stage .nav a{text-align:center;padding:10px 4px}
}
@media (max-width:560px){
.no-js #stage .nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:239px){
.no-js #stage .nav{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:199px){
.no-js #stage .btn-dash{margin-inline:auto}
}
/* Les aplats de fond sont neutralisés par le mode de couleurs forcées. Le
pictogramme du menu reste donc dessiné avec la couleur système du bouton. */
@media (forced-colors:active){
.nav-burger span:not(.sr-only){
forced-color-adjust:none;background:ButtonText
}
}
/* Netteté et composition mobile.
Les visuels 2x restent proches de leur taille de rendu native : aucune
miniature n'est agrandie à la largeur de l'écran et les séries restent
centrées lorsqu'elles n'occupent pas toute la rangée. */
@media (max-width:1279px){
#fonctionnalites .fiche-photos{
display:grid;justify-items:center;gap:12px;width:100%
}
#fonctionnalites .fiche-photo{
width:min(165px,100%);height:auto;max-height:none;object-fit:contain;
margin-inline:auto
}
#fonctionnalites .fiche-vignettes{
display:grid;grid-template-columns:repeat(4,minmax(0,78px));
justify-content:center;gap:8px;width:100%
}
#fonctionnalites .fiche-vignettes img{
display:block;width:100%;height:auto;aspect-ratio:79/59;object-fit:cover
}
#boutique .shop-previews figure{
width:min(100%,408px);justify-self:center
}
#boutique .shop-previews figure:nth-child(1){width:min(100%,380px)}
#boutique .shop-previews figure:nth-child(3){width:min(100%,390px)}
#accompagnement .team-card{
width:min(100%,513px);justify-self:center
}
#faq .avis-card{
width:min(100%,594px);justify-self:center
}
}
@media (max-width:560px){
#metiers .metier-cards{
grid-template-columns:repeat(2,minmax(0,159px));justify-content:center
}
#metiers .metier-cards img{
width:100%;height:auto;aspect-ratio:159/174;object-fit:cover
}
#hero h1,
#metiers h2,
#fonctionnalites h2,
#gestion h2,
#boutique h2,
#securite .secu-copy h2,
#pilotage h2,
#accompagnement h2,
#tarifs .center h2,
#faq h2{
width:auto;max-width:100%;margin-inline:auto;text-align:center
}
#hero .hero-copy>.lead,
#metiers .metiers-intro>.lead,
#fonctionnalites .sync-intro>.lead,
#gestion .gestion-grid>div:first-child>.lead,
#boutique .intro-block>.lead,
#securite .secu-copy>.lead,
#pilotage .pilot-grid>div:first-child>.lead,
#accompagnement .accomp-grid>div:first-child>.lead,
#tarifs .center>.lead{
max-width:38ch;margin-left:auto;margin-right:auto;text-align:center
}
#metiers .callout,
#accompagnement .wa-line{
justify-content:center;text-align:center
}
}
@media (min-width:280px) and (max-width:560px){
#metiers h2,
#fonctionnalites h2,
#gestion h2,
#boutique h2,
#securite .secu-copy h2,
#pilotage h2,
#accompagnement h2,
#tarifs .center h2,
#faq h2,
#faq h2 .red{
font-size:clamp(30px,8.6vw,34px);line-height:1.16
}
}
/* Un téléphone tourné en paysage dépasse souvent 560 px de large tout en
restant très bas. Il conserve donc la composition centrée du téléphone,
sans reprendre l'alignement tablette à gauche. */
@media (min-width:561px) and (max-width:899px) and (max-height:560px){
#hero h1,
#metiers h2,
#fonctionnalites h2,
#gestion h2,
#boutique h2,
#securite .secu-copy h2,
#pilotage h2,
#accompagnement h2,
#tarifs .center h2,
#faq h2,
#faq h2 .red{
width:auto;max-width:100%;margin-inline:auto;text-align:center;
font-size:34px;line-height:1.16
}
#hero .hero-copy>.lead,
#metiers .metiers-intro>.lead,
#fonctionnalites .sync-intro>.lead,
#gestion .gestion-grid>div:first-child>.lead,
#boutique .intro-block>.lead,
#securite .secu-copy>.lead,
#pilotage .pilot-grid>div:first-child>.lead,
#accompagnement .accomp-grid>div:first-child>.lead,
#tarifs .center>.lead{
max-width:60ch;margin-left:auto;margin-right:auto;text-align:center
}
#metiers .callout,
#accompagnement .wa-line{
justify-content:center;text-align:center
}
}
@media (min-width:561px) and (max-width:899px){
#metiers .metier-cards{
grid-template-columns:repeat(3,minmax(0,159px));justify-content:center
}
#metiers .metier-cards img{
width:100%;height:auto;aspect-ratio:159/174;object-fit:cover
}
}
@media (min-width:900px) and (max-width:1279px){
#metiers .metier-cards{
grid-template-columns:repeat(5,minmax(0,159px));justify-content:center
}
#metiers .metier-cards img{
width:100%;height:auto;aspect-ratio:159/174;object-fit:cover
}
}
/* ═══════════════════════════════════════════════════════════════════════
ACCUEIL TÉLÉPHONE AUTONOME
Le téléphone ne reçoit pas la page bureau simplement empilée. Il dispose
d’un parcours court, tactile et sans calque fixe, avec deux images utiles
seulement dans le contenu : la marque et l’exemple de fiche objet.
═══════════════════════════════════════════════════════════════════════ */
.mobile-home,.mobile-skip{display:none}
@media (max-width:767px), (max-width:899px) and (max-height:560px){
:root{
--m-navy:var(--navy);
--m-navy-2:var(--navy-2);
--m-red:var(--red);
--m-green:var(--green);
--m-ink:var(--ink);
--m-muted:var(--muted);
--m-panel:var(--panel);
--m-line:var(--line);
--m-white:#FFFFFF;
--m-radius:20px;
--m-radius-s:14px;
--m-shadow:0 14px 36px rgba(4,23,54,.10)
}
body{background:#fff;color:var(--m-ink);overflow-x:clip}
.viewport-shell,.desktop-skip{display:none!important}
.mobile-home{display:block;min-width:0;background:#fff}
.mobile-skip{display:block}
.mobile-home,.mobile-home *{box-sizing:border-box}
.mobile-home a{-webkit-tap-highlight-color:transparent}
.mobile-home button,.mobile-home summary,.mobile-home a{touch-action:manipulation}
.mobile-home :focus-visible{outline-color:var(--m-red)}
.mobile-home .m-hero :focus-visible,
.mobile-home .m-price-card :focus-visible{outline-color:#fff}
.m-topbar{
min-height:44px;padding:env(safe-area-inset-top,0) 16px 0;
display:grid;place-items:center;background:var(--m-navy);color:#fff
}
.m-topbar a{
min-height:44px;display:inline-flex;align-items:center;justify-content:center;
gap:7px;padding:6px 0;color:#fff;font-size:11.5px;font-weight:750;text-align:center;text-decoration:none
}
.m-topbar svg{width:17px;height:17px;color:#58D68D}
.m-header{
min-height:70px;padding:10px max(18px,env(safe-area-inset-right,0px))
10px max(18px,env(safe-area-inset-left,0px));
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:#fff;border-bottom:1px solid var(--m-line)
}
.m-brand{display:flex;align-items:center;min-width:0;min-height:44px}
.m-brand img{display:block;width:152px;height:auto}
.m-login{
min-height:46px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;
gap:7px;border:1px solid var(--m-line);border-radius:999px;background:var(--m-panel);
color:var(--m-navy);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap
}
.m-login svg{width:18px;height:18px}
.m-quicknav{
width:100%;padding:8px max(10px,env(safe-area-inset-right,0px))
8px max(10px,env(safe-area-inset-left,0px));
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
background:#fff;border-bottom:1px solid var(--m-line)
}
.m-quicknav a{
min-width:0;min-height:58px;padding:7px 3px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:5px;border-radius:11px;
color:var(--m-muted);font-size:11px;font-weight:750;line-height:1.12;
text-align:center;text-decoration:none
}
.m-quicknav a:first-child{background:#FFF4F4;color:var(--m-red)}
.m-quicknav svg{width:20px;height:20px;flex:none}
#mobile-content{min-width:0;outline:none}
.m-hero{
padding:34px max(18px,calc((100vw - 680px)/2)) 38px;
text-align:center;
color:#fff;background:
/* 05/09/2026 [Guifette-86] SG-260904-8SJG — LE HALO EST RETIRE.
Un rouge a 34% sur le marine ne donne pas du rouge : il donne du magenta et du
violet. Composite mesure du centre du halo vers la gauche : #511933 (332deg),
#431934 (321deg), #3F1B37 (313deg), #351A36 (298deg), #1D1C3C (242deg). Une bande
violet-magenta en haut de l ecran, la premiere chose qu on voit sur un telephone.
Ni bleu, ni blanc, ni rouge. Le degrade marine, lui, reste. */
linear-gradient(152deg,var(--m-navy) 0%,var(--m-navy-2) 100%)
}
.m-eyebrow,.m-kicker{
margin:0 0 10px;font-size:11px;line-height:1.3;font-weight:850;
letter-spacing:.13em;text-transform:uppercase
}
/* 05/09/2026 [Guifette-86] SG-260904-8SJG — le sur-titre etait rose pale (#F9A8AA,
hsl 359deg 87% 82%). Il prend le BLANC, troisieme couleur du bleu blanc rouge.
⚠️ PAS le rouge de la charte : a 11 px c est du texte courant, seuil 4,5:1, et
#E2131B n y donne que 3,68:1 — on echangerait un defaut de couleur contre un defaut
de lecture. Le blanc donne 17,8:1. */
.m-eyebrow{max-width:46ch;margin-inline:auto;color:#fff}
.m-kicker{color:var(--m-red)}
.m-hero h1{
max-width:14ch;margin:0 auto;font-family:var(--fd);font-size:clamp(36px,10.4vw,46px);
font-weight:660;line-height:1.02;letter-spacing:-.035em;color:#fff;
/* 05/09/2026 [Guifette-86] SG-260904-8SJG — les jambages sortaient de la boite.
line-height 1.02 en Fraunces : a 39 px la ligne fait 39,78 px et le « p » de
« poche » deborde de 4 px (5 au zoom 114% d Enyss). ON NE TOUCHE PAS AU
line-height : le porter a 1,23 ferait grandir le titre de ~8 px par ligne et
casserait la composition en trois lignes de la maquette. Ce padding contient les
jambages sans deplacer une seule ligne. Mesure : 4 px -> 0. */
padding-bottom:5px
}
/* 05/09/2026 [Guifette-86] SG-260904-8SJG — la troisieme ligne etait rose saumon
(#FF7D80, hsl 359deg 100% 75% : le rouge de la charte eclairci jusqu a paraitre rose).
Elle prend var(--m-red), que ce bloc declare ligne 2913 et emploie deja douze fois.
⚠️ Ce changement n etait PAS acceptable tant que le halo rouge etait la : sous le
halo le fond composite est #511A33 et #E2131B n y donne que 2,81:1, sous le seuil de
3:1 du grand texte. Le halo retire, le rapport remonte a 3,46:1 — conforme. L ordre
des deux corrections n est pas un detail. */
.m-hero h1 span{color:var(--m-red)}
.m-hero-copy{margin:18px auto 0;max-width:38ch;color:#DCE5F2;font-size:15px;line-height:1.58}
.m-offer{
max-width:520px;margin:22px auto 0;padding:15px;display:grid;
grid-template-columns:40px minmax(0,1fr);text-align:left;
align-items:center;gap:12px;border:1px solid rgba(255,255,255,.18);
border-radius:var(--m-radius-s);background:rgba(255,255,255,.09)
}
.m-offer>svg{width:36px;height:36px;padding:8px;border-radius:11px;background:var(--m-red);color:#fff}
.m-offer p{margin:0;min-width:0}
.m-offer strong,.m-offer span{display:block}
.m-offer strong{font-size:15px;color:#fff}
.m-offer span{margin-top:3px;color:#C8D5E7;font-size:12px;line-height:1.4}
.m-hero-actions{max-width:520px;margin:18px auto 0;display:grid;gap:10px}
.m-btn{
width:100%;min-height:54px;padding:13px 16px;display:inline-flex;align-items:center;
justify-content:center;gap:9px;border:1px solid transparent;border-radius:13px;
font-size:14px;font-weight:850;line-height:1.2;text-align:center;text-decoration:none
}
.m-btn svg{width:18px;height:18px;flex:none}
.m-btn-primary{background:var(--m-red);color:#fff;box-shadow:0 10px 24px rgba(226,19,27,.24)}
.m-btn-ghost{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:#fff}
.m-trust{
max-width:520px;margin:18px auto 0;padding:0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;
color:#DCE5F2;font-size:11px;font-weight:750
}
.m-trust li{
min-width:0;min-height:70px;padding:9px 4px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.28;
border:1px solid rgba(255,255,255,.12);border-radius:12px;
background:rgba(255,255,255,.055)
}
.m-trust svg{width:17px;height:17px;padding:3px;border-radius:50%;background:#1F9D58;color:#fff;flex:none}
.m-section{
padding:38px max(18px,calc((100vw - 680px)/2));min-width:0;background:#fff
}
.m-section:nth-of-type(even){background:#F7F9FC}
.m-section h2,.m-final h2{
margin:0;font-family:var(--fd);font-size:clamp(29px,8.3vw,36px);
font-weight:650;line-height:1.1;letter-spacing:-.025em;color:var(--m-navy)
}
.m-section h2 span,.m-final h2 span{color:var(--m-red)}
.m-intro{margin:13px 0 0;color:var(--m-muted);font-size:14px;line-height:1.58}
.m-section>.m-kicker,.m-section>h2{text-align:center}
.m-section>h2{max-width:18ch;margin-inline:auto}
.m-section>.m-intro{max-width:42ch;margin-inline:auto;text-align:center}
.m-step-list{margin:22px 0 0;padding:0;display:grid;gap:10px;list-style:none}
.m-step-list li{
min-width:0;padding:15px;display:grid;grid-template-columns:40px minmax(0,1fr);
gap:12px;border:1px solid var(--m-line);border-radius:var(--m-radius-s);background:#fff
}
.m-step-number{
width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
background:#FFF4F4;color:var(--m-red);font-size:16px;font-weight:900
}
.m-step-list strong{display:block;margin:1px 0 4px;color:var(--m-navy);font-size:15px}
.m-step-list p{margin:0;color:var(--m-muted);font-size:12.5px;line-height:1.45}
.m-object-card{
margin-top:18px;padding:14px;display:grid;grid-template-columns:112px minmax(0,1fr);
align-items:center;gap:16px;border:1px solid var(--m-line);border-radius:var(--m-radius);
background:linear-gradient(145deg,#fff,#F0F4F9);box-shadow:var(--m-shadow)
}
.m-object-card>img{
display:block;width:112px;height:auto;max-height:166px;object-fit:contain;
border-radius:12px;background:#fff
}
.m-object-state{
display:inline-flex;align-items:center;gap:5px;color:var(--m-green);
font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.07em
}
.m-object-state svg{width:16px;height:16px}
.m-object-card h3{margin:7px 0 6px;color:var(--m-navy);font-size:19px;line-height:1.15}
.m-object-card p{margin:0;color:var(--m-muted);font-size:12px;line-height:1.48}
.m-feature-list,.m-faq-list{margin-top:22px;display:grid;gap:9px}
.m-feature-list details,.m-faq-list details{
min-width:0;border:1px solid var(--m-line);border-radius:var(--m-radius-s);
background:#fff;overflow:hidden
}
.m-feature-list summary,.m-faq-list summary{
min-height:68px;padding:11px 13px;display:grid;align-items:center;gap:11px;
color:var(--m-navy);cursor:pointer;list-style:none
}
.m-feature-list summary{grid-template-columns:42px minmax(0,1fr) 18px}
.m-faq-list summary{grid-template-columns:minmax(0,1fr) 18px;font-size:13.5px;font-weight:800;line-height:1.35}
.m-feature-list summary::-webkit-details-marker,.m-faq-list summary::-webkit-details-marker{display:none}
.m-feature-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
background:var(--m-panel);color:var(--m-red)
}
.m-feature-icon svg{width:22px;height:22px}
.m-feature-list summary strong,.m-feature-list summary small{display:block}
.m-feature-list summary strong{font-size:14px}
.m-feature-list summary small{margin-top:2px;color:var(--m-muted);font-size:11.5px;font-weight:650;line-height:1.35}
.m-feature-list summary i,.m-faq-list summary i{
width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,2px);transition:transform .18s
}
.m-feature-list details[open] summary i,.m-faq-list details[open] summary i{
transform:rotate(225deg) translate(-2px,2px)
}
.m-feature-list details>div,.m-faq-list details>div{padding:0 14px 14px}
.m-feature-list details>div p,.m-faq-list details>div p{
margin:0;padding-top:12px;border-top:1px solid var(--m-line);
color:var(--m-muted);font-size:12.5px;line-height:1.55
}
.m-job-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.m-job-grid a{
min-width:0;min-height:54px;padding:11px 12px;display:flex;align-items:center;
justify-content:space-between;gap:7px;border:1px solid var(--m-line);
border-radius:12px;background:#fff;color:var(--m-navy);font-size:12px;
font-weight:800;line-height:1.25;text-decoration:none
}
.m-job-grid svg,.m-text-link svg{width:15px;height:15px;flex:none;color:var(--m-red)}
.m-text-link{
width:max-content;max-width:100%;min-height:48px;margin:12px auto 0;
display:flex;align-items:center;gap:8px;
color:var(--m-red);font-size:13px;font-weight:850;text-decoration:none
}
.m-pricing{background:#fff!important}
.m-price-card{
padding:24px 20px;border-radius:24px;color:#fff;
text-align:center;background:linear-gradient(150deg,var(--m-navy),#0A2B58);
box-shadow:var(--m-shadow)
}
.m-price-card .m-kicker{color:#F9A8AA}
.m-price-card h2{color:#fff}
.m-price-card h2 span{font-size:1.45em;color:#FF7D80}
.m-price-next{margin:15px 0 0;color:#DCE5F2;font-size:14px;line-height:1.5}
.m-price-next strong{color:#fff;font-size:18px}
.m-annual{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.09);color:#DCE5F2;font-size:11.5px;line-height:1.45}
.m-price-card ul{margin:18px 0;padding:17px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);display:grid;gap:10px;list-style:none}
.m-price-card li{
width:min(100%,220px);margin-inline:auto;display:flex;align-items:center;gap:8px;
color:#EDF3FA;font-size:12.5px;font-weight:700;text-align:left
}
.m-price-card li svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--m-green);color:#fff;flex:none}
.m-price-card>small{display:block;margin-top:10px;color:#BAC9DD;font-size:11px;text-align:center}
.m-quotes{margin-top:20px;display:grid;gap:10px}
.m-quotes figure{margin:0;padding:17px;border:1px solid var(--m-line);border-radius:var(--m-radius-s);background:#fff}
.m-quotes blockquote{margin:0;color:var(--m-navy);font-family:var(--fd);font-size:16px;line-height:1.45}
.m-quotes figcaption{margin-top:13px;padding-top:11px;border-top:1px solid var(--m-line)}
.m-quotes figcaption strong,.m-quotes figcaption span{display:block}
.m-quotes figcaption strong{color:var(--m-red);font-size:12px}
.m-quotes figcaption span{margin-top:2px;color:var(--m-muted);font-size:11.5px}
.m-help-card{
margin-top:16px;padding:18px;display:grid;grid-template-columns:44px minmax(0,1fr);
gap:12px;border-radius:var(--m-radius);background:#EAF8EF;border:1px solid #C4E9D1
}
.m-help-card>svg{width:44px;height:44px;padding:10px;border-radius:13px;background:var(--m-green);color:#fff}
.m-help-card h3{margin:2px 0 3px;color:#075D2B;font-size:17px}
.m-help-card p{margin:0;color:#316744;font-size:12px;line-height:1.42}
.m-help-card .m-btn{grid-column:1/-1;margin-top:2px}
.m-btn-whatsapp{background:var(--m-green);color:#fff}
.m-final{
padding:38px max(18px,calc((100vw - 680px)/2)) 42px;
text-align:center;background:#FFF4F4
}
.m-final>svg{width:52px;height:52px;padding:13px;border-radius:16px;background:#fff;color:var(--m-red);box-shadow:var(--m-shadow)}
.m-final h2{margin-top:16px}
.m-final p{margin:11px 0 18px;color:var(--m-muted);font-size:13px;line-height:1.5}
.m-final-login{min-height:46px;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--m-navy);font-size:12.5px;font-weight:800}
.mobile-home .lpf-foot{margin-top:0;padding-top:36px!important}
.mobile-home .lpf-wrap{padding-inline:16px!important}
.mobile-home .lpf-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;align-items:stretch
}
.mobile-home .lpf-brand{
grid-column:1/-1!important;padding:0 6px 10px;text-align:center
}
.mobile-home .lpf-brand img{max-width:218px;height:auto;margin-inline:auto}
.mobile-home .lpf-brand p{margin:10px auto 0!important}
.mobile-home .lpf-grid>div:nth-child(n+2):nth-child(-n+5){
height:100%;padding:14px 10px;border:1px solid var(--m-line);
border-radius:14px;background:#F7F9FC
}
.mobile-home .lpf-grid .lpf-title{text-align:center}
.mobile-home .lpf-grid a:not(.lpf-wa-btn){
min-height:44px;display:flex;align-items:center;justify-content:center;
/* MOB-PUB-002 reprise [Bouvreuil-66 · MAC-260913-42ZC · Claude Code] — texte agrandi : un mot long se coupe dans sa case au lieu d'en sortir */
overflow-wrap:anywhere;
padding:6px 2px;text-align:center;font-size:14px!important;line-height:1.35
}
/* MOB-PUB-002 [Bouvreuil-66 · MAC-260913-42ZC · Claude Code] 13/09/2026 — pied de page téléphone : liens métiers et
ressources passés de 11,5 à 14 px, mentions et informations de 12 à 13 px. Hauteur des cibles
inchangée (44 px mini) ; le pied de bureau (.viewport-shell) ne lit pas ces règles. */
.mobile-home .lpf-brand p{font-size:13px!important}
.mobile-home .lpf-wa small{font-size:13px}
.mobile-home .lpf-wa{grid-column:1/-1!important;margin-top:2px;text-align:center}
.mobile-home .lpf-wa-head{justify-content:center;text-align:left}
.mobile-home .lpf-wa-btn{
min-height:48px;display:flex!important;align-items:center;justify-content:center
}
.mobile-home .lpf-foot .lpf-bottom a{
min-height:44px!important;display:inline-flex!important;align-items:center;padding:4px 6px;
font-size:13px!important
}
.mobile-home .lpf-foot .lpf-bottom{
margin-top:28px!important;padding:16px max(16px,env(safe-area-inset-right,0px))
max(18px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px;
line-height:1.45;font-size:13px!important
}
.mobile-home .lpf-foot .lpf-bottom i{display:none}
.mobile-home .lpf-foot .lpf-bottom span{
display:inline-flex!important;flex-wrap:wrap;align-items:center;justify-content:center;
gap:0 5px;padding:2px 0!important
}
@media (max-width:340px){
.m-brand img{width:140px}
/* MOB-PUB-002 reprise [Bouvreuil-66 · MAC-260913-42ZC · Claude Code] — au fond de page, la bulle Atelier (16 px du coin,
52 px) recouvrait le bord de « Gérer mon choix publicitaire » passé à 13 px : la dernière ligne remonte au-dessus. */
.mobile-home .lpf-foot .lpf-bottom{padding-bottom:max(72px,env(safe-area-inset-bottom,0px))!important}
.m-login{width:46px;padding:0}
.m-login span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.m-quicknav a{font-size:10.5px}
.m-object-card{grid-template-columns:1fr;text-align:center}
.m-object-card>img{margin-inline:auto}
}
@media (min-width:600px) and (max-height:560px){
.m-header,.m-quicknav{width:min(100%,720px);margin-inline:auto}
.m-hero{padding-top:26px;padding-bottom:30px}
.m-hero h1{font-size:44px}
.m-hero-copy{max-width:56ch}
.m-hero-actions{grid-template-columns:1fr 1fr}
.m-trust{grid-template-columns:repeat(3,1fr)}
.m-step-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-step-list li{grid-template-columns:1fr;align-content:start}
.m-object-card{max-width:540px;margin-inline:auto}
.m-job-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-quotes{grid-template-columns:1fr 1fr}
.m-price-card{max-width:600px;margin-inline:auto}
.m-help-card{max-width:600px;margin-inline:auto;margin-top:16px}
.mobile-home .lpf-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mobile-home .lpf-brand,.mobile-home .lpf-wa{grid-column:1/-1!important}
}
/* MOB-PUB-001 [Bouvreuil-66 · MAC-260913-42ZC · Claude Code] 13/09/2026 — écran court (320×568, 360×640, paysage 844×390) :
« Créer mon registre gratuitement » tombait sous l'écran (171 px de défilement à 320, 20 à 360,
246 en paysage). On resserre les seuls espacements du haut ; tailles de texte et cibles tactiles
inchangées (lien du bandeau 44 px mini, « Se connecter » 46 px). Dans ce bloc téléphone : une
fenêtre de bureau courte ne reçoit jamais l'accueil téléphone, donc jamais ces règles. */
@media (max-height:700px){
.m-topbar a{line-height:1.3}
.m-header{min-height:62px;padding-top:8px;padding-bottom:8px}
.m-hero{padding-top:20px}
.m-eyebrow{margin-bottom:6px}
.m-hero-copy{margin-top:12px;line-height:1.5}
.m-offer{margin-top:14px;padding:11px 15px}
.m-hero-actions{margin-top:14px}
}
@media (min-width:600px) and (max-height:560px){
.m-eyebrow{max-width:none}
}
}
/* ── 27/08/2026, rapport QA n° 56 ─────────────────────────────────────────────
Habillage des messages affichés en haut de l'accueil après l'envoi du
formulaire Contact. Couleurs prises dans la charte de la page (--green,
--red), aucune nouvelle teinte introduite. Le bandeau se place avant tout
le contenu, comme la page Contact l'annonce. */
.hp5-flash{
margin:0;padding:14px 20px;
font:600 15px/1.45 var(--fb, system-ui, sans-serif);
text-align:center;color:#fff;
}
.hp5-flash--ok{background:var(--green,#00883A)}
.hp5-flash--ko{background:var(--red,#E2131B)}
@media (max-width:560px){ .hp5-flash{padding:12px 16px;font-size:14px} }