/* Maison Alora — site public (refonte 31 oct. 2026) : clair, sobre, centré sur le produit */
:root{
  --bg:#f6f4ef;--surface:#fff;--ink:#171614;--soft:#4f4c46;--mute:#87827a;--line:#e3ded4;--line2:#d4cdc0;
  --accent:#8a6a32;--dark:#141311;--dark2:#1d1b18;--dink:#f2ede4;--dsoft:#b5ad9f;
  --head:"Inter Tight","Helvetica Neue",Arial,sans-serif;--body:"Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5vw,56px)}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:19px;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:19px;color:var(--soft);max-width:540px}
.label{font-size:14px;font-weight:600;color:var(--accent);margin:0 0 12px}
section{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:44px}.sec-head p{color:var(--soft);margin-top:14px}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font:600 15px/1 var(--body);padding:15px 22px;border-radius:8px;border:1px solid var(--ink);cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:10px 16px;font-size:14px}
.btn .ico{width:12px;height:12px}

/* en-tête */
header.top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px 0}
.logo img{height:52px;width:auto}
.nav{display:flex;gap:28px}.nav a{text-decoration:none;color:var(--soft);font-size:15px}.nav a:hover,.nav a.on{color:var(--ink)}
.top-r{display:flex;align-items:center;gap:18px}
.lng{font-size:14px;color:var(--mute);white-space:nowrap}.lng a{text-decoration:none;color:var(--mute)}.lng a:hover,.lng a.on{color:var(--ink)}.lng b{color:var(--ink);font-weight:600}
.nav .mob{display:none}

