/* ==========================================================================
   Auto-École RCM — Design System
   Identité 2026 · Vert RCM + Anthracite (RAL 7016) + Gris clair
   Barlow (display) / Inter (UI)
   ========================================================================== */

:root {
  /* Brand */
  --ink:        #111111;   /* noir charte RCM */
  --ink-2:      #1C1C1C;
  --ink-3:      #262626;
  --ink-soft:   #333333;
  --gold:       #2E7D32;   /* vert charte RCM */
  --gold-2:     #43A047;
  --gold-soft:  #E3F1E4;
  --azure:      #2E7D32;
  --azure-2:    #43A047;
  --sand:       #EEF0EE;
  --cream:      #F7F8F6;
  --paper:      #ffffff;

  /* Text */
  --text:       #1F2326;
  --text-soft:  #4A5157;
  --muted:      #6E777D;
  --on-dark:    #EEF1F0;
  --on-dark-soft:#B4BCC0;

  /* Lines & surfaces */
  --line:       #DEE2E0;
  --line-2:     #E6E9E7;
  --ring:       rgba(46,125,50,.5);

  /* Effects */
  --shadow-sm:  0 1px 2px rgba(36,40,43,.06), 0 2px 6px rgba(36,40,43,.05);
  --shadow:     0 10px 30px -12px rgba(36,40,43,.22);
  --shadow-lg:  0 30px 60px -20px rgba(36,40,43,.35);
  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  26px;

  /* Layout */
  --container:  1200px;
  --gutter:     clamp(20px, 5vw, 48px);

  /* Type */
  --display: "Barlow", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------- Reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
  font-family: var(--ui);
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -.015em; }
::selection { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-paper { background: var(--paper); }
.bg-ink   { background: var(--ink); color: var(--on-dark); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4 { color: #fff; }

/* --------------------------------------------------------------- Type util */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--ui); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--azure);
}
.eyebrow::before { content:""; width:26px; height:1px; background: var(--gold); display:inline-block; }
.bg-ink .eyebrow { color: var(--gold-2); }
.display { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.03; }
.h-xl { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-lg { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-soft); }
.bg-ink .lead { color: var(--on-dark-soft); }
.muted { color: var(--muted); }
.center { text-align:center; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
.gold-text { color: var(--gold); }
em.script { font-style: italic; font-family: var(--display); color: var(--gold); }

/* --------------------------------------------------------------- Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: .92em 1.5em; border-radius: 999px; font-weight:600; font-size:.98rem;
  border: 1px solid transparent; cursor:pointer; transition: all .22s ease;
  white-space: nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 8px 22px -10px rgba(46,125,50,.8); }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(46,125,50,.85); }
.btn-dark { background: var(--ink); color:#fff; }
.btn-dark:hover { background: var(--ink-2); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-lg { padding: 1.05em 1.9em; font-size: 1.02rem; }
.btn-block { width:100%; }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky; top:0; z-index: 50;
  background: rgba(247,248,246,.85);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height: 92px; }
.brand { display:flex; align-items:center; gap:.7rem; }
/* Le logo est la signature de l'école : il doit primer sur l'appel à l'action,
   et rester visible en permanence puisque l'en-tête est collant. */
.brand-mark { height:60px; width:auto; flex:none; display:block; }
.brand-mark img { height:60px; width:auto; display:block; transition: height .25s ease; }
/* Une fois la page défilée, l'en-tête se resserre mais le logo reste dominant. */
.site-header.scrolled .brand-mark, .site-header.scrolled .brand-mark img { height:48px; }
.site-header.scrolled .nav { height:76px; }
.brand-name { display:none; }
.brand-name b { font-family: var(--display); font-size:1.12rem; color: var(--ink); font-weight:700; letter-spacing:.01em; }
.brand-name span { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color: var(--azure); font-weight:600; }

.nav-menu { display:flex; align-items:center; gap:.12rem; }
.nav-menu > li { position: relative; }
.nav-link {
  display:inline-flex; align-items:center; gap:.3em; padding:.5em .62em; border-radius:10px;
  font-weight:500; font-size:.95rem; color: var(--text); transition: color .2s, background .2s; white-space:nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(46,125,50,.12); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { content:""; position:absolute; left:.85em; right:.85em; bottom:.32em; height:2px; background: var(--gold); border-radius:2px; }
.nav-link .chev { width:14px; height:14px; transition: transform .2s; }

/* dropdown */
.has-drop > .submenu {
  position:absolute; top:calc(100% + 8px); left:0; min-width: 230px;
  background: var(--paper); border:1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding:.5rem; opacity:0; visibility:hidden;
  transform: translateY(8px); transition: all .2s ease; z-index:60;
}
.has-drop:hover > .submenu, .has-drop:focus-within > .submenu { opacity:1; visibility:visible; transform: translateY(0); }
.submenu a { display:flex; align-items:center; gap:.7rem; padding:.7em .8em; border-radius:9px; font-size:.93rem; color: var(--text-soft); transition: background .18s, color .18s; }
.submenu a:hover { background: var(--sand); color: var(--ink); }
.submenu a .ico { color: var(--gold); }

.nav-cta { display:flex; align-items:center; gap:.6rem; }
.nav-tel { display:inline-flex; align-items:center; gap:.45em; font-weight:600; color: var(--ink); font-size:.95rem; white-space:nowrap; }
.nav-tel svg { width:17px; height:17px; color: var(--gold); }

.nav-toggle { display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background: var(--paper); align-items:center; justify-content:center; }
.nav-toggle svg { width:24px; height:24px; color: var(--ink); }
@media (max-width:1300px){ .nav-tel { display:none; } }

/* --------------------------------------------------------------- Hero */
.hero {
  position: relative; color: var(--on-dark);
  background:
    linear-gradient(112deg, rgba(10,20,32,.97) 0%, rgba(12,24,38,.90) 40%, rgba(16,33,52,.66) 72%, rgba(46,111,149,.40) 100%),
    radial-gradient(900px 500px at 8% 110%, rgba(46,125,50,.20), transparent 55%),
    url("../img/contact-1.jpg") center 38%/cover no-repeat,
    linear-gradient(160deg, var(--ink), #0b1622);
  overflow: hidden;
}
.hero::after {
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59h60M0 30h60' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
}
.hero .container { position: relative; z-index:2; }
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,5vw,64px); align-items:center; padding-block: clamp(56px, 8vw, 104px); }
.hero h1 { color:#fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
/* Logo repris en grand dans la première image : c'est la marque qu'on doit
   retenir avant même de lire le titre. */
.hero-logo { width: clamp(230px, 27vw, 340px); height:auto; display:block; margin-bottom:1.5rem;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45)); }
@media (max-width: 900px){
  .hero-logo { width: clamp(200px, 52vw, 280px); margin-inline:auto; }
  /* Le trait décoratif et l'interlettrage faisaient déborder la ligne
     « auto-école · moto-école · bateau-école » sur deux lignes bancales. */
  .hero .eyebrow { font-size:.72rem; letter-spacing:.12em; }
  .hero .eyebrow::before { display:none; }
}
.hero h1 .display { display:block; }
.hero-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.chip {
  display:inline-flex; align-items:center; gap:.5em; padding:.5em .9em; border-radius:999px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  font-size:.85rem; font-weight:500; color: var(--on-dark);
}
.chip svg { width:15px; height:15px; color: var(--gold-2); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-trust { display:flex; align-items:center; gap:1.2rem; margin-top:2.2rem; flex-wrap:wrap; }
.stars { display:inline-flex; gap:2px; color: var(--gold-2); }
.stars svg { width:18px; height:18px; }

/* hero card (quick form) */
.hero-card {
  background: var(--paper); color: var(--text); border-radius: var(--radius-lg);
  padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-lg);
  border:1px solid rgba(255,255,255,.5);
}
.hero-card h3 { font-size:1.35rem; }
.hero-card .muted { font-size:.92rem; }

