/* ============================================================
   STYLE-SITES.CSS — Styles propres à la page « Sites web »
   Contient : en-tête de page, grille de sites, cartes-aperçu
   S'appuie sur les variables et composants de style.css.
   ============================================================ */


/* ── 1. EN-TÊTE DE PAGE ────────────────────────────────────
   Repris à l'identique de la page Design pour l'homogénéité.
   ─────────────────────────────────────────────────────────── */

.page-entete {
  padding       : 10rem 3rem 5rem;
  border-bottom : 1px solid var(--bordure);

  /* Animation d'apparition sur l'en-tête complet */
  opacity   : 0;
  animation : fadeIn 1s ease-out forwards;
}

.page-surtitre {
  font-size      : 0.65rem;
  font-weight    : 600;
  letter-spacing : 0.25em;
  text-transform : uppercase;
  color          : var(--or);

  display       : flex;
  align-items   : center;
  gap           : 1rem;
  margin-bottom : 1.5rem;
}

.page-surtitre::before {
  content     : '';
  width       : 2.5rem;
  height      : 1px;
  background  : var(--or);
  display     : block;
  flex-shrink : 0;
}

.page-titre {
  font-family : var(--police-serif);
  font-size   : clamp(2.8rem, 5vw, 5rem);
  font-weight : 300;
  line-height : 1.1;
  color       : var(--texte);
}

.page-titre em {
  font-style : italic;
  color      : var(--or);
}

/* Petite phrase de contexte sous le titre */
.page-intro {
  margin-top : 1.6rem;
  max-width  : 46ch;
  font-size  : 0.95rem;
  color      : var(--texte-attenue);
}


/* ── 2. GRILLE DES SITES ───────────────────────────────────
   Deux colonnes, même logique de mosaïque que la page Design.
   ─────────────────────────────────────────────────────────── */

.sites-contenu {
  padding : 5rem 3rem;
}

.grille-sites {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 2px;
}


/* ── 3. CARTE SITE ─────────────────────────────────────────
   Un cadre « navigateur » (aperçu live) + un bloc d'infos.
   ─────────────────────────────────────────────────────────── */

.carte-site {
  position   : relative;
  display    : flex;
  flex-direction : column;
  background : var(--bg-carte);
  overflow   : hidden;

  /* Animation Glissée (fadeUp) — chaque carte entre en cascade,
     après l'en-tête, grâce à un retard croissant (voir plus bas). */
  opacity   : 0;
  animation : fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Décalage progressif : les cartes apparaissent l'une après l'autre */
.carte-site:nth-child(1) { animation-delay : 0.2s; }
.carte-site:nth-child(2) { animation-delay : 0.35s; }
.carte-site:nth-child(3) { animation-delay : 0.5s; }
.carte-site:nth-child(4) { animation-delay : 0.65s; }


/* ── 3a. Cadre navigateur (lien vers le site) ─────────────── */

.site-cadre {
  position        : relative;
  display         : block;
  text-decoration : none;
  background      : var(--bg-secondaire);
}

/* Barre de chrome façon navigateur */
.site-chrome {
  display       : flex;
  align-items   : center;
  gap           : 0.9rem;
  height        : 36px;
  padding       : 0 1rem;
  background    : rgba(255, 255, 255, 0.025);
  border-bottom : 1px solid var(--bordure);
}

.site-chrome-points {
  display     : flex;
  gap         : 0.4rem;
  flex-shrink : 0;
}

.site-chrome-points i {
  width         : 9px;
  height        : 9px;
  border-radius : 50%;
  background    : var(--or-sombre);
  opacity       : 0.5;
  display       : block;
}

.site-chrome-url {
  font-family    : var(--police-sans);
  font-size      : 0.62rem;
  letter-spacing : 0.04em;
  color          : var(--texte-attenue);
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
}


/* ── 3b. Zone d'aperçu (iframe live mise à l'échelle) ──────
   L'iframe est rendue à 2× la largeur de la carte (mise en
   page « bureau ») puis réduite à 50 % : on obtient une
   vignette nette du site réel, sans capture d'écran.
   ─────────────────────────────────────────────────────────── */

.site-apercu {
  position   : relative;
  height     : 320px;
  overflow   : hidden;
  background : var(--bg-secondaire);
}

.site-frame {
  position         : absolute;
  top              : 0;
  left             : 0;
  width            : 200%;
  height           : 200%;
  border           : 0;
  transform        : scale(0.5);
  transform-origin : 0 0;
  pointer-events   : none;   /* le clic va au lien de la carte */
}

/* Voile + libellé qui apparaît au survol de l'aperçu */
.site-cadre::after {
  content    : '';
  position   : absolute;
  inset      : 36px 0 0 0;   /* sous la barre de chrome */
  background : rgba(8, 8, 8, 0.55);
  opacity    : 0;
  transition : opacity 0.3s;
  pointer-events : none;
}

.site-voir {
  position   : absolute;
  left       : 50%;
  top        : calc(50% + 18px);
  transform  : translate(-50%, -50%) translateY(8px);

  font-family    : var(--police-sans);
  font-size      : 0.7rem;
  font-weight    : 600;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--texte);

  padding    : 0.85rem 1.6rem;
  border     : 1px solid var(--or);
  background : rgba(24, 15, 30, 0.6);
  backdrop-filter : blur(2px);

  opacity    : 0;
  transition : opacity 0.3s, transform 0.3s;
  pointer-events : none;
  z-index    : 2;
}