/* accueil */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:56px 0 80px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:24px;text-decoration:none}
.pill i{width:7px;height:7px;border-radius:50%;background:#5f8a55;display:inline-block}
.hero h1{margin-bottom:22px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.for{font-size:15px;color:var(--mute);margin-top:22px}
.device{justify-self:center;width:320px;border-radius:40px;background:#0d0c0b;padding:10px;box-shadow:0 30px 60px -28px rgba(20,19,17,.45),0 0 0 1px rgba(0,0,0,.06)}
.device iframe{display:block;width:100%;height:600px;border:0;border-radius:31px;background:#111}
.device-cap{text-align:center;font-size:14px;color:var(--mute);margin-top:14px}.device-cap a{color:var(--ink)}
.hero-shot{display:none}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:26px 24px 26px 0}.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts b{display:block;font-family:var(--head);font-size:22px;font-weight:600;letter-spacing:-.01em}.facts span{font-size:15px;color:var(--soft)}

.dark{background:var(--dark);color:var(--dink)}.dark .label{color:#c9a45c}.dark .sec-head p,.dark .rows p{color:var(--dsoft)}
.gets{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.rows{display:grid;gap:26px;margin-top:36px}.rows h3{margin-bottom:4px}.rows p{font-size:16px}
.shots{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:start}
.shots figure{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid #2b2823;box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
.shots figure:first-child{margin-top:48px}
.shots figcaption{position:absolute;left:12px;bottom:12px;font-size:13px;background:rgba(20,19,17,.82);color:var(--dink);padding:4px 10px;border-radius:6px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{border-top:2px solid var(--ink);padding-top:22px}.step .n{font-family:var(--head);font-weight:600;font-size:15px;color:var(--accent);margin-bottom:12px}
.step h3{margin-bottom:8px}.step p{color:var(--soft);font-size:16px}

.cmp-t{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:16px}
.cmp-t th,.cmp-t td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-t thead th{font-family:var(--head);font-size:18px;font-weight:600;background:#fbfaf7}.cmp-t thead th small{display:block;font:400 14px var(--body);color:var(--mute);margin-top:4px}
.cmp-t tbody th{font-weight:500;color:var(--soft);width:26%}
.cmp-t tr:last-child th,.cmp-t tr:last-child td{border-bottom:0}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ba>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.ba h3{margin-bottom:16px}.ba .tag{font-size:13px;font-weight:600;color:var(--mute);margin-bottom:6px;display:block}
.files{font:14px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--soft);background:#f8f6f2;border:1px solid var(--line);border-radius:8px;padding:12px 16px}
.files div{display:flex;justify-content:space-between}.files .z{color:#b4aea3}
.ba ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}.ba li{padding-left:28px;position:relative;color:var(--soft)}
.ba li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2px solid #5f8a55;border-bottom:2px solid #5f8a55;transform:rotate(-45deg)}
.ba .note{font-size:15px;color:var(--mute);margin-top:14px}

.why{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0;padding:0;list-style:none}
.why li{padding:18px 0;border-top:1px solid var(--line);color:var(--soft)}.why li b{color:var(--ink);font-weight:600;display:block}

.offer{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:44px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.offer p{color:var(--soft);margin-top:12px;max-width:620px}

.faq details,.faq .sec-head{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--head);font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--mute);font-weight:400}.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--soft);font-size:16px;max-width:70ch}

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.contact .lead{margin-top:14px}.contact .who-am{margin-top:24px;color:var(--soft)}.contact .who-am a{color:var(--ink)}
form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--soft)}
input,select,textarea{font:16px var(--body);color:var(--ink);background:#fbfaf7;border:1px solid var(--line2);border-radius:8px;padding:11px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;background:#fff}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
.msg{padding:12px 14px;border-radius:8px;font-size:15px}.msg.ok{background:#e9f1e6;color:#2f5a2b}.msg.err{background:#f6e4df;color:#8a2d1d}
form .btn{justify-self:start}

footer{border-top:1px solid var(--line);padding:44px 0 56px;font-size:15px;color:var(--soft)}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot img{height:34px;width:auto;margin-bottom:10px}.foot a{color:var(--soft);text-decoration:none}.foot a:hover{color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fine{margin-top:28px;font-size:13px;color:var(--mute)}

/* page Notre histoire */
.story{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start;padding:56px 0 88px}
.story p{color:var(--soft);font-size:18px;margin-top:18px;max-width:620px}.story .lead{font-size:20px;margin-top:22px}
.story figure{margin:0;position:sticky;top:30px}.story figure img{border-radius:12px;filter:grayscale(1)}
.story figcaption{margin-top:12px;font-weight:600}.story figcaption span{display:block;font-weight:400;color:var(--mute);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}.cards h3{margin-bottom:6px}.cards p{color:var(--soft);font-size:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.split p{color:var(--soft)}.split p+p{margin-top:14px}

@media (max-width:1000px){
  header.top{flex-wrap:wrap;row-gap:12px}.nav{order:3;width:100%;gap:22px;border-top:1px solid var(--line);padding-top:12px}
  .hero,.gets,.contact,.story,.split{grid-template-columns:1fr;gap:40px}
  .device{display:none}.device-cap{display:none}
  .hero-shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
  .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){padding-left:0;border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .steps,.cards{grid-template-columns:1fr}
  .story figure{position:static;max-width:320px}
}
@media (max-width:640px){
  body{font-size:16px}section{padding:64px 0}.hero{padding:28px 0 56px}
  .top .btn{display:none}.logo img{height:34px}.nav{gap:0;justify-content:space-between}.nav a{font-size:14px}.nav .opt{display:none}.nav .mob{display:inline}
  .ba,.why,.two{grid-template-columns:1fr}.offer{grid-template-columns:1fr;padding:28px}
  .cmp-t{font-size:15px}.cmp-t th,.cmp-t td{padding:14px}.cmp-t tbody th{width:auto}
  .cmp-t thead{display:none}.cmp-t tr{display:grid;grid-template-columns:1fr 1fr}.cmp-t tbody th{grid-column:1/-1;padding-bottom:0;border-bottom:0;font-size:13px;color:var(--mute);font-weight:600}
  .cmp-t td{font-size:15px}.cmp-t td::before{content:attr(data-h);display:block;font-size:12px;color:var(--mute);font-weight:600;margin-bottom:2px}
  .facts div{padding:20px 14px 20px 0}.facts div+div{padding-left:14px}.facts b{font-size:19px}
  .shots{grid-template-columns:1fr 1fr;gap:10px}.shots figure:first-child{margin-top:24px}
}

/* photo du téléphone (1 nov. 2026) */
.band{margin:64px auto 0;max-width:840px;border-radius:12px;overflow:hidden}.band img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%}
@media (max-width:1000px){.band{display:none}}

.duo2{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}.duo2 h2{margin-bottom:18px}.duo2 p{color:var(--soft);max-width:520px;margin-bottom:14px}.duo2 .btn{margin-top:12px}
.duo2 .ph{margin:0;border-radius:12px;overflow:hidden}.duo2 .ph img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
@media (max-width:1000px){.duo2{grid-template-columns:1fr;gap:28px}.duo2 .ph{display:none}}
.kick{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
/* apparitions au défilement (js/site.js) */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv-on .rv.in{opacity:1;transform:none}
.btn{transition:background .2s,color .2s,border-color .2s,transform .2s}.btn:hover{transform:translateY(-1px)}
.shots figure img,.duo2 .ph img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.duo2 .ph:hover img{transform:scale(1.02)}
.story figure{max-width:360px;justify-self:end}
@media (max-width:1000px){.story figure{justify-self:start;max-width:280px}}
.occ{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}.occ>div{padding:22px 0;border-top:1px solid var(--line)}.occ h3{margin-bottom:6px}.occ p{color:var(--soft);font-size:16px}
@media (max-width:1000px){.occ{grid-template-columns:1fr 1fr}}@media (max-width:640px){.occ{grid-template-columns:1fr}}
/* haut de page sur cellulaire (1 nov. 2026) : plus serré, boutons pleine largeur, étiquette sur une ligne */
@media (max-width:640px){
  .hero{padding:20px 0 44px}
  .kick{font-size:11.5px;letter-spacing:.08em;margin-bottom:14px}
  .hero h1{font-size:33px;line-height:1.1;margin-bottom:16px}
  .hero .lead{font-size:17px;line-height:1.55}
  .acts{flex-direction:column;gap:10px;margin-top:24px}
  .acts .btn{width:100%;justify-content:center;padding:15px 18px}
  .for,.call{font-size:14px;margin-top:16px;text-align:center}
  .hero-shot{margin-top:4px}
}
.shot-cap{display:none}
/* cellulaire : titre, photo, puis le texte et les boutons */
@media (max-width:1000px){
  .hero{display:flex;flex-direction:column;gap:0}
  .hero>div{display:contents}
  .hero .kick{order:1}.hero h1{order:2}.hero-shot{order:3;margin:6px 0 0}.shot-cap{display:block;order:4;font-size:13.5px;color:var(--mute);margin:10px 0 0}
  .hero .lead{order:5;margin-top:22px}.hero .acts{order:6}.hero .for,.hero .call{order:7}
  .hero .pill{order:0}
}
@media (max-width:640px){.hero .acts{width:100%;align-self:stretch}.hero .acts .btn{width:100%}.hero .kick{text-align:left}.hero .for,.hero .call{text-align:center;align-self:stretch}}
@media (max-width:1000px){.hero .kick{align-self:stretch;text-align:left}}
.duo2 .ph figcaption{font-size:14px;color:var(--mute);margin-top:10px}
.duo2 .ph{overflow:visible}.duo2 .ph picture{display:block;border-radius:12px;overflow:hidden}

/* Résidences : thèmes du livre, courriel exemple */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.themes li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 20px 22px}
.themes b{display:block;font-weight:600;color:var(--ink);margin-bottom:8px}
.themes span{display:block;font-size:15px;color:var(--soft);font-style:italic;line-height:1.5}
.themes .q{font-style:normal;font-size:12.5px;color:var(--mute);margin-top:12px;letter-spacing:.02em}
@media (max-width:1000px){.themes{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.themes{grid-template-columns:1fr}}
.mail{background:#fff;color:#22231f;border-radius:12px;padding:0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);max-width:460px;justify-self:center;width:100%}
.mail .mh{padding:14px 20px;border-bottom:1px solid #e9e6de;font-size:13px;color:#6f716a;line-height:1.6}
.mail .mh b{color:#22231f;font-weight:600}
.mail .mb{padding:24px 22px 26px}
.mail .mb h4{font:600 20px/1.3 var(--head,inherit);margin:0 0 10px;color:#22231f}
.mail .mb p{font-size:15px;color:#4a4c45;margin:0 0 16px;line-height:1.55}
.mail .tr{display:flex;align-items:center;gap:14px;border:1px solid #e9e6de;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.mail .tr i{flex:none;width:38px;height:38px;border-radius:50%;background:#22231f;position:relative}
.mail .tr i::after{content:"";position:absolute;left:15px;top:12px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.mail .tr div{font-size:14px;color:#6f716a;line-height:1.4}.mail .tr div b{display:block;color:#22231f;font-size:15px}
.mail .cta{display:inline-block;background:#22231f;color:#fff;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;text-decoration:none}
.mail .sig{font-size:13px;color:#8b8d85;margin:18px 0 0}
.mail-cap{font-size:14px;color:var(--dsoft);text-align:center;margin-top:12px}
.trio{grid-template-columns:repeat(3,1fr)}@media (max-width:1000px){.trio{grid-template-columns:1fr 1fr}}@media (max-width:640px){.trio{grid-template-columns:1fr}}
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.steps.four{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps.four{grid-template-columns:1fr}}
@media (max-width:1000px){.duo2 .ph.ph-m{display:block}}
.band-r{max-width:none;margin-top:48px}.band-r img{aspect-ratio:2/1;object-position:50% 35%}
.logo img{height:62px}
@media (max-width:640px){.logo img{height:40px}}

.occ.quad{grid-template-columns:repeat(4,1fr);gap:0 32px}
@media (max-width:1000px){.occ.quad{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.occ.quad{grid-template-columns:1fr}}
/* Résidences : bouton « écouter » sur la section sombre (4 nov. 2026) */
.dark .btn{background:#fff;color:var(--ink);border-color:#fff}.dark .btn:hover{background:#efe9dc}
/* Résidences : photo du livre (portrait) dans la section du coin (4 nov. 2026) */
.duo2 .ph.ph-main img{aspect-ratio:4/4.4;object-position:50% 38%}
/* Légende sous la grande photo (4 nov. 2026) */
.band{overflow:visible}.band picture{display:block;border-radius:12px;overflow:hidden}.band figcaption{font-size:14px;color:var(--mute);margin-top:10px}
/* Résidences : quatre gains, deux par ligne (4 nov. 2026) */
.occ.duo{grid-template-columns:1fr 1fr;gap:0 56px}.occ.duo p{font-size:17px}@media (max-width:640px){.occ.duo{grid-template-columns:1fr}}

/* Maison Alora (nov. 2026) : logo horizontal, plus large que l'ancien */
.logo img.ma-logo{height:40px;width:auto}.foot img.ma-logo{height:30px;width:auto}
@media (max-width:640px){.logo img.ma-logo{height:27px}}