/*
 *  AVIS - V2 (new design, see dev/avis/plan.md)
 *
 *  Loaded on article pages and on the article "all avis" page (template/avis.php when modules/index.php or tousLesAvis.php sets $GLOBALS["avisDesignV2"]), after module_avis.css and 1262-avis.css,
 *  but BEFORE 1262-large-sidebar / 1262-news / 1262-clip, which are appended to $hookHeader later.
 *  Every rule is scoped under #comment_block.avis_v2.
 *  Don't style #comment_block itself (width / margin / font-size): 1262-large.css and 1262-clip.css set those with
 *  "body.width1262.plan1262 #comment_block", which has higher specificity and loads later. Put the layout on an inner .av2_ wrapper.
 *  New layout classes use the av2_ prefix, so the legacy avis CSS (module_avis, 1262-avis, col-*) doesn't apply to them.
 *  Legacy classes kept as JS hooks (comment_submitter, comm_like_me, comment_responses_loader, avis_*_wrapper...)
 *  get their legacy styles reset here when needed.
 */

/*  Accent colour: use the .themecolored / .bg_themecolored classes in the markup, don't set it here.
    They follow the page theme: legacy col-*.css, or css_/theme/ variables through vars-bridge.css.  */

/*  Some legacy designs turn .themecolored grey on mobile with !important (e.g. css_/legacy/caqlt2.css: "utilisée pour les textes"),
    which greyed out the V2 accents (kicker, count, top quote mark, "Répondre" / "N réponses" toggle). Force the theme accent on them.
    Links (a.themecolored) are left to the designs' link colours.  */
#comment_block.avis_v2 .themecolored:not(a) {
    color: var(--themecolored, #e55300) !important;
}


/***********   HEADER   ***********/

#comment_block.avis_v2 .av2_header {
    margin: 40px 0 24px 0;
}

#comment_block.avis_v2 .av2_kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

#comment_block.avis_v2 .av2_header_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 24px;
}

#comment_block.avis_v2 .av2_title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 46px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.01em;
    text-align: left;
    text-transform: none;
}

#comment_block.avis_v2 .av2_count {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 4px;
    vertical-align: top;
    position: relative;
    top: 2px;
}

#comment_block.avis_v2 .av2_meta {
    font-size: 12px;
    opacity: .7;
    padding-bottom: 4px;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_header {
        margin-top: 28px;
    }
    #comment_block.avis_v2 .av2_title {
        font-size: 34px;
    }
}
@media (max-width: 389px) {
    #comment_block.avis_v2 .av2_title {
        font-size: 30px;
    }
}


/***********   FORM   ***********/

#comment_block.avis_v2 .av2_form_card {
    background: var(--avis-input-bg, #ffffff);
    padding: 24px 24px 18px 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

#comment_block.avis_v2 .av2_form {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
}

#comment_block.avis_v2 .av2_avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--avis-replies-bg-2, #e8e5df);
}

#comment_block.avis_v2 .av2_form_main {
    flex: 1;
    min-width: 0;
}

#comment_block.avis_v2 .av2_form_who {
    font-size: 12px;
    opacity: .8;
    margin: 2px 0 8px 0;
}
#comment_block.avis_v2 .av2_form_who a {
    font-weight: 600;
    color: inherit;
}

#comment_block.avis_v2 .av2_textarea {
    display: block;
    float: none;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 4px 0 12px 0;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--avis-border-color, #e3e0dc);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-shadow: none;
}
#comment_block.avis_v2 .av2_textarea:focus {
    border-bottom-color: currentColor;
}
#comment_block.avis_v2 .av2_textarea::placeholder {
    color: inherit;
    opacity: .55;
}

#comment_block.avis_v2 .av2_form_notice {
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0 0 0;
    opacity: .85;
}
#comment_block.avis_v2 .av2_form_notice a {
    font-weight: 600;
}

