/* --------------------------------------------------------------------------
   The Smile Box — surcouche du thème.
   Chargée après style-s6.css : ne jamais modifier le thème directement.
   -------------------------------------------------------------------------- */

/* La police d'icônes du thème n'était servie qu'en WOFF (319 Ko) : sur mobile
   en réseau lent, les glyphes restaient invisibles plusieurs secondes.
   On la redéclare ici en WOFF2 (117 Ko), préchargée depuis head.php. */
@font-face {
    font-family: "Nioicon";
    src: url("../fonts/Nioicon.woff2") format("woff2"),
         url("../fonts/Nioicon.woff") format("woff"),
         url("../fonts/Nioicon.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* --- Navigation ---------------------------------------------------------- */

/* Cinq liens à plat au lieu de deux menus déroulants : on resserre la typo
   pour que la barre tienne sur une ligne dès 992 px. */
@media (min-width: 992px) {
    [data-menu-collapse=lg] .nk-menu-link {
        font-size: 0.9375rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    [data-menu-collapse=lg] .nk-menu-list {
        padding: 0 0.5rem;
    }
}

/* Entre 992 et 1200 px, les cinq libellés et le CTA arrivent au contact du
   bord droit : on resserre encore d'un cran sur cette seule plage. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    [data-menu-collapse=lg] .nk-menu-link {
        font-size: 0.875rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Page courante : le trait sous le libellé se lit mieux qu'un simple
   changement de couleur sur fond sombre. */
@media (min-width: 992px) {
    .nk-menu-item.active > .nk-menu-link {
        box-shadow: inset 0 -2px 0 0 currentColor;
    }
}

/* En-tête : translucide au-dessus du hero sombre… */
.nk-header-main.is-transparent.on-dark {
    background-color: rgba(0, 0, 0, 0.4);
}

/* …mais opaque une fois fixé, sinon les libellés blancs passent
   au-dessus des sections claires et deviennent illisibles. */
.nk-header-main.has-fixed.on-dark,
.is-dark .nk-header-main.has-fixed {
    background-color: rgb(14, 20, 36);
}

/* Bouton secondaire sur fond sombre : le thème garde un texte anthracite
   (#262b39) sur `.btn-outline-light`, illisible dans le hero. */
.is-dark .btn-outline-light,
.on-dark .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.is-dark .btn-outline-light:hover,
.is-dark .btn-outline-light:focus-visible,
.on-dark .btn-outline-light:hover,
.on-dark .btn-outline-light:focus-visible {
    color: #0e1424;
    background-color: #fff;
    border-color: #fff;
}

/* --- Rythme vertical ------------------------------------------------------ */

/* Le thème plafonne à 7,5 rem de respiration entre sections. Les pages sont
   longues et denses : on ouvre l'espace au-delà de 1200 px. */
@media (min-width: 1200px) {
    .section-lg {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }

    .section-lg .section-head {
        padding-bottom: 4.5rem;
    }
}

/* Chapô d'introduction : on borne la longueur de ligne à ~70 signes. */
.section-lead {
    max-width: 46rem;
}

/* --- Avis clients --------------------------------------------------------- */

/* Étoiles : SVG en ligne, aucune dépendance à la police d'icônes. */
.rating-stars {
    display: flex;
    gap: 0.125rem;
}

.rating-stars svg {
    display: block;
}

.quote-card {
    padding: 2.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.quote-card blockquote p {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* --- Animations : grille et carte vedette --------------------------------- */

.animation-card {
    color: inherit;
    display: block;
}

.animation-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity 0.2s ease-in-out;
}

.animation-card:hover img {
    opacity: 0.88;
}

.animation-card:hover .animation-card-title {
    color: #ed3e4a;
}

/* Le libellé de lien reprend le trait de soulignement au survol : plat,
   sans pastille ni halo. */
.link-underline {
    color: #ed3e4a;
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 0 currentColor;
    transition: box-shadow 0.2s ease-in-out;
}

.link-underline:hover,
.link-underline:focus-visible {
    color: #ed3e4a;
    box-shadow: inset 0 -2px 0 0 currentColor;
}

.animation-feature img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

/* Arguments de la carte vedette : filet fin en tête, pas de puce ni d'icône. */
.rule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rule-list li {
    border-top: 1px solid rgba(14, 20, 36, 0.12);
    padding: 0.875rem 0;
}

.rule-list li:last-child {
    border-bottom: 1px solid rgba(14, 20, 36, 0.12);
}

/* Colonnes éditoriales : un filet en tête plutôt qu'un badge d'icône. */
.rule-col {
    border-top: 2px solid #0e1424;
    padding-top: 1.25rem;
}

/* --- FAQ ------------------------------------------------------------------ */

/* Le thème ouvre les questions en bleu (#3938d5), couleur d'accent par défaut
   du gabarit. On repasse sur le rouge de la marque. */
.accordion {
    --bs-accordion-active-color: #ed3e4a;
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* Une carte par ligne sous 576 px : un visuel 4/3 rendrait la section
       interminable au défilement, on passe en 16/9. */
    .animation-card img,
    .animation-feature img {
        aspect-ratio: 16 / 9;
    }

    .quote-card {
        padding: 2rem 0;
    }
}

@media (max-width: 991.98px) {
    /* Tiroir de navigation mobile : cibles tactiles confortables. */
    .nk-menu-link {
        font-size: 1.0625rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .header-menu-toggle {
        width: 48px;
        height: 48px;
    }

    /* Champs du formulaire : sous 16 px, iOS zoome automatiquement à la mise
       au point du champ et décale toute la page. */
    .form-control,
    .form-select {
        font-size: 1rem;
        min-height: 48px;
    }

    /* Boutons principaux au format tactile confortable. */
    .nk-menu-buttons .btn,
    form .btn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* --- Pied de page ---------------------------------------------------------- */

/* Communes : deux colonnes tant qu'il y a la place. `.list` du thème est en
   flex, ce qui neutralise le multi-colonnes : on repasse le conteneur en bloc. */
.zones-list {
    display: block;
    column-count: 2;
    column-gap: 1.5rem;
}

.zones-list > li {
    break-inside: avoid;
}

@media (min-width: 1200px) {
    .zones-list {
        column-count: 1;
    }
}

/* --- Mouvement ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .animation-card img,
    .link-underline {
        transition: none;
    }
}