/* ==========================================================================
   Xavier Argeles — Page « Xavier Argeles » (a propos)

   Seule page du site sur fond blanc : elle porte du texte long, que le
   fond sombre des galeries rendrait penible a lire.

   Les valeurs typographiques viennent des autres pages (Jost, titres en
   graisse 200, sur-titres en capitales a 0.3em, filets fins) ; seules
   les couleurs sont transposees pour le fond clair.
   ========================================================================== */

:root {
  /* Palette claire, propre a cette page. */
  --encre: #1a1a1a;
  --encre-douce: #5f5f5f;
  --encre-tenue: #8a8a8a;
  --filet-clair: #e4e4e4;
  --fond-clair: #ffffff;
}

/* La page defile : on ne reprend pas l'overflow:hidden de l'accueil. */
html,
body {
  height: auto;
}

body {
  background: var(--fond-clair);
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   En-tete

   Le menu est en blanc au-dessus du bandeau photo, et bascule en noir des
   que la page defile au-dela : sans cela il disparaitrait purement et
   simplement sur le fond blanc. La bascule est posee en JS (.est-sur-clair).
   -------------------------------------------------------------------------- */

.entete--bascule {
  transition: background 400ms ease, border-color 400ms ease;
  border-bottom: 1px solid transparent;
}

/* Au-dessus du bandeau, l'en-tete reste clair. Sans cette regle le logo
   heriterait de la couleur d'encre posee sur body et disparaitrait sur
   la photo sombre. */
.entete--bascule .logo,
.entete--bascule .logo__nom {
  color: var(--blanc);
  transition: color 400ms ease;
}

.entete--bascule .logo__mention {
  transition: color 400ms ease, border-color 400ms ease;
}

.entete--bascule .navigation__lien {
  transition: color 400ms ease;
}

.entete--bascule.est-sur-clair {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--filet-clair);
}

.entete--bascule.est-sur-clair .navigation__lien {
  color: var(--encre-douce);
}

.entete--bascule.est-sur-clair .navigation__lien::after {
  background: var(--encre);
}

.entete--bascule.est-sur-clair .navigation__lien:hover,
.entete--bascule.est-sur-clair .navigation__lien[aria-current="page"] {
  color: var(--encre);
}

.entete--bascule.est-sur-clair .navigation__lien--inactif:hover {
  color: var(--encre-douce);
}

.entete--bascule.est-sur-clair .logo,
.entete--bascule.est-sur-clair .logo__nom {
  color: var(--encre);
}

.entete--bascule.est-sur-clair .logo__mention {
  color: var(--encre-douce);
  border-top-color: rgba(0, 0, 0, 0.25);
}

.entete--bascule.est-sur-clair .bouton-menu__barre {
  background: var(--encre);
}

/* --------------------------------------------------------------------------
   Banniere photo, titre en surimpression
   -------------------------------------------------------------------------- */

.banniere {
  position: relative;
  height: min(78vh, 620px);
  overflow: hidden;
}

.banniere__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile : le titre blanc doit rester lisible quelle que soit la photo.
   Le haut est nettement plus dense que le milieu — c'est la que se
   posent le menu et le logo, qui disparaitraient sur un ciel clair. */
.banniere__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.46) 14%,
    rgba(0, 0, 0, 0.26) 45%,
    rgba(0, 0, 0, 0.50) 100%);
}

.banniere__contenu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 24px;
  text-align: center;
  color: var(--blanc);
}

.banniere__titre {
  margin: 0;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Mention encadree de deux filets, comme les sur-titres des galeries. */
.banniere__mention {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.banniere__mention::before,
.banniere__mention::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Structure du contenu
   -------------------------------------------------------------------------- */

.section {
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 48px;
}

.section--etroite {
  max-width: 820px;
}

.accroche {
  margin: 0;
  padding-top: 110px;
  text-align: center;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 200;
  line-height: 1.62;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Blocs texte + image en alternance
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
  padding-top: 96px;
}

.duo__image {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Premier bloc : portrait a gauche (5 colonnes), texte a droite (7). */
.duo--portrait .duo__media {
  grid-column: span 5;
}

.duo--portrait .duo__image {
  height: min(52vw, 620px);
}

.duo--portrait .duo__texte {
  grid-column: span 7;
}

/* Second bloc : texte a gauche, image a droite, moities egales. */
.duo--inverse .duo__texte {
  grid-column: span 6;
}

.duo--inverse .duo__media {
  grid-column: span 6;
}

.duo--inverse .duo__image {
  height: min(44vw, 560px);
}

.surtitre {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.titre-section {
  margin: 0 0 30px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 200;
  letter-spacing: -0.005em;
  line-height: 1.12;
}

/* Largeur de lecture : au-dela d'environ 70 signes, l'oeil se perd d'une
   ligne a l'autre. */
.corps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--encre-douce);
}

.duo--inverse .corps {
  max-width: 520px;
}

.corps p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Reperes chiffres
   -------------------------------------------------------------------------- */

.reperes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 104px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-clair);
  border-bottom: 1px solid var(--filet-clair);
}

