/* ═══════════════════════════════════════════════════════════
   OcciConciergerie, feuille de style

   Principe d'harmonie : UN seul fond pour toute la page, des
   cartes blanches identiques posées dessus, un seul rayon, un
   seul accent. Aucune section n'a de traitement particulier,
   sauf le bloc de contact qui ponctue la fin.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Fond unique de la page + cartes */
  --creme:#F7F1E8;
  --blanc:#FFFFFF;
  --sable:#EFE7DA;
  --bord:#E4DACA;
  --filet:#EDE5D8;

  /* Texte */
  --encre:#1F1A16;
  --encre-2:#3A322B;
  --gris:#6B6258;
  --gris-clair:#9A8F81;

  /* Accents de Toulouse */
  --rouge:#A8232B;
  --rouge-fonce:#8A1B22;
  --rouge-pale:#F7E9E7;
  --or:#C9971C;
  --or-pale:#F9F0DA;

  /* Un seul rayon, une seule ombre, un seul rythme */
  --r:14px;
  --r-lg:26px;
  --pill:999px;
  --gap:18px;
  --pad:clamp(26px,2.9vw,38px);
  --max:1240px;
  --ombre:0 1px 2px rgba(31,26,22,.04), 0 10px 30px -14px rgba(31,26,22,.16);
  --ombre-lg:0 2px 6px rgba(31,26,22,.05), 0 30px 70px -34px rgba(31,26,22,.32);
  --ease:cubic-bezier(.22,.75,.28,1);

  --titre:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --texte:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --brique:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cg fill='none' stroke='%23B0654E' stroke-width='1'%3E%3Cpath d='M0 .5h72M0 18.5h72M0 35.5h72M18 0v18M54 0v18M0 18v18M36 18v18M72 18v18'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--texte);color:var(--encre);background:var(--creme);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);font-weight:500;line-height:1.14;letter-spacing:-.012em;margin:0}
h2{font-size:clamp(1.85rem,3.1vw,2.65rem)}
h3{font-size:1.18rem}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--or-pale)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:26px}
.wrap--narrow{max-width:880px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:999}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:6px}

svg.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Pictogrammes bicolores : trait rouge, accent or. Utilises dans
   « Nos prestations » et « Comment ca marche ». */
.pic{width:100%;height:100%;fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pic .l{stroke:var(--rouge)}
.pic .o{stroke:var(--or)}
.pic .w{fill:var(--blanc);stroke:var(--rouge)}
.pic .g{fill:var(--or);stroke:none;transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.svc:hover .pic .g,.etape:hover .pic .g{transform:scale(1.3)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--rouge),var(--or));transition:width .1s linear}

/* ── Boutons ────────────────────────────────────────────── */
.btn{
  --fond:transparent;--survol:var(--encre);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--texte);font-size:.76rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1.1em 1.9em;border-radius:var(--pill);border:1px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;white-space:nowrap;
  background-color:transparent;
  background-image:linear-gradient(to top, var(--survol) 50%, var(--fond) 50%);
  background-size:100% 202%;background-position:0 0;
  transition:background-position .45s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background-position:0 100%}
