/* ============================================================
   referencement-commun.css
   Architecture commune des sections de 0-referencement.html
   (Espace Pro — offre de référencement)

   Chaque section de la page (Votre fiche, Intro et accroche,
   Site, Limites, Critères...) est un bloc autonome, directement
   sous .content, avec son propre padding intégré — même logique
   que les fiches des pages h2 (.section), pas un padding partagé
   entre plusieurs blocs.
   ============================================================ */

:root {
    --section-pro-titre-margin: 3.75rem;
    --section-pro-intro-margin: 5.63rem;
    --section-pro-colonne-gap: 2.5rem;
}

.section-pro {
    width: 100%;
    padding: 7.5rem 3.75rem;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .section-pro {
        padding: 3.75rem 1.88rem;
        scroll-margin-top: 4.63rem;
    }
}

@media (max-width: 374px) {
    .section-pro {
        padding: 2.5rem 1.25rem;
    }
}

@media (min-width: 1921px) {
    .section-pro {
        padding-left: calc((100% - var(--contenu-max-largeur)) / 2 + 3.75rem);
        padding-right: calc((100% - var(--contenu-max-largeur)) / 2 + 3.75rem);
    }
}

.section-titre-pro {
    grid-column: 1 / -1;
    font-size: var(--font-size-4);
    font-weight: 700;
    color: var(--vert-4);
    margin: 0 0 var(--section-pro-titre-margin) 0;
}

.section-intro-pro {
    grid-column: 1 / -1;
    font-size: var(--font-size-2);
    font-weight: 700;
    color: var(--vert-4);
    margin: 0 0 var(--section-pro-intro-margin) 0;
}

/* Guillemet décoratif réutilisable pour les intros pro (droite de page).
   La couleur se personnalise par section via --intro-guillemet-couleur. */
.intro-guillemet::before {
    content: '\00AB';
    float: left;
    font-size: 6rem;
    line-height: 0.5;
    font-weight: 700;
    color: var(--intro-guillemet-couleur, var(--vert-3));
    margin: -0.8rem 0.63rem 0 0;
}

@media (max-width: 1023px) {
    .intro-guillemet::before {
        font-size: 4rem;
    }
}