/* ═══════════════════════════════════════════════════════════
   ONDORAË — Pascaline Aucourt · La Réunion
   Charte relevée au pixel sur SA carte de visite :
   aubergine #512C55, corail-doré #DE9356, lavande #7A5D7F,
   teal #82A4AF (éclairci pour le petit texte), crème rosé #E5D5D2.
   Surface claire FROIDE (lavande pâle) — jamais de crème chaud.
   Typo : Outfit (titres) + Manrope (corps).
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Outfit';src:url('../fonts/outfit.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope.woff2') format('woff2-variations');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --aubergine:#512C55;      /* SA couleur de fond */
  --aubergine-2:#3E2142;    /* profondeur */
  --corail:#DE9356;         /* SON accent — aplats et gros titres */
  --corail-fonce:#8F4F1F;   /* le même accent, lisible en petit sur clair (5,7:1) */
  --lavande:#7A5D7F;
  --lavande-clair:#C9B6CC;  /* texte secondaire sur aubergine (6,0:1) */
  --teal:#9FC0CA;           /* éclairci depuis #82A4AF pour passer AA */
  --jour:#F3F1F6;           /* surface claire froide */
  --blanc:#FFFFFF;
  --encre:#2E1A31;
  --gris:#5F5266;
  --fil:rgba(255,255,255,.16);
  --fil-j:rgba(46,26,49,.13);
  --marge:clamp(20px,5vw,72px);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:74px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--jour);color:var(--encre);
  font-family:'Manrope',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(1rem,.28vw + .94rem,1.0625rem);font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:'Outfit',Verdana,sans-serif;font-weight:500;letter-spacing:-.012em;line-height:1.18}
p{margin:0}
.sec p + p,.contact p + p{margin-top:1em}
ul,ol{margin:0;padding:0;list-style:none}

.saut{position:absolute;left:-9999px;background:var(--aubergine);color:#fff;padding:12px 18px;z-index:200}
.saut:focus{left:8px;top:8px}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--corail);outline-offset:3px}
.jour-sec :where(a,button):focus-visible,.sec :where(a,button):focus-visible{outline-color:var(--aubergine)}
.nuit-sec :where(a,button):focus-visible,.contact :where(a,button,input,select,textarea):focus-visible{outline-color:var(--corail)}

/* ═══ marque + barre ═══ */
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marque-logo{width:34px;height:auto}
.marque-txt{display:grid;line-height:1.25}
.marque b{font-family:'Comfortaa',sans-serif;font-weight:600;font-size:1.12rem;letter-spacing:.01em;color:var(--jauneor)}
.marque-txt > span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jauneor)}

