/* ==========================================================================
   sections.css — mises en page propres à la page d'accueil.
   N'utilise que les variables sémantiques. Réutilise .card / .tag / .label /
   .btn / .eyebrow de components.css. Aucune hauteur fixe ; sans débordement.
   ========================================================================== */

/* Ancre non masquée sous un éventuel en-tête */
.section[id] { scroll-margin-top: 5rem; }

/* En-tête de section (numéro + titre) */
.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.section-head--tight { margin-bottom: var(--space-4); }
.section-head .eyebrow { display: flex; align-items: baseline; gap: var(--space-3); }
.section-head__num { color: var(--faint); }

/* --- HERO ---------------------------------------------------------------- */
.hero { background: var(--surface-2); padding-top: var(--hero-padding-top-desktop); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(26rem, 0.85fr);
  gap: var(--space-8);
  align-items: center;
}
.hero .stack { gap: var(--space-5); }
.hero__title { display: flex; flex-direction: column; gap: 0.08em; line-height: 1.02; margin-block: 0; }
.hero__title-l1 { font-size: clamp(2rem, 3vw, 3rem); }
.hero__title-l2 { font-size: clamp(1.75rem, 2.6vw, 2.6rem); }
.hero__lead { max-width: 58ch; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__note { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--faint); }

/* Emplacement photo (provisoire, composition abstraite sobre) */
.media-frame { margin: 0; border: var(--bw) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.media-frame__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: var(--bw) solid var(--border); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint); }
.media-frame__canvas {
  aspect-ratio: 5 / 4;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background-color: var(--surface-2);
  background-image: radial-gradient(var(--border-strong) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
}
.media-frame__slot { width: 70%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; border: var(--bw-strong) dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.media-frame__slot b { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.media-frame__slot span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint); }
.media-frame figcaption { padding: var(--space-2) var(--space-4); border-top: var(--bw) solid var(--border); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint); }

/* --- PARCOURS ------------------------------------------------------------ */
.parcours__grid { display: grid; grid-template-columns: 1fr 20rem; gap: var(--space-8); align-items: start; }
.parcours__prose { display: flex; flex-direction: column; gap: var(--space-4); }
.parcours__prose p { max-width: 68ch; color: var(--muted); }
.reperes { border: var(--bw) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.reperes__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--faint); }
.reperes__row { display: flex; gap: var(--space-3); align-items: baseline; }
.reperes__row + .reperes__row { border-top: var(--bw) solid var(--border); padding-top: var(--space-3); }
.reperes__date { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--primary); min-width: 3.25rem; }
.reperes__row span:last-child { font-size: var(--fs-small); }

/* --- Grilles de cartes --------------------------------------------------- */
.card-grid { display: grid; gap: var(--space-5); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* --- Certifications / blocs de compétences (page Profil) ------------------ */
.cert-card__name { line-height: 1.2; }
.cert-meta { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.cert-meta__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.cert-meta dt { flex: 0 0 5rem; font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--faint); }
.cert-meta dd { margin: 0; color: var(--text); }
.cert-card__verify { align-self: flex-start; margin-top: auto; }
.cert-official { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--muted); }
.cert-official a { font-weight: 600; }

.card__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; justify-content: space-between; }
.card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* Cartes projet : emplacement de captures (sobre, sans fausse image) */
.project__shot {
  aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end; padding: var(--space-3);
  background-color: var(--accent);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
}
.project__shot span { display: inline-block; white-space: nowrap; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); background: var(--surface); border: var(--bw) solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; }
.project { padding: 0; overflow: hidden; }
.project__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.project__body p { color: var(--muted); }

/* --- MÉTHODE ------------------------------------------------------------- */
.method-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.method-step { display: flex; flex-direction: column; gap: var(--space-2); border-top: 2px solid var(--border-strong); padding-top: var(--space-4); }
.method-step:first-child { border-top-color: var(--primary); }
.method-step__num { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.method-step p { color: var(--muted); font-size: var(--fs-small); }

/* --- PROGRESSION --------------------------------------------------------- */
.progress-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.progress-card { border: var(--bw) solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.progress-card[data-level="3"] { border-left-color: var(--primary); }
.progress-card[data-level="2"] { border-left-color: var(--border-strong); }
.progress-card__kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--faint); }
.progress-card p { color: var(--muted); font-size: var(--fs-small); }