.btn--primary{--fond:var(--rouge);--survol:var(--encre);color:#fff;box-shadow:0 6px 20px -8px rgba(168,35,43,.55)}
.btn--ghost{--fond:transparent;--survol:var(--encre);color:var(--encre);border-color:var(--bord)}
.btn--ghost:hover{color:#fff;border-color:var(--encre)}
.btn--clear{--fond:rgba(255,255,255,.12);--survol:#fff;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--clear:hover{color:var(--encre);border-color:#fff}
.btn--lg{padding:1.25em 2.4em;font-size:.79rem}
.btn--sm{padding:.85em 1.5em;font-size:.7rem;letter-spacing:.1em}
.btn--full{width:100%;white-space:normal;text-align:center}
.btn .ico{transition:transform .35s var(--ease);stroke-width:2}
.btn:hover .ico{transform:translateX(5px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge);
  padding-bottom:.35em;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease);
}
.link-arrow:hover{background-size:100% 1px}
.link-arrow .ico{transition:transform .35s var(--ease);stroke-width:2}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ── Sur-titre ──────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75em;margin:0 0 1.1rem;
  font-family:var(--texte);font-style:italic;font-weight:500;
  font-size:1rem;text-transform:none;color:var(--rouge);
}
.eyebrow .dot{
  width:30px;height:1px;background:var(--rouge);flex:none;border-radius:0;box-shadow:none;
  transform-origin:left;transform:scaleX(1);transition:transform .7s var(--ease) .15s;
}
.reveal:not(.is-in) .eyebrow .dot,
.reveal-mask:not(.is-in) .eyebrow .dot{transform:scaleX(0)}
.sec-head--center .eyebrow .dot{display:none}

/* ── Barre haute ────────────────────────────────────────── */
.topbar{background:var(--encre);color:rgba(255,255,255,.7);font-size:.75rem;letter-spacing:.04em}
.topbar__in{display:flex;align-items:center;gap:.7rem;height:36px;white-space:nowrap}
.topbar__sep{opacity:.4}
.topbar__tel{margin-left:auto;color:#fff;text-decoration:none;font-weight:600;letter-spacing:.07em}
.topbar__tel:hover{color:var(--or)}
.topbar__court{display:none}
@media(max-width:820px){.topbar__item:nth-child(4),.topbar__sep{display:none}}
@media(max-width:600px){.topbar__item{display:none}.topbar__court{display:inline}.topbar__in{font-size:.72rem}}

/* ── En-tête ────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(247,241,232,.88);
  backdrop-filter:blur(16px);border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--filet);box-shadow:0 10px 30px -22px rgba(31,26,22,.5)}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;height:80px}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;justify-self:center}
.brand__mark{color:var(--rouge);display:flex;transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(45deg)}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-family:var(--titre);font-size:1.18rem;font-weight:500;letter-spacing:-.01em}
.brand__name b{font-weight:700}
.brand__tag{font-size:.59rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gris-clair);margin-top:.3em}
.brand--light .brand__mark{color:#CC454B}
.brand--light .brand__tag{color:rgba(255,255,255,.45)}

.nav{display:flex;align-items:center;gap:1.8rem;justify-self:start}
.nav a{
  text-decoration:none;font-size:.73rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);position:relative;padding-block:.4em;
  white-space:nowrap;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rouge);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease);
}
.nav a:not(.btn):hover{color:var(--encre)}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none}

.header__end{display:flex;align-items:center;gap:1rem;justify-self:end}
.socials--head{gap:.35rem}
.socials--head a{width:34px;height:34px;border-color:var(--bord);color:var(--gris)}
.socials--head a:hover{color:#fff}
.socials--head svg{width:15px;height:15px}
@media(max-width:1160px){.socials--head{display:none}}

.burger{display:none;justify-self:end;width:46px;height:46px;border:1px solid var(--bord);background:transparent;border-radius:var(--pill);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:18px;height:1px;background:var(--encre);transition:.3s var(--ease)}
.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)}

@media(max-width:1000px){
  .burger{display:flex}
  .header__in{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start;order:-1}
  .header__end{display:none}
  /* Le menu se cale sous l'en-tête plutôt qu'à une distance fixe du haut :
     sinon il laisse un trou dès que la barre du haut a défilé. */
  .nav{
    position:absolute;top:100%;left:0;right:0;width:100%;
    /* sans ceci, le justify-self:start de la règle de base fait
       rétrécir le panneau à la largeur de son contenu */
    justify-self:stretch;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);border-bottom:1px solid var(--bord);padding:6px 26px 30px;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:.42s var(--ease);
    max-height:calc(100vh - 80px);overflow:auto;
    box-shadow:0 20px 40px -26px rgba(31,26,22,.5);
  }
  .nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav a{padding:17px 2px;border-bottom:1px solid var(--filet);font-size:.85rem;color:var(--encre)}
  .nav a::after{display:none}
  .nav__cta{display:flex;margin-top:20px;border-bottom:0!important;justify-content:center}
}

