/* ==========================================================================
   Skoell — feuille de style unique.
   Portfolio CV energique, noir et blanc strict (coherent avec le logo) :
   avatar, cartes arrondies, ombres douces, jauges, chronologie, grille projets.
   Theme clair toujours par defaut (fond blanc, texte noir), quel que soit le
   systeme ; le sombre n'est accessible que via la bascule manuelle (attribut
   data-theme pose par script.js, memorise en localStorage).
   ========================================================================== */

/* --- Polices auto-hebergees (RGPD : aucun appel a Google) ---------------- */
@font-face {
  font-family: 'Jost';
  src: url('/polices/jost-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('/polices/jost-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/polices/inter-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/polices/inter-latin-ext.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons : palette claire (defaut) ------------------------------------ */
:root {
  --encre: #0b0b0c;
  --encre-douce: #55565c;
  --encre-tenue: #8b8c93;
  --fond: #eeeef0;
  --carte: #ffffff;
  --puce: #f1f1f3;
  --filet: #e6e6e9;
  --filet-fort: #d5d5da;

  --ombre-md: 0 1px 2px rgba(20,20,25,.04), 0 16px 32px -18px rgba(20,20,25,.28);
  --ombre-lg: 0 2px 4px rgba(20,20,25,.05), 0 30px 60px -22px rgba(20,20,25,.30);
  --ombre-halo: 0 18px 40px -14px rgba(20,20,25,.30);
  --anneau: 0 0 0 6px rgba(11,11,12,.05);

  --titre: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --large: min(1320px, 100% - 3rem);
  --rail: 4.75rem;
  --rythme: clamp(3.25rem, 6.5vw, 6rem);

  --r-sm: .6rem;
  --r-md: 1.1rem;
  --r-lg: 1.6rem;
  --r-pill: 999px;

  color-scheme: light;
}

/* --- Jetons : palette sombre — uniquement via bascule manuelle explicite -- */
:root[data-theme='dark'] {
  --encre: #f2f2f4;
  --encre-douce: #b6b7bd;
  --encre-tenue: #7d7e86;
  --fond: #08080a;
  --carte: #16161a;
  --puce: #1e1e23;
  --filet: #232328;
  --filet-fort: #2f2f36;
  --ombre-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 32px -16px rgba(0,0,0,.65);
  --ombre-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -20px rgba(0,0,0,.7);
  --ombre-halo: 0 20px 44px -14px rgba(0,0,0,.75);
  --anneau: 0 0 0 6px rgba(255,255,255,.06);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; margin: 0; line-height: 1.15; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
.texte-lien { border-bottom: 1px solid var(--filet-fort); transition: border-color .2s ease; }
.texte-lien:hover { border-color: var(--encre); }

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

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

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--fond);
  padding: .75rem 1.25rem; z-index: 60; border-radius: 0 0 var(--r-sm) 0;
}
.saut-contenu:focus { left: 0; top: 0; }

.rs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Rail d'icones (navigation laterale, fixe sur tous les formats) ------- */
.rail {
  position: fixed; inset: 0 auto 0 0;
  width: var(--rail);
  z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
  background: transparent;
}

.rail-nav { display: grid; gap: .4rem; }
.rail-nav a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  color: var(--encre-douce);
  transition: background-color .2s ease, color .2s ease;
}
.rail-nav a svg { width: 1.3rem; height: 1.3rem; }
.rail-nav a:hover { background: var(--puce); color: var(--encre); }
.rail-nav a[aria-current='true'] { background: var(--encre); color: var(--fond); }