/* reset the legacy float/padding/overflow (style.css, module_avis.css) so the footer stays below the widget */
#comment_block.avis_v2 .recaptacha_avis_wrapper {
    float: none;
    margin-top: 10px;
    padding: 0;
    overflow: visible;
}
#comment_block.avis_v2 .recaptacha_avis_wrapper > div,
#comment_block.avis_v2 .recaptacha_avis_wrapper .g-recaptcha {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

#comment_block.avis_v2 .av2_form_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 10px;
}

#comment_block.avis_v2 .av2_form_hint {
    font-size: 11px;
    opacity: .7;
}

/* .comment_submitter is a JS hook: reset its legacy styles (module_avis.css, 1262-avis.css) */
#comment_block.avis_v2 .comment_submitter.av2_publish {
    float: none;
    margin: 0;
    padding: 11px 24px;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s;
}
#comment_block.avis_v2 .comment_submitter.av2_publish:hover {
    opacity: .85;
}
#comment_block.avis_v2 .comment_submitter.av2_publish.disabled {
    cursor: default;
}

/* .post_new_comment_messages is a JS hook (errors / validation warning), keep its legacy colours */
#comment_block.avis_v2 .post_new_comment_messages {
    float: none;
    width: auto;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    font-size: 13px;
}

/* closed article */
#comment_block.avis_v2 .av2_form_card > div > .av2_form_notice {
    margin: 0;
}

/* reply form, loaded by ajax inside an avis */
#comment_block.avis_v2 .av2_form_card.av2_form_reply {
    padding: 14px 16px 12px 16px;
    margin: 6px 0 4px 0;
    background: var(--avis-input-bg, #ffffff);
}
#comment_block.avis_v2 .av2_form_reply .av2_avatar {
    width: 28px;
    height: 28px;
}
#comment_block.avis_v2 .av2_form_reply .av2_textarea {
    min-height: 48px;
    font-size: 14px;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_form_card {
        padding: 16px 14px 14px 14px;
    }
    #comment_block.avis_v2 .av2_form {
        gap: 10px;
    }
    #comment_block.avis_v2 .av2_avatar {
        width: 28px;
        height: 28px;
    }
    /* iOS Safari zooms the page on focus when a field is under 16px */
    #comment_block.avis_v2 .av2_textarea,
    #comment_block.avis_v2 .av2_form_reply .av2_textarea {
        font-size: 16px;
    }
}
@media (max-width: 389px) {
    #comment_block.avis_v2 .av2_form_card {
        padding: 14px 12px 12px 12px;
    }
}

/* reply form button: legacy ".comment_responses_textarea .comment_submitter" (grey bg, grey text, (0,2,0)) beats .bg_themecolored (0,1,0),
   so the reply button gets an explicit secondary style instead of the theme background */
#comment_block.avis_v2 .av2_form_reply .comment_submitter.av2_publish,
#comment_block.avis_v2 .av2_form_reply .comment_submitter.av2_publish:hover {
    background: transparent !important;
    color: inherit !important;   /* .coloredtextonthemebg sets its colour with !important (vars-bridge.css) */
    border: 1px solid currentColor;
    padding: 8px 18px;
    font-size: 12px;
}
#comment_block.avis_v2 .av2_form_reply .comment_submitter.av2_publish:hover {
    opacity: .7;
}


/***********   AVATARS / AUTHORS (shared)   ***********/

#comment_block.avis_v2 .av2_author_name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}
#comment_block.avis_v2 a.av2_author_name:hover {
    text-decoration: underline;
}


/***********   VOTES (shared) - legacy .likehate_container / .comm_like_me styles reset   ***********/

#comment_block.avis_v2 .likehate_container.av2_votes {
    position: static;
    display: flex;
    align-items: center;
    gap: 18px;
    height: auto;
    margin: 0;
    font-size: 12px;
}

