/* ==========================================================================
SOS DATA — Design system
Palette bleue confiance + accent CTA + orange réservé au badge garantie
========================================================================== */
/* Polices chargées via dans le de chaque page (preconnect + stylesheet)
plutôt que par @import : évite le chaînage de requêtes qui retarde l'affichage. */
:root{
/* Couleurs */
--blue-deep:#0B3B7A;
--blue-deeper:#071F42;
--blue-mid:#123E7C;
--blue-bg:#E8F0FB;
--blue-bg-2:#F4F8FD;
--white:#FFFFFF;
--ink:#0C1B33;
--ink-soft:#48577A;
--ink-faint:#7C8AA8;
--accent:#1B6DE0;
--accent-hover:#1558B8;
--accent-ink:#0A3D8F;
--guarantee:#F5820B;
--guarantee-ink:#8A4600;
--success:#1C9B6B;
--border:#D8E3F5;
--border-soft:#EAF1FB;
/* Typo */
--font-display:'Plus Jakarta Sans', system-ui, sans-serif;
--font-body:'Plus Jakarta Sans', system-ui, sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, monospace;
/* Rayons / ombres */
--radius-sm:10px;
--radius-md:16px;
--radius-lg:28px;
--shadow-sm:0 2px 8px rgba(11,59,122,.08);
--shadow-md:0 12px 32px rgba(11,59,122,.14);
--shadow-lg:0 24px 64px rgba(7,31,66,.24);
/* Rythme */
--section-pad: clamp(3.5rem, 7vw, 6.5rem);
--container: 1180px;
--sticky-call-h: 64px;
}
/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
scroll-behavior:smooth;
overflow-x:hidden;
overflow-x:clip;
-webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
margin:0;
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
color:var(--ink);
background:var(--white);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
overflow-x:clip;
max-width:100%;
}
img, video{ max-width:100%; height:auto; display:block; }
svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; margin:0 0 .6em; color:var(--blue-deeper); overflow-wrap:anywhere; }
p{ margin:0 0 1em; overflow-wrap:break-word; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
input, select, textarea{ font-family:inherit; font-size:1rem; max-width:100%; }
/* L'attribut natif [hidden] doit toujours l'emporter, même sur les éléments
dont une classe (.btn, .price-panel...) définit son propre "display". */
[hidden]{ display:none !important; }
.skip-link{
position:absolute; left:-9999px; top:0; background:var(--blue-deep); color:#fff;
padding:.8em 1.2em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--guarantee); outline-offset:2px; }
.container{
width:100%;
max-width:var(--container);
margin-inline:auto;
padding-inline:clamp(.9rem, 4vw, 2rem);
min-width:0;
}
.section{ padding-block:var(--section-pad); }
.section-alt{
background:var(--blue-bg-2);
background-image:radial-gradient(1px 1px at 20px 20px, rgba(11,59,122,.08) 1px, transparent 0);
background-size:26px 26px;
}
.section-deep{ background:var(--blue-deep); color:#fff; }
.section-deep h2, .section-deep h3{ color:#fff; }
.eyebrow{
display:inline-flex; align-items:center; gap:.5em;
font-family:var(--font-mono); font-size:.78rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink);
background:var(--blue-bg); border:1px solid var(--border); border-radius:999px;
padding:.4em 1em; margin-bottom:1em;
}
.section-deep .eyebrow{ color:#BFD6FA; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.section-head{ max-width:640px; margin-bottom:2.75rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:800; letter-spacing:-.01em; }
h2 .accent{ color:var(--accent); }
.lede{ color:var(--ink-soft); font-size:1.08rem; }
/* --------------------------------- Boutons -------------------------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.6em;
font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer;
border-radius:999px; padding:.95em 1.8em; border:2px solid transparent;
transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
white-space:nowrap;
max-width:100%;
box-sizing:border-box;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(27,109,224,.35); }
.btn-primary:hover{ background:var(--accent-hover); box-shadow:0 10px 26px rgba(27,109,224,.45); }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline-blue{ background:transparent; color:var(--blue-deep); border-color:var(--blue-deep); }
.btn-outline-blue:hover{ background:var(--blue-deep); color:#fff; }
.btn-block{ width:100%; }
.btn-lg{ padding:1.1em 2.1em; font-size:1.05rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
@media (max-width:520px){
.btn{
white-space:normal;
text-align:center;
line-height:1.25;
padding:.85em 1.15em;
font-size:.95rem;
}
.btn-lg{ padding:.95em 1.25em; font-size:.98rem; }
}
/* --------------------------------- Header --------------------------------- */
.site-header{
position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid var(--border-soft);
}
.site-header .container{
display:flex; align-items:center; justify-content:space-between;
min-height:64px; gap:.75rem;
}
.brand{
display:flex; align-items:center; flex-shrink:0;
text-decoration:none; min-width:0;
}
.brand picture{ display:block; line-height:0; }
.brand img{
display:block; height:34px; width:auto; max-width:100%;
}
@media (min-width:768px){
.brand img{ height:46px; }
}
@media (min-width:1100px){
.brand img{ height:48px; }
}
.brand--inverse img{ height:32px; }
.brand--footer img{
height:36px;
width:auto;
opacity:.95;
transition:opacity .15s ease;
}
.brand--footer:hover img{ opacity:1; }
.main-nav{ display:none; min-width:0; }
/* overflow visible : indispensable pour que le sous-menu « Services » s'affiche.
Le menu tient dans sa colonne grâce au nombre d'entrées et aux gaps ci-dessous. */
.main-nav ul{ display:flex; gap:1.15rem; align-items:center; flex-wrap:nowrap; min-width:0; justify-content:center; }
.main-nav a{ text-decoration:none; font-weight:600; font-size:.9rem; color:var(--ink-soft); white-space:nowrap; }
.main-nav a:hover{ color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.header-call{
display:none; align-items:center; gap:.5em; font-weight:700;
color:var(--blue-deep); text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.header-call svg{ width:18px; height:18px; flex-shrink:0; }
.nav-toggle{
display:inline-flex; width:44px; height:44px; border-radius:10px; border:1px solid var(--border);
background:#fff; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.nav-toggle svg{ width:22px; height:22px; color:var(--blue-deep); }
/* Mobile / tablette : menu hamburger */
@media (max-width:419px){
.header-actions .btn{
padding:.65em .85em;
font-size:.82rem;
white-space:nowrap;
}
}
@media (min-width:420px) and (max-width:1099px){
.header-actions .btn{
padding:.7em 1em;
font-size:.88rem;
white-space:nowrap;
}
}
/* Desktop large : nav complète + tagline entière, sans chevauchement */
@media (min-width:1100px){
.site-header .container{
min-height:72px;
gap:1.25rem;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
}
.brand{
flex-shrink:0;
}
.main-nav{
display:flex;
justify-content:center;
min-width:0;
}
.main-nav ul{
gap:clamp(.7rem, 1.1vw, 1.2rem);
justify-content:center;
}
.main-nav a{ font-size:clamp(.84rem, .95vw, .92rem); }
.header-call{ display:inline-flex; }
.nav-toggle{ display:none; }
.header-actions{ gap:.85rem; }
.header-actions .btn{ padding:.8em 1.35em; font-size:.92rem; }
}
/* Mobile nav drawer */
.mobile-nav{
position:fixed; inset:0; z-index:150; background:var(--blue-deeper);
color:#fff; padding:1.5rem; transform:translateX(100%); transition:transform .28s ease;
overflow-y:auto; overflow-x:hidden;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; gap:1rem; }
.mobile-nav-close{ width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:.3rem; }
.mobile-nav a{ display:block; padding:.9em .2em; font-size:1.15rem; font-weight:700; text-decoration:none; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-nav .btn{ margin-top:1.6rem; white-space:normal; }
/* --------------------------------- Hero ----------------------------------- */
.hero{
position:relative; overflow:hidden; color:#fff;
background:
radial-gradient(1100px 520px at 82% -10%, rgba(27,109,224,.35), transparent 60%),
linear-gradient(160deg, var(--blue-deeper) 0%, var(--blue-deep) 55%, var(--blue-mid) 100%);
padding-block: clamp(2rem, 6vw, 5rem) clamp(2.5rem, 8vw, 6rem);
}
.hero::before{
content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
background-size:42px 42px;
mask-image:radial-gradient(circle at 75% 20%, #000 0%, transparent 65%);
}
.hero .container{
position:relative; display:grid; gap:1.75rem; align-items:start;
width:100%; min-width:0;
grid-template-columns:minmax(0,1fr);
}
.hero-copy,
.hero-visual,
.hero-google{
min-width:0;
max-width:100%;
}
.guarantee-badge{
display:inline-flex; align-items:flex-start; gap:.65em;
background:linear-gradient(135deg,#FDBB6B,var(--guarantee));
color:#3D2200; font-weight:800; font-size:clamp(.78rem, 2.6vw, .92rem);
padding:.65em 1.1em; border-radius:999px; box-shadow:0 10px 24px rgba(245,130,11,.35);
margin-bottom:1.4rem;
max-width:100%;
box-sizing:border-box;
line-height:1.35;
white-space:normal;
text-wrap:balance;
}
.guarantee-badge svg{ width:18px; height:18px; flex-shrink:0; margin-top:.1em; }
@media (max-width:420px){
.guarantee-badge{ border-radius:14px; padding:.7em .95em; }
}
.hero h1{
color:#fff;
font-size:clamp(1.75rem, 7.2vw, 3.7rem);
font-weight:800; letter-spacing:-.02em; margin-bottom:.55em;
}
.hero .subtitle{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:.4em;
font-size:clamp(.95rem, 1.6vw, 1.2rem);
color:#DCE7FA;
max-width:52ch;
margin-bottom:0;
}
.hero .subtitle strong{ color:#fff; }
.subtitle-row{
display:block;
line-height:1.45;
}
/* Une information par ligne, à toutes les tailles d'écran.
La colonne de texte du hero est plafonnée à ~560px : la ligne complète n'y
tient jamais. Elle était auparavant forcée en `nowrap` sur desktop et sa fin
débordait sous le formulaire, où elle devenait illisible. */
.subtitle-row--main{
display:flex;
flex-direction:column;
align-items:flex-start;
flex-wrap:wrap;
gap:.35em;
white-space:normal;
}
.subtitle-dot{
display:none;
flex-shrink:0;
opacity:.8;
font-weight:700;
}
.subtitle-item{ min-width:0; max-width:100%; overflow-wrap:break-word; }
@media (min-width:640px) and (max-width:979px){
.hero .subtitle{ font-size:clamp(.9rem, 2.2vw, 1.05rem); }
}
/* CTAs génériques (autres sections) — pas dans le hero d'accueil */
.hero-ctas{
display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.8rem;
max-width:100%;
}
.hero-ctas .btn{ flex:1 1 auto; min-width:min(100%, 220px); }
@media (max-width:520px){
.hero-ctas{ flex-direction:column; }
.hero-ctas .btn{ width:100%; min-width:0; }
}
.hero-visual{
position:relative; display:flex; flex-direction:column; align-items:stretch;
gap:1rem; width:100%; padding-top:0;
}
/* Téléphone sous le formulaire : desktop uniquement (sticky mobile déjà présent) */
.hero-phone-cta{
display:none;
width:100%;
justify-content:center;
}
.hero-phone-cta svg{ flex-shrink:0; }
.hero-google{
display:inline-flex;
align-items:center;
gap:.85em;
margin-top:1.35rem;
padding:1em 1.25em;
border-radius:18px;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg, rgba(255,201,74,.28), rgba(255,255,255,.14));
border:2px solid rgba(255,201,74,.55);
box-shadow:0 12px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(255,201,74,.15), inset 0 1px 0 rgba(255,255,255,.3);
max-width:100%;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (min-width:980px){
.hero-copy .hero-google{
margin-top:1.6rem;
padding:1.05em 1.35em;
}
.hero-google-stars{ font-size:1.55rem !important; }
.hero-google-score{ font-size:1.45rem !important; }
}
.hero-google:hover{
transform:translateY(-1px);
border-color:rgba(255,201,74,.75);
box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-google-stars{
color:#FFC94A;
font-size:clamp(1.15rem, 3.2vw, 1.45rem);
letter-spacing:.08em;
line-height:1;
text-shadow:0 1px 8px rgba(255,201,74,.35);
}
.hero-google-body{
display:flex;
flex-direction:column;
gap:.12em;
min-width:0;
}
.hero-google-score{
font-family:var(--font-display);
font-size:clamp(1.15rem, 3vw, 1.35rem);
font-weight:800;
line-height:1.1;
color:#fff;
}
.hero-google-outof{
font-size:.72em;
font-weight:700;
opacity:.85;
}
.hero-google-meta{
color:#E8F0FF;
font-size:clamp(.78rem, 2vw, .88rem);
font-weight:600;
}
/* Bandeau unique — clients (institutions / entreprises) */
.clients-marquee{
position:relative;
margin-top:.4rem;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{
display:flex;
align-items:center;
gap:1rem;
width:max-content;
animation:clients-scroll 48s linear infinite;
}
.clients-track-dup{ display:contents; }
.clients-marquee:hover .clients-track{ animation-play-state:paused; }
@keyframes clients-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.clients-logo{
margin:0;
flex:0 0 auto;
width:168px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
padding:.25rem .4rem;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
box-shadow:var(--shadow-sm);
box-sizing:border-box;
overflow:hidden;
}
.clients-logo img{
display:block;
margin:0 auto;
width:auto;
max-width:100%;
height:auto;
max-height:44px;
object-fit:contain;
}
.estimator-multi-hint{
margin:-.2rem 0 1rem;
}
.choice-card.is-selected::after{
content:"✓";
position:absolute;
top:.45rem;
right:.5rem;
font-size:.72rem;
font-weight:800;
color:var(--accent);
line-height:1;
}
.choice-card[data-field="symptom"]{ position:relative; }
/* Desktop : copy | form */
@media (min-width:980px){
.hero .container{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
grid-template-areas:
"copy visual";
gap:2rem 3rem;
align-items:start;
}
.hero-copy{ grid-area:copy; }
.hero-visual{ grid-area:visual; }
.hero-phone-cta{ display:inline-flex; }
.hero .subtitle{ margin-bottom:0; }
}
/* ------------------------------ Bande de chiffres clés ---------------------- */
.stat-strip{
background:var(--blue-deeper);
background-image:radial-gradient(600px 200px at 15% 0%, rgba(27,109,224,.25), transparent 70%);
border-bottom:1px solid rgba(255,255,255,.08);
}
.stat-strip ul{
display:grid; gap:1.4rem; padding-block:2rem;
grid-template-columns:repeat(2, minmax(0,1fr));
text-align:center;
}
@media (min-width:760px){ .stat-strip ul{ grid-template-columns:repeat(4, minmax(0,1fr)); text-align:left; gap:1.6rem; padding-block:2.2rem; } }
.stat-strip li{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.stat-strip .sval{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.35rem,4vw,2.2rem); color:#fff; letter-spacing:-.01em; }
.stat-strip .sval small{ font-size:.5em; font-weight:700; color:#8FB0E6; }
.stat-strip .slbl{ font-size:clamp(.75rem, 2.4vw, .82rem); color:#9FB4DA; font-weight:600; line-height:1.35; }
/* ------------------------------ Barre réassurance -------------------------- */
.reassurance{ background:var(--blue-bg); border-bottom:1px solid var(--border); }
.reassurance ul{ display:grid; gap:1rem; padding-block:1.4rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .reassurance ul{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.reassurance li{ display:flex; align-items:flex-start; gap:.65em; font-weight:700; font-size:.92rem; color:var(--blue-deeper); min-width:0; }
.reassurance li svg{ width:20px; height:20px; color:var(--success); flex-shrink:0; margin-top:.1em; }
/* ------------------------------ Confiance / logos --------------------------- */
.trust{ text-align:center; }
.trust p.trust-line{ color:var(--ink-soft); margin-bottom:1.6rem; }
.trust-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1rem; }
.trust-badge{
font-family:var(--font-display); font-weight:800; letter-spacing:.01em;
color:var(--ink-faint); background:var(--blue-bg-2); border:1px solid var(--border);
padding:.75em 1.4em; border-radius:12px; font-size:1rem;
}
.trust-divider{ height:1px; background:var(--border); max-width:120px; margin:2.2rem auto; }
.trust-segments{
display:grid; gap:2rem 1.4rem; max-width:980px; margin-inline:auto;
grid-template-columns:1fr;
}
@media (min-width:720px){
.trust-segments{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
.trust-segments{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.trust-segment{ text-align:center; min-width:0; }
.trust-segment .seg-label{
display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem;
}
/* Logos clients : bandeau défilant sur mobile, grille sur desktop */
.trust-marquee{
position:relative;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-track{
display:flex;
align-items:center;
gap:.75rem;
width:max-content;
animation:trust-scroll 32s linear infinite;
}
.trust-track-dup{ display:contents; }
.trust-marquee:hover .trust-track{ animation-play-state:paused; }
@keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (min-width:720px){
.trust-marquee{
overflow:visible;
-webkit-mask-image:none;
mask-image:none;
}
.trust-track{
animation:none;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
gap:.75rem;
width:100%;
justify-items:center;
align-items:stretch;
}
.trust-track-dup{ display:none; }
}
@media (max-width:719px){
.trust-segments{ gap:1.1rem; }
.trust-segment .seg-label{ margin-bottom:.55rem; }
.trust-segment .trust-logo{
flex:0 0 auto;
width:148px;
max-width:none;
}
.section.trust{ padding-block:2.4rem; }
}
.trust-logo{
margin:0;
width:100%;
max-width:180px;
aspect-ratio:10 / 3.2;
height:auto;
display:flex;
align-items:center;
justify-content:center;
padding:.35rem .5rem;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
box-shadow:var(--shadow-sm);
box-sizing:border-box;
overflow:hidden;
}
.trust-logo img{
display:block;
margin:0 auto;
width:auto;
max-width:100%;
height:auto;
max-height:52px;
object-fit:contain;
object-position:center;
filter:none;
}
/* Bandeau défilant des marques de support prises en charge */
.brand-marquee{
position:relative; margin-top:1.6rem; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-track{
display:flex; align-items:center; gap:1rem; width:max-content;
animation:brand-scroll 42s linear infinite;
}
.brand-track-dup{ display:contents; }
.brand-marquee:hover .brand-track{ animation-play-state:paused; }
@keyframes brand-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.brand-logo{
margin:0;
flex:0 0 auto;
width:168px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
padding:.25rem .4rem;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
box-shadow:var(--shadow-sm);
box-sizing:border-box;
overflow:hidden;
}
.brand-logo img{
display:block;
margin:0 auto;
width:auto;
max-width:100%;
height:auto;
max-height:48px;
object-fit:contain;
object-position:center;
}
/* Anciens chips texte (conservés si réutilisés ailleurs) */
.brand-badge{
font-family:var(--font-display); font-weight:700; letter-spacing:.015em;
color:var(--ink-faint); font-size:1.05rem; white-space:nowrap; opacity:.85;
}
.brand-chip{
display:inline-flex; align-items:center; gap:.65em; white-space:nowrap;
background:#fff; border:1px solid var(--border); border-radius:999px;
padding:.4em 1.1em .4em .4em; box-shadow:var(--shadow-sm);
}
.brand-chip .mono{
width:30px; height:30px; border-radius:8px; flex-shrink:0;
display:grid; place-items:center; color:#fff; font-weight:800; font-size:.72rem;
font-family:var(--font-display); letter-spacing:.01em;
}
.brand-chip .name{ font-weight:700; font-size:.95rem; color:var(--ink); }
/* --------------------------------- Grilles cartes --------------------------- */
.grid{ display:grid; gap:1.5rem; }
.grid > *{ min-width:0; }
.grid-3{ grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.grid-2{ grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.grid-services{ grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .grid-services{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .grid-services{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.card{
background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
padding:clamp(1.25rem, 3.5vw, 1.9rem); box-shadow:var(--shadow-sm);
transition:transform .18s ease, box-shadow .18s ease;
min-width:0;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-icon{
width:52px; height:52px; border-radius:14px; background:var(--blue-bg);
display:grid; place-items:center; color:var(--blue-deep); margin-bottom:1.1rem;
}
.card-icon svg{ width:26px; height:26px; }
.card-icon.icon-accent{ background:linear-gradient(135deg,var(--accent),var(--blue-deep)); color:#fff; }
.card-tag{
display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--blue-bg);
border-radius:999px; padding:.25em .7em; margin-bottom:.8rem;
}
.card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:1rem; }
.card-link{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; color:var(--accent); text-decoration:none; font-size:.94rem; }
.card-link svg{ width:16px; height:16px; transition:transform .15s ease; }
.card-link:hover svg{ transform:translateX(3px); }
.card-step{ display:flex; flex-direction:column; gap:.65rem; }
.card-step .step-num{
display:inline-flex; align-self:flex-start; font-family:var(--font-mono); font-weight:700;
font-size:.8rem; color:var(--accent-ink); background:var(--blue-bg); border-radius:999px;
padding:.3em .8em; margin:0;
}
.card-step h3{ margin-top:0; margin-bottom:0; }
.card-step p{ margin-bottom:0; }
.privacy-callout{
display:flex; gap:1.1rem; align-items:flex-start;
background:linear-gradient(135deg, var(--blue-bg) 0%, #fff 100%);
border:1px solid var(--border); border-radius:var(--radius-md);
padding:clamp(1.25rem, 3.5vw, 1.9rem); box-shadow:var(--shadow-sm);
}
.privacy-callout svg{ width:28px; height:28px; color:var(--blue-deep); flex-shrink:0; margin-top:.15rem; }
.privacy-callout h3{ font-size:1.1rem; margin:0 0 .45rem; color:var(--blue-deeper); }
.privacy-callout p{ margin:0; color:var(--ink-soft); font-size:.94rem; line-height:1.55; }
.trustindex-widget-slot{
min-height:120px; margin-top:1rem;
}
/* --------------------------------- Estimateur -------------------------------- */
.estimator{
background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg); overflow:hidden; width:100%; max-width:min(880px, 100%);
margin-inline:auto; min-width:0;
}
.estimator-top{ background:var(--blue-deep); color:#fff; padding:clamp(1.15rem, 3.5vw, 1.6rem) clamp(1.1rem, 3.5vw, 1.8rem); }
.estimator-top h3{ color:#fff; margin-bottom:.3rem; font-size:clamp(1.05rem, 3.5vw, 1.25rem); }
.estimator-top p{ color:#CFE0FA; margin:0; font-size:.92rem; }
.estimator-steps{ display:flex; gap:.5rem; margin-top:1.1rem; }
.estimator-steps .dot{ flex:1; height:5px; border-radius:999px; background:rgba(255,255,255,.25); min-width:0; }
.estimator-steps .dot.is-active, .estimator-steps .dot.is-done{ background:var(--guarantee); }
.estimator-body{ padding:clamp(1.1rem, 3.5vw, 1.8rem); }
@media (min-width:640px){ .estimator-body{ padding:2.4rem; } }
.estimator-step{ display:none; min-width:0; }
.estimator-step.is-active{ display:block; animation:fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.estimator-step h4{ font-size:clamp(1.05rem, 3.5vw, 1.25rem); margin-bottom:1.2rem; }
.choice-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:.7rem;
width:100%;
min-width:0;
}
@media (min-width:560px){ .choice-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:.85rem; } }
.choice-card{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55em;
border:2px solid var(--border); border-radius:var(--radius-sm);
padding:clamp(.85rem, 2.5vw, 1.1rem) clamp(.45rem, 1.8vw, .7rem);
background:var(--blue-bg-2); cursor:pointer; transition:all .15s ease;
font-weight:700; font-size:clamp(.78rem, 2.5vw, .88rem);
color:var(--ink); min-width:0; width:100%;
line-height:1.3; overflow-wrap:break-word; hyphens:auto;
}
.choice-card svg{ width:28px; height:28px; color:var(--blue-deep); flex-shrink:0; }
.choice-card:hover{ border-color:var(--accent); background:var(--blue-bg); }
.choice-card.is-selected{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(27,109,224,.18); }
.choice-card--wide{ grid-column:1 / -1; flex-direction:row; justify-content:center; }
.estimate-result{
background:var(--blue-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
padding:1.2rem 1.1rem; margin-top:1.6rem; min-width:0;
}
@media (min-width:480px){ .estimate-result{ padding:1.4rem 1.5rem; } }
.estimate-result .price-row{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:.7rem; }
.estimate-result .price-item{ min-width:0; }
.estimate-result .price-item .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; }
.estimate-result .price-item .value{ font-family:var(--font-display); font-size:clamp(1.2rem, 4vw, 1.5rem); font-weight:800; color:var(--blue-deep); }
.estimate-result .note{ font-size:.86rem; color:var(--ink-soft); margin:0; }
.form-row{ margin-bottom:1.1rem; }
.form-row label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.4em; color:var(--blue-deeper); }
.form-row input{
width:100%; max-width:100%; padding:.85em 1em; border:1.5px solid var(--border); border-radius:10px; background:#fff;
}
.form-row input:focus{ border-color:var(--accent); }
.form-hint{ font-size:.82rem; color:var(--ink-soft); margin-top:.5rem; }
.field-error{ color:#B3261E; font-size:.82rem; margin-top:.4em; display:none; }
.field-error.is-visible{ display:block; }
.field-hint{
margin:.35rem 0 0;
font-size:.78rem;
color:var(--ink-faint);
line-height:1.35;
}
/* Google Places Autocomplete — au-dessus du formulaire estimateur */
.pac-container{
z-index:1200;
border-radius:10px;
border:1px solid var(--border);
box-shadow:var(--shadow-md);
font-family:var(--font-body);
}
.estimator-nav{
display:flex; justify-content:space-between; align-items:center;
gap:.75rem; margin-top:1.8rem; flex-wrap:wrap;
}
.estimator-nav .btn{ flex:0 1 auto; min-width:0; }
.estimator-nav .btn-text{ background:none; border:none; font-weight:700; color:var(--ink-soft); cursor:pointer; padding:.6em; }
.estimator-success{ text-align:center; padding:1.4rem 0; }
.estimator-success .check{
width:64px; height:64px; border-radius:50%; background:var(--success); color:#fff;
display:grid; place-items:center; margin:0 auto 1.1rem;
}
.estimator-success .check svg{ width:32px; height:32px; }
/* --------------------------------- Photo placeholders ------------------------ */
.photo-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6em;
border:2px dashed var(--border); border-radius:var(--radius-md); background:var(--blue-bg-2);
color:var(--ink-faint); text-align:center; padding:2.5rem 1.5rem; min-height:220px;
}
.photo-placeholder svg{ width:34px; height:34px; opacity:.7; }
.photo-placeholder strong{ color:var(--ink-soft); font-size:.92rem; }
.photo-placeholder span{ font-size:.8rem; max-width:28ch; }
/* --------------------------------- Photos réelles ----------------------------- */
/* Même encombrement que .photo-placeholder, mais avec la photo en fond et la
légende en surimpression. Le cadrage est géré par object-fit, donc une même
image peut servir dans des blocs de proportions différentes. */
.media-photo{
position:relative; margin:0; overflow:hidden;
border-radius:var(--radius-md); background:var(--blue-bg-2);
box-shadow:var(--shadow-md);
}
.media-photo img{
display:block; width:100%; height:100%;
object-fit:cover; object-position:center;
}
.media-photo figcaption{
position:absolute; left:0; right:0; bottom:0;
display:flex; flex-direction:column; gap:.15em;
padding:1.6rem .95rem .8rem; text-align:left; color:#fff;
background:linear-gradient(to top, rgba(7,31,66,.94) 0%, rgba(7,31,66,.6) 55%, rgba(7,31,66,0) 100%);
}
.media-photo figcaption strong{ font-size:.9rem; font-weight:800; line-height:1.25; }
.media-photo figcaption span{ font-size:.76rem; line-height:1.35; color:#CFE0FA; }
.lab-photos .media-photo{ aspect-ratio:4/3; }
.lab-photos .media-photo:first-child{ grid-column:1/-1; aspect-ratio:16/7; }
.team-photo{ aspect-ratio:4/3; }
/* Smartphone : deux photos côte à côte deviennent illisibles, on empile.
(La mise en colonne de .lab-photos est faite plus bas, avec sa grille.) */
@media (max-width:560px){
.lab-photos .media-photo,
.lab-photos .media-photo:first-child{ aspect-ratio:16/10; }
}
/* --------------------------------- Logistique --------------------------------- */
.ship-card{ position:relative; }
.ship-card .badge-recommended{
position:absolute; top:-12px; right:clamp(.6rem, 3vw, 1.4rem); background:var(--guarantee); color:#fff;
font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
padding:.35em .9em; border-radius:999px; box-shadow:0 6px 14px rgba(245,130,11,.35);
max-width:calc(100% - 1.2rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ship-address{
background:var(--blue-bg); border-radius:10px; padding:.9rem 1rem; margin-top:.9rem;
font-weight:700; color:var(--blue-deeper); font-size:.92rem; line-height:1.5;
}
.coming-soon{
margin-top:.9rem; font-size:.82rem; font-weight:700; color:var(--accent-ink);
background:var(--blue-bg-2); border:1px dashed var(--border); border-radius:8px; padding:.6em .8em;
}
/* --------------------------------- Chronopost envoi --------------------------------- */
.hero--compact{ padding-block:clamp(3.5rem,8vw,5rem); }
.chrono-label-grid{
display:grid; gap:1.5rem; align-items:start;
}
@media (min-width:900px){
.chrono-label-grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,.75fr); }
}
.chrono-label-card{ margin-bottom:1.2rem; }
.chrono-notice{
background:#FFF7E8; border:1px solid #F5C87A; color:#7A4A00;
border-radius:10px; padding:.85rem 1rem; margin-bottom:1.2rem; font-size:.92rem; line-height:1.5;
}
.form-row-2{
display:grid; gap:1rem;
}
@media (min-width:560px){ .form-row-2{ grid-template-columns:1fr 1fr; } }
.chrono-confirm{
display:flex; gap:.75rem; align-items:flex-start; margin:1.2rem 0 1rem;
font-size:.92rem; color:var(--ink-soft); line-height:1.45; cursor:pointer;
}
.chrono-confirm input{ margin-top:.25rem; flex-shrink:0; }
.chrono-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.chrono-summary{
display:grid; gap:1rem; margin-bottom:1rem;
}
@media (min-width:640px){ .chrono-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.chrono-kicker{
font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-soft); margin:0 0 .35rem;
}
.chrono-tracking{ font-family:ui-monospace,Consolas,monospace; font-weight:800; letter-spacing:.08em; margin:0; word-break:break-all; }
.chrono-pdf-frame{
border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; height:min(70vh,620px);
}
.chrono-pdf-frame iframe{ width:100%; height:100%; border:0; }
.chrono-pack-list{ margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.7rem; color:var(--ink-soft); font-size:.92rem; }
.ship-chrono-cta{ margin-top:1rem; }
/* --------------------------------- Bande Entreprises/RAID --------------------------------- */
.enterprise-band{
background:linear-gradient(120deg,var(--blue-deeper),var(--blue-mid));
color:#fff; border-radius:var(--radius-lg); padding:clamp(1.6rem,5vw,3.4rem);
display:grid; gap:2rem; min-width:0; max-width:100%;
}
@media (min-width:900px){ .enterprise-band{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; } }
.enterprise-band > *{ min-width:0; }
.enterprise-band h2{ color:#fff; }
.enterprise-band .lede{ color:#CFE0FA; }
.enterprise-perks{ display:flex; flex-direction:column; gap:1.1rem; }
.enterprise-perk{ display:flex; gap:.9em; min-width:0; }
.enterprise-perk svg{ width:22px; height:22px; color:var(--guarantee); flex-shrink:0; margin-top:.1em; }
.enterprise-perk strong{ display:block; color:#fff; font-size:.98rem; }
.enterprise-perk span{ display:block; color:#AFC4E8; font-size:.86rem; margin-top:.1rem; }
/* --------------------------------- Sauvegarde 3-2-1 --------------------------------- */
.backup-321{
display:grid;
gap:clamp(1.25rem, 4vw, 2.4rem);
align-items:stretch;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:clamp(1.15rem, 4vw, 2.6rem);
box-shadow:var(--shadow-md);
overflow:visible;
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
}
.backup-321-copy,
.backup-321-diagram,
.backup-321-actions{
min-width:0;
max-width:100%;
box-sizing:border-box;
}
@media (min-width:900px){
.backup-321{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
grid-template-areas:
"copy diagram"
"actions diagram";
gap:0;
padding:0;
overflow:hidden;
}
.backup-321-copy{
grid-area:copy;
padding:clamp(1.6rem, 3vw, 2.8rem) clamp(1.6rem, 3vw, 2.8rem) .75rem;
border-right:1px solid var(--border);
}
.backup-321-diagram{
grid-area:diagram;
padding:clamp(1.6rem, 3vw, 2.4rem);
background:linear-gradient(165deg, #F4F8FF 0%, #EAF1FC 100%);
}
.backup-321-actions{
grid-area:actions;
padding:0 clamp(1.6rem, 3vw, 2.8rem) clamp(1.6rem, 3vw, 2.8rem);
border-right:1px solid var(--border);
}
}
.backup-321-actions .btn{
max-width:100%;
white-space:normal;
text-align:center;
line-height:1.35;
}
.backup-321-copy h2{
overflow-wrap:break-word;
word-wrap:break-word;
hyphens:auto;
}
.backup-321-copy .lede{ max-width:48ch; }
@media (max-width:899px){
.backup-321-copy h2{
font-size:clamp(1.2rem, 5.2vw, 1.55rem);
line-height:1.22;
}
.backup-321-copy .lede,
.backup-321-zero{
max-width:none;
font-size:.92rem;
}
.backup-321-zero{
margin-bottom:0;
}
.backup-321-diagram{
padding:1rem;
border-radius:14px;
background:linear-gradient(165deg, #F4F8FF 0%, #EAF1FC 100%);
}
.backup-321-node{
padding:.75rem .85rem;
gap:.7rem;
}
.backup-321-node > div{
flex:1;
min-width:0;
}
.backup-321-node strong,
.backup-321-node span{
overflow-wrap:break-word;
word-wrap:break-word;
}
.backup-321-schedule{
margin-bottom:0;
font-size:.82rem;
padding:.75rem .85rem;
}
.backup-321-actions .btn{
display:flex;
width:100%;
justify-content:center;
align-items:center;
padding:.95em 1.1em;
font-size:.95rem;
}
}
@media (max-width:420px){
.backup-321{
padding:1rem;
gap:1rem;
border-radius:var(--radius-md);
}
.backup-321-diagram{
padding:.85rem;
}
.backup-321-pills li{
font-size:.82rem;
padding:.4em .7em;
}
.backup-321-node-icon{
width:36px;
height:36px;
}
.backup-321-node-icon svg{
width:20px;
height:20px;
}
.backup-321-schedule{
gap:.5rem;
}
}
.backup-321-pills{
display:flex;
flex-wrap:wrap;
gap:.55rem;
list-style:none;
margin:1.1rem 0 1rem;
padding:0;
}
.backup-321-pills li{
display:inline-flex;
align-items:center;
gap:.35em;
padding:.45em .85em;
border-radius:999px;
background:var(--blue-pale);
border:1px solid rgba(37,99,235,.15);
font-size:.88rem;
color:var(--ink-soft);
}
.backup-321-pills strong{
font-family:var(--font-display);
font-size:1.05rem;
color:var(--accent);
}
.backup-321-zero{
color:var(--ink-soft);
font-size:.95rem;
line-height:1.55;
margin:0 0 1.4rem;
max-width:46ch;
}
.backup-321-diagram-title{
font-family:var(--font-display);
font-weight:800;
font-size:.78rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-faint);
margin:0 0 1rem;
}
.backup-321-flow{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:0;
}
.backup-321-node{
display:flex;
align-items:flex-start;
gap:.85rem;
padding:.85rem 1rem;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
box-shadow:var(--shadow-sm);
}
.backup-321-node--primary{
border-color:rgba(37,99,235,.28);
background:linear-gradient(135deg, #fff, #F8FAFF);
}
.backup-321-node-icon{
flex-shrink:0;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:var(--blue-pale);
color:var(--accent);
}
.backup-321-node-icon svg{ width:22px; height:22px; }
.backup-321-node strong{
display:block;
font-size:.98rem;
color:var(--ink);
line-height:1.25;
}
.backup-321-node span{
display:block;
font-size:.84rem;
color:var(--ink-soft);
margin-top:.15rem;
line-height:1.4;
}
.backup-321-arrow{
text-align:center;
color:var(--accent);
font-size:1.1rem;
line-height:1;
padding:.25rem 0;
list-style:none;
}
.backup-321-schedule{
display:flex;
align-items:flex-start;
gap:.65rem;
margin:1.15rem 0 0;
padding:.85rem 1rem;
border-radius:12px;
background:rgba(37,99,235,.08);
border:1px dashed rgba(37,99,235,.22);
font-size:.86rem;
color:var(--ink-soft);
line-height:1.45;
}
.backup-321-schedule > span{ min-width:0; }
.backup-321-schedule svg{
width:18px;
height:18px;
flex-shrink:0;
color:var(--accent);
margin-top:.1em;
}
/* --------------------------------- Labo / stats --------------------------------- */
.lab-section{ position:relative; overflow:hidden; }
.lab-grid{ display:grid; gap:2.5rem; align-items:center; }
.lab-grid > *{ min-width:0; }
@media (min-width:960px){ .lab-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.lab-photos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
.lab-photos .photo-placeholder:first-child{ grid-column:1/-1; min-height:200px; }
/* Smartphone : une photo par ligne, sinon elles tombent sous les 170px de large. */
@media (max-width:560px){ .lab-photos{ grid-template-columns:minmax(0,1fr); } }
.stat-row{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(.6rem, 2.5vw, 1.2rem);
margin-top:2rem;
}
.stat{ text-align:left; min-width:0; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.2rem,4vw,2.4rem); color:#fff; }
.stat .num small{ font-size:.55em; font-weight:700; }
.stat .label{ font-size:clamp(.72rem, 2.2vw, .82rem); color:#BFD6FA; margin-top:.2rem; line-height:1.35; }
/* --------------------------------- Avis Google --------------------------------- */
.review-summary{ display:flex; align-items:center; gap:1.2rem; justify-content:center; margin-bottom:2.2rem; flex-wrap:wrap; }
.review-score{ font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--blue-deep); }
.review-meta .stars{ color:#F5A623; font-size:1.2rem; letter-spacing:.06em; }
.review-meta p{ margin:.2rem 0 0; color:var(--ink-soft); font-weight:600; }
.review-card p{ color:var(--ink-soft); font-size:.94rem; }
.review-card .stars{ color:#F5A623; margin-bottom:.6rem; display:block; letter-spacing:.05em; }
.review-card footer{ font-weight:700; font-size:.88rem; color:var(--blue-deeper); margin-top:.8rem; }
/* --------------------------------- Tarifs : onglets par catégorie --------------------------------- */
.price-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-bottom:2.2rem; }
.price-tab{
font-family:var(--font-display); font-weight:700; font-size:clamp(.8rem, 2.5vw, .88rem);
padding:.65em 1.1em; border-radius:999px; border:1.5px solid var(--border);
background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
max-width:100%;
}
.price-tab:hover{ border-color:var(--accent); color:var(--accent-ink); }
.price-tab.is-active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.price-panel{ animation:fadeUp .3s ease; }
#tarifs .price-card .btn{
font-size:.82rem;
font-weight:700;
line-height:1.3;
white-space:normal;
padding:.85em 1.1em;
min-height:2.85em;
}
/* --------------------------------- Tarifs --------------------------------- */
.price-card{ text-align:center; border-radius:var(--radius-md); position:relative; overflow:visible; }
.price-card.is-featured{ border-color:var(--accent); box-shadow:var(--shadow-md); transform:none; margin-top:.75rem; }
@media (min-width:720px){
/* Pas de décalage vertical : les trois boutons doivent s'aligner au pixel. */
.price-card.is-featured{ margin-top:0; }
}
.price-card.is-featured::before{
content:none;
display:none;
}
.price-panel[data-price-panel="hdd"] .price-card.is-featured::before{
display:block;
content:"Salle Blanche — ISO 5 (100)"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
background:var(--accent); color:#fff; font-size:clamp(.62rem, 2.2vw, .72rem); font-weight:800; letter-spacing:.03em;
padding:.35em .85em; border-radius:999px; white-space:nowrap;
box-shadow:0 6px 14px rgba(27,109,224,.35);
max-width:calc(100% - 1rem);
overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:720px){ .price-card.is-featured:hover{ transform:translateY(-10px); } }
.price-card .from{ font-size:.85rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.price-card .amount{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 6vw, 2.5rem); color:var(--blue-deep); margin:.3rem 0 1rem; }
.price-card .amount small{ font-size:.4em; font-weight:700; color:var(--ink-soft); }
.price-card ul{ text-align:left; margin:1.2rem 0; display:flex; flex-direction:column; gap:.6rem; }
.price-card ul li{ display:flex; gap:.6em; font-size:.92rem; color:var(--ink-soft); }
.price-card ul li svg{ width:18px; height:18px; color:var(--success); flex-shrink:0; margin-top:.1em; }
.price-notes{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 1.6rem; margin-top:2.4rem; }
.price-notes li{ display:flex; align-items:center; gap:.5em; font-weight:700; color:var(--blue-deeper); font-size:.92rem; max-width:100%; }
.price-notes li svg{ width:18px; height:18px; color:var(--success); flex-shrink:0; }
/* --- Cartes tarifaires et logistiques : bouton toujours en pied de carte ----
Sans cela, le bouton suit la fin du texte : trois descriptions de longueurs
différentes donnent trois boutons à trois hauteurs. */
.price-card{ display:flex; flex-direction:column; }
.price-card > .card-tag{ align-self:center; }
.price-card > .btn{ margin-top:auto; }
.logistics-grid > .card{ display:flex; flex-direction:column; }
.logistics-grid > .card > .btn{ margin-top:auto; }
.logistics-grid > .card > .card-tag{ align-self:flex-start; }
/* margin-top:auto colle le bouton au contenu quand la carte est la plus haute :
on garde un écart en donnant une marge basse à l'élément qui le précède. */
.logistics-grid > .card > *:nth-last-child(2){ margin-bottom:1.1rem; }
/* Logo Klarna : il remplace le mot dans la phrase, il doit donc se comporter
comme un mot — d'où l'alignement sur la ligne de base et non au milieu. */
/* Moyen de paiement : sa propre ligne sous les notes tarifaires, où le badge
dispose de toute la largeur du conteneur et n'a donc rien à couper. */
.klarna-note{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5em;
margin:1rem 0 0; font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.klarna-logo{ height:20px; width:auto; flex:none; border-radius:3px; }
/* Sans ce span, le texte et l'image deviendraient deux éléments du flex du
et se retrouveraient posés côte à côte au lieu de couler ensemble. */
.price-notes li > span{ min-width:0; }
/* --------------------------------- Avertissement DIY --------------------------------- */
.warning-callout{
background:linear-gradient(135deg,#FFF4E5,#FFEACC); border:1px solid #F0C27D;
border-radius:var(--radius-md); padding:clamp(1.2rem, 4vw, 1.8rem) clamp(1rem, 4vw, 2rem); margin-top:2rem;
display:flex; gap:1rem; align-items:flex-start; min-width:0;
}
.warning-callout svg{ width:28px; height:28px; color:var(--guarantee-ink); flex-shrink:0; margin-top:.2rem; }
.warning-callout > div{ min-width:0; }
.warning-callout h3{ margin-bottom:.6rem; color:#5C3A0E; }
.warning-callout p{ color:#6B4413; margin-bottom:.7rem; font-size:.95rem; line-height:1.65; }
.warning-callout p:last-child{ margin-bottom:0; }
.warning-callout strong{ color:#4A3009; }
/* --------------------------------- FAQ --------------------------------- */
.faq-list{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:.8rem; }
.faq-group-label{
font-family:var(--font-mono); font-weight:700; font-size:.78rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--accent-ink); margin:2.4rem 0 .2rem;
}
.faq-group-label:first-child{ margin-top:0; }
.faq-item{ border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; overflow:hidden; }
.faq-q{
width:100%; display:flex; align-items:flex-start; gap:.75rem;
padding:1.1rem clamp(1rem, 3vw, 1.4rem); background:none; border:none; text-align:left; cursor:pointer;
font-weight:700; font-size:clamp(.92rem, 2.8vw, 1rem); color:var(--blue-deeper);
}
.faq-q .faq-num{
font-family:var(--font-mono); font-weight:700; font-size:.82rem; color:var(--accent);
background:var(--blue-bg); border-radius:8px; padding:.3em .6em; flex-shrink:0; margin-top:.1em;
}
.faq-q .faq-label{ flex:1; min-width:0; overflow-wrap:break-word; }
.faq-q .chev{ width:20px; height:20px; flex-shrink:0; margin-left:auto; margin-top:.15em; transition:transform .2s ease; color:var(--accent); }
.faq-item.is-open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.is-open .faq-a{ max-height:800px; }
.faq-a-inner{ padding:0 clamp(1rem, 3vw, 1.4rem) 1.3rem; color:var(--ink-soft); font-size:.95rem; }
.faq-a-inner a{ color:var(--accent); font-weight:700; text-decoration:none; }
/* --------------------------------- CTA final --------------------------------- */
.cta-final{
background:linear-gradient(120deg,var(--blue-deeper),var(--blue-deep));
color:#fff; text-align:center; border-radius:var(--radius-lg);
padding:clamp(2rem,6vw,4rem) clamp(1.1rem,4vw,3rem);
margin-inline:clamp(.75rem, 3vw, 2rem);
max-width:100%;
box-sizing:border-box;
}
.cta-final h2{ color:#fff; }
.cta-final p{ color:#DCE7FA; max-width:52ch; margin-inline:auto; }
.cta-final .hero-ctas{ justify-content:center; margin-top:1.4rem; margin-bottom:0; }
/* --------------------------------- Footer --------------------------------- */
.site-footer{ background:var(--blue-deeper); color:#C9D8F2; padding-block:3.5rem 6.5rem; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .footer-grid{ grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); } }
.footer-brand .brand{ display:inline-flex; }
.footer-brand p{ margin-top:1rem; font-size:.9rem; color:#9FB4DA; max-width:34ch; }
.footer-social{
display:inline-flex; align-items:center; gap:.55em;
margin-top:1.1rem; padding:.5em 1.05em;
border:1.5px solid rgba(255,255,255,.22); border-radius:999px;
color:#C9D8F2; text-decoration:none; font-size:.88rem; font-weight:700;
transition:background .15s, border-color .15s, color .15s;
}
.footer-social:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); color:#fff; }
.footer-social svg{ width:17px; height:17px; flex:none; }
.footer-col h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ color:#C9D8F2; text-decoration:none; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-zones{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.6rem; padding-top:1.6rem; font-size:.85rem; color:#8CA3CC; line-height:1.8; overflow-wrap:anywhere; }
.footer-zones strong{ color:#C9D8F2; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:1.6rem; padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:.82rem; color:#8CA3CC; }
@media (min-width:760px){ .site-footer{ padding-bottom:3.5rem; } }
/* --------------------------------- Sticky mobile call bar --------------------------------- */
.sticky-call{
position:fixed; left:0; right:0; bottom:0; z-index:120;
min-height:var(--sticky-call-h);
display:flex; gap:.5rem;
padding:.55rem clamp(.55rem, 2.5vw, .8rem);
padding-bottom:calc(.55rem + env(safe-area-inset-bottom, 0px));
background:#fff; border-top:1px solid var(--border);
box-shadow:0 -8px 24px rgba(11,59,122,.14);
box-sizing:border-box;
max-width:100vw;
}
.sticky-call a{
flex:1 1 0;
min-width:0;
max-width:100%;
}
.sticky-call .btn{
width:100%;
height:100%;
min-height:calc(var(--sticky-call-h) - 1.1rem);
padding-inline:clamp(.4rem, 2vw, .8rem);
font-size:clamp(.78rem, 2.8vw, .92rem);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media (max-width:360px){
.sticky-call{ gap:.35rem; padding:.5rem .45rem; }
.sticky-call .btn{ font-size:.74rem; padding-inline:.35rem; gap:.35em; }
}
@media (min-width:1100px){ .sticky-call{ display:none; } }
body{ padding-bottom:calc(var(--sticky-call-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width:1100px){ body{ padding-bottom:0; } }
/* --------------------------------- Sections / pages service ---------------- */
.section > .container,
.section-alt > .container,
.section-deep > .container{ min-width:0; }
/* --------------------------------- Utilitaires --------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[data-count]{ font-variant-numeric:tabular-nums; }
/* Écrans bas (laptops 13") : densifier le hero pour limiter le scroll inutile */
@media (max-height:760px) and (min-width:980px){
.hero{ padding-block:2rem 2.4rem; }
.hero h1{ font-size:clamp(2rem, 3.8vw, 2.9rem); }
.hero .subtitle{ margin-bottom:1.1rem; }
.hero-ctas{ margin-bottom:1.1rem; }
.guarantee-badge{ margin-bottom:1rem; }
.estimator-body{ padding:1.4rem 1.6rem; }
.choice-card{ padding:.85rem .55rem; font-size:.82rem; }
}
/* Très petits écrans : 1 colonne pour les choix si vraiment étroit */
@media (max-width:340px){
.choice-grid{ grid-template-columns:minmax(0,1fr); }
}
/* --------------------------------- Blog — slider homepage ------------------- */
.blog-slider-wrap{
position:relative;
margin-top:.5rem;
}
.blog-slider{
display:flex;
gap:1.25rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:.25rem .1rem 1rem;
}
.blog-slider::-webkit-scrollbar{ display:none; }
.blog-slide{
flex:0 0 min(100%, 340px);
scroll-snap-align:start;
min-width:0;
}
@media (min-width:640px){ .blog-slide{ flex-basis:min(50%, 340px); } }
@media (min-width:960px){ .blog-slide{ flex-basis:min(33.333%, 360px); } }
.blog-card{
display:flex;
flex-direction:column;
height:100%;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:transform .18s ease, box-shadow .18s ease;
text-decoration:none;
color:inherit;
}
.blog-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.blog-card-thumb{
aspect-ratio:16/9;
background:linear-gradient(135deg, var(--blue-bg) 0%, #fff 100%);
display:grid;
place-items:center;
color:var(--blue-deep);
border-bottom:1px solid var(--border-soft);
position:relative;
overflow:hidden;
}
.blog-card-thumb svg{ width:42px; height:42px; opacity:.55; }
.blog-card-thumb img{
width:100%;
height:100%;
object-fit:cover;
}
.blog-card-body{
padding:1.25rem 1.35rem 1.4rem;
display:flex;
flex-direction:column;
flex:1;
min-width:0;
}
.blog-card-meta{
display:flex;
flex-wrap:wrap;
gap:.5rem 1rem;
font-size:.78rem;
color:var(--ink-faint);
margin-bottom:.65rem;
font-family:var(--font-mono);
}
.blog-card h3{
font-size:1.05rem;
margin-bottom:.55rem;
line-height:1.35;
color:var(--ink);
}
.blog-card p{
color:var(--ink-soft);
font-size:.9rem;
margin:0 0 1rem;
flex:1;
line-height:1.55;
}
.blog-card .card-link{
margin-top:auto;
font-size:.88rem;
}
.blog-slider-nav{
display:flex;
justify-content:center;
gap:.65rem;
margin-top:.5rem;
}
.blog-slider-btn{
width:44px;
height:44px;
border-radius:999px;
border:1.5px solid var(--border);
background:#fff;
color:var(--blue-deep);
cursor:pointer;
display:grid;
place-items:center;
transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.blog-slider-btn:hover{
border-color:var(--accent);
color:var(--accent);
background:var(--blue-bg);
}
.blog-slider-btn:disabled{
opacity:.35;
cursor:not-allowed;
}
.blog-slider-btn svg{ width:20px; height:20px; }
/* --------------------------------- Blog — pages article ------------------- */
.article-hero{
background:linear-gradient(160deg, var(--blue-deeper) 0%, var(--blue-deep) 55%, var(--blue-mid) 100%);
color:#fff;
padding-block:clamp(2.5rem, 6vw, 4rem);
}
.article-hero .breadcrumb{
font-size:.85rem;
color:#BFD6FA;
margin-bottom:1.1rem;
}
.article-hero .breadcrumb a{ color:#BFD6FA; text-decoration:none; }
.article-hero .breadcrumb a:hover{ color:#fff; }
.article-hero .eyebrow{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.22);
color:#BFD6FA;
}
.article-hero h1{
color:#fff;
font-size:clamp(1.75rem, 4.5vw, 2.75rem);
max-width:22ch;
line-height:1.15;
margin:.5rem 0 1rem;
}
.article-hero .lede{
color:#CFE0FA;
max-width:62ch;
font-size:clamp(1rem, 2.2vw, 1.12rem);
margin:0;
}
.article-meta{
display:flex;
flex-wrap:wrap;
gap:.65rem 1.4rem;
margin-top:1.4rem;
font-size:.82rem;
font-family:var(--font-mono);
color:#9FB4DA;
}
.article-meta span{
display:inline-flex;
align-items:center;
gap:.4em;
}
.article-layout{
display:grid;
gap:2.5rem;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:960px){
.article-layout.has-sidebar{
grid-template-columns:minmax(0,1fr) 280px;
align-items:start;
}
}
.article-body{
max-width:72ch;
min-width:0;
}
.article-body > * + *{ margin-top:1.35rem; }
.article-body h2{
font-size:clamp(1.35rem, 3vw, 1.65rem);
margin-top:2.4rem;
margin-bottom:.65rem;
color:var(--blue-deeper);
}
.article-body h3{
font-size:1.12rem;
margin-top:1.8rem;
margin-bottom:.5rem;
color:var(--ink);
}
.article-body p{
color:var(--ink-soft);
font-size:1rem;
line-height:1.72;
margin:0;
}
.article-body ul,
.article-body ol{
color:var(--ink-soft);
font-size:.98rem;
line-height:1.65;
padding-left:1.35rem;
display:flex;
flex-direction:column;
gap:.55rem;
}
.article-body a{ color:var(--accent); font-weight:600; }
.article-body strong{ color:var(--ink); font-weight:700; }
.article-element-label{
font-family:var(--font-mono);
font-size:.68rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent-ink);
background:var(--blue-bg);
border:1px dashed var(--border);
border-radius:999px;
padding:.3em .75em;
display:inline-block;
margin-bottom:.75rem;
}
.article-title-block{
background:linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 100%);
color:#fff;
border-radius:var(--radius-md);
padding:clamp(1.25rem, 4vw, 1.75rem) clamp(1.1rem, 4vw, 2rem);
margin-top:2rem;
}
.article-title-block .eyebrow{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.22);
color:#BFD6FA;
}
.article-title-block h2{
color:#fff;
margin:0;
font-size:clamp(1.2rem, 3vw, 1.5rem);
}
.article-title-block p{
color:#CFE0FA;
margin:.65rem 0 0;
font-size:.95rem;
}
.article-quote{
border-left:4px solid var(--accent);
padding:.5rem 0 .5rem 1.4rem;
margin:1.8rem 0;
}
.article-quote p{
font-size:1.08rem;
font-style:italic;
color:var(--blue-deeper);
line-height:1.6;
margin:0;
}
.article-quote footer{
margin-top:.75rem;
font-size:.88rem;
font-weight:700;
color:var(--ink-soft);
font-style:normal;
}
.article-figure{
margin:1.8rem 0;
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--border);
background:#fff;
box-shadow:var(--shadow-sm);
}
.article-figure img{
display:block;
width:100%;
height:auto;
}
.article-figure figcaption{
padding:.85rem 1.1rem;
font-size:.85rem;
color:var(--ink-faint);
border-top:1px solid var(--border-soft);
background:var(--blue-bg-2);
}
.article-slider{
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--border);
background:var(--blue-bg-2);
margin:1.8rem 0;
}
.article-slider-track{
display:flex;
transition:transform .35s ease;
}
.article-slider-slide{
flex:0 0 100%;
min-width:0;
}
.article-slider-slide img{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:cover;
}
.article-slider-slide .photo-placeholder{
border:none;
border-radius:0;
min-height:240px;
}
.article-slider-nav{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-between;
pointer-events:none;
padding:0 .65rem;
}
.article-slider-nav button{
pointer-events:auto;
width:40px;
height:40px;
border-radius:999px;
border:none;
background:rgba(255,255,255,.92);
color:var(--blue-deep);
box-shadow:var(--shadow-sm);
cursor:pointer;
display:grid;
place-items:center;
}
.article-slider-nav button:hover{ background:#fff; }
.article-slider-nav button svg{ width:18px; height:18px; }
.article-slider-dots{
display:flex;
justify-content:center;
gap:.45rem;
padding:.75rem;
background:#fff;
border-top:1px solid var(--border-soft);
}
.article-slider-dot{
width:8px;
height:8px;
border-radius:999px;
border:none;
background:var(--border);
cursor:pointer;
padding:0;
}
.article-slider-dot.is-active{ background:var(--accent); width:22px; }
.article-info-callout{
display:flex;
gap:1rem;
align-items:flex-start;
background:var(--blue-bg);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:clamp(1.1rem, 3.5vw, 1.5rem);
}
.article-info-callout svg{
width:26px;
height:26px;
color:var(--blue-deep);
flex-shrink:0;
margin-top:.1rem;
}
.article-info-callout h3{
font-size:1rem;
margin:0 0 .4rem;
color:var(--blue-deeper);
}
.article-info-callout p{
margin:0;
font-size:.94rem;
line-height:1.6;
}
.article-cta-inline{
background:linear-gradient(120deg, var(--blue-bg) 0%, #fff 100%);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:clamp(1.25rem, 4vw, 1.75rem);
text-align:center;
margin:2rem 0;
}
.article-cta-inline h3{
margin:0 0 .5rem;
font-size:1.15rem;
color:var(--blue-deeper);
}
.article-cta-inline p{
margin:0 0 1rem;
font-size:.94rem;
}
.article-cta-inline .hero-ctas{
justify-content:center;
margin:0;
}
.article-checklist{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:.75rem;
}
.article-checklist li{
display:flex;
gap:.65em;
align-items:flex-start;
color:var(--ink-soft);
font-size:.96rem;
}
.article-checklist li svg{
width:20px;
height:20px;
color:var(--success);
flex-shrink:0;
margin-top:.1em;
}
.article-table-wrap{
overflow-x:auto;
margin:1.5rem 0;
border:1px solid var(--border);
border-radius:var(--radius-md);
}
.article-table{
width:100%;
border-collapse:collapse;
font-size:.92rem;
}
.article-table th,
.article-table td{
padding:.75rem 1rem;
text-align:left;
border-bottom:1px solid var(--border-soft);
}
.article-table th{
background:var(--blue-bg);
color:var(--blue-deeper);
font-weight:700;
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.04em;
}
.article-table tr:last-child td{ border-bottom:none; }
.article-table td{ color:var(--ink-soft); }
.article-code{
font-family:var(--font-mono);
font-size:.82rem;
background:var(--blue-deeper);
color:#C9D8F2;
border-radius:var(--radius-sm);
padding:1rem 1.15rem;
overflow-x:auto;
line-height:1.55;
margin:1.5rem 0;
}
.article-divider{
border:none;
border-top:1px solid var(--border);
margin:2.5rem 0;
}
.article-tags{
display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-top:1rem;
}
.article-sidebar{
position:sticky;
top:1.5rem;
display:flex;
flex-direction:column;
gap:1.25rem;
}
.article-sidebar .card{
padding:1.25rem;
}
.article-sidebar .card h4{
font-size:.95rem;
margin-bottom:.75rem;
color:var(--blue-deeper);
}
.article-sidebar .card ul{
display:flex;
flex-direction:column;
gap:.5rem;
list-style:none;
padding:0;
margin:0;
}
.article-sidebar .card a{
font-size:.88rem;
color:var(--accent);
text-decoration:none;
font-weight:600;
}
.article-sidebar .card a:hover{ text-decoration:underline; }
.article-toc a{
font-size:.88rem;
color:var(--ink-soft);
text-decoration:none;
display:block;
padding:.35rem 0;
border-bottom:1px solid var(--border-soft);
}
.article-toc a:hover{ color:var(--accent); }
.blog-list-grid{
display:grid;
gap:1.5rem;
grid-template-columns:minmax(0,1fr);
}
.blog-list-grid .blog-card{ height:100%; }
@media (min-width:640px){ .blog-list-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:960px){ .blog-list-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* ------------------------------ Menu déroulant « Services » (audit SEO) ---- */
.main-nav li{ position:relative; }
.main-nav .has-sub{ display:flex; align-items:center; gap:.1rem; }
.main-nav .sub-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; padding:0; border:0; border-radius:6px;
background:none; color:var(--ink-soft); cursor:pointer;
}
.main-nav .sub-toggle svg{ width:16px; height:16px; transition:transform .2s ease; }
.main-nav .sub-toggle:hover,
.main-nav .sub-toggle:focus-visible{ color:var(--accent); }
.main-nav .sub-menu{
position:absolute; top:calc(100% + .75rem); left:50%;
transform:translateX(-50%) translateY(6px);
min-width:250px; padding:.55rem;
display:flex; flex-direction:column; align-items:stretch; gap:.1rem;
background:#fff; border:1px solid var(--border); border-radius:12px;
box-shadow:0 18px 40px rgba(11,59,122,.16);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
z-index:130;
}
.main-nav .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-.85rem; height:.85rem; }
.main-nav .sub-menu li{ position:static; }
.main-nav .sub-menu a{ display:block; padding:.55em .8em; border-radius:8px; font-size:.88rem; white-space:nowrap; }
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible{ background:var(--blue-bg); color:var(--accent); }
.main-nav .has-sub:hover .sub-menu,
.main-nav .has-sub:focus-within .sub-menu,
.main-nav .has-sub.is-open .sub-menu{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(0); transition-delay:0s;
}
.main-nav .has-sub:hover .sub-toggle svg,
.main-nav .has-sub.is-open .sub-toggle svg{ transform:rotate(180deg); }
/* Sous-liste Services dans le menu mobile : accordéon, replié par défaut */
.mobile-nav .mobile-has-sub{ display:block; }
.mobile-nav .mobile-sub-toggle{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
padding:.9em .2em; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.12);
color:#fff; font-family:inherit; font-size:1.15rem; font-weight:700; text-align:left; cursor:pointer;
}
.mobile-nav .mobile-sub-toggle svg{ width:20px; height:20px; flex-shrink:0; transition:transform .2s ease; }
.mobile-nav .mobile-sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-nav .mobile-sub[hidden]{ display:none; }
.mobile-nav .mobile-sub{ padding:.2rem 0 .4rem .9rem; gap:0; }
.mobile-nav .mobile-sub a{ font-size:.98rem; font-weight:600; padding:.6em .2em; color:#C9D8F2; border-bottom:1px solid rgba(255,255,255,.07); }
.mobile-nav .mobile-sub a:hover{ color:#fff; }
/* Accroche sous le H1 de l'accueil (H1 = mot-clé, accroche conservée) */
.hero-tagline{
color:#fff; font-size:clamp(1.05rem, 2.3vw, 1.4rem); font-weight:700; line-height:1.35;
margin:-.15rem 0 1.15rem; max-width:34ch; letter-spacing:-.01em;
}
/* ------------------------------ Widgets d'avis Trustindex ------------------ */
/* Conteneurs neutres : le widget est injecté par le script et gère son propre style.
La hauteur minimale évite un saut de mise en page pendant son chargement. */
.hero-trustindex{
margin-top:1.35rem; min-height:96px; max-width:100%;
display:flex; justify-content:flex-start; text-align:left;
}
.hero-trustindex:empty{ min-height:96px; }
@media (min-width:980px){ .hero-copy .hero-trustindex{ margin-top:1.6rem; } }
/* Le widget Trustindex se centre lui-même : on le recale à gauche pour qu'il
démarre exactement au même repère vertical que le H1 et le paragraphe.
Vaut aussi bien en mobile qu'en desktop. */
.hero-trustindex > div{ max-width:100%; min-width:0; }
.hero-trustindex .ti-widget{
margin-left:0 !important; margin-right:auto !important;
padding-left:0 !important;
text-align:left !important;
justify-content:flex-start !important;
max-width:100%;
}
.hero-trustindex .ti-widget > .ti-widget-container{
margin-left:0 !important; margin-right:auto !important;
}
.footer-trustindex{ margin-top:1rem; min-height:80px; }
/* ------------------------------ Formulaire Sauvegarde 3-2-1 ---------------- */
.backup-form .form-row select,
.backup-form .form-row textarea{
width:100%; max-width:100%; padding:.85em 1em;
border:1.5px solid var(--border); border-radius:10px; background:#fff;
color:var(--ink); font-family:inherit; font-size:1rem;
}
.backup-form .form-row select:focus,
.backup-form .form-row textarea:focus{ border-color:var(--accent); outline:none; }
.backup-form .form-row textarea{ resize:vertical; min-height:5.5em; }
.backup-form .btn-block{ margin-top:.4rem; }