/* ═══════════════ HERO : trois points chauds ══════════════
   1. le titre   2. le bouton   3. la barre d'estimation
   Tout le reste est volontairement discret.
   ═════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:min(86vh,820px);display:flex;align-items:center;
  overflow:hidden;padding:clamp(80px,11vh,130px) 0 clamp(96px,13vh,150px);background:var(--encre);
}
.hero__media{position:absolute;top:-10%;left:0;right:0;height:118%;z-index:0;will-change:transform}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  animation:kenburns 28s ease-in-out infinite alternate;will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.4%,-1.4%,0)}
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(20,15,12,.34) 0%, rgba(20,15,12,.72) 100%),
    linear-gradient(180deg, rgba(20,15,12,.5) 0%, transparent 26%, transparent 62%, rgba(20,15,12,.72) 100%);
}
.hero__in{position:relative;z-index:2;color:#fff;text-align:center;max-width:940px}

.hero__kicker{
  display:inline-block;margin:0 0 1.4rem;padding:.55em 1.3em;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--pill);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  font-family:var(--texte);font-style:italic;font-weight:500;font-size:.95rem;color:rgba(255,255,255,.92);
}

.hero__title{
  margin:0 0 1.4rem;font-size:clamp(2.4rem,6vw,4.7rem);font-weight:500;
  line-height:1.06;letter-spacing:-.022em;
}
.hero__title em{display:block;font-family:var(--texte);font-style:italic;font-weight:500;color:rgba(255,255,255,.92);font-size:.66em;letter-spacing:-.01em;margin-top:.18em}
.souligne{position:relative;display:inline-block;color:var(--or)}
.souligne svg{
  position:absolute;left:-3%;bottom:-.16em;width:106%;height:.34em;overflow:visible;
  fill:none;stroke:var(--or);stroke-width:5;stroke-linecap:round;
}
.souligne path{vector-effect:non-scaling-stroke;stroke-dasharray:340;stroke-dashoffset:340;animation:trace 1.15s var(--ease) forwards 1.05s}
@keyframes trace{to{stroke-dashoffset:0}}

.hero__sub{
  max-width:40em;margin:0 auto 2.4rem;font-size:clamp(.98rem,1.15vw,1.08rem);
  color:rgba(255,255,255,.76);
}
.hero__cta{display:flex;justify-content:center}

.anim{opacity:0;transform:translateY(24px);animation:monte .95s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes monte{to{opacity:1;transform:none}}

/* barre d'estimation, à cheval sur le hero */
.quickbar{
  position:relative;z-index:5;margin-top:-52px;margin-bottom:clamp(56px,7vw,90px);
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre-lg);
  display:grid;grid-template-columns:auto 1fr 1fr auto;gap:1.6rem;align-items:end;
  padding:28px clamp(24px,3vw,36px);
}
.quickbar__title{
  font-family:var(--titre);font-weight:500;font-size:1.12rem;line-height:1.25;margin:0;
  padding-right:1.6rem;border-right:1px solid var(--filet);align-self:center;
}
@media(max-width:1000px){
  .quickbar{grid-template-columns:1fr 1fr;gap:1.3rem}
  .quickbar__title{grid-column:1/-1;border-right:0;padding-right:0;border-bottom:1px solid var(--filet);padding-bottom:1rem}
  .quickbar .btn{grid-column:1/-1}
}
@media(max-width:560px){.quickbar{grid-template-columns:1fr;margin-top:-36px;padding:24px}}

/* ── Champs ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.45rem}
.field>span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  font-family:var(--texte);font-size:.95rem;color:var(--encre);background:transparent;
  border:0;border-bottom:1px solid var(--bord);border-radius:0;padding:.55em 0;width:100%;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:74px}
.field select{text-overflow:ellipsis;
  appearance:none;cursor:pointer;padding-right:1.8em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6258' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:15px;
}
.field :is(input,select,textarea):focus{outline:none;border-bottom-color:var(--rouge);border-bottom-width:1.5px}
.field :is(input,select,textarea).invalid{border-bottom-color:#C0392B}
.field :is(input,textarea)::placeholder{color:var(--gris-clair)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:2px;background:var(--bord);margin:1.1rem 0 .3rem;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--rouge);border:0;cursor:pointer;transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--rouge);border:0;cursor:pointer}

/* ── Bandeau commission ─────────────────────────────────── */
.tarif{padding-block:clamp(10px,2vw,22px)}
.tarif__in{
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,3vw,46px);align-items:center;
  padding:clamp(26px,3vw,38px) var(--pad);
}
.tarif__chiffre{display:flex;align-items:flex-start;gap:.06em;margin:0;color:var(--rouge);line-height:.85}
.tarif__chiffre b{font-family:var(--titre);font-size:clamp(3.2rem,6vw,4.9rem);font-weight:600;letter-spacing:-.04em}
.tarif__chiffre span{font-family:var(--titre);font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:600;margin-top:.15em}
.tarif__texte h2{font-size:clamp(1.3rem,2.1vw,1.75rem);margin-bottom:.45rem}
.tarif__texte p{margin:0;color:var(--gris);font-size:.94rem;max-width:46em}
@media(max-width:900px){
  .tarif__in{grid-template-columns:auto 1fr;gap:18px 26px}
  .tarif .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:520px){.tarif__in{grid-template-columns:1fr}.tarif__chiffre{line-height:1}}

