/* =========================================================
   site.css

   1. Base — reprise telle quelle du bloc <helmet> du composant
      d'origine.
   2. Adaptations écran — le composant était dessiné pour un
      grand écran et posait toute sa mise en forme en style
      inline, sans aucune règle responsive. Les surcharges
      ci-dessous rendent la page utilisable sur téléphone.
   3. Animations réduites.
   ========================================================= */

/* =========================================================
   1. Base
   ========================================================= */
html, body { margin: 0; padding: 0; }
body { background: #08090a; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent, #d6ff3f); }
::selection { background: var(--accent, #d6ff3f); color: var(--on-accent, #08090a); }
input, textarea, button { font: inherit; color: inherit; }
textarea { tab-size: 2; }
@keyframes md-pulse { 0%, 100% { opacity: .22 } 50% { opacity: .75 } }
html { scroll-behavior: smooth }
input, textarea { caret-color: var(--accent, #d6ff3f) }
:focus-visible { outline: 2px solid var(--accent, #d6ff3f); outline-offset: 3px }
::-webkit-scrollbar { width: 9px; height: 9px }
::-webkit-scrollbar-thumb { background: var(--line, #1c2022); border-radius: 6px }
::-webkit-scrollbar-track { background: transparent }

/* =========================================================
   2. Adaptations écran
   ========================================================= */

/* --- Tablette --- */
@media (max-width: 900px) {
  /* Le rail de chapitre vertical mange la marge du titre plein cadre */
  [data-r="chapRef"] { display: none; }

  /* Les cartes projet passent de 64vw à presque toute la largeur */
  [data-card] { flex: 0 0 80vw !important; padding: 28px 24px !important; }
  [data-card] h3 { font-size: 7vw !important; }

  /* L'éditeur passe de deux colonnes à deux lignes */
  [data-r="editRef"] > div > div:last-child {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr;
  }
}

/* --- Téléphone ---
   Le composant a été dessiné pour un grand écran : sections de
   plusieurs hauteurs d'écran, cartes plein cadre alignées en bas,
   barre sur un seul rang. Transposé tel quel sur un téléphone, ça
   donnait une barre de 200 px qui recouvrait les titres, des cartes
   presque vides et 18 écrans de défilement. Tout est repris ici. */
@media (max-width: 640px) {

  /* --- Barre : un seul rang, compact --- */
  [data-r="barTopRef"] > div {
    padding: 9px 14px !important;
    gap: 10px !important;
  }
  /* Le losange suffit à identifier la marque : le mot prend trop de place */
  [data-r="barTopRef"] a[href="#md-top"] span:last-child { display: none; }
  /* Le lien DEMO reste joignable depuis le pied de page */
  [data-r="barTopRef"] a[href="demo.html"] { display: none; }
  [data-r="barTopRef"] button { padding: 6px 9px !important; font-size: 11px !important; }
  /* Le bouton de thème garde sa pastille, pas son libellé */
  [data-r="themeBtnRef"] span:last-child { display: none; }

  /* La barre mesure environ 44 px : les ancres s'y calent */
  html { scroll-padding-top: 60px; }
  [data-r="shellViewRef"], [data-r="editRef"] { inset: 44px 0 0 !important; }
  [data-r="shellViewRef"] > div:first-child,
  [data-r="editRef"] { padding-inline: 14px !important; }
  [data-r="shellViewRef"] > div:last-child { padding-inline: 14px !important; }

  /* --- Hauteurs collantes : dvh, sinon la barre d'adresse rogne --- */
  [data-r="heroSecRef"] > div,
  [data-sheet] { height: 100dvh !important; }
  [data-r="aboutInnerRef"] { height: 100dvh !important; }

  /* --- Moins de défilement pour la même lecture --- */
  [data-r="heroSecRef"] { height: 150vh !important; }
  [data-r="aboutSecRef"] { height: 190vh !important; }

  /* --- Hero : le nom, puis le texte, sans surcharge --- */
  [data-r="heroSecRef"] > div { padding-top: 52px !important; }
  [data-r="heroTitleRef"], [data-r="heroTitle2Ref"] { font-size: 16vw !important; }
  [data-r="kickRef"] { font-size: 10.5px !important; letter-spacing: .2em !important; }
  [data-r="pitchRef"] { font-size: 15.5px !important; }
  [data-r="cueRef"] { display: none !important; }
  /* Bandeau d'état : on garde l'heure et la progression, le reste
     ne tient pas sur la largeur */
  [data-r="liveRef"] { left: 16px !important; bottom: 14px !important; gap: 12px !important; font-size: 9.5px !important; }
  [data-r="liveRef"] [data-live] { display: none; }

  /* --- Repères : une colonne --- */
  [data-r="statsSecRef"] > div:first-child { grid-template-columns: 1fr !important; }
  [data-r="statsSecRef"] [data-scrub] { font-size: 22vw !important; }
  [data-r="statsSecRef"] { padding-block: 48px !important; }

  /* --- Compétences : le libellé au-dessus de ses puces --- */
  [data-row] { grid-template-columns: 1fr !important; gap: 10px !important; padding-block: 16px !important; }
  /* Une seule colonne : le panneau reprend sa place naturelle */
  .skill-detail { grid-column: 1 !important; }
  [data-chip] { font-size: 13.5px !important; padding: 8px 12px !important; }

  /* --- Projets : le carrousel horizontal devient une pile ---
     Piloter un défilement latéral avec 4,6 écrans de défilement
     vertical est une idée de grand écran. En portrait, on empile. */
  [data-r="projSecRef"] { height: auto !important; }
  [data-r="projSecRef"] > div {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  [data-r="projSecRef"] > div > div:first-child { padding: 52px 0 18px !important; }
  [data-r="trackRef"] {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 0 8px !important;
    transform: none !important;
  }
  [data-card],
  [data-r="trackRef"] > article {
    flex: 0 0 auto !important;
    width: 100% !important;
    opacity: 1 !important;
    padding: 26px 20px !important;
  }
  [data-card] { justify-content: flex-start !important; }
  [data-card] h3 { font-size: 26px !important; }
  [data-card] p { font-size: 15px !important; }
  [data-card] [data-cardin] { transform: none !important; }
  /* Le grand chiffre en filigrane écrase la carte à cette taille */
  [data-card] > div[aria-hidden="true"] { font-size: 34vw !important; top: -6vw !important; }
  [data-r="trackRef"] > article:last-child p { font-size: 20px !important; }
  /* La jauge et le compteur n'ont plus d'objet sans défilement latéral.
     `!important` est nécessaire : ces éléments portent un `display`
     en style inline, qui l'emporterait sinon sur la règle. */
  [data-r="projBarRef"] { display: none !important; }
  [data-r="projSecRef"] > div > div:last-child { display: none !important; }
  [data-r="projIdxRef"] { display: none !important; }
  [data-r="projSecRef"] > div > div:first-child > div:last-child { display: none !important; }

  /* --- Dépannage --- */
  [data-sheet] { padding: 0 16px !important; }
  [data-sheet] h3 { font-size: 15vw !important; }
  [data-sheet] p { font-size: 16px !important; }
  [data-sheet] > div[aria-hidden="true"] { font-size: 42vw !important; }

  /* --- Essayer : le bouton passe sous le texte --- */
  [data-dlrow] { grid-template-columns: 1fr !important; gap: 12px !important; }
  [data-dlrow] a { justify-self: start !important; }

  /* --- Contact --- */
  [data-r="contactRef"] h2 { font-size: 16vw !important; }
  [data-r="contactRef"] a[href^="mailto"] { font-size: 5.6vw !important; word-break: break-all; }
  [data-r="contactRef"] { padding-block: 64px 72px !important; }

  /* --- Bandeau défilant --- */
  [data-r="mq1Ref"] { font-size: 15vw !important; }

  /* --- Marges générales --- */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  [data-r="skillsRef"], [data-r="projSecRef"] { padding-block: 52px !important; }
}

/* Très petits écrans */
@media (max-width: 380px) {
  [data-r="heroTitleRef"], [data-r="heroTitle2Ref"] { font-size: 15vw !important; }
  [data-r="barTopRef"] button { padding: 6px 7px !important; font-size: 10.5px !important; }
}

/* Le projecteur de code sous le nom n'a pas de sens sans pointeur fin */
@media (hover: none) {
  [data-r="spotRef"] { display: none !important; }
}

/* Le projecteur de code sous le nom n'a pas de sens sans pointeur fin */
@media (hover: none) {
  [data-r="spotRef"] { display: none !important; }
}

/* =========================================================
   3. Animations réduites
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-r="cvRef"], [data-r="depthRef"] { display: none; }
}

/* =========================================================
   4. Décors propres au thème « peinture »

   Le thème code est net : traits d'un pixel, angles droits,
   glyphes. La peinture doit se comporter autrement — bords
   irréguliers, matière qui coule, couleur qui déborde. Tout ce
   qui suit ne s'applique qu'à lui.
   ========================================================= */

/* --- Coulures sous chaque séparation de section --- */
[data-theme="paint"] section[style*="border-top"],
[data-theme="paint"] footer[style*="border-top"] {
  position: relative;
}
[data-theme="paint"] section[style*="border-top"]::before,
[data-theme="paint"] footer[style*="border-top"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--accent) 0%, var(--accent2) 34%, var(--accent3) 67%, var(--accent) 100%);
  opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 26'%3E%3Crect width='200' height='3' fill='black'/%3E%3Cellipse cx='22' cy='10' rx='4' ry='9' fill='black'/%3E%3Cellipse cx='67' cy='7' rx='3' ry='6' fill='black'/%3E%3Cellipse cx='108' cy='13' rx='5' ry='12' fill='black'/%3E%3Cellipse cx='151' cy='6' rx='3' ry='5' fill='black'/%3E%3Cellipse cx='183' cy='11' rx='4' ry='10' fill='black'/%3E%3C/svg%3E") repeat-x top / 200px 26px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 26'%3E%3Crect width='200' height='3' fill='black'/%3E%3Cellipse cx='22' cy='10' rx='4' ry='9' fill='black'/%3E%3Cellipse cx='67' cy='7' rx='3' ry='6' fill='black'/%3E%3Cellipse cx='108' cy='13' rx='5' ry='12' fill='black'/%3E%3Cellipse cx='151' cy='6' rx='3' ry='5' fill='black'/%3E%3Cellipse cx='183' cy='11' rx='4' ry='10' fill='black'/%3E%3C/svg%3E") repeat-x top / 200px 26px;
  animation: pt-drip 11s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
@keyframes pt-drip { from { transform: scaleY(.6) } to { transform: scaleY(1.25) } }

/* --- Les bandes du hero deviennent des coups de brosse --- */
[data-theme="paint"] [data-band] {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 14c52-10 96 6 148-2s96-14 152-4v40c-56 10-104-4-156 3S48 60 0 50z' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 14c52-10 96 6 148-2s96-14 152-4v40c-56 10-104-4-156 3S48 60 0 50z' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* --- Puces : la couleur mouille et déborde --- */
[data-theme="paint"] [data-chip] {
  position: relative;
  border-radius: 2px 9px 3px 8px;
  transition: color .3s ease, background .35s ease, border-color .3s ease, translate .18s ease;
}
[data-theme="paint"] [data-chip]:hover {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
  border-radius: 9px 3px 8px 2px;
}

/* --- Boutons : la matière s'étale au survol --- */
[data-theme="paint"] [data-mag] { border-radius: 3px 10px 4px 9px; }

/* --- Le rail de chapitre est écrit à la main --- */
[data-theme="paint"] [data-r="chapRef"] { letter-spacing: .2em; }

/* --- Le bandeau défilant est peint, pas gravé --- */
[data-theme="paint"] [data-r="mq1Ref"] { -webkit-text-stroke-width: 2px; }

/* --- Les feuilles « dépannage » se décollent comme du papier --- */
[data-theme="paint"] [data-sheet] {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v292c-40 6-72-4-112 1s-70 9-108 3-64-8-100-2-52 6-80 2z' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v292c-40 6-72-4-112 1s-70 9-108 3-64-8-100-2-52 6-80 2z' fill='black'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* --- Cartes projet : coins de papier découpé --- */
[data-theme="paint"] [data-card] { border-radius: 4px 14px 5px 12px; }

/* =========================================================
   5. Accessibilité
   ========================================================= */

/* Lien d'évitement */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* Texte réservé aux lecteurs d'écran */
.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;
}

/* Cible tactile minimale sur les commandes du terminal */
@media (pointer: coarse) {
  [data-cmd] { min-height: 34px; }
}


/* =========================================================
   6. Cartes projet : profondeur sans perte de lisibilité

   Le fondu d'origine (opacité 0,34 pour les cartes hors centre)
   faisait tomber le texte à 3,49:1, sous le seuil AA. La mise en
   retrait passe maintenant par l'échelle et par les seuls décors,
   pilotés par --k (1 = carte centrée).
   ========================================================= */
[data-card] {
  transform-origin: 50% 60%;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
/* Le grand chiffre en filigrane et l'éclaboussure s'estompent, pas le texte */
[data-card] > div[aria-hidden="true"] {
  opacity: calc(.2 + var(--k, 1) * .8);
  transition: opacity .4s ease;
}
[data-card] .card-fade { opacity: calc(.35 + var(--k, 1) * .65); }

@media (max-width: 640px) {
  /* Empilées, les cartes ne reculent plus */
  [data-card] { transform: none !important; }
  [data-card] > div[aria-hidden="true"] { opacity: .25 !important; }
}

/* =========================================================
   7. Grain du papier (thème peinture)

   Un aplat de couleur parfaitement lisse ne ressemble pas à de
   la peinture : c'est la matière du support qui fait la
   différence. Un bruit fin posé sur toute la page suffit à
   donner du grain, sans image à télécharger.
   ========================================================= */
[data-theme="paint"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

/* Curseur accordé à la direction : viseur en code, pointe de
   brosse en peinture. Uniquement pour un vrai pointeur. */
@media (hover: hover) and (pointer: fine) {
  [data-theme="code"] [data-r="folioViewRef"] { cursor: crosshair; }
  [data-theme="code"] a, [data-theme="code"] button,
  [data-theme="paint"] a, [data-theme="paint"] button { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="paint"] body::after { display: none; }
}

/* Préférence système « contraste élevé » : on renforce les traits
   et on écarte les décors qui mangent la lisibilité. */
@media (prefers-contrast: more) {
  [data-theme="code"] { --ink2: #cdd6cb; --ink3: #a9b2a7; --line: #3a423c; }
  [data-theme="paint"] { --ink2: #3a3529; --ink3: #4e4739; --line: #b9ad94; }
  [data-r="depthRef"], [data-r="cvRef"] { opacity: .18 !important; }
  [data-theme="paint"] body::after { display: none; }
}

/* =========================================================
   8. Détail des compétences

   Chaque puce est un bouton qui déplie une phrase sur l'usage
   réel du langage. Le survol prévisualise, le clic épingle.
   ========================================================= */
[data-chip][data-on] {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-chip][aria-expanded="true"] {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent) !important;
}
.skill-detail {
  /* La ligne est une grille « libellé | puces » : sans placement
     explicite, le panneau retombe dans la colonne du libellé et le
     texte se casse sur 180 px de large. */
  grid-column: 2;
  animation: sd-in .32s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes sd-in { from { opacity: 0; transform: translateY(-4px); } }

/* En peinture, le détail est écrit sur une bande de couleur claire */
[data-theme="paint"] .skill-detail {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
[data-theme="code"] .skill-detail::before { content: "// "; color: var(--ink3); }

/* Au doigt, la cible doit rester confortable */
@media (pointer: coarse) {
  [data-chip] { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-detail { animation: none; }
}