.rail-infobulle {
  position: absolute; left: calc(100% + .7rem); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: .4rem .75rem;
  border-radius: var(--r-sm);
  background: var(--encre); color: var(--fond);
  font-family: var(--titre);
  font-size: .72rem;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.rail-nav a:hover .rail-infobulle,
.rail-nav a:focus-visible .rail-infobulle,
.bascule-theme:hover .rail-infobulle,
.bascule-theme:focus-visible .rail-infobulle {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.bascule-theme {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--filet-fort);
  background: var(--puce);
  color: var(--encre);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.bascule-theme:hover { transform: translateY(-1px); }
.bascule-theme svg { width: 1.15rem; height: 1.15rem; }
.bascule-theme .icone-lune { display: none; }
:root[data-theme='dark'] .bascule-theme .icone-soleil { display: none; }
:root[data-theme='dark'] .bascule-theme .icone-lune { display: block; }

/* --- Double vocabulaire : grand public (defaut) ou technique --------------
   Les deux versions sont dans la page ; le CSS n'en montre qu'une. L'attribut
   data-langage est pose sur <html> par script.js et memorise en localStorage. */
:root:not([data-langage='technique']) .v-tech { display: none; }
:root[data-langage='technique'] .v-simple { display: none; }

/* Selecteur a deux choix : les deux options restent lisibles en permanence,
   l'active est remplie. Plus explicite qu'une icone seule a deviner. */
.bascule-mode {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  z-index: 45;
  display: flex; align-items: center; gap: .25rem;
  padding: .4rem .4rem .4rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--filet-fort);
  background: color-mix(in srgb, var(--carte) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ombre-lg);
}

.bascule-mode-titre {
  font-family: var(--titre);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  margin-right: .45rem;
}

.bascule-mode-choix {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 2.6rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--encre-douce);
  font-family: var(--titre);
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.bascule-mode-choix svg { width: 1.15rem; height: 1.15rem; }
.bascule-mode-choix:hover { background: var(--puce); color: var(--encre); }

/* L'option active est pleine : le contraste indique l'etat sans ambiguite */
.bascule-mode-choix[aria-pressed='true'] {
  background: var(--encre);
  color: var(--fond);
}

/* --- Decalage du contenu principal, a droite du rail ---------------------- */
.decale { margin-left: var(--rail); min-height: 100vh; display: flex; flex-direction: column; }

/* --- Mobile et petites tablettes : le rail devient une barre d'onglets -----
   Un rail vertical mange trop de largeur sur telephone. En dessous de 48rem,
   il passe en bas de l'ecran, a la maniere d'une application. Contrairement au
   rail lateral, cette barre passe au-dessus du contenu qui defile : elle a donc
   besoin d'un fond, sinon les icones deviennent illisibles. */
@media (max-width: 48rem) {
  .rail {
    inset: auto 0 0 0;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .25rem;
    padding: .45rem .6rem;
    /* Marge de securite pour la barre d'accueil des iPhone */
    padding-bottom: calc(.45rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--carte) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--filet);
  }

  .rail-nav {
    flex: 1;
    display: flex;
    justify-content: space-around;
    gap: .1rem;
  }
  .rail-nav a { width: 2.6rem; height: 2.6rem; }
  .rail-nav a svg { width: 1.25rem; height: 1.25rem; }

  /* Les infobulles au survol n'ont pas de sens au doigt */
  .rail-infobulle { display: none; }

  .bascule-theme { flex: none; margin-left: .35rem; }

  .decale {
    margin-left: 0;
    /* De quoi ne jamais laisser la barre recouvrir la fin du contenu */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* La fleche de defilement remonte au-dessus de la barre */
  .hero-scroll { bottom: 1rem; }

  /* Le selecteur de vocabulaire se place au-dessus de la barre d'onglets */
  .bascule-mode {
    right: .75rem; left: auto;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    padding: .35rem .35rem .35rem .7rem;
  }
  .bascule-mode-titre { display: none; }
  .bascule-mode-choix { height: 2.4rem; padding: 0 .8rem; font-size: .82rem; }
}

/* Ecrans tres etroits : on garde les deux libelles, on resserre l'ensemble */
@media (max-width: 24rem) {
  .bascule-mode { right: .5rem; gap: .15rem; padding: .3rem; }
  .bascule-mode-choix { height: 2.2rem; padding: 0 .65rem; font-size: .78rem; gap: .35rem; }
  .bascule-mode-choix svg { width: 1rem; height: 1rem; }
}

@media (max-width: 22rem) {
  .rail-nav a { width: 2.3rem; height: 2.3rem; }
  .rail-nav a svg { width: 1.1rem; height: 1.1rem; }
}

/* --- Avatar (rond, fond encre) — reutilise dans le hero -------------------- */
.avatar {
  display: block;
  border-radius: 50%;
  background: var(--encre);
  transition: transform .3s ease, box-shadow .3s ease;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
:root[data-theme='dark'] .avatar img { filter: invert(1); }

/* --- Hero anime ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: min(44rem, 92vh);
  padding: clamp(3rem, 8vh, 5rem) 1.5rem;
}

.hero-fond {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--filet-fort) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 0%, transparent 75%);
  opacity: .55;
  animation: derive-fond 55s linear infinite;
}
@keyframes derive-fond { to { background-position: 520px 260px; } }
@media (prefers-reduced-motion: reduce) { .hero-fond { animation: none; } }

.hero-corps { position: relative; display: flex; flex-direction: column; align-items: center; }

/* --- Bloc logo anime : cercle qui se trace, loup qui se leve, point en orbite --
   Tout est derive de --marque : disque, anneaux et cercle trace grandissent ensemble. */
.hero-logo {
  --marque: clamp(9rem, 20vw, 13rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--marque) * 1.85);
  height: calc(var(--marque) * 1.85);
  margin-bottom: 2.5rem;
  animation: flotte 7s ease-in-out infinite;
  animation-delay: 2.4s;
}
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Cercle fin qui se dessine au chargement, puis tourne tres lentement */
.hero-trace { position: absolute; width: 100%; height: 100%; overflow: visible; animation: tourne 70s linear infinite 2.4s; }
.hero-trace circle {
  fill: none;
  stroke: var(--filet-fort);
  stroke-width: 1;
  /* 2 x PI x 96 = 603.19 : le trait fait exactement le tour du cercle */
  stroke-dasharray: 603.19;
  stroke-dashoffset: 603.19;
  animation: trace-cercle 1.6s cubic-bezier(.5,.1,.2,1) forwards .15s;
}
@keyframes trace-cercle { to { stroke-dashoffset: 0; } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Point qui parcourt le cercle une fois le trace termine */
.hero-orbite {
  position: absolute; width: 100%; height: 100%;
  opacity: 0;
  animation: apparait-simple .8s ease forwards 1.7s, tourne 14s linear infinite 1.7s;
}
.hero-orbite-point {
  position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%;
  background: var(--encre);
}

/* Disque noir : entre en scene avec un leger rebond */
.hero-avatar {
  width: var(--marque); height: var(--marque);
  padding: calc(var(--marque) * .17);
  box-shadow: var(--ombre-halo);
  position: relative; z-index: 1;
  opacity: 0;
  animation: pose-disque .9s cubic-bezier(.2,.9,.3,1.2) forwards .35s;
}
@keyframes pose-disque {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}
.hero-avatar:hover { transform: scale(1.05) rotate(-4deg); }

/* Le loup se leve : devoilement du bas vers le haut */
.hero-avatar img {
  clip-path: inset(100% 0 0 0);
  animation: leve-loup 1s cubic-bezier(.3,.7,.2,1) forwards .95s;
}
@keyframes leve-loup {
  from { clip-path: inset(100% 0 0 0); transform: translateY(18%); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

/* Ondes qui repartent du disque, une fois le logo installe */
.hero-anneaux { position: absolute; width: var(--marque); height: var(--marque); border-radius: 50%; }
.hero-anneaux::before, .hero-anneaux::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  opacity: 0;
  animation: sonar 4.2s ease-out infinite 2.2s;
}
.hero-anneaux::after { animation-delay: 4.3s; }
@keyframes sonar {
  0%   { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- Nom : lettres capitales qui se posent une a une --------------------- */
.hero-nom {
  display: flex;
  font-size: clamp(2.4rem, 7.5vw, 4rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em; /* compense l'espace final ajoute par letter-spacing */
  margin: 0;
}
.hero-nom span {
  display: inline-block;
  opacity: 0;
  animation: pose-lettre .75s cubic-bezier(.2,.8,.3,1) forwards;
}
.hero-nom span:nth-child(1) { animation-delay: 1.25s; }
.hero-nom span:nth-child(2) { animation-delay: 1.36s; }
.hero-nom span:nth-child(3) { animation-delay: 1.47s; }
.hero-nom span:nth-child(4) { animation-delay: 1.58s; }
.hero-nom span:nth-child(5) { animation-delay: 1.69s; }
.hero-nom span:nth-child(6) { animation-delay: 1.80s; }
@keyframes pose-lettre {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes apparait-simple { to { opacity: 1; } }

/* Sans animation : tout est immediatement en place */
@media (prefers-reduced-motion: reduce) {
  .hero-trace, .hero-orbite, .hero-avatar, .hero-avatar img, .hero-nom span,
  .hero-anneaux::before, .hero-anneaux::after {
    animation: none;
  }
  .hero-trace circle { stroke-dashoffset: 0; }
  .hero-orbite { opacity: 1; }
  .hero-avatar { opacity: 1; }
  .hero-avatar img { clip-path: none; }
  .hero-nom span { opacity: 1; }
  .hero-anneaux::before, .hero-anneaux::after { opacity: 0; }
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  color: var(--encre-tenue);
  animation: rebond 2.2s ease-in-out infinite;
}
.hero-scroll svg { width: 1.1rem; height: 1.1rem; }
.hero-scroll:hover { color: var(--encre); }
@keyframes rebond { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

/* --- Boutons --------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--encre);
  background: var(--encre); color: var(--fond);
  font-family: var(--titre);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-md); }
.bouton.creux { background: transparent; color: var(--encre); }
.bouton[disabled] { opacity: .5; cursor: progress; transform: none; }
.bouton-large { width: 100%; padding: 1rem 1.5rem; font-size: .85rem; }

/* --- Contenu ---------------------------------------------------------------- */
.contenu { padding: clamp(2rem, 4vw, 3.5rem) 0 4rem; }
.enveloppe { width: min(56rem, 100% - 3rem); margin: 0 auto; }

.section + .section { margin-top: var(--rythme); }

.section-tete { margin-bottom: 2.25rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .55rem;
  margin-bottom: 1rem;
  border-radius: var(--r-pill);
  background: var(--puce);
  font-family: var(--titre);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.eyebrow .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--encre); color: var(--fond);
  font-size: .62rem;
}
.section-tete h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Profil / hero */
.phrase-forte {
  font-family: var(--titre);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: 1.5rem;
  max-width: 20ch;
}
.profil p { font-size: 1.02rem; color: var(--encre-douce); max-width: 58ch; }

.cartes-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}
.carte-stat {
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--carte);
  box-shadow: var(--ombre-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
.carte-stat:hover { transform: translateY(-3px); box-shadow: var(--ombre-lg); }
.carte-stat .valeur {
  display: block;
  font-family: var(--titre);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: .5rem;
}
.carte-stat .legende { font-size: .78rem; color: var(--encre-tenue); }

/* Cartes generiques (base commune) */
.carte {
  background: var(--carte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-md);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Services */
.services-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; }
.service-carte { padding: 1.75rem; }
.service-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.service-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-sm);
  background: var(--encre); color: var(--fond);
  margin-bottom: 1.1rem;
}
.service-icone svg { width: 1.35rem; height: 1.35rem; }
.service-carte h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: .6rem; }
.service-carte p { font-size: .9rem; color: var(--encre-douce); margin-bottom: 1rem; }

.mots { display: flex; flex-wrap: wrap; gap: .4rem; }
.mots li, .mot {
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--puce);
  font-family: var(--titre);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--encre-douce);
  white-space: nowrap;
}

/* Competences — capacites expliquees en clair (les jauges en pourcentage ont
   ete abandonnees : « 95 % » ne veut rien dire pour un visiteur). */
.competences-grille { display: grid; gap: 1.25rem; }
.carte-competence, .carte-outils { padding: clamp(1.5rem, 3vw, 2.25rem); }
.carte-competence h3, .carte-outils h3 {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  margin-bottom: 1.6rem;
}

.capacites { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .capacites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; } }

.capacite { display: flex; align-items: flex-start; gap: .9rem; }
.capacite-icone {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; margin-top: .1rem;
  border-radius: 50%;
  background: var(--encre); color: var(--fond);
}
.capacite-icone svg { width: .85rem; height: .85rem; }
.capacite h4 { font-size: .97rem; font-weight: 500; margin-bottom: .35rem; }
.capacite p { font-size: .88rem; color: var(--encre-douce); line-height: 1.6; }

.carte-outils .mots { gap: .5rem; }

/* Plateformes regroupees par famille : une liste a plat deviendrait illisible */
.familles { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; } }
.famille h4 {
  font-size: .82rem;
  font-weight: 500;
  color: var(--encre);
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--filet);
}