/* ── Sections : toutes identiques ───────────────────────── */
.section{padding:clamp(58px,7vw,96px) 0}
.sec-head{max-width:740px;margin-bottom:clamp(34px,4.5vw,52px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:.75rem}
.sec-sub{color:var(--gris);font-size:1.03rem;margin:0;max-width:46em}
.sec-head--center .sec-sub{margin-inline:auto}

.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}

/* ── Avantages ──────────────────────────────────────────── */
/* Pas de photo ici : tant qu'elles ne montrent pas vos propres logements,
   des intérieurs de banque d'images font plus de mal que de bien.
   Pour en ajouter, voir A.2 bis du guide. */
.feat{
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:var(--pad);
  box-shadow:var(--ombre);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg)}
.feat__ico{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--pill);background:var(--rouge-pale);color:var(--rouge);margin-bottom:1.3rem;
  transition:transform .45s var(--ease);
}
.feat:hover .feat__ico{transform:scale(1.08)}
.feat__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin-bottom:.55rem;font-size:1.24rem}
.feat p{color:var(--gris);font-size:.94rem;margin:0}

/* ── Services : le pictogramme d'abord, le texte ensuite ── */
.svc{
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);
  padding:var(--pad);box-shadow:var(--ombre);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--ombre-lg);border-color:var(--bord)}
.svc__pic{display:block;width:76px;height:76px;margin-bottom:1.5rem}
.svc h3{margin-bottom:.5rem;font-size:1.16rem}
.svc p{color:var(--gris);font-size:.93rem;margin:0;max-width:24em}
.svc__num{
  position:absolute;top:12px;right:22px;font-family:var(--titre);font-weight:600;
  font-size:2.7rem;line-height:1;color:var(--sable);pointer-events:none;
  transition:color .45s var(--ease);
}
.svc:hover .svc__num{color:var(--or-pale)}

