:root{
  /* ink */
  --ink:#1A2433;
  --ink-soft:#54616F;
  --ink-faint:#8B97A4;

  /* paper */
  --paper:#F5F8FB;
  --paper-deep:#E7EEF5;
  --surface:#FFFFFF;
  --line:#D8E2EB;

  /* brand — blue */
  --forest:#2E6CA4;
  --forest-deep:#11304E;
  --forest-light:#5C95C9;
  --brand:#54C0F7;
  --mint:#DEEAF6;

  /* stamp accent — brass/gold */
  --clay:#B3812E;
  --clay-deep:#86601F;
  --clay-soft:#F0E3C7;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;

  --shadow-sm:0 2px 8px rgba(17,48,78,0.07);
  --shadow:0 10px 28px rgba(17,48,78,0.10);
  --shadow-lg:0 26px 60px rgba(11,30,50,0.22);

  --maxw:1160px;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection,
::-moz-selection {
  color: rgb(255, 255, 255);
  background: var(--clay);
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--forest-deep);
  margin:0 0 0.5em;
  line-height:1.15;
  font-weight:600;
}

h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
h3{ font-size:1.15rem; color:var(--forest); }

p{ color:var(--ink-soft); margin:0 0 1em; }

ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px;
  height:2px;
  background:var(--clay);
  display:inline-block;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(246,243,234,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  min-height:64px;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}

.logo-plate{
  width:64px;
  height:64px;
  border-radius:12px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.logo-plate img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;
}

.header-nav{
  display:flex;
  justify-content:center;
  gap:4px;
  /* center nav regardless of left/right content width */
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  max-width:70%;
  z-index:2;
}
.header-nav a{
  padding:8px 16px;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink-soft);
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.header-nav a:hover{
  background:var(--mint);
  color:var(--forest-deep);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  grid-column:3;
  justify-self:end;
}

.phone-pill{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.88rem;
  color:var(--forest-deep);
  background:var(--mint);
  border:1px solid #C3DAEE;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
}
.phone-pill:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); cursor:pointer; }
.phone-pill i{ color:var(--clay); }

.language-selector select{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.82rem;
  padding:8px 10px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:var(--surface);
  color:var(--forest-deep);
  cursor:pointer;
}

.menuBtn{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:18px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.menuBtn .bar-top,.menuBtn .bar-middle,.menuBtn .bar-bottom{
  height:2.5px;
  width:100%;
  background:var(--forest-deep);
  border-radius:3px;
  transform-origin:center;
  transition:transform .35s ease, opacity .35s ease;
}
.menuBtn.active .bar-top{ transform:translateY(7.5px) rotate(45deg); }
.menuBtn.active .bar-middle{ opacity:0; }
.menuBtn.active .bar-bottom{ transform:translateY(-7.5px) rotate(-45deg); }

.dropdown{
  display:none;
  max-height:0;
  overflow:hidden;
  flex-direction:column;
  background:var(--surface);
  border-top:1px solid var(--line);
  transition:max-height .35s ease;
}
.dropdown.show{ max-height:420px; }
.dropdown a{
  padding:16px 24px;
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--paper-deep);
}
.dropdown a:active,.dropdown a:hover{ background:var(--mint); }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.01em;
  padding:15px 26px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:var(--clay);
  color:#fff;
  box-shadow:0 8px 22px rgba(179,129,46,0.32);
}
.btn-primary:hover{ background:var(--clay-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(179,129,46,0.4); }

.btn-ghost{
  background:transparent;
  color:var(--forest-deep);
  border:2px solid var(--forest-deep);
}
.btn-ghost:hover{ background:var(--forest-deep); color:#fff; transform:translateY(-2px); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{
  background:linear-gradient(160deg,var(--forest-deep) 0%,var(--forest) 65%,var(--forest-light) 100%);
  padding:72px 0 96px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size:26px 26px;
  pointer-events:none;
}

.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero-copy .eyebrow{ color:#E8C887; }
.hero-copy .eyebrow::before{ background:#E8C887; }

.hero h1{
  color:#fff;
  font-size:clamp(2.1rem,4.2vw,3rem);
  max-width:16ch;
}

.hero-lead{
  color:rgba(255,255,255,0.85);
  font-size:1.05rem;
  max-width:46ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:28px 0 26px;
}
.hero .btn-ghost{
  border-color:rgba(255,255,255,0.55);
  color:#fff;
}
.hero .btn-ghost:hover{ background:#fff; color:var(--forest-deep); }

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:0.88rem;
  color:rgba(255,255,255,0.85);
}
.hero-trust li{ 
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.hero-trust li:hover{transform:translateY(-1px); }
.hero-trust i{ color:#8FC4EE; }

.hero-visual{
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:translateY(0) scale(1) rotate(0deg);
  transition:transform .75s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.hero-visual:hover{
  transform:translateY(-4px) scale(1.03) rotate(-1.5deg);
}

.hero-logo-panel{
  width:100%;
  max-width:340px;
  padding:18px 20px;
  border-radius:20px;
  /* background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(5,18,32,0.20); */
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.hero-logo-panel img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.hero-visual:hover .hero-logo-panel{
  transform:translateY(-2px) scale(1.01);
}

/* voucher-card removed (not used in current HTML pages) */

/* ---------------------------------------------------------------
   Section shell
   --------------------------------------------------------------- */
section{
  padding:88px 0;
}
section.tight{ padding:64px 0; }

.section-head{
  max-width:640px;
  margin:0 0 44px;
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* ---------------------------------------------------------------
   Services
   --------------------------------------------------------------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
  margin-bottom:28px;
}

.service-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:64px;
}

.highlight-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.highlight-card.reveal:hover{
  transform:translateY(-4px) scale(1.01) rotate(-0.7deg);
  box-shadow:var(--shadow);
}

.highlight-card i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:10px;
  background:var(--mint);
  color:var(--forest);
  margin-bottom:14px;
}

.highlight-card h3{
  font-size:1rem;
  margin-bottom:8px;
}

.highlight-card p{
  margin:0;
  font-size:0.92rem;
  color:var(--ink-soft);
}

.service-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:0;
  box-shadow:var(--shadow-sm);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-width:0;
}
.service-photo{ width:100%; height:190px; object-fit:cover; display:block; }
.service-body{ padding:28px 34px 34px; flex:1; display:flex; flex-direction:column; }
.service-card.reveal:hover{ transform:translateY(-4px) scale(1.01) rotate(-0.5deg); box-shadow:var(--shadow); }

.service-icon{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--mint);
  color:var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  margin-bottom:18px;
}
.service-card.urgences .service-icon{ background:var(--clay-soft); color:var(--clay-deep); }

.tag-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:auto;
}
.tag{
  font-family:var(--font-mono);
  font-size:0.72rem;
  padding:5px 10px;
  border-radius:999px;
  background:var(--paper-deep);
  color:var(--ink-soft);
}

.checklist{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 28px;
}
.checklist li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-weight:500;
  color:var(--ink);
}

.checklist li:hover{
  transform:translateY(-2px);
}

.checklist .check{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--forest);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem;
  margin-top:2px;
}

