/* ════════════════════════════════════════════════════════
   SKILLS.CSS — Design éditorial / artistique
   Page compétences Abdelmalek Limari
════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────── */
.skills-hero {
  min-height:75vh; display:flex; align-items:center;
  padding:clamp(7rem,14vh,10rem) 0 clamp(4rem,7vh,6rem);
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(232,104,42,.17) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 85% 85%, rgba(232,104,42,.06) 0%, transparent 50%),
    var(--bg);
}

.skills-hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(3.8rem,9vw,9.5rem);
  font-weight:700; line-height:.88;
  color:var(--text); margin-bottom:2rem;
  will-change:transform;
}
.skills-hero-title span { display:block; }
.skills-hero-title em   { color:var(--accent); font-style:italic; display:block; }

.skills-hero-sub {
  font-size:.82rem; color:var(--text2);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:3.5rem;
}

/* Compteurs */
.skills-count-row {
  display:flex; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding-top:2.5rem; gap:0;
}
.skills-count-item { padding-right:3rem; }
.skills-count-sep  {
  width:1px; height:44px; background:var(--border);
  margin-right:3rem; flex-shrink:0;
}
.skills-count-num {
  font-family:'Playfair Display',serif;
  font-size:3.6rem; font-weight:700; color:var(--accent);
  line-height:1; display:block;
}
.skills-count-label {
  font-size:.66rem; color:var(--text3);
  letter-spacing:.14em; text-transform:uppercase; margin-top:4px; display:block;
}

/* ── Blocks généraux ────────────────────────────────── */
.skills-block {
  position:relative;
  padding:clamp(5rem,9vw,8rem) 0;
  overflow:hidden;
}
.skills-block-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none; will-change:transform;
}
.skills-block-gradient { position:absolute; inset:0; }

.gradient-design {
  background:
    radial-gradient(ellipse 55% 50% at 85% 50%, rgba(232,104,42,.09) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
.gradient-av {
  background:
    radial-gradient(ellipse 50% 55% at 15% 50%, rgba(232,104,42,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 50%, var(--bg2) 100%);
}
.gradient-dev {
  background:
    radial-gradient(ellipse 40% 50% at 72% 30%, rgba(232,104,42,.1) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
}
.gradient-savoir {
  background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}

/* Grid / texture de fond */
.skills-block-grid {
  position:absolute; inset:0; opacity:.04;
  background-image:
    linear-gradient(rgba(240,235,224,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,235,224,.5) 1px, transparent 1px);
  background-size:52px 52px;
}
.skills-block-grid--diag {
  background-image:
    repeating-linear-gradient(-45deg,
      var(--accent) 0px, var(--accent) 1px,
      transparent 1px, transparent 52px);
  opacity:.025;
}
.skills-block-grid--dots {
  background-image:radial-gradient(circle, rgba(232,104,42,.45) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.065;
}

.skills-block-inner { position:relative; z-index:2; }

/* ── Label de section ───────────────────────────────── */
.skills-block-label {
  display:flex; align-items:center; gap:12px;
  margin-bottom:3.5rem;
}
.skills-num {
  font-family:'Playfair Display',serif;
  font-size:3.8rem; font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,104,42,.28);
  line-height:1; flex-shrink:0;
}
.skills-slash { color:var(--accent); font-size:1.1rem; opacity:.5; }
.skills-cat {
  font-size:.7rem; font-weight:700;
  color:var(--text2); letter-spacing:.18em; text-transform:uppercase;
}

/* ── Layout 3 colonnes par block ────────────────────── */
.skills-block-layout {
  display:grid;
  grid-template-columns:180px 1fr 240px;
  gap:clamp(2rem,4vw,5rem);
  align-items:start;
}
@media(max-width:1024px) {
  .skills-block-layout { grid-template-columns:1fr 1fr; }
  .skills-block-heading { writing-mode:horizontal-tb; transform:none; font-size:clamp(2rem,5vw,3.5rem); }
}
@media(max-width:680px) {
  .skills-block-layout { grid-template-columns:1fr; gap:2rem; }
  .skills-count-sep { display:none; }
  .skills-count-item { padding-right:0; min-width:100px; }
}

/* Titre vertical style éditorial */
.skills-block-heading {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,4vw,4.5rem);
  font-weight:700; line-height:1;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  color:var(--text);
  display:flex; align-items:center;
  align-self:stretch;
  will-change:transform;
}
.skills-block-heading em { color:var(--accent); font-style:italic; }

/* ── Outils (icônes + barres) ───────────────────────── */
.skills-tools-grid {
  display:flex; flex-direction:column; gap:1.5rem;
}
.skill-tool-item {
  display:flex; align-items:center; gap:1.2rem; cursor:default;
}
.skill-tool-icon {
  width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px;
  transition:border-color .25s, background .25s, transform .25s;
}
.skill-tool-item:hover .skill-tool-icon {
  border-color:var(--border-h); background:var(--bg4);
  transform:scale(1.08) translateY(-2px);
}
.tool-icon-img {
  width:30px; height:30px; object-fit:contain;
  filter:grayscale(1) brightness(1.3);
  transition:filter .3s ease;
}
.skill-tool-item:hover .tool-icon-img { filter:grayscale(0) brightness(1); }

.skill-tool-info { flex:1; }
.skill-tool-name {
  font-size:.9rem; font-weight:600; color:var(--text);
  display:block; margin-bottom:6px; letter-spacing:.02em;
}
.skill-tool-bar {
  height:2px; background:var(--border);
  border-radius:999px; overflow:hidden;
}
.skill-tool-fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), rgba(232,104,42,.5));
  width:0%; border-radius:999px;
  transition:width 1.5s cubic-bezier(.16,1,.3,1);
}
.skill-tool-fill.animated { width:var(--w); }

