/*
Theme Name: Aura Cars
Theme URI: https://drive-auracars.com
Author: Aura Cars
Description: Thème sur mesure pour Aura Cars. Maison automobile : recherche sur mandat, négoce, conciergerie. Fond sombre, typographie Cormorant Garamond et Jost, aucune dépendance à un plugin.
Version: 2.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: aura-cars
*/

/* Polices servies par le thème, aucune requête vers un service tiers. */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("assets/fonts/cormorant.woff2") format("woff2-variations"),
      url("assets/fonts/cormorant.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("assets/fonts/cormorant-italic.woff2") format("woff2-variations"),
      url("assets/fonts/cormorant-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("assets/fonts/jost.woff2") format("woff2-variations"),
      url("assets/fonts/jost.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}

:root{
  --bg:#0A0A09; --bg2:#0E0E0D; --line:#1E1E1C; --line2:#2C2C29;
  --t1:#EFEDE8; --t2:#A5A29A; --t3:#7A776F;
  --gold:#B8A179; --gold2:#8A7858;
  --fd:"Cormorant Garamond",Georgia,serif;
  --fu:"Jost","Helvetica Neue",Arial,sans-serif;
  --hair:1px;
  --gut:30px;
}
/* Filets : sur écran haute densité, 0.5 px CSS vaut exactement un pixel
   physique, donc le trait reste net au lieu d'être étalé sur deux rangées. */
@media (min-resolution:2dppx){ :root{ --hair:.5px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--fu);font-weight:330;-webkit-font-smoothing:antialiased}
body{font-size:17px;line-height:1.72;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.lab{font-family:var(--fu);font-size:10.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:block}
.lab.q{color:var(--t3)}
/* ligne de précision sous le titre du bandeau */
.subline{font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--t2);display:block;margin-top:18px;max-width:46ch;text-wrap:balance;line-height:1.9}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(10,10,9,.92);backdrop-filter:blur(10px);border-bottom:var(--hair) solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:16px}
.brand{display:block;line-height:0;flex:0 0 auto}
.brand img{height:40px;width:auto;max-width:none;display:block}
nav.main{display:flex;gap:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--t2);white-space:nowrap}
nav.main a{padding-block:4px}
nav.main a:hover,nav.main a[aria-current],nav.main li.current-menu-item a{color:var(--t1)}
nav.main ul,nav.main li{list-style:none}
nav.main ul{display:flex;gap:26px;margin:0;padding:0}
nav.main li{margin:0;padding:0}
.hcta{display:flex;gap:9px}
/* Les deux actions reprises dans le menu déroulant : sur un écran étroit
   elles ne tiennent pas dans la barre, elles descendent donc dans le menu. */
.navcta{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-family:var(--fu);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;padding:0 20px;border:var(--hair) solid var(--line2);color:var(--t2);white-space:nowrap;transition:background .2s,border-color .2s,color .2s;cursor:pointer;text-align:center}
.btn:hover{border-color:var(--gold2);color:var(--t1)}
.btn.gold{border-color:var(--gold2);color:var(--gold)}
.btn.gold:hover{background:var(--gold);border-color:var(--gold);color:#0A0A09}
.btn.lg{min-height:50px;padding:0 30px;font-size:11.5px}
.burger{display:none;min-height:44px;min-width:80px;text-align:left;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);padding:0 2px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:var(--hair) solid var(--line)}
.hero.short{min-height:min(52vh,430px)}

/* Fond du bandeau. Sans photo, le dégradé sert de fond.
   Le voile est porté par :after, et se règle page par page plus bas. */
.hero .img{
  position:absolute;inset:0;
  background-color:#0B0B0A;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-image:
    radial-gradient(120% 90% at 72% 18%, rgba(190,170,130,.10), transparent 58%),
    radial-gradient(80% 60% at 20% 95%, rgba(255,255,255,.045), transparent 60%),
    linear-gradient(170deg,#121210 0%,#0B0B0A 48%,#070706 100%);
}
.hero .img:after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top, rgba(10,10,9,.96) 0%, rgba(10,10,9,.55) 42%, rgba(10,10,9,.20) 100%)}

/* ---------- bandeaux, une photo et un voile par page ---------- */

