/* =========================================================
   RACHAT CAMPING CAR — direction artistique « Maison »
   ---------------------------------------------------------
   Inspiration : maisons de luxe françaises.
   Ivoire chaud, bleu nuit profond, laiton. Titres en serif
   Cormorant Garamond, textes en Jost. Angles nets, filets
   d'un cheveu, beaucoup de blanc, aucune ombre inutile.

   Les variables du bloc :root repeignent le site entier.
   ========================================================= */

/* ---------- Polices hébergées en local ---------- */
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ---- la palette : 5 couleurs, pas une de plus ---- */
  --ivory:#F4F1EA;        /* fond de page, papier chaud */
  --ivory-2:#EAE5DA;      /* bandes alternées */
  --paper:#FCFAF6;        /* panneaux, cartes */
  --night:#0E2233;        /* bleu nuit profond */
  --night-2:#16344F;
  --ink:#1C1B18;          /* texte, noir chaud */
  --ink-soft:#6E6A62;     /* texte secondaire */
  --brass:#B08A4E;        /* laiton décoratif : filets, bordures, jauges */
  --brass-ink:#806230;    /* laiton lisible : texte sur fond clair + bouton principal */
  --brass-lt:#C9A874;     /* laiton clair, sur fonds sombres */
  --red:#9E3B32;

  /* ---- filets : un cheveu, jamais une bordure ---- */
  --hair:rgba(28,27,24,.13);
  --hair-2:rgba(28,27,24,.22);
  --hair-light:rgba(244,241,234,.20);
  --rule:var(--hair);
  --rule-strong:var(--hair-2);

  /* ---- angles nets ---- */
  --r:0px;

  /* ---- une seule ombre, très diffuse, pour ce qui flotte ---- */
  --lift:0 30px 70px -30px rgba(14,34,51,.45);

  /* ---- typographie ---- */
  --ff-display:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ff:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1240px;

  /* ---- anciens noms conservés (404.html, pages légales) ---- */
  --ff-title:var(--ff-display);
  --cream:var(--ivory);
  --cream-2:var(--ivory-2);
  --forest:var(--night);
  --forest-2:var(--night-2);
  --brick:var(--brass);
  --brick-dark:#8A6A36;
  --r-lg:0px; --r-md:0px; --r-sm:0px;
  --sh-1:none; --sh-2:none; --sh-3:var(--lift);
  --glass:var(--paper);
  --glass-line:var(--hair);
  --glass-bar:rgba(244,241,234,.92);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--ff); font-weight:400; font-size:16.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* grain de papier, très discret */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0}
::selection{background:var(--brass); color:var(--paper)}

h1,h2,h3,h4{margin:0; font-family:var(--ff-display); font-weight:300;
  line-height:1.04; letter-spacing:-.015em; color:var(--night)}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px}
.wrap--narrow{max-width:820px}
.center{text-align:center}
.i{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------- le petit label tracké, signature de la maison ---------- */
.kicker{font-family:var(--ff); font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.26em; color:var(--brass-ink); margin-bottom:26px; display:block}
.kicker--rule{display:flex; align-items:center; gap:16px; justify-content:center}
.kicker--rule::before,.kicker--rule::after{content:''; width:34px; height:1px; background:currentColor; opacity:.45}

/* ---------- BOUTONS : plats, tracés, sans ombre ---------- */
.btn{
  --bg-btn:var(--night); --fg-btn:var(--ivory); --bd-btn:var(--night);
  display:inline-flex; align-items:center; justify-content:center; gap:.9em;
  background:var(--bg-btn); color:var(--fg-btn); border:1px solid var(--bd-btn);
  border-radius:var(--r); cursor:pointer;
  padding:17px 34px; font-family:var(--ff); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; line-height:1;
  transition:background .45s cubic-bezier(.22,.61,.36,1), color .45s, border-color .45s;
  white-space:nowrap;
}
.btn .i{width:14px; height:14px; transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.btn:hover .i{transform:translateX(4px)}
.btn--primary{--bg-btn:var(--brass-ink); --fg-btn:#FFFDF8; --bd-btn:var(--brass-ink)}
.btn--primary:hover{--bg-btn:var(--night); --bd-btn:var(--night)}
.btn--dark:hover{--bg-btn:var(--brass); --bd-btn:var(--brass)}
.btn--light{--bg-btn:transparent; --fg-btn:var(--ivory); --bd-btn:rgba(244,241,234,.55)}
.btn--light:hover{--bg-btn:var(--ivory); --fg-btn:var(--night); --bd-btn:var(--ivory)}
.btn--ghost{--bg-btn:transparent; --fg-btn:var(--ink-soft); --bd-btn:var(--hair-2)}
.btn--ghost:hover{--fg-btn:var(--night); --bd-btn:var(--night)}
.btn--sm{padding:13px 24px; font-size:10.5px; letter-spacing:.18em}
.btn--lg{padding:20px 44px; font-size:12px}
.btn--go{min-width:250px}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- HEADER ---------- */
.header{position:sticky; top:0; z-index:60; background:var(--glass-bar);
  border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px);
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.header.is-hidden{transform:translateY(-100%)}
.header__in{display:flex; align-items:center; gap:34px; height:92px}
.logo{display:inline-flex; align-items:center; flex:none}
.logo img{height:52px; width:auto; display:block}
.logo--light img{height:58px}

.nav{display:flex; gap:38px; margin-left:auto; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft)}
.nav a{position:relative; padding:4px 0; white-space:nowrap; transition:color .3s}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brass); transition:right .45s cubic-bezier(.22,.61,.36,1)}
.nav a:hover{color:var(--night)}
.nav a:hover::after{right:0}

