/* =========================================================================
   Lactel — « Des petits déj' faciles & gourmands / Adoptez le batch cooking »
   Intégration des maquettes build/home_desktop.png et build/home_mobile.png.
   100 % local (aucun CDN, aucune police distante).

   CONVENTION D'UNITÉS : aucune valeur en px. Uniquement rem (base 1rem = 16px),
   %, vw / vh et unités sans dimension (line-height, ratios).
   Breakpoints : 47.9375rem (= 767px) et 62rem (= 992px).
   ========================================================================= */

/* --- Roboto (Apache-2.0), variable 400→800, sous-ensemble latin, servie en local ---
   La maquette Thanks utilise Medium (500), Medium Italic et ExtraBold (800) : un seul
   fichier variable les couvre toutes, pour 43 Ko au lieu de 197 Ko en statiques. */
@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-latin-var.woff2") format("woff2-variations"),
    url("../fonts/roboto/Roboto-latin-var.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-latin-var-italic.woff2") format("woff2-variations"),
    url("../fonts/roboto/Roboto-latin-var-italic.woff2") format("woff2");
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}

/* --- Rubik (SIL Open Font License 1.1), variable 400→700, sous-ensemble latin ---
   Utilisée par les cartes recettes de la page Thanks. */
@font-face {
    font-family: "Rubik";
    src: url("../fonts/rubik/Rubik-latin-var.woff2") format("woff2-variations"),
    url("../fonts/rubik/Rubik-latin-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* --- Mitr (SIL Open Font License 1.1), sous-ensemble latin, servie en local --- */
@font-face {
    font-family: "Mitr";
    src: url("../fonts/mitr/Mitr-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mitr";
    src: url("../fonts/mitr/Mitr-500-latin.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mitr";
    src: url("../fonts/mitr/Mitr-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mitr";
    src: url("../fonts/mitr/Mitr-700-latin.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette relevée sur la maquette */
    --navy: #2B418D;
    --navy-deep: #09288E;
    --navy-cta: #033088;
    --input-border: #9FC5DE;
    --placeholder: #999FC1;
    --check-border: #DFE0E2;
    --consent-grey: #797979;
    --panel: #CFE2EF;
    --page-bg: #EDF4F9;
    --pyrex-red: #E30613;
    --muted: #6B7A99;
    --error: #B3261E;

    --font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-rubik: "Rubik", "Roboto", system-ui, Arial, sans-serif;
    --font-mitr: "Mitr", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --shadow: 0 0.5rem 1.5rem rgba(9, 40, 142, .12);

    --container: 71.25rem;
    --field-width: 29.1875rem;
    --radius-pill: 62.5rem;
    --radius: 0.5rem;
    --border: 0.0625rem;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--navy);
    background: #FFFFFF;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Dégradé de fond relevé sur la maquette : bleu très clair sous la vague, virant au
   blanc pur à hauteur du CTA. Le palier à 22 % maintient la teinte pleine derrière
   le bandeau, dont la vague est transparente. */
.page-gradient {
    position: relative;
    background: linear-gradient(to bottom, var(--page-bg) 0, var(--page-bg) 22%, #FFFFFF 95%);
}

/* Forme rose décorative « jow », collée au bord gauche de l'écran (desktop seulement).
   Portée par .page-gradient et non par .participation : .participation est en
   max-width centré, donc `left: 0` y désignerait le bord du conteneur (en retrait de
   150 à 1440) et non celui de la page. Ici, aucun transform — `left: 0` suit
   naturellement toutes les largeurs d'écran. */
.page-gradient::after {
    content: "";
    position: absolute;
    left: 0;
    top: 72%;
    width: min(11.9375rem, 13.3vw);
    aspect-ratio: 262 / 580;
    background: url("../images/left-image.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.d-none {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -100vw;
    top: 0;
    z-index: 100;
    background: var(--navy-deep);
    color: #fff;
    padding: 0.6rem 1rem;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 0.1875rem solid var(--navy-deep);
    outline-offset: 0.125rem;
}

/* =============================== BANDEAU ================================ */
/* La vague de découpe et, sur mobile, le macaron « À GAGNER » sont dans l'image.
   Les deux PNG se terminent par une bande entièrement transparente (19,5 % de la
   hauteur en desktop, 3,3 % en mobile) : la marge négative la résorbe pour que le
   titre remonte au contact de la vague, comme sur la maquette. */
.banner {
    margin-bottom: -7.3vw;
}

.banner img {
    width: 100%;
    aspect-ratio: 2160 / 804;
    object-fit: cover;
}

@media (max-width: 47.9375rem) {
    .banner {
        margin-bottom: -3.3vw;
    }

    .banner img {
        aspect-ratio: 542 / 801;
    }
}

/* ================================ FLASH ================================= */
.flash-wrap {
    max-width: var(--container);
    margin: 0 auto 1.5rem;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    border: 0.125rem solid transparent;
    font-weight: 700;
    background: #fff;
    box-shadow: var(--shadow);
}

.alert-success {
    border-color: #8CC238;
    color: #3F6B12;
}

.alert-danger {
    border-color: #E9B5B1;
    color: var(--error);
}

.alert-warning {
    border-color: #F0D68A;
    color: #8A6D1A;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

/* ============================= INTRODUCTION =============================
   Métriques relevées sur home_desktop.png à 1440 de large :
   - titre Roboto Bold, ligne la plus longue = 1000 de large  -> 3rem (48)
   - hauteur d'encre des 2 lignes = 91                        -> line-height .95
   - haut d'encre du titre à 63 sous le point bas de la vague
   - mention légale Roboto Regular, 471 de large              -> 1.25rem (20)
   Les tailles sont exprimées en vw plafonnées en rem : exactes à 1440, fluides en dessous. */
.intro {
    max-width: var(--container);
    margin-inline: auto;
    padding: 3.125rem 1.5rem 0;
    text-align: center;
}

.intro-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 0.95;
    color: var(--navy);
    text-wrap: balance;
}

.intro-title span {
    display: block;
}

.intro-legal {
    max-width: 75%;
    margin: 0 auto;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--navy);
}

/* ============================= PARTICIPATION ============================ */
.participation {
    position: relative;
    max-width: 60rem;
    margin-inline: auto;
    padding: clamp(1rem, 2vw, 2rem) 1.5rem clamp(0rem, 0vw, 0rem);
}

@media (max-width: 61.9375rem) {
    .page-gradient::after {
        display: none;
    }
}

.participation-form {
    position: relative;
    z-index: 1;
}

/* Relevés maquette à 1440 : champs 467 (29.19rem), gouttière 48 (3rem),
   macaron 563 (35.19rem) — soit 1078 (67.375rem) de contenu, centrés. */
.participation-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--field-width)) 1fr;
    align-items: start;
    column-gap: clamp(1.5rem, 3.3333vw, 3rem);
    width: min(67.375rem, 100%);
    margin-inline: auto;
}

/* Écart vertical entre champs relevé à 20 (pas de 73 pour des champs de 53). */
.participation-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 23 entre le bas du sous-titre et le haut du 1er champ. */
.form-heading {
    margin: 0 0 1.4375rem;
    text-align: center;
    font-family: var(--font-mitr);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy);
}

/* Macaron : 563 de large, haut décalé de 47 sous le haut du 1er champ. */
.participation-prize {
    grid-column: 2;
    justify-self: end;
    margin-top: 2.9375rem;
}

.participation-prize img {
    width: min(35.1875rem, 100%);
    margin-top: 19%;
}

@media (max-width: 61.9375rem) {
    .participation-grid {
        grid-template-columns: 1fr;
    }

    /* Le macaron est déjà présent dans banner_mobile.png : ne pas le répéter. */
    .participation-prize {
        display: none;
    }

    .participation-fields {
        max-width: var(--field-width);
        margin-inline: auto;
    }
}

/* ------------------------------- Champs -------------------------------- */
.field {
    display: flex;
    flex-direction: column;
}

/* Relevés maquette : boîte 467 × 53, bordure 1 #9FC5DE, rayon pill,
   texte à 38 du bord gauche, placeholder 17 en #999FC1. */
.form-control {
    width: 100%;
    height: 3.3125rem;
    font-family: inherit;
    font-size: clamp(0.875rem, 1.1806vw, 1.0625rem);
    line-height: 1.2;
    color: var(--navy);
    background: #fff;
    border: var(--border) solid var(--input-border);
    border-radius: var(--radius-pill);
    padding: 0 2.375rem;
    max-width: 24.875rem;
    margin: 0 auto;
}

.form-control::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

.form-control:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 0.1875rem rgba(43, 65, 141, .15);
}

/* Champ Adresse : la maquette montre une zone de 128 de haut. Le champ est
   actuellement un input simple — la hauteur s'applique, sans redimensionnement. */
.field--address .form-control {
    border-radius: 1.5rem;
    padding: 1rem 2.375rem;
}

.field--address textarea.form-control {
    resize: vertical;
}

/* --------------------------- Consentements -----------------------------
   Relevés maquette : cases 19 rondes bordées de #DFE0E2, texte 12 en #797979
   à 13 de la case, interligne 13, pas de 40 entre consentements. */
.consents {
    display: flex;
    flex-direction: column;
    gap: 1.6875rem;
    margin-top: 1.875rem;
    max-width: 24.875rem;
}

@media (max-width: 350px) {
    .box-panel{
        margin-top: -4rem !important;
    }
}

/* Desktop uniquement : même retrait horizontal que les champs (2.375rem), pour que la
   colonne des consentements s'aligne sur le texte des placeholders. En dessous de
   62rem la colonne est déjà étroite, le retrait mangerait la largeur utile. */
@media (min-width: 62rem) {
    .consents {
        padding: 0 0 0 2.375rem;
        max-width: unset;
    }

    .proof{
        max-width: unset !important;
    }


    .box-panel {
        margin-top: -6rem !important;
        padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem) !important;
    }

    .intro-title{
        font-size: 2.5rem;
    }

    .proof-title{
        font-size: 2.4rem !important;
    }
}

.consent {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.8125rem;
}

/* Le message d'erreur passe sous la ligne case + libellé. */
.consent .invalid-feedback {
    flex: 1 0 100%;
    margin-left: 1.5625rem;
}

/* Le thème Bootstrap enveloppe la case dans un .form-check : le rendre transparent.
   Il émet aussi un <label> vide (label: false côté FormType) : le neutraliser. */
.consent .form-check {
    display: contents;
}

.consent .form-check-label:empty {
    display: none;
}

.consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    margin: 0.0625rem 0 0;
    cursor: pointer;
    width: 1.1875rem;
    height: 1.1875rem;
    background: #fff;
    border: var(--border) solid var(--check-border);
    border-radius: 50%;
}