/* ── Méthode : un parcours, pas trois cartes ────────────── */
.parcours{position:relative;padding-top:8px}
.parcours__fil{
  position:absolute;left:16.66%;top:44px;width:66.68%;height:60px;
  fill:none;stroke:var(--or);stroke-width:2;stroke-linecap:round;
}
.parcours__fil path{stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset 1.8s var(--ease) .35s}
.parcours.is-in .parcours__fil path{stroke-dashoffset:0}
.parcours__liste{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.etape{text-align:center;padding-inline:clamp(4px,1.6vw,22px)}
.etape__rond{
  display:grid;place-items:center;width:132px;height:132px;margin:0 auto 1.4rem;
  background:var(--blanc);border:1px solid var(--filet);border-radius:50%;
  box-shadow:var(--ombre);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.etape:hover .etape__rond{transform:translateY(-6px) scale(1.04);box-shadow:var(--ombre-lg)}
.etape__rond .pic{width:62px;height:62px}
.etape__n{
  display:inline-block;font-family:var(--titre);font-weight:600;font-size:.72rem;
  letter-spacing:.24em;color:var(--or);margin-bottom:.5rem;
}
.etape h3{margin-bottom:.5rem;font-size:1.26rem}
.etape p{color:var(--gris);font-size:.93rem;margin:0 auto;max-width:26em}
@media(max-width:820px){
  .parcours__fil{display:none}
  .parcours__liste{grid-template-columns:1fr;gap:36px}
  .etape__rond{width:104px;height:104px}
  .etape__rond .pic{width:50px;height:50px}
}
/* ── Simulateur ─────────────────────────────────────────────
   Trois blocs : le formulaire, le résumé chiffré, le détail.
   Sur grand écran, résumé et détail s'empilent dans la colonne
   de droite. Sur téléphone, le résumé passe en premier et se
   colle sous l'en-tête pendant qu'on manipule les curseurs.
   ─────────────────────────────────────────────────────────── */
.simu{
  display:grid;grid-template-columns:1.12fr .88fr;
  grid-template-areas:"form out" "form plus";
  grid-template-rows:auto 1fr;
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre);overflow:hidden;
}
.simu__form{grid-area:form;padding:var(--pad);display:grid;gap:1.8rem;align-content:start}
.simu__row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.simu__opts{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.simu__opts legend{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:.9rem;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:.55em;font-size:.83rem;padding:.55em 1.05em;
  border:1px solid var(--bord);border-radius:var(--pill);cursor:pointer;user-select:none;color:var(--gris);
  transition:.28s var(--ease);
}
.chip:hover{border-color:var(--gris-clair);color:var(--encre)}
.chip input{accent-color:var(--rouge);width:14px;height:14px;margin:0;cursor:pointer}
.chip:has(input:checked){border-color:var(--rouge);background:var(--rouge-pale);color:var(--rouge-fonce)}

.simu__out{
  grid-area:out;background:var(--encre);color:#fff;
  padding:var(--pad) var(--pad) calc(var(--pad) * .7);
  position:relative;overflow:hidden;
}
.simu__out::before{content:"";position:absolute;inset:0;background:var(--brique);opacity:.14}
.simu__out>*{position:relative}
.simu__plus{
  grid-area:plus;background:var(--encre);color:#fff;
  padding:0 var(--pad) var(--pad);
}
.simu__label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.5rem}
.simu__big{font-family:var(--titre);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:600;line-height:1;color:var(--or);margin:0 0 .4rem;letter-spacing:-.02em}
.simu__unit{font-size:.92rem;color:rgba(255,255,255,.62)}
.simu__year{font-size:.88rem;color:rgba(255,255,255,.58);margin:0}
.simu__year b{color:#fff;font-weight:500}
.simu__detail{border-top:1px solid rgba(255,255,255,.12);margin:0 0 1.7rem}
.simu__detail li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.86rem;color:rgba(255,255,255,.6)}
.simu__detail li b{color:#fff;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.simu__detail .minus b{color:#E5A29C}
.simu__note{font-size:.7rem;color:rgba(255,255,255,.36);line-height:1.55;margin:1.1rem 0 0}

@media(max-width:940px){
  /* Passage en colonne flex, et pas en grille à une colonne : dans une
     grille, un élément en position:sticky reste prisonnier de sa propre
     cellule et ne colle donc jamais. */
  .simu{
    display:flex;flex-direction:column;
    overflow:visible;border-radius:var(--r-lg);
  }
  .simu__form{order:2}
  .simu__plus{order:3}
  /* le montant reste sous les yeux pendant qu'on règle le formulaire */
  .simu__out{
    order:1;position:sticky;top:80px;z-index:6;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:20px var(--pad);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;
  }
  .simu__out .simu__label{width:100%;margin-bottom:.2rem}
  .simu__big{font-size:2.2rem;margin:0}
  .simu__plus{border-radius:0 0 var(--r-lg) var(--r-lg)}
  .simu__form{border-inline:1px solid var(--filet)}
}
@media(max-width:560px){.simu__row{grid-template-columns:1fr}}
/* ── Zone ───────────────────────────────────────────────── */
.zone{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre);overflow:hidden;
}
.zone__copy{padding:var(--pad)}
.zone__copy h2{margin-bottom:.7rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.6rem 0 1.4rem}
.tags span{
  font-size:.78rem;padding:.45em 1em;border:1px solid var(--bord);border-radius:var(--pill);
  color:var(--gris);transition:.3s var(--ease);cursor:default;
}
.tags span:hover{background:var(--rouge-pale);border-color:var(--rouge);color:var(--rouge-fonce)}
.zone__ps{font-size:.9rem;color:var(--gris);margin:0}
.zone__ps a{color:var(--rouge);font-weight:600}
.zone__photo{margin:0;position:relative;overflow:hidden}
.zone__photo img{width:100%;height:100%;min-height:340px;object-fit:cover;transition:transform 1.4s var(--ease)}
.zone__photo:hover img{transform:scale(1.05)}
.zone__photo figcaption{
  position:absolute;left:22px;bottom:22px;background:var(--blanc);border-radius:var(--r);
  padding:16px 22px;display:flex;align-items:baseline;gap:.6rem;box-shadow:var(--ombre);
}
.zone__photo figcaption b{font-family:var(--titre);font-size:2rem;font-weight:600;color:var(--rouge);line-height:1}
.zone__photo figcaption span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);line-height:1.4}
@media(max-width:860px){.zone{grid-template-columns:1fr}.zone__photo{order:-1}.zone__photo img{min-height:250px}}

/* ── À propos ───────────────────────────────────────────────
   Version actuelle : pas de photo, un bloc centré.
   Quand les portraits arriveront, ajoutez la classe
   about--photos et le CSS deux colonnes plus bas reprend la main.
   ─────────────────────────────────────────────────────────── */
.about{
  width:min(var(--max), calc(100% - 52px));margin-inline:auto;
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
  box-shadow:var(--ombre);padding:clamp(34px,4.6vw,68px);text-align:center;
}
.about__copy{max-width:62ch;margin-inline:auto}
.about__copy h2{margin-bottom:1.3rem;line-height:1.08}
.about__copy .eyebrow .dot{display:none}
.about__copy p{color:var(--gris)}
.about__copy p b{color:var(--encre);font-weight:600}
.about__copy p:last-of-type{margin-bottom:0}
.about__copy .duo{justify-content:center;margin-top:2.1rem}