.header__right{display:flex; align-items:center; gap:22px; margin-left:auto}
.nav + .header__right{margin-left:0}
.phone{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:400;
  letter-spacing:.06em; color:var(--night); white-space:nowrap; transition:color .3s}
.phone .i{color:var(--brass); width:15px; height:15px}
.phone:hover{color:var(--brass-ink)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--hair-2); background:transparent;
  border-radius:var(--r); cursor:pointer; padding:0; flex-direction:column; gap:5px;
  align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1px; background:var(--night); transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- HERO : photographie pleine largeur ---------- */
.hero{position:relative; padding:104px 0 116px; overflow:hidden; isolation:isolate}
.hero__bg{
  display:block; position:absolute; inset:0; z-index:-1;
  background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(6,18,29,.55) 100%),
    linear-gradient(100deg, rgba(9,24,37,.95) 0%, rgba(9,24,37,.90) 40%, rgba(10,27,42,.74) 70%, rgba(10,27,42,.66) 100%),
    url("../img/hero.webp");
  background-size:cover,cover,cover;
  background-position:center,center,center 42%;
  background-repeat:no-repeat;
}
.hero__in{position:relative; display:grid; grid-template-columns:1fr 470px;
  grid-template-areas:"copy form" "points form"; column-gap:72px; row-gap:0; align-items:start}
.hero__copy{grid-area:copy}
.formcard{grid-area:form}
.hero__points{grid-area:points; margin-top:44px}

.hero .kicker{color:var(--brass-lt); margin-bottom:30px}
.hero h1{color:#FBF8F2; font-size:clamp(42px,6.4vw,92px); font-weight:300;
  letter-spacing:-.02em; line-height:1.0; margin-bottom:0}
.hero h1 em{font-style:italic; color:var(--brass-lt)}
.hero__rule{width:64px; height:1px; background:var(--brass); opacity:.8; margin:34px 0}
.lead{color:#D6CEC0; font-size:19px; font-weight:300; max-width:44ch; line-height:1.7}

.ticks{list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:44ch;
  border-top:1px solid var(--hair-light)}
.ticks li{position:relative; padding:15px 0 15px 30px; color:#CFC7BA; font-size:13.5px;
  font-weight:300; letter-spacing:.02em; border-bottom:1px solid var(--hair-light)}
.ticks li::before{content:''; position:absolute; left:0; top:23px; width:14px; height:1px; background:var(--brass)}
.hero__sig{margin-top:32px; color:#A9A195; font-size:13.5px; font-weight:300; font-style:italic;
  font-family:var(--ff-display); font-size:17px; line-height:1.6; max-width:40ch}

/* sur petit écran, la version allégée de la photo (106 Ko au lieu de 215) */
@media (max-width:900px){
  .hero__bg{background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(6,18,29,.55) 100%),
    linear-gradient(100deg, rgba(9,24,37,.95) 0%, rgba(9,24,37,.90) 40%, rgba(10,27,42,.74) 70%, rgba(10,27,42,.66) 100%),
    url("../img/hero-sm.webp")}
}