.barre{position:sticky;top:0;z-index:100;background:rgba(81,44,85,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--fil)}
.barre-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:clamp(12px,3vw,30px);padding:11px var(--marge)}
.nav{display:flex;gap:clamp(10px,1.6vw,22px);margin-left:auto}
.nav a{font-size:.875rem;font-weight:500;text-decoration:none;color:var(--lavande-clair);padding:5px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:#fff;border-bottom-color:var(--corail)}
@media (max-width:1020px){.nav{display:none}.barre .btn{display:none}}
#burger{display:none;margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;place-items:center;cursor:pointer}
@media (max-width:1020px){#burger{display:grid}}
#burger svg{width:26px;height:26px}
#menu-mobile{position:fixed;inset:0;top:66px;z-index:95;background:rgba(62,33,66,.985);backdrop-filter:blur(10px);overflow:auto}
#menu-mobile nav{display:flex;flex-direction:column;padding:18px var(--marge) 40px}
#menu-mobile a{font-family:'Outfit',sans-serif;font-size:1.22rem;font-weight:400;color:#fff;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--fil)}
#menu-mobile a:hover{color:var(--corail)}
.menu-ouvert{overflow:hidden}

/* ═══ boutons — texte aubergine sur corail (4,57:1), jamais blanc ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Manrope',sans-serif;font-size:.9375rem;font-weight:600;
  text-decoration:none;padding:12px 24px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn-corail{background:var(--corail);color:var(--aubergine)}
.btn-corail:hover{background:#EDA96E}
.btn-ligne{border-color:var(--fil);color:#fff}
.btn-ligne:hover{border-color:var(--corail);color:var(--corail)}
.btn-grand{padding:15px 32px;font-size:1rem}

/* ═══ héros ═══ */
.heros{position:relative;min-height:100dvh;margin-top:-74px;display:flex;align-items:flex-end;overflow:hidden;background:var(--aubergine)}
@media (max-width:760px){.heros{margin-top:-66px}}
.heros-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.heros-voile{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(30,14,32,.20) 0%,rgba(30,14,32,0) 24%,rgba(46,20,49,.10) 62%,rgba(46,20,49,.50) 100%)}
.heros-corps{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;padding:clamp(112px,16vh,168px) var(--marge) clamp(38px,6vh,64px);color:#fff}
@media (max-width:760px){.heros-corps{padding-bottom:calc(clamp(38px,6vh,64px) + 82px)}}
.oeil-clair{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.19em;color:var(--teal)}
.heros .oeil-clair{text-shadow:0 1px 14px rgba(46,20,49,.92)}
.oeil{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.19em;color:var(--corail-fonce)}
.heros h1{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(2.1rem,5.4vw,4rem);font-weight:400;color:#fff;text-shadow:0 2px 26px rgba(46,26,49,.5)}
.heros-sig{margin-top:6px;font-family:'Outfit',sans-serif;font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--corail);text-shadow:0 2px 20px rgba(46,26,49,.6)}
.heros-sig em{font-style:normal;font-weight:600}
.heros-sous{margin-top:clamp(16px,2.4vh,24px);color:#F0E9F1;max-width:46ch;text-wrap:pretty;text-shadow:0 1px 18px rgba(46,26,49,.75)}
.heros-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,34px)}

/* ═══ sections ═══ */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vh,110px) var(--marge)}
h2{font-size:clamp(1.55rem,3vw,2.4rem);margin-top:12px;color:var(--encre)}
.lede{margin-top:clamp(12px,1.8vh,20px);color:var(--gris);max-width:62ch}
.tete{max-width:66ch}
.tete-centre{margin:0 auto;text-align:center}
.tete-centre .lede{margin-left:auto;margin-right:auto;max-width:50ch;text-wrap:pretty}

.nuit-sec{background:var(--aubergine);color:#fff}
.nuit-sec h2,.nuit-sec h3{color:#fff}
.nuit-sec .lede,.nuit-sec p{color:var(--lavande-clair)}
.jour-sec{background:var(--jour)}
.contact{background:linear-gradient(180deg,var(--aubergine) 0%,var(--aubergine-2) 100%);color:#fff}

/* ═══ les deux ailes ═══ */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(30px,4vh,46px)}
@media (max-width:820px){.deux{grid-template-columns:1fr}}
.aile{background:var(--blanc);border:1px solid var(--fil-j);border-radius:18px;padding:clamp(24px,3vw,38px);position:relative;overflow:hidden}
.aile::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--corail),var(--lavande))}
.aile--creative::before{background:linear-gradient(90deg,var(--lavande),var(--teal))}
.aile-nom{font-family:'Outfit',sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;color:var(--aubergine)}
.aile-nom span{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lavande);margin-top:4px}
.aile-devise{margin-top:10px;font-size:.9375rem;font-weight:600;color:var(--corail-fonce);letter-spacing:.02em}
.aile p:not(.aile-nom):not(.aile-devise){margin-top:14px;color:var(--gris)}
.lien-fleche{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:600;font-size:.9375rem;color:var(--aubergine);text-decoration:none;border-bottom:1px solid var(--corail);padding-bottom:2px;transition:gap .2s}
.lien-fleche::after{content:'→'}
.lien-fleche:hover{gap:12px}

/* ═══ split image / texte ═══ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:stretch}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split--inv .split-vue{order:2}
@media (max-width:880px){.split--inv .split-vue{order:0}}
.split-vue{margin:0;border-radius:18px;overflow:hidden;min-height:340px}
.split-vue img{width:100%;height:100%;object-fit:cover}

/* ═══ offres ═══ */
.offres{margin-top:clamp(22px,3vh,32px);display:grid;gap:2px}
.offres li{padding:20px 0;border-top:1px solid var(--fil)}
.offres--jour li{border-top-color:var(--fil-j)}
.offres h3{font-size:1.1rem;font-weight:500}
.offres--jour h3{color:var(--aubergine)}
.offres p{margin-top:7px;font-size:.9375rem}
.offres--jour p{color:var(--gris)}
.bientot h3 span{display:inline-block;margin-left:9px;vertical-align:middle;font-family:'Manrope',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--aubergine);background:var(--teal);padding:3px 9px;border-radius:999px}
.note-douce{margin-top:22px;font-size:.9375rem;font-style:italic;color:var(--gris)}
.nuit-sec .note-douce{color:var(--lavande-clair)}
.acts{margin-top:26px}