/* Version deux colonnes avec les portraits, prête à l'emploi */
.about--photos{
  display:grid;grid-template-columns:.78fr 1.22fr;gap:0;align-items:stretch;
  padding:0;text-align:left;overflow:hidden;
}
.about--photos .about__copy{max-width:none;margin:0;padding:var(--pad)}
.about--photos .about__copy .eyebrow .dot{display:inline-block}
.about--photos .about__copy .duo{justify-content:flex-start}
.about__photo{position:relative}
.about__duo{display:grid;grid-template-columns:1fr 1fr;height:100%}
.about__ph{
  margin:0;height:100%;min-height:380px;background:var(--sable);
  border-right:1px solid var(--filet);
  display:grid;place-content:center;gap:.9rem;justify-items:center;color:var(--gris-clair);
}
.about__ph:last-child{border-right:0;background:#EBE2D3}
.about__ph img{width:100%;height:100%;object-fit:cover}
.about__ph svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round}
.about__ph figcaption{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}

/* les deux numéros directs */
.duo{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.duo__item{
  display:inline-flex;align-items:center;gap:.65em;text-decoration:none;
  border:1px solid var(--bord);border-radius:var(--pill);padding:.6em 1.15em;
  transition:.3s var(--ease);
}
.duo__item .ico{color:var(--rouge);font-size:1.05em}
.duo__item span{display:flex;flex-direction:column;line-height:1.25;font-size:.92rem;color:var(--encre)}
.duo__item b{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clair);font-weight:600}
.duo__item:hover{border-color:var(--rouge);background:var(--rouge-pale)}
.duo__item:hover b{color:var(--rouge-fonce)}

@media(max-width:820px){
  .about--photos{grid-template-columns:1fr}
  .about__ph{min-height:220px}
}
@media(max-width:520px){
  .about{width:calc(100% - 32px);border-radius:var(--r)}
}
/* ── Témoignages ────────────────────────────────────────── */
.quotes--duo{max-width:940px;margin-inline:auto}
/* un seul avis : on le centre au lieu de le laisser seul dans une colonne */
.quotes--solo{max-width:560px;margin-inline:auto;grid-template-columns:1fr}
.quote{
  margin:0;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);
  padding:var(--pad);box-shadow:var(--ombre);display:flex;flex-direction:column;
  position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg)}
/* le logo de la plateforme, en haut à droite. Ne le mettez que sur un avis
   qui existe réellement sur Airbnb : c'est ce qui le rend vérifiable. */
.quote__source{position:absolute;top:20px;right:20px;display:flex;line-height:0}
.quote__source svg{width:23px;height:23px;fill:#FF5A5F}
.quote blockquote{padding-right:36px}
.stars{color:var(--or);letter-spacing:.22em;font-size:.82rem;margin-bottom:1.1rem}
.quote blockquote{margin:0 0 1.5rem;font-size:1.02rem;font-weight:400;line-height:1.6;color:var(--encre-2);flex:1}
.quote figcaption{
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;flex-direction:row;align-items:center;gap:.7rem;
}
/* la pastille du voyageur : initiale par défaut, photo si vous en avez une */
.quote__avatar{
  display:grid;place-items:center;width:40px;height:40px;flex:none;overflow:hidden;
  border-radius:50%;background:var(--sable);border:1px solid var(--filet);
  color:var(--gris);font-family:var(--titre);font-weight:600;font-size:1rem;
  letter-spacing:0;text-transform:uppercase;
}
.quote__avatar img{width:100%;height:100%;object-fit:cover}

/* ── FAQ : l'intro à gauche, l'accordéon à droite ───────── */
.faq-bloc{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,76px);align-items:start}
.faq-intro{position:sticky;top:112px}
.faq-intro h2{margin-bottom:1.1rem;font-size:clamp(2.1rem,3.7vw,3.2rem);line-height:1.02}
.faq-intro h2 em{
  display:block;font-family:var(--texte);font-style:italic;font-weight:500;
  color:var(--rouge);font-size:.92em;letter-spacing:-.015em;
}
.faq-intro>p{color:var(--gris);font-size:1rem;max-width:32em;margin-bottom:0}
.faq-intro .duo{margin:1.7rem 0 1.9rem}

