/* ==========================================================================
WebHopper · base.css
Socle commun a toutes les pages : reset, composants, nav, pied de page.
Genere le 1er aout 2026 depuis la homepage. Charte Ember & Steel.
========================================================================== */
/* tokens.css doit etre charge avant ce fichier (voir le des pages). */
/* ============ RESET, COMPOSANTS, NAV ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--charbon);
background:var(--ivoire);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--charbon);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
::selection{background:var(--ambre);color:var(--charbon)}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:1rem;top:-100%;background:var(--ambre);color:var(--charbon);padding:.75rem 1.25rem;
border-radius:var(--r-btn);font-weight:700;font-size:14px;z-index:2000;transition:top .2s ease}
.skip-link:focus{top:1rem}
.mono{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;line-height:1}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:11px;font-weight:500;
letter-spacing:1.5px;text-transform:uppercase;color:var(--pierre);line-height:1}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ambre)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.rule{height:1px;background:var(--border-clair);border:0;margin:0}
section{position:relative}
/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1;
padding:14px 26px;border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
transition:transform .18s var(--ease), background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;min-height:44px}
.btn svg{width:18px;height:18px;transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--charbon);color:#fff}
.btn-primary:hover{background:#332F2C;box-shadow:0 8px 22px -10px rgba(26,25,24,.55)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-outline{border-color:var(--ambre);color:var(--charbon);background:transparent}
.btn-outline:hover{background:var(--ambre-pale)}
.btn-outline:hover svg{transform:translateX(3px)}
.btn-accent{background:var(--ambre);color:var(--charbon)}
.btn-accent:hover{background:#C55700;box-shadow:0 10px 26px -12px rgba(222,99,0,.7)}
.btn-accent:hover svg{transform:translate(3px,-3px)}
.ghost-link{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:15px;color:var(--charbon);
text-underline-offset:6px;position:relative;padding-bottom:2px}
.ghost-link svg{width:18px;height:18px;color:var(--ambre);transition:transform .2s ease}
.ghost-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ambre);
transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.ghost-link:hover::after,.ghost-link:focus-visible::after{transform:scaleX(1)}
.ghost-link:hover svg{transform:translateX(4px)}
/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;background:var(--ivoire);border-bottom:1px solid var(--border-clair);
transition:box-shadow .35s ease}
.nav.scrolled{box-shadow:0 12px 30px -24px rgba(26,25,24,.65)}
.nav-inner{transition:min-height .35s var(--ease)}
.nav.scrolled .nav-inner{min-height:62px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:72px}
/* Le signe porte desormais la couleur, le mot reste neutre : un seul point
ambre dans le logo, comme un seul aplat ambre par ecran. */
/* Le logo est une image, plus un signe inline plus du texte : le mot est
desormais vectorise dans le fichier. Il est charge en ![]()
et non inline,
parce que les traces des neuf lettres pesent 12 Ko et seraient dupliques sur
les 24 pages. En contrepartie il ne peut pas heriter la couleur du CSS, d'ou
deux fichiers, logo.svg en charbon pour la nav et logo-blanc.svg pour le
pied de page. Le point ambre est identique dans les deux. */
.brand{display:inline-flex;align-items:center}
.brand-logo{height:24px;width:auto;display:block;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--charbon);position:relative;padding:.4rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:var(--ambre);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--charbon);font-weight:700}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-cta .btn{padding:11px 20px;min-height:44px}
.menu-btn{display:none;background:none;border:1.5px solid var(--border-clair);border-radius:var(--r-btn);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--charbon)}
.menu-btn svg{width:22px;height:22px}
/* ============ EN-TETE DE SECTION ============ */
/* ============ SECTION HEAD ============ */
.section-pad{padding:clamp(4rem,9vw,7.5rem) 0}
.sec-head{position:relative;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-index{position:absolute;right:0;top:-.35em;font-family:var(--font-display);font-weight:900;font-size:clamp(7rem,20vw,17rem);line-height:.8;letter-spacing:-.05em;color:var(--charbon);opacity:.05;pointer-events:none;user-select:none;z-index:0}
.sec-marker{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;color:var(--charbon);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.sec-marker::before{content:"";width:22px;height:2px;background:var(--ambre);flex-shrink:0}
.sec-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.025em;line-height:1.08;color:var(--charbon);max-width:18ch;position:relative;z-index:1}
.sec-lead{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink);max-width:56ch;margin-top:1.4rem;line-height:1.7;position:relative;z-index:1}
/* ============ SECTION CTA (reprise sur toutes les pages) ============ */
/* ============ CTA FINALE (sombre + grain + projecteur) ============ */
.cta{background:var(--charbon);color:var(--blanc);position:relative;overflow:hidden;isolation:isolate}
.cta-mesh{position:absolute;inset:0;pointer-events:none;z-index:-3;
background:radial-gradient(60% 55% at 18% 20%,rgba(222,99,0,.30),transparent 60%),radial-gradient(50% 50% at 88% 82%,rgba(222,99,0,.22),transparent 62%)}
.cta-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.06;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cta-spot{position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:-2;left:50%;top:38%;
transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;
background:radial-gradient(circle,rgba(222,99,0,.28),rgba(222,99,0,.09) 40%,transparent 66%)}
.cta .wrap{position:relative;z-index:1;padding:clamp(4.5rem,10vw,8rem) 0;text-align:center}
.cta .marker{color:var(--ambre);font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:1.6rem}
.cta h2{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.3rem,6vw,4.5rem);max-width:15ch;margin:0 auto 1.6rem}
.cta p{color:#d7d4cf;max-width:52ch;margin:0 auto 2.6rem;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7}
.cta .btn-accent:focus-visible{outline-color:var(--ambre)}
/* ============ PIED DE PAGE ============ */
/* ============ FOOTER ============ */
.footer{background:var(--charbon);color:#d7d4cf;border-top:1px solid rgba(255,255,255,.1)}
.footer .wrap{padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3rem)}
.foot-brand .b{display:inline-flex;align-items:center}
.foot-brand .b .brand-logo{height:30px}
.foot-brand p{margin-top:1rem;max-width:34ch;font-size:.95rem;line-height:1.7;color:#b9b5af}
.foot-col h3{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#8f8a84;margin-bottom:1.2rem}
.foot-col a,.foot-col span{display:block;color:#d7d4cf;font-size:.95rem;padding:.35rem 0;line-height:1.4}
.foot-col a{position:relative;width:fit-content}
.foot-col a::after{content:"";position:absolute;left:0;bottom:.2rem;height:1px;width:100%;background:var(--ambre);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.foot-col a:hover::after,.foot-col a:focus-visible::after{transform:scaleX(1)}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#8f8a84}
.foot-bottom .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-bottom a{color:#b9b5af}
.foot-bottom a:hover{color:#fff}
/* ============ APPARITION AU DEFILEMENT ============ */
/* ============ REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(18px);
transition:opacity .7s ease, transform .7s var(--ease);transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none}
/* ============ MENU MOBILE ============ */
.mnav{display:none;border-bottom:1px solid var(--border-clair);background:var(--ivoire)}
.mnav.open{display:block}
.mnav ul{padding:1rem var(--gutter) 1.5rem;display:grid;gap:.25rem}
.mnav a{display:block;padding:.85rem .25rem;font-weight:600;color:var(--charbon);border-bottom:1px solid var(--border-clair)}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{margin-top:1rem;width:100%;justify-content:center}
/* ============ RESPONSIVE (elements communs) ============ */
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
@media(max-width:820px){.nav-links{display:none}.nav-cta .btn{display:none}.menu-btn{display:inline-flex}}
@media(max-width:560px){
.foot-grid{grid-template-columns:1fr}
.sec-index{opacity:.045;font-size:clamp(6rem,32vw,10rem)}
}
/* ============ MOUVEMENT REDUIT (elements communs) ============ */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.js .reveal{opacity:1 !important;transform:none !important}
}
/* ============ TRANSITIONS ENTRE PAGES ============
Fondu enchaine au passage d'une page a l'autre, geree nativement par le
navigateur. Zero JavaScript. Les navigateurs qui ne connaissent pas la regle
l'ignorent et naviguent normalement. Ne fonctionne qu'avec un serveur, pas
en ouverture directe des fichiers. */
@view-transition{navigation:auto}
/* ============ MOUVEMENT REDUIT : ajouts ============ */
@media(prefers-reduced-motion:reduce){
.js .reveal{transition-delay:0ms !important}
.sec-index{transform:none !important}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
/* ============ QUESTIONS FRÉQUENTES : ouverture en fondu ============ */
.faq details[open] .ans{animation:faqIn .35s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq details[open] .ans{animation:none}}
/* ==========================================================================
COMPOSANTS DE PAGE INTERIEURE
Remontes depuis offres.css le 2 aout 2026 : ils servent sur toutes les
pages interieures (offres, services, a propos).
========================================================================== */
/* ---- En-tete ---- */
.page-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,5.2vw,3.9rem);
letter-spacing:-.03em;line-height:1.05;color:var(--charbon);max-width:18ch;margin:1.5rem 0}
.page-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink);max-width:60ch;line-height:1.7}
.hero-facts{display:grid;gap:1rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--border-clair)}
@media(min-width:860px){.hero-facts{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
.fact{display:flex;gap:.8rem;align-items:flex-start;color:var(--charbon);font-weight:500;
font-size:.98rem;line-height:1.5;max-width:34ch}
.fact svg{width:20px;height:20px;color:var(--ambre);flex-shrink:0;margin-top:2px}
/* ---- Pourquoi travailler avec moi ---- */
.why-grid{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:700px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
padding:clamp(1.4rem,2.6vw,1.8rem);transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.why:hover{transform:translateY(-5px);box-shadow:0 20px 40px -24px rgba(26,25,24,.22);border-color:var(--pierre)}
.why-icon{width:40px;height:40px;border-radius:var(--r-tag);background:var(--ambre-pale);
border:1px solid rgba(222,99,0,.35);color:var(--ambre);display:flex;align-items:center;
justify-content:center;margin-bottom:1.2rem}
.why-icon svg{width:20px;height:20px}
.why h3{font-family:var(--font-display);font-weight:800;font-size:1.16rem;letter-spacing:-.015em;
color:var(--charbon);margin-bottom:.6rem;line-height:1.2}
.why p{color:var(--ink);font-size:.96rem;line-height:1.6}
/* ---- Questions frequentes ----
Accordeon natif / : accessible au clavier et fonctionnel
sans une ligne de JavaScript. */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--border-clair);max-width:78ch}
.faq details{border-bottom:1px solid var(--border-clair)}
.faq summary{cursor:pointer;list-style:none;padding:1.45rem 0;display:flex;justify-content:space-between;
align-items:center;gap:1.4rem;font-family:var(--font-display);font-weight:800;
font-size:clamp(1.04rem,1.7vw,1.22rem);letter-spacing:-.012em;line-height:1.3;color:var(--charbon)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--ambre)}
.faq .chev{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-tag);
border:1px solid var(--border-clair);display:flex;align-items:center;justify-content:center;
color:var(--ambre);transition:transform .3s var(--ease), border-color .2s ease}
.faq .chev svg{width:16px;height:16px}
.faq details[open] .chev{transform:rotate(180deg);border-color:var(--ambre)}
.faq .ans{padding:0 0 1.6rem;color:var(--ink);font-size:1rem;line-height:1.75;max-width:68ch}
.faq .ans p + p{margin-top:.9rem}
/* ---- Cartes de renvoi vers d'autres pages (remonte depuis service.css) ---- */
/* ---- Les autres services ---- */
.related{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(min-width:760px){.related{grid-template-columns:repeat(3,1fr)}}
.rcard{display:flex;flex-direction:column;gap:.7rem;background:var(--blanc);
border:1px solid var(--border-clair);border-radius:var(--r-card);padding:clamp(1.3rem,2.5vw,1.7rem);
transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.rcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(26,25,24,.24);border-color:var(--ambre)}
.rcard .rlbl{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;
text-transform:uppercase;color:var(--pierre);line-height:1}
.rcard h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.015em;
line-height:1.2;color:var(--charbon)}
.rcard p{color:var(--ink);font-size:.95rem;line-height:1.6;flex:1}
.rcard .rgo{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-weight:700;
font-size:.92rem;color:var(--charbon)}
.rcard .rgo svg{width:17px;height:17px;color:var(--ambre);transition:transform .25s ease}
.rcard:hover .rgo svg{transform:translateX(4px)}
/* ============ FIL D'ARIANE ============
Composant commun. Doit toujours etre double d'un balisage BreadcrumbList
en JSON-LD : c'est ce que Google affiche dans ses resultats a la place de
l'URL brute, et ca ameliore nettement le taux de clic. */
.breadcrumb{padding:1.1rem 0 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:11px;
font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--pierre);line-height:1.4}
.breadcrumb li + li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--ambre);
border-bottom:1.5px solid var(--ambre);transform:rotate(-45deg);flex-shrink:0}
.breadcrumb a{color:var(--pierre);text-decoration:none;border-bottom:1px solid transparent;
transition:color .2s ease, border-color .2s ease}
.breadcrumb a:hover{color:var(--charbon);border-bottom-color:var(--ambre)}
.breadcrumb [aria-current="page"]{color:var(--charbon)}
/* ---- Carte article (remontee depuis blog.css) ----
Utilisee par l'index du blog ET par le bloc « A lire ensuite » des articles.
Elle etait dans blog.css, que les articles ne chargent pas : les images
s'affichaient donc a leur taille naturelle et les fleches sans style. */
.blog-grid{display:grid;gap:clamp(1.4rem,2.8vw,2rem);margin-top:clamp(2.2rem,4.5vw,3.4rem);
padding-bottom:clamp(3.5rem,7vw,6rem)}
@media(min-width:720px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--border-clair);
border-radius:var(--r-card);overflow:hidden;
transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(26,25,24,.3);border-color:var(--ambre)}
.pcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--ambre-pale);border-bottom:1px solid var(--border-clair)}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-in{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.2rem,2.4vw,1.6rem);flex:1}
.pcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--font-mono);
font-size:10.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--pierre);line-height:1}
.pcard-cat{color:var(--charbon);background:var(--ambre-pale);border:1px solid rgba(222,99,0,.45);
padding:.4rem .65rem;border-radius:var(--r-pill)}
.pcard h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.14rem,1.9vw,1.32rem);
letter-spacing:-.018em;line-height:1.25;color:var(--charbon)}
.pcard p{color:var(--ink);font-size:.95rem;line-height:1.6;flex:1}
.pcard .pgo{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;font-weight:700;
font-size:.92rem;color:var(--charbon)}
.pcard .pgo svg{width:17px;height:17px;color:var(--ambre);transition:transform .25s ease}
.pcard:hover .pgo svg{transform:translateX(4px)}