/* ==========================================================================
   LA HAUTE CONCIERGERIE — feuille de style
   Maison Internationale de Gouvernance Privée · Paris · MMXXVI
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/Lora.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('../fonts/Lora-Italic.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/EBGaramond.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('../fonts/EBGaramond-Italic.woff2') format('woff2'); }

/* ---------- Palette ---------- */
:root {
  --ivoire:#FBFAF7;
  --ivoire-2:#F6F2E8;
  --encre:#3A2F20;
  --titre:#2E2416;
  --brun:#5A4930;
  --brun-doux:#8A7A5C;
  --or:#A8842C;
  --or-pale:#C9B183;
  --filet:rgba(168,132,44,.13);
}

/* ---------- Base ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body {
  background:var(--ivoire); color:var(--encre);
  font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size:20px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img, video { display:block; max-width:100%; }

/* Lien d'évitement (accessibilité), invisible sauf au clavier */
.evitement { position:absolute; left:-999px; top:8px; background:var(--ivoire); color:var(--titre);
  padding:8px 14px; border:1px solid var(--or); z-index:100; font-size:15px; }
.evitement:focus { left:8px; }

/* ---------- Navigation ---------- */
.entete { position:fixed; top:0; left:0; right:0; z-index:10;
  background:rgba(251,250,247,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--filet); }
.nav { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px; }
.nav-logo { font-family:'Lora',serif; font-weight:500; font-size:13px; letter-spacing:.30em;
  text-transform:uppercase; color:var(--titre); white-space:nowrap; display:flex; align-items:center; gap:.55em; }
.nav-logo .point { width:5px; height:5px; border-radius:50%; background:var(--or); flex:none; }
.nav-liens { display:flex; gap:44px; }
.nav-liens a { font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--brun); white-space:nowrap;
  padding:4px 0; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.nav-liens a:hover, .nav-liens a[aria-current="page"] { border-bottom-color:var(--or); color:var(--titre); }
.nav-liens a:focus-visible, .nav-logo:focus-visible { outline:1.5px solid var(--or); outline-offset:5px; }

main { padding-top:84px; }

/* Séparateur : le point d'or */
.seuil { display:flex; justify-content:center; align-items:center; padding:92px 0; }
.seuil::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--or); }

/* ---------- Accueil : porche ---------- */
.porche { min-height:66vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:96px 24px 72px; }
.marque { margin-bottom:78px; }
.marque-nom { font-family:'Lora',serif; font-weight:500; font-size:clamp(24px,3.8vw,38px);
  letter-spacing:.24em; text-transform:uppercase; line-height:1.5; color:var(--titre); }
.marque-nom .ligne { display:block; white-space:nowrap; }
.marque-nom .point { display:inline-block; width:.18em; height:.18em; border-radius:50%;
  background:var(--or); vertical-align:.44em; margin-left:.45em; }
.marque-filet { width:64px; height:1px; background:var(--or-pale); margin:32px auto 28px; }
.marque-baseline { font-family:'Lora',serif; font-weight:500;
  font-size:clamp(11.5px,1.55vw,14.5px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--brun); padding-left:.34em; line-height:1.9; }
.these { font-family:'Lora',serif; font-weight:400; font-size:clamp(28px,4.4vw,46px); line-height:1.36;
  letter-spacing:.01em; color:var(--titre); max-width:17em; }
.these em { font-style:italic; }

/* ---------- Vidéo ---------- */
.lumiere { max-width:1160px; margin:0 auto; padding:0 32px; }
.lumiere video { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--ivoire-2); }
.lumiere-legende { text-align:center; margin-top:26px; font-size:12px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--brun-doux); padding-left:.36em; }

/* ---------- Univers ---------- */
.univers { max-width:1160px; margin:0 auto; padding:0 32px; }
.univers-tete { text-align:center; margin-bottom:76px; }
.surtitre { font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--or);
  margin-bottom:24px; padding-left:.4em; }
.univers-titre { font-family:'Lora',serif; font-weight:400; font-size:clamp(26px,3.4vw,36px);
  line-height:1.4; color:var(--titre); letter-spacing:.02em; }
