/* ==========================================================================
   ESPACE PRESSE (20/10/2026) — feuille SÉPARÉE de site.css, chargée seulement
   par page-presse.php (functions.php). Même principe que bon-cadeau.css :
   site.css bloque l'affichage de toutes les pages, il ne porte pas ce qui ne
   sert qu'à une seule.
   Composants du site réutilisés : .section, .conteneur, .titre-page,
   .reponse-directe, .entete-section__*, .contenu, .bouton. Ici, seulement ce
   que la page ajoute : les trois phrases, la fiche des faits, les deux
   colonnes « fait / ne fait pas », la grille des visuels.
   ========================================================================== */

:root {
  --presse-terme: 180px;              /* colonne des intitulés de la fiche */
  --presse-interligne-terme: 2.1;     /* 13 px × 2,1 ≈ la 1re ligne du texte voisin (17 px × 1,6) */
  --presse-retrait: 22px;             /* retrait des listes, place de la puce */
  --presse-puce: 7px;
  --presse-puce-haut: 0.62em;
  --presse-tiret: 10px;
  --presse-filet: 2px;
  --presse-vignette: 112px;           /* vignette d'une capture, sur téléphone */
  --presse-cadre-mobile: 152px;
  --presse-cadre-capture: 280px;
  --presse-cadre-logo: 140px;
}

/* --- Hello Pamy en trois phrases ------------------------------------------ */

.presse-trois {
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-06);
  border-radius: var(--rayon);
}

.presse-trois__titre {
  margin-bottom: var(--gap-s);
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--nuit);
}

.presse-trois p {
  max-width: var(--largeur-lecture);
  font-size: var(--taille-corps-l);
  line-height: 1.6;
  color: var(--nuit);
}

.presse-trois p + p {
  margin-top: var(--gap-s);
}

.presse-trois .presse-trois__note {
  margin-top: var(--gap-m);
  padding-top: var(--gap-s);
  border-top: 1px solid var(--voile-nuit-09);
  font-size: var(--taille-corps-m);
  color: var(--texte-clair);
}

/* --- Les faits ------------------------------------------------------------ */

.presse-faits {
  margin-top: var(--gap-m);
  border-top: 1px solid var(--voile-nuit-09);
}

.presse-faits__ligne {
  display: grid;
  gap: var(--gap-xs);
  padding: var(--gap-s) 0;
  border-bottom: 1px solid var(--voile-nuit-09);
}

.presse-faits dt {
  font-size: var(--taille-mini);
  font-weight: 600;
  line-height: var(--presse-interligne-terme);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.presse-faits dd {
  line-height: 1.6;
  color: var(--texte-doux);
}

/* --- Ce qu'elle fait, ce qu'elle ne fait pas ------------------------------ */

.presse-colonnes {
  display: grid;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

.presse-colonne {
  padding: var(--gap-m);
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-06);
  border-radius: var(--rayon);
}

.presse-colonne__titre {
  margin-bottom: var(--gap-s);
  font-family: var(--police-display);
  font-size: var(--taille-h5);
  font-weight: 500;
  line-height: 1.3;
  color: var(--nuit);
}

.presse-liste {
  display: grid;
  gap: var(--gap-xs);
  list-style: none;
}

.presse-liste li {
  position: relative;
  padding-left: var(--presse-retrait);
  line-height: 1.5;
  color: var(--texte-doux);
}

/* La puce : un point de l'accent, décoratif (règle du ton porteur). */
.presse-liste li::before {
  content: '';
  position: absolute;
  top: var(--presse-puce-haut);
  left: 0;
  width: var(--presse-puce);
  height: var(--presse-puce);
  border-radius: 50%;
  background: var(--corail);
}

/* Les limites : un tiret neutre, pas l'accent — on ne les « vend » pas. */
.presse-liste--limites li::before {
  top: 0.72em;
  width: var(--presse-tiret);
  height: var(--presse-filet);
  border-radius: var(--presse-filet);
  background: var(--texte-clair);
}

.presse-colonne__lien {
  margin-top: var(--gap-s);
}

.presse-colonne__lien a {
  font-weight: 500;
  color: var(--corail-texte);
  text-underline-offset: 4px;
}

/* --- Le fondateur, le contact --------------------------------------------- */

.presse-recit {
  margin-top: var(--gap-s);
}

/* --- Visuels à télécharger ------------------------------------------------ */

.presse-entete {
  max-width: var(--largeur-texte);
}

.presse-entete__action {
  margin-top: var(--gap-m);
}

.presse-entete__format {
  font-weight: 400;
  color: var(--voile-creme-72);
}

.presse-sous-titre {
  margin-top: var(--gap-l);
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--nuit);
}

.presse-visuels {
  display: grid;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  list-style: none;
}

/* Sur téléphone, une capture est une ligne : la vignette à gauche, le texte
   à droite. Le cadre a une hauteur fixe : l'image s'y loge sans jamais
   déplacer la page en arrivant (CLS 0), quel que soit son format. */
.presse-visuel {
  display: grid;
  grid-template-columns: var(--presse-vignette) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gap-s);
  row-gap: var(--gap-xs);
  align-items: start;
  padding: var(--gap-s);
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-06);
  border-radius: var(--rayon);
}

.presse-visuel__cadre {
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--presse-cadre-mobile);
  padding: var(--gap-xs);
  background: var(--creme-ombre);
  border-radius: var(--rayon-s);
}

.presse-visuel__cadre--nuit {
  background: var(--nuit);
}

.presse-visuel__cadre img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--rayon-s);
}

.presse-visuel__titre {
  line-height: 1.45;
  font-weight: 500;
  color: var(--nuit);
}

.presse-visuel__format {
  font-size: var(--taille-petit);
  line-height: 1.5;
  color: var(--texte-clair);
}

.presse-visuel__lien {
  align-self: end;
  justify-self: start;
  font-weight: 500;
  color: var(--corail-texte);
  text-underline-offset: 4px;
}

/* Les logos sont larges : empilés, même sur téléphone. */
.presse-visuels--logos .presse-visuel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
}

.presse-visuels--logos .presse-visuel__cadre {
  grid-row: auto;
  height: var(--presse-cadre-logo);
  margin-bottom: var(--gap-xs);
  padding: var(--gap-s);
}

@media (min-width: 640px) {
  .presse-faits__ligne {
    grid-template-columns: var(--presse-terme) minmax(0, 1fr);
    gap: var(--gap-m);
  }

  .presse-colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .presse-visuels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-m);
  }

  .presse-visuels--logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .presse-visuel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }

  .presse-visuel__cadre {
    grid-row: auto;
    height: var(--presse-cadre-capture);
    margin-bottom: var(--gap-xs);
    padding: var(--gap-s);
  }

  .presse-visuels--logos .presse-visuel__cadre {
    height: var(--presse-cadre-logo);
  }
}

@media (min-width: 960px) {
  /* Six captures : trois colonnes, deux rangées pleines (aucune orpheline). */
  .presse-visuels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}