/* ============================================================
   Hospitalité Digital — v2
   Système de design, modèle : fhoke.com
   ============================================================ */

/* Archivo variable : un seul fichier, axes de largeur et de graisse.
   Remplace FK General Sans (commerciale) utilisée par la référence. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(fonts/archivo.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* surfaces : la photographie apporte toute la couleur, le reste est neutre */
  --white:#FFFFFF;
  --cream:#F1EDE6;      /* panneaux de projet */
  --cream-2:#E7E1D6;    /* filets sur crème */
  --ink:#121212;
  --ink-2:#3A3A38;
  --grey:#6B6B67;
  --line:#E2DED6;
  --line-i:rgba(255,255,255,.16);

  --brass:#9C7A4A;      /* accent unique, rare */

  --f:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --fm:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --edge:clamp(18px,2.6vw,40px);
  --sp:clamp(72px,9vw,140px);
  --e:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.55;font-weight:400;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--white)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- Titrage : capitales grasses et condensées ---------- */
/* Interlignage : 0,86 était trop serré. Les capitales accentuées du français
   (Ô, È, É, Ç) montent au-dessus de la hauteur de capitale et se faisaient
   couper. 0,95 leur laisse la place sans mollir le bloc de titre. */
.d1,.d2,.d3{
  font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 800;
  letter-spacing:-.018em;line-height:.95;text-wrap:balance;
}
.d1{font-size:clamp(40px,7.4vw,108px)}
.d2{font-size:clamp(30px,4.6vw,66px)}
.d3{font-size:clamp(22px,2.6vw,34px);line-height:.95}

/* petites capitales d'étiquetage, comme les sous-titres de la référence */
.lab{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.35;color:var(--ink);
}
.lab-q{color:var(--grey)}
.mono{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

p{text-wrap:pretty}
.lead{font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:58ch}

/* ---------- Grille ---------- */
.bleed{width:100%;padding:0 var(--edge)}
.wrap{max-width:1560px;margin:0 auto;padding:0 var(--edge)}
.sec{padding:var(--sp) 0}

/* ---------- Boutons pilule ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:11px 20px;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--white);
  transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e),transform .25s var(--e);
}
.pill:hover{background:transparent;color:var(--ink);transform:translateY(-1px)}
.pill-o{background:transparent;color:var(--ink)}
.pill-o:hover{background:var(--ink);color:var(--white)}
.pill-l{background:var(--white);color:var(--ink);border-color:var(--white)}
.pill-l:hover{background:transparent;color:var(--white);border-color:var(--white)}
.pill sup{font-size:9px;font-weight:600;margin-left:2px;opacity:.7}

/* ---------- Sections encrées ---------- */
.ink{background:var(--ink);color:var(--white)}
.ink .lead,.ink p{color:rgba(255,255,255,.74)}
.ink .lab{color:var(--white)}
.ink .lab-q,.ink .mono{color:rgba(255,255,255,.55)}
.cream{background:var(--cream)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}