.grille { display:grid; grid-template-columns:repeat(3,1fr); column-gap:44px; row-gap:84px; }
.carte img { width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:26px; }
.carte h3 { font-family:'Lora',serif; font-weight:500; font-size:19px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--titre); margin-bottom:12px; }
.carte h3 .pt { color:var(--or); }
.carte p { font-size:17.5px; line-height:1.7; color:var(--brun); font-style:italic; }
@media (max-width:960px) { .grille { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .grille { grid-template-columns:1fr; row-gap:64px; } }

.devise { text-align:center; padding:0 24px; font-size:12.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--brun-doux); }

/* ---------- Pages de texte ---------- */
.voile { max-width:660px; margin:0 auto; padding:0 28px; }
.voile-large { max-width:900px; margin:0 auto; padding:0 28px; }
.voile .surtitre, .voile-large .surtitre { text-align:left; padding-left:0; }
h1.titre-page { font-family:'Lora',serif; font-weight:400; font-size:clamp(28px,4.2vw,40px);
  letter-spacing:.05em; line-height:1.32; color:var(--titre); margin-bottom:60px; }
.prose p { margin-bottom:1.7em; }
.prose p:last-child { margin-bottom:0; }
.prose .lettrine::first-letter { font-family:'Lora',serif; font-weight:500; font-size:3.2em; float:left;
  line-height:.82; padding:.06em .12em 0 0; color:var(--titre); }
.prose em { font-style:italic; }

.exergue { padding:116px 0; text-align:center; }
.exergue blockquote { font-family:'Lora',serif; font-weight:400; font-style:italic;
  font-size:clamp(23px,3.2vw,31px); line-height:1.52; color:var(--brun); max-width:21em; margin:0 auto; }

.triptyque { display:grid; grid-template-columns:repeat(3,1fr); gap:56px; padding:34px 0 8px; text-align:center; }
.triptyque .valeur { font-family:'Lora',serif; font-weight:500; font-size:clamp(21px,2.5vw,27px);
  letter-spacing:.04em; color:var(--titre); margin-bottom:14px; }
.triptyque .legende { font-size:12.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brun-doux); line-height:2; }
@media (max-width:720px) { .triptyque { grid-template-columns:1fr; gap:44px; } }

/* ---------- Accès ---------- */
.acces-adresse { text-align:center; padding:84px 0 20px; }
.acces-adresse .invite { font-size:12px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--brun-doux); margin-bottom:28px; padding-left:.4em; }
.acces-adresse .courriel { font-family:'Lora',serif; font-weight:500; font-size:clamp(19px,2.6vw,26px);
  letter-spacing:.05em; color:var(--titre); user-select:all; }
.acces-adresse .siege { margin-top:52px; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brun-doux); line-height:2.4; }

/* ---------- Mentions légales ---------- */
.legales { font-size:16.5px; line-height:1.8; color:var(--brun); }
.legales h2 { font-family:'Lora',serif; font-weight:500; font-size:17px; letter-spacing:.1em;
  color:var(--titre); margin:44px 0 12px; }
.legales h2:first-of-type { margin-top:0; }
.legales p { margin-bottom:12px; }

/* ---------- Pied de page ---------- */
.pied { border-top:1px solid var(--filet); margin-top:140px; }
.pied-int { max-width:1160px; margin:0 auto; padding:42px 32px 50px; display:flex;
  justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--brun-doux); }
.pied-int a { border-bottom:1px solid transparent; padding-bottom:2px; }
.pied-int a:hover { border-bottom-color:var(--or); color:var(--brun); }

.espace-haut { padding-top:126px; }
.espace-bas { padding-bottom:36px; }

/* ---------- Mobile ---------- */
@media (max-width:640px) {
  body { font-size:18px; }
  .nav { padding:18px 18px; gap:16px; }
  .nav-liens { gap:22px; }
  .nav-liens a { font-size:12.5px; letter-spacing:.14em; }
  .nav-logo { font-size:10.5px; letter-spacing:.18em; }
  .porche { min-height:58vh; padding-top:72px; }
  .marque { margin-bottom:60px; }
  .lumiere, .univers { padding:0 20px; }
  .espace-haut { padding-top:96px; }
  .seuil { padding:64px 0; }
  .exergue { padding:80px 0; }
}

