/* ==========================================================================
   MONÉTISATION : emplacements publicitaires AdSense (.ad-slot) et encarts Premium (.premium-box)
   - Partials : app/views/partials/ad-slot.php, app/views/partials/premium-box.php
   - Script : public/assets/javascript/ads.js (états data-ad-state du bloc)
   - Règles AdSense appliquées : libellé « Publicités » ; espace réservé par min-height uniquement
     (jamais de height ni de max-height sur les parents d'une annonce responsive) ; largeur toujours
     calculable (les grilles et les colonnes de la fiche recette sont des flex centrés) ; au moins
     32 px entre une annonce et les boutons ou liens de navigation ; repli maison si non servie.
   - Mobile d'abord ; points de rupture alignés sur style.css (769px, 1301px)
   - Couleurs : variables de root.css + jetons locaux --mon-* (suivent body.dark / body.light)
   - Fichier chargé sur toutes les pages : chaque règle cible une classe dédiée
   ========================================================================== */

/* ***** JETONS LOCAUX (thème automatique, puis thème forcé par themeMode.js) ***** */
body {
    --mon-surface: light-dark(#ffffff, #181818);
    --mon-surface-soft: light-dark(#fff4ef, #2a1d18);
    --mon-border: light-dark(#e5e7eb, #3f3f46);
    --mon-text: light-dark(#262626, #ececec);
    --mon-text-soft: light-dark(#525252, #b8b8b8);
    --mon-label: light-dark(#6b7280, #a3a3a3);
    --mon-link: light-dark(#b42318, #ff8f7f);
    --mon-success: light-dark(#1e8449, #6ee7a0);
    --mon-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    --mon-cta: linear-gradient(60deg, #c0392b, #b45309);
    --mon-cta-hover: linear-gradient(60deg, #b45309, #c0392b);
}

body.light {
    --mon-surface: #ffffff;
    --mon-surface-soft: #fff4ef;
    --mon-border: #e5e7eb;
    --mon-text: #262626;
    --mon-text-soft: #525252;
    --mon-label: #6b7280;
    --mon-link: #b42318;
    --mon-success: #1e8449;
    --mon-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body.dark {
    --mon-surface: #181818;
    --mon-surface-soft: #2a1d18;
    --mon-border: #3f3f46;
    --mon-text: #ececec;
    --mon-text-soft: #b8b8b8;
    --mon-label: #a3a3a3;
    --mon-link: #ff8f7f;
    --mon-success: #6ee7a0;
    --mon-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   EMPLACEMENTS PUBLICITAIRES
   ========================================================================== */

.ad-slot {
    --ad-min-height: 280px;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 2rem auto;          /* au moins 32 px avec les boutons et liens voisins */
    padding: 0;
    clear: both;
    align-self: stretch;        /* parent flex centré : largeur calculable (jamais 0 px) */
    text-align: center;         /* une annonce de taille fixe plus étroite que le bloc reste centrée */
}

/* Libellé exigé par AdSense, discret mais lisible (contraste AA) */
.ad-slot .ad-slot__label {
    margin: 0 0 0.35rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--mon-label);
}

/* Boîte de l'annonce : espace réservé par min-height (évite les décalages de mise en page) */
.ad-slot .ad-slot__box {
    position: relative;
    display: block;             /* jamais flex : l'<ins> doit prendre toute la largeur */
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ad-min-height);
}

/* Annonce non servie : on masque l'<ins> vide (méthode recommandée par Google) */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* ***** PROMOTION MAISON (repli) ***** */
/* Masquée par défaut ; visible si l'annonce n'est pas servie ou indisponible (hors ligne, script bloqué,
   sans réponse après 8 s). L'état unavailable est définitif : ads.js retire alors l'<ins>, donc aucune
   annonce tardive ne vient prendre la place de la promotion affichée. */
.ad-slot .ad-slot__fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ad-min-height);
    padding: 1rem;
    border: 1px dashed var(--mon-border);
    border-radius: 0.75rem;
    background: var(--mon-surface-soft);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: var(--mon-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:hover {
        text-decoration: none;
        border-color: var(--primary-color);
        box-shadow: var(--mon-shadow);
    }

    &:focus-visible {
        outline: 3px solid var(--secondary-color);
        outline-offset: 2px;
    }
}

.ad-slot[data-ad-state="unfilled"] .ad-slot__fallback,
.ad-slot[data-ad-state="unavailable"] .ad-slot__fallback {
    display: flex;
}

/* ads.js absent (JavaScript désactivé, script bloqué) : promotion révélée après 6 s, place déjà réservée */
.ad-slot:not([data-ad-state]) .ad-slot__fallback {
    display: flex;
    visibility: hidden;
    animation: ad-slot-fallback-reveal 0s linear 6s forwards;
}

@keyframes ad-slot-fallback-reveal {
    to {
        visibility: visible;
    }
}

.ad-slot .ad-slot__fallback-title {
    font-family: var(--font-titles-and-button);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mon-text);

    i {
        margin-right: 0.25rem;
        font-size: 1rem;
        line-height: 1;
        vertical-align: -0.1em;
        color: var(--primary-color);
    }
}

.ad-slot .ad-slot__fallback-text {
    max-width: 34rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mon-text-soft);
}

.ad-slot .ad-slot__fallback-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.2rem;
    border-radius: 2rem;
    background: var(--mon-cta);
    font-family: var(--font-titles-and-button);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.ad-slot .ad-slot__fallback-note {
    max-width: 30rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mon-text-soft);
}

/* Promotion très étroite (blocs de moins de 240 px, ex. téléphones de 320 px) : la description est masquée
   pour que la mention complète de l'essai (prix, carte requise, une fois par compte) tienne dans la hauteur
   réservée, sans décalage de mise en page. Requête de conteneur : la largeur dépend de l'emplacement du
   bloc, pas seulement de l'écran (sans prise en charge, la description reste affichée). */
.ad-slot .ad-slot__fallback {
    container: ad-fallback / inline-size;
}

@container ad-fallback (width < 240px) {
    .ad-slot .ad-slot__fallback-text {
        display: none;
    }
}

/* ***** VARIANTES ***** */

/* Grilles de cartes (.recipes, flex centré) : bloc In-feed en pleine ligne, l'écart de la grille (2rem) suffit */
.recipes > .ad-slot {
    flex: 0 0 100%;
    margin: 0;
}

/* Colonne des ingrédients (fiche recette) : en fin de colonne, après la liste et la légende */
.ad-slot.ad-slot--ingredients {
    margin: 2rem auto;
}

/* Étapes de la recette (In-article) : entre deux étapes */
.ad-slot.ad-slot--steps {
    margin: 2rem 0;
}

.oneRecipe .recipeBox .detailsBox .instructions.instructions--with-ad {
    align-self: stretch;        /* largeur pleine pour l'annonce In-article */
}

/* Fin de recette : avant le lien « Rechercher des recettes » */
.ad-slot.ad-slot--end {
    margin: 2rem 0;
}

/* Pages SEO : bloc entre deux sections, aligné sur la largeur des sections */
.ad-slot.ad-slot--seo {
    max-width: 1200px;
    padding: 0 1.5rem;
}

/* Téléphones : la carte de la recette a de larges marges internes (2rem) ; les blocs des étapes et de fin
   de recette s'étendent jusqu'aux bords de la carte pour offrir une largeur exploitable (sans déborder :
   la carte masque son débordement) */
@media screen and (max-width: 576px) {
    .oneRecipe .recipeBox .detailsBox > .ad-slot.ad-slot--end,
    .oneRecipe .recipeBox .detailsBox .instructions > .ad-slot.ad-slot--steps {
        width: auto;
        max-width: none;
        margin: 2rem -2rem;
    }

    .ad-slot .ad-slot__fallback {
        gap: 0.4rem;
        padding: 0.85rem 0.75rem;
    }
}

/* Tablette et bureau : les annonces natives (In-article, In-feed) grandissent avec leur conteneur ;
   on garde une largeur de lecture pour qu'elles ne deviennent pas démesurées (largeur, jamais hauteur) */
@media screen and (min-width: 769px) {
    .ad-slot.ad-slot--steps {
        max-width: 640px;
        margin: 2rem auto;
    }

    .ad-slot.ad-slot--infeed .ad-slot__box {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Deux colonnes de la fiche recette (au-delà de 1300px) : rectangle 300 x 250 dans la colonne des ingrédients */
@media screen and (min-width: 1301px) {
    .oneRecipe .ingredientsBox .ad-slot.ad-slot--ingredients {
        --ad-min-height: 250px;
        width: 300px;
        max-width: 100%;
    }
}

/* ==========================================================================
   ENCARTS PREMIUM / CRÉATION DE COMPTE
   ========================================================================== */

.premium-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--mon-border);
    border-top: 4px solid var(--primary-color);
    border-radius: 1rem;
    background: var(--mon-surface);
    box-shadow: var(--mon-shadow);
    font-family: var(--font-body);
    text-align: center;
    color: var(--mon-text);
}

.premium-box .premium-box__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--mon-surface-soft);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--primary-color);

    i {
        font-size: 1.35rem;
        line-height: 0;
    }
}

.premium-box .premium-box__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.premium-box .premium-box__eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--mon-link);
}

.premium-box .premium-box__title {
    font-family: var(--font-titles-and-button);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mon-text);
}

