/* ============================================================
 * RECETTE V2 — CSS PREMIUM (WEB + RESPONSIVE) — CLEAN
 * - Ne renomme aucune balise/classe
 * - Container 1200px
 * - UI premium (icônes plus petites / alignements)
 * - Engagement (Votes + Commentaires) : plus compact, moins "pavé"
 * - AUCUN CSS PRINT ICI (print => recette-print.css)
 * ============================================================ */

/* ------------------------------------------------------------
 * 1) VARIABLES & THEME
 * ------------------------------------------------------------ */
:root{
    --color-brand: #ff6233;
    --color-brand-hover: #e04f25;

    --color-text: #111827;
    --color-text-muted: #64748b;

    --color-border: rgba(15, 23, 42, .10);
    --color-border-strong: rgba(15, 23, 42, .14);

    --color-bg-body: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-alt: #f7f8fb;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;

    --shadow-card: 0 10px 30px rgba(15, 23, 42, .06);
    --shadow-card-2: 0 16px 44px rgba(15, 23, 42, .08);

    --container: 1200px;
    --gutter: 20px;

    --text-sm: .92rem;
    --text-base: 1rem;
    --text-lg: 1.08rem;

    --icon-sm: .95em;
    --icon-md: 1.05em;

    /* Steps images (WEB) */
    --step-img-h-1col: clamp(260px, 28vw, 440px);
    --step-img-h-2col: 320px;
    --step-img-h-3col: 240px;

    /* Engagement sizing */
    --eng-max: 920px;      /* largeur perçue premium sur desktop */
    --eng-pad: 18px;       /* padding standard */
    --eng-gap: 14px;       /* spacing interne */
}

[data-theme="dark"]{
    --color-text: #e5e7eb;
    --color-text-muted: rgba(229, 231, 235, .72);

    --color-border: rgba(148, 163, 184, .20);
    --color-border-strong: rgba(148, 163, 184, .28);

    --color-bg-body: #0b1220;
    --color-bg-card: rgba(17, 24, 39, .72);
    --color-bg-alt: rgba(17, 24, 39, .52);

    --shadow-card: 0 14px 36px rgba(0, 0, 0, .30);
    --shadow-card-2: 0 18px 52px rgba(0, 0, 0, .34);
}

/* ------------------------------------------------------------
 * 2) BASE + CONTAINER
 * ------------------------------------------------------------ */
body.page-recette-v2{
    background-color: var(--color-bg-body);
    color: var(--color-text);
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

.page-wrapper.recette-v2{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.page-recette-v2 img,
.page-recette-v2 video,
.page-recette-v2 svg{
    max-width: 100%;
    height: auto;
}

.mb-4{ margin-bottom: 1.5rem !important; }
.mb-5{ margin-bottom: 3rem !important; }

/* ------------------------------------------------------------
 * 2bis) PATCH LIENS — scope recette uniquement
 * ------------------------------------------------------------ */
.page-wrapper.recette-v2 :where(.mod-intro,.ing-card,.mod-steps,.author-signature,.recette-votes,.chronique-comments)
a:not(.btn-author):not(.btn-print):not(.share-btn):not(.btn-link):not(.btn-reply-trigger){
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.page-wrapper.recette-v2 :where(.mod-intro,.ing-card,.mod-steps,.author-signature,.recette-votes,.chronique-comments)
a:not(.btn-author):not(.btn-print):not(.share-btn):not(.btn-link):not(.btn-reply-trigger):hover,
.page-wrapper.recette-v2 :where(.mod-intro,.ing-card,.mod-steps,.author-signature,.recette-votes,.chronique-comments)
a:not(.btn-author):not(.btn-print):not(.share-btn):not(.btn-link):not(.btn-reply-trigger):focus{
    color: var(--color-brand-hover);
}
.page-wrapper.recette-v2 :where(.mod-intro,.ing-card,.mod-steps,.author-signature,.recette-votes,.chronique-comments)
a:not(.btn-author):not(.btn-print):not(.share-btn):not(.btn-link):not(.btn-reply-trigger):focus-visible{
    outline: 2px solid rgba(255, 98, 51, .35);
    outline-offset: 3px;
    border-radius: 8px;
}
.page-wrapper.recette-v2 a.btn-author{ text-decoration: none; }
.page-wrapper.recette-v2 a.btn-author:hover{ text-decoration: underline; }

/* ------------------------------------------------------------
 * 3) HEADER & HERO
 * ------------------------------------------------------------ */
.mod-header{
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px;
    align-items: center;
    margin: 22px 0 26px;
}

.header-text{ min-width: 0; }

.mod-badge{
    display: inline-flex;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mod-title{
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    line-height: 1.08;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.02em;
}

.mod-subtitle{
    font-size: 1.02rem;
    color: var(--color-text-muted);
    margin: 8px 0 0;
}

.mod-metas{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.meta-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-bg-alt));
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .90rem;
    color: var(--color-text);
    white-space: nowrap;
}

.meta-item i{
    font-size: var(--icon-sm);
    opacity: .85;
}

.nutri-score{
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--color-text);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    border-radius: 999px;
}

.header-visual img.hero-img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-2);
    border: 1px solid var(--color-border);
}