/* ---------- Impression ---------- */
@media print {
  .entete, .lumiere, .pied { display:none; }
  main { padding-top:0; }
  body { font-size:12pt; }
}

/* ==========================================================================
   Engagements — ajouts MMXXVI / septembre
   ========================================================================== */

/* Section de trois engagements sur l'accueil */
.engagements { max-width:1160px; margin:0 auto; padding:0 32px; }
.engagements-tete { text-align:center; margin-bottom:64px; }
.engagements-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
.engagement-bref { text-align:center; padding:0 8px; }
.engagement-bref .chiffre { font-family:'Lora',serif; font-size:15px; letter-spacing:.3em;
  color:var(--or); margin-bottom:18px; padding-left:.3em; }
.engagement-bref h3 { font-family:'Lora',serif; font-weight:500; font-size:21px; letter-spacing:.03em;
  color:var(--titre); margin-bottom:14px; line-height:1.35; }
.engagement-bref p { font-size:17px; line-height:1.72; color:var(--brun); font-style:italic; }
.engagements-lien { text-align:center; margin-top:64px; }
@media (max-width:900px) { .engagements-grille { grid-template-columns:1fr; gap:52px; } }

/* Lien sobre, souligné d'or */
.lien-sobre { font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--brun-doux);
  border-bottom:1px solid var(--or-pale); padding-bottom:4px; padding-left:.3em;
  transition:color .25s ease, border-color .25s ease; }
.lien-sobre:hover { color:var(--titre); border-bottom-color:var(--or); }
.lien-sobre:focus-visible { outline:1.5px solid var(--or); outline-offset:5px; }

/* Engagement détaillé (page Engagements) */
.engagement { margin:0 auto; }
.engagement + .engagement { margin-top:84px; }
.engagement .numero { font-family:'Lora',serif; font-size:13px; letter-spacing:.34em; color:var(--or);
  text-transform:uppercase; margin-bottom:16px; }
.engagement h2 { font-family:'Lora',serif; font-weight:400; font-size:clamp(24px,3.2vw,30px);
  color:var(--titre); line-height:1.35; margin-bottom:28px; letter-spacing:.02em; }
.engagement h2 em { font-style:italic; }

/* Bandeau de vérification */
.verifiable { max-width:660px; margin:0 auto; padding:34px 36px; border:1px solid var(--or-pale);
  background:var(--ivoire-2); text-align:center; }
.verifiable .surtitre { text-align:center; padding-left:.4em; margin-bottom:18px; }
.verifiable p { font-family:'Lora',serif; font-style:italic; font-size:19px; line-height:1.7; color:var(--brun); }
@media (max-width:640px) { .verifiable { padding:28px 24px; } .engagement + .engagement { margin-top:64px; } }

/* Navigation mobile : marque au-dessus, liens centrés dessous */
@media (max-width:760px) {
  .nav { flex-direction:column; justify-content:center; gap:11px; padding:14px 16px 12px; }
  .nav-logo { font-size:11px; letter-spacing:.24em; }
  .nav-liens { gap:22px; justify-content:center; }
  .nav-liens a { font-size:12px; letter-spacing:.13em; padding:2px 0; }
  main { padding-top:92px; }
}
@media (max-width:370px) {
  .nav-liens { gap:15px; }
  .nav-liens a { font-size:11.5px; letter-spacing:.09em; }
}

/* ==========================================================================
   Finition Pictet × Knightsbridge — MMXXVI / septembre
   ========================================================================== */

/* 1 · L'image d'ouverture occupe toute la largeur, en format cinéma */
.lumiere { max-width:none; padding:0; }
.lumiere video { aspect-ratio:21/9; }
.lumiere-legende { margin-top:24px; }
@media (max-width:760px) { .lumiere video { aspect-ratio:4/3; } }

/* 2 · Les images des univers réagissent au survol, sans excès */
.carte .cadre { overflow:hidden; margin-bottom:26px; background:var(--ivoire-2); }
.carte .cadre img { margin-bottom:0; transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s ease; }
.carte:hover .cadre img { transform:scale(1.035); filter:brightness(1.03); }
@media (prefers-reduced-motion:reduce) { .carte .cadre img { transition:none; } .carte:hover .cadre img { transform:none; } }