.faq{display:grid;gap:3px}
.faq__item{
  border:1px solid transparent;border-radius:var(--r);background:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.faq__item:not([open]){border-radius:0;border-bottom-color:var(--filet)}
.faq__item:last-child:not([open]){border-bottom-color:transparent}
.faq__item[open]{background:var(--blanc);border-color:var(--filet);box-shadow:var(--ombre)}

.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:19px 22px 19px 54px;
  font-family:var(--titre);font-size:1.01rem;font-weight:500;color:var(--encre);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--rouge)}
/* le + devient − à l'ouverture, posé à gauche */
.faq__item summary::before,.faq__item summary::after{
  content:"";position:absolute;top:50%;background:var(--rouge);
  transition:transform .38s var(--ease),opacity .3s;
}
.faq__item summary::before{left:22px;width:13px;height:1.6px;margin-top:-.8px}
.faq__item summary::after{left:27.7px;width:1.6px;height:13px;margin-top:-6.5px}
.faq__item[open] summary::after{transform:rotate(90deg);opacity:0}

.faq__body{padding:0 26px 22px 54px;color:var(--gris);font-size:.94rem;animation:ouvre .45s var(--ease)}
@keyframes ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq__body p{margin:0}
.faq__body a{color:var(--rouge);font-weight:600}