.premium-box .premium-box__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;

    li {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        font-size: 0.95rem;
        line-height: 1.45;
        color: var(--mon-text-soft);
    }

    i {
        flex: 0 0 auto;
        font-size: 0.8rem;
        line-height: 1;
        color: var(--mon-success);
    }
}

.premium-box .premium-box__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.premium-box a.cta.premium-box__cta {
    background: var(--mon-cta);
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    box-shadow: 0 6px 18px rgba(192, 57, 43, 0.25);

    &:hover {
        background: var(--mon-cta-hover);
        color: #fff;
        text-decoration: none;
    }

    &:focus-visible {
        outline: 3px solid var(--secondary-color);
        outline-offset: 2px;
    }
}

.premium-box a.premium-box__link {
    width: auto;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mon-link);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover {
        color: var(--mon-link);
        text-decoration-thickness: 2px;
    }

    &:focus-visible {
        outline: 3px solid var(--secondary-color);
        outline-offset: 2px;
    }
}

.premium-box .premium-box__note {
    max-width: 36rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--mon-text-soft);
}

/* Bandeau compact (page des résultats) */
.premium-box.premium-box--compact {
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    padding: 1.1rem 1.25rem;
    border-top-width: 1px;
    border-left: 4px solid var(--primary-color);
    background: var(--mon-surface-soft);
    box-shadow: none;

    .premium-box__title {
        font-size: 1.15rem;
    }
}

@media screen and (min-width: 769px) {
    .premium-box {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.75rem 2rem;
        text-align: left;
    }

    .premium-box .premium-box__body {
        align-items: flex-start;
    }

    .premium-box .premium-box__actions {
        justify-content: flex-start;
    }

    .premium-box.premium-box--compact {
        align-items: center;
        padding: 1.1rem 1.5rem;
    }
}

/* ==========================================================================
   FICHE RECETTE : APPEL À L'ACTION VISITEUR (inscription d'abord, connexion ensuite)
   ========================================================================== */

.heroIngredients .boxHeroIngredients .recipe-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
}

.heroIngredients .boxHeroIngredients button.recipe-hero-login {
    background: transparent;
    border: 2px solid currentColor;
    box-shadow: none;
    color: var(--mon-link);

    &:hover:not(:disabled) {
        background: var(--mon-surface-soft);
        box-shadow: none;
    }
}

/* ==========================================================================
   IMPRESSION : ni annonces ni encarts sur une recette imprimée
   ========================================================================== */

@media print {
    .ad-slot,
    .premium-box,
    .recipe-hero-actions {
        display: none !important;
    }
}