.consent input[type="checkbox"]:checked {
    background: var(--navy);
    border-color: var(--navy);
    position: relative;
}

.consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 30%;
    top: 12%;
    width: 30%;
    height: 55%;
    border: solid #fff;
    border-width: 0 0.09375rem 0.09375rem 0;
    transform: rotate(45deg);
}

.consent-text {
    /* flex-basis 0 : le libellé se compresse au lieu de passer sous la case. */
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.0833;
    color: var(--consent-grey);
    cursor: pointer;
}

.consent-text label {
    cursor: pointer;
}

.consent-link {
    color: var(--consent-grey);
    text-decoration: underline;
}

.consent .invalid-feedback {
    margin-left: 2rem;
}

/* --------------------------- Preuve d'achat ---------------------------- */
.proof {
    text-align: center;
    max-width: 25rem;
    margin: clamp(2rem, 5vw, 4.5rem) auto 0;
    position: relative;
    z-index: 1;
}

.proof-title {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--navy);
}

.proof-intro {
    margin: 0 0 0.75rem;
    font-size: clamp(0.8rem, 1.05vw, 0.9375rem);
    font-weight: 700;
    color: var(--navy);
}

.proof-notice {
    margin: 0 0 1.5rem;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 700;
    color: var(--pyrex-red);
    line-height: 1.45;
}