.repere {
  padding: 44px 40px;
  border-left: 1px solid var(--filet-clair);
}

/* Les filets exterieurs sont deja portes par le conteneur. */
.repere:first-child {
  padding-left: 0;
  border-left: 0;
}

.repere:last-child {
  padding-right: 0;
}

.repere__valeur {
  display: block;
  font-size: clamp(32px, 3.2vw, 40px);
  font-weight: 200;
  line-height: 1;
}

.repere__libelle {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

/* --------------------------------------------------------------------------
   Bande photo pleine largeur
   -------------------------------------------------------------------------- */

.bande {
  margin-top: 104px;
}

.bande__image {
  width: 100%;
  height: min(36vw, 460px);
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  padding-top: 104px;
  text-align: center;
}

.contact__texte {
  max-width: 520px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--encre-douce);
}

.contact__lien {
  display: inline-block;
  padding: 17px 42px;
  border: 1px solid var(--encre);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease;
}

.contact__lien:hover,
.contact__lien:focus-visible {
  background: var(--encre);
  color: var(--fond-clair);
}

/* --------------------------------------------------------------------------
   Pied — version claire
   -------------------------------------------------------------------------- */

.pied {
  margin-top: 104px;
  padding: 40px 0 46px;
  border-top: 1px solid var(--filet-clair);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.pied p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Retour a une colonne unique : garder les 12 colonnes avec un
     « span 12 » ferait deborder la grille, chaque gouttiere s'ajoutant
     a la largeur disponible. */
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .duo--portrait .duo__media,
  .duo--portrait .duo__texte,
  .duo--inverse .duo__texte,
  .duo--inverse .duo__media {
    grid-column: auto;
  }

  /* Empilees, les images reprennent une hauteur raisonnable. */
  .duo--portrait .duo__image {
    height: min(90vw, 560px);
  }

  .duo--inverse .duo__image {
    height: min(62vw, 420px);
  }

  /* L'image passe sous le texte dans le bloc inverse, pour que chaque
     bloc commence par ses mots. */
  .duo--inverse .duo__media {
    order: 2;
  }

  .corps,
  .duo--inverse .corps {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 0 24px;
  }

  /* Sur mobile l'en-tete est deja opaque (commun.css) : le fond noir des
     autres pages laisse place au blanc de celle-ci. */
  .entete--bascule {
    background: var(--fond-clair);
    border-bottom-color: var(--filet-clair);
  }

  .entete--bascule .navigation__lien {
    color: var(--encre-douce);
  }

  .entete--bascule .navigation__lien::after {
    background: var(--encre);
  }

  .entete--bascule .navigation__lien:hover,
  .entete--bascule .navigation__lien[aria-current="page"] {
    color: var(--encre);
  }

  .entete--bascule .logo,
  .entete--bascule .logo__nom {
    color: var(--encre);
  }

  .entete--bascule .logo__mention {
    color: var(--encre-douce);
    border-top-color: rgba(0, 0, 0, 0.25);
  }

  .entete--bascule .bouton-menu__barre {
    background: var(--encre);
  }

  /* Le menu deplie occupe tout l'ecran : il lui faut un fond clair. */
  .entete--bascule + .banniere .navigation,
  .navigation {
    background: rgba(255, 255, 255, 0.98);
  }

  .accroche {
    padding-top: 70px;
  }

  .duo {
    padding-top: 64px;
  }

  .reperes {
    grid-template-columns: 1fr;
    margin-top: 70px;
  }

  .repere {
    padding: 30px 0;
    border-left: 0;
    border-top: 1px solid var(--filet-clair);
  }

  .repere:first-child {
    border-top: 0;
  }

  .bande,
  .contact {
    margin-top: 70px;
  }

  .contact {
    padding-top: 70px;
  }

  .bande__image {
    height: 62vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entete--bascule,
  .contact__lien {
    transition-duration: 1ms;
  }
}