/* =========================================================
   CLIMAX STUDIO — a-propos.css
   Portrait éditorial sans slogan :
   - Bandeau identité (gros titre asymétrique + métadonnées)
   - 3 colonnes Qui / Quoi / Pour quoi avec gros chiffres
   - Tableau résumé "Carte d'identité créative"
   - Grille des compétences (flip cards conservées)
   ========================================================= */

/* ============ BANDEAU IDENTITÉ ============ */
.identity {
  padding: var(--s-7) 0 var(--s-9);
  border-bottom: var(--rule-w) solid var(--ink);
  margin-bottom: var(--s-9);
}

.identity__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: end;
}
@media (min-width: 1024px) {
  .identity__layout {
    /* Ratio 3:1 pour laisser de la place au nom */
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: var(--s-7);
  }
}

.identity__name {
  font-family: var(--font-display);
  font-weight: 900;
  /* Taille calibrée pour ne pas déborder + nowrap par lignes */
  font-size: clamp(40px, 7vw, 95px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  min-width: 0;
}
.identity__name em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  font-size: 0.7em;
  margin-bottom: var(--s-2);
  white-space: nowrap;
}
.identity__name .name-line {
  display: block;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .identity__name {
    font-size: clamp(40px, 11vw, 90px);
  }
}
.identity__name em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  font-size: 0.65em;
  margin-bottom: var(--s-2);
}

.identity__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-left: 2px solid var(--ink);
  padding-left: var(--s-5);
}
@media (max-width: 1023px) {
  .identity__meta {
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding-left: 0;
    padding-top: var(--s-5);
  }
}

.identity__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  border-bottom: var(--rule-w) solid var(--rule);
  padding-bottom: var(--s-3);
  flex-wrap: wrap;
}
.identity__meta-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.identity__meta-key {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.identity__meta-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 17px);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: right;
}

/* ============ 3 COLONNES BIO ============ */
.bio {
  padding-bottom: var(--s-9);
  border-bottom: var(--rule-w) solid var(--ink);
  margin-bottom: var(--s-9);
}
.bio__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
@media (min-width: 768px) {
  .bio__head {
    grid-template-columns: auto 1fr;
    gap: var(--s-7);
    align-items: end;
  }
}
.bio__num {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.bio__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.bio__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.bio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) {
  .bio__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-6);
  }
}

.bio-card {
  border: var(--rule-w) solid var(--ink);
  background: var(--paper-soft);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: background .25s, border-color .25s, transform .35s cubic-bezier(.2,.7,.2,1);
  min-height: 280px;
}
.bio-card:hover {
  background: var(--paper);
  border-color: var(--accent);
  transform: translateY(-4px);
}
.bio-card__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.bio-card__label {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: var(--rule-w) solid var(--rule);
  padding-top: var(--s-3);
}
.bio-card__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  color: var(--ink);
}
.bio-card__text strong { font-weight: 700; }

/* ============ COMPÉTENCES (flip cards) ============ */
.skills { padding-bottom: var(--s-9); }
.skills__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 768px) {
  .skills__head {
    grid-template-columns: auto 1fr;
    gap: var(--s-6);
    align-items: end;
  }
}
.skills__num {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.skills__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.skills__hint {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 600px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .skills-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- FLIP CARDS ---------- */
.skill-card {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.skill-card:hover { transform: translateY(-4px); }
.skill-card.is-hidden { display: none; }

.skill-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4, .0, .2, 1);
  transform-style: preserve-3d;
}
.skill-card.is-flipped .skill-card__inner {
  transform: rotateY(180deg);
}

.skill-card__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: var(--rule-w) solid var(--ink);
  background: var(--paper-soft);
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  text-align: center;
  transition: background .25s, border-color .25s;
}
.skill-card__face--front { z-index: 2; }
.skill-card:hover .skill-card__face--front {
  background: var(--paper);
  border-color: var(--accent);
}
.skill-card:hover .skill-card__face--front .skill-card__name {
  color: var(--accent);
}

.skill-card__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.skill-card:hover .skill-card__icon {
  transform: scale(1.1) rotate(-3deg);
}
.skill-card__name {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .25s;
}

.skill-card__hint {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  opacity: 0.6;
  text-transform: uppercase;
  transition: opacity .25s;
}
.skill-card:hover .skill-card__hint {
  opacity: 1;
  color: var(--accent);
}

.skill-card__face--back {
  transform: rotateY(180deg);
  background: var(--ink);
  border-color: var(--ink);
  padding: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: var(--s-2);
}
.skill-card__back-label {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.skill-card__back-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1;
}
.skill-card__back-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: var(--paper);
  flex: 1;
  overflow: hidden;
}
.skill-card__back-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skill-card__back-tag {
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 600px) {
  .skill-card__back-title { font-size: 14px; }
  .skill-card__back-text  { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-card__inner { transition: none; transform: none !important; }
  .skill-card__face { transition: opacity .2s; }
  .skill-card__face--back { transform: none; opacity: 0; }
  .skill-card.is-flipped .skill-card__face--front { opacity: 0; }
  .skill-card.is-flipped .skill-card__face--back  { opacity: 1; z-index: 3; }
}












/* ============================================================
   FIX MOBILE : skill cards (flip) — texte plus coupé sur tel
   ============================================================ */
@media (max-width: 768px) {
  .skill-card {
    /* On retire l'aspect-ratio carré sur mobile : la carte s'adapte
       à son contenu en hauteur */
    aspect-ratio: auto;
    min-height: 180px;
  }
  .skill-card.is-flipped {
    /* Quand flippée, on autorise plus de hauteur pour le texte */
    min-height: 240px;
  }
  .skill-card__face--back {
    padding: 14px;
    gap: 6px;
    /* On autorise le scroll interne si le texte est vraiment long */
    overflow-y: auto;
  }
  .skill-card__back-text {
    font-size: 12px;
    line-height: 1.45;
    /* On retire overflow: hidden pour que le texte ne soit plus coupé */
    overflow: visible;
  }
  .skill-card__back-title {
    font-size: 15px;
  }
  .skill-card__back-tags {
    /* Les tags peuvent passer à la ligne sans souci */
    flex-wrap: wrap;
  }
  .skill-card__back-tag {
    font-size: 9px;
  }
}

/* Sur très petits écrans (< 400px), encore plus de hauteur */
@media (max-width: 400px) {
  .skill-card { min-height: 200px; }
  .skill-card.is-flipped { min-height: 260px; }
}














/* ============================================================
   FIX MOBILE : Texte "Étudiant en graphisme" plus petit
   ============================================================ */
@media (max-width: 768px) {
  .identity__name em {
    font-size: clamp(18px, 9vw, 25px) !important; 
    white-space: normal; /* Laisse le texte passer à la ligne s'il manque de place */
  }
}