/* =========================================================
   Kinésithérapie Kelmen — feuille de style
   Direction artistique : crème / taupe / blush, chaleureuse
   et féminine sans excès. Réalisé par NS Development.
   ========================================================= */

:root{
  --ink:        #37312C;
  --ink-soft:   #6B615A;
  --ink-mute:   #948A81;

  --taupe:      #9C8A76;
  --taupe-deep: #7E6E5C;
  --taupe-lt:   #C9BBAA;
  --taupe-pale: #E4DACD;

  --blush:      #CE9A93;
  --blush-lt:   #EBCFC9;
  --blush-pale: #F7E9E5;

  --sand:       #F7F3EC;
  --sand-2:     #EFE7DB;
  --paper:      #FFFCF7;

  --ok:         #6E8F73;
  --warn:       #C08A4E;

  --radius:     18px;
  --radius-lg:  30px;
  --shadow:     0 18px 50px -28px rgba(55,49,44,.34);
  --shadow-lg:  0 40px 90px -50px rgba(55,49,44,.5);
  --maxw:       1180px;

  --ns-dur: .85s;
  --ns-progress-color: var(--taupe);
  --ns-g1: var(--taupe); --ns-g2: var(--blush);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.72; font-weight:400;
  color:var(--ink-soft);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Marcellus',Georgia,serif;
  font-weight:400; color:var(--ink);
  line-height:1.14; letter-spacing:-.005em; margin:0;
}
h1{font-size:clamp(2.5rem,6vw,4.35rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.3}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 44px,var(--maxw)); margin-inline:auto}
.narrow{width:min(100% - 44px,860px); margin-inline:auto}

/* ---------- petits éléments d'écriture ---------- */
.eyebrow{
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--taupe); font-weight:600; margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{content:''; width:34px; height:1px; background:var(--taupe-lt); flex:none}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{content:''; width:34px; height:1px; background:var(--taupe-lt); flex:none}
.lead{font-size:1.12rem; color:var(--ink-soft); max-width:62ch}
.script{font-family:'Sacramento',cursive; color:var(--taupe); font-size:1.55em; line-height:1}
.hl{color:var(--taupe-deep)}

/* =========================================================
   Bandeau maquette
   ========================================================= */
.demo-bar{
  background:var(--ink); color:#E9E1D8; font-size:.76rem; letter-spacing:.06em;
  text-align:center; padding:.55rem 1rem; position:relative; z-index:60;
}
.demo-bar strong{color:var(--blush-lt); font-weight:600}