.upload {
    position: relative;
    display: inline-block;
    max-width: 31.25rem;
    margin: 0 auto;
}

/* Input transparent superposé au bouton : cliquable ET focusable (validation native). */
.file-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    cursor: pointer;
    background: #fff;
    color: var(--navy-cta);
    border: 0.125rem solid var(--navy-cta);
    border-radius: var(--radius-pill);
    padding: 0.8125rem 1.75rem;
    min-width: min(17rem, 90vw);
    font-weight: 700;
    font-size: clamp(0.8rem, 1.05vw, 0.9375rem);
}

.upload-icon {
    width: 1.125rem;
    flex: 0 0 auto;
}

.file-native:focus + .upload-btn {
    outline: 0.1875rem solid var(--navy-deep);
    outline-offset: 0.125rem;
}

.upload-help {
    margin: 0.75rem 0 0;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    color: var(--navy);
}

/* --------------------------------- CTA --------------------------------- */
.btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    cursor: pointer;
    border: none;
    background: var(--navy-cta);
    color: #fff;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.05vw, 0.9375rem);
    letter-spacing: 0.02em;
    padding: 0.9375rem 2.5rem;
    transition: transform .12s ease, background .2s ease;
    position: relative;
    z-index: 1;
    max-width: 31.25rem;
}

