/* ==========================================================================
   FLAA — components.css
   Composants BEM réutilisables, indépendants de leur section d'accueil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   roll — texte dont chaque lettre roule vers le haut au survol
   Deux exemplaires par lettre empilés dans une fenêtre de 1 ligne.
   -------------------------------------------------------------------------- */

.roll {
  /* Hauteur de la fenêtre par lettre. Un `1em` ne suffit pas : relevé sur
     Albert Sans, l'encre d'un « Éqgy » occupe 1,15em (0,95 au-dessus de la
     ligne de base pour l'accent, 0,20 en dessous pour les jambages). À 72 px,
     onze pixels dépassaient et se faisaient rogner par le masque. */
  --roll-hauteur: 1.25em;

  position: relative;
  display: inline-flex;
  /* `baseline` et non `bottom` : la boîte est plus haute que le cadratin, et
     caler son bas sur la ligne de base remonterait tout le texte. Sur une
     boîte flex en ligne, `baseline` reprend celle de la première lettre, donc
     l'alignement se corrige de lui-même. */
  vertical-align: baseline;
}

/* Texte réel : hors du flux visuel, mais bien présent pour la sélection, la
   copie, la recherche dans la page et les lecteurs d'écran. */
.roll__source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.roll__letter {
  /* Fenêtre d'une ligne : c'est elle qui masque, elle ne bouge donc pas.
     Purement décorative : elle reste hors de toute sélection. */
  user-select: none;
  display: inline-flex;
  flex-direction: column;
  height: var(--roll-hauteur);
  overflow: hidden;
  line-height: var(--roll-hauteur);
}

/* Ce sont les deux exemplaires empilés qui glissent, pas leur fenêtre. */
.roll__face {
  display: block;
  flex: 0 0 auto;
  /* Même hauteur que la fenêtre : la translation de -100 % amène donc le
     double exactement à la place du premier. */
  height: var(--roll-hauteur);
  line-height: var(--roll-hauteur);
  transition: transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--roll-index, 0) * 22ms);
}

:is(a, button):hover .roll__face,
:is(a, button):focus-visible .roll__face,
.roll:hover .roll__face {
  transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   marker — petit « + » décoratif calé sur la gouttière gauche
   -------------------------------------------------------------------------- */

.marker {
  position: absolute;
  /* Aligné sur la première ligne de contenu : chaque section peut ajuster
     `--marker-top` si son rembourrage haut diffère du rythme par défaut. */
  top: var(--marker-top, var(--space-xl));
  left: var(--gutter);
  display: block;
  color: var(--color-fg);
  pointer-events: none;
}

/* Sur mobile, le repère et le texte partagent la même gouttière et se
   superposaient : le « + » se posait exactement sur la première ligne. Sur
   grand écran ils ne se croisent pas, le texte vivant dans une colonne
   indentée. En colonne unique, le repère reprend donc sa place dans le flux,
   au-dessus du texte. */
@media (max-width: 900px) {
  .marker {
    position: static;
    display: block;
    margin-bottom: clamp(14px, 4vw, 22px);
  }
}

.marker__icon {
  width: 12px;
  height: 12px;
  stroke-width: 1.2;
}

/* --------------------------------------------------------------------------
   media — bloc image plein cadre avec parallaxe et repères d'angle
   L'image est plus haute que son cadre : le JS translate `--parallax`
   entre -1 et 1, ce qui la fait glisser dans la fenêtre.
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: #eceded;
}

.media--full {
  aspect-ratio: 1600 / 797;
}

.media--wide {
  aspect-ratio: 1600 / 640;
}

.media__inner {
  position: absolute;
  inset: -12% 0;
}

.media__inner picture,
.media__inner img {
  width: 100%;
  height: 100%;
}

.media__img {
  object-fit: cover;
  transform: translate3d(0, calc(var(--parallax, 0) * 6%), 0);
  will-change: transform;
}

/* Une vidéo occupe le cadre média exactement comme une image. */
.media__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__corners {
  position: absolute;
  inset: clamp(20px, 3.4vw, 58px);
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}

.media__corner {
  position: absolute;
  display: block;
}

.media__corner:nth-child(1) { top: 0; left: 0; }
.media__corner:nth-child(2) { top: 0; right: 0; }
.media__corner:nth-child(3) { bottom: 0; left: 0; }
.media__corner:nth-child(4) { bottom: 0; right: 0; }

.media__corner-icon {
  width: 12px;
  height: 12px;
  stroke-width: 1.2;
}

/* --------------------------------------------------------------------------
   link-arrow — lien éditorial souligné avec flèche
   -------------------------------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding-bottom: 0.16em;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-action);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-sm);
}

.link-arrow__icon {
  width: 0.72em;
  height: 0.72em;
  stroke-width: 1.4;
  transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(0.22em);
}

/* --------------------------------------------------------------------------
   section-title — titre de section avec compteur en exposant
   -------------------------------------------------------------------------- */

.section-title {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 0.93vw, 16px);
  font-size: var(--fs-display-lg);
  letter-spacing: var(--ls-lg);
}