#comment_block.avis_v2 .av2_vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#comment_block.avis_v2 .av2_votes .av2_vote_btn {
    float: none;
    width: auto;
    height: auto;
    border: 0;
    background: none;
    cursor: default;
    font-size: 14px;
    line-height: 1;
    opacity: .75;
    transition: opacity .2s, transform .2s;
}
#comment_block.avis_v2 .av2_votes .av2_vote_btn.active.vote {
    cursor: pointer;
}
#comment_block.avis_v2 .av2_votes .av2_vote_btn.active.vote:hover {
    opacity: 1;
    transform: scale(1.12);
}
/* voted by the visitor: filled thumb (font-awesome 4) */
#comment_block.avis_v2 .av2_votes .comm_like_me.unactive,
#comment_block.avis_v2 .av2_votes .comm_hate_me.unactive {
    opacity: 1;
}
#comment_block.avis_v2 .av2_votes .comm_like_me.unactive i:before {
    content: "\f164";
}
#comment_block.avis_v2 .av2_votes .comm_hate_me.unactive i:before {
    content: "\f165";
}

#comment_block.avis_v2 .av2_votes .av2_vote_count {
    float: none;
    height: auto;
    min-width: 0;
    padding: 0;
    line-height: 1;
    font-size: 12px;
    background: none;
    color: inherit;
}


/***********   TOP COMM' CARD   ***********/

#comment_block.avis_v2 .av2_top {
    display: flex;
    margin-bottom: 32px;
    background: var(--avis-bg-1, #ffffff);   /* not part of the alternation */
}

#comment_block.avis_v2 .av2_top_side {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 20px 18px;
    box-sizing: border-box;
}

#comment_block.avis_v2 .av2_top_label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#comment_block.avis_v2 .av2_top_number {
    margin-top: 18px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

#comment_block.avis_v2 .av2_top_caption {
    margin-top: 6px;
    font-size: 10px;
    opacity: .9;
}

#comment_block.avis_v2 .av2_top_author {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    font-size: 11px;
    line-height: 1.3;
}
#comment_block.avis_v2 .av2_top_author .av2_avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    box-shadow: 0 0 0 2px var(--avis-bg-1, #ffffff);
}
#comment_block.avis_v2 .av2_top_author .av2_author_name {
    color: inherit;
}
#comment_block.avis_v2 .av2_top_date {
    font-size: 10px;
    opacity: .85;
}

#comment_block.avis_v2 .av2_top_main {
    flex: 1;
    min-width: 0;
    padding: 20px 26px 22px 26px;
}

#comment_block.avis_v2 .av2_top_quote_mark {
    font-size: 30px;
    line-height: 1;
    height: 20px;
    font-family: Georgia, serif;
}

#comment_block.avis_v2 .av2_top_text {
    margin: 14px 0 16px 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
}
#comment_block.avis_v2 .av2_top_text.av2_top_text_long {   /* long top comm: the big quote style is for short texts */
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_top {
        display: none;
        flex-direction: column;
    }
    #comment_block.avis_v2 .av2_top_side {
        flex-basis: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "label label" "number caption" "author author";
        align-items: end;
        column-gap: 12px;
        padding: 16px 14px;
    }
    #comment_block.avis_v2 .av2_top_label { grid-area: label; }
    #comment_block.avis_v2 .av2_top_number { grid-area: number; margin-top: 10px; font-size: 38px; }
    #comment_block.avis_v2 .av2_top_caption { grid-area: caption; margin-bottom: 4px; }
    #comment_block.avis_v2 .av2_top_author { grid-area: author; padding-top: 14px; }
    #comment_block.avis_v2 .av2_top_main {
        padding: 14px 14px 16px 14px;
    }
    #comment_block.avis_v2 .av2_top_text {
        font-size: 15px;
        margin-top: 8px;
    }
}
@media (max-width: 389px) {
    #comment_block.avis_v2 .av2_top_side {
        padding: 14px 12px;
    }
    #comment_block.avis_v2 .av2_top_main {
        padding: 12px 12px 14px 12px;
    }
}


/***********   AVIS LIST   ***********/
/* legacy classes kept as JS hooks (commentaire_all_container, commentaire_container, commentaire_container_top,
   comment_responses, respond_container, comment_alerter, comment_edit...) are reset here: float / width / position / bg */

#comment_block.avis_v2 #comment_ano_warning {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: right;
    font-size: 12px;
}

/* legacy module_avis.css floats it (float: left; width: 100%): the un-floated footer below then starts at its top,
   and the mobile display:block footer link drew its border behind the whole list */
