/*
  Style du site : éditorial, sobre et lisible à l'écran.
  - Titres : Newsreader (serif fin) ; texte : Jost (sans empattement)
  - Fond gris bleuté (rappel du costume bleu nuit), beaucoup d'espace, une seule couleur d'accent (un or discret)
  - Étiquettes en petites majuscules espacées

  Les couleurs et polices sont définies une seule fois ici (variables CSS),
  puis réutilisées partout avec var(--nom).
*/

:root {
  --fond: #eceef1;          /* gris légèrement bleuté */
  --encre: #1f2329;         /* texte principal */
  --encre-douce: #5f6670;   /* texte secondaire (lieux, institutions, dates) */
  --or: #b09868;            /* filets et petits ornements */
  --or-texte: #7a6544;      /* étiquettes : or assez foncé pour rester lisible */
  --filet: #d9dde2;         /* lignes de séparation */
  --credit: #99a0a9;        /* crédits photo : discrets */
  --a-completer: #b5651d;   /* repères « à compléter » (version de travail) */

  --police-titres: "Newsreader", Georgia, serif;
  --police-texte: "Jost", "Helvetica Neue", Arial, sans-serif;

  --largeur: 44rem;         /* largeur maximale du texte, pour le confort de lecture */
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

/* Liens du menu : défilement en douceur, et arrêt de sorte que le titre de la section arrive
   environ 30 px sous l'en-tête fixe. Valeur = hauteur de l'en-tête + 30 px − marge haute de la section
   (ici 74 + 30 − 88 ≈ 1rem ; voir aussi la valeur pour téléphone dans @media plus bas). */
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.05rem;
  line-height: 1.75;
}

h1, h2, h4 {
  font-family: var(--police-titres);
  font-weight: 300;
  line-height: 1.15;
}

/* Titre de section : centré, avec un court filet doré dessous */
h2 {
  font-size: 2.4rem;
  text-align: center;
  margin: 0 0 3rem;
}

h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--or);
}

/* Étiquettes : même style pour les sous-titres et le type de concert */
h3, .concert-type {
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--or-texte);
}

h3 { margin: 3rem 0 1rem; }

h4 { font-size: 1.35rem; margin: 1.5rem 0 0.25rem; }

a { color: var(--or-texte); text-underline-offset: 0.15em; }

ul { padding-left: 1.2rem; }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--or); }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1rem 2rem;
  background: rgba(236, 238, 241, 0.96);  /* --fond, presque opaque */
  border-bottom: 1px solid var(--filet);
}

.entete-nom {
  font-family: var(--police-titres);
  font-size: 1.45rem;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}

.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }

.menu a {
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.menu a:hover { color: var(--or-texte); }

.langues button {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: none;
  color: var(--encre-douce);
  padding: 0.1rem 0.3rem;
  cursor: pointer;
}

.langues button[aria-pressed="true"] {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-underline-offset: 0.3em;
}

/* ---------- Sections ---------- */

main section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 5.5rem 1rem;
}

/* Sections avec une photo à côté du texte : plus larges, pour garder ~44rem de texte */
main section.section-avec-photo { max-width: 64rem; }

/* Concerts : un peu plus large que le texte courant, pour la colonne des dates + les programmes */
main section#concerts { max-width: 48rem; }

/* ---------- Accueil ---------- */

main section.accueil {
  max-width: 62rem;
  padding: 5rem 1.5rem 4rem;
}

.accueil-contenu {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  align-items: center;
}

/* Photo dans un fin passe-partout */
.accueil-photo {
  margin: 0;
  position: relative;  /* repère pour placer le crédit sur la photo */
}

.accueil-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  padding: 6px;
  border: 1px solid var(--filet);
}

.accueil-etiquette {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--or-texte);
}

.accueil h1 {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  margin: 0.3rem 0 1.5rem;
}

.bio-courte { color: var(--encre-douce); }

/* Biographies justifiées. Pas de césure sur ordinateur : les lignes sont assez longues.
   (La césure est activée seulement sur téléphone, voir en bas du fichier.) */
