/**
 * pages/projets.css — Styles page Projets Altair Architecture
 * ===========================================================
 * Styles spécifiques à la page Projets.
 * À charger APRÈS components.css.
 *
 * Sommaire :
 *   — Grille & cartes
 *   — Overlay (badges, textes)
 *   — Touch title (mobile tactile)
 *   — Panneau détail / fiche projet
 *   — Media queries
 */

/* ═══════════════════════════════════════════════
   GRILLE & CARTES
   ═══════════════════════════════════════════════ */

.grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-content:   flex-start;
  gap:             var(--grid-gap);
  max-width:       var(--grid-max-width);
  margin:          0 auto;
}

.card-link {
  text-decoration: none;
  display:         block;
  flex:            0 0 var(--card-width);
  width:           var(--card-width);
  will-change:     transform, opacity;
}

.card-link.hidden   { display: none; }
.card-link:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 4px;
}

.card {
  position:         relative;
  overflow:         hidden;
  cursor:           pointer;
  aspect-ratio:     var(--card-aspect-ratio);
  background-color: var(--color-card-bg);

  /* Référent des container queries de l'overlay */
  container-type:   inline-size;
  container-name:   card;
}

.card img.card-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-zoom);
}

.card:hover img.card-photo { transform: scale(var(--zoom-scale)); }

.card-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-placeholder-bg);
  color:           var(--color-placeholder-text);
  font-size:       var(--fs-3xs);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
}


/* ═══════════════════════════════════════════════
   OVERLAY
   ═══════════════════════════════════════════════ */

.overlay {
  position:        absolute;
  inset:           0;
  background:      var(--color-overlay-bg);
  opacity:         0;
  transition:      opacity var(--transition-overlay);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;

  /* Padding fluide : suit la largeur de la carte, plafonné à la valeur de base */
  padding:         clamp(0.6rem, 5cqi, var(--overlay-padding));

  /* Garde-fou : réserve la bande occupée par les badges en haut de carte */
  padding-top: calc(
    var(--badge-offset, var(--space-sm)) +
    var(--badge-height, 1.5rem) +
    var(--space-sm)
  );
}

.card:hover .overlay { opacity: 1; }


/* ═══════════════════════════════════════════════
   BADGES ANCRÉS DANS LES COINS DE LA CARTE
   ═══════════════════════════════════════════════ */

/* Conteneurs de coin : portent l'ancrage ET la visibilité */
.card-badges {
  position:       absolute;
  top:            var(--badge-offset, var(--space-sm));
  z-index:        2;
  display:        flex;
  align-items:    flex-start;
  gap:            var(--space-xs);
  pointer-events: none;        /* le clic traverse vers .card-link */

  /* Apparition synchronisée avec l'overlay */
  opacity:        0;
  transition:     opacity var(--transition-overlay);
}

.card:hover .card-badges { opacity: 1; }

/* Ancrages opposés — propriétés logiques */
.card-badges--start {
  inset-inline-start: var(--badge-offset, var(--space-sm));
  max-inline-size:    calc(50% - var(--badge-offset, var(--space-sm)));
}

.card-badges--end {
  inset-inline-end:   var(--badge-offset, var(--space-sm));
  flex-direction:     row-reverse;   /* empilement depuis le bord droit */
  max-inline-size:    calc(50% - var(--badge-offset, var(--space-sm)));
}

/* Réglages communs aux badges eux-mêmes */
.status-badge,
.overlay-badge {
  display:        inline-flex;
  align-items:    center;
  min-height:     var(--badge-height, 1.5rem);
  box-sizing:     border-box;
  line-height:    1;
  letter-spacing: var(--letter-spacing-meta);
  white-space:    nowrap;
  margin:         0;
  flex-shrink:    0;
}


/* — Badges statut — */
.status-badge {
  padding:        4px 9px;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-family);
  font-size:      clamp(0.5rem, 3cqi, var(--fs-3xs));
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  color:          var(--color-overlay-text);
}


/* — Badges overlay (inscrit / classé) — */
.overlay-badge {
  gap:           7px;
  padding:       4px 9px 4px 6px;
  border:        var(--border-width) solid var(--color-badge-border);
  border-radius: var(--radius-sm);
  background:    var(--color-overlay-badge-bg);
}

.overlay-badge.badge-inscrit { background: var(--color-secondary-blue); }
.overlay-badge.badge-classe  { background: var(--color-secondary-gold); }

.overlay-badge img.mh-logo {
  display:     block;
  width:       16px;
  height:      16px;
  object-fit:  contain;
  filter:      invert(1);
  flex-shrink: 0;
}