/* Methode — chronologie */
.chronologie { position: relative; display: grid; gap: 2.25rem; padding-left: 3.5rem; }
.chronologie::before {
  content: '';
  position: absolute; left: 1.15rem; top: .3rem; bottom: 1.5rem;
  width: 1px;
  background: var(--filet-fort);
}
.etape { position: relative; }
.etape-noeud {
  position: absolute; left: -3.5rem; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: var(--encre); color: var(--fond);
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: var(--ombre-md);
}
.etape h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: .5rem; }
.etape p { font-size: .9rem; color: var(--encre-douce); max-width: 56ch; }

/* Tarif */
.tarif-carte {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-radius: var(--r-lg);
}
.tarif-carte .montant {
  font-family: var(--titre);
  font-size: clamp(3rem, 7vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.tarif-carte .unite { display: block; margin: .6rem 0 2rem; font-size: .85rem; color: var(--encre-tenue); }
.tarif-liste { display: grid; gap: .9rem; text-align: left; margin-bottom: 2rem; }
.tarif-liste li { display: flex; align-items: flex-start; gap: .75rem; font-size: .93rem; color: var(--encre-douce); }
.tarif-check {
  flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--puce); color: var(--encre);
}
.tarif-check svg { width: .8rem; height: .8rem; }

/* Contact */
.contact-grille { display: grid; gap: 1.5rem; }
@media (min-width: 54rem) { .contact-grille { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.contact-info-carte { padding: 2rem; }
.contact-info-carte p.lead { font-size: .92rem; color: var(--encre-douce); margin-bottom: 1.75rem; }
.contact-info-ligne { display: flex; align-items: flex-start; gap: .9rem; }
.contact-info-ligne + .contact-info-ligne { margin-top: 1.25rem; }
.contact-icone {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm);
  background: var(--puce); color: var(--encre);
}
.contact-icone svg { width: 1.1rem; height: 1.1rem; }
.contact-info-ligne strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.contact-info-ligne span, .contact-info-ligne a { font-size: .85rem; color: var(--encre-douce); }

.formulaire-carte { padding: 2rem; }
.formulaire { display: grid; gap: 1.25rem; }
.duo { display: grid; gap: 1.25rem; }
@media (min-width: 34rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.champ { display: grid; gap: .45rem; }
.champ label {
  font-family: var(--titre);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-sm);
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ select {
  padding-right: 2rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
.champ textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: var(--anneau);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-tenue); }
.champ option { background: var(--carte); color: var(--encre); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mention-rgpd { font-size: .78rem; color: var(--encre-tenue); }

.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

.retour {
  font-size: .86rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--puce);
}
.retour[hidden] { display: none; }
.retour.erreur { background: var(--puce); box-shadow: inset 3px 0 0 var(--encre); }

/* --- Pied -------------------------------------------------------------- */
.pied {
  width: min(56rem, 100% - 3rem);
  margin: 0 auto;
  padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center;
  font-size: .8rem;
  color: var(--encre-tenue);
}
.pied nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pied a:hover { color: var(--encre); }

/* --- Page de contenu simple (mentions, 404) ------------------------------ */
.page-simple { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: clamp(2rem, 6vw, 4rem) 1.5rem; }
.marque-mini { display: flex; align-items: center; gap: .7rem; margin-bottom: 3rem; }
.marque-mini img { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--encre); padding: .5rem; }
:root[data-theme='dark'] .marque-mini img { filter: invert(1); }
.marque-mini span { font-family: var(--titre); font-size: 1.15rem; font-weight: 600; }
.page { width: min(46rem, 100%); }
.page h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 500; margin-bottom: 2rem; }
.page h2 {
  font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-tenue);
  margin: 2.5rem 0 .9rem;
}
.page p, .page li { font-size: .93rem; color: var(--encre-douce); }
.page li { padding: .3rem 0; }
.page .retour-accueil { margin-top: 3rem; }

