@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #2B0A12;
  --papier: #FAFAF7;
  --pierre: #EDEBE6;
  --pierre-survol: #E3E0D9;
  --fraise: #C4122F;
  --fraise-texte: #A50E27;
  --gris: #5E4A4E;
  --filet: #D8D5CE;
  --clair-sur-sombre: #D9C8CB;
  --clair-sur-rouge: #FFE3E6;
  --bord-champ: #8E7F82;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#contenu { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}
.pied a:focus-visible, .panneau-sombre a:focus-visible { outline-color: #FFFFFF; }
h1, h2, h3, p { margin: 0; }

.conteneur { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.lien-fort { display: inline-block; padding: 11px 0; font-weight: 600; }
.lien-rouge { color: var(--fraise-texte); }

.evitement { position: absolute; left: 16px; top: -80px; padding: 10px 16px; border-radius: 4px; background: var(--encre); color: #FFFFFF; z-index: 2; }
.evitement:focus { top: 8px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 4px; background: var(--fraise); color: #FFFFFF;
  font: 600 17px 'Schibsted Grotesk', Arial, sans-serif; cursor: pointer; transition: background-color .12s ease;
}
.bouton:hover { background: var(--fraise-texte); }
.bouton-second { border: 1px solid var(--bord-champ); background: transparent; color: var(--encre); }
.bouton-second:hover { background: var(--pierre-survol); }
.bouton-petit { min-height: 44px; padding: 0 18px; font-size: 16px; }
.bouton-texte { min-height: 48px; padding: 0 8px; border: 0; background: transparent; color: var(--fraise-texte); font: 600 16px 'Schibsted Grotesk', Arial, sans-serif; cursor: pointer; }
.bouton-texte:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Navigation */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 14px; padding-bottom: 14px; }
.nav-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; font-size: 16px; font-weight: 500; }
.nav-liens a, .nav-nom, .lien-bouton { padding: 11px 0; }
.nav-rouge { color: var(--fraise-texte); }
.nav-courant { color: var(--fraise-texte); font-weight: 700; }
.nav-nom { color: var(--gris); }
.nav-form { margin: 0; }
.lien-bouton { border: 0; background: none; font: inherit; cursor: pointer; }

/* Accueil */
.hero { padding-top: 60px; padding-bottom: 88px; }
.hero h1 { max-width: 11.5em; font-size: clamp(46px, 7.6vw, 108px); line-height: 1.01; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.decale { margin-left: 50%; margin-top: 56px; }
.hero-texte { max-width: 30em; font-size: 21px; line-height: 1.5; text-wrap: pretty; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-linkedin { display: inline-flex; margin-left: -12px; padding: 12px; color: var(--gris); }
.hero-linkedin svg { width: 20px; height: 20px; }
.hero-linkedin:hover { color: var(--fraise-texte); }

.titre-section { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; }
.chapo { margin-top: 10px; }
.chapo-large { max-width: 34em; }

.a-la-une { padding-bottom: 88px; }
.une-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.une-seule { grid-template-columns: minmax(0, 720px); }
.une-suite { margin-top: 32px; }

/* Cartes */
.carte { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: var(--pierre); }
.carte:has(.carte-lien):hover { background: var(--pierre-survol); }
.carte:has(.carte-lien):hover .carte-lien { color: var(--fraise-texte); }
.carte-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; background: var(--filet); }
.carte-corps { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.carte h3 { margin-top: 2px; font-size: 25px; line-height: 1.18; letter-spacing: -0.015em; font-weight: 500; }
.carte-lien::after { content: ''; position: absolute; inset: 0; }
.carte-texte { display: -webkit-box; margin-top: 10px; overflow: hidden; font-size: 16px; color: var(--gris); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.carte-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.contexte { font-size: 16px; font-weight: 600; color: var(--fraise-texte); }
/* Page Projets */
.groupe-projets + .groupe-projets { margin-top: 80px; }
.titre-groupe { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 32px; }
.grille-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; margin-top: 32px; }
.carte-service { padding: 20px 22px; }
.carte-service h3 { margin-top: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.carte-service p { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--gris); }
.carte-service .carte-actions { padding-top: 16px; }

.panneau-sombre { background: var(--encre); color: #FFFFFF; border-radius: 6px; padding: 26px 28px 14px; }
.panneau-sombre h2, .panneau-sombre h3 { font-size: 25px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; }
.prives { padding-bottom: 28px; }
.prives .grille-services { margin-top: 20px; }
.prives .carte-service { background: rgba(255, 255, 255, .09); }
.prives .carte-service h3 { font-size: 21px; font-weight: 600; }
.prives .carte-service p { color: var(--clair-sur-sombre); }
.prives .bouton-second { border-color: var(--clair-sur-sombre); color: #FFFFFF; }
.prives .bouton-second:hover { background: rgba(255, 255, 255, .14); }

/* Detail d'un projet */
.retour { margin-bottom: 28px; font-size: 16px; font-weight: 600; }
.retour a { display: inline-block; padding: 11px 0; }
.detail-projet { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.detail-image { width: 100%; border-radius: 6px; background: var(--pierre); }
.detail-titre { margin: 4px 0 0; }
.detail-texte { margin-top: 24px; max-width: 30em; font-size: 20px; line-height: 1.5; white-space: pre-line; }
.detail-actions { margin-top: 32px; }

/* Parcours */
.personne-entete .parcours-titre { margin-bottom: 0; }
.parcours-role { margin-top: 8px; }
.parcours-colonnes { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; margin-top: 48px; }
.rubrique + .rubrique { margin-top: 44px; }
.frise-rubrique { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.frise { margin: 18px 0 0; padding: 0; list-style: none; }
.jalon { position: relative; padding: 0 0 32px 30px; }
.jalon:last-child { padding-bottom: 0; }
.jalon::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--fraise); }
.jalon:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 13px; bottom: -13px; width: 2px; background: var(--fraise); }
.jalon-annee { font-size: 16px; font-weight: 600; color: var(--fraise-texte); }
.etape-titre { font-weight: 600; }
.etape-detail { margin-top: 2px; font-size: 16px; color: var(--gris); white-space: pre-line; }

/* Contact */
.personne-entete { display: flex; align-items: baseline; }
.personne-nom { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.personne-linkedin { display: inline-flex; margin: -12px 0 -12px -2px; padding: 12px; color: var(--gris); }
.personne-linkedin:hover { color: var(--fraise-texte); }
.personne-role { margin-top: 2px; font-size: 16px; color: var(--gris); }
.contact-phrase { font-size: 21px; }
.contact-grand { margin-top: 8px; font-size: min(7vw, 86px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; white-space: nowrap; color: var(--fraise-texte); }
.contact-personne { margin-top: 72px; }

/* Pages simples */
.page-simple { padding-top: 56px; padding-bottom: 104px; }
.titre-page { font-size: clamp(40px, 4.8vw, 64px); line-height: 1.03; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 32px; }
.texte-long { max-width: 44em; }
.texte-long .titre-page { margin-bottom: 16px; }
.texte-chapo { margin-top: 28px; font-size: 21px; line-height: 1.5; }
.prose { margin-top: 28px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 44px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.prose h3 { margin-top: 32px; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; }
.prose h4 { margin-top: 24px; font-size: 19px; font-weight: 600; }
.prose a { color: var(--fraise-texte); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 2px solid var(--fraise); color: var(--gris); }
.prose code { padding: 1px 5px; border-radius: 3px; background: var(--pierre); font-size: .9em; overflow-wrap: anywhere; }
.prose pre { padding: 16px 18px; border-radius: 6px; background: var(--pierre); overflow-x: auto; }
.prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.prose hr { border: 0; border-top: 1px solid var(--filet); }
.erreur-page { padding-top: 88px; padding-bottom: 120px; }
.erreur-page h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.03; letter-spacing: -0.03em; font-weight: 500; }
.erreur-page p { margin-top: 20px; max-width: 34em; }
.erreur-page p + p { margin-top: 32px; }

/* Pied de page */
.pied { background: var(--fraise); color: #FFFFFF; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 28px; padding-bottom: 28px; font-size: 16px; }
.pied-bas a { display: inline-block; padding: 6px 0; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* Gestion */
.gestion-page { padding-top: 56px; padding-bottom: 96px; }
.gestion-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.gestion-tete h1 { font-size: clamp(40px, 4.8vw, 64px); line-height: 1.03; letter-spacing: -0.03em; font-weight: 500; }
.gestion-tete p { margin-top: 12px; }
.gestion { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; margin-top: 48px; }
.gestion-listes { display: flex; flex-direction: column; gap: 40px; }
.groupe-clair h2, .panneau-pierre h2 { font-size: 25px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; }
.groupe-clair h2, .panneau-sombre h2 { margin-bottom: 14px; }
.rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px; min-height: 64px; padding: 10px 0; border-top: 1px solid var(--filet); }
.panneau-sombre .rang { border-top-color: rgba(255, 255, 255, .28); }
.rang-nom { font-size: 21px; font-weight: 500; overflow-wrap: anywhere; }
.rang-action { padding: 10px 0; font-size: 16px; font-weight: 600; }
.vide-note { padding: 16px 0; border-top: 1px solid var(--filet); color: var(--gris); }
.panneau-sombre .vide-note { border-top-color: rgba(255, 255, 255, .28); color: var(--clair-sur-sombre); }

.panneau-pierre { padding: 28px; border-radius: 6px; background: var(--pierre); }
.panneau-suite { margin-top: 24px; }
.panneau-texte { margin-top: 40px; max-width: 880px; }
.formulaire { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.panneau-texte .formulaire { margin-top: 0; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .case label { font-size: 16px; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--bord-champ); border-radius: 4px;
  background: #FFFFFF; color: var(--encre); font: 400 17px 'Schibsted Grotesk', Arial, sans-serif;
}
.champ textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.champ input[type="file"] { padding: 10px 12px; font-size: 16px; }
.champ small, .case small { font-size: 15px; line-height: 1.4; color: var(--gris); }
.champ [aria-invalid="true"] { border-color: var(--fraise-texte); border-width: 2px; }
.champ .champ-erreur { color: var(--fraise-texte); font-weight: 600; }
.case { display: flex; flex-direction: column; gap: 2px; }
.case label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.case input, .image-actuelle input { width: 20px; height: 20px; flex: none; accent-color: var(--fraise); }
.image-actuelle { display: flex; flex-direction: column; gap: 8px; }
.image-actuelle img { max-height: 180px; border-radius: 4px; }
.image-actuelle label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.message { margin-top: 24px; padding: 12px 16px; border-radius: 4px; background: var(--pierre); font-size: 16px; font-weight: 600; }
.texte-long .message { margin: 0 0 24px; }
.message-erreur { background: #FFFFFF; color: var(--fraise-texte); border: 1px solid var(--fraise-texte); }
.panneau-pierre .message { margin-top: 16px; }

@media (max-width: 860px) {
  .conteneur { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 40px; padding-bottom: 64px; }
  .decale { margin-left: 0; margin-top: 36px; }
  .gestion, .une-grille, .detail-projet { grid-template-columns: 1fr; gap: 32px; }
  .une-grille { gap: 24px; }
  .a-la-une { padding-bottom: 64px; }
  .contact-personne { margin-top: 48px; }
  .parcours-colonnes { grid-template-columns: 1fr; gap: 44px; }
  .panneau-pierre { padding: 22px 20px; }
  .panneau-sombre { padding: 22px 20px 10px; }
  .prives { padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
}