/* ═══ bande citation ═══ */
.bande{position:relative;overflow:hidden;min-height:min(58vh,480px);display:grid;place-items:center;background:var(--aubergine-2)}
.bande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.bande-voile{position:absolute;inset:0;background:radial-gradient(62% 82% at 50% 55%,rgba(62,33,66,.44),rgba(62,33,66,.62) 74%),linear-gradient(180deg,rgba(62,33,66,.42),rgba(62,33,66,.46))}
.bande-mot{position:relative;z-index:2;margin:0;max-width:56ch;padding:clamp(48px,8vh,90px) var(--marge);text-align:center;color:#fff}
.bande-mot p{font-family:'Outfit',sans-serif;font-size:clamp(1.15rem,2.4vw,1.65rem);font-weight:300;line-height:1.5;font-style:italic}
.bande-mot footer{margin-top:16px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}

/* ═══ les trois pas ═══ */
.pas{margin-top:clamp(30px,4vh,46px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,26px)}
@media (max-width:820px){.pas{grid-template-columns:1fr}}
.pas li{background:var(--blanc);border:1px solid var(--fil-j);border-radius:16px;padding:26px 26px 28px;box-shadow:0 1px 3px rgba(46,26,49,.05)}
.pas b{display:block;font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:300;color:var(--corail-fonce);letter-spacing:.02em}
.pas h3{margin-top:12px;font-size:1.08rem;font-weight:500;color:var(--aubergine)}
.pas p{margin-top:8px;font-size:.9375rem;color:var(--gris)}

/* ═══ contact ═══ */
.contact-in{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vh,110px) var(--marge)}
.contact h2{color:#fff}
.contact .lede{color:var(--lavande-clair)}
.contact-coeur{max-width:900px;margin:0 auto}
.coord{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px);margin-top:clamp(30px,4vh,44px)}
@media (max-width:820px){.coord{grid-template-columns:1fr}}
.coord-un{display:grid;gap:6px;padding:24px 20px;border:1px solid rgba(255,255,255,.30);border-radius:16px;text-decoration:none;text-align:center;justify-items:center;background:rgba(255,255,255,.05);transition:border-color .2s,background .2s,transform .2s}
a.coord-un:hover{border-color:var(--corail);background:rgba(255,255,255,.09);transform:translateY(-2px)}
.coord-un span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.coord-un b{font-family:'Outfit',sans-serif;font-size:1.12rem;font-weight:500;color:#fff;overflow-wrap:anywhere}
.coord-un i{font-style:normal;font-size:.875rem;color:var(--lavande-clair)}

.mot{margin-top:clamp(18px,2.4vh,26px);max-width:none;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  padding:clamp(26px,3.4vw,40px);box-shadow:0 18px 50px rgba(30,14,32,.28)}
.ch-rang{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.ch-rang{grid-template-columns:1fr}}
.ch{display:grid;gap:7px;margin-top:14px}
.ch-rang .ch{margin-top:0}
.ch label{font-size:.875rem;font-weight:600;color:#fff}
.ch-opt{font-weight:400;color:var(--lavande-clair)}
.ch input,.ch select,.ch textarea{width:100%;font:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.42);border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s}
.ch textarea{resize:vertical}
.ch input::placeholder,.ch textarea::placeholder{color:rgba(240,233,241,.72)}
.ch input:focus,.ch select:focus,.ch textarea:focus{border-color:var(--corail);background:rgba(255,255,255,.11)}
.ch select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C9B6CC' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px}
.ch select option{color:var(--encre);background:#fff}
.mot .btn{display:flex;width:100%;max-width:340px;margin:24px auto 0}
.mot .btn:disabled{cursor:wait;opacity:.72}
.ch-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ch-confidentialite{max-width:58ch;margin:14px auto 0;text-align:center;font-size:.8125rem;color:var(--lavande-clair)}
.ch-confidentialite a{color:#fff;text-underline-offset:3px}
.ch-avis{margin-top:16px;font-size:.9375rem;color:#B8E6C6;text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.ch-avis--ko{color:#F5B7A8}
.ch-copier{display:flex;width:100%;max-width:340px;margin:12px auto 0}

/* ═══ pied ═══ */
.pied{background:var(--aubergine-2);color:var(--lavande-clair)}
.pied-in{max-width:var(--max);margin:0 auto;padding:clamp(44px,6vh,72px) var(--marge) clamp(28px,4vh,44px);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(22px,3vw,42px)}
@media (max-width:880px){.pied-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied-in{grid-template-columns:1fr}}
.pied-logo{width:110px;height:auto}
.pied p{margin-top:14px;font-size:.9375rem}
.pied h3{font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--corail)}
.pied ul{margin-top:14px;display:grid;gap:9px;font-size:.9375rem}
.pied a{text-decoration:none;transition:color .2s}
.pied a:hover{color:var(--corail)}
.pied-bas{border-top:1px solid var(--fil)}
.pied-bas div{max-width:var(--max);margin:0 auto;padding:18px var(--marge);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.8125rem;color:var(--lavande-clair)}
.pied-bas a{text-decoration:underline;text-underline-offset:3px}

/* ═══ quai mobile ═══ */
.quai{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(62,33,66,.96);backdrop-filter:blur(10px);border-top:1px solid var(--fil);transition:transform .3s}
.quai .btn{flex:1}
.quai.parti{transform:translateY(120%)}
@media (max-width:760px){.quai{display:flex}.pied-bas div{padding-bottom:calc(18px + 70px + env(safe-area-inset-bottom))}}

/* ═══ apparitions ═══ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
.no-fx .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ═══ Lyraë : sa propre voix (italique déliée + teal), comme sur sa carte ═══ */
.aile-nom--lyrae em{font-style:italic;font-weight:300;letter-spacing:.02em}
.aile-nom--lyrae span{color:var(--lavande)}
.aile--creative .aile-devise{color:#4F7480}
.aile-sceau,.oeil-sceau,.pied-sceau{display:inline-block;object-fit:cover;border-radius:7px;background:var(--aubergine)}
.aile-sceau{width:34px;height:34px;vertical-align:-8px;margin-right:10px}
.oeil--lyrae{display:flex;align-items:center;color:#4F7480}
.oeil-sceau{width:24px;height:24px;margin-right:8px;border-radius:6px}
.pied-h4--lyrae{display:flex;align-items:center}
.pied-sceau{width:20px;height:20px;margin-right:7px;border-radius:5px;background:var(--aubergine-2)}

/* ═══ questions + tarifs ═══ */
.deux--large{grid-template-columns:1.25fr 1fr}
@media (max-width:820px){.deux--large{grid-template-columns:1fr}}
.cadre{background:var(--blanc);border:1px solid var(--fil-j);border-radius:18px;padding:clamp(24px,3vw,38px)}
.cadre--accent{background:linear-gradient(155deg,#EDE6F0,#DCE8EC);border-color:rgba(79,116,128,.28);display:grid;align-content:center;gap:18px}
.qs{margin-top:18px;display:grid;gap:2px}
.qs li{padding:13px 0;border-top:1px solid var(--fil-j);font-family:'Outfit',sans-serif;font-size:1.02rem;font-weight:400;color:var(--aubergine)}
.cadre-note{margin-top:20px;font-size:.9375rem;color:var(--gris)}
.cadre-gros{font-family:'Outfit',sans-serif;font-size:clamp(1.1rem,2vw,1.35rem);font-weight:400;line-height:1.4;color:var(--aubergine)}
.cadre--accent .btn{justify-self:start}

/* le panneau de contact se resserre encore sous 640 px */
@media (max-width:640px){.mot{padding:22px 18px;border-radius:18px}}

/* la colonne visuelle de Lyraë porte deux plans : le geste, puis les pièces */
.split-vue--duo{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-rows:auto 1fr;background:none;border-radius:0;overflow:visible}
.split-vue--duo img{border-radius:18px}
.split-vue--duo{min-height:0}
/* jamais height:100% ici : Safari le combine mal avec aspect-ratio et l'image déborde sur le texte */
.split-vue--duo img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
@media (max-width:880px){.split-vue--duo{grid-template-columns:1fr 1fr;grid-template-rows:none}}
@media (max-width:560px){.split-vue--duo{grid-template-columns:1fr}}

/* deux sections claires qui se suivent ne cumulent pas leurs marges */
#questions-tarifs{padding-top:0}

/* « qui suis-je » : la colonne texte est plus courte que l'image, on les centre */
.split--centre{align-items:center}
.split--centre .split-vue{min-height:0}

/* ═══ page des mentions légales ═══ */
.legal{max-width:78ch}
.legal h1{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:12px;color:var(--encre)}
.legal h2{font-size:clamp(1.1rem,2vw,1.35rem);margin-top:clamp(30px,4vh,44px);color:var(--aubergine)}
.legal p{margin-top:14px;color:var(--gris)}
.legal p strong{color:var(--encre)}
.legal a{color:var(--corail-fonce);text-decoration:underline;text-underline-offset:3px}
.legal-liste{margin-top:18px;display:grid;gap:2px}
.legal-liste li{display:grid;grid-template-columns:210px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--fil-j)}
@media (max-width:560px){.legal-liste li{grid-template-columns:1fr;gap:3px}}
.legal-liste b{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aubergine)}
.legal-liste span{color:var(--gris)}
.a-completer{font-style:italic;color:var(--corail-fonce)}
.legal-retour{margin-top:clamp(34px,5vh,54px)}
.lien-doux{color:var(--corail-fonce);text-decoration:underline;text-underline-offset:3px}
.nuit-sec .lien-doux{color:var(--teal)}

.barre-in--simple .btn{margin-left:auto}

/* ═══ retours Pascaline 29/07 — la porte d'entrée ═══ */
@font-face{font-family:'Comfortaa';src:url('../fonts/comfortaa.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}
:root{--jauneor:#F2B04A}
.mot-ondorae{font-family:'Comfortaa',sans-serif;font-weight:600;letter-spacing:.01em}
.heros-corps--porte{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.heros .heros-sig--porte{margin-top:clamp(10px,2vh,22px);font-family:'Comfortaa',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.5rem);color:#fff;position:relative;line-height:1.15;
  text-transform:none;letter-spacing:.02em;
  text-shadow:0 0 18px rgba(255,233,192,.85),0 0 44px rgba(242,176,74,.65),0 0 110px rgba(242,176,74,.45),0 2px 26px rgba(46,22,50,.5)}
.heros-sig--porte::before{content:'';position:absolute;inset:-28% -18%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,176,74,.45),rgba(242,176,74,.16) 55%,transparent 80%)}
.heros-sig--porte em{font-style:normal;color:var(--jauneor)}
.heros-corps--porte .oeil-clair{text-shadow:0 1px 14px rgba(46,22,50,.75)}
.heros-corps--porte .heros-act{margin-top:clamp(20px,3.4vh,34px);justify-content:center}
/* le gong scintille — un cycle de 20 s, quatre étoiles brèves en cascade */
.heros-etoiles{position:absolute;inset:0;z-index:1;pointer-events:none}
.etoile{position:absolute;width:26px;height:26px;opacity:0;
  background:radial-gradient(circle,#FFF3D8 0%,rgba(255,233,192,.95) 20%,transparent 46%);
  filter:drop-shadow(0 0 12px rgba(255,228,168,1)) drop-shadow(0 0 34px rgba(242,176,74,.75));
  animation:scintille 12s infinite}
.etoile--1{left:38%;top:36%;animation-delay:-6s}
.etoile--2{left:57%;top:31%;animation-delay:-5.4s}
.etoile--3{left:61%;top:66%;animation-delay:-4.8s}
.etoile--4{left:37%;top:72%;animation-delay:-4.2s}
.etoile::before,.etoile::after{content:'';position:absolute;left:50%;top:50%;background:linear-gradient(180deg,transparent,#FFE9C0,transparent)}
.etoile::before{width:3px;height:52px;transform:translate(-50%,-50%)}
.etoile::after{width:52px;height:3px;transform:translate(-50%,-50%)}
@keyframes scintille{
  0%,75%{opacity:0;transform:scale(.35) rotate(0deg)}
  79%{opacity:1;transform:scale(1.25) rotate(22deg)}
  86%{opacity:.95;transform:scale(1) rotate(44deg)}
  93%{opacity:.7;transform:scale(.85) rotate(60deg)}
  98%,100%{opacity:0;transform:scale(.35) rotate(72deg)}
}
@media (max-width:767px){
  .etoile:nth-child(1){left:30%;top:30%}
  .etoile:nth-child(2){left:69%;top:26%}
  .etoile:nth-child(3){left:73%;top:60%}
  .etoile:nth-child(4){left:27%;top:66%}
}
@media (prefers-reduced-motion:reduce){.etoile{animation:none;opacity:0}}
.univers-resa{margin-top:18px}

/* le bouton de résa posé sur section claire */
.univers-resa .btn{border-color:var(--corail-fonce);color:var(--corail-fonce)}
.univers-resa .btn:hover{background:var(--corail-fonce);color:#fff}

/* ═══ point 6 — on entre par la lumière ═══ */
/* sur la porte, la barre se fait oublier : transparente, posée sur l'image */
.barre{transition:background .45s ease,box-shadow .45s ease}
.barre--porte{background:rgba(46,20,49,.82);backdrop-filter:blur(8px);box-shadow:none}
.barre--porte .nav a{color:#fff;text-shadow:0 1px 10px rgba(46,22,50,.65)}
.barre--porte .marque b,.barre--porte .marque-txt > span{text-shadow:0 1px 10px rgba(46,22,50,.6)}
/* le seuil : un voile de lumière dorée qu'on traverse */
.seuil{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 90% 75% at 50% 62%,rgba(255,236,198,.98) 0%,rgba(248,205,128,.96) 45%,rgba(242,176,74,.92) 100%);
  transition:opacity .5s ease}
.seuil--lent{transition:opacity 2.2s ease}
.seuil--passe{opacity:1}
.seuil--sort{opacity:0;transition:opacity 1.6s ease}
/* l'accueil s'éclaire pour recevoir : lueur dorée brève sur « Bienvenue chez ondoraë » */
@keyframes accueil-brille{
  0%{text-shadow:0 0 0 rgba(242,176,74,0)}
  30%{text-shadow:0 0 26px rgba(242,176,74,.85),0 0 70px rgba(242,176,74,.45)}
  100%{text-shadow:0 0 0 rgba(242,176,74,0)}
}
.accueil-brille{animation:accueil-brille 3s ease .4s both}
/* la barre mobile n'existe pas sur la porte */
.quai--retenu{transform:translateY(110%);transition:transform .4s ease}
@media (prefers-reduced-motion:reduce){.seuil{display:none}.accueil-brille{animation:none}}

/* ═══ la porte s'ouvre : deux battants, la lumière s'engouffre ═══ */
.portes{position:fixed;inset:0;z-index:320;perspective:1500px;perspective-origin:50% 50%}
.portes[hidden]{display:none}
.porte-battant{position:absolute;top:0;bottom:0;width:50.05%;overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
  transition:transform 2.4s cubic-bezier(.55,.03,.16,1)}
.porte-battant--g{left:0;transform-origin:left center}
.porte-battant--d{right:0;transform-origin:right center}
.porte-scene{position:absolute;top:0;height:100%;width:199.8%}
.porte-battant--g .porte-scene{left:0}
.porte-battant--d .porte-scene{right:0}
.porte-scene img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* le voile du héros rejoué sur chaque battant, + l'ombre du chant de la porte */
.porte-scene i{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,14,32,.46) 0%,rgba(30,14,32,0) 26%,rgba(46,20,49,.18) 66%,rgba(46,20,49,.58) 100%)}
.porte-battant::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.4s ease}
.porte-battant--g::after{background:linear-gradient(90deg,transparent 55%,rgba(30,14,32,.55) 100%)}
.porte-battant--d::after{background:linear-gradient(270deg,transparent 55%,rgba(30,14,32,.55) 100%)}
/* ouverture : les battants pivotent vers l'intérieur de la maison */
.portes--ouvre .porte-battant--g{transform:rotateY(-82deg)}
.portes--ouvre .porte-battant--d{transform:rotateY(82deg)}
.portes--ouvre .porte-battant::after{opacity:1}
.portes--fondu{opacity:0;transition:opacity .8s ease}
/* la lumière derrière la porte : le seuil passe SOUS les battants pendant l'ouverture */
.seuil--derriere{z-index:310}
@media (prefers-reduced-motion:reduce){.portes{display:none!important}}

/* la porte répond au toucher : un rai de lumière paraît avant que les battants ne bougent */
.portes::before{content:'';position:absolute;left:50%;top:6%;bottom:6%;width:3px;transform:translateX(-50%);
  z-index:2;border-radius:3px;opacity:0;
  background:linear-gradient(180deg,transparent,#FFE9C0 18%,#F2B04A 50%,#FFE9C0 82%,transparent);
  box-shadow:0 0 18px 4px rgba(242,176,74,.75),0 0 46px 12px rgba(242,176,74,.4);
  transition:opacity .45s ease}
.portes--pret::before{opacity:1}
.portes--ouvre::before{opacity:0;transition:opacity 1.1s ease .5s}

/* les marques du pied restent en minuscules, fidèles à la règle de Pascaline */
.pied h3.pied-marque{text-transform:none;font-size:.94rem;letter-spacing:.04em}
.pied h3.pied-marque.mot-ondorae{font-family:'Comfortaa',sans-serif}

/* ═══ le site vit derrière la porte : rien n'est visible avant d'entrer ═══ */
.porte-close, .porte-close body{overflow:hidden;height:100%}
/* l'invitation : si le visiteur tente de défiler, la porte le convie doucement */
@keyframes porte-invite{
  0%,100%{box-shadow:0 0 0 0 rgba(242,176,74,0)}
  40%{box-shadow:0 0 0 8px rgba(242,176,74,.28),0 0 34px 10px rgba(242,176,74,.35)}
}
.porte-invite{animation:porte-invite 1.2s ease}

/* sur la porte, la barre ne garde que la marque et les ancres : pas de bouton orange */
.barre--porte .barre-in > .btn{display:none}

/* ═══ textes de Pascaline (30/07) ═══ */
/* page 2 : une phrase par ligne, comme elle l'a écrit */
.lede-lignes{display:grid;gap:6px;max-width:62ch}
.lede-lignes span{display:block}
/* le « Juste être » qui clôt sa présentation */
.mot-etre{font-family:'Comfortaa',sans-serif;font-style:normal;font-weight:600;color:var(--corail-fonce)}
/* questions / réponses */
.qr{margin-top:18px;display:grid;gap:2px}
.qr dt{font-family:'Outfit',sans-serif;font-weight:600;color:var(--aubergine);margin-top:16px}
.qr dt:first-child{margin-top:0}
.qr dd{margin:4px 0 0;color:var(--gris)}
/* confort et sécurité : un cadre sobre, jamais alarmant */
.soin{margin-top:clamp(22px,3vw,34px);padding:clamp(22px,3vw,32px);border:1px solid var(--fil-j);
  border-left:3px solid var(--corail);border-radius:16px;background:#fff}
.soin .soin-titre{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--aubergine);margin-bottom:10px}
.soin p{margin-top:10px;color:var(--gris);max-width:78ch}
.soin-liste{margin-top:14px;display:grid;gap:8px;max-width:78ch}
.soin-liste li{position:relative;padding-left:20px;color:var(--gris)}
.soin-liste li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:2px;background:var(--corail)}
/* le bouton de réservation, désormais sous les deux cadres */
#univers .univers-resa{margin-top:clamp(26px,3.4vw,40px);text-align:center}

/* « Juste ÊTRE » en signature de fin de section (demande Pascaline 02/08) — même esprit que la porte */
.sig-etre{margin-top:clamp(26px,3.4vw,40px);text-align:right;font-family:'Comfortaa',sans-serif;
  font-weight:600;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:.04em;color:var(--blanc)}
.sig-etre em{font-style:normal;font-weight:700;letter-spacing:.12em}
.sig-etre--clair{color:var(--corail-fonce)}
.lede-arrivee{font-style:italic;margin-top:10px}

/* la réservation en ligne est LE chemin premier (décision Emmanuel 03/08) */
.coord-un--premier{border:2px solid var(--corail)}