/* Marianne Katser · Coaching */
:root { --page:#F7F6F2; --ink:#2C2C2A; --ink-soft:#444441; --ink-muted:#5F5E5A; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--page); color:var(--ink); font-family:'Jost','Helvetica Neue',Arial,sans-serif; }
a { color:inherit; }
.page { position:relative; width:100vw; height:100vh; min-height:640px; }
.frame { position:relative; max-width:1400px; height:100%; margin:0 auto; }

/* Coins fixes : nom à gauche, navigation à droite */
.name { position:absolute; left:7%; top:8%; z-index:2; font-size:13px; letter-spacing:0.16em; text-decoration:none; }
.name .first { font-weight:300; } .name .last { font-weight:500; }
.lang { position:absolute; right:9%; top:8%; z-index:2; font-size:12px; letter-spacing:0.1em; font-weight:300; color:var(--ink-muted); }
.lang a { text-decoration:none; } .lang a.on, .lang a:hover { color:var(--ink); }
.lang .gap { display:inline-block; width:2.4em; }

/* Bloc de texte */
.text { position:absolute; left:18%; top:50%; transform:translateY(-50%); width:410px; }
.title { font-size:13px; font-weight:400; letter-spacing:0.2em; white-space:nowrap; margin-bottom:8px; }
.line { display:block; width:100%; height:5px; margin-bottom:24px; }
.body { font-size:12px; line-height:1.9; font-weight:300; color:var(--ink-soft); margin-bottom:2em; text-align:justify; }
.body.plain { text-align:left; }
.body.last { margin-bottom:0; text-align:left; }
.cta, .inline { color:var(--ink); text-decoration:none; border-bottom:0.5px solid var(--ink); padding-bottom:1px; }
.cta { font-size:12px; font-weight:300; }

/* Accueil : branche posée sur la page */
.photo { position:absolute; left:70%; width:21%; top:18%; height:60%; }
.photo img { width:100%; height:100%; object-fit:contain; display:block; }

/* À propos : petit portrait, non agrandissable */
.portrait { position:absolute; left:80.5%; top:50%; transform:translate(-50%,-50%); width:150px; }
.portrait img { width:150px; height:auto; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none;
                box-shadow:1px -1px 2px rgba(60,55,45,0.10), 4px -4px 12px rgba(60,55,45,0.07); }

/* Téléphone et petites tablettes */
@media (max-width: 860px) {
  .page { height:auto; min-height:100vh; }
  .frame { height:auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 28px 72px; }
  .name { left:28px; top:40px; font-size:12px; letter-spacing:0.14em; }
  .lang { right:28px; top:40px; font-size:11px; letter-spacing:0.08em; }
  .lang .gap { width:1.1em; }
  .text { position:static; transform:none; width:100%; max-width:410px; }
  .title { font-size:11.5px; letter-spacing:0.13em; line-height:1.6; }
  .body { text-align:left; font-size:13px; line-height:1.85; }
  .photo { position:static; order:-1; width:68%; height:auto; align-self:flex-end; margin:0 -8px 56px 0; }
  .photo img { height:auto; }
  .portrait { position:static; order:-1; transform:none; width:120px; align-self:flex-start; margin-bottom:44px; }
  .portrait img { width:120px; }
}
@media (max-width: 380px) { .title { white-space:normal; } }