#comment_block.avis_v2 #users_comments {
    float: none;
    width: auto;
}

#comment_block.avis_v2 .all_avis_container {
    clear: both;
}

#comment_block.avis_v2 .commentaire_all_container.av2_avis {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 12px 0;
    background: var(--avis-bg-1, #ffffff);
}
/* alternation: odd avis use the base colours above (--avis-bg-1 / --avis-replies-bg-1), even ones the "2" colours.
   Position-based, so posting a new avis (prepended by avisv2.js) swaps the colours below it: accepted */
#comment_block.avis_v2 #users_comments > .all_avis_container > .av2_avis:nth-child(even) {
    background: var(--avis-bg-2, #f2f0ec);
}
#comment_block.avis_v2 #users_comments > .all_avis_container > .av2_avis:nth-child(even) .av2_replies {
    background: var(--avis-replies-bg-2, #e8e5df);
}

/* #users_comments: must beat the alternation rules */
#comment_block.avis_v2 #users_comments .commentaire_all_container.av2_avis.deleted {
    background: #fbe9e4;
    outline: 1px dashed #d9534f;
}

#comment_block.avis_v2 .av2_avis .commentaire_container.av2_avis_inner {
    float: none;
    position: relative;
    width: auto;
    padding: 0;
}

#comment_block.avis_v2 .av2_avis_body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 18px 24px;
}

#comment_block.avis_v2 .av2_avis_main {
    flex: 1;
    min-width: 0;
}

#comment_block.avis_v2 .av2_avis_head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 13px;
    line-height: 1.3;
}
#comment_block.avis_v2 .av2_avis_date {
    font-size: 11px;
    opacity: .6;
}
#comment_block.avis_v2 .av2_avis_flag {
    display: none;
}
/* own state only: replies of a deleted avis are flagged by their own .deleted (avis_admin.js cascades it) */
#comment_block.avis_v2 .av2_avis.deleted > .av2_avis_inner > .av2_avis_body .av2_avis_flag {
    display: inline;
}
#comment_block.avis_v2 .av2_avis_flag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d9534f;
}

#comment_block.avis_v2 .av2_avis_text {
    margin: 8px 0 12px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* edit (author within the time limit, admins) - hidden until "Éditer" (avisv2.js shows/hides by id) */
#comment_block.avis_v2 .edit_comment_text.av2_edit {
    display: none;
    margin: 8px 0 12px 0;
}
#comment_block.avis_v2 .edit_comment_text.av2_edit textarea {
    float: none;
    display: block;
    width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid var(--avis-border-color, #e3e0dc);
    background: var(--avis-input-bg, #ffffff);
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

#comment_block.avis_v2 .av2_avis_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    font-size: 12px;
}

#comment_block.avis_v2 .respond_container.av2_respond {
    position: static;
    width: auto;
    height: auto;
    line-height: inherit;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
}
#comment_block.avis_v2 .av2_respond_link {
    cursor: pointer;
    opacity: .85;
}
#comment_block.avis_v2 .av2_respond_link:hover,
#comment_block.avis_v2 .av2_respond_link.av2_open {
    opacity: 1;
    text-decoration: underline;
}

#comment_block.avis_v2 .av2_avis_tools {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    font-size: 11px;
}
#comment_block.avis_v2 .av2_edit_tools {
    display: inline-flex;
    gap: 12px;
}
#comment_block.avis_v2 .av2_avis_tools .comment_edit,
#comment_block.avis_v2 .av2_avis_tools .comment_edit_val,
#comment_block.avis_v2 .av2_avis_tools .comment_edit_cancel,
#comment_block.avis_v2 .av2_avis_tools .comment_alerter {
    float: none;
    width: auto;
    line-height: inherit;
    font-size: 11px;
    font-weight: 400;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}