/* ---------- HAUT DES PAGES SECONDAIRES ---------- */
.subhero{padding:58px 0 70px; text-align:center}
.subhero__in{max-width:780px; margin:0 auto}
.subhero .crumb{margin-bottom:30px}
.subhero h1{font-size:clamp(34px,5vw,64px); font-weight:300; line-height:1.05}
.subhero h1 em{font-style:italic; color:var(--brass-ink)}
.subhero .hero__rule{margin:32px auto}
.subhero .lead{color:var(--ink-soft); max-width:56ch; margin:0 auto; font-size:17.5px}
.subhero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:42px}
.subhero__ph{background:var(--night)}
.subhero__ph img{width:100%; height:clamp(260px,40vw,500px); object-fit:cover;
  object-position:center 45%; display:block}

/* liste de marques, en italique dans la bande sombre */
.pull__quote--liste{max-width:30ch; font-size:clamp(21px,2.3vw,31px); line-height:1.5}

/* ---------- PANNEAU FORMULAIRE ---------- */
.formcard{background:var(--paper); border:1px solid rgba(176,138,78,.35);
  border-top:3px solid var(--brass); border-radius:var(--r); box-shadow:var(--lift);
  position:sticky; top:112px; overflow:hidden}
.formcard__head{padding:34px 36px 26px; border-bottom:1px solid var(--hair); text-align:center}
.formcard__head h2{font-size:30px; font-weight:400; letter-spacing:-.01em; color:var(--night)}
.formcard__head p{color:var(--ink-soft); font-size:12.5px; font-weight:300; margin-top:10px;
  letter-spacing:.04em}
.formcard__foot{display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 36px; background:rgba(176,138,78,.06); border-top:1px solid var(--hair);
  color:var(--ink-soft); font-size:11px; font-weight:300; letter-spacing:.08em; text-transform:uppercase}
.formcard__foot .i{color:var(--brass); width:13px; height:13px}

/* étapes */
.steps{padding:26px 36px 6px}
.steps__list{list-style:none; margin:0 0 14px; padding:0; display:flex; gap:26px; flex-wrap:wrap}
.steps__list li{font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#B9B3A8}
.steps__list li em{font-style:normal}
.steps__list li.is-done{color:var(--ink-soft)}
.steps__list li.is-active{color:var(--brass-ink)}
.steps__bar{height:1px; background:var(--hair); position:relative; overflow:hidden}
.steps__fill{position:absolute; inset:0 auto 0 0; width:25%; background:var(--brass);
  transition:width .6s cubic-bezier(.22,.61,.36,1)}

/* fieldsets */
.step{display:none; border:none; margin:0; padding:30px 36px 34px}
.step.is-active{display:block}
.step__title{font-family:var(--ff-display); font-size:25px; font-weight:400; color:var(--night);
  padding:0; margin-bottom:24px; display:block; letter-spacing:-.01em; line-height:1.25}
.step__nav{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:30px;
  padding-top:26px; border-top:1px solid var(--hair)}
.step__nav .btn--primary{margin-left:auto}

/* champs */
.field{display:flex; flex-direction:column; gap:9px; margin-bottom:20px}
.field > label{font-size:10px; font-weight:500; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.18em}
.opt{font-weight:300; color:#9C978D; text-transform:none; letter-spacing:.02em}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; padding:13px 14px; font-family:inherit; font-size:16px; font-weight:400;
  color:var(--ink); background:#fff; border:1px solid var(--hair-2); border-radius:var(--r);
  transition:border-color .3s, box-shadow .3s;
}
select{appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08A4E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:15px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass)}
input.is-bad,select.is-bad{border-color:var(--red); box-shadow:0 0 0 1px rgba(158,59,50,.4)}
textarea{resize:vertical; min-height:84px}
::placeholder{color:#B0AAA0; font-weight:300}
.hint{color:var(--ink-soft); font-size:11.5px; font-weight:300; line-height:1.5; letter-spacing:.02em}
.inp-unit{position:relative; display:flex; align-items:center}
.inp-unit span{position:absolute; right:14px; color:var(--brass-ink); font-size:13px; font-weight:400; pointer-events:none}
.inp-unit input{padding-right:42px}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* choix du véhicule */
.choices{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.choice{position:relative; display:block; cursor:pointer; background:var(--paper);
  border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
  transition:border-color .35s, box-shadow .35s}
.choice input{position:absolute; opacity:0; inset:0; cursor:pointer; z-index:2}
.choice__ph{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--night)}
.choice__ph img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.82); transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .5s}
.choice__lb{display:flex; align-items:center; justify-content:center; min-height:38px;
  padding:8px 6px; text-align:center; font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); line-height:1.35; transition:.3s}