/* ------------------------------------------------------------
 * 4) INTRO + OUTILS
 * ------------------------------------------------------------ */
.recipe-top{
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

.mod-intro{
    background: var(--color-bg-card);
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.mod-intro p{ margin: 0 0 10px; }
.mod-intro p:last-child{ margin-bottom: 0; }

.recipe-tools{
    background: var(--color-bg-card);
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-print{
    background: var(--color-brand);
    color: #fff;
    border: none;
    padding: 12px 14px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .98rem;
    width: 100%;
    box-shadow: 0 10px 22px rgba(255, 98, 51, .22);
}

.btn-print i{ font-size: var(--icon-sm); }
.btn-print:hover{ background: var(--color-brand-hover); }
.btn-print:focus-visible{
    outline: 2px solid rgba(255, 98, 51, .35);
    outline-offset: 3px;
    border-radius: 999px;
}

.print-check{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.print-check input{
    transform: scale(1.05);
    accent-color: var(--color-brand);
}

.share-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.share-btn{
    height: 38px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    border-radius: 12px;
    cursor: pointer;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.share-btn i{ font-size: var(--icon-md); opacity: .92; }

@media (hover: hover) and (pointer: fine){
    .share-btn:hover{
        color: var(--color-brand);
        border-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
        background: color-mix(in srgb, var(--color-bg-card) 80%, var(--color-bg-alt));
        transform: translateY(-1px);
    }
}
.share-btn:focus-visible{
    outline: 2px solid rgba(255, 98, 51, .35);
    outline-offset: 3px;
    border-radius: 12px;
}

/* ------------------------------------------------------------
 * 5) INGREDIENTS
 * ------------------------------------------------------------ */
.ing-card{
    background: var(--color-bg-card);
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 28px;
}

.ing-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.ing-header h3{
    margin: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ing-header h3 i{ font-size: .95em; opacity: .85; }

.portions{
    font-weight: 800;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .88rem;
    color: var(--color-text);
}

.ing-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.ing-col h4{
    color: var(--color-brand);
    margin: 0 0 10px;
    font-size: 1.02rem;
    font-weight: 900;
}

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

.checkbox-wrapper{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
}
.checkbox-wrapper:hover{
    background: var(--color-bg-alt);
    border-color: var(--color-border);
}
.checkbox-wrapper input{
    accent-color: var(--color-brand);
    margin-top: 2px;
}

/* ------------------------------------------------------------
 * 6) ETAPES
 * ------------------------------------------------------------ */
.section-title{
    font-size: 1.55rem;
    margin: 22px 0 16px;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.step-group{
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
    counter-reset: item-counter;
}

.group-title{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 2px;
    font-size: 1.16rem;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.group-title span{
    background: var(--color-brand);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(255, 98, 51, .22);
}

.step-item{
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.step-content{
    padding: 14px 16px;
    flex-grow: 1;
    font-size: var(--text-base);
}
.step-content p{ display: inline; margin: 0; }

.step-content::before{
    counter-increment: item-counter;
    content: counter(item-counter) ". ";
    color: var(--color-brand);
    font-weight: 950;
    margin-right: 6px;
    font-size: 1.02rem;
}

.step-visual{
    width: 100%;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg-alt) 70%, transparent);
}
.step-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tip-box{
    margin-top: 10px;
    background: var(--color-bg-alt);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand);
    font-size: var(--text-sm);
}

.step-group.steps-1{ grid-template-columns: 1fr; }
.step-group.steps-1 .step-visual{ height: var(--step-img-h-1col); }

.step-group.steps-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step-group.steps-2 .step-visual{ height: var(--step-img-h-2col); }

.step-group.steps-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-group.steps-3 .step-visual{ height: var(--step-img-h-3col); }

/* ------------------------------------------------------------
 * 7) AUTEUR
 * ------------------------------------------------------------ */
.author-signature{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--color-bg-card);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-top: 26px;
}

.btn-author{
    color: var(--color-brand);
    font-weight: 900;
    text-decoration: none;
}
.btn-author:hover{ text-decoration: underline; }

/* ------------------------------------------------------------
 * 8) ENGAGEMENT (VOTES + COMMENTAIRES) — RATIONALISÉ
 * Objectif: éviter 2 "gros pavés" pleine largeur pour peu de contenu.
 * Sans changer le markup: on applique la même logique de largeur perçue
 * à .recette-votes et .chronique-comments (desktop).
 * ------------------------------------------------------------ */

/* Base cards */
.recette-votes,
.page-wrapper.recette-v2 .chronique-comments{
    margin-top: 18px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--eng-pad);
}

/* Desktop: largeur perçue premium + centrage */
@media (min-width: 1025px){
    .recette-votes,
    .page-wrapper.recette-v2 .chronique-comments{
        max-width: var(--eng-max);
        margin-left: auto;
        margin-right: auto;
        padding: 22px 24px;
    }
}

/* Titres: pas de gros margin-top quand en tête de card */
.page-wrapper.recette-v2 .chronique-comments .section-title{
    margin-top: 0;
}
.recette-votes .section-title{
    margin-top: 0;
}

/* ------------------------------------------------------------
 * 8.1) VOTES
 * ------------------------------------------------------------ */
.star-rating{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.65rem; /* un peu plus compact */
    color: #fbbf24;
    margin: 10px 0;
    user-select: none;
}

.star-rating i,
.star-rating svg{
    cursor: pointer;
    transition: transform 80ms ease, opacity 80ms ease;
    line-height: 1;
}

.star-rating svg{
    width: 1em;
    height: 1em;
    display: block;
}

@media (hover: hover) and (pointer: fine){
    .star-rating i:hover,
    .star-rating svg:hover{
        transform: translateY(-1px) scale(1.04);
        opacity: .95;
    }
}

.star-rating:focus-within{
    outline: 2px solid rgba(255, 98, 51, .35);
    outline-offset: 4px;
    border-radius: 12px;
}

#vote-stats{
margin: 8px 0 8px;
font-weight: 800;
color: var(--color-text-muted);
font-size: .95rem;
}
#vote-message{
margin-top: 8px;
font-weight: 800;
font-size: .95rem;
}

.star-rating.vote-disabled{ opacity: .75; }
.star-rating.vote-disabled i,
.star-rating.vote-disabled svg{ cursor: default !important; }

/* ------------------------------------------------------------
 * 9) COMMENTAIRES — PREMIUM (vraie amélioration)
 * ------------------------------------------------------------ */

/* Liste */
.page-wrapper.recette-v2 #chronique-comments-list{ margin-top: 10px; }

.page-wrapper.recette-v2 .chronique-comments__item{
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
}
.page-wrapper.recette-v2 .chronique-comments__item:last-child{ border-bottom: none; }

.page-wrapper.recette-v2 .chronique-comments__meta{
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.page-wrapper.recette-v2 .chronique-comments__pseudo{
    font-weight: 950;
    color: var(--color-text);
}

.page-wrapper.recette-v2 .chronique-comments__date{
    color: var(--color-text-muted);
    font-size: .84rem;
}

.page-wrapper.recette-v2 .chronique-comments__message{
    margin: 6px 0 8px;
    line-height: 1.55;
    font-size: .98rem;
}

/* Replies */
.page-wrapper.recette-v2 .chronique-comments__replies{
    margin-top: 10px;
    padding-left: 14px;
    border-left: 3px solid var(--color-border);
    display: grid;
    gap: 10px;
}

.page-wrapper.recette-v2 .chronique-comments__reply-item{
    background: color-mix(in srgb, var(--color-bg-card) 86%, var(--color-bg-alt));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 10px 12px;
}

.page-wrapper.recette-v2 .chronique-comments__reply-item strong{
    display: block;
    font-weight: 900;
    margin-bottom: 4px;
}

.page-wrapper.recette-v2 .chronique-comments__reply-item div{
    color: var(--color-text);
}

/* Actions */
.btn-reply-trigger,
.btn-link{
    background: none;
    border: none;
    color: var(--color-brand);
    font-weight: 850;
    cursor: pointer;
    padding: 0;
    font-size: .90rem;
}
.btn-reply-trigger:hover,
.btn-link:hover{
    text-decoration: underline;
}
.btn-reply-trigger:focus-visible,
.btn-link:focus-visible{
    outline: 2px solid rgba(255, 98, 51, .35);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Formulaire: compact + premium, et surtout bouton pas "pavé" desktop */
.comment-form{
    background: var(--color-bg-alt);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    margin-top: 14px;

    display: grid;
    gap: 10px;
}

.comment-form .mb-2{ margin: 0 !important; }

.comment-form input,
.comment-form textarea{
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    font-family: inherit;
    background: var(--color-bg-card);
    color: var(--color-text);
}

.comment-form textarea{
    resize: vertical;
    min-height: 92px;      /* plus compact = moins "pavé" */
    line-height: 1.55;
}

.comment-form input:focus,
.comment-form textarea:focus{
    outline: 2px solid rgba(255, 98, 51, .22);
    outline-offset: 2px;
}

.page-wrapper.recette-v2 #chronique-reply-info{
    background: rgba(255, 98, 51, .08);
    border: 1px solid rgba(255, 98, 51, .18);
    padding: 10px 12px;
    border-radius: 14px;
}

/* Bouton submit (réutilise .btn-print) : desktop => auto, pas full width */
.page-wrapper.recette-v2 .chronique-comments .comment-form .btn-print{
    width: auto;
    justify-self: start;
    padding: 10px 14px;
    font-size: .95rem;
    box-shadow: 0 10px 20px rgba(255, 98, 51, .18);
}

/* Texte d’aide */
.page-wrapper.recette-v2 .chronique-comments .comment-form p{
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: .92rem;
}

/* ------------------------------------------------------------
 * 10) RESPONSIVE
 * ------------------------------------------------------------ */
@media (max-width: 1024px){
    .mod-header{
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 18px;
    }
    .header-visual img.hero-img{ height: 320px; }

    .recipe-top{
        grid-template-columns: 1fr 300px;
        gap: 18px;
    }

    /* sur <=1024, on repasse pleine largeur */
    .recette-votes,
    .page-wrapper.recette-v2 .chronique-comments{
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 900px){
    .recipe-top{ grid-template-columns: 1fr; }
    .recipe-tools{ position: static; top: auto; }
}

@media (max-width: 768px){
    .mod-header{ grid-template-columns: 1fr; }
    .header-visual img.hero-img{ height: 260px; }
    .mod-title{ font-size: 2rem; }

    .ing-grid{ grid-template-columns: 1fr; gap: 14px; }

    .step-group,
    .step-group.steps-2,
    .step-group.steps-3{
        grid-template-columns: 1fr !important;
    }

    .step-group.steps-1 .step-visual,
    .step-group.steps-2 .step-visual,
    .step-group.steps-3 .step-visual{
        height: 260px;
    }

    .author-signature{
        flex-direction: column;
        align-items: flex-start;
    }

    .star-rating{ font-size: 1.55rem; gap: 6px; }

    /* mobile: bouton submit full width pour l’UX */
    .page-wrapper.recette-v2 .chronique-comments .comment-form .btn-print{
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 480px){
    .page-wrapper.recette-v2{ padding: 0 12px; }

    .mod-title{ font-size: 1.72rem; }
    .meta-item{ font-size: .86rem; padding: 7px 10px; }

    .share-btn{ height: 38px; }

    .mod-intro,
    .ing-card{ padding: 16px; }

    .recette-votes,
    .page-wrapper.recette-v2 .chronique-comments{ padding: 16px; }
}