#comment_block.avis_v2 .av2_avis_tools .comment_edit_val,
#comment_block.avis_v2 .av2_avis_tools .comment_edit_cancel {
    display: none;   /* shown by avisv2.js (inline style) */
}
#comment_block.avis_v2 .av2_avis_tools .comment_edit:hover,
#comment_block.avis_v2 .av2_avis_tools .comment_edit_val:hover,
#comment_block.avis_v2 .av2_avis_tools .comment_edit_cancel:hover,
#comment_block.avis_v2 .av2_avis_tools .comment_alerter:hover {
    opacity: 1;
}
#comment_block.avis_v2 .av2_avis_tools .comment_edit_val {
    font-weight: 600;
    opacity: 1;
}
#comment_block.avis_v2 .av2_avis_tools .comment_alerter_container p {   /* "L'équipe de modération est alertée" */
    float: none;
    margin: 0;
    font-size: 11px;
    opacity: .7;
}

/* admin bar (admins only): validate, IP + ban, erase, trash/restore - legacy wrappers keep their .active/.inactive toggles */
#comment_block.avis_v2 .commentaire_container_top.admin.av2_admin_bar {
    float: none;
    width: auto;
    height: auto;
    position: static;
    padding: 6px 24px 8px 76px;
    border-top: 1px dashed var(--avis-border-color, #e3e0dc);
    font-size: 11px;
    line-height: 18px;
}
#comment_block.avis_v2 .av2_admin_bar .commentaire_container_admin {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
}
#comment_block.avis_v2 .av2_admin_bar .avis_ban_wrapper {
    font-size: 11px;
    opacity: .8;
}
#comment_block.avis_v2 .av2_admin_bar i {
    margin: 0 3px;
    font-size: 13px;
}

/* replies zone: tinted, inside the card. .closed/.opened toggled by avisv2.js */
#comment_block.avis_v2 .comment_responses.av2_replies {
    float: none;
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    overflow: visible;
    padding-top: 34px;   /* strip for the closer (top right) */
    background: var(--avis-replies-bg-1, #f6f5f2);
    border-top: 1px solid var(--avis-border-color, #e3e0dc);
}
#comment_block.avis_v2 .comment_responses.av2_replies.closed {
    display: none;
}
#comment_block.avis_v2 .av2_replies .comment_responses_block {
    float: none;
    width: auto;
}
#comment_block.avis_v2 .av2_replies .comment_responses_block:empty,
#comment_block.avis_v2 .av2_replies .comment_responses_textarea:empty {
    display: none;
}
#comment_block.avis_v2 .av2_replies .comment_responses_block .all_avis_container {
    padding: 0;   /* the zone's padding-top strip already spaces the first reply */
}
/* static: the closer it holds (ajax loadPostAvisTA) is positioned against the whole replies zone, not the form below the replies */
#comment_block.avis_v2 .av2_replies .comment_responses_textarea {
    position: static;
    padding: 0 24px 8px 76px;
}
#comment_block.avis_v2 .av2_replies .avis_asynch_loading_icon {
    padding: 12px 0 12px 76px;
    opacity: .5;
}