/* Accueil : puits de lumière sur la voiture, cime noircie */
.b-accueil .img{
  background-image:url(assets/bandeaux/accueil-d.jpg);
  background-position:center 55%;
  filter:saturate(.56) contrast(1.07) brightness(.88);
}
.b-accueil .img:after{background:
  radial-gradient(58% 100% at 0% 100%, rgba(10,10,9,.54), rgba(10,10,9,0) 68%),
  linear-gradient(to right, rgba(10,10,9,.90) 0%, rgba(10,10,9,.56) 36%, rgba(10,10,9,.08) 72%, rgba(10,10,9,0) 100%),
  linear-gradient(to bottom, rgba(10,10,9,.74) 0%, rgba(10,10,9,.42) 16%, rgba(10,10,9,.08) 34%, rgba(10,10,9,0) 48%),
  radial-gradient(33% 36% at 67% 70%, rgba(10,10,9,.06) 0%, rgba(10,10,9,.38) 58%, rgba(10,10,9,.80) 100%),
  radial-gradient(92% 82% at 80% 18%, rgba(184,161,121,.10), transparent 60%)}

/* Recherche : photo très sombre, ombres relevées, coin assombri sous le texte */
.b-recherche .img{
  background-image:url(assets/bandeaux/recherche-d.jpg);
  background-position:center 46%;
  filter:saturate(.95) contrast(1.02) brightness(1.3);
}

.b-recherche .img:after{background:
  radial-gradient(78% 130% at 0% 100%, rgba(10,10,9,.92), rgba(10,10,9,0) 76%),
  radial-gradient(92% 82% at 80% 18%, rgba(184,161,121,.12), transparent 62%),
  linear-gradient(to right, rgba(10,10,9,.94) 0%, rgba(10,10,9,.76) 32%, rgba(10,10,9,.34) 58%, rgba(10,10,9,.04) 86%, rgba(10,10,9,0) 100%),
  linear-gradient(to top, rgba(10,10,9,.86) 0%, rgba(10,10,9,.56) 24%, rgba(10,10,9,.14) 56%, rgba(10,10,9,0) 100%)}

/* Vendre */
.b-vendre .img{
  background-image:url(assets/bandeaux/vendre-d.jpg);
  background-position:center 42%;
  filter:saturate(.55) contrast(1.05) brightness(.96);
}
.b-vendre .img:after{background:
  radial-gradient(92% 82% at 80% 20%, rgba(184,161,121,.13), transparent 62%),
  linear-gradient(to right, rgba(10,10,9,.93) 0%, rgba(10,10,9,.66) 42%, rgba(10,10,9,.22) 100%),
  linear-gradient(to top, rgba(10,10,9,.95) 0%, rgba(10,10,9,.84) 28%, rgba(10,10,9,.54) 66%, rgba(10,10,9,.34) 100%)}

/* Contact : scène de nuit, Luxembourg */
.b-contact .img{
  background-image:url(assets/bandeaux/contact-d.jpg);
  background-position:center 86%;
  filter:saturate(.85) contrast(1.04) brightness(1.1);
}
.b-contact .img:after{background:
  radial-gradient(92% 82% at 80% 20%, rgba(184,161,121,.12), transparent 62%),
  linear-gradient(to right, rgba(10,10,9,.92) 0%, rgba(10,10,9,.60) 32%, rgba(10,10,9,.18) 62%, rgba(10,10,9,0) 100%),
  linear-gradient(to top, rgba(10,10,9,.88) 0%, rgba(10,10,9,.62) 24%, rgba(10,10,9,.22) 60%, rgba(10,10,9,.06) 100%)}

/* Conciergerie : atelier, détail du compteur */
.b-conciergerie .img{
  background-image:url(assets/bandeaux/conciergerie-d.jpg);
  background-position:center 50%;
  filter:saturate(.55) contrast(1.05) brightness(.96);
}
.b-conciergerie .img:after{background:
  radial-gradient(92% 82% at 80% 20%, rgba(184,161,121,.13), transparent 62%),
  linear-gradient(to right, rgba(10,10,9,.93) 0%, rgba(10,10,9,.66) 42%, rgba(10,10,9,.22) 100%),
  linear-gradient(to top, rgba(10,10,9,.95) 0%, rgba(10,10,9,.84) 28%, rgba(10,10,9,.54) 66%, rgba(10,10,9,.34) 100%)}

