/* Styles — histoire-eau
   Extrait de resources/views/multisites/inochi_city/partials/_histoire-eau.blade.php.
   Chargé par ce partial uniquement : retirer le @include suffit à ne plus le servir. */

.hi{background:#112c40;color:#eaf4fa;padding:70px 0 80px;position:relative;z-index:2;font-family:"Roboto Condensed",sans-serif}
.hi-inner{max-width:1180px;margin:0 auto;padding:0 22px}
.hi-kicker{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#4fb6e8;margin:0 0 12px}
.hi-h2,.hi-titre,.hi-fin-titre{font-family:"Oswald","Roboto Condensed",sans-serif;font-weight:700;text-transform:none;letter-spacing:.2px}
.hi-h2{font-size:32px;line-height:1.15;margin:0 0 14px;color:#fff}
.hi-lead{font-size:15px;line-height:1.75;color:rgba(234,244,250,.62);max-width:640px;margin:0 0 26px}

.hi-collection{background:#0d2233;border:1px solid rgba(234,244,250,.1);border-radius:10px;padding:16px 20px;margin-bottom:24px}
.hi-collection-titre{font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.5px;color:#4fb6e8;margin:0 0 10px}
.hi-fins-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hi-fins-liste li{font-size:12.5px;padding:5px 12px;border-radius:999px;border:1px solid rgba(234,244,250,.14);color:rgba(234,244,250,.32)}
.hi-fins-liste li.trouvee{border-color:rgba(158,176,131,.5);background:rgba(158,176,131,.1);color:#9eb083}
.hi-fins-liste li.meilleure.trouvee{border-color:#9eb083}

.hi-scene{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.hi-image{background:#0d2233;border-radius:10px;overflow:hidden;aspect-ratio:3/2}
.hi-image img{display:block;width:100%;height:100%;object-fit:fill}
.hi-titre{font-size:15px;color:#4fb6e8;margin:0 0 14px;letter-spacing:1px;text-transform:uppercase}
.hi-texte{font-size:16px;line-height:1.85;color:rgba(234,244,250,.82);margin:0 0 24px}

.hi-choix{display:grid;gap:9px}
.hi-opt{display:block;width:100%;text-align:left;background:#16364d;border:1px solid rgba(234,244,250,.13);color:#eaf4fa;
    font-family:inherit;font-size:14.5px;line-height:1.5;padding:14px 16px;border-radius:8px;cursor:pointer;
    transition:border-color .15s,background .15s,transform .1s}
.hi-opt:hover{border-color:rgba(79,182,232,.65);background:#1a4260;transform:translateX(3px)}

.hi-fin-titre{font-size:27px;color:#fff;margin:0 0 14px}
.hi-fin-texte{font-size:16px;line-height:1.9;color:rgba(234,244,250,.78);margin:0 0 20px}
.hi-bilan{font-size:14px;color:rgba(234,244,250,.5);margin:0 0 12px}
.hi-bilan strong{font-family:"Bebas Neue","Oswald",sans-serif;font-size:21px;letter-spacing:1px;color:#4fb6e8}
.hi-relance{font-size:14px;line-height:1.7;color:#e8a33d;margin:0 0 20px;min-height:1px}
.hi-btn{background:#4fb6e8;color:#0d2233;border:0;border-radius:6px;padding:12px 22px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hi-btn:hover{background:#71c6ef}

@media (max-width:900px){
    .hi-scene{grid-template-columns:1fr}
    .hi-h2{font-size:26px}
    .hi-texte,.hi-fin-texte{font-size:15px}
}

/* Deux boutons sur l'écran de fin quand plusieurs histoires existent. */
.hi-fin-actions{display:flex;gap:10px;flex-wrap:wrap}
.hi-btn-ghost{background:transparent;color:#4fb6e8;border:1px solid rgba(79,182,232,.5)}
.hi-btn-ghost:hover{background:rgba(79,182,232,.12)}

/* Barre de filtres par tranche d'âge — purement front, restreint le tirage.
   Même registre visuel que les filtres du widget témoignages. */
.hi-filtre{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hi-filtre-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#4fb6e8;margin-right:6px}
.hi-filtre-boutons{display:flex;flex-wrap:wrap;gap:10px}
.hi-filtre-btn{display:inline-block;padding:9px 18px;border-radius:6px;cursor:pointer;
    background:#16364d;border:1px solid rgba(234,244,250,.13);color:#eaf4fa;
    font-family:inherit;font-size:13.5px;line-height:1;transition:border-color .15s,background .15s,color .15s}
.hi-filtre-btn:hover{border-color:rgba(79,182,232,.65);color:#4fb6e8}
.hi-filtre-btn--actif,.hi-filtre-btn--actif:hover{background:#4fb6e8;border-color:#4fb6e8;color:#0d2233;font-weight:700}

/* Navigation d'histoire en histoire — pastilles numérotées, façon pagination. */
.hi-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hi-nav-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#4fb6e8;margin-right:6px}
.hi-nav-onglets{display:flex;flex-wrap:wrap;gap:10px}
.hi-nav-onglet{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:6px;cursor:pointer;
    background:#16364d;border:1px solid rgba(234,244,250,.13);color:#eaf4fa;
    font-family:inherit;font-size:13.5px;line-height:1;transition:border-color .15s,background .15s,color .15s}
.hi-nav-onglet:hover{border-color:rgba(79,182,232,.65);color:#4fb6e8}
.hi-nav-onglet--actif,.hi-nav-onglet--actif:hover{background:#4fb6e8;border-color:#4fb6e8;color:#0d2233;font-weight:700;cursor:default}
.hi-nav-onglet-num{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
    border-radius:999px;background:rgba(234,244,250,.12);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.hi-nav-onglet--actif .hi-nav-onglet-num{background:rgba(13,34,51,.25)}

/* Aucune histoire pour la tranche d'âge choisie. */
.hi-vide{margin:0;padding:28px 20px;border:1px dashed rgba(234,244,250,.2);border-radius:10px;
    background:#0d2233;color:rgba(234,244,250,.6);font-size:15px;text-align:center}