/* Couche partagée des 11 pages — chargée en dernier dans <head>.
   Elle ne redessine rien : elle corrige le contraste, le focus, les cibles
   tactiles, le menu mobile, le mouvement sur mobile et quelques replis.
   Les jetons de marque restent ceux de chaque page ; ceux ci-dessous sont
   sémantiques et dérivés de la palette existante. */

:root{
  --brand-cta:#D2410E;        /* = --brand-deep : blanc dessus = 4,66:1 (AA) */
  --brand-text:#B6380C;       /* orange pour du petit texte sur blanc = 5,9:1 */
  --muted-mono:#5b7185;       /* remplace #8595a4 / #a4b3c0 / #8ea0b0 (2,1–3,1:1) */
  --tool-text:#0A6FBF;        /* bleu outil lisible : 5,2:1 sur blanc */
  --ok-text:#15804a;          /* vert lisible : 5:1 sur blanc */
  --focus:#0A6FBF;
  --tap:44px;
}

/* ─── focus visible, partout ─────────────────────────────────────────── */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.nav-pill a:focus-visible,.pill:focus-visible{outline-offset:-3px}

/* ─── lien d'évitement ───────────────────────────────────────────────── */
.skip{position:absolute;left:12px;top:-80px;z-index:10000;background:#14202B;color:#fff;
  font:700 14px/1 'Hanken Grotesk',system-ui,sans-serif;padding:14px 18px;border-radius:12px;
  text-decoration:none;transition:top .15s}
.skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
main{scroll-margin-top:110px}
[id]{scroll-margin-top:110px}

