/* ============================================================
   Sections 02 à 06 de la home — différenciation + parallaxe
   15/09
   ------------------------------------------------------------
   Chargée en dernier, après boutons.css. Feuille isolée, même
   raison que boutons.css : editorial.css et studio-sections.css
   sont édités ailleurs, on n'écrit pas dedans.

   Deux choses seulement ici :
   1. Le moteur générique de parallaxe. Les amplitudes ne sont
      PAS dans ce fichier, elles vivent dans la table PLANS de
      js/sections-parallax.js. Ici on ne fait qu'appliquer.
   2. Les retouches de composition qui donnent à chaque section
      une silhouette distincte, pour casser la répétition du
      rythme éditorial.

   Pour tout annuler : retirer les deux balises ajoutées dans
   index.html, supprimer ce fichier et js/sections-parallax.js.
   ============================================================ */

/* --- 04 / 06 Signature : regles retirees le 16/09 ---------------------
   La section #signature (carrousel des reperes) a quitte la page. Les
   quelques regles de filtre et de degrade qui la corrigeaient ici
   n'avaient plus de cible. Balisage archive :
   archive/copy-20260916/slider-reperes.html

   Ce qui reste dans ce fichier ne concerne plus que la section presse.
   Le moteur generique de parallaxe annonce en tete n'est plus charge :
   js/sections-parallax.js avait une table PLANS vide, il a ete delie
   d'index.html le meme jour. */

/* --- 06 / 06 Presse, liste d'articles ---------------------------------
   Reecrite le 15/09. L'ancienne version tenait un ecran entier pour une
   affirmation invérifiable, « des retombées dans douze pays », et deux
   grandes photos. Pour un proprietaire de restaurant qui evalue un
   consultant, ca ne prouve rien et ca n'aide a rien.

   A la place : quatre articles reels, cliquables, avec le nom du media et
   l'annee. Meme hauteur de section, densite et verifiabilite en plus.
   La presse professionnelle passe en premier, c'est celle qui parle a
   cette audience. */
#presse .home-press-tete{
  display: grid;
  grid-template-columns: minmax(6rem, 0.2fr) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

#presse .home-press-liste ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(240, 234, 223, 0.14);
}

#presse .press-ligne{
  display: grid;
  grid-template-columns: minmax(7rem, 0.22fr) 1fr auto;
  align-items: baseline;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  border-bottom: 1px solid rgba(240, 234, 223, 0.14);
  color: var(--bone);
  text-decoration: none;
  transition: background-color 0.35s var(--ease), padding-inline 0.35s var(--ease);
}

@media (hover: hover){
  #presse .press-ligne:hover{
    background: rgba(240, 234, 223, 0.045);
    padding-inline: clamp(0.5rem, 1.5vw, 1.2rem);
  }
}

#presse .press-media{
  color: var(--brass);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Le titre porte l'information : c'est lui qu'on lit en diagonale. */
#presse .press-titre{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

#presse .press-annee{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(240, 234, 223, 0.55);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

#presse .home-press-liste .home-text-link{
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Trois colonnes deviennent illisibles en etroit : le media passe
   au-dessus du titre, l'annee reste calee a droite. */
@media (max-width: 720px){
  #presse .home-press-tete{ grid-template-columns: 1fr; }
  #presse .press-ligne{
    grid-template-columns: 1fr auto;
    gap: 0.35rem clamp(0.75rem, 3vw, 1.5rem);
  }
  #presse .press-media{ grid-column: 1 / -1; }
}


/* --- Bandeau « Vu et entendu dans » ------------------------------------
   16/09. Cinq logos de medias qui ont reellement couvert Thomas. A ne pas
   confondre avec les logos partenaires plus bas : ceux-ci disent « on a
   parle de lui », les autres disent « il a travaille pour eux ».

   Pose juste sous le titre, avant la liste d'articles : un logo se lit d'un
   coup d'oeil, un titre d'article demande qu'on s'arrete.

   Pas de tuile, pas de cadre : la section est en fond clair et les fichiers
   sont soit des aplats (RTL, BFMTV) soit des mots detoures sur transparence
   (Gault&Millau, Le Chef, L'Hotellerie). Une tuile ne servirait qu'aux
   seconds et alourdirait les premiers. */
#presse .home-press-medias{
  margin-block-end: clamp(2.25rem, 4.5vw, 3.5rem);
}

#presse .press-medias-logos{
  display: flex;
  flex-wrap: wrap;
  /* align-items: center et non baseline : ces logos n'ont pas de ligne de
     base commune, un aplat carre n'en a meme aucune. */
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

#presse .press-medias-logos li{
  margin: 0;
  line-height: 0;
}

/* La hauteur vient de --logo-h, pose element par element dans le HTML.
   Raison : les rapports de forme vont de 1 (BFMTV, aplat carre) a 7.1
   (Gault&Millau, mot seul). A hauteur egale l'aplat pese bien plus lourd a
   l'oeil que le mot. Une valeur unique est donc impossible ici, contrairement
   aux logos partenaires plus bas qui sont tous des mots.

   Le repli a 1.6rem ne sert que si un logo arrive sans --logo-h. */