.section-title__count {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  transform: translateY(0.35em);
}

/* --------------------------------------------------------------------------
   stat — chiffre clé avec compteur animé
   -------------------------------------------------------------------------- */

/* Les quatre chiffres tiennent sur une ligne : ils sortent donc de la colonne
   éditoriale pour occuper toute la largeur utile. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat {
  display: flex;
  flex-direction: column;
  padding-top: clamp(28px, 3.7vw, 64px);
}

.stat__rule {
  height: 1px;
  margin-bottom: clamp(24px, 3.24vw, 56px);
  background: var(--color-fg);
}

.stat__figure {
  display: block;
}

.stat__value {
  display: block;
  font-size: clamp(56px, 6.944vw, 120px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: var(--ls-xl);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: clamp(12px, 1.4vw, 24px);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   award — ligne du palmarès
   -------------------------------------------------------------------------- */

.award-list {
  border-top: 1px solid var(--color-rule);
}

.award {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  padding-block: clamp(20px, 2.315vw, 40px);
  border-bottom: 1px solid var(--color-rule);
}

.award__col {
  flex: 1 1 0;
  min-width: 0;
}

.award__col--meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.award__name {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
}

.award__org {
  font-size: var(--fs-body);
  line-height: 1.6;
}

.award__year {
  flex: 0 0 auto;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   accordion — méthode de travail
   -------------------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--color-rule);
}

.accordion__item {
  border-bottom: 1px solid var(--color-rule);
}

.accordion__head {
  position: relative;
  display: block;
  width: 100%;
  padding-block: clamp(20px, 2.6vw, 44px);
  text-align: left;
}

.accordion__row {
  display: flex;
  align-items: center;
  min-height: clamp(80px, 8.33vw, 144px);
  gap: var(--space-md);
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--column-pad));
  margin-inline: auto;
  padding-inline: max(20px, var(--column-pad));
}

/* Vignette carrée calée sur la gouttière, là où figurait le numéro d'ordre. */
.accordion__thumb {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
  display: block;
  width: clamp(80px, 8.33vw, 144px); /* 144 / 1728 */
  aspect-ratio: 1;
  overflow: hidden;
  background: #ececec;
}

.accordion__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accordion__title {
  flex: 1 1 auto;
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.05em;
}

.accordion__toggle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  stroke-width: 1.4;
  transition: transform var(--dur-base) var(--ease-out);
}

.accordion__item.is-open .accordion__toggle {
  transform: rotate(135deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out);
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  max-width: 640px;
  padding-bottom: clamp(24px, 3vw, 52px);
}

.accordion__cta {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}

.accordion__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.accordion__points {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.accordion__point {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.accordion__point::before {
  content: "· ";
}

/* --------------------------------------------------------------------------
   partner — logotype encadré par quatre équerres
   -------------------------------------------------------------------------- */

.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.partner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: clamp(16px, 2vw, 36px);
}

.partner__bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-rule);
}

.partner__bracket:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.partner__bracket:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.partner__bracket:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.partner__bracket:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.partner__logo {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  transition: opacity var(--dur-base) var(--ease-out);
}

.partner:hover .partner__logo {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   marquee — bandeau défilant « FLAA architectes ~ »
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: none;
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 0.4em;
  padding-right: 0.4em;
  animation: flaa-marquee 28s linear infinite;
  will-change: transform;
}

.marquee__item {
  flex: 0 0 auto;
  font-size: clamp(64px, 9.259vw, 160px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--ls-2xl);
  white-space: nowrap;
}

@keyframes flaa-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   newsletter — champ souligné avec flèche d'envoi
   -------------------------------------------------------------------------- */

.newsletter__title {
  max-width: 640px;
  font-size: var(--fs-display-sm);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-sm);
}

.newsletter__form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: clamp(20px, 2vw, 36px) clamp(12px, 1.2vw, 20px);
  padding-bottom: clamp(10px, 1vw, 18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--color-inverse-fg);
  font-size: var(--fs-display-sm);
  font-weight: 500;
  letter-spacing: var(--ls-sm);
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.newsletter__input:focus {
  outline: 0;
}

.newsletter__submit {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-inverse-fg);
}

.newsletter__icon {
  width: clamp(28px, 2.3vw, 40px);
  height: clamp(28px, 2.3vw, 40px);
  stroke-width: 1.2;
  transition: transform var(--dur-base) var(--ease-out);
}

.newsletter__submit:hover .newsletter__icon {
  transform: translateX(0.2em);
}