.btn-cta:hover {
    background: var(--navy-deep);
}

.btn-cta:active {
    transform: translateY(0.0625rem);
}

.btn-cta[disabled] {
    opacity: .7;
    cursor: not-allowed;
}

@media (max-width: 47.9375rem) {
    .btn-cta {
        width: 100%;
    }

    .upload-btn {
        width: 100%;
    }

    .upload {
        display: block;
    }


}

/* -------------------------------- Erreurs ------------------------------ */
.participation-form .invalid-feedback,
.participation-form .form-error-message,
.participation-form ul.list-unstyled {
    display: block;
    color: var(--error);
    font-weight: 700;
    font-size: 0.8125rem;
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}

.is-invalid {
    border-color: var(--error) !important;
}

/* -------------------------------- Spinner ------------------------------ */
.spinner-border {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 0.18em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lactel-spin .7s linear infinite;
}

.spinner-border-sm {
    width: 0.95rem;
    height: 0.95rem;
}

@keyframes lactel-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================ LA BOX =============================== */
/* Panneau bleu relevé à 78.75rem de large sur la maquette (+ 2 × 1.5rem de gouttière). */
.box-section {
    position: relative;
    max-width: 81.75rem;
    margin: clamp(2rem, 5vw, 4.5rem) auto 0;
    padding: 0 1.5rem clamp(2.5rem, 5vw, 4.5rem);
}

.box-packshot {
    position: relative;
    z-index: 2;
    width: min(15.75rem, 45vw);
    margin-inline: auto;
}