.hero .in{position:relative;width:100%;padding-block:0 76px;will-change:transform,opacity}
.hero.short .in{padding-block:0 52px}
h1{font-family:var(--fd);font-weight:300;font-size:clamp(2.3rem,6.4vw,5.2rem);line-height:1.05;letter-spacing:-.012em;margin:20px 0 0;max-width:17ch}
h1.sm{font-size:clamp(2rem,5vw,3.6rem);max-width:20ch}
h1 em{font-style:italic;color:var(--gold)}
.hero p{font-size:1.06rem;color:var(--t2);max-width:50ch;margin:24px 0 32px;line-height:1.75}
.heroact{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding-block:clamp(58px,8.5vw,106px)}
.shead{margin-bottom:44px;max-width:62ch}
h2{font-family:var(--fd);font-weight:300;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.15;letter-spacing:-.01em;margin:16px 0 0}
h2 em{font-style:italic;color:var(--gold)}
h3{font-family:var(--fd);font-weight:400;font-size:1.6rem;margin:0 0 10px;line-height:1.25}
.shead p{font-size:1.04rem;color:var(--t2);margin:18px 0 0;max-width:56ch}
p{margin:0 0 15px;color:var(--t2);max-width:62ch}
p.w{color:var(--t1)}
strong{font-weight:400;color:var(--t1)}

/* ---------- deux entrées ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:var(--hair);background:var(--line);border:var(--hair) solid var(--line)}
.door{background:var(--bg2);padding:42px 36px 36px;transition:background .25s;display:block}
.door:hover{background:#131312}
.door h3{margin:0 0 12px;color:var(--t1)}
.door p{margin:0 0 22px;font-size:1rem;max-width:40ch}
.door .go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- listes à filets ---------- */
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.rows div{padding:20px 0;border-top:var(--hair) solid var(--line);font-size:1.02rem;color:var(--t2);display:flex;gap:14px;line-height:1.65}
.rows div i{font-style:normal;font-family:var(--fd);font-size:1.05rem;color:var(--gold2);flex:none}
.rows.one{grid-template-columns:1fr}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:var(--hair);background:var(--line);border-block:var(--hair) solid var(--line)}
.step{background:var(--bg);padding:34px 28px 32px}
/* Dans une colonne de texte, le retrait négatif annule le rembourrage des
   cellules : le libellé de la première étape tombe sur le même axe que le
   titre qui la précède. */
.wrap>.steps{margin-inline:-28px}
.step .lab{margin-bottom:16px}
.step h4{font-family:var(--fd);font-weight:400;font-size:1.32rem;margin:0 0 10px;color:var(--t1);line-height:1.25}
.step p{font-size:.98rem;margin:0}

/* ---------- section claire ----------
   Une seule de tout le site. Les jetons de couleur sont redéfinis ici :
   tout ce qui est à l'intérieur suit sans règle supplémentaire. */
.inv{
  --bg:#E9E4D8; --bg2:#E3DDCF; --line:#CEC6B4; --line2:#BCB29C;
  --t1:#16150F; --t2:#56524A; --t3:#8A8374;
  --gold:#7E6B42; --gold2:#8A7858;
  background:var(--bg);color:var(--t1);
}
/* Dans la bande claire, la grille reste dans la colonne de texte : à fond
   perdu, le premier libellé viendrait toucher le bord de l'écran. Le retrait
   négatif compense le rembourrage des cellules, de sorte que le texte des
   étapes s'aligne exactement sur le titre au-dessus. */
.inv .steps{background:none;gap:0;border-block:none;margin-inline:-28px}
.inv .step{background:none;padding:34px 28px 30px;border-left:var(--hair) solid var(--line)}
.inv .step:first-child{border-left:none}

/* ---------- diptyque texte / photo ---------- */
/* La photo monte sur toute la hauteur du texte : le bloc se lit d'un seul
   tenant, au lieu de s'arrêter au milieu d'un paragraphe. Pas de proportion
   imposée, donc, mais une hauteur plancher si le texte est court. */
.dyp{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,5vw,70px);align-items:stretch}
/* Diptyque inversé : la photo passe à gauche, le texte à droite. Sur
   téléphone l'ordre d'écriture reprend le dessus, texte puis photo. */
