/* PORTES (section d'aiguillage) */
.doors {
  display: grid; grid-template-columns: 1fr;
  gap: 16px;
  animation: fadeUp 0.4s 0.1s ease both;
}
.door {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2.5rem;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.3s ease;
}
.door:hover { transform: translateY(-8px) scale(1.02); border-color: var(--border2); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14); }
@media (prefers-reduced-motion: reduce) {
  .door { transition: border-color 0.15s; }
  .door:hover { transform: none; box-shadow: none; }
}
.door-label {
  font-size: 11px; font-weight: 400; color: var(--text3);
  margin-bottom: 1.25rem;
}
.door h2 {
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: 0.75rem;
}
.door p {
  font-size: 14px; color: var(--text2);
  line-height: 1.7; margin-bottom: 2rem; flex: 1;
}
.door-keywords {
  font-size: 13px; font-weight: 600;
  color: var(--text); line-height: 1.7; margin-bottom: 1.75rem;
}
.door-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  transition: gap 0.2s;
}
.door:hover .door-arrow { gap: 10px; }

/* ABOUT STRIP (section à propos) */
.about-strip {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 2.5rem; align-items: start;
  padding-top: 1.5rem;
}
.about-ava {
  width: 100px; height: 100px; border-radius: 50%;
  object-fit: cover; object-position: center 10%;
  border: 1px solid var(--border2);
  display: block;
}
.about-left { display: flex; flex-direction: column; gap: 0.25rem; }
.about-name { font-size: 14px; font-weight: 500; }
.about-handle { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text3); }
.about-location { font-size: 12.5px; color: var(--text3); }
.about-bio { font-size: 14px; font-weight: 300; color: var(--text2); line-height: 1.75; }
.about-right-col { display: flex; flex-direction: column; gap: 1rem; }
.about-langs { display: flex; gap: 5px; flex-wrap: wrap; }

/* HERO au format carte photo */
/* Accroche : capitales appliquées en CSS et non écrites dans le HTML — certains
   lecteurs d'écran épellent un texte tout en majuscules, et le copier-coller
   garde ainsi sa casse d'origine. */
.hero-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-top: -0.6rem; margin-bottom: 1.75rem;
}
.hero-tagline .sep { color: var(--text3); margin: 0 0.5em; }
/* HERO portrait vedette */
.hero-photo {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 3.5rem; align-items: center;
  margin-top: 2.25rem;
}
/* colonne de gauche : le portrait et, sous lui, la localisation */
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 1.9rem; }
.hero-loc {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 11.5px;
  color: var(--text2); white-space: nowrap;
}
.hero-loc svg { width: 13px; height: 13px; color: var(--text3); flex-shrink: 0; }

.hero-portrait { position: relative; width: 232px; height: 232px; margin: 0 auto; }
.hero-portrait::before {
  content: ""; position: absolute; inset: -16px;
  border-radius: 50%; border: 1.5px solid var(--border);
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.hero-ava {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: center 15%;
  border: 5px solid var(--bg);
  box-shadow: 0 0 0 1px var(--li), 0 18px 40px rgba(0,0,0,0.10);
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hero-portrait:hover .hero-ava {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px var(--li), 0 26px 52px rgba(0,0,0,0.17);
}

/* Anneau bleu tracé au chargement. Une box-shadow ne peut pas se dessiner
   partiellement : le cercle SVG prend le relais là où l'animation est permise,
   et la box-shadow reste le rendu par défaut (sans JS, ou en mouvement réduit). */
.hero-ring { display: none; }
html.reveal-on .hero-ring {
  display: block;
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  pointer-events: none;
  transform: rotate(-90deg);                    /* le tracé démarre en haut du cercle */
  transition: transform 0.4s ease;
}
html.reveal-on .hero-portrait:hover .hero-ring { transform: rotate(-90deg) scale(1.03); }
html.reveal-on .hero-ring circle {
  fill: none; stroke: var(--li); stroke-width: 1;
  stroke-dasharray: 732;                        /* circonférence : 2π × 116,5 */
  stroke-dashoffset: 732;
  animation: heroRingDraw 1.6s cubic-bezier(0.32, 0, 0.2, 1) 0.2s forwards;
}
@keyframes heroRingDraw { to { stroke-dashoffset: 0; } }
/* l'anneau statique laisse la place au tracé : on ne garde que l'ombre portée */
html.reveal-on .hero-ava { box-shadow: 0 18px 40px rgba(0,0,0,0.10); }
html.reveal-on .hero-portrait:hover .hero-ava { box-shadow: 0 26px 52px rgba(0,0,0,0.17); }
.hero-portrait:hover::before { transform: scale(1.04); border-color: var(--text3); }
.hero-body { display: flex; flex-direction: column; gap: 1.4rem; }
.hero-bio { font-size: 15px; font-weight: 300; color: var(--text2); line-height: 1.75; margin: 0; }
/* auto-fit : 4 cartes en ligne sur grand écran, 2×2 dès que la colonne se resserre */
.hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
/* Angles vifs, comme les cartes du portfolio : les boîtes de contenu sont
   angulaires sur tout le site, seuls les éléments cliquables de filtrage
   gardent une forme de pilule. */
.hero-cred {
  position: relative;          /* ancre l'infobulle de preuve */
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 0; background: var(--bg2);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.2s ease;
}
.hero-cred:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--border2);
  box-shadow: 0 24px 48px rgba(0,0,0,0.14);
}
.hero-cred-ic {
  width: 36px; height: 36px; border-radius: 0; flex: none;
  display: grid; place-items: center;
  background: var(--bg3); color: var(--text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-cred:hover .hero-cred-ic { background: var(--li); color: #FFFFFF; transform: scale(1.06); }
.hero-cred-ic svg { width: 18px; height: 18px; }
.hero-cred-t { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; }
.hero-cred-s {
  font-size: 10px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text3); margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ava, .hero-portrait::before, .hero-cred, .hero-cred-ic { transition: none; }
  .hero-portrait:hover .hero-ava, .hero-portrait:hover::before,
  .hero-cred:hover, .hero-cred:hover .hero-cred-ic { transform: none; }
}
.hero-contact { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 0.25rem; }
.about-solo { max-width: 760px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  .hero-photo { grid-template-columns: 1fr; gap: 2.25rem; justify-items: center; text-align: left; }
  .hero-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero-layout { grid-template-columns: 1fr; }
  .stats { width: 100%; margin-top: 2.5rem; }
  .doors { grid-template-columns: 1fr; }
  .about-strip { grid-template-columns: auto 1fr; }
  .about-links { display: none; }
}

/* Infobulle de preuve au survol d'une carte-repère du hero.
   Le texte est aussi rendu en .sr-only dans la carte : les lecteurs d'écran
   l'obtiennent sans qu'on ajoute six arrêts de tabulation en haut de page. */
.hero-cred::after {
  content: attr(data-proof);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 270px;
  padding: 8px 11px; border-radius: 0;
  background: var(--text); color: var(--bg2);
  font-family: 'DM Mono', monospace; font-size: 10.5px; line-height: 1.55;
  text-align: left; text-transform: none; letter-spacing: 0;
  z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease;
}
.hero-cred:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-cred::after { transition: none; } }
@media (max-width: 760px) { .hero-cred::after { display: none; } }