.bio-courte p, #bio-longue p {
  text-align: justify;
  hyphens: manual;
}

.photo-attente {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px dashed var(--a-completer);
  color: var(--a-completer);
  font-style: italic;
}

/* Crédits photo : écrits sur la photo, dans le coin inférieur gauche.
   position: absolute place le texte par rapport à la figure (position: relative),
   au lieu de le mettre sous l'image. L'ombre légère le garde lisible sur une zone claire. */
figcaption {
  position: absolute;
  left: 0.6rem;
  bottom: 0.45rem;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;  /* le texte ne gêne pas un clic sur la photo */
}

/* Photo d'accueil : décalé pour rester à l'intérieur du passe-partout (6px + bordure) */
.accueil-photo figcaption {
  left: calc(7px + 0.6rem);
  bottom: calc(7px + 0.45rem);
}

/* Lien « Télécharger en HD », en bas à droite de la photo. Petit fond sombre translucide :
   reste lisible même sur une partie claire de la photo (cordes du piano, mur blanc…) */
.telecharger-hd {
  position: absolute;
  right: 0.4rem;
  bottom: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}
.telecharger-hd:hover, .telecharger-hd:focus-visible { background: rgba(0, 0, 0, 0.7); color: #fff; }

/* Avec une souris : le lien n'apparaît qu'au survol de la photo (ou au clavier, avec Tab).
   Sur écran tactile (téléphone, tablette) : pas de lien, on télécharge les photos HD depuis un ordinateur. */
@media (hover: hover) {
  .telecharger-hd { opacity: 0; transition: opacity 0.2s; }
  figure:hover .telecharger-hd, .telecharger-hd:focus-visible { opacity: 1; }
}
@media (hover: none) {
  .telecharger-hd { display: none; }
}
.accueil-photo .telecharger-hd {
  right: calc(7px + 0.4rem);
  bottom: calc(7px + 0.3rem);
}

/* ---------- Concerts ---------- */

.concert {
  display: grid;
  grid-template-columns: 12.5rem 1fr;  /* assez large pour « MUSIQUE DE CHAMBRE » sur une ligne */
  gap: 1.5rem;
  align-items: baseline;  /* la date et le lieu reposent sur la même ligne de base */
  padding: 1.5rem 0;
  border-top: 1px solid var(--filet);
}

.concert-date {
  margin: 0;
  white-space: nowrap;  /* la date ne passe jamais à la ligne */
  font-weight: 500;
  color: var(--encre-douce);
}

/* Le type peut passer à la ligne s'il est trop long pour la colonne (12.5rem suffit pour « Musique de chambre ») */
.concert-type { margin: 0.2rem 0 0; }

.concert-lieu { margin: 0; font-family: var(--police-titres); font-size: 1.25rem; font-weight: 400; }
.concert-details { margin: 0; color: var(--encre-douce); }

/* Cycle ou festival (« Fête de la musique »…) : vraie italique de Newsreader, sous le lieu */
.concert-cycle {
  margin: 0;
  font-family: var(--police-titres);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--encre-douce);
}

.programme { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.programme li { margin-bottom: 0.2rem; }

.compositeur { font-weight: 500; }

.vide { color: var(--encre-douce); font-style: italic; }

/* Bouton « Réserver » des concerts à venir : discret, bordure dorée */
.bouton-reserver {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--or);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--or-texte);
}

.bouton-reserver:hover { background: var(--or); color: #fff; }

/* ---------- Formation ---------- */

.secondaire { color: var(--encre-douce); }

/* ---------- Photo à côté du texte (biographie, formation, contact) ---------- */

/* Deux colonnes : le texte, puis la photo à droite */
.section-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 3.5rem;
  align-items: start;
}

/* Le haut des lettres du premier élément (paragraphe de la biographie, titre « Études »
   de la formation) arrive au niveau du haut de la photo : pas de marge au-dessus, et on
   remonte de la demi-interligne que le navigateur place au-dessus de chaque ligne
   ((taille du texte − hauteur de ligne) / 2, valeur négative). */
:is(#bio-longue, #formation-contenu, #contact-contenu) > :first-child {
  margin-top: calc((1em - 1lh) / 2);
}