#presse .press-medias-logos img{
  display: block;
  block-size: var(--logo-h, 1.6rem);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  /* Les couleurs de marque restent, c'est ce qui les rend reconnaissables en
     peripherie. On retire seulement un peu de saturation et d'opacite pour
     que le rouge RTL et le bleu BFM ne prennent pas le pas sur le titre de
     section juste au-dessus. */
  opacity: 0.82;
  filter: saturate(0.9);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

@media (hover: hover){
  #presse .press-medias-logos li:hover img{ opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce){
  #presse .press-medias-logos img{ transition: none; }
}

/* --- Les logos partenaires --------------------------------------------
   Ajoutes le 15/09 apres confirmation. Pour un proprietaire de restaurant
   ou une marque qui evalue Thomas, quatre maisons identifiables valent
   davantage qu'une etoile : l'etoile dit le niveau, les maisons disent
   qu'on lui a deja confie un budget.

   Les fichiers portent leur propre fond clair. Plutot que de le masquer
   par un filtre, qui abime les logos fins comme Perrier-Jouet, on l'assume
   en tuile. object-fit: contain, jamais cover : un logo recadre est un
   logo deforme, et c'est une marque tierce. */
#presse .home-press-partenaires{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid rgba(240, 234, 223, 0.14);
}

#presse .press-partenaires-label{
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.75rem);
  color: var(--brass);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#presse .press-logos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

#presse .press-logos li{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rembourrage reduit le 16/09 : c'est lui qui bridait la taille des
     logos, la largeur de tuile disponible etant la vraie contrainte. */
  padding: clamp(0.6rem, 1.2vw, 1rem);
  border-radius: 0.4rem;
  background: rgba(240, 234, 223, 0.94);
  opacity: 0.78;
  transition: opacity 0.35s var(--ease);
}

@media (hover: hover){
  #presse .press-logos li:hover{ opacity: 1; }
}

/* Hauteur genereuse et largeur libre. Premiere version : hauteur figee a
   51px et inline-size 100%. Avec object-fit: contain, chaque logo se
   reduisait selon SON rapport de forme, mesure dans Chrome :
     Moet 2.43 -> 124x51   Perrier 1.86 -> 95x51
     Rova 1.81 ->  92x51   Origine 1.13 -> 58x51
   Les deux plus carres tombaient a une miniature ou leur lettrage fin
   disparaissait : le logo Rova semblait purement absent de sa tuile.

   On laisse donc la largeur libre et on double la hauteur utile. Les
   ecarts subsistent, ils tiennent aux marges internes de chaque fichier,
   mais les quatre marques redeviennent lisibles. */
#presse .press-logos img{
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: clamp(4rem, 7vw, 6rem);
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce){
  #presse .press-logos li{ transition: none; opacity: 1; }
}


/* --- 06 / 06 Presse en fond clair -------------------------------------
   16/09. Bascule demandee. Le site etant ecrit en clair-sur-sombre, chaque
   couleur heritee doit etre reprise une par une, exactement comme pour la
   section 05 : sans cela le texte disparait dans le fond.

   ATTENTION : la section 05 « Parcours » est deja claire et la precede
   immediatement. Les deux se touchent donc sans transition de valeur.
   Le filet superieur ci-dessous est la pour marquer la couture. */
#presse{
  background: var(--bone);
  color: var(--night);
  border-top: 1px solid rgba(14, 16, 36, 0.12);
}

#presse .section-index,
#presse .kicker,
#presse .press-media,
#presse .press-partenaires-label{ color: var(--or-attenue, #8a6a48); }

#presse .home-section-title,
#presse .press-titre,
#presse .home-text-link{ color: var(--night); }

#presse .press-annee{ color: rgba(14, 16, 36, 0.5); }
#presse .home-text-link{ border-bottom-color: rgba(14, 16, 36, 0.35); }

/* Les filets des lignes d'articles passent en trait sombre. */
#presse .home-press-liste ul,
#presse .press-ligne,
#presse .home-press-partenaires{ border-color: rgba(14, 16, 36, 0.14); }

#presse .press-ligne{ color: var(--night); }

@media (hover: hover){
  #presse .press-ligne:hover{ background: rgba(14, 16, 36, 0.04); }
}

/* Les tuiles de logos etaient un aplat clair pose sur du sombre. Sur fond
   clair elles n'ont plus de raison d'etre : le logo repose directement sur
   la section, avec un simple filet pour tenir la grille. */
#presse .press-logos li{
  background: transparent;
  border: 1px solid rgba(14, 16, 36, 0.12);
  opacity: 1;
}

@media (hover: hover){
  #presse .press-logos li:hover{ background: rgba(14, 16, 36, 0.03); }
}

/* --- 06 / 06 Presse, lecture en galerie -------------------------------
   Les deux visuels étaient alignés. On les décale verticalement pour
   qu'ils se lisent comme une composition, la parallaxe fait le reste. */
/* Les decalages des deux visuels de presse ont ete retires avec eux. */