/* --- CONTACT (bandeau profond, deux colonnes) --------------------------- */
.contact { background: var(--deep); color: var(--on-deep); }
.contact__grid { display: grid; grid-template-columns: 1.5fr 0.85fr; gap: var(--space-8); align-items: start; }
.contact__main { gap: var(--space-4); text-align: left; }
.contact .eyebrow { color: var(--deep-muted); }
/* RGAA 3.2 : sur le bandeau profond, le numéro de section suit --deep-muted
   (≥7:1 sur --deep) et non --faint (2.33:1, échec sur fond foncé). */
.contact .section-head__num { color: var(--deep-muted); }
.contact__title { color: var(--on-deep); max-width: 20ch; }
.contact__text { color: var(--deep-muted); max-width: 62ch; font-size: var(--fs-lead); }
.contact__note { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--deep-muted); }
/* Bloc d'actions : structuré, bordure discrète — sans effet « carte marketing ». */
.contact__panel {
  display: flex; flex-direction: column; gap: var(--space-3);
  border: var(--bw) solid var(--deep-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.03);
}
.contact__panel-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-muted); }
.contact__panel .btn { width: 100%; }
.contact__panel .btn-primary { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.contact__panel .btn-primary:hover { background: var(--deep-muted); border-color: var(--deep-muted); }
.contact__panel .btn-secondary { background: transparent; color: var(--on-deep); border-color: var(--deep-muted); }
.contact__panel .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--on-deep); }
.contact__panel :focus-visible { outline-color: var(--on-deep); }
.contact__ext-icon { font-size: 0.85em; line-height: 1; }

/* --- RESPONSIVE ---------------------------------------------------------- */
/* Hero : sous 1024px, le composant passe SOUS le texte plutôt que de comprimer
   la colonne de gauche (la colonne droite exige ~28rem). */
@media (max-width: 1023.98px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero .sapws { max-width: 32rem; }
}
@media (max-width: 899.98px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .parcours__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .media-frame__canvas { aspect-ratio: 16 / 10; }
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact__panel { max-width: 26rem; margin-top: var(--space-3); }
}

/* ==========================================================================
   Pages internes (lot 10) — fil d'Ariane, hero de page, prose, frise,
   compétences, détail projet. Variables sémantiques uniquement.
   ========================================================================== */

/* Hero de page interne — même respiration haute que l'accueil (variable mutualisée). */
.page-hero { padding-block: var(--hero-padding-top-desktop) var(--section-y); background: var(--surface-2); }
.page-hero__grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--space-8); align-items: center; }
/* Profil : composition en deux colonnes. Colonne gauche = titre puis texte ;
   colonne droite = photo, qui occupe les DEUX rangées (titre + texte) pour que
   son bord supérieur s'aligne précisément sur le haut du h1. Le titre reste
   confiné à la colonne gauche (jamais d'empiètement) grâce à un vrai column-gap.
   Le h1 est légèrement réduit UNIQUEMENT ici pour tenir sur une ligne en desktop. */
.page-hero__grid--profile {
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 16vw, 220px);
  grid-template-areas: "title photo" "text photo";
  align-items: start;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--space-5);
}
.page-hero__grid--profile > .page-hero__title {
  grid-area: title;
  align-self: start;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem);
}
.page-hero__grid--profile > .stack { grid-area: text; }
.page-hero__grid--profile > .profile-photo { grid-area: photo; align-self: start; justify-self: end; }
/* Titres de Hero interne : aucune largeur restrictive → une seule ligne quand la
   place le permet, retour naturel sur petits écrans (jamais de coupure forcée). */
.page-hero__title { font-size: var(--fs-h1); margin-block: var(--space-1); text-wrap: balance; }
@media (max-width: 899.98px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .page-hero__grid--profile { grid-template-columns: 1fr; grid-template-areas: "title" "text" "photo"; gap: var(--space-6); }
  /* Reflow (RGAA 10.11) : en colonne unique la photo est centrée sous l'intro.
     Même spécificité que la règle desktop justify-self:end, sinon elle l'emporte. */
  .page-hero__grid--profile > .profile-photo { justify-self: center; margin-inline: auto; }
}

