/* ==========================================================
   À propos (a-propos.php) — chargé uniquement sur cette page, après style.css
   Reprend les variables et les blocs de style.css (.section, .texte, .infos, .influence, .bouton…)
   ========================================================== */

/* Tailles propres à la page (redéfinies dans le palier Ordinateur) */
:root {
  --taille-titre-apropos: clamp(56px, 18vw, 128px); /* "À propos" */
  --taille-numero-etape: var(--taille-14);           /* "01", "02", "03" de "Comment je travaille" */
}

@media (min-width: 64rem) {
  :root {
    --taille-titre-apropos: clamp(128px, 14vw, 224px);
    --taille-numero-etape: clamp(48px, 4.5vw, 72px);
  }
}

/* --- Haut : "À propos" en grand, en Berkah Raya, puis le portrait en pixel art ---
   Pas de marge en bas : le portrait est posé sur le filet de "Qui je suis" */
.haut-apropos {
  padding: var(--espace-32) var(--marge) 0;
}

.haut-apropos__titre {
  color: var(--couleur-accent);
  font-family: var(--police-titre-projet);
  font-size: var(--taille-titre-apropos);
  font-weight: var(--graisse-normale); /* Berkah Raya n'a qu'une graisse : pas de faux gras */
  line-height: 1;
}

.haut-apropos .accroche {
  max-width: 32em;
  margin-top: var(--espace-20);
}

/* Portrait calé à droite, sous l'accroche. Pixel art agrandi sans flou, d'un nombre entier de pixels
   de l'écran (sinon les pixels n'ont pas tous la même taille) : --taille-pixel = le plus grand qui tient
   dans la largeur du contenu et dans 55 % de la hauteur de l'écran (--densite : posée par main.js).
   <img> puis <canvas> de main.js, qui l'efface pixel par pixel au scroll comme le portrait de l'accueil */
.haut-apropos__scene {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--espace-32);
  container-type: inline-size;
}

.haut-apropos__portrait {
  --hauteur-portrait-max: 55svh;
  display: block;
  width: min(100%, 362px); /* sans round() : 2 fois sa taille */
  width: calc(181 * round(down, min(100cqw / 181, var(--hauteur-portrait-max) / 241) * var(--densite), 1px) / var(--densite));
  height: auto;
  image-rendering: pixelated;
}

/* Ordinateur : titre et accroche en haut à gauche (colonnes 1 à 7), portrait à droite (8 à 12),
   de la hauteur du titre jusqu'au filet de "Qui je suis" */
@media (min-width: 64rem) {
  .haut-apropos {
    display: grid;
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gouttiere);
    padding-top: var(--espace-48);
  }

  .haut-apropos__titre {
    grid-column: 1 / 8;
    white-space: nowrap;
  }

  .haut-apropos .accroche {
    grid-column: 1 / 7;
    margin: var(--espace-32) 0 var(--espace-section);
  }

  .haut-apropos__scene {
    grid-column: 8 / -1;
    grid-row: 1 / -1;
    align-self: end;
    margin-top: 0;
  }

  .haut-apropos__portrait {
    --hauteur-portrait-max: 70svh;
  }
}

/* --- Sections : même rythme que l'accueil, texte limité en largeur pour rester lisible --- */
.page-apropos .section {
  --espace-bas-section: var(--espace-50);
}

.page-apropos .texte {
  max-width: var(--largeur-texte);
}

.page-apropos .infos {
  margin-top: var(--espace-24);
}

.page-apropos .liste-filets {
  margin-top: var(--espace-18);
}

/* --- Comment je travaille : 3 étapes numérotées --- */
.etapes {
  margin-top: var(--espace-18);
  counter-reset: etape;
}

.etape {
  position: relative;
  max-width: 40em;
  padding: var(--espace-16) 0 var(--espace-16) var(--espace-44);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
  counter-increment: etape;
}

.etape:last-child {
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}

