/**
 * Pages PHP — rythme vertical entre les blocs (règle validée le 23/09/2026,
 * voir DESIGNS.md § « Rythme vertical »).
 *
 * Chargé sur toutes les pages PHP (comme tous les _composants/*.css). Ne
 * touche pas aux blocs des pages construites dans l'admin.
 *
 * Principe (loi de proximité) : un Titre principal appartient au bloc qui
 * le suit. Il en est donc proche, et nettement séparé de la section
 * précédente :
 *
 *   contenu de la section précédente
 *                      ↕  --pphp-espace-section  (120 px, 72 px sur mobile)
 *   Titre principal (sur-titre, titre, sous-titre)
 *                      ↕  --pphp-espace-titre    (40 px, 24 px sur mobile)
 *   bloc de la section (texte, image-texte, encart, cartes…)
 *
 * Les écarts sont mesurés entre ce qui se VOIT (texte, image, bord d'une
 * bande de couleur), pas entre les boîtes : les blocs ont chacun leurs
 * marges intérieures (padding 50 px / 25 px sur mobile, décalages propres),
 * compensées ci-dessous bloc par bloc. Entre deux blocs sans Titre principal,
 * l'écart des blocs est conservé (100 px / 50 px sur mobile).
 *
 * Contrôle : php .claude/skills/nouvelle-page-php/apercu.php modele-de-page,
 * puis mesurer les écarts visibles (COMPOSANTS.md §6, DESIGNS.md « Rythme vertical »).
 */

.page-php__main {
    --pphp-espace-section: 120px;
    --pphp-espace-titre: 40px;
    /* padding vertical commun des blocs (css des blocs) */
    --pphp-bloc-padding: 50px;
    /* décalages propres à certains blocs (mesurés, css des blocs) */
    --pphp-decalage-imagetexte: 25px;  /* marge haute de l'item */
    --pphp-decalage-citation: 24px;    /* guillemet décoratif au-dessus du cadre */
    --pphp-decalage-remontee: 34px;    /* espace au-dessus des cartes */
    --pphp-decalage-remontee-bas: 30px; /* espace sous les cartes */
    --pphp-decalage-hub: 0px;          /* padding de l'en-tête du Hub */
    /* bandes alternées (section 3) : marge intérieure visible haut et bas */
    --pphp-espace-bande: 80px;
}

@media (max-width: 700px) {
    .page-php__main {
        --pphp-espace-section: 72px;
        --pphp-espace-titre: 24px;
        --pphp-bloc-padding: 25px;
        --pphp-decalage-imagetexte: 14px;
        --pphp-decalage-citation: 10px;
        --pphp-decalage-remontee: 19px;
        --pphp-decalage-remontee-bas: 15px;
        --pphp-decalage-hub: 32px;
        --pphp-espace-bande: 48px;
    }
}

/* -------------------------------------------------------------------------
   1. Avant un Titre principal : espace de section.
   Le bloc précédent apporte son padding bas ; le sur-titre a 10 px de
   padding haut (css du bloc Titre principal).
   ------------------------------------------------------------------------- */

:is(.page-php__main, .pphp-bande) > .bloc-titre-principal {
    padding-top: calc(var(--pphp-espace-section) - var(--pphp-bloc-padding) - 10px);
    padding-bottom: 0;
}

/* Précédent sans padding bas visible : bande de couleur ou photo (le bord se
   voit), image-texte pleine largeur, carte (marge au lieu du padding). */
:is(.page-php__main, .pphp-bande) > .bloc-texte--couleur + .bloc-titre-principal,
:is(.page-php__main, .pphp-bande) > .bloc-texte--image + .bloc-titre-principal,
:is(.page-php__main, .pphp-bande) > .bloc-imagetexte--full + .bloc-titre-principal {
    padding-top: calc(var(--pphp-espace-section) - 10px);
}

/* Cartes photo (remontée) : espace libre sous les cartes */
:is(.page-php__main, .pphp-bande) > .bloc-remontee + .bloc-titre-principal {
    padding-top: calc(var(--pphp-espace-section) - var(--pphp-bloc-padding) - 10px - var(--pphp-decalage-remontee-bas));
}

/* Deux Titres principaux qui se suivent (le premier n'a pas de bloc) */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-titre-principal {
    padding-top: calc(var(--pphp-espace-section) - 10px);
}

/* Sommaire juste sous le bandeau, sans introduction au-dessus (ex. Comment
   venir) : même écart sous le bandeau que le padding d'un bloc
   (.apercu-bandeau : bandeau factice de l'aperçu hors WordPress). */
.page-php__main > :is(.mainBandeau, .apercu-bandeau) + .pphp-sommaire {
    padding-top: var(--pphp-bloc-padding);
}

/* Premier Titre principal juste sous le sommaire ou l'introduction */
:is(.page-php__main, .pphp-bande) > .pphp-sommaire + .bloc-titre-principal {
    padding-top: calc(var(--pphp-espace-titre) + 16px);
}

/* -------------------------------------------------------------------------
   2. Après un Titre principal : le bloc qui suit s'en rapproche.
   ------------------------------------------------------------------------- */

:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + * {
    padding-top: var(--pphp-espace-titre);
}