.overlay-badge-label {
  font-family:    var(--font-family);
  font-size:      clamp(0.5rem, 3cqi, var(--fs-3xs));
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  color:          var(--color-overlay-text);
  line-height:    1;
}



.overlay-title,
.overlay-line,
.overlay-location,
.overlay-mission,
.overlay-moa {
  padding-inline-start: var(--badge-offset, var(--space-sm));
}



/* — Textes overlay (typographie fluide + espacements en em) — */
.overlay-title {
  font-size:      clamp(0.8rem, 7cqi, var(--fs-md));
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-card);
  text-transform: uppercase;
  color:          var(--color-overlay-text);
  line-height:    1.15;
  text-align: justify;
  text-wrap: pretty;      /* évite les lignes orphelines courtes */
  hyphens: auto;          /* césures : indispensable en justifié */

  /* Plafond de 3 lignes, au-delà on tronque proprement */
  display:            -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp:         3;
  overflow:           hidden;
}

.overlay-line {
  display:          block;
  width:            0;
  height:           1px;
  background-color: var(--color-accent-line);
  margin:           0.6em 0 0.75em;
  transition:       width var(--transition-overlay) var(--line-transition-delay);
}

.card:hover .overlay-line { width: var(--line-width); }

.overlay-location {
  font-size:      clamp(0.65rem, 4.2cqi, var(--fs-xs));
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-meta);
  color:          var(--color-overlay-text);
}

.overlay-mission {
  font-size:      clamp(0.6rem, 3.6cqi, var(--fs-2xs));
  font-weight:    var(--font-weight-light);
  letter-spacing: var(--letter-spacing-meta);
  color:          var(--color-overlay-sub);
  font-style:     italic;
}

.overlay-moa {
  font-size:      clamp(0.6rem, 3.6cqi, var(--fs-2xs));
  font-weight:    var(--font-weight-light);
  letter-spacing: var(--letter-spacing-meta);
  color:          var(--color-overlay-sub);
}

.overlay-moa-label {
  font-weight: var(--font-weight-semibold);
  font-style:  normal;
  opacity:     0.85;
}

.overlay-location,
.overlay-mission,
.overlay-moa {
  line-height: 0.3;
  margin-bottom:  1em;
}



/* ═══════════════════════════════════════════════
   CARTES ÉTROITES — on retranche le secondaire
   ═══════════════════════════════════════════════ */

@container card (max-width: 220px) {
  .overlay-mission,
  .overlay-moa { display: none; }

  .overlay-title {
    -webkit-line-clamp: 2;
    line-clamp:         2;
  }

  .card-badges--end .overlay-badge-label { display: none; }
}

@container card (max-width: 160px) {
  .overlay-location,
  .overlay-line { display: none; }
}


/* ═══════════════════════════════════════════════
   ACCESSIBILITÉ & TACTILE
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .card-badges,
  .overlay,
  .overlay-line { transition: none; }
}

/* Sans survol possible : badges visibles en permanence */
@media (hover: none) {
  .card-badges { opacity: 1; }
}


/* ═══════════════════════════════════════════════
   TOUCH TITLE (mobile tactile)
   ═══════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  .touch-title { display: block; }
  .card-link   { display: flex; flex-direction: column; }
}

.touch-title {
  display:        none;
  font-size:      var(--fs-sm);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-card);
  text-transform: uppercase;
  color:          var(--color-primary);
  line-height:    var(--line-height-snug);
  padding:        10px 2px 0;
  text-align:     center;
}

.card-link[data-stagger="down"] .touch-title {
  order:   -1;
  padding: 0 2px 10px;
}


/* ═══════════════════════════════════════════════
   PANNEAU DÉTAIL / FICHE PROJET
   ═══════════════════════════════════════════════ */

.fp-detail-panel {
  flex:       0 0 100%;
  width:      var(--grid-max-width);
  position:   relative;
  overflow:   hidden;
  max-height: 0;
  opacity:    0;
  transition: max-height var(--transition-panel),
              opacity    var(--transition-panel);
}

.fp-detail-panel.open { opacity: 1; }

.fp-detail-panel .fp-detail-clip {
  overflow:   hidden;
  min-height: 0;
}

.fp-detail-inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2xl);
  align-items:    stretch;
  padding:        var(--panel-inner-padding);
  box-sizing:     border-box;
  background: var(--color-panel-bg);
  margin-inline:  auto;          /* ← centrage horizontal */
}

/* — Croix de fermeture — */
.fp-close {
  position:    absolute;
  top:         12px;
  right:       16px;
  z-index:     2;
  background:  none;
  border:      none;
  font-size:   var(--fs-xl);
  line-height: 1;
  cursor:      pointer;
  color:       var(--color-close);
  opacity:     0.6;
  transition:  opacity var(--transition-fast);
}