.box-panel {
    position: relative;
    margin-top: -6rem;
    background: var(--panel);
    border-radius: var(--radius);
    padding: clamp(2rem, 18vw, 7.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.box-composition-title,
.box-partner {
    margin: 0;
    font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
    font-weight: 700;
    color: var(--navy);
}

.box-composition {
    margin: 0 0 1.25rem;
    font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
    line-height: 1.6;
    color: var(--navy);
}

.box-composition li::before {
    content: "• ";
}

.box-partner {
    margin-bottom: 0.75rem;
}

.box-pyrex {
    width: min(11.6875rem, 45vw);
    margin: 0 auto 1.25rem;
}

.box-legal {
    margin: 0 0 0.75rem;
    font-size: clamp(0.6rem, 0.72vw, 0.625rem);
    line-height: 1.5;
    color: var(--navy);
    font-weight: 700;
}

.box-legal:last-child {
    margin-bottom: 0;
}

/* ============================ PAGE REMERCIEMENT =========================
   Relevés Figma — desktop node 150:45 (frame 1440), mobile node 166:161 (frame 361).
   Hero : fond #A7C9E1 (ellipse #9FC5DE à 90 % sur blanc + voile dégradé à 20 %).
   Bloc de texte : 795 de large, haut à 284 ; section recettes de 669 à 1336.
   Section recettes : fond #F7F5EF ; titre à +60 ; cartes à +153 (308 × 350,
   gouttière 41) ; CTA à +551 (324 × 50, rayon 30).
   Cartes : la couleur est portée par un ::before en mix-blend-multiply, comme dans
   la maquette — le texte et la photo restent au-dessus, non multipliés.
   ======================================================================== */
/* Hero : le visuel fourni (1440 × 615 desktop, 361 × 892 mobile) porte le fond bleu
   #9FC5DE et les décors alimentaires. Il est posé en couche absolue et le texte est
   centré par-dessus. min-height calé sur le ratio de l'image pour qu'`object-fit:
   cover` ne rogne jamais les assiettes, quelle que soit la largeur d'écran. */
.thanks-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42.7vw;
    padding: 6rem 1.5rem;
    background: #9FC5DE;
}

.thanks-hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.thanks-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thanks-inner {
    position: relative;
    z-index: 1;
    max-width: 49.6875rem;
    margin-inline: auto;
    text-align: center;
}

.thanks-title {
    margin: 0 0 1.875rem;
    font-size: clamp(1.625rem, 2.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.111;
    text-transform: uppercase;
    color: var(--navy);
}

.thanks-text {
    margin: 0 0 1.875rem;
    font-size: clamp(1rem, 1.3889vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--navy);
}

.thanks-text:last-child {
    margin-bottom: 0;
}

.thanks-note {
    font-style: italic;
}

@media (max-width: 47.9375rem) {
    /* Visuel mobile beaucoup plus haut (361 × 892) : le ratio change. */
    .thanks-hero {
        min-height: 247.1vw;
        padding: 3rem 1.5rem;
    }

    .thanks-inner {
        max-width: 19rem;
    }

    .thanks-title {
        font-size: 2rem;
        line-height: 1.154;
    }

    .thanks-text {
        font-size: 1.125rem;
    }
}

/* ------------------------------- Recettes ------------------------------ */
.recipes {
    background: #F7F5EF;
    padding: 3.75rem 1.5rem 4.125rem;
}

.recipes-title {
    /* +2.0625rem par rapport à la maquette pour absorber la photo remontée. */
    margin: 0 auto 5rem;
    max-width: 62.5rem;
    font-size: clamp(1.625rem, 2.5vw, 2.25rem);
    font-weight: 400;
    line-height: 1.111;
    text-transform: uppercase;
    text-align: center;
    color: #3E4092;
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 19.25rem);
    justify-content: center;
    gap: 2.5625rem;
    margin-inline: auto;
}

.recipe {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 21.875rem;
    /* Réservé pour la photo en absolu (85 % de la largeur, remontée de 3rem) : son bas
       est transparent et le titre passe par-dessus, comme dans le Figma. */
    padding: 13.5rem 1.25rem 1.125rem;
    text-align: center;
}

/* La couleur de la carte est multipliée sur le fond beige, comme dans la maquette. */
.recipe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.625rem;
    mix-blend-mode: multiply;
    z-index: 0;
}

.recipe--mauve::before {
    background: #C388BE;
}

.recipe--yellow::before {
    background: #F7EE61;
}

.recipe--blue::before {
    background: #9FC5DE;
}

/* Photo remontée au-dessus du bord de la carte, plafonnée à 85 % de sa largeur. */
.recipe-photo {
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    z-index: 1;
    aspect-ratio: 1;
}

.recipe-photo img:first-child {
    position: relative;
    width: 100%;
}

.recipe-jow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.75rem;
}

.recipe-title {
    position: relative;
    z-index: 2;
    margin: 0 0 auto;
    font-family: var(--font-rubik);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #3E4092;
}

.recipe-link {
    position: relative;
    z-index: 2;
    align-self: center;
    margin-top: 0.875rem;
    font-family: var(--font-rubik);
    font-size: 1rem;
    font-weight: 600;
    color: #3E4092;
    text-decoration: underline;
}

.recipes-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(20.25rem, 100%);
    min-height: 3.125rem;
    margin: 3rem auto 0;
    padding: 0.625rem;
    border-radius: 1.875rem;
    background: #9FC5DE;
    font-family: var(--font-rubik);
    font-size: 1.25rem;
    font-weight: 400;
    color: #3E4092;
    text-decoration: none;
}

.recipes-cta:hover {
    background: #8FB9D6;
}

@media (max-width: 61.9375rem) {
    .recipes {
        padding: 4.9375rem 1.5rem 5.5rem;
    }

    .recipes-grid {
        grid-template-columns: min(18.625rem, 100%);
        gap: 3.9375rem;
    }

    .recipes-cta {
        width: min(18.375rem, 100%);
        margin-top: 4.25rem;
    }
}

/* ---------------------------- Reveal on scroll ------------------------- */
[data-aos] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .5s ease, transform .5s ease;
}

[data-aos].aos-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-aos] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn-cta {
        transition: none;
    }
}