/* ==========================================================================
   FICHE COMMUNE V11 - Section AVIS uniquement (Sprint 1A)
   ==========================================================================
   Tous les styles sont préfixés par .fiche-v11 pour éviter toute interférence
   avec le CSS existant du site (style.css, colors.css, bootstrap, etc.)
   ========================================================================== */

/* ==========================================================================
   LAYOUT V11 - Mini-Sprint 1 (largeur 1180px + fonts globales)
   ==========================================================================
   Override conditionnel pour les communes qui passent en V11.
   Activé via la classe .layout-v11 ajoutée sur le <div id="main"> dans le blade.
   ========================================================================== */

/* --- Container plus large (override Bootstrap 3) --- */
#main.container.layout-v11 {
    max-width: 1180px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Fonts globales : Plus Jakarta Sans pour le corps --- */
.layout-v11,
.layout-v11 p,
.layout-v11 li,
.layout-v11 ul,
.layout-v11 ol,
.layout-v11 span,
.layout-v11 a,
.layout-v11 div,
.layout-v11 td,
.layout-v11 th,
.layout-v11 label,
.layout-v11 button,
.layout-v11 input,
.layout-v11 select,
.layout-v11 textarea {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.layout-v11 {
    color: #2d2d2d;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Fonts globales : Fraunces pour les titres --- */
.layout-v11 h1,
.layout-v11 h2,
.layout-v11 h3,
.layout-v11 h4,
.layout-v11 h5,
.layout-v11 h6 {
    font-family: 'Fraunces', Georgia, serif !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
}

/* --- H1 (titre principal de la commune) --- */
.layout-v11 h1.bigstar {
    font-size: 56px !important;
    margin: 12px 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* --- Adoucir les encarts Sprint 1-2 (geo, risques, wiki) dans le layout V11 --- */
.layout-v11 .geo-keystats,
.layout-v11 .risques-box,
.layout-v11 .wiki-presentation {
    border-radius: 16px !important;
    border-color: #ececec !important;
}

/* --- Breadcrumb / navigation : un peu plus joli --- */
.layout-v11 #navigation {
    font-size: 13.5px;
    color: #8a8a8a;
    padding: 8px 0;
}
.layout-v11 #navigation a {
    color: #555;
    font-weight: 500;
}
.layout-v11 #navigation a:hover {
    color: #2581DF;
}

/* --- Liens dans le contenu --- */
.layout-v11 a {
    color: #2581DF;
}
.layout-v11 a:hover {
    color: #1d6ab8;
}

/* ==========================================================================
   FICHE COMMUNE V11 - Section AVIS (suite, namespace .fiche-v11)
   ========================================================================== */