/* --------------------------------------------------------------- Forms */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field label { font-size:.85rem; font-weight:600; color: var(--ink); }
.field input, .field select, .field textarea {
  width:100%; padding:.85em 1em; border-radius: 12px; border:1px solid var(--line);
  background: var(--cream); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--gold); background:#fff; box-shadow: 0 0 0 4px var(--gold-soft);
}
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-note { font-size:.8rem; color: var(--muted); margin-top:.4rem; }
.form-success {
  display:none; padding:1rem 1.1rem; border-radius:12px; background:#eaf6ee;
  border:1px solid #bfe2c9; color:#1f6b3a; font-weight:500; font-size:.95rem;
}
.form-success.show { display:block; }

/* --------------------------------------------------------------- Cards */
.grid { display:grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,2.6vw,30px); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.card-ico {
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.1rem;
  background: linear-gradient(150deg, var(--sand), #fff); border:1px solid var(--line-2); color: var(--azure);
}
.card-ico svg { width:26px; height:26px; }
.card h3 { font-size:1.3rem; margin-bottom:.5rem; }
.card p { color: var(--text-soft); font-size:.97rem; }

/* formation card */
.formation {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius: var(--radius-lg); border:1px solid var(--line); background: var(--paper);
  box-shadow: var(--shadow-sm); transition: transform .28s ease, box-shadow .28s ease;
}
.formation:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.formation-media { position:relative; aspect-ratio: 16/10; display:grid; place-items:center; overflow:hidden; }
.formation-media svg { width: 40%; height:auto; opacity:.9; }
.media-auto  { background: linear-gradient(150deg, #16304a, #0e1b2a); color: var(--gold-2); }
.media-moto  { background: linear-gradient(150deg, #1c3a57, #122336); color: var(--gold-2); }
.media-bateau{ background: linear-gradient(150deg, #1d4a5e, #102b38); color: var(--gold-2); }
.formation-tag { position:absolute; top:14px; left:14px; padding:.4em .85em; border-radius:999px; background: rgba(255,255,255,.92); color: var(--ink); font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.formation-body { padding: clamp(20px,2.4vw,28px); display:flex; flex-direction:column; flex:1; }
.formation-body h3 { font-size:1.4rem; margin-bottom:.5rem; }
.formation-body p { color: var(--text-soft); font-size:.96rem; flex:1; }
.formation-meta { display:flex; gap:1.2rem; margin:1rem 0 1.2rem; flex-wrap:wrap; }
.formation-meta div { font-size:.82rem; color: var(--muted); }
.formation-meta b { display:block; font-family:var(--display); font-size:1.15rem; color: var(--ink); font-weight:600; }

/* feature list */
.ticks { display:grid; gap:.7rem; }
.ticks li { display:flex; gap:.7rem; align-items:flex-start; color: var(--text-soft); font-size:.97rem; }
.ticks svg { flex:none; width:22px; height:22px; color: var(--gold); margin-top:1px; }
.bg-ink .ticks li { color: var(--on-dark-soft); }

/* stats */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2vw,28px); }
.stat { text-align:center; }
.stat b { display:block; font-family: var(--display); font-size: clamp(2rem,4vw,2.9rem); color: var(--gold); line-height:1; }
.stat span { font-size:.86rem; color: var(--on-dark-soft); letter-spacing:.03em; }
.bg-cream .stat span, .bg-sand .stat span { color: var(--muted); }
.bg-cream .stat b, .bg-sand .stat b { color: var(--azure); }

/* reviews */
.review {
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,2.6vw,30px); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:1rem;
}
.review p { color: var(--text); font-size:1.02rem; line-height:1.6; }
.review-head { display:flex; align-items:center; gap:.85rem; }
.avatar { width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; color:#fff; font-family:var(--ui); background: linear-gradient(150deg, var(--azure), var(--ink)); }
.review-head b { display:block; font-size:.97rem; color: var(--ink); }
.review-head span { font-size:.8rem; color: var(--muted); }
.gbadge { display:inline-flex; align-items:center; gap:.6rem; padding:.7em 1.1em; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.gbadge b { font-family:var(--display); font-size:1.6rem; color: var(--ink); line-height:1; }

/* team */
.team-card { text-align:center; }
.team-photo {
  width:100%; aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(150deg, var(--sand), #fff); border:1px solid var(--line-2);
  display:grid; place-items:center; color: var(--azure); position:relative;
}
.team-photo .initials { font-family: var(--display); font-size: 3rem; color: var(--azure); opacity:.5; }
.team-card h3 { font-size:1.18rem; margin-top:1rem; }
.team-card .role { color: var(--gold); font-weight:600; font-size:.9rem; }
.team-card p { font-size:.92rem; color: var(--text-soft); margin-top:.4rem; }

/* fleet */
.fleet-card { display:flex; flex-direction:column; }
.fleet-media { aspect-ratio: 16/11; border-radius: var(--radius); overflow:hidden; display:grid; place-items:center; border:1px solid var(--line-2); position:relative; }
.fleet-media svg { width:46%; }
.fleet-card h3 { font-size:1.12rem; margin-top:.9rem; }
.fleet-card .spec { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.tagpill { font-size:.76rem; padding:.32em .7em; border-radius:999px; background: var(--sand); color: var(--ink-soft); font-weight:600; }

/* placeholder note */
.ph-note { position:absolute; bottom:10px; right:10px; font-size:.68rem; background: rgba(14,27,42,.78); color:#fff; padding:.3em .6em; border-radius:7px; letter-spacing:.02em; }

/* steps */
.steps { counter-reset: step; display:grid; gap:1.5rem; }
.step { display:flex; gap:1.2rem; align-items:flex-start; }
.step-num { flex:none; width:50px; height:50px; border-radius:14px; background: var(--ink); color: var(--gold); display:grid; place-items:center; font-family:var(--display); font-size:1.3rem; font-weight:700; }
.step h3 { font-size:1.15rem; margin-bottom:.3rem; }
.step p { color: var(--text-soft); font-size:.95rem; }

/* split */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }
.media-frame {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow:hidden; position:relative;
  background: linear-gradient(150deg, var(--sand), #fff); border:1px solid var(--line-2);
  display:grid; place-items:center; box-shadow: var(--shadow);
}
.media-frame svg { width: 38%; color: var(--azure); opacity:.85; }
.media-frame.dark { background: linear-gradient(150deg, var(--ink-2), var(--ink)); }
.media-frame.dark svg { color: var(--gold-2); }
/* real images filling frames */
.media-frame > img, .formation-media > img, .fleet-media > img, .team-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-frame > img ~ .ph-note, .formation-media > img ~ .ph-note, .fleet-media > img ~ .ph-note, .team-photo > img ~ .ph-note { display:none; }
.img-frame { position:relative; overflow:hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.img-frame > img { width:100%; height:100%; object-fit:cover; display:block; }
/* partner / label logos */
.logos-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(24px,4.5vw,60px); }
.logos-strip img { height:54px; width:auto; object-fit:contain; transition: transform .25s ease; }
.logos-strip img:hover { transform: scale(1.06); }
@media (max-width:560px){ .logos-strip img { height:38px; } }

/* CTA band */
.cta-band { position:relative; overflow:hidden; border-radius: var(--radius-lg); padding: clamp(36px,5vw,64px);
  background: radial-gradient(800px 400px at 85% -20%, rgba(46,111,149,.5), transparent 60%), linear-gradient(150deg, var(--ink), var(--ink-2)); color:#fff; }
.cta-band h2 { color:#fff; }
.cta-band .lead { color: var(--on-dark-soft); }

/* zones */
.zone-card { position:relative; overflow:hidden; border-radius: var(--radius); border:1px solid var(--line); background: var(--paper); padding: clamp(22px,2.6vw,30px); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.zone-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.zone-card .pin { width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background: var(--sand);color: var(--azure);margin-bottom:1rem;border:1px solid var(--line-2);}
.zone-card h3 { font-size:1.25rem; }
.zone-card .arrow { margin-top:1rem; color: var(--gold); font-weight:600; display:inline-flex; align-items:center; gap:.4em; font-size:.92rem; }

/* faq */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); padding:1.2rem 0; }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; list-style:none; font-family:var(--display); font-size:1.15rem; color: var(--ink); font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition: transform .25s, background .25s, color .25s; color: var(--azure); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--gold); color: var(--ink); border-color: var(--gold); }
.faq p { margin-top:.9rem; color: var(--text-soft); }

/* breadcrumb / page hero */
.page-hero { background: linear-gradient(160deg, var(--ink), var(--ink-2)); color:#fff; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(700px 360px at 90% -30%, rgba(46,125,50,.18), transparent 60%); }
.page-hero .container { position:relative; z-index:2; padding-block: clamp(48px,7vw,86px); }
.page-hero h1 { color:#fff; }
.crumb { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color: var(--on-dark-soft); margin-bottom:1rem; }
.crumb a:hover { color: var(--gold-2); }
.crumb svg { width:14px;height:14px; opacity:.6; }

/* prose */
.prose p { margin-bottom:1.1rem; color: var(--text-soft); }
.prose h2 { margin: 2rem 0 1rem; font-size: clamp(1.5rem,2.5vw,2rem); }
.prose h3 { margin: 1.6rem 0 .7rem; font-size:1.25rem; }
.prose ul { margin:0 0 1.1rem; display:grid; gap:.6rem; }
.prose ul li { position:relative; padding-left:1.6rem; color: var(--text-soft); }
.prose ul li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--gold); }

/* --------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding-top: clamp(48px,6vw,80px); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,52px); padding-bottom: 3rem; }
.site-footer .brand-name b { color:#fff; }
.footer-about p { margin-top:1rem; font-size:.93rem; max-width: 34ch; }
.footer-col h4 { color:#fff; font-family:var(--ui); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:700; }
.footer-col ul { display:grid; gap:.6rem; }
.footer-col a { font-size:.94rem; color: var(--on-dark-soft); transition: color .2s; }
.footer-col a:hover { color: var(--gold-2); }
.footer-contact li { display:flex; gap:.7rem; font-size:.93rem; margin-bottom:.8rem; align-items:flex-start; }
.footer-contact svg { width:18px; height:18px; color: var(--gold); flex:none; margin-top:2px; }
.socials { display:flex; gap:.6rem; margin-top:1.2rem; }
.socials a { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background: rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;transition: background .2s, transform .2s;}
.socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.socials svg { width:19px;height:19px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; }
.footer-bottom a:hover { color: var(--gold-2); }

/* trust strip */
.trust-strip { display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; align-items:center; justify-content:center; }
.trust-item { display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:500; color: var(--text-soft); }
.trust-item svg { width:22px; height:22px; color: var(--gold); flex:none; }

/* float CTA mobile */
.float-cta { display:none; }

/* --------------------------------------------------------------- Reveal */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1120px){
  .nav-menu, .nav-tel { display:none; }
  .nav-toggle { display:flex; }
  /* Sur mobile, l'appel à l'action de l'en-tête recouvrait le logo. Il fait
     doublon avec la barre fixe du bas (« Appeler » et « Devis gratuit »), on le
     retire pour laisser la marque respirer. */
  .nav-cta .btn { display:none; }
  /* En-tête compact : le logo reste lisible sans écraser la barre. */
  .nav, .site-header.scrolled .nav { height:76px; }
  .brand-mark, .brand-mark img,
  .site-header.scrolled .brand-mark, .site-header.scrolled .brand-mark img { height:50px; }
  .nav-menu.open {
    display:flex; position:fixed; inset:76px 0 0; flex-direction:column; align-items:stretch;
    background: var(--cream); padding: 1.2rem var(--gutter); gap:.2rem; overflow:auto; z-index:49;
    border-top:1px solid var(--line);
  }
  .nav-menu.open .nav-link { font-size:1.1rem; padding:.9em .6em; border-bottom:1px solid var(--line-2); border-radius:0; }
  .nav-menu.open .nav-link.is-active::after { display:none; }
  .nav-menu.open .has-drop .submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:.2rem 0 .6rem 1rem; min-width:0; background:transparent; }
  .nav-menu.open .submenu a { padding:.6em .4em; }
  .float-cta { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; gap:.6rem; }
  .float-cta .btn { flex:1; box-shadow: var(--shadow-lg); }
  body { padding-bottom: 84px; }
}
@media (max-width: 980px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { order:2; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); gap:2rem 1rem; }
  .split { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .field-row { grid-template-columns:1fr; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width:100%; }
  .cta-band .hero-actions .btn { width:auto; }
}

/* ----------------------------------------------------------------- Tarifs (2026) */
.price-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.price-card__head { background: var(--ink); color:#fff; padding: 1.1rem 1.4rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.price-card__head h3 { color:#fff; font-size:1.25rem; margin:0; }
.price-card__head span { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-2); font-weight:700; }
.price-card__group { padding: .5rem 1.4rem 0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--azure); font-weight:700; margin-top:.6rem; }
.price-list { list-style:none; padding: .4rem 1.4rem 1rem; margin:0; }
.price-list li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:.95rem; }
.price-list li:last-child { border-bottom:0; }
.price-list li b { font-family: var(--display); font-size:1.05rem; color: var(--ink); white-space:nowrap; }
.price-list li small { display:block; color: var(--muted); font-size:.82rem; }
.price-card__note { padding: .8rem 1.4rem 1.2rem; font-size:.85rem; color: var(--muted); border-top:1px solid var(--line); background: var(--cream); }
.price-mini { margin-top:1.4rem; }
.doc-list { columns: 2; column-gap: 2rem; padding-left: 1.2rem; font-size:.95rem; color: var(--text-soft); list-style: disc; }
.doc-list li::marker { color: var(--gold); }
.doc-list li { break-inside: avoid; margin-bottom:.45rem; }
.doc-list em { color: var(--muted); font-style: normal; font-size:.86rem; }
@media (max-width: 720px){ .doc-list { columns:1; } .price-list li { flex-direction:column; gap:.1rem; } }