/* Base et thème */
:root {
  --bg: #ffffff;
  --fg: #0b0b0c;
  --muted: #5c6670;
  --brand: #3b82f6;     /* accent par défaut */
  --card: #f6f8fb;
  --border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --fg: #e6e6e6;
    --muted: #9aa3ad;
    --brand: #60a5fa;
    --card: #14161a;
    --border: #262a30;
  }
}

/* Défilement et reset */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Accessibilité animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Conteneurs et utilitaires */
.container { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3rem 0; }                 /* réduit vs avant */
h1, h2, h3 { line-height: 1.2; margin: 0 0 1rem; }
p { margin: 0 0 1rem; color: var(--muted); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip { position: absolute; left: -9999px; top: auto; }
.skip:focus {
  left: 1rem; top: 1rem; background: var(--brand); color: #fff;
  padding: .5rem .75rem; border-radius: .5rem;
}

/* Header sticky, image à droite */
.site-header {
  padding: 2.0rem 0 1.5rem;                   /* un peu plus compact */
  position: sticky; top: 0; backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.site-header .container { position: relative; padding-right: 7.5rem; }

.brand-badge{
  position: absolute; right: 1.25rem; top: .75rem;
  width: clamp(72px, 10vw, 120px);
  height: clamp(72px, 10vw, 120px);
  object-fit: contain;
  border-radius: .5rem;
}

.tagline { margin-top: .25rem; }
.nav { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 1rem 0 0; flex-wrap: wrap; }
.nav a { padding: .4rem .6rem; border-radius: .4rem; }
.nav a:hover { background: var(--card); text-decoration: none; }

.cta { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.btn {
  display: inline-block; background: var(--brand); color: white;
  padding: .65rem 1rem; border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--brand) 85%, black 10%);
}
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn.tiny { padding: .4rem .65rem; font-size: .9rem; }

/* Highlights */
.highlights { display: grid; gap: .4rem; padding-left: 1.2rem; }

/* Sélecteur d’accent sous l’image (sticky) */
.accent-picker {
  position: absolute;
  right: 1.25rem;
  top: calc(.75rem + clamp(72px, 10vw, 120px) + .35rem);
  z-index: 11;
}
.accent-picker fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.accent-picker legend { position: absolute; left: -9999px; }
.accent-picker input[type="radio"] {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
}
.accent-picker label {
  inline-size: 1.1rem; block-size: 1.1rem;
  border-radius: 999px; display: inline-block; border: 2px solid var(--border);
  cursor: pointer;
}
/* Pastilles colorées (sans noir) */
label[for="c-blue"]   { background: #3b82f6; }
label[for="c-cyan"]   { background: #06b6d4; }
label[for="c-green"]  { background: #22c55e; }
label[for="c-violet"] { background: #8b5cf6; }
label[for="c-orange"] { background: #f59e0b; }
label[for="c-red"]    { background: #ef4444; }
label[for="c-yellow"] { background: #facc15; }

/* Visualisation de la pastille sélectionnée */
:root:has(#c-blue:checked)   label[for="c-blue"],
:root:has(#c-cyan:checked)   label[for="c-cyan"],
:root:has(#c-green:checked)  label[for="c-green"],
:root:has(#c-violet:checked) label[for="c-violet"],
:root:has(#c-orange:checked) label[for="c-orange"],
:root:has(#c-red:checked)    label[for="c-red"],
:root:has(#c-yellow:checked) label[for="c-yellow"] {
  border-color: currentColor;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bg) 70%, transparent);
}

/* Surcharges de l'accent global --brand */
:root:has(#c-blue:checked)   { --brand: #3b82f6; }
:root:has(#c-cyan:checked)   { --brand: #06b6d4; }
:root:has(#c-green:checked)  { --brand: #22c55e; }
:root:has(#c-violet:checked) { --brand: #8b5cf6; }
:root:has(#c-orange:checked) { --brand: #f59e0b; }
:root:has(#c-red:checked)    { --brand: #ef4444; }
:root:has(#c-yellow:checked) { --brand: #facc15; }

/* Fallback responsive: palette sous la nav si espace réduit */
@media (max-width: 640px) {
  .accent-picker { position: static; margin: .25rem 0 .5rem auto; }
  .site-header { padding: 1.25rem 0 1rem; }
  .site-header .container { position: relative; padding-right: 1.25rem; }
  .brand-badge {
    position: static; display: block; margin-left: auto; margin-bottom: .5rem;
    width: clamp(64px, 22vw, 96px); height: clamp(64px, 22vw, 96px);
  }
  .nav { gap: .5rem; }
  .cta { gap: .5rem; }
  html { scroll-padding-top: 80px; } /* header plus compact */
}

/* Jauges SVG — animation par stroke-dasharray (fluide Chromium) */
.gauges {
  display: grid; gap: .75rem;                 /* réduit vs avant */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gauge-svg {
  --val: 75;            /* 0–100, défini inline */
  --size: 140px;
  --track: var(--border);
  --fill: var(--brand);
  --stroke: 12;
  --dur: 1.0s;

  width: var(--size); height: var(--size);
  position: relative; display: grid; place-items: center;
}
.gauge-svg svg { position: absolute; inset: 0; transform: rotate(-90deg); }

.gauge-svg .track {
  fill: none;
  stroke: var(--track);
  stroke-width: var(--stroke);
}
.gauge-svg .progress {
  fill: none;
  stroke: var(--fill);
  stroke-width: var(--stroke);
  stroke-linecap: round;

  /* pathLength="100" dans le HTML => valeurs en % */
  stroke-dashoffset: 0;
  stroke-dasharray: 0 100;                 /* démarre à 0% */
  animation: progress-array var(--dur) linear forwards;
}
@keyframes progress-array {
  to { stroke-dasharray: var(--val) 100; } /* remplit jusqu'au % */
}
.gauge-svg figcaption { display: grid; place-items: center; }
.gauge-svg .value { font-weight: 700; }
.gauge-svg .label { margin-top: .25rem; font-size: .9rem; color: var(--muted); text-align: center; }

/* Réduction du mouvement */
@media (prefers-reduced-motion: reduce) {
  .gauge-svg .progress { animation: none; stroke-dasharray: var(--val) 100; }
}

/* Cards projets */
.cards {
  display: grid; gap: .75rem;                /* réduit vs avant */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in oklab, black 10%, transparent); }

/* Timeline via <details> avec indice visuel */
details {
  background: var(--card); border: 1px solid var(--border); border-radius: .8rem; padding: .75rem 1rem; margin-bottom: .75rem;
}
details > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: .6rem; font-weight: 600; list-style: none;
}
details > summary:hover { background: var(--card); }
details > summary:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand) 40%, transparent); outline-offset: 2px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details > summary::after {
  content: "▸";
  margin-left: auto;
  transition: transform .25s ease;
  color: var(--muted);
}
details[open] > summary::after { transform: rotate(90deg); }
details[open] > summary { margin-bottom: .5rem; }
.timeline { margin: .25rem 0 0 1rem; }

/* Effet section active via :target */
:target h2 { text-decoration: underline; text-decoration-thickness: .18em; text-underline-offset: .2em; }

/* Apparitions douces des sections */
.section { animation: fade-up .5s ease both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer */
.site-footer { padding: 1.5rem 0; border-top: 1px solid var(--border); margin-top: 1.5rem; color: var(--muted); }

/* Formulaire */
.contact-form { display: grid; gap: .75rem; max-width: 560px; }
label { display: grid; gap: .35rem; }
input, textarea {
  font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--border);
  border-radius: .6rem; padding: .6rem .7rem;
}
input:focus, textarea:focus {
  outline: 3px solid color-mix(in oklab, var(--brand) 40%, transparent); outline-offset: 2px;
}

/* Décalage global pour les ancres (compense le header sticky) */
html { scroll-padding-top: 96px; }   /* ajuster si header plus haut */

/* Filet de sécurité pour les ancres ciblées */
.section, :target { scroll-margin-top: 96px; }

/* Mobile/tablette: sections plus compactes et colonnes uniques */
@media (max-width: 640px) {
  .section { padding: 2.25rem 0; }
  .gauges { grid-template-columns: 1fr; }
  .cards  { grid-template-columns: 1fr; }
}