/* Bande de couleur ou photo : le bord est visible, l'écart se fait dehors et
   la bande garde son padding intérieur. */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-texte--couleur,
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-texte--image {
    margin-top: var(--pphp-espace-titre);
    padding-top: var(--pphp-bloc-padding);
}

/* Image-texte horizontal : l'item a une marge haute (css du bloc). */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-imagetexte--horizontal {
    padding-top: max(0px, calc(var(--pphp-espace-titre) - var(--pphp-decalage-imagetexte)));
}

/* Image-texte pleine largeur : padding forcé à 0 dans le markup du bloc. */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-imagetexte--full {
    margin-top: max(0px, calc(var(--pphp-espace-titre) - var(--pphp-decalage-imagetexte)));
}

/* Citation : le guillemet décoratif dépasse au-dessus du cadre. */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-imagetexte--citation {
    padding-top: calc(var(--pphp-espace-titre) + var(--pphp-decalage-citation));
}

/* Cartes photo (remontée) : espace propre au-dessus des cartes. */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-remontee {
    padding-top: max(0px, calc(var(--pphp-espace-titre) - var(--pphp-decalage-remontee)));
}

/* Hub : l'en-tête du Hub a son propre padding (mobile). */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-hub {
    padding-top: max(0px, calc(var(--pphp-espace-titre) - var(--pphp-decalage-hub)));
}

/* Encart avec photo ou logo (ordinateur) : l'image, centrée sur la carte,
   dépasse en haut et en bas (d'autant plus que le texte est court). */
@media (min-width: 701px) {
    :is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-encart:has(.bloc-encart__card--has-image) {
        padding-top: calc(var(--pphp-espace-titre) + 36px);
    }

    :is(.page-php__main, .pphp-bande) > .bloc-encart:has(.bloc-encart__card--has-image) + .bloc-titre-principal {
        padding-top: calc(var(--pphp-espace-section) - var(--pphp-bloc-padding) - 10px + 36px);
    }
}

/* Carte interactive : espacée par des marges, pas de padding. */
:is(.page-php__main, .pphp-bande) > .bloc-titre-principal + .bloc-carte {
    margin-top: var(--pphp-espace-titre);
    padding-top: 0;
}

/* -------------------------------------------------------------------------
   3. Bandes alternées (facultatif) : fond blanc / gris par section.
   Le gabarit enveloppe chaque section (Titre principal + son bloc) dans
   <div class="pphp-bande"> ou <div class="pphp-bande pphp-bande--gris">.
   Les règles 1 et 2 s'appliquent à l'intérieur de chaque bande ; entre deux
   bandes, c'est le changement de fond qui sépare les sections, avec
   --pphp-espace-bande de marge visible en haut et en bas de chaque bande.
   Un bloc à fond gris (texte fond gris, cartes grises, citation) va dans
   une bande blanche. Utilisé par : modele-de-page, comment-venir-dans-le-verdon.
   ------------------------------------------------------------------------- */

.pphp-bande {
    /* haut : le sur-titre du Titre principal a 10 px de padding ;
       bas : le dernier bloc apporte son padding (--pphp-bloc-padding). */
    padding: calc(var(--pphp-espace-bande) - 10px) 0 calc(var(--pphp-espace-bande) - var(--pphp-bloc-padding));
}

.pphp-bande--gris {
    background: #f8f8f8; /* gris du fond « gris » des blocs (.blocGris) */
}

.pphp-bande > .bloc-titre-principal:first-child {
    padding-top: 0;
}

/* Bande sans Titre principal (ex. encart d'aide de Comment venir) : le bloc
   garde 10 px de son padding haut, pour la même marge visible (80 / 48 px). */
.pphp-bande > :first-child:not(.bloc-titre-principal) {
    padding-top: 10px;
}

/* Bande avec un Titre principal seul */
.pphp-bande > .bloc-titre-principal:last-child {
    padding-bottom: var(--pphp-bloc-padding);
}

/* Dernier bloc sans padding bas visible : bande de couleur ou photo,
   image-texte pleine largeur. */
.pphp-bande > .bloc-texte--couleur:last-child,
.pphp-bande > .bloc-texte--image:last-child,
.pphp-bande > .bloc-imagetexte--full:last-child {
    margin-bottom: var(--pphp-bloc-padding);
}

/* Sommaire : peu de padding bas (css du composant) */
.pphp-bande > .pphp-sommaire:last-child {
    padding-bottom: var(--pphp-bloc-padding);
}

/* Cartes photo : espace libre sous les cartes */
.pphp-bande > .bloc-remontee:last-child {
    padding-bottom: max(0px, calc(var(--pphp-bloc-padding) - var(--pphp-decalage-remontee-bas)));
}

/* Encart avec image (ordinateur) : l'image dépasse sous la carte */
@media (min-width: 701px) {
    .pphp-bande > .bloc-encart:has(.bloc-encart__card--has-image):last-child {
        padding-bottom: calc(var(--pphp-bloc-padding) + 36px);
    }
}

/* Entre le sommaire et la première bande */
.page-php__main > .pphp-sommaire + .pphp-bande {
    margin-top: var(--pphp-espace-titre);
}