/* ==========================================================================
   presentation.css
   Bloc "présentation" : texte à gauche, image à droite, 50/50 sur
   ordinateur, empilé sur téléphone. Classes préfixées pr- pour ne
   collisionner avec aucune autre feuille du système.

   À charger après style.css dans le gabarit.
   ========================================================================== */

.pr-section {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.pr-enveloppe {
  width: 100%;
  /* Mêmes largeur et gouttière que .nv-enveloppe et .bv-enveloppe : les
     trois blocs doivent commencer exactement sur la même verticale.
     Les valeurs de secours répètent celles de site-client.css au cas où
     cette feuille serait chargée seule. */
  max-width: var(--largeur-site, 96rem);
  margin-inline: auto;
  padding-inline: var(--gouttiere, clamp(0.75rem, 2vw, 1.25rem));
}

.pr-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 56rem) {
  /* minmax(0, 1fr) et non 1fr sec : une piste "1fr" vaut en réalité
     "minmax(auto, 1fr)" et refuse de descendre sous la largeur
     min-content de son contenu, ce qui fait déborder la page. Même
     mécanique que dans bloc-vitrine.css. */
  .pr-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Image à gauche, texte à droite. On inverse par l'ordre visuel et non
     dans le HTML : l'ordre de lecture reste texte-puis-image pour un
     lecteur d'écran, ce qui est le sens naturel du contenu. */
  .pr-grille--inverse .pr-colonne-texte { order: 2; }
  .pr-grille--inverse .pr-colonne-image { order: 1; }

  /* Une seule colonne remplie : inutile de réserver la moitié de la
     largeur à du vide. */
  .pr-grille--seule { grid-template-columns: minmax(0, 1fr); }
  .pr-grille--seule .pr-colonne-texte { max-width: 62ch; margin-inline: auto; }
}

.pr-colonne-texte { min-width: 0; }
.pr-colonne-image { min-width: 0; }

.pr-titre {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 1.1rem;
  color: var(--encre, #16241D);
}

/* Filet coloré sous le titre, dans la couleur d'accent du secteur.
   Repris de l'esprit des étiquettes du reste du site. */
.pr-titre::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: .8rem;
  background: var(--pr-accent, var(--feria, #C1272D));
}

.pr-texte {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--encre-doux, #5A6960);
  margin: 0 0 1rem;
  max-width: 62ch;
}
.pr-texte:last-of-type { margin-bottom: 0; }

.pr-bouton {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .8rem 1.6rem;
  border-radius: 4px;
  background: var(--bouton-fond, var(--pr-accent, #C1272D));
  color: var(--bouton-texte, #fff);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.pr-bouton:hover {
  background: var(--bouton-fond-hover, var(--pr-accent, #C1272D));
  color: var(--bouton-texte-hover, var(--bouton-texte, #fff));
  opacity: .9;
}

.pr-image {
  width: 100%;
  height: auto;
  /* Ratio imposé plutôt que hauteur libre : sans lui, une photo verticale
     de téléphone fait deux fois la hauteur du texte à côté et déséquilibre
     complètement la section. object-fit recadre proprement au centre. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: var(--sable, #D3C7AB);
}

@media (max-width: 55.99rem) {
  /* Sur téléphone la colonne fait toute la largeur : un ratio moins haut
     évite que l'image mange tout l'écran avant qu'on atteigne le texte. */
  .pr-image { aspect-ratio: 3 / 2; }
}