/* ---------------------------------------------------------------
   Titres-services dossier section
   --------------------------------------------------------------- */
.dossier{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:48px;
  box-shadow:var(--shadow-sm);
}

.advantage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:32px 0 44px;
}
.advantage-card{
  padding:22px;
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid var(--paper-deep);
  display:flex;
  flex-direction:column;
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.advantage-card:hover{
  transform:translateY(-4px) scale(1.01) rotate(-0.5deg);
  box-shadow:var(--shadow-sm);
}
.advantage-card i{
  color:var(--clay);
  font-size:1.1rem;
  margin-bottom:10px;
  display:block;
}
.advantage-card h3{ font-size:1rem; margin-bottom:6px; }
.advantage-card p{ font-size:0.92rem; margin:0; margin-bottom:14px; }
.advantage-card .btn{ margin-top:auto; padding:10px 16px; align-self:flex-start; }

/* tariff highlight banner */
.coupon{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:center;
  background:var(--forest-deep);
  color:#fff;
  border-radius:var(--radius-lg);
  border-left:5px solid var(--clay);
  padding:30px 34px;
  margin:44px 0;
}
.coupon-amount{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:700;
  white-space:nowrap;
  color:#fff;
}
.coupon-amount span{
  display:block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#AFC8E2;
  margin-top:4px;
}
.coupon-text p{ color:rgba(255,255,255,0.86); margin:0 0 6px; font-size:0.94rem; }
.coupon-text p:last-child{ margin-bottom:0; }

.steps { display:none; }
.steps.is-visible { display:grid; }

.steps{
  display:grid;
  gap:16px;
  margin:28px 0 44px;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:flex-start;
  padding:18px 20px;
  border-radius:var(--radius);
  background:var(--paper);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}

.step:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:var(--shadow-sm);
}

.step-num{
  width:42px; height:42px;
  border-radius:8px;
  background:var(--surface);
  border:1.5px dashed var(--clay);
  color:var(--clay-deep);
  font-family:var(--font-mono);
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.step p{ margin:0; font-size:0.95rem; }
.step strong{ color:var(--ink); }

/* ---------------------------------------------------------------
   Region Selector
   --------------------------------------------------------------- */
.region-selector{
  display:flex;
  gap:12px;
  margin:28px 0 32px;
  border-bottom:2px solid var(--line);
  padding-bottom:0;
  position:relative;
}

.region-tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:color .3s ease;
  margin-bottom:-2px;
  position:relative;
}