.site-cadre:hover::after { opacity : 1; }

.site-cadre:hover .site-voir {
  opacity   : 1;
  transform : translate(-50%, -50%) translateY(0);
}


/* ── 3c. Bloc d'informations ──────────────────────────────── */

.site-infos {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  gap            : 0.9rem;
  padding        : 1.7rem 1.8rem 1.9rem;
  flex           : 1;
}

.site-tags {
  display   : flex;
  flex-wrap : wrap;
  gap       : 0.45rem;
}

.site-tag {
  font-family    : var(--police-sans);
  font-size      : 0.56rem;
  font-weight    : 600;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--texte-attenue);
  padding        : 0.32rem 0.6rem;
  border         : 1px solid var(--bordure);
}

/* Le tag « type de projet » est mis en avant */
.site-tag--type {
  color        : var(--or);
  border-color : var(--or-sombre);
}

.site-nom {
  font-family : var(--police-serif);
  font-size   : 1.9rem;
  font-weight : 300;
  line-height : 1.15;
  color       : var(--texte);
}

.site-desc {
  font-size  : 0.9rem;
  line-height: 1.65;
  color      : var(--texte-attenue);
  max-width  : 46ch;
}

/* Le bouton « Voir le site » réutilise .btn-contour (style.css),
   on ajuste juste sa marge supérieure. */
.site-infos .btn-contour {
  margin-top : 0.4rem;
}


/* ── 3d. Badge « En travaux » ─────────────────────────────── */

.site-badge {
  position       : absolute;
  top            : 0.8rem;
  right          : 0.8rem;
  z-index        : 3;

  font-family    : var(--police-sans);
  font-size      : 0.55rem;
  font-weight    : 600;
  letter-spacing : 0.15em;
  text-transform : uppercase;
  color          : var(--bg-principal);
  background     : var(--orange);
  padding        : 0.32rem 0.65rem;
}


/* ── 4. PIED DE PAGE DE CONTENU ───────────────────────────── */

.sites-pied {
  margin-top     : 4rem;
  padding-top    : 3rem;
  border-top     : 1px solid var(--bordure);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 1.4rem;
  text-align     : center;

  /* Apparition en dernier, après les cartes */
  opacity   : 0;
  animation : fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.sites-pied-label {
  font-family : var(--police-serif);
  font-style  : italic;
  font-size   : 1.3rem;
  font-weight : 300;
  color       : var(--texte-attenue);
}


/* ── 5. RESPONSIVE ─────────────────────────────────────────
   Une seule colonne et aperçus plus courts sous 900px.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  .page-entete   { padding : 8rem 1.5rem 3.5rem; }
  .sites-contenu { padding : 3.5rem 1.5rem; }

  .grille-sites {
    grid-template-columns : 1fr;
  }

  .site-apercu {
    height : 260px;
  }

  .site-infos {
    padding : 1.4rem 1.4rem 1.6rem;
  }

  .site-nom {
    font-size : 1.6rem;
  }

}


/* ── 6. KEYFRAMES (ANIMATIONS) ─────────────────────────────
   Identiques à celles de style.css / style-contact.css.
   ─────────────────────────────────────────────────────────── */

/* Fondu simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fondu + glissement du bas vers le haut */
@keyframes fadeUp {
  from {
    opacity   : 0;
    transform : translateY(30px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}