/* "01", "02", "03" dans la marge gauche */
.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: var(--espace-16);
  left: 0;
  color: var(--couleur-accent);
  font-size: var(--taille-numero-etape);
  font-weight: var(--graisse-medium);
  line-height: inherit;
}

.etape__titre {
  margin-bottom: var(--espace-4);
  color: var(--couleur-accent);
  font-size: var(--taille-16);
  font-weight: var(--graisse-medium);
}

.etapes + .texte {
  margin-top: var(--espace-24);
}

/* Ordinateur : les 3 étapes côte à côte, chacune sous un filet, numéro en très grand au-dessus du titre */
@media (min-width: 64rem) {
  .etapes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }

  .etape,
  .etape:last-child {
    max-width: none;
    padding: var(--espace-24) 0 0;
    border-bottom: 0;
  }

  .etape::before {
    position: static;
    display: block;
    margin-bottom: var(--espace-20);
    line-height: 1;
  }

  .etape__titre {
    font-size: var(--taille-18);
  }

  .etapes + .texte {
    margin-top: var(--espace-48);
  }
}

/* --- Sur le terrain : photo puis expériences ; côte à côte à partir de la tablette --- */
.terrain {
  display: grid;
  gap: var(--espace-32);
  margin-top: var(--espace-18);
}

.terrain__photo {
  margin: 0;
}

.terrain__photo img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--couleur-vide);
}

.terrain__photo figcaption {
  margin-top: var(--espace-8);
  font-size: var(--taille-13);
}

.terrain__textes {
  display: grid;
  gap: var(--espace-28);
  max-width: 40em;
}

.experience__titre {
  color: var(--couleur-accent);
  font-size: var(--taille-16);
  font-weight: var(--graisse-medium);
}

.experience__date {
  margin: var(--espace-2) 0 var(--espace-8);
  font-size: var(--taille-13);
}

@media (min-width: 48rem) {
  .terrain {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}

/* Ordinateur : le bloc démarre une colonne plus tôt que le contenu (colonne 4) ;
   la photo, plus grande, prend la plus grande part, les expériences à côté */
@media (min-width: 64rem) {
  .section > .terrain {
    grid-column: 4 / -1;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    column-gap: var(--espace-48);
  }

  .terrain__photo img {
    max-width: none;
  }
}

/* --- Influences : liste à filets (image à gauche) ; cartes à partir de la tablette ---
   Tablette : 2 colonnes ; ordinateur : 4 colonnes sur toute la largeur (.section--pleine).
   Image en haut, nettement plus grande ; le texte reste toujours visible */
@media (min-width: 48rem) {
  .liste-filets.influences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-40) var(--gouttiere);
    margin-top: var(--espace-32);
    border-top: 0;
  }

  .influences > li {
    border-bottom: 0;
  }

  .influences .influence {
    flex-direction: column;
    gap: var(--espace-16);
    padding: 0;
  }

  .influences .influence__image {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .influences .influence__nom {
    margin-top: 0;
    font-size: var(--taille-18);
  }

  .influences .influence__texte {
    margin-top: var(--espace-8);
    font-size: var(--taille-15);
  }
}

@media (min-width: 64rem) {
  .liste-filets.influences {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Fin de page : deux boutons empilés, côte à côte à partir de la tablette ---
   Ordinateur : "On en parle ?" en très grand (.titre-section--geant), comme le contact de l'accueil */
.section--fin {
  --espace-bas-section: var(--espace-60);
}

.actions {
  display: grid;
  gap: var(--espace-12);
  margin-top: var(--espace-24);
}

@media (min-width: 48rem) {
  .actions {
    display: flex;
    flex-wrap: wrap;
  }

  .actions .bouton {
    padding-inline: var(--espace-32);
  }
}

@media (min-width: 64rem) {
  .section--fin .texte {
    margin-top: var(--espace-24);
  }

  .actions {
    margin-top: var(--espace-32);
  }
}