/* ============================================================
   FINITIONS.CSS - styles communs à toutes les pages (FR et EN)
   Chargement : après le <style> de chaque page, qu'il complète
   ou remplace

   À modifier ici : polices, tailles des titres, espacements,
   bas du menu, ajustements mobile

   CHANGER DE POLICE
   1. Ajouter la police dans la ligne @import ci-dessous
   2. Modifier --titres et/ou --texte dans le bloc :root
   Graisses 400, 500, 600 : chargées par chaque page
   Graisse 300 (grands chiffres) : chargée par la ligne @import

   CLASSES D'ANCIENNES MISES EN PAGE
   Absentes des pages actuelles, règles sans effet (à vérifier
   avant suppression) : .studio-hero, .exp-hero, .contact-page,
   .projets-page, .projets-entete, .projets-compteur,
   .projets-intro, .projet-titre-bloc, .projet-lieu, .ariane,
   .studio-texte, .projet-intro, .projet-corps, .contact-intro,
   .rejoindre, .chiffre-val, .chiffre-lab
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&display=swap');

:root {
  /* Polices */
  --titres: 'Archivo', system-ui, sans-serif;
  --texte:  'Archivo', system-ui, sans-serif;
  /* Espace entre la colonne de gauche (1/3) et celle de droite (2/3) */
  --gouttiere: clamp(1.5rem, 4vw, 4rem);
  /* Position du début de la colonne de droite */
  --axe: calc((100% - var(--gouttiere)) / 3 + var(--gouttiere));
  /* Espace vertical entre deux sections */
  --respiration: clamp(3.5rem, 7vw, 6rem);
}

body { font-family: var(--texte); }

/* ============================================================
   TYPOGRAPHIE GÉNÉRALE
   ============================================================ */