/* =========================================================
   Navigation
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  padding:1.1rem 0; transition:background .45s ease, box-shadow .45s ease, padding .45s ease;
}
.nav.ns-solid{
  background:rgba(255,252,247,.88); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(155,138,118,.16); padding:.65rem 0;
}
.nav__in{display:flex; align-items:center; gap:1.6rem}
.brand{display:flex; align-items:center; gap:.72rem; text-decoration:none; flex:none}
.brand svg,.brand img{width:42px; height:42px; flex:none; transition:transform .6s cubic-bezier(.22,.7,.2,1)}
.brand:hover svg,.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:'Sacramento',cursive; font-size:1.75rem; color:var(--taupe-deep)}
.brand__sub{font-size:.56rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-mute); margin-top:.1rem}

.nav__links{display:flex; gap:1.9rem; margin-left:auto; align-items:center}
.nav__links a{
  text-decoration:none; font-size:.83rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; position:relative; padding:.35rem 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--taupe); transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.22,.7,.2,1);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav__links a[aria-current="page"]{color:var(--taupe-deep)}
/* le bouton de la nav garde ses propres couleurs, sans soulignement */
.nav__links a.btn{padding:.68rem 1.3rem}
.nav__links a.btn::after{display:none}
.nav__links a.btn--primary{color:#FFF9F1}
.nav__links a.btn--primary:hover{color:#FFF9F1}

.burger{
  display:none; margin-left:auto; background:none; border:0; padding:.5rem;
  cursor:pointer; color:var(--ink);
}
.burger span{display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:.35s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* =========================================================
   Boutons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.85rem; border-radius:999px; border:1px solid transparent;
  font-family:'Manrope',sans-serif; font-size:.83rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.7,.2,1), box-shadow .4s, background .35s, color .35s, border-color .35s;
}
.btn--primary{background:var(--taupe-deep); color:#FFF9F1; box-shadow:0 14px 30px -18px rgba(126,110,92,.9)}
.btn--primary:hover{background:var(--ink); transform:translateY(-3px); box-shadow:0 22px 44px -20px rgba(55,49,44,.7)}
.btn--ghost{border-color:var(--taupe-lt); color:var(--ink)}
.btn--ghost:hover{background:var(--paper); border-color:var(--taupe); transform:translateY(-3px)}
.btn--blush{background:var(--blush); color:var(--ink)}  /* blanc sur blush = 2.4:1 ; encre = 5.3:1 */
.btn--blush:hover{background:#D6A79F; transform:translateY(-3px)}
.btn--sm{padding:.68rem 1.3rem; font-size:.74rem}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn svg{width:16px;height:16px;flex:none}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative; padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{margin-bottom:1.4rem}
.hero h1 > span{display:block}
.hero h1 .script{font-size:1.28em; margin-bottom:-.1em}
.hero__cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem}
.hero__meta{display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--taupe-pale)}
.hero__meta div{font-size:.82rem; line-height:1.5}
.hero__meta b{display:block; font-family:'Marcellus',serif; font-size:1.5rem; color:var(--ink); font-weight:400}

/* image organique */
.blob{position:relative}
.blob img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:52% 48% 44% 56% / 42% 40% 60% 58%;
  box-shadow:var(--shadow-lg);
  animation:morph 22s ease-in-out infinite;
}
.blob--soft img{aspect-ratio:1/1; border-radius:46% 54% 58% 42% / 52% 44% 56% 48%}
@keyframes morph{
  0%,100%{border-radius:52% 48% 44% 56% / 42% 40% 60% 58%}
  33%{border-radius:44% 56% 52% 48% / 56% 48% 52% 44%}
  66%{border-radius:56% 44% 48% 52% / 46% 58% 42% 54%}
}
.blob::after{
  content:''; position:absolute; inset:-6% -6% -6% -6%; z-index:-1;
  background:radial-gradient(circle at 60% 35%,var(--blush-pale),transparent 62%);
  filter:blur(10px);
}
.blob__badge{
  position:absolute; bottom:6%; left:-4%;
  background:var(--paper); border-radius:var(--radius); padding:.95rem 1.25rem;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:.75rem; max-width:74%;
}
.blob__badge svg{width:30px;height:30px;flex:none;color:var(--taupe)}
.blob__badge span{font-size:.78rem; line-height:1.35; color:var(--ink)}
.blob__badge b{display:block; font-weight:700}

/* aurore de fond */
.aurora{position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
.aurora i{
  position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55;
  animation:drift 26s ease-in-out infinite;
}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-14vw;top:-16vw;background:var(--blush-pale)}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:8vw;background:var(--sand-2);animation-delay:-9s}
.aurora i:nth-child(3){width:30vw;height:30vw;left:38vw;bottom:-14vw;background:#F0E6DA;animation-delay:-17s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vw,-3vw,0) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){.aurora i,.blob img{animation:none}}

/* =========================================================
   Bandeau de réassurance
   ========================================================= */
.strip{background:var(--paper); border-block:1px solid var(--taupe-pale)}
.strip__in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--taupe-pale)}
.strip__cell{background:var(--paper); padding:1.7rem 1.4rem; display:flex; gap:.9rem; align-items:flex-start}
.strip__cell svg{width:22px;height:22px;color:var(--taupe);flex:none;margin-top:3px}
.strip__cell b{display:block; color:var(--ink); font-size:.88rem; font-weight:700; margin-bottom:.15rem}
.strip__cell span{font-size:.8rem; line-height:1.5}

/* =========================================================
   Sections
   ========================================================= */