.dyp.gauche{grid-template-columns:.96fr 1.04fr}
.dyp.gauche .ph{order:-1}
.dyp .tx{min-width:0}
.dyp .tx p:last-child{margin-bottom:0}
.dyp .ph{
  position:relative;
  min-height:clamp(360px,42vw,580px);
  background-color:#0E0E0C;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  border:var(--hair) solid var(--line);
}
.dyp .ph:after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top, rgba(10,10,9,.40) 0%, rgba(10,10,9,0) 46%),
  radial-gradient(84% 68% at 78% 14%, rgba(184,161,121,.10), transparent 62%)}
.ph.p-travail{background-image:url(assets/bandeaux/travail-d.jpg);background-position:center 46%}

/* ---------- apparition au défilement ---------- */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.22,.61,.36,1)}
.js .rv.vu{opacity:1;transform:none}

/* ---------- bandeau citation ---------- */
.band{border-block:var(--hair) solid var(--line);padding-block:clamp(52px,7.5vw,92px);text-align:center}
.band p{font-family:var(--fd);font-weight:300;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.4;color:var(--t1);max-width:28ch;margin:16px auto 0}

/* ---------- vitrine ---------- */
.empty{border:var(--hair) solid var(--line);background:var(--bg2);padding:clamp(38px,6vw,66px) 30px;text-align:center}
.empty h3{color:var(--t1);margin-bottom:14px}
.empty p{margin:0 auto 24px;max-width:46ch}

.cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:26px}
.car{display:block}
.car .shot{aspect-ratio:4/3;border:var(--hair) solid var(--line);position:relative;overflow:hidden;background:linear-gradient(152deg,#151513,#1A1A17 35%,#0C0C0B 100%)}
.car .shot:empty:after{content:"PHOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;letter-spacing:.34em;color:#38383380}
.car .ct{font-family:var(--fd);font-size:1.34rem;margin:18px 0 5px;color:var(--t1);line-height:1.2}
.car .cs{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.car .cp{font-family:var(--fd);font-size:1.26rem;color:var(--gold);margin-top:11px}
.car .tag{position:absolute;top:0;left:0;background:rgba(10,10,9,.82);color:var(--gold);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:7px 11px}

/* bande « déjà livrés » */
.band-livres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.band-livres figure{margin:0}
.band-livres .shot{aspect-ratio:3/2;border:var(--hair) solid var(--line);overflow:hidden;background:linear-gradient(152deg,#151513,#1A1A17 35%,#0C0C0B 100%);position:relative}
.band-livres .shot:empty:after{content:"PHOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;letter-spacing:.34em;color:#38383380}
.band-livres figcaption{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-top:11px}

/* ---------- lignes de prestations / caractéristiques ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:0 48px}
.svc div{padding:19px 0;border-top:var(--hair) solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.svc span{font-size:1.05rem;color:var(--t2)}
.svc i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);flex:none}

/* ---------- formulaires ---------- */
form{max-width:760px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:0 34px}
.f{display:flex;flex-direction:column;gap:7px;padding-block:14px;border-top:var(--hair) solid var(--line)}
.f.full{grid-column:1/-1}
.f label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t1)}
/* Le trait sous le champ est visible au repos : sur fond sombre, un champ
   sans trait ne se voit pas, et l'on ne sait pas où écrire. */
.f input,.f select,.f textarea{background:none;border:none;border-bottom:1px solid var(--line2);color:var(--t1);font-family:var(--fu);font-weight:330;font-size:16.5px;padding:8px 0;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.f textarea{resize:vertical;min-height:132px;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:#605D57}
.f input:hover,.f select:hover,.f textarea:hover{border-bottom-color:var(--t3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--gold)}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 9px) 1.15em,calc(100% - 4px) 1.15em;background-size:5px 5px;background-repeat:no-repeat;padding-right:22px}
.f select option{background:var(--bg2);color:var(--t1)}
.f .hint{font-size:12.5px;color:var(--t3);letter-spacing:.02em;text-transform:none;line-height:1.5}
.fsub{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fsub .note{font-size:12.5px;color:var(--t3);max-width:34ch;line-height:1.55}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.chips label{display:inline-flex;align-items:center;gap:7px;min-height:40px;border:var(--hair) solid var(--line2);padding:0 12px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--t2);cursor:pointer}
.chips input{accent-color:var(--gold);width:auto}
.recu{border-left:2px solid var(--gold);padding:14px 18px;margin-bottom:26px;color:var(--t1)}

/* ---------- contact ---------- */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:48px;align-items:start}
.cta .big{font-family:var(--fd);font-weight:300;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;margin:16px 0 0;color:var(--t1)}
.cinfo div{padding:17px 0;border-top:var(--hair) solid var(--line);display:flex;justify-content:space-between;gap:18px;font-size:1.02rem;color:var(--t2)}
.cinfo b{font-weight:400;color:var(--t1);text-align:right}

footer{border-top:var(--hair) solid var(--line);padding-block:36px 44px;font-size:12px;letter-spacing:.09em;color:var(--t3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:var(--t3)}
footer a:hover{color:var(--t2)}

/* ---------- écrans intermédiaires ----------
   Entre le grand écran et le menu déroulant, la barre ne peut plus porter
   le logo, les cinq entrées et les deux boutons. On ne garde que l'action
   principale : sans cela la page déborde et s'ouvre décalée. */
@media (max-width:1140px){
  .hcta .btn:not(.gold){display:none}
}
@media (max-width:1010px){
  nav.main{gap:20px;font-size:11.5px;letter-spacing:.13em}
  nav.main ul{gap:20px}
  .hcta .btn{padding:0 15px;letter-spacing:.14em}
}

/* ---------- téléphone ---------- */
@media (max-width:900px){
  header{position:relative}
  .burger{display:block}
  /* Les boutons de la barre débordaient de l'écran : la page s'ouvrait
     réduite et décalée. Ils passent dans le menu déroulant. */
  .hcta{display:none}
  .navcta{display:flex;flex-direction:column;gap:10px;padding:18px 0 6px;width:100%}
  .navcta .btn{min-height:46px;width:100%}

  /* Menu déroulant : hauteur et opacité animées, jamais display:none,
     sinon rien ne peut être animé. */
  nav.main{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;z-index:40;
    background:var(--bg2);
    border-bottom:0 solid var(--line);
    padding:0 var(--gut);
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height .36s cubic-bezier(.22,.61,.36,1),
               opacity .2s ease,
               padding .36s cubic-bezier(.22,.61,.36,1),
               visibility 0s linear .36s;
  }
  nav.main.open{
    max-height:70vh;opacity:1;visibility:visible;
    border-bottom-width:var(--hair);
    padding:6px var(--gut) 16px;
    transition:max-height .4s cubic-bezier(.22,.61,.36,1),
               opacity .26s ease .04s,
               padding .4s cubic-bezier(.22,.61,.36,1),
               visibility 0s linear 0s;
  }
  nav.main ul{flex-direction:column;gap:0;width:100%}
  nav.main ul a{
    display:block;padding:15px 0;border-bottom:var(--hair) solid var(--line);
    font-size:13px;letter-spacing:.2em;
  }
  nav.main li:last-child a{border-bottom:none}
  /* entrée décalée : le menu se déplie, les lignes suivent.
     Le décalage porte sur le li, car chaque a est seul dans son li. */
  nav.main li,nav.main .navcta{
    opacity:0;transform:translateY(-6px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);
  }
  nav.main.open li,nav.main.open .navcta{opacity:1;transform:none}
  nav.main.open li:nth-child(1){transition-delay:.06s}
  nav.main.open li:nth-child(2){transition-delay:.10s}
  nav.main.open li:nth-child(3){transition-delay:.14s}
  nav.main.open li:nth-child(4){transition-delay:.18s}
  nav.main.open li:nth-child(5){transition-delay:.22s}
  nav.main.open li:nth-child(6){transition-delay:.26s}
  nav.main.open .navcta{transition-delay:.30s}

  .rows{grid-template-columns:1fr}
  .cta{gap:40px}
  /* Diptyque : la photo passe sous le texte et reprend un cadre paysage. */
  .dyp,.dyp.gauche{grid-template-columns:1fr;gap:clamp(26px,5vw,34px)}
  .dyp .ph,.dyp.gauche .ph{aspect-ratio:16/10;min-height:0;order:0}
  /* Bande claire en colonne unique : les filets passent à l'horizontale. */
  .inv .steps{grid-template-columns:1fr;margin-inline:0}
  .inv .step{padding:28px 0;border-left:none;border-top:var(--hair) solid var(--line)}
  .inv .step:first-child{border-top:none;padding-top:4px}
}
/* Téléphone : fichiers plus légers et point de cadrage propre à chaque image,
   le cadre devenant étroit et haut. */
@media (max-width:760px){
  .b-accueil .img     {background-image:url(assets/bandeaux/accueil-m.jpg);     background-position:68% 58%}
  .b-recherche .img   {background-image:url(assets/bandeaux/recherche-m.jpg);   background-position:58% 50%}
  .b-vendre .img      {background-image:url(assets/bandeaux/vendre-m.jpg);      background-position:center 42%}
  .b-conciergerie .img{background-image:url(assets/bandeaux/conciergerie-m.jpg);background-position:center 50%}
  .b-contact .img     {background-image:url(assets/bandeaux/contact-m.jpg);     background-position:62% 86%}
  .ph.p-travail       {background-image:url(assets/bandeaux/travail-m.jpg);     background-position:center 46%}
  /* Sur un écran étroit le texte occupe toute la largeur : le voile latéral
     ne sert plus à rien, c'est le bas qui doit porter. */
  .b-vendre .img:after,.b-conciergerie .img:after,
  .b-contact .img:after{background:
    radial-gradient(120% 70% at 78% 8%, rgba(184,161,121,.10), transparent 62%),
    linear-gradient(to top, rgba(10,10,9,.97) 0%, rgba(10,10,9,.90) 38%, rgba(10,10,9,.58) 72%, rgba(10,10,9,.30) 100%)}
  /* Accueil : sous-bois clair, il faut tenir le haut comme le bas */
  .b-accueil .img{background-position:72% 72%;filter:saturate(.50) contrast(1.07) brightness(.78)}
  .b-accueil .img:after{background:
    radial-gradient(120% 60% at 78% 10%, rgba(184,161,121,.08), transparent 60%),
    linear-gradient(to bottom, rgba(10,10,9,.94) 0%, rgba(10,10,9,.72) 20%, rgba(10,10,9,.40) 38%, rgba(10,10,9,.22) 52%),
    linear-gradient(to top, rgba(10,10,9,.96) 0%, rgba(10,10,9,.80) 30%, rgba(10,10,9,.42) 62%, rgba(10,10,9,.22) 100%)}
  /* Recherche : la signature du phare reste, le texte passe devant */
  .b-recherche .img{filter:saturate(.9) contrast(1.02) brightness(1.08)}
  .b-recherche .img:after{background:
    radial-gradient(120% 70% at 78% 8%, rgba(184,161,121,.10), transparent 62%),
    linear-gradient(to bottom, rgba(10,10,9,.80) 0%, rgba(10,10,9,.50) 18%, rgba(10,10,9,.22) 34%),
    linear-gradient(to top, rgba(10,10,9,.96) 0%, rgba(10,10,9,.88) 40%, rgba(10,10,9,.56) 74%, rgba(10,10,9,.28) 100%)}
}

@media (max-width:620px){
  :root{--gut:20px}
  body{line-height:1.66}
  .brand img{height:32px}
  .hero{min-height:74vh}
  .hero .in{padding-block:0 54px}
  .hero.short{min-height:300px}
  .hero.short .in{padding-block:0 40px}
  .hero p{font-size:1.02rem;margin:20px 0 28px}
  h1{max-width:none;letter-spacing:-.005em}
  .heroact{gap:9px}
  .heroact .btn{flex:1 1 100%}
  .door{padding:32px 22px 28px}
  .door p{max-width:none}
  .step{padding:28px 20px}
  .wrap>.steps{margin-inline:-20px}
  .shead{margin-bottom:34px}
  .svc{gap:0}
  .cars{gap:30px}
  .cinfo div{flex-direction:column;gap:4px}
  .cinfo b{text-align:left}
  .fgrid{grid-template-columns:1fr;gap:0}
  .fsub{gap:14px}
  .fsub .btn{flex:1 1 100%}
  .fsub .note{max-width:none}
  footer{flex-direction:column;gap:10px;font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  /* rien ne doit rester caché si l'animation n'a pas lieu */
  .js .rv{opacity:1!important;transform:none!important}
  .hero .in{transform:none!important;opacity:1!important}
}