/* Variante : photo à gauche (order: -1 la fait passer avant le texte) */
.section-corps.photo-a-gauche { grid-template-columns: 17rem minmax(0, 1fr); }
.section-corps.photo-a-gauche .photo-section { order: -1; }

/* Aucune photo placée dans cette section : le texte reprend toute la largeur */
.section-corps:has(> .photo-section[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Contact : texte court, donc section resserrée et texte centré verticalement à côté de la photo */
main section#contact.section-avec-photo { max-width: 40rem; }
#contact .section-corps { align-items: center; }
/* Contact sans photo : texte centré sous le titre */
#contact .section-corps:has(> .photo-section[hidden]) { text-align: center; }

.photo-section {
  margin: 0;
  position: relative;   /* repère pour placer le crédit sur la photo */
}

.photo-section img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;          /* recadre légèrement sans déformer */
  object-position: 50% 30%;   /* privilégie le haut de l'image (le visage) */
}

/* ---------- Bandeau photo en tête des concerts ---------- */

/* Plus large que la colonne de texte (jusqu'à 64rem), centré par rapport à la page :
   la marge gauche, négative, vaut la moitié de l'excédent de largeur.
   (Pas de « margin-left: 50% + translateX(-50%) » : Safari sur iPhone compte la position
   avant décalage et élargit toute la page, qui ne tient alors plus dans l'écran.) */
.bandeau-photo {
  --largeur-bandeau: min(64rem, calc(100vw - 2rem));
  position: relative;  /* repère pour le crédit */
  width: var(--largeur-bandeau);
  margin: 0 0 3.5rem calc((100% - var(--largeur-bandeau)) / 2);
}

.bandeau-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;          /* format panoramique */
  object-fit: cover;            /* recadre sans déformer */
  object-position: 50% 35%;     /* garde le haut de l'image : visage et mains */
}

/* ---------- Enregistrements ---------- */

.video {
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
}

.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Logo du mécène (fin de la biographie) ---------- */

.logo-soutien {
  display: block;
  width: 11rem;
  height: auto;
  margin: 1.5rem auto 0;   /* centré sous le texte */
}

/* ---------- Pied de page ---------- */

.pied {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  color: var(--credit);
  font-size: 0.9rem;
  border-top: 1px solid var(--filet);
}

/* ---------- Repères « à compléter » et erreurs ---------- */

.a-completer {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px dashed var(--a-completer);
  color: var(--a-completer);
  font-style: italic;
  font-size: 0.95rem;
}

.erreur {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  margin: 0;
  padding: 1rem;
  background: #fdf3f2;
  color: #b3261e;
  border: 1px solid #b3261e;
}

/* ---------- Téléphone ---------- */

@media (max-width: 700px) {
  body { font-size: 1rem; }
  h2 { font-size: 2rem; }
  main section { padding: 4rem 1rem; }
  .entete { padding: 0.8rem 1rem; }
  /* En-tête plus haut (deux lignes) et sections moins espacées : 91 + 30 − 64 ≈ 3.5rem */
  html { scroll-padding-top: 3.5rem; }
  /* En-tête sur deux lignes : nom à gauche et FR/EN à droite, puis le menu en dessous */
  .entete { gap: 0.4rem 1rem; }
  .entete-nom { font-size: 1.3rem; }
  .menu { order: 1; width: 100%; }
  main section.accueil { padding-top: 3rem; }
  .accueil-contenu { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .accueil-photo { max-width: 20rem; margin: 0 auto; }
  .concert { grid-template-columns: 1fr; gap: 0.3rem; }

  /* Sur téléphone, colonne étroite : césure automatique, mais limitée aux mots longs
     (8 lettres minimum, au moins 4 lettres de chaque côté de la coupure) */
  .bio-courte p, #bio-longue p {
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
  }

  /* Photo à côté du texte : sur téléphone, une seule colonne, la photo au-dessus du texte */
  .section-corps, .section-corps.photo-a-gauche { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .photo-section { order: -1; width: 100%; max-width: 20rem; margin: 0 auto; }
}