section{position:relative}
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec--paper{background:var(--paper)}
.sec--sand{background:var(--sand-2)}
.sec--ink{background:var(--ink); color:#D9D0C6}
.sec--ink h2,.sec--ink h3{color:#FBF7F1}
.sec--ink .eyebrow{color:var(--blush-lt)}
.sec--ink .eyebrow::before,.sec--ink .eyebrow::after{background:rgba(255,255,255,.25)}

.sec__head{max-width:660px; margin-bottom:3rem}
.sec__head.is-center{margin-inline:auto; text-align:center}
.sec__head p{margin-top:1.1rem}

/* séparateur colonne vertébrale */
.spine-rule{display:flex; justify-content:center; gap:6px; padding:0 0 2.4rem}
.spine-rule i{
  width:16px; height:4px; border-radius:3px; background:var(--taupe-lt);
  animation:pulse 2.6s ease-in-out infinite;
}
.spine-rule i:nth-child(2){animation-delay:.12s;width:20px}
.spine-rule i:nth-child(3){animation-delay:.24s;width:24px}
.spine-rule i:nth-child(4){animation-delay:.36s;width:20px}
.spine-rule i:nth-child(5){animation-delay:.48s}
@keyframes pulse{0%,100%{opacity:.35;transform:scaleX(.85)}50%{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.spine-rule i{animation:none;opacity:.7}}

/* =========================================================
   Cartes de soins
   ========================================================= */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:1.4rem}
.card{
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--taupe-pale); position:relative;
  transition:transform .55s cubic-bezier(.22,.7,.2,1), box-shadow .55s, border-color .55s;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--taupe-lt)}
.card__img{aspect-ratio:16/11; overflow:hidden; background:var(--sand-2)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.07)}
.card__body{padding:1.6rem 1.7rem 1.9rem}
.card__body h3{margin-bottom:.55rem}
.card__body p{font-size:.92rem; margin:0}
.card__tag{
  display:inline-block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe-deep); background:var(--sand-2); padding:.3rem .7rem; border-radius:999px;
  margin-bottom:.9rem; font-weight:700;
}
.card__tag--blush{background:var(--blush-pale); color:#A9736B}

/* liste à puces vertèbre */
.ticks li{position:relative; padding-left:1.9rem; margin-bottom:.75rem; font-size:.95rem}
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:11px; height:4px; border-radius:2px; background:var(--taupe-lt);
}
.ticks li::after{
  content:''; position:absolute; left:3px; top:calc(.62em + 5px);
  width:6px; height:3px; border-radius:2px; background:var(--blush-lt);
}

/* =========================================================
   Bloc texte + image alterné
   ========================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover}
.split__media.is-tall img{aspect-ratio:3/4}

/* =========================================================
   Chiffres
   ========================================================= */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem; text-align:center}
.stats b{
  display:block; font-family:'Marcellus',serif; font-weight:400;
  font-size:clamp(2.6rem,5vw,3.6rem); color:var(--taupe); line-height:1;
}
.sec--ink .stats b{color:var(--blush-lt)}
.stats span{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.7rem; display:block}

/* =========================================================
   Citation
   ========================================================= */
