/* ═══════════════════════════════════════════════════════════════
MjlCab — système de design
Deux règles tiennent tout le site :
• ÉCHELLE TYPOGRAPHIQUE en ratio 1,25 — aucune taille hors échelle
• RYTHME D'ESPACEMENT sur une base de 4 px — aucune valeur libre
═══════════════════════════════════════════════════════════════ */
:root{
--noir:#0D0D0E; --noir-2:#141416; --noir-3:#1B1B1F;
--ligne:#26262B; --ligne-clair:#E4E6EA;
--txt:#F4F2ED; --txt-2:#A8A8AF; --txt-3:#7C7C85;
--clair:#FFFFFF; --clair-txt:#16181D; --clair-txt-2:#5A616E;
--or:#D4B851; --or-fonce:#B2953A; --or-txt:#17130A;
--or-cta:#E9BD42; --or-cta-clair:#F1C95C;
--vert:#3FBF7F; --rouge:#E0705C;
--police:"Poppins",-apple-system,"Segoe UI",Helvetica,sans-serif;
--t-xs:0.75rem;
--t-sm:0.8125rem;
--t-md:0.9375rem;
--t-base:1rem;
--t-lg:1.125rem;
--t-xl:clamp(1.25rem,1.6vw,1.375rem);
--t-2xl:clamp(1.5rem,2.2vw,1.75rem);
--t-3xl:clamp(1.875rem,3.4vw,2.5rem);
--t-4xl:clamp(2.25rem,5vw,3.75rem);
--h-titre:1.14; --h-texte:1.65; --l-max:64ch;
--e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem;
--e5:1.5rem; --e6:2rem; --e7:3rem; --e8:4rem;
--sec-y:clamp(4rem,8vw,7rem);
--pad-x:clamp(1.25rem,5vw,4rem);
--max:1180px;
--r:16px; --r-sm:12px; --r-pill:999px;
--ombre:0 20px 44px -22px rgba(0,0,0,.72);
--ease:cubic-bezier(.22,.68,.16,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--txt);font-family:var(--police);
font-size:var(--t-base);line-height:var(--h-texte);font-weight:400;
-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
main{flex:1}
/* ── typographie ── */
.d1,.d2,.d3{margin:0;font-weight:700;line-height:var(--h-titre);letter-spacing:-.022em}
.d1{font-size:var(--t-4xl)}
.d2{font-size:var(--t-3xl)}
.d3{font-size:var(--t-xl);font-weight:600;letter-spacing:-.012em;line-height:1.28}
em.or{font-style:normal;color:var(--or)}
.txt{margin:0;font-size:var(--t-base);color:var(--txt-2);max-width:var(--l-max)}
.leg{margin:0;font-size:var(--t-sm);color:var(--txt-3)}
.eyebrow{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e4);
font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
/* ── structure ── */
.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.sec{padding:var(--sec-y) 0}
.sec--fin{border-top:1px solid var(--ligne)}
.head{max-width:44rem;margin:0 auto var(--e8);text-align:center}
.head .eyebrow{justify-content:center}
.head .txt{margin:var(--e4) auto 0}
.actions{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e6)}
/* ── en-tête ── */
.hdr{position:sticky;top:0;z-index:70;background:rgba(13,13,14,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
/* le backdrop-filter crée un contexte de positionnement : sans ça, le menu plein écran
(position:fixed) se retrouverait piégé dans la hauteur du bandeau d'en-tête */
.hdr:has(.nav.ouvert){backdrop-filter:none}
.hdr .in{display:flex;align-items:center;gap:var(--e6);height:88px}
.nav{display:flex;align-items:center;gap:var(--e1);margin-left:auto;font-size:var(--t-md);font-weight:500}
.nav a{color:var(--txt-2);padding:var(--e2) var(--e3);border-radius:var(--r-sm);transition:color .2s,background .2s}
.nav a:hover{color:var(--txt);background:var(--noir-2)}
.nav a[aria-current]{color:var(--or);background:rgba(212,184,81,.1)}
.tel{background:var(--or);color:var(--or-txt);font-weight:700;font-size:var(--t-md);
padding:var(--e3) var(--e5);border-radius:var(--r-pill);white-space:nowrap;box-shadow:0 0 24px rgba(212,184,81,.36)}
.tel:hover{background:#E2C765}
.burger{display:none;flex:none;background:none;border:0;width:42px;height:36px;cursor:pointer;flex-direction:column;justify-content:center;gap:7px}
.burger span{display:block;height:2.5px;background:var(--txt);transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}
/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
padding:var(--e4) var(--e6);border:1px solid transparent;border-radius:var(--r-pill);
font-size:var(--t-md);font-weight:600;cursor:pointer;
transition:background .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--or{background:var(--or);color:var(--or-txt);box-shadow:0 0 26px rgba(212,184,81,.3)}
.btn--or:hover{background:#E2C765}
/* « Estimer et reserver » : un or plus lumineux, identique sur tout le site */
.btn--cta{background:var(--or-cta);box-shadow:0 0 26px rgba(233,189,66,.3)}
.btn--cta:hover{background:var(--or-cta-clair)}
.btn--fil{border-color:var(--ligne);color:var(--txt)}
.btn--fil:hover{border-color:var(--txt)}
/* ── hero court : formulaire visible sans écart superflu ── */
.hero--form{padding:var(--e6) 0 var(--e6)}
.sec--form{padding-top:var(--e6)}
/* ── hero ── */
.hero{position:relative;isolation:isolate;border-bottom:1px solid var(--ligne);padding:var(--sec-y) 0}
.hero-fond{position:absolute;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(118deg,#101013,#1B1B20)}
.hero-fond img{width:100%;height:100%;object-fit:cover;opacity:.78}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(110% 80% at 50% 48%,rgba(13,13,14,.4),rgba(13,13,14,.8) 58%,rgba(13,13,14,.95)),
linear-gradient(180deg,rgba(13,13,14,.62),transparent 34%,rgba(13,13,14,.8))}
.hero .in{text-align:center;max-width:52rem}
.hero .eyebrow{justify-content:center}
.hero .txt{margin:var(--e5) auto 0;max-width:54ch;font-size:var(--t-lg)}
.hero .actions{justify-content:center;margin-top:0}
.hero--grand .btn--or{padding:var(--e5) clamp(2.2rem,5vw,3.4rem);
font-size:clamp(1rem,1.8vw,1.15rem);font-weight:700;letter-spacing:.02em;
border-radius:var(--r-pill);box-shadow:0 14px 44px rgba(212,184,81,.34)}
.hero--grand .btn--or:hover{transform:translateY(-2px);box-shadow:0 18px 52px rgba(212,184,81,.45)}
.hero--grand{min-height:clamp(32rem,84vh,46rem);display:flex;align-items:center}
.pastille{display:inline-flex;align-items:center;gap:var(--e2);margin:0 auto var(--e6);
border-radius:var(--r-pill);padding:15px var(--e7);
font-size:clamp(.82rem,1.5vw,1rem);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
color:var(--or);background:rgba(88,74,32,.42);border:1px solid rgba(212,184,81,.42);
backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,.4)}
/* ── bande de chiffres ── */
.chiffres{border-bottom:1px solid var(--ligne);background:var(--noir-2)}
.chiffres .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0}
.ch{padding:var(--e6) var(--e4);text-align:center;border-right:1px solid var(--ligne)}
.ch:last-child{border-right:0}
.ch b{display:block;font-size:var(--t-2xl);font-weight:700;line-height:1.1;color:var(--or);letter-spacing:-.02em}
.ch span{display:block;font-size:var(--t-xs);color:var(--txt-3);margin-top:var(--e2);letter-spacing:.08em;text-transform:uppercase}
.ch i{display:none}
select.inp{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input[type="date"].inp::-webkit-calendar-picker-indicator,
input[type="time"].inp::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.5);cursor:pointer;opacity:.9}
input[type="time"].inp{min-height:52px;padding:13px 14px}
/* iOS Safari : les inputs date/time natifs ignorent width:100% et se dimensionnent
sur leur contenu interne -> ils depassent du formulaire. On neutralise le rendu natif
et on repasse l'interieur en flex pour que valeur + icone tiennent sur une ligne. */
input[type="date"].inp,
input[type="time"].inp,
input[type="datetime-local"].inp{
appearance:none;-webkit-appearance:none;
display:flex;align-items:center;
width:100%;max-width:100%;min-width:0;box-sizing:border-box;
font-family:inherit;font-size:var(--t-md);line-height:normal}
input[type="date"].inp::-webkit-datetime-edit,
input[type="time"].inp::-webkit-datetime-edit,
input[type="datetime-local"].inp::-webkit-datetime-edit{
flex:1 1 auto;min-width:0;overflow:hidden;padding:0;text-align:left}
input[type="date"].inp::-webkit-date-and-time-value,
input[type="time"].inp::-webkit-date-and-time-value{
min-width:0;text-align:left;margin:0}
input[type="date"].inp::-webkit-calendar-picker-indicator,
input[type="time"].inp::-webkit-calendar-picker-indicator{
flex:0 0 auto;margin:0 0 0 auto}
.tel-champ{display:flex;gap:var(--e2)}
.tel-champ select.inp{flex:0 0 6.5rem;padding-left:var(--e3);padding-right:26px;background-position:right 8px center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-champ input.inp{flex:1;min-width:0}
.liste-adr{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
background:var(--noir-3);border:1px solid var(--ligne);border-radius:var(--r-sm);
max-height:220px;overflow-y:auto;box-shadow:0 18px 36px rgba(0,0,0,.6)}
.liste-adr .it{padding:10px 13px;cursor:pointer;font-size:var(--t-md);line-height:1.32;border-top:1px solid var(--ligne)}
.liste-adr .it:first-child{border-top:0}
.liste-adr .it:hover{background:rgba(212,184,81,.1)}
.liste-adr .it small{display:block;color:var(--txt-3);font-size:var(--t-xs)}
/* ── zone image ── */
.ph{position:relative;overflow:hidden;aspect-ratio:16/9;
background:radial-gradient(120% 140% at 50% 15%,#232328,#131316 60%,#0E0E10)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(13,13,14,.5))}
.ph .badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:60px;height:60px;
border-radius:50%;background:rgba(212,184,81,.1);backdrop-filter:blur(6px);color:var(--or);
display:grid;place-items:center;border:1px solid rgba(212,184,81,.3);
box-shadow:0 0 34px rgba(212,184,81,.16)}
.ph:has(img[src]:not([src=""])) .badge{left:var(--e4);top:auto;bottom:var(--e4);transform:none;
width:44px;height:44px;background:rgba(13,13,14,.84)}
/* ── cartes ── */
.g3{display:grid;gap:var(--e5);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.carte-img{display:flex;flex-direction:column;color:inherit;background:var(--noir-2);
border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;
transition:border-color .3s,transform .3s var(--ease)}
.carte-img:hover{border-color:#3A3A42;transform:translateY(-4px)}
.carte-img:hover .ph img{transform:scale(1.05)}
.carte-img .corps{padding:var(--e5);display:flex;flex-direction:column;flex:1}
.carte-img h3{margin:0 0 var(--e2);font-size:var(--t-xl);font-weight:600;line-height:1.28;letter-spacing:-.012em}
.carte-img p{margin:0;font-size:var(--t-md);color:var(--txt-2);line-height:var(--h-texte)}
/* Le libellé au survol est un vrai élément du texte, pas un contenu CSS :
sans cela il resterait en français dans les autres langues. */
a.carte-img .carte-cta{display:block;margin-top:var(--e4);font-size:var(--t-sm);
font-weight:600;color:var(--or);opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
a.carte-img:hover .carte-cta{opacity:1;transform:none}
/* ── cartes prestations : rectangle horizontal compact ── */
.carte-serv{display:flex;gap:var(--e4);align-items:flex-start;color:inherit;
background:var(--noir-2);border:1px solid var(--ligne);border-radius:var(--r);
padding:var(--e4) var(--e5);transition:border-color .3s,transform .3s var(--ease)}
.carte-serv:hover{border-color:#3A3A42;transform:translateY(-3px)}
.carte-serv .ic{flex:none;width:44px;height:44px;border-radius:50%;
background:rgba(212,184,81,.14);color:var(--or);display:grid;place-items:center}
.carte-serv h3{margin:0 0 var(--e1);font-size:var(--t-base);font-weight:600;letter-spacing:-.01em}
.carte-serv p{margin:0;font-size:var(--t-sm);color:var(--txt-2);line-height:1.55}
/* ── liste tarifaire ── */
.liste{border-top:1px solid var(--ligne);max-width:52rem;margin:0 auto}
.li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e5);padding:var(--e5) 0;border-bottom:1px solid var(--ligne)}
.li b{display:block;font-size:var(--t-base);font-weight:600}
.li span{font-size:var(--t-sm);color:var(--txt-3)}
.li .p{font-size:var(--t-2xl);font-weight:700;white-space:nowrap;letter-spacing:-.02em}
/* ── frise ── */
.frise{counter-reset:etape;display:grid;gap:var(--e6) var(--e5);grid-template-columns:1fr;
max-width:56rem;margin:0 auto;text-align:center}
@media(min-width:40rem){.frise{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.frise{grid-template-columns:repeat(3,1fr)}}
.fr{counter-increment:etape;display:flex;flex-direction:column;align-items:center}
.fr .rond{width:62px;height:62px;border-radius:50%;background:rgba(88,74,32,.34);color:var(--or);
display:grid;place-items:center;margin:0 auto var(--e3);transition:.3s var(--ease)}
.fr .rond svg{width:25px;height:25px}
.fr:hover .rond{background:var(--or);color:var(--or-txt)}
.fr b{display:none}
.fr h3{margin:0 0 var(--e2);font-size:var(--t-lg);font-weight:600;line-height:1.3}
.fr h3::before{content:counter(etape) ". "}
.fr p{margin:0 auto;font-size:var(--t-md);color:var(--txt-2);max-width:32ch;line-height:1.65}
@media(max-width:34rem){
.fr .rond{width:56px;height:56px}
.fr .rond svg{width:23px;height:23px}
}
/* ── véhicules ── */
.veh-g2{display:grid;gap:var(--e6);grid-template-columns:1fr}
.veh2{display:grid;grid-template-columns:1fr;background:var(--noir-2);color:var(--txt);
border:1px solid var(--ligne);border-top:3px solid var(--or);border-radius:var(--r);overflow:hidden;
padding:var(--e4);gap:var(--e4);
transition:transform .3s var(--ease),box-shadow .3s}
@media(min-width:34rem){.veh2{grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);align-items:center;column-gap:var(--e7)}}
.veh2:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.veh2 .ph{position:relative;min-width:0;width:100%;height:auto;align-self:center;aspect-ratio:3/2;
display:flex;align-items:center;justify-content:center}
.veh2 .ph img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:34rem){.veh2 .ph{aspect-ratio:16/10}}
.veh2 .corps{padding:0 var(--e1) var(--e1);display:flex;flex-direction:column}
@media(max-width:34rem){.veh2 .corps{align-items:center;text-align:center}}
.veh2 h3{margin:0;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.015em}
.veh2 .mod{margin:var(--e1) 0 var(--e3);font-size:var(--t-sm);font-weight:600;color:var(--or)}
.veh2 p{margin:0;font-size:var(--t-sm);color:var(--txt-2);line-height:1.55}
.veh2 .n{display:flex;justify-content:space-between;gap:var(--e5);padding:var(--e4) 0;margin:var(--e4) 0;
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.veh2 .n div{text-align:center;flex:1}
.veh2 .n b{display:block;font-size:var(--t-lg);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--txt)}
.veh2 .n span{font-size:var(--t-xs);color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase}
.veh2 .eq{display:grid;grid-template-columns:1fr 1fr;gap:var(--e1) var(--e2);font-size:var(--t-sm);
color:var(--txt-2);margin-bottom:var(--e6)}
.veh2 .eq div{display:flex;gap:var(--e2);align-items:center}
.veh2 .eq svg{color:var(--or);flex:none}
.veh2 .btn{margin-top:auto;align-self:flex-start;padding-top:var(--e3);padding-bottom:var(--e3)}
/* ── fiches vehicules sur fond blanc (comme l'ancien site) ── */
.veh2--clair{background:var(--clair);color:var(--clair-txt);border:1px solid var(--ligne-clair)}
.veh2--clair .ph{background:var(--clair)}
/* la surcouche sombre globale de .ph n'a rien a faire sur une carte blanche */
.veh2 .ph::after{content:none;display:none;background:none}
.veh2--clair h3{color:var(--clair-txt)}
.veh2--clair .mod{color:var(--or-fonce)}
.veh2--clair p{color:var(--clair-txt-2)}
.veh2--clair .n{border-top:1px solid var(--ligne-clair);border-bottom:1px solid var(--ligne-clair)}
.veh2--clair .n b{color:var(--clair-txt)}
.veh2--clair .n div:first-child b{color:var(--or-fonce)}
.veh2--clair .n span{color:var(--clair-txt-2)}
.veh2--clair .eq{color:var(--clair-txt)}
.veh2--clair .eq svg{color:var(--or-fonce)}
.veh2--clair .btn--or{color:#fff;background:var(--or);box-shadow:none}
.veh2--clair .btn--or:hover{background:var(--or-fonce)}
.veh2--clair:hover{box-shadow:0 18px 40px rgba(0,0,0,.35)}
@media(max-width:34rem){
.veh2 p{font-size:var(--t-xs)}
.veh2 .btn{align-self:center;margin-top:var(--e1)}
}
/* ── avis ── */
.avis{display:grid;gap:var(--e5);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.av{border-left:2px solid var(--or);padding-left:var(--e5)}
.av p{margin:0 0 var(--e3);font-size:var(--t-base);max-width:42ch}
.av cite{font-style:normal;font-size:var(--t-sm);color:var(--txt-3)}
/* ── bandeau d'appel ── */
.bande{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--ligne);text-align:center}
.bande-fond{position:absolute;inset:0;z-index:-2;background:linear-gradient(122deg,#131316,#1E1E23)}
.bande-fond img{width:100%;height:100%;object-fit:cover;opacity:.28}
.bande::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,13,14,.86)}
.bande .in{padding-top:var(--sec-y);padding-bottom:var(--sec-y);max-width:46rem}
.bande .eyebrow{justify-content:center}
.bande .txt{margin:var(--e4) auto var(--e6)}
.bande .actions{justify-content:center;margin:0}
/* ── article ── */
.art-tete{border-bottom:1px solid var(--ligne);padding:var(--e8) 0 var(--e6)}
.art-tete .in{max-width:48rem}
.art-meta{display:flex;gap:var(--e3);align-items:center;font-size:var(--t-sm);color:var(--txt-3);margin-top:var(--e4)}
.art-corps{max-width:44rem;margin:0 auto;padding:var(--e8) 0}
.art-corps h2{font-size:var(--t-2xl);font-weight:700;margin:var(--e7) 0 var(--e3);letter-spacing:-.02em;line-height:var(--h-titre)}
.art-corps h2:first-child{margin-top:0}
.art-corps p{font-size:var(--t-base);line-height:1.72;color:var(--txt-2);margin:0 0 var(--e4)}
.art-corps ul{padding-left:var(--e5);margin:0 0 var(--e4)}
.art-corps li{font-size:var(--t-base);line-height:1.7;color:var(--txt-2);margin-bottom:var(--e2)}
.art-corps .exergue{border-left:2px solid var(--or);padding-left:var(--e5);margin:0 0 var(--e7);
font-size:var(--t-lg);line-height:1.58;color:var(--txt)}
.art-nav{border-top:1px solid var(--ligne);padding-top:var(--e5);margin-top:var(--e7);
display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap}
.art-nav a{color:var(--or);font-size:var(--t-md);font-weight:600}
/* ── formulaires ── */
.champ{margin-bottom:var(--e4)}
.lbl{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:600;margin-bottom:var(--e2)}
.inp{width:100%;min-width:0;max-width:100%;min-height:52px;background:var(--noir-2);border:1px solid var(--ligne);border-radius:var(--r-sm);
padding:13px 14px;font-size:var(--t-md);transition:border-color .2s;box-sizing:border-box}
.inp:focus{border-color:var(--or);outline:none}
textarea.inp{min-height:7.5rem;resize:vertical}
.rang{display:grid;gap:var(--e4);grid-template-columns:1fr}
/* ── formulaire clair (page contact) ── */
.form-carte{background:var(--clair);color:var(--clair-txt);border-radius:var(--r);
padding:var(--e6);max-width:640px;margin:0 auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.form-carte .lbl{color:var(--clair-txt-2)}
.form-carte .inp{background-color:#F4F5F7;border:1px solid var(--ligne-clair);color:var(--clair-txt)}
.form-carte .inp::placeholder{color:#9AA1AC}
.form-carte select.inp{background-image:url("data:image/svg+xml;utf8,")}
.form-carte input[type="date"].inp::-webkit-calendar-picker-indicator,
.form-carte input[type="time"].inp::-webkit-calendar-picker-indicator{filter:none;opacity:.6}
.form-carte .liste-adr{background:var(--clair);border-color:var(--ligne-clair);box-shadow:0 18px 36px rgba(0,0,0,.18)}
.form-carte .liste-adr .it{border-color:var(--ligne-clair)}
.form-carte .liste-adr .it small{color:var(--clair-txt-2)}
.form-carte .btn--f{border-color:var(--ligne-clair);color:var(--clair-txt)}
.form-carte .btn--f:hover{background:#F4F5F7}
@media(min-width:35rem){.rang{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ct{display:grid;gap:var(--e7);grid-template-columns:1fr}
@media(min-width:55rem){.ct{grid-template-columns:.85fr 1.15fr}}
.ct-b{display:flex;gap:var(--e4);align-items:flex-start;border:1px solid var(--ligne);
border-radius:var(--r-sm);padding:var(--e4);margin-bottom:var(--e3)}
.ct-b svg{color:var(--or);flex:none;margin-top:3px}
.ct-b span{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.ct-b b{font-size:var(--t-base);font-weight:600}
/* ── pages légales ── */
.legal{max-width:44rem;margin:0 auto}
.legal h2{font-size:var(--t-xl);font-weight:600;margin:var(--e7) 0 var(--e3);letter-spacing:-.012em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--txt-2);font-size:var(--t-md);line-height:var(--h-texte)}
.legal ul{padding-left:var(--e5)}
.legal .maj{color:var(--txt-3);font-size:var(--t-sm);margin-bottom:var(--e7)}
mark{background:rgba(212,184,81,.2);color:var(--or);padding:1px 6px;border-radius:4px;font-weight:600}
/* ── pied de page ── */
.ft{border-top:1px solid var(--ligne);background:#0A0A0B;padding:var(--e8) 0 var(--e5)}
.ft .in{display:grid;gap:var(--e6);grid-template-columns:1fr}
@media(min-width:38rem){.ft .in{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.ft .in{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.ft .marque{position:relative;z-index:1;width:max-content}
.ft-rs{display:flex;gap:var(--e2);margin-top:var(--e4)}
.ft-rs a{width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne);color:var(--txt-3);
display:grid;place-items:center;transition:.2s}
.ft-rs a:hover{border-color:var(--or);color:var(--or)}
.bas-liens{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4)}
.bas-liens a{color:var(--txt-3)}
.bas-liens a:hover{color:var(--or)}
/* coordonnées du pied de page : une icône devant chaque ligne */
.ft-l{display:inline-flex;align-items:flex-start;gap:10px;width:max-content;max-width:100%}
.ft-l svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--or);opacity:.85}
.ft-l span{min-width:0}
a.ft-l:hover svg{opacity:1}
.ft p{color:var(--txt-3);font-size:var(--t-md);margin:var(--e3) 0 0;max-width:30ch}
/* justify-items:start : sinon chaque lien occupe toute la largeur de la
colonne et sa zone cliquable déborde très loin du texte. */
.ft .col{display:grid;gap:var(--e2);align-content:start;justify-items:start}
.ft .col b{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:var(--e1)}
.ft .col a,.ft .col span{color:var(--txt-3);font-size:var(--t-md)}
.ft .col a:hover{color:var(--or)}
/* Bas de page : une information par ligne, dans l'ordre de lecture.
En colonne sur mobile, réparti sur une ligne à partir du grand écran. */
.bas{max-width:var(--max);margin:var(--e6) auto 0;padding:var(--e5) var(--pad-x) 0;
border-top:1px solid var(--ligne);font-size:var(--t-md);color:var(--txt-3);
display:flex;flex-direction:column;gap:var(--e4);align-items:center;
text-align:center;line-height:1.7}
.bas-liens{justify-content:center}
/* Sur grand écran, les mentions s'étalent sur toute la largeur du pied de
page. Sur mobile elles restent empilées. */
@media(min-width:62rem){
.bas{flex-direction:row;flex-wrap:nowrap;align-items:center;
justify-content:space-between;gap:var(--e5);width:100%;
text-align:left;font-size:var(--t-sm)}
.bas > span{flex:0 1 auto}
.bas-liens{flex-wrap:nowrap;gap:var(--e4)}
}
.wapp{position:fixed;right:var(--e5);bottom:var(--e5);z-index:80;width:54px;height:54px;border-radius:50%;
background:#25D366;display:grid;place-items:center;box-shadow:var(--ombre)}
/* le macaron Netlify se pose en bas au centre-droit : on remonte le bouton
WhatsApp au-dessus pour qu'il ne soit ni recouvert ni recouvrant */
@media(max-width:46rem){.wapp{right:var(--e4);bottom:var(--e4)}}
/* et on laisse respirer le bas de page pour que rien d'utile ne passe dessous */
/* ── défilement ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in-vue{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:70ms}
.rv[data-d="2"]{transition-delay:140ms}
.rv[data-d="3"]{transition-delay:210ms}
.rv[data-d="4"]{transition-delay:280ms}
.rv[data-d="5"]{transition-delay:350ms}
/* ── mobile ── */
@media(max-width:54rem){
.hdr .in{gap:var(--e2)}
.hdr .marque,.hdr .langues,.hdr .burger{position:relative;z-index:61}
.nav{position:fixed;inset:0;z-index:60;background:var(--noir);flex-direction:column;
justify-content:flex-start;gap:var(--e4);padding:7.5rem var(--pad-x) var(--e7);margin-left:0;display:none}
.nav.ouvert{display:flex}
.nav a{position:relative;padding:var(--e3) var(--e5);border-bottom:0;border-radius:var(--r-pill);
font-size:var(--t-xl);font-weight:600;text-align:center;transition:background .2s,color .2s}
.nav a:hover{background:var(--noir-2);color:var(--txt)}
.nav a:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:calc(var(--e4) * -1);
transform:translateX(-50%);width:34px;height:1px;
background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.55}
.nav a[aria-current]::after{display:none}
.nav a[aria-current]{background:var(--or);color:var(--or-txt)}
.burger{display:flex}
.actions{flex-direction:column;align-items:center}
.actions .btn{width:100%;max-width:264px;padding:var(--e3) var(--e6)}
.hero .in{padding-left:2.25rem;padding-right:2.25rem}
.hero .d1{font-size:2.375rem}
.hero .d1 br.cassure{display:none}
.fr p{font-size:var(--t-xs)}
.hero .txt{font-size:var(--t-sm)}
.pastille{font-size:.6875rem}
.chiffres{background:transparent;border-bottom:0}
.chiffres .in{display:flex;justify-content:center;overflow-x:auto;gap:var(--e5);padding:var(--e5) var(--pad-x);
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.chiffres .in::-webkit-scrollbar{display:none}
.ch{flex:0 0 auto;width:auto;padding:0;border-right:0;scroll-snap-align:start}
.ch b,.ch span{display:none}
.ch i{display:flex;flex-direction:column;align-items:center;gap:var(--e2);font-style:normal}
.ch i .rond{width:60px;height:60px;flex:none;border-radius:50%;
background:rgba(212,184,81,.1);border:1px solid rgba(212,184,81,.3);
display:flex;align-items:center;justify-content:center;color:var(--or)}
.ch i em{font-style:normal;font-size:.75rem;font-weight:600;color:var(--txt-2);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
.rv{opacity:1;transform:none}
}
/* ── logo ── */
.marque{display:inline-flex;align-items:center;gap:var(--e3)}
.marque img{width:72px;height:72px;border-radius:50%;flex:none}
.marque .nom{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.marque .nom em{font-style:normal;color:var(--or)}
.ft .marque img{width:38px;height:38px}
.ft .marque .nom{font-size:var(--t-lg)}
@media(max-width:54rem){.marque .nom{display:none}}
/* dans le pied de page il y a la place : on garde le nom sur mobile */
@media(max-width:54rem){.ft .marque .nom{display:block}}
/* ── carte d'article : pas d'appel à réserver ── */
a.carte-art .corps::after{content:"Lire l'article →"}
/* ── tableaux tarifaires ── */
.tableau{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--r)}
.tableau table{width:100%;border-collapse:collapse;min-width:36rem}
.tableau th{background:var(--noir-2);text-align:left;padding:var(--e4);font-size:var(--t-xs);
letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);font-weight:600;white-space:nowrap}
.tableau th:not(:first-child),.tableau td:not(:first-child){text-align:right}
.tableau td{padding:var(--e4);border-top:1px solid var(--ligne);font-size:var(--t-md);color:var(--txt-2);white-space:nowrap}
.tableau td b{display:block;color:var(--txt);font-size:var(--t-base);font-weight:600}
.tableau td span{display:block;font-size:var(--t-sm);color:var(--txt-3)}
.tableau tbody tr:hover{background:rgba(212,184,81,.05)}
.tableau td:not(:first-child){font-weight:600;color:var(--txt)}
/* ── avis façon Google ── */
.note-g{display:flex;align-items:center;justify-content:center;gap:var(--e3);margin-top:var(--e4);flex-wrap:wrap}
.note-g .gg{font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em;
background:linear-gradient(90deg,#4285F4,#EA4335 32%,#FBBC05 62%,#34A853);
-webkit-background-clip:text;background-clip:text;color:transparent}
.note-g b{font-size:var(--t-lg);font-weight:700}
.note-g .nb{font-size:var(--t-sm);color:var(--txt-3)}
.etoiles{display:inline-flex;gap:2px;color:#FBBC05}
.avis-carrousel{position:relative}
.avis-piste{display:flex;gap:var(--e4);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-padding-left:var(--pad-x);padding:var(--e2) var(--e1) var(--e5);margin:0 calc(var(--e1) * -1);
scrollbar-width:none}
.avis-piste::-webkit-scrollbar{display:none}
.avis-g{margin:0;flex:0 0 auto;width:min(21rem,82vw);scroll-snap-align:start;
background:var(--noir-2);border:1px solid var(--ligne);border-radius:var(--r);padding:var(--e4) var(--e5)}
.avis-h{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e2)}
.avis-h .pastel{width:38px;height:38px;border-radius:50%;background:rgba(212,184,81,.18);color:var(--or);
display:grid;place-items:center;font-weight:700;font-size:var(--t-base);flex:none}
.avis-h b{display:block;font-size:var(--t-md);font-weight:600}
.avis-h span{display:block;font-size:var(--t-sm);color:var(--txt-3)}
/* ── défilement automatique + glisser (page avis dédiée) ── */
.avis-marquee{display:flex;flex-direction:column;gap:var(--e4);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-piste{display:flex;gap:var(--e4);width:100%;overflow-x:auto;scrollbar-width:none;
cursor:grab;user-select:none}
.marquee-piste::-webkit-scrollbar{display:none}
.marquee-piste:active{cursor:grabbing}
.avis-marquee .avis-g{width:20rem;flex:none;cursor:pointer;transition:border-color .2s}
.avis-marquee .avis-g:hover{border-color:#3E3E45}
.avis-marquee .avis-g blockquote{-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.marquee-nav{display:flex;gap:var(--e3);justify-content:center;margin-top:var(--e5)}
.marquee-fleche{width:44px;height:44px;border-radius:50%;background:var(--noir-2);border:1px solid var(--ligne);
color:var(--txt);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:.2s}
.marquee-fleche:hover{border-color:var(--or);color:var(--or)}
.marquee-fleche.actif{background:var(--or);border-color:var(--or);color:var(--or-txt)}
@media(max-width:54rem){.avis-marquee .avis-g{width:16rem}}
/* ── fiche avis agrandie ── */
.avis-modal-fond{position:fixed;inset:0;z-index:200;background:rgba(8,8,9,.72);backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;padding:var(--pad-x);opacity:0;transition:opacity .25s}
.avis-modal-fond.ouvert{opacity:1}
.avis-modal{position:relative;max-width:32rem;width:100%;background:var(--noir-2);border:1px solid var(--ligne);
border-radius:var(--r);padding:var(--e6);transform:translateY(10px) scale(.97);transition:transform .25s var(--ease)}
.avis-modal-fond.ouvert .avis-modal{transform:none}
.avis-modal blockquote{margin:var(--e3) 0 0;font-size:var(--t-base);color:var(--txt-2);line-height:1.65}
.avis-modal-fermer{position:absolute;top:var(--e4);right:var(--e4);width:34px;height:34px;border-radius:50%;
background:var(--noir-3);border:1px solid var(--ligne);color:var(--txt);font-size:1.2rem;line-height:1;
cursor:pointer;display:grid;place-items:center}
.avis-modal-fermer:hover{border-color:var(--or);color:var(--or)}
.avis-g blockquote{margin:var(--e2) 0 0;font-size:var(--t-sm);color:var(--txt-2);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.avis-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;
border-radius:50%;background:var(--noir);border:1px solid var(--ligne);color:var(--txt);
display:grid;place-items:center;cursor:pointer;transition:.2s;box-shadow:var(--ombre)}
.avis-nav:hover{border-color:var(--or);color:var(--or)}
.avis-nav--g{left:-14px}
.avis-nav--d{right:-14px}
@media(max-width:40rem){.avis-nav{display:none}}
/* ── sélecteur de langue ── */
.langues{display:flex;gap:var(--e1);align-items:center;margin-left:var(--e4)}
.langues a{
font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--txt-3);padding:var(--e1) var(--e2);border-radius:6px;transition:.2s;
}
.langues a:hover{color:var(--txt)}
.langues a[aria-current]{color:var(--or);background:rgba(212,184,81,.12)}
@media(max-width:54rem){.langues{margin-left:auto;margin-right:var(--e2)}}
/* ── sélecteur de langue : menu déroulant ── */
.langues{position:relative;display:flex;margin-left:var(--e3)}
.lg-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--ligne);
border-radius:8px;cursor:pointer;padding:6px 9px;line-height:1;transition:.2s}
.lg-btn:hover{border-color:var(--or)}
.lg-drap{font-size:1.15rem;line-height:1}
.lg-fleche{font-size:.72rem;color:var(--txt-3);transition:transform .2s}
.lg-btn[aria-expanded="true"] .lg-fleche{transform:rotate(180deg)}
.lg-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:11rem;
background:var(--noir-2);border:1px solid var(--ligne);border-radius:10px;
padding:6px;box-shadow:0 16px 38px rgba(0,0,0,.55)}
.lg-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
cursor:pointer;padding:9px 10px;border-radius:7px;color:var(--txt-2);
font-size:var(--t-md);font-weight:500;text-align:left;transition:.15s}
.lg-menu button span{font-size:1.1rem;line-height:1}
.lg-menu button:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.lg-menu button[aria-selected="true"]{color:var(--or);background:rgba(212,184,81,.12)}
@media(max-width:54rem){.langues{margin-left:auto;margin-right:var(--e2)}}
/* ── page contact : informations directes ── */
.infos-g{display:grid;gap:var(--e4);grid-template-columns:1fr;max-width:56rem;margin:0 auto}
@media(min-width:34rem){.infos-g{grid-template-columns:repeat(2,1fr)}}
.info-c{display:grid;gap:3px;justify-items:center;text-align:center;
background:var(--noir-2);border:1px solid var(--ligne);
border-radius:var(--r-sm);padding:var(--e5);transition:.25s var(--ease)}
a.info-c:hover{border-color:var(--or);transform:translateY(-3px)}
.info-c .rond{width:48px;height:48px;border-radius:50%;background:rgba(88,74,32,.34);color:var(--or);
display:grid;place-items:center;margin:0 auto var(--e3)}
.info-c b{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.info-c .v{font-size:var(--t-md);font-weight:600;color:var(--txt);word-break:break-word}
.info-c .d{font-size:var(--t-sm);color:var(--txt-3)}
/* ── page services : intro et détail des prestations ── */
/* carte "À propos" — sobre et très lisible, comme l'ancien site */
.apropos{max-width:48rem;margin:0 auto;background:var(--noir-2);
border:1px solid var(--ligne);border-radius:var(--r);padding:var(--e7) var(--e6)}
.apropos h2{margin:0 0 var(--e5);font-size:var(--t-2xl);font-weight:800;
letter-spacing:-.02em;line-height:1.2;color:var(--txt)}
.apropos h2 em{font-style:normal;color:var(--or)}
.apropos p{margin:0 0 var(--e5);font-size:var(--t-lg);line-height:1.8;color:#D9D7D1}
.apropos p:last-child{margin-bottom:0}
@media(max-width:34rem){
.apropos{padding:var(--e6) var(--e5);border-radius:var(--r-sm)}
.apropos h2{font-size:var(--t-xl);margin-bottom:var(--e4)}
.apropos p{font-size:var(--t-md);line-height:1.8}
}
.presta-g{display:grid;gap:var(--e5);grid-template-columns:1fr;max-width:58rem;margin:0 auto}
@media(min-width:46rem){.presta-g{grid-template-columns:repeat(2,1fr)}}
.presta{display:grid;grid-template-columns:auto 1fr;gap:var(--e4);align-items:start;
background:var(--noir-2);border:1px solid var(--ligne);border-radius:var(--r-sm);
padding:var(--e5);transition:.25s var(--ease)}
.presta:hover{border-color:var(--or);transform:translateY(-3px)}
.presta .rond{width:46px;height:46px;border-radius:50%;background:rgba(88,74,32,.34);
color:var(--or);display:grid;place-items:center;flex:none}
.presta .rond svg{width:21px;height:21px}
.presta h3{margin:0 0 var(--e2);font-size:var(--t-lg);font-weight:600}
.presta p{margin:0;font-size:var(--t-md);color:var(--txt-2);line-height:1.7}
/* ── bandeau cookies ── */
/* Le balisage est dans chaque page (#cookies) et la logique dans site.js.
Refuser et Accepter ont le même poids visuel, comme l'exige la CNIL. */
.cookies{position:fixed;left:var(--e4);right:var(--e4);bottom:var(--e4);z-index:200;
background:var(--noir-2);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:0 22px 60px rgba(0,0,0,.6)}
.cookies[hidden]{display:none}
@media(min-width:52rem){.cookies{left:auto;right:var(--e5);bottom:var(--e5);max-width:30rem}}
.cookies-in{display:flex;flex-direction:column;gap:var(--e4);padding:var(--e5)}
.cookies-in p{margin:0;font-size:var(--t-sm);line-height:1.7;color:var(--txt-2)}
.cookies-in a{color:var(--or);text-decoration:underline}
.cookies-btn{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.cookies-btn .btn{padding:12px 14px;font-size:var(--t-md);justify-content:center;
font-family:inherit}
.cookies-btn .btn--f{background:transparent;border-color:var(--ligne);color:var(--txt)}
.cookies-btn .btn--f:hover{border-color:var(--txt-3);background:rgba(255,255,255,.05)}
/* Tant que le bandeau est affiché, on réserve la place en bas de page :
sinon il recouvre les liens du pied de page et le menu mobile. */
.cookies-ouvert .ft{padding-bottom:200px}
@media(min-width:52rem){.cookies-ouvert .ft{padding-bottom:150px}}
/* Le bouton ne se déplace jamais. Il s'efface simplement le temps que le
visiteur réponde au bandeau, puis revient à sa place en bas à droite. */
.cookies-ouvert .wapp{opacity:0;pointer-events:none}
body:has(.nav.ouvert) .cookies{display:none}
/* mention enseigne commerciale */
.enseigne-in{margin-top:var(--e5)!important;padding-top:var(--e4);
border-top:1px solid var(--ligne);font-size:var(--t-sm)!important;
color:var(--txt-3)!important;line-height:1.7!important}
.enseigne-in b{color:var(--txt-2);font-weight:600}
/* Titre conservé pour Google et les lecteurs d'écran, invisible à l'écran.
Sans lui, la page d'accueil n'aurait plus de titre principal. */
.lecteur-seul{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
/* ═══ page d'accueil ═══ */
/* La capture est affichée telle quelle : ni flou, ni voile sombre.
L'ordinateur de la photo tombe pile entre la pastille du haut
et le bouton du bas, l'accroche se glisse entre les deux. */
.hero--vitrine .hero-fond img{opacity:1;filter:none;
object-fit:cover;object-position:center 45%}
.hero--vitrine::before{background:none}
.hero--vitrine{min-height:min(92vh,56rem);
display:flex;align-items:stretch;justify-content:center}
.hero--vitrine .in{width:100%;max-width:52rem;margin:0 auto;
display:flex;flex-direction:column;align-items:center;justify-content:space-between;
text-align:center;padding-inline:var(--pad-x);padding-block:4.5vh 6vh;gap:var(--e4)}
.hero--vitrine .pastille{margin:0;padding:var(--e4) var(--e7);
font-size:var(--t-lg);letter-spacing:.26em;font-weight:700;
color:var(--or);background:rgba(14,12,7,.62);
border:1px solid rgba(212,184,81,.5);
text-shadow:0 2px 16px rgba(0,0,0,.85)}
.hero--vitrine .devise{display:none}
/* accroche + bouton : un seul bloc, gardé en bas du bandeau */
.hero-bas{display:flex;flex-direction:column;align-items:center;
gap:var(--e5);width:100%}
.hero--vitrine .actions{margin:0;justify-content:center;width:100%;max-width:24rem;
align-self:center}
/* Le bouton doit rester d'un seul or : aucun liseré clair sur les bords,
uniquement un halo autour. Même rendu sur ordinateur et sur téléphone. */
.hero--vitrine .btn--or{width:100%;padding:var(--e4) var(--e7);white-space:nowrap;
font-size:var(--t-lg);font-weight:700;border-color:transparent;
background:var(--or-cta);
box-shadow:0 6px 22px rgba(233,189,66,.55),
0 16px 46px rgba(233,189,66,.45),
0 26px 80px rgba(233,189,66,.34)}
.hero--vitrine .btn--or:hover{border-color:transparent;
background:var(--or-cta-clair);
box-shadow:0 8px 26px rgba(233,189,66,.65),
0 20px 56px rgba(233,189,66,.55),
0 32px 96px rgba(233,189,66,.42)}
.hero-tel{display:block;margin:0;max-width:24ch;text-wrap:balance;
font-size:clamp(1.25rem,2.2vw,1.85rem);font-weight:800;line-height:1.25;
letter-spacing:-.015em;color:#fff;
text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 34px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,1)}
/* Ordinateur : même hiérarchie que sur téléphone — badge, titre, PC, bouton —
mais dans un cadrage large. Les repères sont en % de la hauteur, calés sur
la photo de fond : après recadrage, le portable y occupe 30 % → 79 %. Le
badge et l'accroche tiennent donc dans les 30 % du haut, et le bouton dans
la bande de bureau des 21 % du bas, juste sous le clavier. Les tailles de
texte suivent le vw, sans plancher en rem : les repères en % restent donc
valables sur toute la plage, des grands écrans aux fenêtres étroites. */
@media(min-width:34.0625rem){
/* L'image mesure 1672 x 941. Le cadre est un peu plus haut qu'avant
(1672 x 900) et l'image est calee vers le bas puis agrandie de 3 % depuis
son bord inferieur : le haut de la photo est donc legerement rogne,
l'ordinateur grandit et remonte dans la page, et le bureau reste degage
sous le clavier pour le bouton. Largeur inchangee, aucune deformation. */
.hero--vitrine{padding:0;min-height:0;height:auto;aspect-ratio:1672/900}
.hero--vitrine .hero-fond{background:#0C0C0E}
.hero--vitrine .hero-fond img{
position:absolute;inset:0;
width:100%;height:100%;max-width:none;
object-fit:cover;object-position:center 55%;
transform:scale(1.03);transform-origin:50% 100%;
-webkit-mask-image:none;mask-image:none}
.hero--vitrine .in{display:block;position:relative;max-width:none;
padding:0 var(--pad-x)}
.hero-bas{display:contents}
.hero--vitrine .pastille{position:absolute;top:5%;left:50%;
transform:translateX(-50%);margin:0;white-space:nowrap;
font-size:clamp(.6rem,1.12vw,1.02rem);
padding:clamp(.42rem,.95vw,.9rem) clamp(1rem,2.3vw,2.2rem)}
.hero-tel{position:absolute;top:15%;left:50%;transform:translateX(-50%);
width:min(88%,44rem);max-width:none;margin:0;
font-size:clamp(1rem,2.25vw,2.05rem);line-height:1.28}
/* Le bouton est cale sur le pave tactile du portable : son bord bas suit
l'arete avant du chassis (77 % de la hauteur du bandeau), il couvre donc
le trackpad au lieu de flotter sur le bureau. */
.hero--vitrine .actions{position:absolute;bottom:23%;left:50%;
transform:translateX(-50%);width:auto;max-width:none;margin:0}
/* Le bouton suit la largeur du bandeau : il garde donc toujours la meme
place sur le pave tactile, des ecrans larges aux petites tablettes. */
.hero--vitrine .btn--or{width:auto;
padding:clamp(.42rem,1.05vw,1.05rem) clamp(1rem,2.6vw,3rem);
font-size:clamp(.62rem,1.15vw,1.1rem)}
.hero--vitrine .descendre{display:none}
}
@media(max-width:34rem){
/* Téléphone : hiérarchie verticale stricte — badge, titre, ordinateur,
bouton. Les repères sont en % de la hauteur, donc calés sur la photo :
le titre reste toujours au-dessus de l'écran du portable. */
/* Meme principe : la section prend le ratio exact de l'image mobile
(1107 x 1713), donc l'image tient entiere, sans deformation. */
.hero--vitrine{min-height:0;height:auto;max-height:none;
aspect-ratio:1107/1713;align-items:stretch;padding:0}
.hero--vitrine .hero-fond{background:#0D0D0E}
.hero--vitrine .hero-fond img{
position:absolute;inset:0;transform:none;
width:100%;height:100%;max-width:none;
object-fit:cover;object-position:center center;
-webkit-mask-image:none;mask-image:none}
.hero--vitrine::before{background:none}
.hero--vitrine .in{display:block;position:relative;max-width:none;
padding:0 var(--pad-x)}
.hero-bas{display:contents}
.hero--vitrine .pastille{position:absolute;top:6%;left:50%;
transform:translateX(-50%);margin:0;white-space:nowrap;
padding:.58rem 1.1rem;font-size:.8rem;letter-spacing:.19em}
.hero-tel{position:absolute;top:17%;left:50%;transform:translateX(-50%);
width:min(92%,24rem);max-width:none;margin:0;
font-size:clamp(1.05rem,4.7vw,1.32rem);line-height:1.3}
.hero--vitrine .actions{position:absolute;bottom:11.5%;left:50%;
transform:translateX(-50%);width:min(84%,20rem);max-width:none;margin:0}
/* Sur la photo mobile, le bouton se pose sur un bureau clair : une ombre
noire discrete le detache du fond, en plus du halo dore conserve. */
.hero--vitrine .btn--or,
.hero--vitrine .btn--or:hover{width:100%;padding:.85rem 1.2rem;font-size:1rem;
box-shadow:0 3px 12px rgba(0,0,0,.5),
0 10px 28px rgba(0,0,0,.38),
0 8px 26px rgba(233,189,66,.42),
0 18px 50px rgba(233,189,66,.3)}
}
/* signature IVESIA, reliée au WhatsApp professionnel */
.ivesia{color:var(--txt-3);font-weight:600;letter-spacing:.02em;transition:color .2s}
.ivesia:hover{color:var(--or)}
/* Les fonds des pages intérieures proviennent de photos agrandies.
Un flou léger les transforme en ambiance et masque le manque de piqué. */
.hero--grand:not(.hero--vitrine) .hero-fond img{filter:saturate(.98) brightness(.94)}
.hero--grand:not(.hero--vitrine)::before{
background:
radial-gradient(105% 78% at 50% 48%, rgba(13,13,14,.5), rgba(13,13,14,.86) 62%, rgba(13,13,14,.96)),
linear-gradient(180deg, rgba(13,13,14,.7), transparent 32%, rgba(13,13,14,.88))}
/* ── accueil : devise, double bouton, flèche de descente ── */
.devise{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:var(--e4);margin:0 0 var(--e6);
font-size:var(--t-md);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:rgba(244,242,237,.9);text-shadow:0 2px 18px rgba(0,0,0,.75)}
.devise i{width:5px;height:5px;border-radius:50%;background:var(--or);opacity:.8;flex:none}
.descendre{position:absolute;left:50%;bottom:var(--e6);transform:translateX(-50%);
width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
border:1px solid rgba(244,242,237,.22);color:rgba(244,242,237,.75);
background:rgba(10,10,11,.35);backdrop-filter:blur(6px);
animation:flotte 2.4s var(--ease) infinite}
.descendre svg{width:19px;height:19px}
.descendre:hover{border-color:var(--or);color:var(--or)}
@keyframes flotte{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media(prefers-reduced-motion:reduce){.descendre{animation:none}}
@media(max-width:34rem){
.devise{gap:var(--e3);font-size:var(--t-sm);letter-spacing:.16em;margin-bottom:var(--e5)}
.descendre{display:none}
}
/* Avertissement de langue en tête des pages juridiques */
.avis-langue{margin:0 0 var(--e5);padding:11px 14px;border-left:3px solid var(--or);
background:rgba(212,184,81,.08);font-size:var(--t-sm);color:var(--txt-2);line-height:1.6}