/* ============================================================
   ACCUEIL — bloc d'intro
   Ajouts sous css/projets.css (chargé après) :
   1.    un chapô centré en capitales

   2. une rangée de 5 expertises en dessous
   Mesures et typo reprennent celles de .container-hero
   (940px) et de .ligne-tagline (Acumin Variable Concept).
   ============================================================ */

/* --- 1. Section d'intro ------------------------------------- */

/*    L'intro garde son plein écran mais respire :
   le padding vertical est absorbé par le min-height:100vh
   (box-sizing: border-box global, webflow.css) */
.intro-camille {
  padding-top: clamp(72px, 11vh, 150px);
  padding-bottom: clamp(72px, 11vh, 150px);
}

/* Le conteneur des 2 niveaux (chapô / expertises).
   .intro-camille est un flex centré : ce bloc occupe toute la
   largeur du contenu pour que le chapô puisse filer jusqu'au
   bord droit de la navbar. C'est .intro-expertises qui reprend
   la mesure de référence du site (940px) et se recentre. */
.intro-bloc {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* --- 2. Chapô, aligné à droite, en gras -----------------------
    Police 'Acumin Variable Concept' (variable 100-900), graisse
    700, texte en minuscules tel qu'écrit dans le HTML
    (text-transform: none, aucune capitale forcée) et approche
    -50 (millièmes de cadratin, soit -0.05em).
    Le bord droit du texte est calé sur celui du lien CONTACT de
    la navbar (45px du bord écran) : la section a 25px de
    padding, les 20px de marge compensent cet écart. La mesure
    est élargie à 1300px pour que la 2e phrase tienne sur une
    seule ligne. */
.intro-bio {
  max-width: 1300px;
  margin: 0 20px 0 auto;
  font-family: var(--gilroy-light);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.05em;
  text-align: right;
  text-transform: none;
  color: var(--black);
}

/* Les <br> de composition ne sont utiles qu'en desktop :
   en dessous le texte se recompose tout seul. */
@media screen and (max-width: 767px) {
  .intro-bio-break {
    display: none;
  }
}

/* --- 3. Signature, entre le chapô et les expertises ----------
    « Directrice artistique / spécialisée dans la food. » en
    capitales, corps 90px, calé à gauche sur la marge de la
    section. */
.intro-signature {
  margin: clamp(40px, 5vw, 70px) 0 0;
  font-family: var(--gilroy-medium);
  font-weight: 700;
  font-size: 90px;
  line-height: .95;
  letter-spacing: -0.05em;
  text-align: left;
  text-transform: uppercase;
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .intro-signature {
    font-size: 64px;
  }
}

@media screen and (max-width: 767px) {
  .intro-signature {
    font-size: 48px;
  }
}

/* --- 4. Les 4 expertises -------------------------------------
    Plus de filet ni de grille : une seule rangée, tendue sur
    toute la largeur et centrée, les mots calés sur une ligne
    en descendant avec la largeur de l'écran. Sous 991px la
    rangée ne tient plus : elle repasse en flux, centré. */
.intro-expertises {
  list-style: none;
  max-width: none;
  margin: clamp(30px, 4vw, 60px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: clamp(72px, 11vw, 260px);
  row-gap: 0;
  white-space: nowrap;
}

.intro-expertise {
  font-family: var(--gilroy-medium);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 25px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .intro-expertises {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 8px;
  }
}

@media screen and (max-width: 680px) {
  /* L'intro n'a plus la place d'être un plein écran :
     on la laisse au naturel, sinon elle déborde à l'arrondi */
  .intro-camille {
    min-height: auto;
  }
}