.quote{
  font-family:'Marcellus',serif; font-size:clamp(1.4rem,2.8vw,2.05rem);
  line-height:1.45; color:var(--ink); text-align:center; max-width:22ch; margin-inline:auto;
}
.sec--ink .quote{color:#FBF7F1}
.quote--wide{max-width:30ch}
.quote__sig{
  display:block; margin-top:1.6rem; font-family:'Sacramento',cursive;
  font-size:1.9rem; color:var(--taupe);
}
.sec--ink .quote__sig{color:var(--blush-lt)}

/* =========================================================
   Appel à l'action
   ========================================================= */
.cta{
  background:linear-gradient(135deg,var(--sand-2),var(--blush-pale) 120%);
  border-radius:var(--radius-lg); padding:clamp(2.5rem,6vw,4.2rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:''; position:absolute; width:340px; height:340px; right:-90px; top:-120px;
  background:radial-gradient(circle,rgba(255,255,255,.7),transparent 68%);
}
.cta > *{position:relative}
.cta p{max-width:52ch; margin-inline:auto}
.cta__btns{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}

/* =========================================================
   Infos & accès
   ========================================================= */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem}
.hours{border-top:1px solid var(--taupe-pale)}
.hours li{
  display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0;
  border-bottom:1px solid var(--taupe-pale); font-size:.94rem;
}
.hours li b{color:var(--ink); font-weight:600}
.hours li.is-off{color:var(--ink-mute)}
.hours li.is-today{background:linear-gradient(90deg,var(--blush-pale),transparent); padding-inline:.6rem; margin-inline:-.6rem; border-radius:6px}
.hours li.is-today b{color:var(--taupe-deep)}

.contact-list li{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.2rem}
.contact-list svg{width:20px;height:20px;color:var(--taupe);flex:none;margin-top:4px}
.contact-list b{display:block;color:var(--ink);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
.contact-list a{color:var(--taupe-deep); text-decoration:none; border-bottom:1px solid var(--taupe-pale)}
.contact-list a:hover{border-color:var(--taupe)}

.map-card{position:relative;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--taupe-pale);
  background:var(--paper); box-shadow:var(--shadow);
}
.map-card iframe{width:100%; height:330px; border:0; display:block; filter:grayscale(.35) sepia(.12)}

/* =========================================================
   Réservation — habillage du module NS Development
   ---------------------------------------------------------
   Le module apporte sa propre mise en page (assets/nsr-reservation.css),
   identique chez tous les clients. Tout ce qu'il reste à faire ici, c'est
   lui donner la charte du cabinet. Rien d'autre : si un réglage manque,
   il s'ajoute au module, pas ici.
   ========================================================= */
.nsr, .nsr-pro{
  --nsr-fond:         var(--paper);
  --nsr-fond-2:       var(--sand);
  --nsr-fond-3:       var(--sand-2);
  --nsr-bordure:      var(--taupe-pale);
  --nsr-texte:        var(--ink);
  --nsr-texte-doux:   var(--ink-mute);
  --nsr-accent:       var(--taupe-deep);
  --nsr-accent-texte: #FFF9F1;
  --nsr-accent-doux:  var(--blush-pale);
  --nsr-ok:           var(--ok);
  --nsr-erreur:       #B4655C;
  --nsr-erreur-fond:  #FDF3F1;

  --nsr-radius:       var(--radius);
  --nsr-radius-lg:    var(--radius-lg);
  --nsr-ombre:        var(--shadow-lg);

  --nsr-titre-font:   'Marcellus', serif;
  --nsr-titre-poids:  400;
}

/* =========================================================
   Page biographie
   ========================================================= */
.bio-hero{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.timeline{position:relative; padding-left:2.4rem}
.timeline::before{
  content:''; position:absolute; left:7px; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(var(--taupe-lt),var(--blush-lt),transparent);
}
.timeline li{position:relative; padding-bottom:2.1rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:''; position:absolute; left:-2.4rem; top:.45rem; width:15px; height:15px;
  border-radius:50%; background:var(--paper); border:2px solid var(--taupe-lt);
  transition:border-color .4s, transform .4s;
}
.timeline li:hover::before{border-color:var(--blush); transform:scale(1.25)}
.timeline em{
  font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe); font-weight:700; display:block; margin-bottom:.3rem;
}
.timeline h3{margin-bottom:.4rem}
.timeline p{font-size:.94rem; margin:0}

.expertise{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem}
.expertise div{
  background:var(--paper); border:1px solid var(--taupe-pale); border-radius:var(--radius);
  padding:1.4rem 1.5rem; transition:transform .45s, box-shadow .45s;
}
.expertise div:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.expertise b{display:block; font-family:'Marcellus',serif; font-size:1.08rem; color:var(--ink); font-weight:400; margin-bottom:.4rem}
.expertise span{font-size:.87rem}
.expertise svg{width:24px;height:24px;color:var(--taupe);margin-bottom:.8rem}

.langs{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem}
.langs span{
  border:1px solid var(--taupe-pale); border-radius:999px; padding:.42rem 1rem;
  font-size:.78rem; letter-spacing:.06em; background:var(--paper); color:var(--ink);
}

/* =========================================================
   Bascule de langue (FR / LB)
   ---------------------------------------------------------
   Deux boutons collés dans une pilule, la langue active en
   plein. Discret dans la nav, mais impossible à rater.
   ========================================================= */
.lang-switch{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--taupe-pale); border-radius:999px;
  background:var(--paper);
}
.lang-switch button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  color:var(--ink-mute); padding:.42rem .72rem; line-height:1;
  transition:background .35s ease, color .35s ease;
}
.lang-switch button + button{border-left:1px solid var(--taupe-pale)}
.lang-switch button:hover{color:var(--taupe-deep)}
.lang-switch button.is-on{background:var(--taupe); color:#FFF9F1}
.lang-switch button:focus-visible{outline:2px solid var(--taupe); outline-offset:2px}

/* Le temps que la traduction s'applique, on ne montre pas la page en
   français à quelqu'un qui l'a demandée en luxembourgeois. Le script
   de <head> lève cet état au bout de 1,2 s quoi qu'il arrive. */
html.i18n-attente body{visibility:hidden}

/* Le luxembourgeois écrit plus long que le français : on resserre la barre
   de navigation avant qu'elle ne passe à la ligne. */
@media (min-width:761px) and (max-width:1180px){
  .nav__links{gap:1.25rem}
  .nav__links a{font-size:.76rem; letter-spacing:.08em}
  .nav__links a.btn{padding:.62rem 1rem}
  .lang-switch button{padding:.4rem .58rem}
}

/* champ que la praticienne doit compléter */
.todo{
  background:var(--blush-pale); color:#A9736B; border-radius:5px;
  padding:.06em .45em; font-style:italic; font-size:.94em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.sec--ink .todo{background:rgba(235,207,201,.16); color:var(--blush-lt)}
.todo-note{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--blush-pale); border-radius:var(--radius);
  padding:1.1rem 1.3rem; font-size:.85rem; color:#8E5F58; line-height:1.55;
}
.todo-note svg{width:20px;height:20px;flex:none;margin-top:2px}

/* =========================================================
   Pied de page
   ========================================================= */
.footer{background:var(--ink); color:#B7ADA2; padding:4rem 0 2rem; font-size:.9rem}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2.5rem; margin-bottom:3rem}
.footer h4{color:#FBF7F1; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.1rem; font-family:'Manrope',sans-serif; font-weight:700}
.footer a{color:#B7ADA2; text-decoration:none; transition:color .3s}
.footer a:hover{color:var(--blush-lt)}
.footer li{margin-bottom:.6rem}
.footer .brand__name{color:#FBF7F1}
.footer .brand__sub{color:#8A8077}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem;
}
.footer__ns{display:inline-flex; align-items:center; gap:.5rem}
.footer__ns b{color:#FBF7F1}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:960px){
  .hero__grid,.split,.info-grid,.bio-hero{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .strip__in{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .blob__badge{left:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    padding:1.6rem 22px 2rem; margin:0;
    background:var(--paper); border-top:1px solid var(--taupe-pale);
    flex-direction:column; align-items:flex-start; gap:1.3rem;
    box-shadow:0 26px 50px -30px rgba(55,49,44,.55);
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .45s cubic-bezier(.22,.7,.2,1), opacity .32s ease, visibility .32s;
  }
  .nav__links.is-open{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .nav__links a{font-size:1rem}
  .nav--open{background:rgba(255,252,247,.96); backdrop-filter:blur(14px)}
  .burger{display:block; position:relative; z-index:2}
  .footer__grid{grid-template-columns:1fr}
  .hero__meta{gap:1.4rem}
}
@media (max-width:480px){
  .strip__in{grid-template-columns:1fr}
}

/* focus visible partout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--taupe); outline-offset:3px; border-radius:4px;
}