@media(max-width:900px){
  .faq-bloc{grid-template-columns:1fr;gap:34px}
  .faq-intro{position:static}
  .faq-intro h2{font-size:clamp(2rem,7vw,2.6rem)}
}
@media(max-width:520px){
  .faq__item summary{padding:17px 14px 17px 46px;font-size:.97rem}
  .faq__item summary::before{left:16px}
  .faq__item summary::after{left:21.7px}
  .faq__body{padding:0 16px 20px 46px}
}
/* ── Contact : le seul bloc sombre, posé en carte ───────── */
.section--cta{padding:clamp(58px,7vw,96px) 0 clamp(70px,8vw,110px)}
.devis{
  width:min(var(--max), calc(100% - 52px));margin-inline:auto;
  padding:clamp(32px,4.4vw,64px);border-radius:var(--r-lg);
  background:var(--encre);color:rgba(255,255,255,.75);
  position:relative;overflow:hidden;box-shadow:var(--ombre-lg);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:start;
}
.devis::before{content:"";position:absolute;inset:0;background:var(--brique);opacity:.14;pointer-events:none}
.devis::after{content:"";position:absolute;inset:0;background:radial-gradient(680px 420px at 88% 4%, rgba(201,151,28,.16), transparent 66%);pointer-events:none}
.devis>*{position:relative;z-index:1}
.devis h2{color:#fff;margin-bottom:1.1rem}
.devis__copy .eyebrow{color:var(--or)}
.devis__copy .eyebrow .dot{background:var(--or)}
.devis__copy>p{color:rgba(255,255,255,.66)}
.devis__list{display:grid;gap:.7rem;margin:1.7rem 0 2rem;font-size:.92rem}
.devis__list li{display:flex;align-items:center;gap:.7em}
.devis__list .ico{color:var(--or);stroke-width:2}
.devis__direct{display:flex;flex-wrap:wrap;gap:.7rem 2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.devis__direct a{display:inline-flex;align-items:center;gap:.55em;color:#fff;text-decoration:none;font-size:.9rem;transition:color .3s}
.devis__direct a:hover{color:var(--or)}
.devis__direct .ico{color:var(--or)}

.devis__form{background:var(--blanc);color:var(--encre);padding:var(--pad);border-radius:var(--r);display:grid;gap:1.4rem}
.f-row{display:grid;gap:1.4rem}
.f-row--2{grid-template-columns:1fr 1fr}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.79rem;color:var(--gris);line-height:1.55;cursor:pointer}
.consent input{margin-top:.25em;width:16px;height:16px;accent-color:var(--rouge);flex:none;cursor:pointer}
.consent a{color:var(--rouge);font-weight:600}
.form-status{font-size:.87rem;margin:0;text-align:center;min-height:1.2em}
.form-status.ok{color:#1B7A46;font-weight:600}
.form-status.ko{color:#C0392B;font-weight:600}
@media(max-width:900px){.devis{grid-template-columns:1fr}}
@media(max-width:520px){.f-row--2{grid-template-columns:1fr}.devis{width:calc(100% - 32px);border-radius:var(--r)}}

/* ── Pied de page ───────────────────────────────────────── */
.site-footer{background:var(--encre);color:rgba(255,255,255,.56);font-size:.89rem;padding-top:clamp(52px,6.5vw,80px)}
.footer__in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer__brand p{margin:1.2rem 0 1.4rem;max-width:28em;font-size:.87rem;line-height:1.7}
.footer__col h4{font-family:var(--texte);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem;font-weight:600}
.footer__col a{display:block;text-decoration:none;padding:.3rem 0;transition:color .28s,transform .28s var(--ease)}
.footer__col a:hover{color:var(--or);transform:translateX(4px)}
.footer__addr{margin:.8rem 0 0;font-size:.84rem;line-height:1.7}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:var(--pill);display:grid;place-items:center;transition:.3s var(--ease)}
.socials a:hover{background:var(--rouge);border-color:var(--rouge);color:#fff;transform:translateY(-3px)}
.socials svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer__credits{padding-block:16px;border-top:1px solid rgba(255,255,255,.08);font-size:.71rem;color:rgba(255,255,255,.32);line-height:1.6}
.footer__credits p{margin:0}
.footer__credits a{color:rgba(255,255,255,.48)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center;padding-block:16px 26px;border-top:1px solid rgba(255,255,255,.08);font-size:.79rem}
.footer__bottom p{margin:0}
.footer__bottom nav{display:flex;gap:1.5rem}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--or)}
@media(max-width:900px){.footer__in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__in{grid-template-columns:1fr;gap:30px}}

/* ── Barre mobile ───────────────────────────────────────── */
.mobile-bar{display:none}
@media(max-width:700px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1.35fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(247,241,232,.95);
    backdrop-filter:blur(12px);border-top:1px solid var(--bord);
    transform:translateY(110%);transition:transform .45s var(--ease);
  }
  .mobile-bar.is-shown{transform:none}
  .mobile-bar .btn{width:100%;padding:.95em 1em}
  body{padding-bottom:76px}
}

/* ══════════════ CONFORT SUR TÉLÉPHONE ══════════════════════
   Zones tactiles d'au moins 44 px, champs à 16 px (en dessous,
   Safari iOS zoome tout seul au moment de la saisie), curseurs
   plus gros, et un peu d'air en moins pour raccourcir la page.
   ═════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .field>span{font-size:.7rem}
  .field input[type=text],.field input[type=email],.field input[type=tel],
  .field select,.field textarea{font-size:16px;padding:.85em 0;min-height:46px}
  .field select{text-overflow:ellipsis;background-position:right center}
  .field textarea{min-height:96px}
  .consent{font-size:.85rem;padding-block:.3rem}
  .consent input{width:22px;height:22px}

  .chip{padding:.72em 1.15em;font-size:.86rem}
  .chip input{width:17px;height:17px}
  input[type=range]{height:4px;margin:1.4rem 0 .5rem}
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px;box-shadow:0 2px 10px rgba(168,35,43,.4)}
  input[type=range]::-moz-range-thumb{width:28px;height:28px}

  .nav a{padding:19px 2px}
  .topbar__tel{padding:.7em 0}
  .footer__col a{padding:.6rem 0}
  .footer__bottom nav{gap:1.2rem}
  .footer__bottom a{padding:.4rem 0}
  .tags span{padding:.6em 1.05em}
  .duo__item{padding:.75em 1.2em}
  .faq__item summary{padding-block:20px}
  .btn{padding:1.15em 1.9em}
  .btn--sm{padding:1em 1.5em}

  /* un peu plus compact pour raccourcir le défilement */
  :root{--pad:24px}
  .section{padding:clamp(46px,9vw,64px) 0}
  .feat__ico{width:46px;height:46px;margin-bottom:1rem}
  .feat h3,.svc h3{font-size:1.12rem}
  .svc__pic{width:60px;height:60px;margin-bottom:1.1rem}
  .svc__num{font-size:2.2rem;top:10px;right:18px}
}

/* Un lien ou un bouton ne doit jamais clignoter en bleu au toucher */
@media(hover:none){
  a,button,summary,label{-webkit-tap-highlight-color:rgba(168,35,43,.12)}
}

/* ── Apparitions ────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-mask{opacity:0;transform:translateY(16px)}
.reveal-mask.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-in,.reveal-mask,.reveal-mask.is-in{opacity:1;transform:none;transition:none}
  .anim{opacity:1;transform:none;animation:none}
  .hero__media img{animation:none;transform:scale(1.02)}
  .souligne path{animation:none;stroke-dashoffset:0}
  .mobile-bar{transform:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

@media print{
  .site-header,.topbar,.mobile-bar,.progress{display:none}
  body{background:#fff;font-size:12pt}
  .hero{min-height:auto;padding:20px 0}
}