/* Elysa Consulting Partners — direction du 02/10/2026.
   Noir neutre, blanc cassé, une seule touche sable. Aucun or, aucune serif.
   Polices servies en local : aucun appel extérieur. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --noir: #0e0e10;
  --noir-2: #151518;
  --noir-3: #1d1d21;
  --blanc: #f2f0ee;
  --gris: #b1ada9;
  --sable: #cdbb9d;
  --trait: rgba(242, 240, 238, 0.14);
  --trait-fort: rgba(242, 240, 238, 0.42);
  --titre: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --corps: 'Inter', system-ui, -apple-system, sans-serif;
  --ressort: cubic-bezier(0.22, 1, 0.36, 1);
  --marge: 64px;
  --e1: 8px; --e2: 16px; --e3: 28px; --e4: 48px; --e5: 88px; --e6: 140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--noir); -webkit-text-size-adjust: 100%; }

body {
  background: var(--noir); color: var(--blanc);
  font-family: var(--corps); font-weight: 400; font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--titre); font-weight: 300; letter-spacing: -0.03em; line-height: 1.06; color: var(--blanc); }
.geant { font-weight: 200; letter-spacing: -0.035em; }

.surtitre {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sable);
}

.gris { color: var(--gris); }

/* Marque */
.marque { display: inline-flex; align-items: center; gap: 14px; color: var(--blanc); text-decoration: none; }
.marque img { height: 36px; width: 36px; filter: brightness(0) invert(1); opacity: 0.94; }
.marque span { font-family: var(--titre); font-weight: 400; font-size: 17px; letter-spacing: 0.005em; white-space: nowrap; }
.marque { transition: opacity 0.2s ease, transform 0.3s var(--ressort); }
.marque:hover { transform: translateY(-1px); }
.marque:hover span { color: var(--sable); }
.marque:focus-visible { outline: 2px solid var(--sable); outline-offset: 6px; }
.marque:active { opacity: 0.75; }

/* Boutons */
.btn {
  display: inline-block; font-family: var(--corps); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; padding: 17px 30px; border: 1px solid transparent;
  transition: transform 0.35s var(--ressort), opacity 0.2s ease;
}
.btn.plein {
  color: #0e0e10; background: var(--blanc); border-color: var(--blanc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(205, 187, 157, 0.25);
}
.btn.contour { color: var(--blanc); background: transparent; border-color: var(--trait-fort); border-radius: 999px; }
.btn:hover { transform: translateY(-2px); }
.btn.contour:hover { border-color: var(--blanc); }
.btn:focus-visible { outline: 2px solid var(--sable); outline-offset: 4px; }
.btn:active { transform: translateY(0) scale(0.98); opacity: 0.88; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* Liens de texte */
.lien {
  color: var(--blanc); text-decoration: none; border-bottom: 1px solid var(--trait-fort); padding-bottom: 2px;
  transition: opacity 0.2s ease, transform 0.3s var(--ressort);
}
.lien:hover { border-bottom-color: var(--sable); color: var(--sable); }
.lien:focus-visible { outline: 2px solid var(--sable); outline-offset: 4px; }
.lien:active { opacity: 0.75; }

/* Image et texte : un seul modèle pour toutes les pages.
   L'image touche le bord de l'écran, sur toute la hauteur ; le texte occupe l'autre moitié. */
.duo { display: grid; grid-template-columns: 1fr 1fr; min-height: 86vh; border-top: 1px solid var(--trait); }
.duo.large { grid-template-columns: 1.3fr 0.7fr; }
.duo figure { position: relative; overflow: hidden; background: var(--noir-3); min-height: 420px; order: 0; }
.duo figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo .texte {
  order: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--e5) max(var(--marge), calc((100vw - 1440px) / 2 + var(--marge))) var(--e5) clamp(28px, 4.5vw, 72px);
}
.duo.inverse figure { order: 2; }
.duo.inverse .texte { padding: var(--e5) clamp(28px, 4.5vw, 72px) var(--e5) max(var(--marge), calc((100vw - 1440px) / 2 + var(--marge))); }

/* Le portrait d'Arnaud à la maquette : cadré sur lui, le bas et la gauche fondus */
.duo figure.arnaud img { object-position: 82% 40%; transform: scale(1.16); transform-origin: 82% 30%; }
.duo figure.arnaud::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(14,14,16,0.98) 0%, rgba(14,14,16,0.92) 24%, rgba(14,14,16,0) 54%),
    linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(14,14,16,0) 18%);
}
.duo:not(.inverse) figure.arnaud::after {
  background: linear-gradient(0deg, rgba(14,14,16,0.98) 0%, rgba(14,14,16,0.92) 24%, rgba(14,14,16,0) 54%);
}

@media (max-width: 900px) {
  :root { --marge: 22px; --e5: 60px; --e6: 88px; }
  .duo, .duo.large { grid-template-columns: 1fr; min-height: 0; }
  .duo figure, .duo.inverse figure { order: 0; aspect-ratio: 4 / 3; min-height: 0; }
  .duo .texte, .duo.inverse .texte { order: 1; padding: var(--e4) var(--marge) var(--e5); }
  /* Sur téléphone, le portrait garde le cadrage de l'ordinateur : visage entier, en haut du cadre */
  .duo figure.arnaud { aspect-ratio: 4 / 5; }
  body { font-size: 16px; }
  .marque span { font-size: 15px; }
}