/* olivier-duffez.fr — feuille de style unique.
   Charte reprise de webrankexpert.com : corail principal, jaune secondaire, noir.
   Police : Space Grotesk, auto-hébergée (voir README.md).
   Le seul JavaScript de la page rend cliquable le lien obfusqué des mentions légales. */

/* Police variable : un seul fichier porte toutes les graisses de 300 à 700.
   Récupéré par fonts/recuperer-polices.py. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --corail: #ed5a68;
  --corail-fonce: #d43f4e;
  --jaune: #ffd95f;
  --noir: #212121;
  --gris: #6b6360;
  /* Ces trois là ne servent à rien sur ce site depuis le 12/09/2026 : les filets gris ont
     disparu et la page n'a pas de section en fond creux. Elles restent déclarées parce que
     c'est la palette du gabarit commun, celle de webrankexpert.com, qui les emploie toutes. */
  --trait: #e6dedc;
  --fond: #ffffff;
  --fond-creux: #faf6f5;
  --pied: #1a1616;
  --pied-texte: #efe8e7;
  --pied-gris: #a79b99;
  --police: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --largeur: 1080px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--noir);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--corail-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--noir); }

:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; }

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--noir);
  color: #fff;
  padding: 10px 16px;
}
.evitement:focus { left: 12px; top: 12px; z-index: 10; }

/* En-tête collant, sur ordinateur comme sur mobile. Il occupe toute la largeur pour que son
   fond couvre la bande entière ; c'est le padding latéral qui centre son contenu sur la largeur
   du site, ce qui évite un div intérieur. Même dispositif que sur webrankexpert.com. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond-creux);
  padding: 22px max(24px, calc((100% - var(--largeur)) / 2));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  transition: padding .18s ease-out, box-shadow .18s ease-out;
}
/* État réduit, posé par le script au delà de 40 px de défilement. L'ombre n'apparaît qu'ici :
   sans elle, le texte passerait sous l'en-tête sans aucune limite visible. */
.entete--reduite {
  padding-top: 11px;
  padding-bottom: 11px;
  box-shadow: 0 1px 14px rgba(33, 33, 33, .11);
}
.entete__nom { display: block; line-height: 0; }
.entete__nom img { width: 200px; height: auto; transition: width .18s ease-out; }
.entete--reduite .entete__nom img { width: 146px; }

/* Rien ne doit se retrouver sous l'en-tête collant quand on arrive par une ancre. */
[id] { scroll-margin-top: 96px; }
.entete__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.entete__nav a {
  color: var(--noir);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--jaune);
}
.entete__nav a:hover { color: var(--corail-fonce); border-bottom-color: var(--corail); }

/* Premier écran */
main { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* En-tête et premier écran en une seule bande crème pleine largeur, le contenu commençant sur
   blanc en dessous. Décision d'Olivier du 15/09/2026 sur webrankexpert.com, reportée ici le
   même jour (les deux satellites partagent l'apparence). Le premier écran reste dans le flux
   de main, à sa largeur : c'est un pseudo-élément étiré de 50 % moins 50 vw de chaque côté qui
   peint le fond (main est centré, donc il tombe sur les bords de la fenêtre). Sur ordinateur,
   100 vw compte la barre de défilement : `overflow-x: clip` sur html coupe les pixels de trop
   sans créer de défilement ni casser l'en-tête collant (contrairement à `hidden`). */
html { overflow-x: clip; }
.hero { position: relative; z-index: 0; }
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--fond-creux);
  z-index: -1;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0 56px;
}
.hero__eyebrow {
  margin: 0 0 14px;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero__role {
  margin: 14px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--corail-fonce);
}
.hero__accroche {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: 1.1rem;
}
.hero__precision { margin: 12px 0 0; font-size: .88rem; color: var(--gris); }
.hero__portrait { margin: 0; }
.hero__portrait img {
  width: 100%;
  border-radius: 3px;
  border-bottom: 8px solid var(--jaune);
}