.region-tab i{
  font-size:1.1rem;
}

.region-tab:hover{
  color:var(--forest-deep);
  background:rgb(243, 243, 243);
  transition:color .5s ease, background .5s ease;
}

.region-tab.active{
  color:var(--forest-deep);
  background:rgb(243, 243, 243);
}

.indicator {
  position:absolute;
  bottom:-3px;
  left:0;
  height:4px;
  background:var(--clay);
  border-radius:2px 2px 0 0;
  width:0;
  transition: left .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1);
  will-change:left,width;
  pointer-events:none;
  box-sizing:border-box;
}

.steps-wrapper{
  position:relative;
}

/* ---------------------------------------------------------------
   Payment Grid
   --------------------------------------------------------------- */
.payment-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.payment-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:24px 26px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.payment-card:hover{
  transform:translateY(-4px) scale(1.01) rotate(-0.4deg);
  box-shadow:var(--shadow-sm);
}
.payment-card i{
  width:42px;height:42px;
  border-radius:10px;
  background:var(--mint);
  color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-size:1.1rem;
}
.payment-card h3{ font-size:0.98rem; margin-bottom:4px; }
.payment-card p{ font-size:0.9rem; margin:0; }

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
.about-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  color:var(--forest-deep);
  background:var(--mint);
  border:1px solid #C3DAEE;
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:18px;
}

.about-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:start;
}

.value-list{
  display:grid;
  gap:14px;
}
.value-list li{
  display:flex;
  gap:14px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1);
}
.value-list li:hover{
  transform:translateY(-4px) scale(1.01) rotate(-0.4deg);
  box-shadow:var(--shadow-sm);
}
.value-list i{
  color:var(--clay);
  margin-top:3px;
  flex-shrink:0;
}
.value-list h3{ font-size:0.96rem; margin:0 0 4px; }
.value-list p{ margin:0; font-size:0.88rem; }

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  align-items:start;
}

form{
  display:grid;
  gap:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:34px;
  box-shadow:var(--shadow-sm);
}

.field{ display:grid; gap:7px; }
.field label{
  font-size:0.84rem;
  font-weight:600;
  color:var(--forest-deep);
}
.field .req{ color:var(--clay); }

input,textarea{
  font-family:var(--font-body);
  font-size:0.95rem;
  padding:13px 15px;
  border-radius:9px;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input::placeholder,textarea::placeholder{ color:var(--ink-faint); }
input:focus,textarea:focus{
  outline:none;
  border-color:var(--forest-light);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--mint);
}
textarea{ min-height:130px; resize:vertical; }

input:focus, textarea:focus{
  border-color:var(--clay);
  border-width:2px;
  border-radius:9px;
  box-shadow:0 0 0 4px var(--mint);
}

#feedback{
  display:none;
  padding:13px 16px;
  border-radius:9px;
  background:var(--mint);
  border-left:4px solid var(--forest);
  color:var(--forest-deep);
  font-weight:600;
  font-size:0.9rem;
}
#feedback.show{ display:flex; align-items:center; gap:8px; }

.contact-aside{ display:grid; gap:20px; }

.contact-card{
  background:var(--forest-deep);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:30px;
}

.contact-card h3{ color:#fff; font-size:1.05rem; margin-bottom:18px; }
.contact-line{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
  font-size:0.92rem;
  text-decoration:none;
  color:rgba(255,255,255,0.92);
}
.contact-line:last-child{ margin-bottom:0; }
.contact-line i{ color:#8FC4EE; margin-top:3px; width:16px; }

.sodexo-note{
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  font-size:0.88rem;
}
.sodexo-note strong{ color:var(--forest-deep); }
.sodexo-note a{ color:var(--clay-deep); font-weight:600; text-decoration:underline; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer{
  border-top:1px solid var(--line);
  padding:32px 0 110px;
  text-align:center;
  font-size:0.85rem;
  color:var(--ink-faint);
}

.cookie-policy-link{
  color:var(--forest-deep);
  font-weight:600;
  text-decoration:underline;
} 

/* ---------------------------------------------------------------
   Back to top
   --------------------------------------------------------------- */
#backToTopBtn{
  display:none;
  position:fixed;
  bottom:28px;
  right:24px;
  z-index:900;
  width:50px; 
  height:50px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:width .3s ease, border-radius .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
  border-radius: 50%;
  background-color: var(--forest-deep);
  border: none;
  font-weight: 600;
  box-shadow: 0px 0px 0px 4px var(--mint);
  overflow: hidden;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}

#backToTopBtn:hover{ 
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: var(--forest);
  align-items: center;
 }

#backToTopBtn:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

#backToTopBtn::before {
  position: absolute;
  bottom: -20px;
  color: white;
  /* transition-duration: .3s; */
  font-size: 0px;
  font-weight: 600;
}