.newsletter__legal {
  max-width: 640px;
  color: var(--color-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

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

@media (max-width: 900px) {
  .partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .award {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .accordion__thumb {
    position: static;
    transform: none;
  }

  .accordion__row {
    gap: var(--space-sm);
  }
}

@media (max-width: 640px) {
  .stats,
  .partners__grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* --------------------------------------------------------------------------
   project-card — carte d'une réalisation
   -------------------------------------------------------------------------- */

.project-card__link {
  display: block;
  color: inherit;
}

/* Rapport par défaut, celui des cartes du carrousel : les trois s'alignent
   sur la même ligne haute, seule celle du milieu est un peu plus haute. */
.project-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 13 / 12;
  background: #ececec;
}

/* L'alternance ne vaut que pour le carrousel, où elle porte sur trois cartes
   visibles à la fois. */
.projects__slide:nth-child(3n + 2) .project-card__media {
  aspect-ratio: 12 / 13;
}

/* Dans la grille d'archive, toutes les cartes partagent le même rapport :
   l'alternance y rendrait chaque rangée bancale sur des dizaines de cartes.
   Le format paysage épouse les photos d'origine, évite de les recadrer et
   raccourcit nettement la page. */
.projects__cell .project-card__media {
  aspect-ratio: 4 / 3;
}

.project-card__media picture,
.project-card__img {
  width: 100%;
  height: 100%;
}

.project-card__img {
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out);
}

.project-card__link:hover .project-card__img,
.project-card__link:focus-visible .project-card__img {
  transform: scale(1.045);
}

/* Deux colonnes : le titre et son bouton sur la première ligne,
   la catégorie puis le lieu/année en dessous, alignés au titre. */
.project-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-sm);
  padding-top: clamp(14px, 1.4vw, 24px);
}

.project-card__title {
  grid-column: 1;
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.project-card__action {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: clamp(32px, 2.4vw, 42px);
  aspect-ratio: 1;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.project-card__link:hover .project-card__action,
.project-card__link:focus-visible .project-card__action {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.project-card__icon {
  width: 45%;
  height: 45%;
  stroke-width: 1.6;
}

.project-card__category,
.project-card__meta {
  grid-column: 1;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.7;
}

.project-card__category {
  padding-top: clamp(6px, 0.6vw, 12px);
}

/* --------------------------------------------------------------------------
   project-filters — barre de filtres de l'archive
   -------------------------------------------------------------------------- */

/* Les filtres portent l'effectif de chaque famille : c'est ce qui remplace le
   compteur isolé qui flottait au-dessus, et ça indique le volume avant de
   cliquer. */
/* Un filet continu court sous toute la barre et sert de rail : le trait de
   l'onglet actif s'y pose au lieu de flotter seul sous un mot. Les boutons se
   touchent, sans écart, pour que le rail ne soit jamais interrompu. */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-block);
  border-bottom: 1px solid var(--color-rule);
}

.project-filters__btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  /* Le trait actif recouvre le rail au lieu de s'ajouter dessous. */
  margin-bottom: -1px;
  padding: clamp(14px, 1.5vw, 22px) clamp(14px, 1.3vw, 22px);
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* Le premier onglet s'aligne sur la marge du contenu, pas sur son rembourrage. */
.project-filters__btn:first-child {
  padding-left: 0;
}

/* L'effectif est une annotation, pas un second mot : en exposant et plus
   discret, il se lit sans concurrencer l'intitulé. Chiffres tabulaires pour
   que la barre ne bouge pas d'un onglet à l'autre. */
.project-filters__count {
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.55;
  transform: translateY(-0.62em);
  font-variant-numeric: tabular-nums;
}

.project-filters__btn:hover {
  color: var(--color-fg);
}

.project-filters__btn:hover .project-filters__count {
  opacity: 0.8;
}

.project-filters__btn.is-active {
  border-bottom-color: var(--color-fg);
  color: var(--color-fg);
}

.project-filters__btn.is-active .project-filters__count {
  opacity: 0.8;
}

@media (max-width: 700px) {
  /* Une seule ligne qui défile plutôt qu'un pavé de boutons repliés : le rail
     reste lisible et l'ordre des familles est conservé. */
  .project-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Explicite : `overflow-x` seul fait aussi passer `overflow-y` à `auto`,
       et la barre capturerait alors le défilement vertical de la page. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .project-filters::-webkit-scrollbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   project-gallery — galerie d'une réalisation
   -------------------------------------------------------------------------- */

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}

.project-gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #ececec;
}

/* Une image sur trois occupe toute la largeur : la galerie respire. */
.project-gallery__item:nth-child(3n + 1) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.project-gallery__item picture,
.project-gallery__img {
  width: 100%;
  height: 100%;
}

.project-gallery__img {
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   spec-list — fiche technique d'une réalisation
   -------------------------------------------------------------------------- */

.spec-list {
  border-top: 1px solid var(--color-rule);
}

.spec-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: clamp(14px, 1.5vw, 24px);
  border-bottom: 1px solid var(--color-rule);
}

.spec-list__term {
  flex: 0 0 clamp(120px, 14vw, 220px);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
}

.spec-list__desc {
  flex: 1 1 240px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .project-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-gallery__item,
  .project-gallery__item:nth-child(3n + 1) {
    grid-column: 1;
    aspect-ratio: 3 / 2;
  }
}