/* --- Apparition douce (uniquement si JS actif) --------------------------- */
html.js .anime { opacity: 0; transform: translateY(16px); }
html.js .anime.vu { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) {
  html.js .anime, html.js .anime.vu { opacity: 1; transform: none; transition: none; }
}

/* --- Impression : le portfolio redevient un CV imprimable ---------------- */
@media print {
  :root, :root[data-theme='dark'] {
    --encre: #000; --encre-douce: #333; --encre-tenue: #666;
    --fond: #fff; --carte: #fff; --puce: #f2f2f2; --filet: #ccc; --filet-fort: #999;
    --ombre-md: none; --ombre-lg: none; --ombre-halo: none;
  }
  body { font-size: 10.5pt; line-height: 1.45; }
  .rail { display: none !important; }
  .decale { margin-left: 0; }
  .hero { min-height: auto; padding: 0 0 1.5rem; }
  .hero-fond, .hero-anneaux, .hero-scroll, .hero-trace, .hero-orbite,
  .bascule-theme, form, .contact-info-carte .lead, .saut-contenu { display: none !important; }
  /* Le bloc logo n'a plus besoin de sa reserve d'espace pour les anneaux */
  .hero-logo { width: auto; height: auto; margin-bottom: 1rem; animation: none; }
  .carte, .carte-stat, .service-carte, .carte-competence, .carte-outils, .tarif-carte, .formulaire-carte, .contact-info-carte {
    box-shadow: none; border: 1px solid #ccc;
  }
  .section + .section { margin-top: 1.5rem; }
  .section { break-inside: avoid; }
  html.js .anime { opacity: 1; transform: none; }
  .hero-avatar, .hero-nom span { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-avatar img { clip-path: none !important; animation: none !important; }
  .pied { width: 100%; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; }
}