.fiche-v11 {
    /* Couleurs */
    --v11-blue: #2581DF;
    --v11-blue-dark: #1d6ab8;
    --v11-red: #FF2626;
    --v11-red-dark: #e51e1e;
    --v11-green: #51C568;
    --v11-green-dark: #3a9b50;
    --v11-yellow: #FFB420;
    --v11-yellow-dark: #d99a16;
    --v11-blue-bg: #e8f1fc;
    --v11-red-bg: #ffeaea;
    --v11-green-bg: #e8f7eb;
    --v11-yellow-bg: #fff5db;
    --v11-orange: #FF7B2C;
    --v11-grad-cta: linear-gradient(135deg, #FF2626 0%, #FF7B2C 100%);
    --v11-grad-cta-hover: linear-gradient(135deg, #e51e1e 0%, #e56624 100%);
    --v11-ink: #1a1a1a;
    --v11-text: #2d2d2d;
    --v11-text-soft: #555;
    --v11-muted: #8a8a8a;
    --v11-line: #ececec;
    --v11-line-soft: #f4f4f4;
    --v11-bg: #ffffff;
    --v11-bg-soft: #f8f8f6;
    --v11-paper: #ffffff;
    --v11-font-display: 'Fraunces', Georgia, serif;
    --v11-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    font-family: var(--v11-font-body);
    color: var(--v11-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    margin: 40px 0;
}

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

.fiche-v11 h2,
.fiche-v11 h3 {
    font-family: var(--v11-font-display);
    color: var(--v11-ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
    border: 0;
    padding: 0;
}

.fiche-v11 a {
    color: var(--v11-blue);
    text-decoration: none;
    transition: color .15s;
}
.fiche-v11 a:hover { color: var(--v11-blue-dark); }
.fiche-v11 p { margin: 0 0 14px; }

/* ============ SECTION ============ */
.fiche-v11 .section {
    padding: 36px 0 12px;
}
.fiche-v11 .section-header {
    margin-bottom: 28px;
    position: relative;
    max-width: 720px;
}
.fiche-v11 .section-cursive {
    position: absolute;
    top: -24px;
    left: 0;
    font-family: var(--v11-font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--v11-red);
    opacity: .35;
    font-weight: 500;
}
.fiche-v11 .section h2 {
    font-size: 36px;
    color: var(--v11-ink);
    margin-bottom: 8px;
    font-weight: 700;
}
.fiche-v11 .section-intro {
    font-size: 16px;
    color: var(--v11-text-soft);
    margin: 0;
}
.fiche-v11 .section-source {
    font-size: 12.5px;
    color: var(--v11-muted);
    font-style: italic;
    margin-top: 20px;
}

/* ============ NOTE GLOBALE + 6 CRITÈRES ============ */
.fiche-v11 .global-rating {
    background: var(--v11-bg-soft);
    border-radius: 28px;
    padding: 36px 40px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 760px) {
    .fiche-v11 .global-rating {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
        text-align: center;
    }
}
.fiche-v11 .global-rating-score { text-align: center; }
.fiche-v11 .global-rating-number {
    font-family: var(--v11-font-display);
    font-size: 84px;
    font-weight: 800;
    color: var(--v11-ink);
    line-height: 1;
    letter-spacing: -.04em;
}
.fiche-v11 .global-rating-number sub {
    font-size: 22px;
    color: var(--v11-text-soft);
    font-weight: 500;
    vertical-align: super;
}
.fiche-v11 .global-rating-stars {
    color: var(--v11-yellow);
    font-size: 24px;
    letter-spacing: -1px;
    margin-top: 6px;
}
.fiche-v11 .global-rating-stars .empty { color: #d8d2c0; }
.fiche-v11 .global-rating-count {
    color: var(--v11-text-soft);
    font-size: 14px;
    margin-top: 6px;
    font-weight: 500;
}

.fiche-v11 .criteria-bars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
}
@media (max-width: 600px) {
    .fiche-v11 .criteria-bars { grid-template-columns: 1fr; }
}
.fiche-v11 .criteria-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
}
.fiche-v11 .criteria-bar-content { display: flex; flex-direction: column; }
.fiche-v11 .criteria-bar-label {
    color: var(--v11-text);
    font-weight: 500;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fiche-v11 .criteria-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.fiche-v11 .criteria-bar-fill {
    height: 100%;
    background: var(--v11-yellow);
    border-radius: 999px;
    transition: width .4s ease;
}
.fiche-v11 .criteria-bar-fill.high { background: var(--v11-green); }
.fiche-v11 .criteria-bar-fill.mid { background: var(--v11-yellow); }
.fiche-v11 .criteria-bar-fill.low { background: var(--v11-red); }
.fiche-v11 .criteria-bar-stars {
    color: var(--v11-yellow);
    font-size: 14px;
    letter-spacing: -1px;
    white-space: nowrap;
    text-align: right;
    font-weight: 600;
}
.fiche-v11 .criteria-bar-stars .empty { color: #d8d2c0; }

/* ============ LISTE AVIS ============ */
.fiche-v11 .avis-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.fiche-v11 .avis-list-head h3 {
    font-size: 26px;
    color: var(--v11-ink);
    font-family: var(--v11-font-display);
}
.fiche-v11 .avis-list-head .page-info {
    font-size: 15px;
    color: var(--v11-muted);
    font-weight: 500;
    font-family: var(--v11-font-body);
    margin-left: 8px;
}

.fiche-v11 .avis-item {
    background: var(--v11-paper);
    border: 1px solid var(--v11-line);
    border-radius: 24px;
    padding: 26px 30px;
    margin-bottom: 16px;
    transition: all .15s;
}
.fiche-v11 .avis-item:hover {
    border-color: var(--v11-blue);
    box-shadow: 0 8px 24px rgba(37,129,223,.08);
}
.fiche-v11 .avis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}
.fiche-v11 .avis-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fiche-v11 .avis-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--v11-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--v11-font-display);
    font-size: 19px;
    flex-shrink: 0;
}
.fiche-v11 .avis-avatar.col-1 { background: var(--v11-blue); }
.fiche-v11 .avis-avatar.col-2 { background: var(--v11-red); }
.fiche-v11 .avis-avatar.col-3 { background: var(--v11-green); }
.fiche-v11 .avis-avatar.col-4 { background: var(--v11-yellow-dark); }
.fiche-v11 .avis-avatar.col-5 { background: var(--v11-orange); }
.fiche-v11 .avis-author-name {
    font-weight: 700;
    color: var(--v11-ink);
    font-size: 17px;
}
.fiche-v11 .avis-author-meta {
    color: var(--v11-muted);
    font-size: 13px;
    margin-top: 2px;
}
.fiche-v11 .avis-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--v11-yellow-bg);
    padding: 8px 16px;
    border-radius: 999px;
}
.fiche-v11 .avis-rating .stars {
    color: var(--v11-yellow);
    font-size: 16px;
    letter-spacing: -1px;
}
.fiche-v11 .avis-rating .stars .empty { color: #d8d2c0; }
.fiche-v11 .avis-rating-value {
    font-weight: 700;
    color: var(--v11-ink);
    font-size: 14px;
}

.fiche-v11 .avis-text {
    color: var(--v11-text);
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 14px;
    white-space: pre-line;
}

.fiche-v11 .avis-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .fiche-v11 .avis-pros-cons { grid-template-columns: 1fr; }
}
.fiche-v11 .avis-pros,
.fiche-v11 .avis-cons {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
}
.fiche-v11 .avis-pros {
    background: var(--v11-green-bg);
    color: #1e5a2c;
    border-left: 3px solid var(--v11-green);
}
.fiche-v11 .avis-cons {
    background: var(--v11-red-bg);
    color: #8b1414;
    border-left: 3px solid var(--v11-red);
}
.fiche-v11 .avis-pros-label,
.fiche-v11 .avis-cons-label {
    font-family: var(--v11-font-display);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
    display: block;
}