.bouton {
  display: inline-block;
  margin-top: 30px;
  background: var(--corail);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 15px 30px;
  border-radius: 3px;
}
.bouton:hover { background: var(--noir); color: #fff; }

/* Sections. Un seul traitement de H2 sur les deux pages : noir, et c'est un filet corail
   posé au-dessus qui porte la couleur. Un H2 coloré perdrait de son poids. L'étiquette grise
   en petites capitales qui servait de H2 a été retirée le 12/09/2026, comme sur
   webrankexpert.com. Le surtitre du premier écran garde ce gris, mais c'est un paragraphe. */
main h2 {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
main h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  background: var(--corail);
  margin-bottom: 18px;
}
/* Si un H3 apparaît un jour sur ce site, il prend le corail, comme sur webrankexpert.com. */
main h3 { font-size: 1.2rem; margin: 30px 0 10px; color: var(--corail-fonce); }

.bio { padding: 8px 0 56px; }
.bio__texte { max-width: 62ch; display: flex; flex-direction: column; gap: 18px; }
.bio__texte p { margin: 0; }
.bio__texte p:first-child { font-size: 1.2rem; font-weight: 700; }

.reperes { padding: 34px 0 50px; }
.reperes__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
}
.reperes__liste li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 4px 20px;
  padding: 9px 0;
}
.reperes__date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--corail-fonce);
}
.reperes__suite { margin: 22px 0 0; font-size: .95rem; color: var(--gris); max-width: 62ch; }
.reperes__suite a { color: var(--corail-fonce); }

/* Pied */
.pied {
  background: var(--pied);
  color: var(--pied-texte);
  margin-top: 24px;
  padding: 52px 24px 52px;
}
.pied__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 40px;
}
.pied__titre {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jaune);
}
.pied__bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pied__bloc a { color: var(--pied-texte); text-decoration: none; }
.pied__bloc a:hover { color: var(--jaune); text-decoration: underline; }
.pied__reseaux a { display: inline-flex; align-items: center; gap: 10px; }
.pied__reseaux svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.pied__obfusque { cursor: pointer; }
.pied__obfusque:hover { color: var(--jaune); text-decoration: underline; }

/* Mentions légales */
.texte-legal { padding: 52px 0 64px; max-width: 68ch; }
.texte-legal h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 28px; }
.texte-legal h2 { margin: 42px 0 14px; }
.texte-legal p, .texte-legal li { margin: 0 0 14px; }
.texte-legal ul { padding-left: 20px; }
.texte-legal__date { margin-top: 32px; font-size: .9rem; color: var(--gris); }

@media (max-width: 780px) {
  main { padding: 0 20px; }
  .entete { padding: 16px 20px; gap: 10px 20px; }
  .entete__nom img { width: 152px; }
  .entete--reduite { padding-top: 9px; padding-bottom: 9px; }
  .entete--reduite .entete__nom img { width: 106px; }
  [id] { scroll-margin-top: 86px; }
  .entete__nav { gap: 8px 20px; }
  .entete__nav a { font-size: .95rem; }

  /* Le nom d'abord, la photo ensuite : sur un écran étroit, un portrait en tête
     occupe le premier écran sans dire de qui il s'agit. */
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 0 36px;
  }
  /* Sur un écran étroit, la photo prend toute la largeur et se recadre :
     un portrait carré de 240 px laissait une bande vide sur toute la hauteur. */
  .hero__portrait { max-width: none; }
  .hero__portrait img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 6%; }
  .hero__accroche { max-width: none; }
  .hero__eyebrow { margin-bottom: 10px; }
  .bouton { margin-top: 24px; }

  .bio { padding: 0 0 40px; }
  .bio__texte p:first-child { font-size: 1.12rem; }
  .reperes { padding: 32px 0 44px; }
  .reperes__liste li { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .pied { padding: 40px 20px 44px; }
  .pied__grille { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}