/* Photo professionnelle (page Profil uniquement) : sobre, verticale 3:4. */
.profile-photo { margin: 0; justify-self: center; }
.profile-photo img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--bw) solid var(--border);
}
/* Tablette : titre libre de repasser sur deux lignes, photo centrée ~190–210px. */
@media (max-width: 899.98px) {
  .profile-photo { justify-self: center; }
  .profile-photo img { max-width: 13rem; }
}
/* Mobile : photo centrée sous toute l'introduction, ~160–190px. */
@media (max-width: 559.98px) {
  .profile-photo img { max-width: 11rem; }
}

/* Prose (blocs de texte lisibles) */
.prose { display: flex; flex-direction: column; gap: var(--space-3); }
.prose h2 { margin-bottom: var(--space-1); }
.prose h3 { margin-top: var(--space-4); }
.prose p, .prose li { max-width: 68ch; color: var(--muted); }
.prose ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.prose-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-7); }
.h3-like { font-size: var(--fs-h3); }

/* Frise du parcours */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline__item {
  display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--bw) solid var(--border);
}
.timeline__item:first-child { border-top: 0; }
.timeline__date { color: var(--primary); padding-top: 0.15rem; }
.timeline__label { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--space-1); }
@media (max-width: 599.98px) { .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Badge de contexte (Compétences) : discret, lisible, jamais en capitales
   sur-espacées ni en champ de formulaire. L'information passe par le texte. */
.skill-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: transparent;
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
  max-width: 100%;
}
/* Variante « en-tête de section » : accent doux pour porter le contexte du domaine. */
.skill-badge--section {
  color: var(--primary);
  background: var(--accent);
  border-color: var(--accent-border);
  vertical-align: middle;
}

/* Liste de compétences */
.skills-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-2) var(--space-5); }
.skills-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--bw) solid var(--border);
}
.skills-list__name { font-weight: 600; }
.skills-list__frame { flex: 0 0 auto; }

/* Détail d'un projet */
.project-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.project-detail__nature { color: var(--faint); }
.project-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--space-6) var(--space-8); }
.project-detail__shots { margin-top: var(--space-6); }
.project-detail__shots h3 { margin-bottom: var(--space-3); }
.project-detail__gallery { max-width: 34rem; }
.project-detail__gallery .project__shot {
  aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: var(--space-3);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background-color: var(--accent);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
}
.project-detail__gallery .project__shot span {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted);
  background: var(--surface); border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.25rem 0.5rem;
}

/* Rythme resserré pour les sections/pages moins denses (lot 10 — correctifs) */
.section--tight { padding-block: clamp(2.5rem, 1.9rem + 2vw, 3.75rem); }
.section--tight.page-hero { padding-block: var(--hero-padding-top-desktop) clamp(2.5rem, 1.9rem + 2vw, 3.75rem); }

/* Compétences : cartes homogènes, nom en haut / étiquette en bas, colonnes fixées
   par domaine (flex : les rangées incomplètes sont centrées, jamais orphelines). */
.skills-cards {
  --gap: var(--space-3);
  --cols: 3;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
.skills-cards[data-count="8"],
.skills-cards[data-count="7"] { --cols: 4; }
.skills-cards[data-count="6"] { --cols: 3; }
.skills-cards[data-count="5"] { --cols: 3; }
.skills-cards[data-count="4"] { --cols: 2; }
.skill-card {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: var(--bw) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.section--alt .skill-card { background: var(--bg); }
.skill-card__name { font-weight: 600; text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
.skill-card__frame { align-self: flex-start; margin-top: auto; max-width: 100%; }
/* Passages responsive : jusqu'à 900px → 2 colonnes max ; ≤560px → 1 colonne.
   IMPORTANT : on cible .skills-cards[data-count] pour égaler la spécificité des
   règles [data-count="N"] ci-dessus (sinon --cols desktop n'est jamais remplacé). */
@media (max-width: 900px) { .skills-cards[data-count] { --cols: 2; } }
@media (max-width: 560px) { .skills-cards[data-count] { --cols: 1; } }

/* Projet : colonne latérale + emplacement de captures compact et discret */
.project-detail__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-6) var(--space-8); align-items: start; }
@media (max-width: 767.98px) { .project-detail__grid { grid-template-columns: 1fr; } }
.project-detail__aside { min-width: 0; }
.shot-pending {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--muted); font-size: var(--fs-tag);
  border: var(--bw) dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem; background: var(--surface-2);
}
.shot-pending::before { content: "▤"; color: var(--faint); }