.fiche-v11 .avis-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}
.fiche-v11 .avis-actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: var(--v11-bg-soft);
    border-radius: 999px;
    color: var(--v11-text-soft);
    font-size: 13px;
    font-family: var(--v11-font-body);
    font-weight: 600;
    transition: all .15s;
    text-decoration: none;
}
.fiche-v11 .avis-actions a:hover {
    background: var(--v11-red-bg);
    color: var(--v11-red);
    text-decoration: none;
}

/* ============ ÉTAT VIDE (0 avis) ============ */
.fiche-v11 .avis-empty {
    background: var(--v11-bg-soft);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 32px;
}
.fiche-v11 .avis-empty-icon {
    font-size: 56px;
    margin-bottom: 12px;
    line-height: 1;
}
.fiche-v11 .avis-empty h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--v11-ink);
}
.fiche-v11 .avis-empty p {
    color: var(--v11-text-soft);
    margin: 0;
}

/* ============ PAGINATION (URLs SEO préservées) ============ */
.fiche-v11 .pagination-v11 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 32px 0 32px;
    flex-wrap: wrap;
}
.fiche-v11 .pagination-v11 a,
.fiche-v11 .pagination-v11 span.current,
.fiche-v11 .pagination-v11 span.ellipsis {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    background: var(--v11-paper);
    border: 1px solid var(--v11-line);
    color: var(--v11-text);
    text-decoration: none;
    transition: all .15s;
    font-family: var(--v11-font-body);
}
.fiche-v11 .pagination-v11 a:hover {
    background: var(--v11-blue-bg);
    border-color: var(--v11-blue);
    color: var(--v11-blue);
    text-decoration: none;
}
.fiche-v11 .pagination-v11 .current {
    background: var(--v11-ink);
    color: var(--v11-paper);
    border-color: var(--v11-ink);
}
.fiche-v11 .pagination-v11 .nav-arrow { padding: 0 16px; }
.fiche-v11 .pagination-v11 .ellipsis {
    border: 0;
    background: transparent;
    color: var(--v11-muted);
    font-weight: 500;
}

/* ============ CTA "Donner mon avis" ============ */
.fiche-v11 .cta-avis-wrap {
    text-align: center;
    margin: 32px 0 16px;
}
.fiche-v11 .btn-cta-v11 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--v11-grad-cta);
    color: var(--v11-paper);
    border: 0;
    border-radius: 999px;
    font-family: var(--v11-font-body);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 8px 24px rgba(255,38,38,.35);
}
.fiche-v11 .btn-cta-v11:hover {
    background: var(--v11-grad-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255,38,38,.45);
    color: var(--v11-paper);
    text-decoration: none;
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    .fiche-v11 .section h2 { font-size: 28px; }
    .fiche-v11 .global-rating-number { font-size: 64px; }
    .fiche-v11 .avis-item { padding: 20px 22px; }
}