.choice:hover{border-color:var(--brass)}
.choice:hover .choice__ph img{transform:scale(1.06); filter:saturate(1)}
.choice:has(input:checked){border-color:var(--brass); box-shadow:0 0 0 1px var(--brass)}
.choice:has(input:checked) .choice__lb{background:var(--brass); color:#FFFDF8}
.choice:has(input:checked) .choice__ph img{filter:saturate(1)}
.choice:has(input:focus-visible){outline:1px solid var(--brass); outline-offset:2px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0}
.chip span{display:inline-block; padding:9px 17px; border:1px solid var(--hair-2); border-radius:var(--r);
  font-size:11.5px; font-weight:400; letter-spacing:.06em; color:var(--ink-soft); background:#fff;
  transition:.3s}
.chip:hover span{border-color:var(--brass); color:var(--night)}
.chip input:checked + span{background:var(--night); border-color:var(--night); color:var(--ivory)}
.chip input:focus-visible + span{outline:1px solid var(--brass); outline-offset:2px}

/* consentement */
.consent{display:flex; gap:12px; align-items:flex-start; font-size:11.5px; font-weight:300;
  color:var(--ink-soft); line-height:1.6; cursor:pointer; margin-top:8px}
.consent input{margin-top:3px; width:15px; height:15px; accent-color:var(--brass); flex:none; cursor:pointer}

.resume{margin:0 36px; padding:12px 16px; background:rgba(176,138,78,.09);
  border:1px solid rgba(176,138,78,.32); border-radius:var(--r);
  font-size:11.5px; font-weight:300; color:var(--ink); display:flex; gap:12px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.resume button{background:none; border:none; cursor:pointer; font-family:var(--ff);
  font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--brass-ink);
  font-weight:500; padding:0; border-bottom:1px solid var(--brass-ink)}

.err{color:var(--red); font-size:12px; font-weight:400; letter-spacing:.03em; margin-top:12px}
.err:empty{display:none}

/* succès */
.success{padding:54px 34px 46px; text-align:center}
.success__icon{width:58px; height:58px; margin:0 auto 26px; border:1px solid var(--brass);
  display:grid; place-items:center; border-radius:50%}
.success__icon svg{width:24px; height:24px; fill:none; stroke:var(--brass); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.success h3{font-size:32px; font-weight:400; margin-bottom:16px}
.success p{color:var(--ink-soft); font-size:15px; font-weight:300; line-height:1.7}
.success__small{font-size:13px !important; margin-top:18px !important}
.success__small a{color:var(--brass-ink); border-bottom:1px solid currentColor}
.success .btn{margin-top:30px}

/* ---------- BANDEAU CONFIANCE ---------- */
.trust{background:var(--ivory-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.trust__in{display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0}
.trust__i{padding:56px 44px 56px 0; border-right:1px solid var(--hair)}
.trust__i:first-child{padding-left:0}
.trust__i:not(:first-child){padding-left:44px}
.trust__i:last-child{border-right:none; padding-right:0}
.trust__i .trust__t{font-family:var(--ff); font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--brass-ink); margin-bottom:16px}
.trust__i p{color:var(--ink); font-size:15px; font-weight:300; line-height:1.75}

/* ---------- SECTIONS ---------- */
.sec{padding:140px 0}
.sec--alt{background:var(--ivory-2)}
.sec + .sec{border-top:1px solid var(--hair)}
.sec__head{max-width:660px; margin:0 auto 76px; text-align:center}
.sec__head h2{font-size:clamp(34px,4.6vw,62px); font-weight:300; margin-bottom:22px}
.sec__head h2 em{font-style:italic; color:var(--brass)}
.sec__head p{color:var(--ink-soft); font-size:16.5px; font-weight:300; line-height:1.75}

/* comment ça marche */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.how__c{padding:0 46px; border-left:1px solid var(--hair); text-align:center}
.how__c:first-child{border-left:none}
.how__n{display:block; font-family:var(--ff-display); font-size:60px; font-weight:300;
  color:var(--brass-ink); line-height:1; letter-spacing:0; margin-bottom:24px}
.how__c h3{font-size:25px; font-weight:400; margin-bottom:16px}
.how__c p{color:var(--ink-soft); font-size:15px; font-weight:300; line-height:1.8}

/* galerie des véhicules */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px}
.gallery__i{margin:0; overflow:hidden}
.gallery__i a,.gallery__i > span{display:block}
.gallery__ph{display:block; overflow:hidden; background:var(--night)}
.gallery__i img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;
  filter:saturate(.85); transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .7s}
.gallery__i:hover img{transform:scale(1.05); filter:saturate(1)}
.gallery__i figcaption{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair-2);
  font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.22em;
  color:var(--night); display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:color .35s, border-color .35s}