/* Titres : police, graisse, interlettrage */
h1, h2, .section-titre, .hero-titre, .tuile-nom, .mega-menu-list li a,
.suivant-nom, .exp-titre, .chiffre-val, .carte-nom, .membre-nom {
  font-family: var(--titres);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Coupure des lignes : pas de mot isolé, pas de césure automatique */
p, li { text-wrap: pretty; hyphens: manual; }
h1, h2, h3 { text-wrap: balance; }

/* Texte courant : graisse et interligne */
.projet-intro p, .exp-desc, .studio-texte p, .newsletter p, .citation p {
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ============================================================
   TITRES DE PAGES (anciennes mises en page)
   ============================================================ */
.studio-hero, .exp-hero, .contact-page { padding-top: clamp(9rem, 14vw, 11rem); }
.projets-page { padding-top: clamp(9rem, 14vw, 11rem); }

.studio-hero h1,
.exp-hero h1,
.contact-page h1,
.projets-entete h1,
.projet-titre-bloc h1 {
  font-family: var(--titres);
  font-weight: 400;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: none;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.projets-entete { align-items: baseline; margin-bottom: clamp(2rem, 4vw, 3rem); }
.projets-entete h1 { margin-bottom: 0; }
.projets-compteur {
  font-family: var(--titres);
  font-weight: 300;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #b3b2ab;
}

.projet-titre-bloc {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.projet-titre-bloc .projet-tag { margin-bottom: 1rem; }
.projet-titre-bloc h1 { font-size: clamp(2.8rem, 6.5vw, 5.8rem); margin-bottom: 1rem; }
.projet-lieu { text-align: left; font-size: 1rem; color: #8a8a82; }
.ariane { padding-top: 8rem; }

/* ============================================================
   TITRES DE SECTIONS
   Taille : font-size (minimum, variable, maximum)
   ============================================================ */

/* Accueil : "Atelier", "Projets"… / Expertise : "Notre méthode" / L'Atelier : "Équipe" */
.section-titre, .methode-titre, .equipe h2 {
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
/* Expertise : titre de chaque savoir-faire */
.exp-titre {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
/* L'Atelier : titres des engagements / Expertise : titres des étapes */
.valeur h3, .etape h3 { font-weight: 500; letter-spacing: -0.025em; margin-top: 1rem; }
/* L'Atelier : nom des membres de l'équipe */
.membre-nom { font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -0.03em; }

/* ============================================================
   EN-TÊTES DE PAGES (anciennes mises en page)
   ============================================================ */
.studio-hero, .exp-hero, .contact-page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--gouttiere);
}
.studio-hero h1, .exp-hero h1, .contact-page h1 { grid-column: 1 / -1; }

body .studio-hero .intro,
body .exp-hero .intro,
body .contact-intro,
body .projets-intro {
  font-family: var(--titres);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #2b2b28;
  max-width: 52ch;
  text-wrap: pretty;
}
body .studio-hero .intro,
body .exp-hero .intro,
body .contact-intro { grid-column: 2; }

.studio-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--trait); }
body .studio-hero .intro { border-bottom: none; padding-bottom: 0; }
.exp-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Contact (page actuelle) : coordonnées à gauche (1/3), formulaire à droite (2/3)
   Largeur maximale du formulaire : max-width */
.contact-grille { grid-column: 1 / -1; grid-template-columns: 1fr 2fr; column-gap: var(--gouttiere); }
.contact-grille > div:last-child { max-width: 760px; }

body .projets-intro { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem) var(--axe); }

/* ============================================================
   PARAGRAPHES
   Longueur maximale des lignes : max-width, en caractères (ch)
   ============================================================ */
.studio-texte p, .projet-intro p, .rejoindre p { max-width: 72ch; }
/* Expertise : descriptions / L'Atelier : biographies, intro de l'équipe / Expertise : intro de la méthode */
.exp-desc, .membre-bio, .equipe-intro, .methode-intro { max-width: 62ch; }
/* L'Atelier : engagements / Expertise : étapes */
.valeur p, .etape p { max-width: none; }
/* Accueil : grande phrase sous le carrousel */
.manifeste-texte { max-width: 44ch; }

/* Anciennes mises en page */
.studio-texte p {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: #2f2f2c;
  margin-bottom: 1.1em;
}
.studio-texte p:last-child { margin-bottom: 0; }
.studio-texte p:first-child {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--encre);
  max-width: 52ch;
  margin-bottom: 1.4em;
}

.projet-intro p { margin-bottom: 1.1em; }
.projet-intro p:last-child { margin-bottom: 0; }
.projet-intro .projet-accroche {
  max-width: 44ch;
  margin-bottom: 1.6rem;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.35;
}

/* Sections en deux colonnes 1/3 - 2/3
   Accueil : phrase sous le carrousel / Expertise : typologies */
.manifeste, .studio-texte, .typologies, .rejoindre {
  grid-template-columns: 1fr 2fr;
  column-gap: var(--gouttiere);
}
.projet-corps { grid-template-columns: 2fr 1fr; }

/* Espace au-dessus et au-dessous des sections : variable --respiration */
.studio-texte, .valeurs, .equipe, .methode, .typologies, .rejoindre {
  padding-top: var(--respiration);
  padding-bottom: var(--respiration);
}

/* Accueil : encadrés de citation */
.citation { gap: 1.2rem; }
.citation p { margin-bottom: 0; }

/* ============================================================
   PETITS LIBELLÉS EN MAJUSCULES
   ============================================================ */

/* Graisse et interlettrage */
.hero-tag, .hero-voir, .mega-col-titre, .projet-tag, .fiche-label,
.galerie-titre, .suivant-label, .contact-label, .form-titre,
.studio-texte h2, .chiffre-lab, .footer-menu a, .back-top {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Libellés précédés d'un trait
   Retirer le trait d'un libellé : l'enlever des deux listes ci-dessous */
.studio-texte h2, .valeurs-titre, .rejoindre h2, .typologies h2,
.galerie-titre, .autres-titre, .form-titre, .manifeste-label, .mega-col-titre {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  align-self: start;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Trait : longueur (width) et épaisseur (height) */
.studio-texte h2::before, .valeurs-titre::before, .rejoindre h2::before, .typologies h2::before,
.galerie-titre::before, .autres-titre::before, .form-titre::before, .manifeste-label::before,
.mega-col-titre::before {
  content: '';
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.studio-texte h2 { padding-top: 0.75rem; }
.valeurs-titre { margin-bottom: 0.5rem; }

/* ============================================================
   NUMÉROS 01, 02, 03
   L'Atelier : engagements / Expertise : savoir-faire et étapes
   Taille : font-size / Couleur : color
   ============================================================ */
.valeur-num, .etape-num, .exp-num {
  display: block;
  font-family: var(--titres);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
  color: #b3b2ab;
}
.valeur, .etape { padding-top: 1.4rem; }
.exp-titre { margin-top: 1rem; }

/* ============================================================
   TABLETTE ET MOBILE (écran de 900 px ou moins)
   Passage des sections en une seule colonne
   ============================================================ */
@media (max-width: 900px) {
  .studio-hero, .exp-hero, .contact-page, .contact-grille,
  .manifeste, .studio-texte, .typologies, .rejoindre, .projet-corps {
    grid-template-columns: 1fr;
  }
  body .studio-hero .intro,
  body .exp-hero .intro,
  body .contact-intro { grid-column: 1; }
  body .projets-intro { margin-left: 0; }
  .contact-grille > div:last-child { max-width: none; }
  .studio-texte h2 { padding-top: 0; margin-bottom: 1.2rem; }
}

/* ============================================================
   MENU PLEIN ÉCRAN
   ============================================================ */

/* Défilement du menu sur les petits écrans */
.mega { overflow-y: auto; }

/* Panneau sur toute la hauteur : listes en haut, coordonnées en bas */
.mega-panneau {
  min-height: 100vh;
  grid-template-rows: auto 1fr;
  align-content: stretch;
}

/* Bas du menu : logo, réseaux sociaux, coordonnées, mentions */
.mega-foot {
  display: block;
  align-self: end;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.09);
}

/* Rubriques (colonne de gauche) : taille selon la hauteur de l'écran */
body .mega-menu-list li a {
  font-size: clamp(1.8rem, 4.6vh, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  padding: clamp(0.2rem, 0.6vh, 0.4rem) 0;
}
/* Sous-menu (colonne de droite) : taille selon la hauteur de l'écran */
body .mega-sub-list li a {
  font-size: clamp(0.96rem, 1.9vh, 1.2rem);
  padding: clamp(0.3rem, 0.7vh, 0.5rem) 0;
}
.mega-col-titre { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }

/* Téléphone : tailles fixes */
@media (max-width: 560px) {
  body .mega-menu-list li a { font-size: 1.5rem; padding: 0.24rem 0; }
  body .mega-sub-list li a { font-size: 0.96rem; padding: 0.32rem 0; }
}

/* Bas du menu, 1re ligne : logo et réseaux sociaux
   Taille du logo : height */
.mf-haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mf-logo { height: 34px; width: auto; display: block; }
.mf-socials { display: flex; gap: 0.7rem; }
.mf-socials a {
  width: 32px; height: 32px; border-radius: 50%; background: #1e1e1e;
  display: flex; align-items: center; justify-content: center;
  color: #b8b8b2; transition: background .2s, color .2s;
}
.mf-socials a:hover { background: #2a2a2a; color: #fff; }
.mf-socials svg { width: 15px; height: 15px; fill: currentColor; }

/* Bas du menu, 2e ligne : coordonnées et mentions légales */
.mf-bas {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.8rem;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.mf-contact, .mf-legal {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: 0.68rem; letter-spacing: 0.08em; color: #7d7d78;
}
.mf-contact { text-transform: uppercase; color: #b8b8b2; }
.mf-contact a, .mf-legal a { transition: color .2s; }
.mf-contact a:hover, .mf-legal a:hover { color: #fff; }
@media (max-width: 560px) {
  .mf-bas { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CARROUSEL D'ACCUEIL
   Cadrage des photos : background-position
   ============================================================ */
#hero .hero-slide .ph {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hauteur du carrousel : celle de l'écran visible */
.hero { height: 100vh; height: 100svh; }

/* ============================================================
   AJUSTEMENTS TABLETTE ET MOBILE
   ============================================================ */

/* Tablette (900 px ou moins) - accueil : format des grandes tuiles */
@media (max-width: 900px) {
  .tuile-grande .ph { aspect-ratio: 16 / 9; }
}

/* Téléphone (560 px ou moins) */
@media (max-width: 560px) {
  /* En-tête : taille du logo et hauteur de la barre */
  body .logo-img { height: 40px; }
  header.top { padding-top: 1rem; padding-bottom: 1rem; }
  /* Barres placées sous l'en-tête : décalage à recalculer si la
     hauteur du logo change (hauteur du logo + 2rem + 1px) */
  body .fil, body .barre-titre { margin-top: calc(40px + 2rem + 1px); }

  /* Accueil : format des grandes tuiles */
  .tuile-grande .ph { aspect-ratio: 4 / 3; }

  /* Accueil, bas du carrousel : position de l'accroche, des points et de la flèche */
  .hero-legende { bottom: 4.4rem; right: clamp(1.2rem, 3vw, 2.4rem); }
  .hero-dots { bottom: 1.8rem; }
  .hero-scroll { bottom: 1.5rem; }
}