.fp-close:hover { opacity: 1; }

.fp-section { margin-bottom: var(--space-3xl); }
.fp-section:last-child { margin-bottom: 0; }

/* — Hero deux colonnes — */
.fp-hero {
  width:                 100%;
  display:               grid;
  grid-template-columns:  1fr minmax(var(--fp-hero-right-min), var(--fp-hero-right-max));
  gap:                   var(--fp-hero-gap);
  align-items:           start;
  max-width:  	  		 var(--content-max-width);
  margin-inline:  		 auto;          /* ← centrage horizontal */
}

.fp-hero-left,
.fp-hero-right {
  /* .fp-hero-right a ses propres règles ci-dessous */
}

.fp-title {
  font-size:        var(--fs-xl);
  font-weight:      var(--font-weight-bold);
  margin:           0 0 12px;
  text-transform:   uppercase;
}

.fp-subtitle {
  font-size:        var(--fs-lg);
  font-weight:      var(--font-weight-light);
  color:            var(--color-neutral-text-soft);
  margin:           0 0 28px;
  text-transform:    uppercase;
}

.fp-desc p {
  font-size:   var(--fs-base);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-body);
  margin:      0 0 16px;
  text-align:  justify;
}

/* — Colonne fiche (droite) — */
.fp-hero-right {
  text-align:    right;
  justify-self:  end;
}

.fp-fiche { display: inline-block; text-align: right; }

.fp-row   { margin-bottom: 18px; }

.fp-label {
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-meta);
  font-size:      var(--fs-sm);
  margin-bottom:  2px;
}

.fp-value {
  font-size:   var(--fs-base);
  font-weight: var(--font-weight-light);
  color:       var(--color-text);
  white-space: pre-line;
}

/* — Galerie — */
.fp-gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fp-gallery-min), 1fr));
  gap:                   10px;
}

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

/* — Modèle 3D — */
.fp-3d {
  display:         flex;
  justify-content: center;
}

.fp-3d .sketchfab-embed-wrapper {
  width:        100%;
  height:       var(--fp-3d-size);
  aspect-ratio: 1 / 1;
  margin:       auto;
}

.fp-3d iframe {
  width:  100%;
  height: 100%;
  border: none;
}

/* — Section photos — */
.fp-photos {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
  width:          100%;
  max-width:  	  var(--content-max-width);
  margin-inline:  auto;          /* ← centrage horizontal */
}

.fp-photo {
  margin:  auto;
  width:   var(--fp-photo-width);
  display: flex;
  flex-direction: column;
}

.fp-photo img {
  display:       block;
  width:         100%;
  height:        auto;
  object-fit:    contain;
  border-radius: var(--radius-md);
}

.fp-photo figcaption {
  margin-top:        0.5rem;
  line-height:       var(--line-height-base);
  display:           flex;
  flex-direction:    column;
}

.fp-photo-title {
  font-weight: var(--font-weight-bold);
  font-size:   var(--fs-sm);
  color:       var(--color-neutral-text-soft);
}

.fp-photo-leg {
  font-weight: var(--font-weight-light);
  font-size:   var(--fs-sm);
  color:       var(--color-muted);
  text-align: justify;
  hyphens:    auto;
}


/* ═══════════════════════════════════════════════
   MEDIA QUERIES
   ═══════════════════════════════════════════════ */

/* — Grille adaptative (variable) — */
body[data-grid-mode="variable"] { --grid-columns: var(--grid-columns-mobile); }

@media (min-width: 576px) {
  body[data-grid-mode="variable"] { --grid-columns: var(--grid-columns-tablet); }
}

@media (min-width: 900px) {
  body[data-grid-mode="variable"] { --grid-columns: var(--grid-columns-desktop); }
}

@media (min-width: 1400px) {
  body[data-grid-mode="variable"] { --grid-columns: var(--grid-columns-wide); }
}

/* — Padding body adaptatif — */
@media (max-width: 900px) {
  body { padding: var(--body-padding-tablet); }
}

@media (max-width: 520px) {
  body { padding: var(--body-padding-mobile); }
}

/* — Hero fiche projet responsive — */
@media (max-width: 720px) {
  .fp-hero       { grid-template-columns: 1fr; }
  .fp-hero-right { text-align:    left;   justify-self: start; }
  .grid {  max-width: 100%;}
}

/* — Préférences accessibilité (complément base.css) — */
@media (prefers-reduced-motion: reduce) {
  .card:hover img.card-photo { transform: none; }
  .card:hover .overlay       { opacity: 1; }
  .card:hover .overlay-line  { width: var(--line-width); }
  .fp-detail-panel           { transition: opacity var(--transition-fast); }
}