/* ─── contraste : boutons primaires et petits libellés ───────────────── */
.btn:not(.ghost),.ph-btn.primary,.foot-book,.cc-btn,.svc-b.p,.wsimple-btn,.dn-big{
  background-color:var(--brand-cta)!important;color:#fff!important}
.btn:not(.ghost):hover,.ph-btn.primary:hover,.foot-book:hover,.cc-btn:hover,.svc-b.p:hover,.wsimple-btn:hover,.dn-big:hover{
  background-color:#14202B!important}
.nav-pill .cta:hover{background:var(--brand-cta)}
.cc-lab,.cc-note,.cc-stop,.lg-toc h4,.lg-toc a span,.lg-ro,.lg-ver,.tm-eb,.clbl,
.svc-lab,.svc-crumb,.svc-crumb a,.svc-bar .u,.svc-mini .t span,.svc-more .mlab,.svc-stat span,
.sv-note,.pf-eb,.wsimple-eb,.foot-eyebrow,.fcol h4,.r-logo,.omw-mt span{color:var(--muted-mono)}
.svc-num,.sv-numtile span{color:#7f8ea0}
.ld-dim,.omw-lab,.r-pct{background:var(--tool-text)!important}
.r-pct{background:var(--brand-cta)!important}
.cc-copy,#ccCopy{color:var(--tool-text)}
.cc-live,.wk-live{color:var(--ok-text)}
.svc-eyebrow,.svc-case .sub,.omw-mt span{color:var(--brand-text)}
.status-pill .dot{background:var(--ok-text);box-shadow:0 0 0 3px rgba(21,128,74,.18)}

/* ─── menu mobile ────────────────────────────────────────────────────── */
/* Le bouton est dans le HTML ; la classe `js` posée dans <head> décide de la
   présentation dès le premier rendu (aucun décalage), et sans JavaScript tous
   les liens restent visibles. */
.nav-toggle{display:none}
@media (max-width:680px){
  .nav-pill{position:relative;overflow:visible;max-width:94vw;gap:0}
  html:not(.js) .nav-pill a{display:inline-flex!important}
  html.js .nav-pill{flex-wrap:wrap;padding:4px}
  html.js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-width:var(--tap);min-height:var(--tap);padding:0 14px;border:0;background:transparent;
    font:700 12px/1 'Space Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;
    color:#14202B;border-radius:999px;cursor:pointer}
  .nav-toggle .bars{width:16px;height:12px;display:inline-grid;gap:3px}
  .nav-toggle .bars i{display:block;height:2px;background:currentColor;border-radius:2px}
  html.js .nav-pill a{display:none!important}
  html.js .nav-pill .nav-list{display:none;width:100%;flex-direction:column;gap:2px;padding:6px 4px 4px}
  html.js .nav-pill.open .nav-list{display:flex}
  html.js .nav-pill.open{border-radius:22px}
  html.js .nav-pill.open a{display:flex!important;width:100%;min-height:var(--tap);align-items:center;
    padding:0 14px;border-radius:12px;font-size:15px}
  html.js .nav-pill.open a.cta{margin-top:4px;justify-content:center;background:var(--brand-cta)}
  .nav-pill a[aria-current="page"]{color:var(--brand-text);font-weight:700}
  .topbar{align-items:flex-start}
}
@media (min-width:681px){
  .nav-pill .nav-list{display:contents}
  .nav-pill a[aria-current="page"]{color:var(--brand-text)}
}

/* ─── cibles tactiles (44 px produit, jamais sous 24 px) ─────────────── */
@media (pointer:coarse),(max-width:760px){
  .nav-pill a,.svc-links a,.svc-mini,.lg-toc a,.svc-more .all,.cc-link,.svc-faq .side a,
  .pf-chip,.fx-head,.svc-faq summary,.cc-copy,#ccCopy,.mail-pill,.status-pill,.svc-meta span,
  .fcol a,.foot-nav a,.wsimple-btn,.svc-b,.ph-btn,.btn,.dn-book,.foot-book{min-height:var(--tap)}
  .fcol a,.foot-nav a{display:flex;align-items:center;padding:4px 0}
  .svc-crumb{min-height:var(--tap);align-items:center}
  .svc-crumb a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}
  .svc-more .all,.svc-faq .side a,.cc-link{padding:8px 0}
  .lg-toc a{align-items:center}
  .wa-float .wa-x{width:var(--tap);height:var(--tap);top:-14px;right:-14px;font-size:22px;line-height:44px}
}
.wa-float .wa-x{min-width:32px;min-height:32px;width:36px;height:36px;top:-12px;right:-12px;font-size:18px;line-height:36px}
.wa-float.foot-near{opacity:0!important;pointer-events:none;transform:translateY(14px)!important;animation:none!important}
@media (max-width:760px){.wa-float{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* ─── mouvement : lisible pendant le défilement ──────────────────────── */
@media (max-width:760px),(pointer:coarse){
  .reveal{filter:none;transform:translateY(14px);transition-duration:.35s}
  .stagger>*{filter:none;transform:translateY(10px);transition-duration:.3s}
  .stagger.in>*{transition-delay:calc(var(--i,0)*55ms)}
}
@media (min-width:761px) and (pointer:fine){
  .reveal{filter:blur(4px);transition-duration:.55s}
  .stagger>*{filter:blur(3px);transition-duration:.45s}
}

/* ─── services : version verticale sous 900 px et sur tactile ─────────── */
@media (max-width:900px),(pointer:coarse){
  .sv-story{height:auto!important}
  .sv-pin{position:static;height:auto;overflow:visible;display:block;padding:0 0 24px}
  .sv-track{transform:none!important;display:flex;flex-direction:column;align-items:stretch;gap:22px;will-change:auto}
  .sv-panel{flex:none;width:auto;padding:0 5vw}
  .sv-card{max-width:none}
}

/* ─── pied de page à petite largeur ──────────────────────────────────── */
@media (max-width:560px){
  .foot-mail{font-size:clamp(18px,6.4vw,26px);overflow-wrap:anywhere;word-break:normal;white-space:normal;max-width:100%}
  .foot-word{font-size:clamp(28px,12.6vw,272px);padding:0 8px}
  .foot-bar{flex-wrap:wrap;gap:8px}
}
.foot-mail{overflow-wrap:anywhere}

/* ─── formulaire ─────────────────────────────────────────────────────── */
.cc-in[aria-invalid="true"],.cc-ta[aria-invalid="true"]{border-color:var(--brand-cta);box-shadow:0 0 0 3px rgba(210,65,14,.16)}
.cc-err{display:none;margin-top:7px;font:600 13.5px/1.45 'Hanken Grotesk',system-ui,sans-serif;color:var(--brand-text)}
.cc-err.on{display:block}
.cc-privacy{margin-top:10px;font:500 12.5px/1.5 'Hanken Grotesk',system-ui,sans-serif;color:var(--muted-mono)}
.cc-privacy a{color:#14202B;text-decoration:underline;text-underline-offset:3px}
.cc-note[aria-live]{display:inline-block}

/* ─── sans JavaScript : tout est visible, rien n'attend un script ─────── */
html:not(.js) .reveal,html:not(.js) .stagger>*{opacity:1!important;transform:none!important;filter:none!important}
html:not(.js) .loader{display:none!important}
html:not(.js) .cursor-layer,html:not(.js) #waFloat{display:none!important}
html:not(.js) .sv-story{height:auto!important}
html:not(.js) .sv-pin{position:static;height:auto;overflow:visible;display:block}
html:not(.js) .sv-track{transform:none!important;flex-direction:column;align-items:stretch;gap:22px}
html:not(.js) .sv-panel{flex:none;width:auto}

/* ─── décor : hors de portée des technologies d'assistance ───────────── */
.grain,.sky,.ruler,#dropStage,.cursor-layer{user-select:none}

/* ─── réduction des animations : état final, complet ─────────────────── */
@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .wa-float.show{animation:none}
  .status-pill .dot{animation:none}
}

/* ─── accueil : hero explicite, ordre de prix, contexte des projets ──── */
.ph-what{font:500 clamp(16px,1.4vw,18.5px)/1.55 'Hanken Grotesk',system-ui,sans-serif;color:#14202B;max-width:52ch;margin:14px auto 0;text-align:center;text-wrap:balance}
.ph-what b{font-weight:700}
.ph-micro{display:block;margin:12px auto 0;font:700 11px/1.5 'Space Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#33485b;text-align:center;max-width:60ch}
.ph-tert{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font:600 14px 'Hanken Grotesk',system-ui,sans-serif;color:#14202B;text-decoration:underline;text-underline-offset:4px}
.ph-tert:hover{color:var(--brand-text)}
.ph-cta{flex-wrap:wrap;justify-content:center}
.tm-range{margin-top:14px;font:500 15px/1.6 'Hanken Grotesk',system-ui,sans-serif;color:#33485b;max-width:46ch}
.tm-range b{color:#14202B;font-weight:700}
.tm-range a{color:var(--brand-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.wk-cap{flex-wrap:wrap}
.wk-ctx{display:block;flex-basis:100%;margin-top:9px;font:500 14px/1.55 'Hanken Grotesk',system-ui,sans-serif;color:#33485b}
.pf-sel{margin-top:10px;font:500 15px/1.6 'Hanken Grotesk',system-ui,sans-serif;color:#33485b}
.wa-float .wa-msg{font-size:13.5px}

/* ─── résidus de contraste relevés par axe après la première passe ────── */
.ph-proof .proof-num{background:var(--brand-cta)!important}
.omw-card .omw-mt span,.omw-cin .omw-mt span{color:var(--brand-text)!important}
.lg-num,h2 .lg-num{color:var(--brand-text)}
.tm-range a,.cc-privacy a{display:inline-block;padding:4px 0;min-height:24px}
@media (max-width:900px),(pointer:coarse){.sv-scrollhint{display:none}}
.lg-pbody a,.lg-sec a{color:var(--tool-text)}

/* ─── corrections de mise en page relevées à la relecture ─────────────── */

/* 1. Pastille e-mail : Space Mono dessine son « @ » plus large que sa chasse,
   il chevauchait le caractère suivant à 12 px (« contact@amwebdesigner.fr »
   se lisait d'un bloc) et l'interlettrage n'y suffisait pas. L'adresse passe
   dans la police de texte, comme la pastille « disponible » qui lui fait
   face à gauche : les deux sont désormais assorties. */
.mail-pill{font-family:var(--body),'Hanken Grotesk',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:0}

/* 2. Inclusions des tarifs : la grille gardait deux colonnes en dessous de 620 px,
   et la colonne de droite était tronquée en plein mot. Une seule colonne
   tant que deux ne tiennent pas. */
@media (max-width:620px){
  #lp-root .feats-base,#lp-root .feats-dev{grid-template-columns:1fr!important;gap:13px!important;margin:0!important}
  #lp-root .feats-base li,#lp-root .feats-dev li{align-items:flex-start}
  #lp-root .feats-base li .mk,#lp-root .feats-dev li .mk{margin-top:1px}
}

/* 3. Coins du hero : à 360 px les deux libellés se chevauchaient de 20 px.
   Marges resserrées et largeur bornée à la moitié : ils passent à la ligne
   au lieu de se croiser. */
@media (max-width:620px){
  /* les originales sont préfixées #phero : sans ce préfixe la règle perdait. */
  #phero .ph-corner{max-width:calc(50% - 24px)}
  #phero .ph-corner.bl,#phero .ph-corner.tl{left:16px}
  #phero .ph-corner.br,#phero .ph-corner.tr{right:16px}
  /* les coins sont en position absolue : sans cette réserve, le dernier lien
     du hero (« ou réserver un appel ») leur passait dessus. */
  #phero{padding-bottom:104px}
}
/* Sous 400 px il n'y a plus la place pour deux colonnes : les deux mentions
   du bas du hero s'empilent au lieu de se rentrer dedans. */
@media (max-width:400px){
  #phero .ph-corner.bl,#phero .ph-corner.br{max-width:none;left:16px;right:16px;text-align:left}
  #phero .ph-corner.br{bottom:24px}
  #phero .ph-corner.bl{bottom:70px}
  #phero{padding-bottom:126px}
}

/* 4. Bulle de contact : elle occupait 348 px sur 360, son message débordait
   sur trois lignes et sa croix touchait le bord de l'écran, par-dessus la
   carte en cours de lecture. */
.wa-float{max-width:min(330px,calc(100vw - 44px))}
.wa-float .wa-msg .a{display:block;margin-top:1px}  /* l'action sur sa propre ligne :
   « Demander un devis » se coupait au milieu, entre « un » et « devis » */
.wa-float .wa-body{min-width:0}
@media (max-width:760px){
  .wa-float{right:22px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .wa-float .wa-x{width:36px;height:36px;top:-11px;right:-11px;font-size:18px;line-height:36px}
}