/* Heop — la VOIX de la vitrine pro.
 *
 * Le verdict de Julien ne porte pas sur l'agencement mais sur la NATURE de la
 * page : « pas le standard visuel propose — humain, comme un CV pro bien
 * agence mais en mieux ». Une fiche catalogue et un CV portent les memes
 * blocs ; ce qui les separe tient en trois reglages, tous mesurables.
 *
 * 1. LA HIERARCHIE EST SERVIE PAR UNE POLICE D'AFFICHAGE.
 *    Fraunces est auto-hebergee et deja chargee sur toutes les surfaces
 *    (css/ui/fonts.css, via components/styles/core.html). La feuille producteur
 *    ne l'appelait nulle part : tous les titres tombaient sur la pile systeme,
 *    donc au meme grain que le corps de texte. Un titre qui a le grain du
 *    paragraphe ne hierarchise rien — il annonce un formulaire.
 *
 * 2. LA COLONNE DE LECTURE EST BORNEE A ENVIRON 66 SIGNES.
 *    Au-dela, l'oeil qui revient a la marge gauche ne retrouve pas sa ligne et
 *    relit la precedente. C'est la mesure classique du confort de lecture, et
 *    elle est contractable : `ch` est l'unite du signe de la police en cours.
 *    Elle ne s'applique qu'a l'HISTOIRE — le texte suivi — jamais aux grilles.
 *
 * 3. LA RESPIRATION EST CE QUI DISTINGUE UN CV D'UN FORMULAIRE.
 *    L'espace n'est pas du vide : c'est lui qui dit ou une idee s'arrete.
 */

.public-producer-story h2,
.public-producer-pickup h2,
.public-producer-workshops h2,
.public-producer-offers h2,
.public-producer-hero h1 {
    font-family: var(--ui-font-display);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.12;
}

.public-producer-hero h1 {
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
}

.public-producer-story h2,
.public-producer-pickup h2,
.public-producer-workshops h2,
.public-producer-offers h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

/* Le nom du lieu et le prix sont des reperes, pas du texte courant : ils
   prennent le grain d'affichage pour se detacher de la description. */
.public-producer-pickup__point-heading h3,
.public-producer-workshop__title {
    font-family: var(--ui-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* --- La couverture compacte ---------------------------------------------- */

/* L'en-tete montait jusqu'a 500px de haut. Sur un portable, la premiere phrase
 * du professionnel commencait donc sous le pli : on voyait une banniere, puis
 * il fallait defiler pour rencontrer quelqu'un. La cible v6 la comprime pour
 * que le NOM et la VOIX arrivent les premiers.
 *
 * La couverture ne disparait pas — elle cesse d'etre le sujet.
 */

.public-producer-hero__visual {
    height: clamp(150px, 34vw, 210px);
}

/* La feuille de base relance une hauteur minimale a partir de 520px ; sans ce
   retour a zero, elle rendrait la compression sans effet. */
@media (min-width: 520px) {
    .public-producer-hero__visual {
        min-height: 0;
    }
}

/* A partir de 700px, la couverture remplit l'en-tete et c'est LUI qu'on regle. */
@media (min-width: 700px) {
    .public-producer-hero {
        height: clamp(300px, 30vw, 360px);
    }
}

/* --- La colonne de lecture ---------------------------------------------- */

.public-producer-story__texte {
    display: grid;
    gap: var(--ui-space-2);
    max-width: 66ch;
}

.public-producer-story__texte p {
    color: var(--ui-color-muted);
    line-height: 1.65;
}

.public-producer-story__texte blockquote {
    margin: 0;
    padding-left: var(--ui-space-2);
    border-left: 2px solid var(--ui-color-brand);
    color: var(--ui-color-ink);
    font-family: var(--ui-font-display);
    font-size: var(--ui-font-md);
    font-style: normal;
    line-height: 1.45;
}

/* --- La respiration ------------------------------------------------------ */

.public-producer-story,
.public-producer-pratique,
.public-producer-offers,
.public-producer-workshops {
    margin-block: var(--ui-space-4);
}

.public-producer-story__intro {
    display: grid;
    gap: var(--ui-space-2);
}