/*
 * Sweet Revolution — styles propres à la phase 2 (site définitif).
 *
 * Chargée uniquement quand la phase live est active
 * (voir App\Controller\PhaseController::enqueueAssets).
 *
 * Pendant du fichier phase-placeholder.css : du CSS simple, écrit à la main et
 * hors du bundle webpack, pour les retouches demandées par le briefing « site
 * définitif ». Le bundle en production date du 18/09/2025 et n'est pas
 * recompilé ; ces règles doivent pouvoir être retirées sans y toucher.
 *
 * Les sélecteurs reprennent la spécificité des règles compilées
 * (`.page-template-tpl-home #hero .top > …`), sinon celles-ci l'emportent
 * malgré l'ordre de chargement.
 */

/* --- Accueil : l'encart « concours » à la même hauteur que la carte -----
 *
 * Le bundle pose `align-self: flex-start` sur `.votes`, si bien que la colonne
 * de droite se dimensionne sur son texte : l'encart s'arrête bien avant le bas
 * de la carte de gauche, qui porte un `min-height: 550px`.
 *
 * `.votes > div` demande bien `height: calc(100% - 50px)`, mais ce pourcentage
 * ne se résout jamais : le parent n'a pas de hauteur à référencer. On étire
 * donc `.votes`, puis on donne au cadre la hauteur pleine plutôt que les 50 px
 * de retrait — ces 50 px, doublés du `margin-bottom` de `:first-child`, avaient
 * été prévus pour deux encarts empilés, il n'y en a plus qu'un. Le bouton, lui,
 * s'ancre en bas du cadre au lieu de suivre le texte, puisque le cadre est
 * maintenant plus haut que son contenu.
 *
 * Mesuré en rendu réel (Chrome, 1440 px) : les deux cadres se terminent au même
 * pixel, le bouton chevauchant le bord bas comme dans le reste du thème.
 *
 * Sous 600 px la mise en page passe en colonne et le bouton revient dans le
 * flux : ces règles n'ont pas lieu d'être, d'où la media query.
 */
@media screen and (min-width: 600px) {
    .page-template-tpl-home #hero .top > .votes {
        align-self: stretch;
    }

    /* Le cadre est en `content-box` : sans cette bascule, ses 25 px de padding
       et ses bordures s'ajoutent à la hauteur calculée et il dépasse de la
       carte de gauche au lieu de s'aligner dessus. */
    .page-template-tpl-home #hero .top > .votes > div,
    .page-template-tpl-home #hero .top > .votes > div:first-child {
        box-sizing: border-box;
        height: 100%;
        margin-bottom: 0;
    }

    /* Le cadre étant désormais plus haut que son contenu, image, titre et texte
       se centrent verticalement plutôt que de rester collés en haut. Le bouton
       est en position absolue : il ne participe pas à ce centrage et reste
       ancré en bas. */
    .page-template-tpl-home #hero .top > .votes > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-template-tpl-home #hero .top > .votes .action {
        bottom: -25px;
    }
}

/* --- Accueil : respiration entre la grille des desserts et son bouton ---
 *
 * Rien dans le bundle ne cible `#content` : le bouton « Tous les desserts »
 * se retrouvait collé sous la dernière rangée de vignettes.
 */
.page-template-tpl-home #content .recipes > .action {
    margin-top: 40px;
}

/* --- Bas de page : l'encart « partage ta recette » à hauteur du bloc -----
 *
 * Même cause qu'au hero : la grille porte `.start`, donc
 * `align-items: flex-start`, et la colonne de droite se dimensionne sur son
 * texte. Elle est maintenant seule — l'encart « activité » a été retiré — et
 * l'écart avec le grand bloc de gauche saute aux yeux.
 *
 * On étire la colonne, on laisse l'encart occuper toute sa hauteur, et on
 * centre son contenu comme dans le cadre du hero.
 *
 * La media query est le complément exact du `max-width: 64em` sous lequel le
 * bundle passe `.md-one` en une seule colonne : sous ce seuil les deux blocs
 * sont empilés et n'ont plus à s'aligner.
 */
/* Attention au sélecteur : `.right` ne désigne pas que la colonne de droite.
   La macro `helper.arrow` sort un `<svg class="arrow-svg right">` — la classe
   dit la direction de la flèche. Écrit `#call-to-action .right`, la règle
   ci-dessous attrapait donc aussi la flèche du bouton et la passait en
   `display: flex`, c'est-à-dire en bloc : elle tombait sous le libellé au lieu
   de rester à côté (c'est le troisième point du retour client du 20/08). On
   descend le chemin complet jusqu'à la colonne, un `svg` ne peut pas s'y
   glisser. */
@media screen and (min-width: 64.0625em) {
    #call-to-action .row.pct6633.start {
        align-items: stretch;
    }

    #call-to-action > .container > .row > .right {
        display: flex;
        flex-direction: column;
    }

    #call-to-action > .container > .row > .right > .row {
        flex: 1;
        margin-bottom: 0;
        align-items: center;
    }
}

/* --- Bas de page : l'encart « partage ta recette » en colonne ------------
 *
 * Retour client du 20/08/2026 : « aligner le bloc de texte, mettre l'orange
 * au-dessus, et la flèche à côté du texte sur le bouton ».
 *
 * Les deux premiers points tiennent à `pct3366`, qui répartit l'encart en deux
 * colonnes — l'agrume sur 34 %, le texte sur 66 %. On passe l'encart en
 * colonne : l'agrume, déjà premier dans le DOM, se place naturellement
 * au-dessus, et le texte occupe toute la largeur et se centre comme dans le
 * grand bloc de gauche. Sans balisage à modifier.
 *
 * Les `max-width` de `pct3366` doivent être neutralisées, sinon les deux
 * enfants restent bridés à 34 % et 66 % une fois empilés.
 *
 * Le troisième point — la flèche sous le libellé — n'avait rien à voir avec la
 * largeur : voir la remarque sur `.right` au bloc précédent.
 */
#call-to-action > .container > .row > .right > .row.pct3366 {
    flex-direction: column;
    text-align: center;
}

#call-to-action > .container > .row > .right > .row.pct3366 > :first-child,
#call-to-action > .container > .row > .right > .row.pct3366 > :last-child {
    max-width: 100%;
}