#backToTopBtn:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  /* transform: translateY(-30px); */
  transition-duration: 0.3s;
}

/* ---------------------------------------------------------------
   Mobile sticky call bar
   --------------------------------------------------------------- */
.mobile-cta-bar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:950;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:10px 14px;
  gap:10px;
  box-shadow:0 -8px 24px rgba(17,48,78,0.12);
}
.mobile-cta-bar a{
  flex:1;
  text-align:center;
  padding:13px;
  border-radius:9px;
  font-weight:700;
  font-size:0.88rem;
  text-decoration:none;
}
.mobile-cta-bar .call{ background:var(--mint); color:var(--forest-deep); }
.mobile-cta-bar .quote{ background:var(--clay); color:#fff; }

.mobile-cta-bar .call:hover{ cursor:pointer; }

/* ---------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--clay);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
}

.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; }

.modal-backdrop { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,8,10,0.35); z-index:1200; padding:20px; backdrop-filter: blur(4px) saturate(1.02); }
.modal-backdrop[hidden] { display:none; }

.phone-modal {
  width:min(520px, 96%);
  max-width:520px;
  background:linear-gradient(180deg,#ffffff,#fbfbfb);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(8,10,12,0.35);
  padding:18px;
  position:relative;
  z-index:1201;
  outline:none;
  transform:translateY(8px) scale(.995);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.9,.2,1), opacity .26s ease;
  pointer-events:auto;
  border:1px solid rgba(10,12,14,0.06);
}

.modal-backdrop:not([hidden]) .phone-modal { transform:translateY(0) scale(1); opacity:1; }

.modal-close { position:absolute; right:12px; top:12px; background:transparent; border:none; font-size:16px; cursor:pointer; color:var(--ink-soft); padding:6px; border-radius:6px; }
.modal-close:hover { background:rgba(0,0,0,0.04); transition:background .3s ease, color .3s ease; }

.phone-modal-header h2 { margin:0 0 6px 0; font-size:2.05rem; }
.phone-modal-header .muted { margin:0; color:#6b7280; font-size:0.9rem; }

.phone-modal-body { margin-top:12px; display:grid; gap:12px; grid-template-columns:1fr; }
.phone-number { display:flex; flex-direction:column; gap:6px; }

.call-link { font-weight:700; color:var(--clay); text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid rgba(15,118,110,0.06); background:rgba(15,118,110,0.04); }
.call-link:hover{ color:var(--clay-deep); transition:background .3s ease, color .3s ease; }

.phone-meta { color:#6b7280; font-size:0.85rem; }

#contactInPhoneModal{ color:var(--clay); font-weight:600; text-decoration:underline; cursor:pointer; margin-bottom:6px; display:inline-block; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .hero-logo-panel{ max-width:300px; }
  /* .voucher-card removed (not used in current HTML pages) */
  .service-highlights{ grid-template-columns:1fr; }
  .checklist{ grid-template-columns:1fr; }
  .advantage-grid{ grid-template-columns:1fr 1fr; }
  .region-selector{ flex-wrap:wrap; }
  /* .stub-grid removed (not used in current HTML pages) */
  .payment-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .dossier{ padding:32px 22px; }
  .phone-pill{ display:none; }
  .header-actions{ justify-content:flex-end; gap:10px;}
}

@media (max-width:760px){
  .header-nav{ display:none; }
  .menuBtn{ display:flex; }
  .dropdown{ display:flex; }
  .mobile-cta-bar{ display:flex; }
  section{ padding:56px 0; }
  .hero{ padding:48px 0 64px; }
  .coupon{ grid-template-columns:1fr; text-align:left; }
  .advantage-grid{ grid-template-columns:1fr; }
  .service-grid{ display:flex; flex-direction:column; gap:20px; }
  .service-card, .service-body{ display:block; }
  .service-card{ flex:none; width:100%; min-width:0; }
  .service-photo{ height:160px; }
  .reveal{ opacity:1; transform:translateY(0); }
  .region-selector{ gap:8px; }
  .region-tab{ padding:12px 16px; font-size:0.88rem; gap:6px; }
  .region-tab i{ font-size:0.95rem; }
  footer{ padding-bottom:130px; }
  #backToTopBtn{ bottom:90px; }
  .phone-modal-body { grid-template-columns: 1fr 1fr; align-items:center; }
  .or-sep { align-self:center; justify-self:center; padding:0 8px; }
}

@media (max-width:480px){
  .header-inner{ padding:0 16px; min-height:64px; }
  .logo-plate{ width:42px; height:42px; }
  .brand-text{ font-size:1.05rem; }
  .wrap,.hero-inner{ padding-left:16px; padding-right:16px; }
  form{ padding:24px 20px; }
  .contact-card{ padding:24px 20px; }
  .region-selector{ gap:6px; }
  .region-tab{ padding:10px 12px; font-size:0.9rem;  }
}