/* customequestrianwear.com — global.css (round 1 : bleu nuit / blanc doux / pierre / bordeaux)
   Source : _DESIGN-SYSTEM.md §0. Les styles propres à une page vont dans le <style> de la page. */

/* 1 · Jetons */
:root{
  --navy:#182536; --navy-hover:#0F1824; --ink:#182536; --text:#2A3342; --white:#FFFFFF;
  --wine:#743C46; --wine-hover:#5C2E37;
  --paper:#FAFAF7; --stone:#E7E5E0; --img-bg:#E7E5E0;
  --muted:#5B6270; --on-navy:#D3D9E2;
  --line:#DCD9D2;

  --ff-serif:"Libre Baskerville", Baskerville, Georgia, "Times New Roman", serif;
  --ff-sans:"Inter", "Segoe UI", Arial, sans-serif;
  --fs-h1:clamp(34px, 3.8vw, 52px);
  --fs-h2:clamp(26px, 2.5vw, 36px);
  --fs-h3:19px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:14.5px;
  --fs-label:13px;

  --gutter:clamp(16px, 4vw, 40px);
  --sec-pad:clamp(56px, 7vw, 104px);
  --r:2px;
}

/* 2 · Base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-wrap:break-word;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:var(--ff-sans);font-size:var(--fs-body);line-height:1.65;color:var(--text);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--ff-serif);font-weight:400;color:var(--navy);text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:var(--fs-h1);line-height:1.12}
h2{font-size:var(--fs-h2);line-height:1.2}
h3{font-family:var(--ff-sans);font-size:var(--fs-h3);line-height:1.3;font-weight:600;margin:0;color:var(--ink)}
p,li{text-wrap:pretty}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
ul,ol{margin:0;padding:0}

/* 3 · Mise en page */
.sec{padding-block:var(--sec-pad);position:relative}
.wrap{margin-inline:auto;padding-inline:var(--gutter);width:100%;max-width:calc(1240px + 2 * var(--gutter))}
.wrap-narrow{margin-inline:auto;padding-inline:var(--gutter);width:100%;max-width:calc(860px + 2 * var(--gutter))}
.bg-paper{background:var(--paper)}
.bg-white{background:var(--white)}
.bg-navy{background:var(--navy);color:var(--on-navy)}
.bg-navy h2,.bg-navy h3{color:#fff}
.eyebrow{display:block;font:500 var(--fs-label)/1.3 var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.bg-navy .eyebrow{color:var(--stone)}
.head{max-width:700px;margin-bottom:40px}
.head p{margin:16px 0 0;color:var(--muted);font-size:var(--fs-lead);line-height:1.55}
.bg-navy .head p{color:var(--on-navy)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.note{font-size:var(--fs-label);color:var(--muted);margin:24px 0 0}
.bg-navy .note{color:var(--on-navy)}

/* 4 · Composants */
a{color:var(--navy)}
a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;border:0;border-radius:var(--r);background:var(--wine);color:#fff;font:600 16px/1 var(--ff-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .16s}
a.btn:hover,button.btn:hover{background:var(--wine-hover)}
a.btn-dark{background:var(--navy) !important}
a.btn-dark:hover{background:var(--navy-hover) !important}
a.btn-line{display:inline-flex;align-items:center;min-height:50px;padding:0 4px;color:var(--navy);font:600 16px/1 var(--ff-sans);text-decoration:none;border-bottom:1.5px solid var(--navy)}
a.btn-line:hover{color:var(--wine);border-bottom-color:var(--wine)}
.bg-navy a.btn{background:var(--wine);color:#fff}
.bg-navy a.btn-line{color:#fff;border-color:var(--stone)}
a.more{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--navy);padding-bottom:1px}
a.more:hover{color:var(--wine);border-color:var(--wine)}
.bg-navy a.more{color:#fff;border-color:var(--stone)}
.ph{position:relative;margin:0;background:var(--img-bg);border-radius:var(--r);overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{display:block;margin-top:10px;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.bg-navy .cap{color:var(--on-navy)}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ticks{list-style:none;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ic{margin-top:4px;color:var(--wine)}
.bg-navy .ticks .ic{color:var(--stone)}

/* Formulaires */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 var(--fs-label)/1.3 var(--ff-sans);letter-spacing:.03em}
.field input,.field select,.field textarea{width:100%;font:400 var(--fs-body)/1.4 var(--ff-sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.field textarea{min-height:140px;resize:vertical}

/* Tableau */
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.spec th,.spec td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.spec thead th{font:600 var(--fs-label)/1.3 var(--ff-sans);letter-spacing:.04em;color:var(--muted)}

/* 5 · Apparition */
@keyframes cew-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .in{animation:cew-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@media (prefers-reduced-motion: reduce){
  .in{animation:none !important;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* 6 · Accessibilité */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bg-navy :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:2000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-weight:600}
.skip-link:focus{top:12px}

/* 7 · Menu (dynamic-menu.js) */
.dm-container{max-width:1240px}
.dm-logo{margin-right:8px}
.dm-logo img{height:40px !important;width:auto !important}
.dm-logo img + .dm-logo-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.dm-nav{margin-left:8px;gap:2px}
@media (min-width:769px){.dm-nav-link{padding:10px 13px}}
.dm-nav-link.active{background:transparent !important;color:var(--navy) !important;box-shadow:inset 0 -2px 0 var(--wine);border-radius:0}
.dm-nav-link:hover{background:transparent !important;color:var(--navy);box-shadow:inset 0 -2px 0 var(--line)}
.dm-cta-button{background:var(--wine) !important;color:#fff !important;border-radius:var(--r) !important;padding:10px 20px !important;margin-left:14px !important;font:600 15px/1.2 var(--ff-sans) !important;box-shadow:none !important;transform:none !important;white-space:nowrap}
.dm-cta-button:hover{background:var(--wine-hover) !important}

/* 8 · Barre du haut */
.tb-topbar{font-size:13px}

/* 9 · WhatsApp : discret, sans pulsation */
.wa-widget-button{animation:none !important;padding:10px 14px !important;font-size:14px !important;box-shadow:0 1px 3px rgba(0,0,0,.18) !important;gap:8px !important}
.wa-widget-button::before{display:none !important;animation:none !important}
.wa-widget-button svg{animation:none !important;width:20px !important;height:20px !important}
.wa-widget-button:hover{transform:none !important}
@media (max-width:768px){
  .wa-widget-button{width:48px;height:48px;padding:0 !important;justify-content:center;border-radius:50% !important}
  .wa-widget-button span,.wa-widget-button .wa-button-text{display:none !important}
}