/* one reply */
#comment_block.avis_v2 .commentaire_all_container.av2_reply {
    margin: 0;
    background: transparent;
}
#comment_block.avis_v2 .av2_reply .av2_avis_body {
    gap: 12px;
    padding: 12px 24px 6px 76px;
}
#comment_block.avis_v2 .av2_reply .av2_avatar {
    width: 28px;
    height: 28px;
}
#comment_block.avis_v2 .av2_reply .av2_avis_head {
    font-size: 12px;
}
#comment_block.avis_v2 .av2_reply .av2_avis_text {
    margin: 4px 0 8px 0;
    font-size: 13px;
}
#comment_block.avis_v2 .av2_reply .av2_admin_bar {
    padding-left: 116px;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_avis_body {
        gap: 10px;
        padding: 16px 14px 14px 14px;
    }
    #comment_block.avis_v2 .av2_avis_body > .av2_avatar {
        width: 28px;
        height: 28px;
    }
    #comment_block.avis_v2 .av2_avis_actions {
        gap: 8px 16px;
    }
    #comment_block.avis_v2 .commentaire_container_top.admin.av2_admin_bar {
        padding-left: 14px;
        padding-right: 14px;
    }
    #comment_block.avis_v2 .av2_reply .av2_avis_body,
    #comment_block.avis_v2 .av2_replies .comment_responses_textarea {
        padding-left: 30px;
        padding-right: 14px;
    }
    #comment_block.avis_v2 .av2_replies .avis_asynch_loading_icon,
    #comment_block.avis_v2 .av2_reply .av2_admin_bar {
        padding-left: 30px;
    }
    #comment_block.avis_v2 .edit_comment_text.av2_edit textarea {
        font-size: 16px;   /* no iOS zoom on focus */
    }
    /* bigger tap area, same look: the padding is cancelled by a negative margin */
    #comment_block.avis_v2 .av2_votes .av2_vote_btn {
        padding: 12px 8px;
        margin: -12px -8px;
    }
}
@media (max-width: 389px) {
    #comment_block.avis_v2 .av2_avis_body {
        padding: 14px 12px 12px 12px;
    }
    #comment_block.avis_v2 .commentaire_container_top.admin.av2_admin_bar {
        padding-left: 12px;
        padding-right: 12px;
    }
    #comment_block.avis_v2 .av2_reply .av2_avis_body,
    #comment_block.avis_v2 .av2_replies .comment_responses_textarea {
        padding-right: 12px;
    }
}

/* replies closer: top right of the replies zone, in the padding-top strip. Legacy ".comment_responses_textarea .responses_closer" reset */
#comment_block.avis_v2 .av2_replies .av2_responses_closer {
    position: absolute;
    top: 2px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s;
}
#comment_block.avis_v2 .av2_replies .av2_responses_closer:hover {
    opacity: 1;
}
@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_replies .av2_responses_closer {
        right: 6px;
    }
}


/***********   FILTER TABS   ***********/

#comment_block.avis_v2 .av2_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
    margin: 0 0 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

#comment_block.avis_v2 .av2_tab {
    margin: 0 0 -1px 0;
    padding: 10px 0 9px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
    cursor: pointer;
    transition: opacity .2s, border-color .2s;
}
#comment_block.avis_v2 .av2_tab:hover {
    opacity: 1;
}
#comment_block.avis_v2 .av2_tab.av2_tab_active {
    font-weight: 600;
    opacity: 1;
    border-bottom-color: var(--themecolored, #e55300);
    cursor: default;
}

#comment_block.avis_v2 .all_avis_container.av2_loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .15s;
}

#comment_block.avis_v2 .av2_empty {
    margin: 0 0 12px 0;
    padding: 28px 24px;
    background: var(--avis-bg-1, #ffffff);
    font-size: 13px;
    opacity: .75;
    text-align: center;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_tabs {
        gap: 0 14px;
    }
    #comment_block.avis_v2 .av2_tab {
        padding: 13px 0 12px 0;   /* taller tap area */
        font-size: 10px;
        letter-spacing: .1em;
    }
}


/***********   FOOTER: "Voir tous les commentaires"   ***********/
/* .comment_block_footer kept: js/news1262.js uses it for the sidebar scroll; legacy float / white bg reset */

#comment_block.avis_v2 .comment_block_footer.av2_footer {
    float: none;
    width: auto;
    padding: 18px 0 8px 0;
    background: none;
    text-align: center;
}

#comment_block.avis_v2 .av2_all_link {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid currentColor;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
#comment_block.avis_v2 .av2_all_link:hover {
    background-color: var(--bg-themecolored, #e55300);
    border-color: var(--bg-themecolored, #e55300);
    color: var(--coloredtextonthemebg, #ffffff);
    text-decoration: none;
}

@media (max-width: 767px) {
    #comment_block.avis_v2 .av2_all_link {
        display: block;
        padding: 14px 12px;
        letter-spacing: .1em;
    }
}


/***********   "TOUS LES AVIS" PAGE (modules/tousLesAvis.php)   ***********/

#comment_block.avis_v2.av2_all_page .block_pagination {
    float: none;
    width: auto;
    margin: 20px 0 8px 0;
    padding: 0;
    background: none;
    text-align: center;
}