.gallery__i a:hover figcaption{color:var(--brass-ink); border-top-color:var(--brass)}
.gallery__i figcaption::after{content:'→'; font-size:13px; opacity:0; transform:translateX(-6px);
  transition:opacity .35s, transform .35s}
.gallery__i a:hover figcaption::after{opacity:1; transform:none}

/* bande éditoriale : une phrase, rien d'autre */
.pull{background:var(--night); color:#EDE7DC; text-align:center; padding:120px 0}
.pull__quote{font-family:var(--ff-display); font-size:clamp(25px,2.9vw,40px); font-weight:300;
  font-style:italic; line-height:1.4; max-width:26ch; margin:0 auto; color:#F4EFE5;
  text-wrap:balance}
.pull .kicker{color:var(--brass-lt); margin-bottom:34px}
.pull__sig{margin-top:38px; font-family:var(--ff); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.24em; color:rgba(244,241,234,.55); font-style:normal}

/* qui sommes-nous */
.who{display:grid; grid-template-columns:360px 1fr; gap:80px; align-items:start}
.who__card{background:var(--night); color:#fff; border:1px solid rgba(176,138,78,.45);
  border-radius:var(--r); padding:52px 40px 40px; display:flex; flex-direction:column;
  align-items:center; text-align:center}
.who__logo{width:190px; height:auto; display:block; margin:0 0 26px}
.who__base{margin-top:6px; color:#B6AEA1; font-size:13px; font-weight:300; line-height:1.7;
  letter-spacing:.06em}
.who__meta{margin-top:34px; padding-top:26px; border-top:1px solid rgba(176,138,78,.4);
  display:flex; flex-direction:column; gap:12px; width:100%; align-items:center}
.who__meta span{color:#8E877C; font-size:10px; text-transform:uppercase; letter-spacing:.2em}
.who__meta a{color:#F4EFE5; font-family:var(--ff-display); font-weight:400; font-size:26px; letter-spacing:.02em}
.who__meta a:hover{color:var(--brass-lt)}
.who__txt{padding-top:6px}
.who__txt h3{font-size:34px; font-weight:300; margin-bottom:28px}
.who__txt p{color:var(--ink); font-size:16.5px; font-weight:300; line-height:1.9; margin-bottom:22px}
.who__txt p:last-child{margin-bottom:0}

/* faq */
.faq{border-top:1px solid var(--hair-2)}
.faq details{border-bottom:1px solid var(--hair-2)}
.faq summary{cursor:pointer; padding:30px 54px 30px 0; font-family:var(--ff-display);
  font-weight:400; font-size:22px; color:var(--night); position:relative; list-style:none;
  letter-spacing:-.005em; transition:color .3s}
.faq summary:hover{color:var(--brass-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:8px; top:50%; width:13px; height:1px;
  background:var(--brass); transform:translateY(-50%)}
.faq summary::before{content:''; position:absolute; right:14px; top:50%; width:1px; height:13px;
  background:var(--brass); transform:translateY(-50%); transition:opacity .35s, transform .35s}
.faq details[open] summary::before{opacity:0; transform:translateY(-50%) rotate(90deg)}
.faq details p{padding:0 60px 34px 0; color:var(--ink-soft); font-size:15.5px; font-weight:300;
  line-height:1.85; max-width:70ch}

/* cta final */
.cta{position:relative; color:var(--ivory); text-align:center;
  background-image:
    linear-gradient(180deg, rgba(10,26,40,.88) 0%, rgba(10,26,40,.80) 100%),
    url("../img/cta.webp"),
    linear-gradient(120deg,var(--night),var(--night-2));
  background-size:cover,cover,cover;
  background-position:center,center 58%,center;
  background-repeat:no-repeat}
.cta__in{display:flex; flex-direction:column; align-items:center; gap:0; padding:130px 40px}
.cta .kicker{color:var(--brass-lt)}
.cta h2{color:#F7F3EA; font-size:clamp(30px,4.2vw,58px); font-weight:300; max-width:21ch;
  line-height:1.12; text-wrap:balance}
.cta p{color:#C6BEB1; margin-top:24px; font-size:16.5px; font-weight:300; max-width:44ch}
.cta .btn{margin-top:44px}

/* footer : une seule ligne — logo à gauche, contact à droite */
.footer{background:var(--night); color:#9B958A; font-size:13.5px;
  border-top:1px solid rgba(176,138,78,.35)}
.footer__in{display:flex; align-items:center; justify-content:space-between; gap:24px 36px;
  flex-wrap:wrap; padding-top:26px; padding-bottom:22px}
.footer .logo--light img{height:42px}
.footer__contact{display:flex; align-items:baseline; gap:14px 28px; flex-wrap:wrap; font-weight:300}
.footer__tel{font-family:var(--ff-display); font-size:24px; color:#F4EFE5; letter-spacing:.02em;
  transition:color .3s}
.footer__tel:hover{color:var(--brass-lt)}
.footer__contact a:not(.footer__tel){font-size:13.5px; transition:color .3s}
.footer__contact a:not(.footer__tel):hover{color:var(--ivory)}
.footer__contact span{font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#9B958A}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:8px 24px;
  flex-wrap:wrap; padding-top:15px; padding-bottom:19px;
  border-top:1px solid rgba(244,241,234,.12);
  font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#9B958A}
.footer__legal{display:flex; gap:8px 22px; flex-wrap:wrap}
.footer__bottom a{border-bottom:1px solid rgba(244,241,234,.25); transition:color .3s}
.footer__bottom a:hover{color:var(--ivory)}
/* pied court (404, pages légales) : pas de ligne de contact */
.footer > .footer__bottom:first-child{border-top:none; padding-top:26px; padding-bottom:24px}

/* barre d'action mobile */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px;
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,241,234,.94); border-top:1px solid var(--hair);
  -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.mobilebar.is-hidden{transform:translateY(120%)}
.mobilebar .btn{padding:15px 14px; font-size:10px}
.mobilebar__tel{flex:none; --fg-btn:var(--night); --bd-btn:var(--hair-2); background:#fff}
.mobilebar__tel .i{color:var(--brass); width:16px; height:16px}
.mobilebar__cta{flex:1; min-width:0}

/* ---------- focus clavier : toujours visible ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:2px solid var(--brass-ink); outline-offset:3px}
.hero a:focus-visible,.pull a:focus-visible,.cta a:focus-visible,
.footer a:focus-visible,.mobilebar a:focus-visible{outline-color:var(--brass-lt)}

/* ---------- apparition au défilement ---------- */
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal--d1{transition-delay:.12s}
.reveal--d2{transition-delay:.24s}
.reveal--d3{transition-delay:.36s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1400px){
  .nav{gap:26px} .header__in{gap:22px} .logo img{height:48px}
  .hero__in{column-gap:52px}
}
@media (max-width:1240px){
  .phone span{display:none}
  .phone{width:40px; height:40px; justify-content:center; border:1px solid var(--hair-2)}
  .nav{gap:20px; font-size:10px}
  .hero__in{grid-template-columns:1fr 430px}
  .wrap{padding:0 32px}
}
@media (max-width:1080px){
  .nav{position:absolute; top:92px; left:0; right:0; background:var(--ivory);
    border-bottom:1px solid var(--hair); flex-direction:column; gap:0; padding:8px 32px 20px; display:none}
  .nav.is-open{display:flex}
  .nav a{padding:17px 0; border-bottom:1px solid var(--hair); font-size:11px; letter-spacing:.22em}
  .nav a::after{display:none}
  .burger{display:flex}
  .header__right{margin-left:auto}
  .hero{padding:64px 0 76px}
  .hero__in{grid-template-columns:1fr; grid-template-rows:none;
    grid-template-areas:"copy" "form" "points"; row-gap:40px; column-gap:0}
  .hero__points{margin-top:0}
  .formcard{position:static; max-width:560px; width:100%}
  .trust__in{grid-template-columns:1fr}
  .trust__i{padding:34px 0 !important; border-right:none !important; border-bottom:1px solid var(--hair)}
  .trust__i:last-child{border-bottom:none}
  .how{grid-template-columns:1fr; gap:54px}
  .how__c{padding:0; border-left:none}
  .who{grid-template-columns:1fr; gap:48px}
  .who__card{padding:44px 32px 34px; max-width:460px}
  .gallery{grid-template-columns:repeat(2,1fr); gap:30px 24px}
  .subhero{padding:44px 0 56px}
  .sec{padding:96px 0}
  .sec__head{margin-bottom:56px}
  .pull{padding:92px 0}
}
@media (max-width:640px){
  .wrap{padding:0 22px}
  .logo img{height:40px}
  .phone{display:none}
  .who__logo{width:160px}

  body:has(.mobilebar){padding-bottom:80px}
  .mobilebar{display:flex}

  /* le formulaire reste visible dès le premier écran */
  .header__in{height:68px}
  .nav{top:68px}
  /* Sur téléphone, le formulaire doit être la première chose que l'œil voit.
     On réduit donc tout ce qui le précède : le sur-titre et la phrase
     d'accroche disparaissent (le titre et le formulaire disent déjà tout),
     le titre passe en petit. Sur ordinateur, rien ne change. */
  .hero{padding:16px 0 40px}
  .hero__in{row-gap:14px}
  .hero .kicker{display:none}
  .hero h1{font-size:clamp(26px,7.4vw,32px); letter-spacing:-.01em}
  .hero__rule{display:none}
  .lead{display:none}
  .hero__sig{display:none}
  .ticks li{padding:13px 0 13px 26px; font-size:13px}
  .ticks li::before{top:21px; width:12px}
  .formcard{border-radius:var(--r)}
  .step,.steps,.formcard__head,.formcard__foot{padding-left:22px; padding-right:22px}
  .formcard__head{padding-top:22px; padding-bottom:15px}
  .formcard__head h2{font-size:23px}
  .formcard__head p{margin-top:7px}
  .steps{padding-top:14px}
  .step{padding-top:18px; padding-bottom:26px}
  .step__title{font-size:20px; margin-bottom:14px}
  .step__nav{margin-top:24px; padding-top:20px}
  .resume{margin:0 22px}
  .btn--go{width:100%}

  .faq summary{padding:24px 46px 24px 0; font-size:19px}
  .faq details p{padding-right:20px; padding-bottom:26px; font-size:15px}
  .nav a{padding:16px 0}
  .btn--sm{display:none}
  .choices{grid-template-columns:1fr 1fr; gap:9px}
  .gallery{grid-template-columns:1fr 1fr; gap:24px 16px}
  .gallery__i figcaption{margin-top:13px; padding-top:12px; font-size:9.5px; letter-spacing:.16em}
  .grid2{grid-template-columns:1fr}
  .steps__list{gap:16px}
  .steps__list li{font-size:9px; letter-spacing:.14em}
  .sec{padding:72px 0}
  .sec__head{margin-bottom:44px}
  .who__txt h3{font-size:27px}
  .who__txt p{font-size:15.5px; line-height:1.85}
  .pull{padding:74px 0}
  .cta__in{padding:88px 22px}
  .cta .btn{margin-top:34px}

  /* pied de page sur téléphone : logo à gauche, contact à droite */
  .footer__in{align-items:center; justify-content:space-between; gap:12px 14px;
    padding-top:22px; padding-bottom:16px}
  .footer .logo--light img{height:34px}
  .footer__contact{flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
  .footer__tel{font-size:20px}
  .footer__contact a:not(.footer__tel){font-size:11.5px}
  .footer__contact span{font-size:8.5px; letter-spacing:.12em; margin-top:2px}
  .footer__bottom{justify-content:center; gap:6px 16px; padding-top:13px; padding-bottom:20px;
    font-size:9px; letter-spacing:.1em}
}
@media (max-width:374px){
  .mobilebar{gap:8px; padding-left:12px; padding-right:12px}
  .mobilebar .btn{padding:15px 12px; font-size:9.5px}
  .mobilebar__tel span{display:none}
  .hero h1{font-size:25px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* =========================================================
   Pages légales et 404
   ========================================================= */
.legal{padding:64px 0 110px}
.crumb{font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-soft); margin-bottom:32px}
.crumb a{border-bottom:1px solid var(--hair-2)}
.crumb a:hover{color:var(--brass-ink); border-color:var(--brass-ink)}
.crumb span{margin:0 9px; color:var(--hair-2)}
.legal h1{font-size:clamp(34px,4.6vw,56px); font-weight:300; margin-bottom:16px; line-height:1.1}
.legal__date{color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.16em; margin-bottom:44px}
.legal h2{font-size:28px; font-weight:400; margin:56px 0 18px; padding-top:30px; border-top:1px solid var(--hair)}
.legal h3{font-size:20px; font-weight:400; margin:34px 0 12px}
.legal p{margin-bottom:18px; color:var(--ink); font-size:16px; font-weight:300; line-height:1.9}
.legal .chapo{font-size:18px; color:var(--ink-soft); line-height:1.8}
.legal ul{margin:0 0 20px; padding-left:20px; color:var(--ink); font-size:16px; font-weight:300; line-height:1.9}
.legal li{margin-bottom:10px}
.legal b{color:var(--night); font-weight:500}
.legal a{border-bottom:1px solid var(--hair-2)}
.legal a:hover{color:var(--brass-ink); border-color:var(--brass-ink)}
.legal .small{font-size:13.5px; color:var(--ink-soft)}
.ident{list-style:none; padding:0; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r)}
.ident li{display:flex; gap:16px; margin:0; padding:15px 22px; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.ident li:last-child{border-bottom:none}
.ident b{flex:0 0 210px; color:var(--ink-soft); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; padding-top:3px}
.ident .val{flex:1 1 auto; min-width:0; font-weight:300}
.fill{background:rgba(176,138,78,.16); border-bottom:1px solid var(--brass); padding:1px 6px; color:var(--brick-dark); font-weight:400}
.todo{background:var(--paper); border:1px solid var(--hair); border-left:2px solid var(--brass);
  border-radius:var(--r); padding:24px 26px; margin-bottom:40px}
.todo strong{display:block; color:var(--night); margin-bottom:12px; font-size:11px;
  text-transform:uppercase; letter-spacing:.18em; font-family:var(--ff); font-weight:500}
.todo p{font-size:14.5px; color:var(--ink-soft); margin-bottom:12px; line-height:1.8; font-weight:300}
.todo p:last-child{margin-bottom:0}
.todo__rm{font-size:13px !important}
.todo code{background:var(--ivory-2); padding:1px 7px; font-size:12.5px}
.note-box{background:var(--ivory-2); border:1px solid var(--hair); padding:20px 24px; margin:22px 0 26px}
.note-box p{font-size:14.5px; margin-bottom:10px}
.note-box p:last-child{margin-bottom:0}
.legal-table{width:100%; border-collapse:collapse; margin:8px 0 26px; font-size:15px;
  background:var(--paper); border:1px solid var(--hair)}
.legal-table th,.legal-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--hair); vertical-align:top}
.legal-table thead th{background:var(--ivory-2); font-size:10px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ink-soft); font-weight:500}
.legal-table tbody tr:last-child td{border-bottom:none}
.legal-table td:first-child{font-weight:400; color:var(--night)}
.legal__nav{display:flex; gap:12px; flex-wrap:wrap; margin-top:60px; padding-top:32px; border-top:1px solid var(--hair)}
.legal__nav--top{margin:30px 0 34px; padding-top:0; border-top:none}
.legal__nav a{border:1px solid var(--hair-2); border-radius:var(--r); padding:13px 24px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; font-weight:500; color:var(--ink-soft);
  transition:.3s; border-bottom:1px solid var(--hair-2)}
.legal__nav a:hover{border-color:var(--night); color:var(--night)}
.legal__nav a[aria-current="page"]{background:var(--night); border-color:var(--night); color:var(--ivory)}
@media (max-width:640px){
  .ident b{flex:1 1 100%}
  .ident .val{flex:1 1 100%}
  .legal-table{display:block; overflow-x:auto}
  .legal-table td,.legal-table th{min-width:150px}
  .legal h2{font-size:24px}
}

/* ---------- Pages sujets : liste de documents ---------- */
.docs{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.docs li{position:relative; padding:20px 0 20px 34px; border-bottom:1px solid var(--hair);
  color:var(--ink-soft); font-size:15.5px; font-weight:300; line-height:1.7}
.docs li::before{content:''; position:absolute; left:0; top:33px; width:16px; height:1px; background:var(--brass)}
.docs li strong{color:var(--ink); font-weight:500}
.docs__note{margin:34px 0 0; padding:20px 24px; border-left:2px solid var(--brass);
  background:var(--paper); color:var(--ink); font-size:15px; line-height:1.7}
@media (max-width:640px){ .docs li{padding:16px 0 16px 26px; font-size:14.5px} .docs li::before{top:29px; width:12px} }

/* ---------- Pied de page : liens vers toutes les pages (discrets) ---------- */
.footer__liens{padding-top:18px; padding-bottom:18px; border-top:1px solid rgba(244,241,234,.08)}
.footer__liens nav{display:flex; flex-wrap:wrap; gap:6px 16px}
.footer__liens a{color:rgba(244,241,234,.34); font-size:11px; letter-spacing:.02em; text-decoration:none}
.footer__liens a:hover{color:rgba(244,241,234,.7)}