/* ── Code list (langages) ───────────────────────────── */
.skills-code-list {
  display:flex; flex-direction:column; gap:1.3rem;
}
.code-item {
  display:flex; align-items:center; gap:1rem;
}
.code-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.code-lang {
  font-family:'Inter',monospace;
  font-size:.9rem; font-weight:600; color:var(--text);
  width:115px; flex-shrink:0;
}
.code-bar {
  flex:1; height:2px; background:var(--border);
  border-radius:999px; overflow:hidden;
}
.code-fill {
  height:100%; width:0%; background:var(--accent);
  border-radius:999px;
  transition:width 1.3s cubic-bezier(.16,1,.3,1);
}
.code-fill.animated { width:var(--w); }

/* ── Texte éditorial ────────────────────────────────── */
.skills-block-text { padding-top:.5rem; }
.skills-block-text p {
  font-size:1rem; color:var(--text2); line-height:1.85; max-width:300px;
}
.skills-block-text em { color:var(--accent); font-style:italic; }

/* ── Pills section savoir-faire ─────────────────────── */
.skills-pills-large {
  display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem;
}
.pill-large {
  font-family:'Playfair Display',serif;
  font-size:clamp(.95rem,1.8vw,1.4rem);
  font-style:italic;
  color:var(--text2);
  padding:.6rem 1.5rem;
  border:1px solid var(--border); border-radius:999px; cursor:default;
  transition:color .25s, border-color .25s, background .25s, transform .28s;
}
.pill-large:hover {
  color:var(--text); border-color:var(--border-h);
  transform:translateY(-3px);
}
.pill-large.pill-accent {
  color:var(--accent);
  border-color:rgba(232,104,42,.3);
  background:rgba(232,104,42,.05);
}
.pill-large.pill-accent:hover {
  background:rgba(232,104,42,.1); border-color:var(--accent);
}

/* ── CTA final ──────────────────────────────────────── */
.skills-cta {
  padding:clamp(6rem,12vw,10rem) 0;
  text-align:center;
  background:
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(232,104,42,.13) 0%, transparent 65%),
    var(--bg);
  position:relative;
}
.skills-cta-label {
  font-size:.72rem; color:var(--text3);
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.5rem;
}
.skills-cta-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,8vw,8rem);
  font-weight:700; line-height:.92;
  color:var(--text); margin-bottom:3rem;
}
.skills-cta-title em { color:var(--accent); font-style:italic; display:block; }
.btn-cta-large {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:16px 44px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-family:'Inter',sans-serif; font-size:1rem; font-weight:600;
  letter-spacing:.02em;
  transition:background .25s, box-shadow .25s, transform .25s;
  text-decoration:none;
}
.btn-cta-large:hover {
  background:var(--accent-h);
  box-shadow:0 12px 40px rgba(232,104,42,.4);
  transform:translateY(-3px);
}