/* 3 · Une seule bande profonde, réservée aux engagements */
.bande-profonde { background:#2E2416; color:#EFE7D6; padding:120px 0 116px; }
.bande-profonde .surtitre { color:#C9B183; }
.bande-profonde .univers-titre { color:#FBFAF7; }
.bande-profonde .engagement-bref .chiffre { color:#C9B183; }
.bande-profonde .engagement-bref h3 { color:#FBFAF7; }
.bande-profonde .engagement-bref p { color:#D9CDB4; }
.bande-profonde .lien-sobre { color:#D9CDB4; border-bottom-color:#A8842C; }
.bande-profonde .lien-sobre:hover { color:#FBFAF7; border-bottom-color:#C9B183; }
.bande-profonde .engagement-bref { border-top:1px solid rgba(201,177,131,.28); padding-top:34px; }
@media (max-width:640px) { .bande-profonde { padding:84px 0 80px; } }

/* ==========================================================================
   Gouvernance privée — manifeste, distinction, destinations
   ========================================================================== */

/* Manifeste, juste après l'image d'ouverture */
.manifeste { max-width:760px; margin:0 auto; padding:0 28px; text-align:center; }
.manifeste .surtitre { text-align:center; padding-left:.4em; }
.manifeste h2 { font-family:'Lora',serif; font-weight:400; font-size:clamp(25px,3.4vw,34px);
  line-height:1.4; letter-spacing:.02em; color:var(--titre); margin-bottom:34px; }
.manifeste h2 em { font-style:italic; }
.manifeste p { font-size:19px; line-height:1.85; color:var(--brun); margin-bottom:1.5em; }
.manifeste p:last-child { margin-bottom:0; }
@media (max-width:640px) { .manifeste p { font-size:17.5px; } }

/* Distinction en deux colonnes */
.distinction { max-width:900px; margin:0 auto; padding:0 28px; }
.distinction-grille { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:34px; }
.distinction-col .tete { font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brun-doux); padding-bottom:12px; margin-bottom:20px; border-bottom:1px solid var(--filet); }
.distinction-col ul { list-style:none; }
.distinction-col li { font-size:17px; line-height:1.65; color:var(--brun); margin-bottom:14px; }
.distinction-col.maison li { color:var(--encre); }
@media (max-width:720px) { .distinction-grille { grid-template-columns:1fr; gap:36px; } }

/* Destinations */
.destinations { max-width:900px; margin:0 auto; padding:0 28px; text-align:center; }
.destinations .surtitre { text-align:center; padding-left:.4em; }
.destinations .villes { font-family:'Lora',serif; font-weight:400; font-size:clamp(17px,2.2vw,21px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--titre); line-height:2.1; }
.destinations .villes .sep { color:var(--or); margin:0 .5em; }
.destinations .precision { margin-top:26px; font-size:16.5px; font-style:italic; color:var(--brun-doux); line-height:1.7; }

/* La phrase de métier, sous la thèse du porche */
.these-sous { width:100%; max-width:34em; margin:38px auto 0; text-wrap:balance; font-size:clamp(17px,1.9vw,20px);
  line-height:1.75; color:var(--brun); font-style:italic; }
.these-sous strong { font-style:normal; font-weight:400; color:var(--titre); }
@media (max-width:640px) { .these-sous { margin-top:30px; font-size:16.5px; } }

/* Les destinations se replient naturellement sur petit écran */
@media (max-width:760px) {
  .destinations .villes { font-size:16px; letter-spacing:.1em; line-height:2.3; }
  .destinations .villes br { display:none; }
  .destinations .villes .sep { margin:0 .35em; }
}

/* Le nom de la Maison s'ajuste aux très petits écrans */
@media (max-width:400px) {
  .marque-nom { font-size:21px; letter-spacing:.18em; }
}
@media (max-width:340px) {
  .marque-nom { font-size:19px; letter-spacing:.13em; }
  .marque-baseline { letter-spacing:.24em; }
}

/* L'adresse électronique tient sur les plus petits écrans */
@media (max-width:380px) {
  .acces-adresse .courriel { font-size:16px; letter-spacing:.01em; }
}