/*
Theme Name: Universim
Theme URI:
Author: Universim Telecom
Author URI:
Description: Thème WordPress personnalisé pour Universim, construit pas à pas.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: universim
*/

/* ==========================================================================
   Variables globales — identité Universim
   ========================================================================== */
:root {
    --universim-black: #000000;
    --universim-white: #ffffff;
    --universim-gold: #f5b301;
    --universim-gold-hover: #ffc933;
    --universim-footer-bg: #030303;
    --universim-footer-text: #cfcfcf;
    --universim-field-bg: #101010;
    --universim-field-border: rgba(255, 255, 255, 0.15);
    --universim-transition: 0.2s ease;
}

* {
    box-sizing: border-box;
}

html {
    background-color: var(--universim-black);
}

body {
    margin: 0;
    background-color: var(--universim-black);
    color: var(--universim-white);
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* ==========================================================================
   Composant global — lien "Voir le panier"
   ========================================================================== */
/* Composant UNIQUE, partagé par toute la Boutique, l'accueil ("Nos
   forfaits") et les 5 pages forfait individuelles : partout où un bouton
   "Choisir ce forfait"/"Ajouter au panier" utilise le lien AJAX natif de
   WooCommerce (classe add_to_cart_button.ajax_add_to_cart — voir
   universim_add_to_cart_link() dans functions.php), add-to-cart.js (non
   modifié) insère automatiquement, juste après ce bouton, un lien
   <a class="added_to_cart wc-forward">. Une seule règle ici plutôt qu'une
   copie par page : c'est le rendu validé sur la page Boutique.
   Sélecteur renforcé (élément + 2 classes) : bat ".woocommerce a.added_to_cart"
   (2 classes + élément), la seule règle native qui le concerne (elle
   n'impose qu'un display:inline-block/padding-top, sans couleur — sans
   cette règle le lien retombait sur le bleu de lien par défaut du
   navigateur). */
body a.added_to_cart.wc-forward {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(245, 179, 1, 0.45);
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--universim-gold);
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body a.added_to_cart.wc-forward:hover {
    background-color: var(--universim-gold);
    border-color: var(--universim-gold);
    color: #000;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    background-color: var(--universim-black);
}

.site-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo (via add_theme_support('custom-logo') ou l'image de secours) */
.site-header__branding .custom-logo,
.site-header__logo-fallback img {
    display: block;
    height: 104px;
    width: auto;
}

.site-header__logo-fallback {
    display: inline-flex;
}

/* Navigation principale : largeur naturelle (pas de flex-grow),
   c'est justify-content: space-between sur .site-header__inner qui
   se charge, à lui seul, de répartir logo / nav / panier. */
.site-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    color: var(--universim-white);
    text-decoration: none;
    font-size: 18px;
    padding: 8px 4px;
    transition: color var(--universim-transition);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
    color: var(--universim-gold);
}

/* Page actuellement consultée (classes ajoutées automatiquement par WordPress) */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_ancestor > a {
    color: var(--universim-gold);
}

/* Bouton "Boutique" (classe ajoutée via le filtre nav_menu_css_class) */
.site-nav__list .site-nav__item--cta > a {
    background-color: var(--universim-gold);
    color: var(--universim-black);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    transition: background-color var(--universim-transition), box-shadow var(--universim-transition);
}

.site-nav__list .site-nav__item--cta > a:hover,
.site-nav__list .site-nav__item--cta > a:focus-visible {
    background-color: var(--universim-gold-hover);
    color: var(--universim-black);
}

/* Boutique active : léger renforcement, sans changer son identité de bouton */
.site-nav__list .site-nav__item--cta.current-menu-item > a,
.site-nav__list .site-nav__item--cta.current_page_item > a {
    box-shadow: 0 0 0 2px var(--universim-white);
}

/* Zone panier : le <a> entier (texte + icône) forme la zone cliquable */
.site-header__cart-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    margin: -14px -8px;
    border-radius: 8px;
    color: var(--universim-white);
    text-decoration: none;
    font-size: 19px;
    transition: color var(--universim-transition);
}

.site-header__cart-link:hover,
.site-header__cart-link:focus-visible {
    color: var(--universim-gold);
}

.site-header__cart-icon-wrap {
    position: relative;
    display: inline-flex;
}

/* Icône : taille pilotée uniquement ici, pas en dur dans le HTML.
   Agrandie pour rester nettement identifiable, sans dépasser le bouton
   "Boutique" en importance visuelle. */
.site-header__cart-icon {
    width: 32px;
    height: 32px;
}

.site-header__cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid var(--universim-black);
    border-radius: 999px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}

/* Utilitaire standard WordPress : masque visuellement un texte tout en le
   gardant lisible par les lecteurs d'écran (bouton chevron des sous-menus). */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------
   Sous-menus déroulants du header — "Globtel" et "Mon compte"
   (voir Universim_Nav_Walker dans functions.php). Même identité pour
   les deux : fond légèrement différencié du noir, bordure or fine,
   coins arrondis, glow discret uniquement au hover.
   -------------------------------------------------------------------- */
.site-nav__item--has-dropdown {
    position: relative;
}

.site-nav__parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--universim-white);
    cursor: pointer;
    border-radius: 6px;
}

.site-nav__toggle:hover,
.site-nav__toggle:focus-visible {
    color: var(--universim-gold);
}

.site-nav__chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.site-nav__item--has-dropdown:hover .site-nav__chevron,
.site-nav__item--has-dropdown:focus-within .site-nav__chevron,
.site-nav__item--has-dropdown.is-open .site-nav__chevron {
    transform: rotate(180deg);
}

.site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    margin: 14px 0 0;
    padding: 10px;
    min-width: 200px;
    list-style: none;
    background-color: var(--universim-footer-bg);
    border: 1px solid color-mix(in srgb, var(--universim-gold) 35%, transparent);
    border-radius: 12px;
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Pont invisible entre le lien et le panneau : évite de perdre le hover
   dans l'espace vertical qui les sépare. */
.site-nav__dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.site-nav__item--has-dropdown:hover .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within .site-nav__dropdown,
.site-nav__item--has-dropdown.is-open .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__dropdown-item {
    margin: 0;
}

.site-nav__dropdown-item a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--universim-white);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--universim-transition), background-color var(--universim-transition);
}

.site-nav__dropdown-item a:hover,
.site-nav__dropdown-item a:focus-visible {
    color: var(--universim-gold);
    background-color: rgba(245, 179, 1, 0.08);
}

.site-nav__dropdown-item--logout {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-nav__dropdown-item--logout a {
    color: rgba(255, 255, 255, 0.6);
}

.site-nav__dropdown-item--logout a:hover,
.site-nav__dropdown-item--logout a:focus-visible {
    color: var(--universim-gold);
    background-color: transparent;
}

/* État actif (current-menu-item ajouté par Universim_Nav_Walker) : la
   règle existante cible un enfant direct ("> a"), qui ne correspond plus
   ici puisque le lien est imbriqué dans .site-nav__parent. */
.site-nav__list .current-menu-item .site-nav__parent-link {
    color: var(--universim-gold);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background-color: var(--universim-footer-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 48px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--universim-white);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--universim-footer-text);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--universim-transition);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: var(--universim-gold);
}

.site-footer__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   Footer — base responsive (empilement simple)
   ========================================================================== */
@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 24px 32px;
    }
}

/* ==========================================================================
   Pages légales (template-legal.php)
   ========================================================================== */
.legal-page__container {
    max-width: 880px;
    margin: 0 auto;
    padding: 72px 24px 96px;
}

.legal-page__header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-page__title {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    color: var(--universim-white);
}

.legal-page__content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.legal-page__content h2 {
    margin: 48px 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: var(--universim-white);
}

.legal-page__content h3 {
    margin: 32px 0 12px;
    font-size: 19px;
    font-weight: 600;
    color: var(--universim-white);
}

.legal-page__content p {
    margin: 0 0 20px;
}

.legal-page__content ul,
.legal-page__content ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.legal-page__content li {
    margin-bottom: 8px;
}

.legal-page__content a {
    color: var(--universim-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--universim-transition);
}

.legal-page__content a:hover,
.legal-page__content a:focus-visible {
    color: var(--universim-gold-hover);
}

.legal-page__content strong {
    color: var(--universim-white);
    font-weight: 600;
}

.legal-page__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
}

.legal-page__content th,
.legal-page__content td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-page__content th {
    color: var(--universim-white);
    font-weight: 600;
}

/* ==========================================================================
   Pages légales — base responsive
   ========================================================================== */
@media (max-width: 768px) {
    .legal-page__container {
        padding: 48px 20px 64px;
    }

    .legal-page__title {
        font-size: 28px;
    }
}

/* ==========================================================================
   Page FAQ (template-faq.php)
   ========================================================================== */
.faq-page__container {
    max-width: 880px;
    margin: 0 auto;
    padding: 72px 24px 96px;
}

.faq-page__header {
    margin-bottom: 48px;
}

.faq-page__title {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 600;
    color: var(--universim-white);
}

.faq-page__intro {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.faq-category {
    margin-bottom: 56px;
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category__title {
    margin: 0 0 20px;
    padding-left: 14px;
    border-left: 3px solid var(--universim-gold);
    font-size: 22px;
    font-weight: 600;
    color: var(--universim-white);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    transition: border-color var(--universim-transition);
}

.faq-item:hover {
    border-color: rgba(245, 179, 1, 0.5);
}

.faq-item.is-open {
    border-color: var(--universim-gold);
}

.faq-item__heading {
    margin: 0;
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--universim-white);
    text-align: left;
    cursor: pointer;
    transition: color var(--universim-transition);
}

.faq-item__trigger:hover,
.faq-item__trigger:focus-visible {
    color: var(--universim-gold);
}

.faq-item.is-open .faq-item__trigger {
    color: var(--universim-gold);
}

.faq-item__question {
    flex: 1 1 auto;
}

/* Icône "+" en CSS pur, devient "–" quand la question est ouverte */
.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--universim-transition);
}

.faq-item__icon::before {
    width: 12px;
    height: 2px;
}

.faq-item__icon::after {
    width: 2px;
    height: 12px;
}

.faq-item.is-open .faq-item__icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* Panneau de réponse : hauteur pilotée en JS (max-height), transition ici */
.faq-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item__answer {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.faq-item__answer p {
    margin: 0;
}

/* ==========================================================================
   Page FAQ — base responsive
   ========================================================================== */
@media (max-width: 768px) {
    .faq-page__container {
        padding: 48px 20px 64px;
    }

    .faq-page__title {
        font-size: 28px;
    }

    .faq-item__trigger {
        padding: 16px;
        font-size: 15px;
    }

    .faq-item__answer {
        padding: 0 16px 16px;
    }
}

/* ==========================================================================
   Page Contact (template-contact.php)
   ========================================================================== */
.contact-page__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 96px;
}

.contact-page__intro {
    margin-bottom: 56px;
}

.contact-page__title {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 600;
    color: var(--universim-white);
}

.contact-page__lead {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

/* Deux colonnes : coordonnées (largeur fixe raisonnable) + formulaire (reste) */
.contact-section {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 80px;
}

.contact-info__title {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--universim-white);
}

.contact-info__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--universim-footer-text);
}

.contact-info__item a {
    color: var(--universim-footer-text);
    text-decoration: none;
    transition: color var(--universim-transition);
}

.contact-info__item a:hover,
.contact-info__item a:focus-visible {
    color: var(--universim-gold);
}

.contact-info__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--universim-gold);
}

.contact-info__icon svg {
    width: 100%;
    height: 100%;
}

/* Formulaire */
.contact-form__notice {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-form__notice--success {
    background-color: rgba(245, 179, 1, 0.12);
    border: 1px solid var(--universim-gold);
    color: var(--universim-white);
}

.contact-form__notice--error {
    background-color: rgba(255, 90, 90, 0.08);
    border: 1px solid rgba(255, 90, 90, 0.5);
    color: var(--universim-white);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form__field--hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__field label {
    font-size: 14px;
    color: var(--universim-footer-text);
}

.contact-form__field input,
.contact-form__field textarea {
    background-color: var(--universim-field-bg);
    border: 1px solid var(--universim-field-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--universim-white);
    transition: border-color var(--universim-transition), box-shadow var(--universim-transition);
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 160px;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.contact-form__field input:hover,
.contact-form__field textarea:hover {
    border-color: rgba(245, 179, 1, 0.4);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--universim-gold);
    box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.15);
}

.contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--universim-footer-text);
}

.contact-form__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--universim-gold);
}

.contact-form__consent a {
    color: var(--universim-gold);
    text-decoration: underline;
    transition: color var(--universim-transition);
}

.contact-form__consent a:hover,
.contact-form__consent a:focus-visible {
    color: var(--universim-gold-hover);
}

.contact-form__submit {
    align-self: flex-start;
    padding: 14px 32px;
    border: none;
    border-radius: 999px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--universim-transition);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
    background-color: var(--universim-gold-hover);
}

/* Carte */
.contact-map-section__title {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 3px solid var(--universim-gold);
    font-size: 22px;
    font-weight: 600;
    color: var(--universim-white);
}

.contact-map-section__address {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--universim-footer-text);
}

.contact-map {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background-color: #0a0a0a;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ==========================================================================
   Page Contact — base responsive
   ========================================================================== */
@media (max-width: 768px) {
    .contact-page__container {
        padding: 48px 20px 64px;
    }

    .contact-page__title {
        font-size: 28px;
    }

    .contact-map-section__title {
        font-size: 20px;
    }

    .contact-map iframe {
        height: 300px;
    }
}

/* En dessous de 768px, le tableau reste 2 colonnes (tablette) : on ne
   passe en 1 colonne qu'à partir de 640px, une fois l'espace vraiment
   insuffisant pour coordonnées + formulaire côte à côte. */
@media (max-width: 640px) {
    .contact-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Page Suggestions (template-suggestions.php)
   ========================================================================== */
.suggestion-page__container {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px 96px;
}

.suggestion-page__intro {
    margin-bottom: 48px;
}

.suggestion-page__title {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 600;
    color: var(--universim-white);
}

.suggestion-page__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.suggestion-form-wrap {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 40px;
}

.suggestion-form__notice {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.suggestion-form__notice--success {
    background-color: rgba(245, 179, 1, 0.12);
    border: 1px solid var(--universim-gold);
    color: var(--universim-white);
}

.suggestion-form__notice--error {
    background-color: rgba(255, 90, 90, 0.08);
    border: 1px solid rgba(255, 90, 90, 0.5);
    color: var(--universim-white);
}

.suggestion-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.suggestion-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-form__field--hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Champ "Si autre, précisez" : masqué tant que la zone n'est pas "Autre".
   display:none le retire entièrement de la mise en page, de la navigation
   clavier et de l'arbre d'accessibilité. */
.suggestion-form__zone-autre--hidden {
    display: none;
}

.suggestion-form__field > label {
    font-size: 14px;
    color: var(--universim-footer-text);
}

.suggestion-form__field input[type="email"],
.suggestion-form__field input[type="text"],
.suggestion-form__field select,
.suggestion-form__field textarea {
    background-color: var(--universim-field-bg);
    border: 1px solid var(--universim-field-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--universim-white);
    transition: border-color var(--universim-transition), box-shadow var(--universim-transition);
}

.suggestion-form__field textarea {
    resize: vertical;
    min-height: 160px;
}

.suggestion-form__hint {
    margin: -2px 0 2px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.suggestion-form__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5B301' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.suggestion-form__field input::placeholder,
.suggestion-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.suggestion-form__field input:hover,
.suggestion-form__field select:hover,
.suggestion-form__field textarea:hover {
    border-color: rgba(245, 179, 1, 0.4);
}

.suggestion-form__field input:focus,
.suggestion-form__field select:focus,
.suggestion-form__field textarea:focus {
    outline: none;
    border-color: var(--universim-gold);
    box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.15);
}

/* Groupe de choix "Consommation" */
.suggestion-form__fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.suggestion-form__legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--universim-footer-text);
}

.suggestion-form__radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.suggestion-form__radio-option {
    position: relative;
}

.suggestion-form__radio-option input[type="radio"] {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 16px;
    height: 16px;
    accent-color: var(--universim-gold);
}

.suggestion-form__radio-option label {
    display: block;
    padding: 14px 14px 14px 38px;
    background-color: var(--universim-field-bg);
    border: 1px solid var(--universim-field-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--universim-white);
    cursor: pointer;
    transition: border-color var(--universim-transition), background-color var(--universim-transition);
}

.suggestion-form__radio-option label:hover {
    border-color: rgba(245, 179, 1, 0.5);
}

.suggestion-form__radio-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--universim-gold);
    outline-offset: 2px;
}

.suggestion-form__radio-option input[type="radio"]:checked + label {
    border-color: var(--universim-gold);
    background-color: rgba(245, 179, 1, 0.1);
    color: var(--universim-white);
}

.suggestion-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--universim-footer-text);
}

.suggestion-form__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--universim-gold);
}

.suggestion-form__consent a {
    color: var(--universim-gold);
    text-decoration: underline;
    transition: color var(--universim-transition);
}

.suggestion-form__consent a:hover,
.suggestion-form__consent a:focus-visible {
    color: var(--universim-gold-hover);
}

.suggestion-form__submit {
    align-self: flex-start;
    padding: 14px 32px;
    border: none;
    border-radius: 999px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--universim-transition);
}

.suggestion-form__submit:hover,
.suggestion-form__submit:focus-visible {
    background-color: var(--universim-gold-hover);
}

/* ==========================================================================
   Page Suggestions — base responsive
   ========================================================================== */
@media (max-width: 768px) {
    .suggestion-page__container {
        padding: 48px 20px 64px;
    }

    .suggestion-page__title {
        font-size: 28px;
    }

    .suggestion-form-wrap {
        padding: 24px;
    }

    .suggestion-form__radio-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Accueil — Hero (front-page.php + template-parts/home/hero.php)
   ========================================================================== */
.home-hero {
    position: relative;
    overflow: hidden;
    background-color: #000000;
    /* Légère respiration sous le header (déplace toute la section — texte
       + main en position absolue — d'un même mouvement, sans toucher à
       leur relation interne), nettement plus faible qu'un écart entre deux
       sections de contenu. */
    margin-top: clamp(20px, 2vw, 32px);
}

.home-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px 48px 0;
}

.home-hero__content {
    max-width: 560px;
}

.home-hero__title {
    margin: 0 0 24px;
    font-size: 44px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--universim-white);
}

.home-hero__accent {
    color: var(--universim-gold);
}

.home-hero__text {
    margin: 0 0 36px;
    max-width: 480px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.home-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.home-hero__cta--primary {
    padding: 14px 32px;
    border-radius: 999px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--universim-transition);
}

.home-hero__cta--primary:hover,
.home-hero__cta--primary:focus-visible {
    background-color: var(--universim-gold-hover);
}

.home-hero__cta--secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    color: var(--universim-white);
    font-size: 16px;
    text-decoration: none;
    transition: color var(--universim-transition);
}

.home-hero__cta--secondary:hover,
.home-hero__cta--secondary:focus-visible {
    color: var(--universim-gold);
}

.home-hero__cta-arrow {
    transition: transform var(--universim-transition);
}

.home-hero__cta--secondary:hover .home-hero__cta-arrow,
.home-hero__cta--secondary:focus-visible .home-hero__cta-arrow {
    transform: translateX(4px);
}

/* Fenêtre de cadrage : ancrée au bord droit du viewport. Sa largeur suit
   la même pente que le retrait du bloc texte (voir palier ≤1280px), afin
   que l'écart visuel entre le texte et la main reste constant à toutes
   les largeurs — elle ne fait que révéler plus ou moins de carte/réseau
   à droite, sans jamais déplacer la main/le téléphone. */
.home-hero__visual {
    position: absolute;
    z-index: 1;
    top: 96px;
    right: 0;
    width: clamp(722px, calc(50vw + 222px), 1600px);
    height: clamp(496px, 12.4vw, 574px);
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

/* Image ancrée au bord GAUCHE de la fenêtre (la main/le téléphone
   occupent maintenant les premiers ~35% de l'asset) avec une largeur
   quasi fixe : c'est elle qui fixe la taille visuelle du sujet,
   indépendamment de la largeur de la fenêtre ci-dessus. */
.home-hero__visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(1600px, 40vw, 1850px);
    height: auto;
}

.home-hero__perks {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 24px auto 0;
    padding: 32px 48px;
    display: flex;
    gap: 40px;
    border: 2px solid rgba(245, 179, 1, 0.35);
    border-radius: 24px;
    background-color: #000000;
}

.home-hero__perk {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0;
}

/* Zone d'affichage commune : chaque picto conserve son ratio natif
   (width/height auto + object-fit: contain), aucune déformation. */
.home-hero__perk-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.home-hero__perk-icon {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.home-hero__perk-title {
    margin: 0 0 6px;
    color: var(--universim-white);
    font-size: 17px;
    font-weight: 600;
}

.home-hero__perk-text {
    margin: 0;
    color: var(--universim-footer-text);
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   Accueil — Hero — base responsive
   ========================================================================== */
/* En-dessous de 1280px, la fenêtre de cadrage (ancrée à droite, largeur
   ~50vw) et la colonne de texte (ancrée à gauche, padding réduit à 32px)
   perdent l'écart constant qui les sépare sur grand écran : la main/le
   téléphone finissent par passer sous le texte. On bascule donc, avant ce
   chevauchement, sur la composition empilée déjà conçue pour garder le
   sujet grand (cadrage "cover" + object-position), au lieu de comprimer
   une disposition horizontale qui n'a plus la place. */
@media (max-width: 1280px) {
    .home-hero__inner {
        padding: 56px 20px 32px;
    }

    .home-hero__content {
        max-width: 100%;
    }

    .home-hero__title {
        font-size: 28px;
    }

    .home-hero__text {
        max-width: 100%;
        font-size: 15px;
    }

    /* Fenêtre de cadrage "cover" + object-position, jamais width:100%/
       height:auto qui réduirait la main/le téléphone à une vignette.
       Alignée sur le même gutter que le texte (calc(100% - 40px) +
       margin:auto), au lieu de toucher les bords de l'écran.
       max-width : au-delà de ~1000px, cette fenêtre devient proportion-
       nellement plus large que l'image réelle (2989×927) — object-fit:
       cover cesse alors de rogner horizontalement (il rogne en hauteur à
       la place) et l'object-position horizontal n'a plus aucun effet : la
       main se retrouve minuscule, noyée dans toute la largeur de l'asset
       au lieu d'être cadrée serré dessus. Le plafond garde le rognage
       horizontal actif à toutes les largeurs de ce palier. */
    .home-hero__visual {
        position: relative;
        width: calc(100% - 40px);
        max-width: 960px;
        height: clamp(240px, 76vw, 320px);
        margin: 32px auto 0;
        overflow: hidden;
        mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    }

    .home-hero__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        /* Main/téléphone/halo occupent le premier tiers gauche de l'asset. */
        object-position: 10% 45%;
    }
}

@media (max-width: 768px) {
    .home-hero__perks {
        flex-direction: column;
        gap: 24px;
        margin-top: 32px;
        padding: 24px 20px;
    }
}

/* ==========================================================================
   Accueil — 5G (front-page.php + template-parts/home/5g.php)
   ========================================================================== */
.home-5g {
    position: relative;
    background-color: #000000;
    padding-top: clamp(80px, 8vw, 160px);
}

/* Regroupe uniquement l'illustration + le bloc texte (pas les avantages),
   afin que le centrage vertical de l'image se fasse par rapport au bloc
   éditorial seul, pas par rapport à toute la section. */
.home-5g__top {
    position: relative;
    overflow: hidden;
}

.home-5g__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 154px 48px 0;
    display: flex;
    justify-content: flex-end;
}

.home-5g__content {
    max-width: 560px;
}

.home-5g__title {
    margin: 0 0 24px;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    color: var(--universim-gold);
}

.home-5g__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.home-5g__discover {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.home-5g__accent {
    color: var(--universim-gold);
}

.home-5g__nowrap {
    white-space: nowrap;
}

/* Fenêtre de cadrage : ancrée à gauche (le texte est à droite dans cette
   section), centrée verticalement sur le bloc texte. Sa largeur s'étend
   jusqu'au bord du texte (même pente que son retrait, palier ≤1280px
   inclus) : sur grand écran elle révèle davantage de carte/décor, sans
   jamais éloigner le "5G" du texte. Un fondu (mask-image) sur les 200
   derniers pixels fait disparaître progressivement l'image avant le
   texte, pour une transition continue plutôt qu'une coupure nette. */
.home-5g__visual {
    position: absolute;
    z-index: 1;
    top: 23px;
    left: 0;
    width: clamp(672px, calc(50vw + 32px), 1400px);
    height: 480px;
    overflow: hidden;
    pointer-events: none;
    mask-image:
        linear-gradient(to right, black 0%, black calc(100% - 200px), transparent 100%),
        linear-gradient(to bottom, black 0%, black calc(100% - 90px), transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, black 0%, black calc(100% - 200px), transparent 100%),
        linear-gradient(to bottom, black 0%, black calc(100% - 90px), transparent 100%);
    -webkit-mask-composite: source-in;
}

/* Image à taille FIXE (comme le Hero) : le "5G" ne doit jamais changer de
   taille selon l'écran. On ignore la fine bande de ciel vide au sommet de
   l'asset (top: -43px) et l'image est positionnée horizontalement pour
   que la fin du bloc lumineux "5G" arrive toujours ~200px avant le bord
   droit de la fenêtre ci-dessus (zone réservée au fondu), donc à distance
   stable du texte, quelle que soit la largeur. */
.home-5g__visual img {
    position: absolute;
    top: -43px;
    left: clamp(-776px, calc(50vw - 1416px), -48px);
    width: 2800px;
    height: auto;
}

@media (max-width: 1280px) {
    .home-5g__visual {
        width: clamp(510px, calc(100vw - 608px), 672px);
    }

    .home-5g__visual img {
        left: clamp(-938px, calc(100vw - 2056px), -776px);
    }
}

.home-5g__perks {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: clamp(32px, 4vw, 64px) auto 0;
    padding: 0 48px 64px;
    display: flex;
    gap: 40px;
}

.home-5g__perk {
    flex: 1 1 0;
    text-align: center;
}

/* Zone d'affichage commune : chaque picto conserve son ratio natif
   (width/height auto + object-fit: contain), aucune déformation. */
.home-5g__perk-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin: 0 auto 20px;
}

.home-5g__perk-icon {
    display: block;
    width: auto;
    height: auto;
    max-width: 70px;
    max-height: 100%;
    object-fit: contain;
}

.home-5g__perk-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--universim-gold);
}

.home-5g__perk-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--universim-footer-text);
}

/* En-dessous de 1024px, la fenêtre de cadrage horizontale (clampée à sa
   largeur plancher de 510px dès ~1118px) finit par faire déborder le bloc
   lumineux "5G" (fin du bloc ~200px avant le bord droit de la fenêtre,
   cf. .home-5g__visual ci-dessus) sur la zone de texte : le chevauchement
   démarre concrètement vers ~918px. On bascule donc sur la composition
   empilée (image au-dessus du texte) avant ce point de collision, avec
   une marge de sécurité, plutôt que d'attendre que ça se superpose. */
@media (max-width: 1024px) {
    .home-5g__inner {
        justify-content: flex-start;
        padding: 56px 20px 32px;
    }

    .home-5g__content {
        max-width: 100%;
    }

    .home-5g__title {
        font-size: 28px;
        text-align: left;
    }

    /* Le "5G" doit rester un élément graphique majeur : fenêtre de
       cadrage "cover" (au lieu de réduire tout l'asset), alignée sur le
       même gutter que le texte. */
    .home-5g__visual {
        position: relative;
        transform: none;
        width: calc(100% - 40px);
        height: clamp(220px, 66vw, 280px);
        margin: 0 auto 24px;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }

    .home-5g__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        /* "5G" + ville + route sont centrés horizontalement dans l'asset. */
        object-position: 38% 55%;
    }
}

@media (max-width: 768px) {
    .home-5g__perks {
        flex-direction: column;
        gap: 32px;
        padding: 0 20px 40px;
    }
}

/* ==========================================================================
   Accueil — Découvrez notre 5G / Bloc 3 (front-page.php + template-parts/home/decouvrez.php)
   ========================================================================== */
/* margin-top : respiration visuelle avant le bloc, déplace la section
   entière (texte + illustration, qui lui est ancrée en position absolue)
   plus bas d'un même mouvement, sans toucher à leur relation interne ni
   au bloc 5G précédent. Réduit de moitié (comme min-height ci-dessous)
   pour rapprocher modérément le bloc de ses deux voisins, sans jamais
   rogner l'illustration (dont le bas réel atteint ~795px dans la
   section : min-height reste nettement au-dessus, avec une marge de
   sécurité). */
.home-decouvrez {
    position: relative;
    overflow: hidden;
    background-color: #000000;
    min-height: 800px;
    margin-top: clamp(60px, 5vw, 100px);
}

.home-decouvrez__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 160px 48px;
}

.home-decouvrez__content {
    max-width: 560px;
}

.home-decouvrez__title {
    margin: 0 0 24px;
    font-size: 44px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--universim-white);
}

.home-decouvrez__accent {
    color: var(--universim-gold);
}

.home-decouvrez__text {
    margin: 0 0 36px;
    max-width: 480px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--universim-footer-text);
}

.home-decouvrez__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid var(--universim-gold);
    border-radius: 12px;
    color: var(--universim-gold);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--universim-transition), border-color var(--universim-transition);
}

.home-decouvrez__cta:hover,
.home-decouvrez__cta:focus-visible {
    color: var(--universim-gold-hover);
    border-color: var(--universim-gold-hover);
}

.home-decouvrez__cta-arrow {
    transition: transform var(--universim-transition);
}

.home-decouvrez__cta:hover .home-decouvrez__cta-arrow,
.home-decouvrez__cta:focus-visible .home-decouvrez__cta-arrow {
    transform: translateX(4px);
}

/* Fenêtre de cadrage : ancrée au bord droit du viewport (comme le Hero),
   avec une image à taille FIXE ancrée au bord GAUCHE de cette fenêtre.
   Mesures réelles de cette version du fichier (4215×2062, vérifiées par
   analyse pixel dans Chrome) : le contenu net (appareils/filaments) ne
   commence vraiment qu'à ~37 % de la largeur et ~49 % de la hauteur — tout
   le reste avant est une marge de fondu quasi nulle. Élargir la fenêtre ne
   fait que révéler davantage la réserve de droite, sans jamais éloigner
   les appareils du texte ni les rapprocher du bord droit de l'écran. */
.home-decouvrez__visual {
    position: absolute;
    z-index: 1;
    top: -489px;
    right: 0;
    width: clamp(1630px, calc(50vw + 996px), 2530px);
    height: 1300px;
    overflow: hidden;
    pointer-events: none;
}

/* Image affichée intégralement (top:0, aucun rognage vertical par ce
   conteneur). Largeur +25 % (2100px -> 2625px) pour une illustration
   nettement plus imposante ; le -489px ci-dessus (recalculé au même ratio)
   reste dans la marge où le fondu est mesuré quasi nul, sans jamais couper
   la zone où il devient perceptible (~47-50 % de la hauteur de l'asset). */
.home-decouvrez__visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: 2625px;
    height: auto;
}

@media (max-width: 1280px) {
    .home-decouvrez__inner {
        padding: 120px 32px;
    }

    .home-decouvrez {
        /* Le pire cas de cadrage sur ce palier (jusqu'à 1280px) atteint
           ~811px : 820px garde une marge de sécurité sans rogner l'image. */
        min-height: 820px;
        margin-top: 50px;
    }

    .home-decouvrez__title {
        font-size: 34px;
    }

    /* Entre 768 et 1280px (tablette, y compris en portrait) : même principe
       qu'en desktop (image à taille FIXE ancrée à gauche d'une fenêtre de
       cadrage ancrée à droite du viewport) plutôt que de réduire tout le
       fichier à la largeur de la colonne — ce dernier a énormément de marge
       transparente, donc le réduire au conteneur rendait les appareils
       minuscules. Ici la taille de l'image (donc des appareils) suit la
       largeur d'écran ; seule la fenêtre change, révélant plus ou moins de
       débordement à droite, jamais moins d'appareils que ce que la place
       disponible permet. Coefficients (+25 %, raccordés à la formule
       desktop à 1280px) et marge de fondu réelle mesurée dans Chrome
       (contenu net à ~37 % largeur / ~49 % hauteur de l'asset). */
    .home-decouvrez__visual {
        top: calc(110px - 46.81vw);
        width: calc(173.24vw - 565.125px);
        height: calc(95.56vw + 77px);
        aspect-ratio: unset;
    }

    .home-decouvrez__visual img {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(195.31vw + 125px);
        height: auto;
        max-width: none;
        object-fit: fill;
    }
}

@media (max-width: 768px) {
    .home-decouvrez {
        min-height: 0;
        margin-top: 32px;
    }

    .home-decouvrez__inner {
        padding: 56px 20px;
    }

    .home-decouvrez__content {
        max-width: 100%;
    }

    .home-decouvrez__title {
        font-size: 28px;
    }

    .home-decouvrez__text {
        max-width: 100%;
        font-size: 15px;
    }

    /* Appareils : fenêtre "cover" plutôt que la réduction complète de
       l'asset (qui a une immense marge transparente). Volontairement plus
       large que le viewport (135vw) et centrée (left:50% + translateX(-50%),
       fonctionne quelle que soit la largeur puisque translateX(-50%) se
       calcule sur la largeur de l'élément lui-même, pas celle du parent) :
       l'illustration était beaucoup trop petite sur mobile (fenêtre "cover"
       trop proche de la taille réelle de l'asset) — un débordement
       horizontal réparti à gauche/à droite, contenu par overflow:hidden sur
       .home-decouvrez (déjà en place, non modifié), donne des appareils
       nettement plus grands sans jamais provoquer de barre de défilement
       horizontale sur la page.

       Spécificité (3 classes) délibérée sur le sélecteur ci-dessous :
       cet élément porte aussi "reveal-right" (apparition au scroll,
       Assets/CSS/home-animations.css), dont la règle ".reveal-right.is-visible
       { transform: translate(0,0) }" (2 classes) écrasait silencieusement
       notre translateX(-50%) une fois l'apparition terminée — l'illustration
       se retrouvait décalée à droite au lieu d'être centrée (bord gauche à
       +206px au lieu de -72px, mesuré dans Chrome), ce qui déplaçait sa zone
       nette hors du cadrage attendu. Non lié au texte ("Pensée pour
       aujourd'hui...", qui reste correctement positionné), mais bien la
       cause du décalage/mauvais cadrage de l'illustration signalé. */
    .home-decouvrez .home-decouvrez__visual.reveal-right {
        position: relative;
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 135vw;
        max-width: none;
        height: clamp(280px, 108vw, 420px);
        margin: 32px auto 0;
        overflow: hidden;
    }

    .home-decouvrez__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        /* Appareils/filaments : contenu net à ~37% largeur / ~49% hauteur
           (mesure déjà utilisée par le palier tablette juste au-dessus). */
        object-position: 58% 66%;
    }
}

/* ==========================================================================
   Accueil — Nos forfaits Globtel / Bloc 4 (front-page.php + template-parts/home/plans.php)
   ========================================================================== */
.home-plans {
    position: relative;
    background-color: var(--universim-black);
    /* padding-top réduit (~46-50%) pour rapprocher la section du bloc
       précédent : c'était la seule source ajustable de cet espacement,
       le bloc précédent (illustration + min-height) restant inchangé. */
    padding: clamp(40px, 4vw, 64px) 48px clamp(56px, 6vw, 88px);
}

.home-plans__header,
.home-plans__grid {
    max-width: 1280px;
    margin: 0 auto;
}

.home-plans__header {
    margin-bottom: clamp(40px, 5vw, 56px);
}

.home-plans__title {
    margin: 0 0 16px;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--universim-white);
}

.home-plans__accent {
    color: var(--universim-gold);
}

.home-plans__subtitle {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--universim-white);
}

.home-plans__text {
    margin: 0;
    max-width: 680px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--universim-footer-text);
}

.home-plans__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* État normal : contour or discret, fond quasi noir (réutilise le token du
   footer), aucun glow. La carte est le repère visuel du survol/état
   "Populaire" ; "Choisir" (ajout au panier) et "+ d'informations" (fiche
   produit) sont les deux éléments focusables au clavier. */
.home-plans__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--universim-footer-bg);
    border: 1px solid rgba(245, 179, 1, 0.35);
    border-radius: 28px;
    padding: 36px 28px;
    transition: border-color var(--universim-transition), box-shadow var(--universim-transition), transform var(--universim-transition);
}

.home-plans__card:hover {
    border-color: rgba(245, 179, 1, 0.75);
    box-shadow: 0 0 28px rgba(245, 179, 1, 0.22);
    transform: translateY(-4px);
}

/* Le forfait 50 GO reste mis en avant même sans survol : contour plus
   lumineux + léger halo permanent, indépendant de l'état hover des autres
   cartes (qui n'affecte jamais cette classe). */
.home-plans__card--popular {
    border-color: rgba(245, 179, 1, 0.85);
    box-shadow: 0 0 26px rgba(245, 179, 1, 0.18);
}

/* Renforce très légèrement le halo existant au survol, sans le doubler. */
.home-plans__card--popular:hover {
    border-color: rgba(245, 179, 1, 0.95);
    box-shadow: 0 0 34px rgba(245, 179, 1, 0.26);
}

.home-plans__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.home-plans__name {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 600;
    color: var(--universim-white);
}

.home-plans__price {
    margin: 0 0 20px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.home-plans__price-amount {
    font-size: 30px;
    font-weight: 700;
    color: var(--universim-gold);
}

.home-plans__price-period {
    font-size: 15px;
    color: var(--universim-footer-text);
}

.home-plans__divider {
    width: 100%;
    height: 1px;
    margin: 0 0 20px;
    border: none;
    background-color: rgba(255, 255, 255, 0.12);
}

.home-plans__features {
    flex: 1 0 auto;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.6;
    color: var(--universim-footer-text);
}

.home-plans__features li {
    margin-bottom: 6px;
}

.home-plans__ctas {
    align-self: flex-start;
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.home-plans__cta {
    display: inline-block;
    padding: 11px 30px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color var(--universim-transition), box-shadow var(--universim-transition);
}

/* Action secondaire, volontairement discrète : jamais en concurrence
   visuelle avec le CTA principal "Choisir" (fond plein, jaune). */
.home-plans__more-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color var(--universim-transition);
}

.home-plans__more-info:hover,
.home-plans__more-info:focus-visible {
    color: var(--universim-gold);
}

/* Léger renforcement quand on survole la carte (pas seulement le bouton). */
.home-plans__card:hover .home-plans__cta {
    box-shadow: 0 0 12px rgba(245, 179, 1, 0.35);
}

.home-plans__cta:hover,
.home-plans__cta:focus-visible {
    background-color: var(--universim-gold-hover);
    box-shadow: 0 0 14px rgba(245, 179, 1, 0.45);
}

.home-plans__cta:focus-visible {
    outline: 2px solid var(--universim-gold-hover);
    outline-offset: 3px;
}

.home-plans__info {
    max-width: 1280px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    font-size: 13px;
    color: var(--universim-footer-text);
}

.home-plans__info span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 14px;
    border-radius: 50%;
    background-color: var(--universim-gold);
    vertical-align: middle;
}

@media (max-width: 1100px) {
    .home-plans__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 820px) {
    .home-plans {
        padding: 56px 20px 48px;
    }

    .home-plans__title {
        font-size: 30px;
    }

    .home-plans__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 560px) {
    .home-plans__title {
        font-size: 26px;
    }

    .home-plans__subtitle {
        font-size: 19px;
    }

    .home-plans__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-plans__card {
        padding: 32px 24px;
    }

    .home-plans__info {
        padding: 0 12px;
    }
}

/* ==========================================================================
   Accueil — Une couverture qui vous accompagne partout / Bloc 5 partie A
   (front-page.php + template-parts/home/couverture.php)
   ========================================================================== */
/* min-height + flex centre verticalement .home-couverture__inner sur la
   hauteur de la fenêtre de cadrage (680px), sans avoir à recalculer un
   padding-top à la main si le texte change légèrement de hauteur. */
.home-couverture {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 680px;
    background-color: var(--universim-black);
    margin-top: clamp(60px, 5vw, 100px);
}

/* Fenêtre de cadrage : ancrée au bord GAUCHE du viewport (largeur qui suit
   50vw, comme le Hero/5G/Découvrez), pour donner l'impression que
   l'illustration s'étend vers la gauche de l'écran sur les grands écrans,
   tout en garantissant une largeur plancher (760px) qui montre toujours la
   France en entier.
   mask-image fait disparaître progressivement les bords gauche/droit/bas
   de la fenêtre (là où overflow:hidden coupe net) pour se fondre dans le
   noir du site, sans jamais réduire l'opacité de la France elle-même (le
   fondu ne mord que sur les marges de l'asset, pas sur son sujet). */
.home-couverture__visual {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: clamp(840px, calc(50vw + 52px), 2400px);
    height: 680px;
    overflow: hidden;
    pointer-events: none;
    mask-image:
        linear-gradient(to right, transparent 0, black 70px, black calc(100% - 45px), transparent 100%),
        linear-gradient(to bottom, black 0, black calc(100% - 70px), transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, black 70px, black calc(100% - 45px), transparent 100%),
        linear-gradient(to bottom, black 0, black calc(100% - 70px), transparent 100%);
    -webkit-mask-composite: source-in;
}

/* Image à taille FIXE, légèrement réduite (1700px, contre 1900px avant)
   pour redonner un peu plus d'importance au texte. top/right recalculés
   pour ce nouveau format afin de garder la France centrée dans la même
   fenêtre (680px) et la même proximité avec le texte qu'avant — ni la
   fenêtre ni sa formule de largeur (donc l'écart avec le texte) n'ont
   changé, seule l'image qu'elle affiche est plus petite. */
.home-couverture__visual img {
    position: absolute;
    top: -79px;
    right: -135px;
    width: 1700px;
    height: auto;
}

.home-couverture__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: flex-end;
}

.home-couverture__content {
    max-width: 500px;
}

.home-couverture__title {
    margin: 0 0 24px;
    font-size: 42px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--universim-white);
}

.home-couverture__text {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: var(--universim-footer-text);
}

/* En-dessous de 1280px, la fenêtre de cadrage (clampée à sa largeur
   plancher de 840px dès ~1576px) place la France à une distance fixe du
   bord droit du viewport, alors que la colonne de texte (justify-content:
   flex-end, max-width 500px) continue de rétrécir : le chevauchement
   démarre concrètement vers ~1200px. On bascule donc sur la composition
   empilée (image au-dessus du texte) avant ce point de collision, avec
   une marge de sécurité, plutôt que d'attendre que la France passe sous
   le texte. */
@media (max-width: 1280px) {
    .home-couverture {
        display: block;
        min-height: 0;
        margin-top: 32px;
        padding: 40px 20px 0;
    }

    /* La France doit rester grande : fenêtre "cover" plutôt que la
       réduction complète de l'asset (qui a une large marge noire à
       gauche). margin:auto centre la fenêtre horizontalement dans la
       section.
       max-width : au-delà de ~1070px de large pour 320px de haut, la
       fenêtre devient proportionnellement plus large que l'image réelle
       (2334×1086) — object-fit: cover cesse alors de rogner horizontale-
       ment (il rogne en hauteur à la place) et l'object-position
       horizontal (68%) n'a plus aucun effet : la France se retrouve
       plaquée à gauche/droite au lieu d'être centrée. Le plafond garde le
       rognage horizontal actif, donc le centrage réel, à toutes les
       largeurs de ce palier. */
    .home-couverture__visual {
        position: relative;
        width: calc(100% - 40px);
        max-width: 680px;
        height: clamp(240px, 78vw, 320px);
        margin: 0 auto 24px;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }

    .home-couverture__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        /* France + Corse occupent la partie droite de l'asset (large marge
           noire à gauche, réservée pour le cadrage responsive). */
        object-position: 68% 50%;
    }

    .home-couverture__inner {
        padding: 0 20px;
    }

    .home-couverture__content {
        max-width: 100%;
    }

    .home-couverture__title {
        font-size: 28px;
    }

    .home-couverture__text {
        font-size: 15px;
    }
}

/* ==========================================================================
   Accueil — Comment ça fonctionne ? / Bloc 5 partie B
   (front-page.php + template-parts/home/comment-ca-fonctionne.php)
   ========================================================================== */
.home-parcours {
    background-color: var(--universim-black);
    /* Respiration modérée avec la partie A juste au-dessus : les deux
       appartiennent au même bloc, donc nettement plus faible que l'écart
       entre deux grandes sections. */
    margin-top: clamp(28px, 3vw, 40px);
    padding: 0 48px clamp(64px, 7vw, 96px);
}

.home-parcours__title {
    max-width: 1500px;
    margin: 0 auto 40px;
    color: var(--universim-gold);
    font-size: 42px;
    font-weight: 600;
}

/* justify-content: space-between (plutôt que center + petit gap) fait
   occuper au parcours toute sa largeur disponible, au lieu de rester
   regroupé au centre. max-width élargi (1500px, contre 1280px pour le
   reste du site) : des pictogrammes à cette taille ont besoin de plus de
   place pour respirer sans créer d'immenses trous. */
.home-parcours__steps {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 6px;
}

.home-parcours__step {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.home-parcours__step-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(245, 179, 1, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Taille pilotée uniquement ici : largeur fixe + hauteur automatique,
   aucune déformation possible du tracé (viewBox carré, ratio natif
   conservé). */
.home-parcours__step-icon {
    width: 52px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    color: var(--universim-gold);
}

.home-parcours__step-number {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border: 2px solid var(--universim-black);
    border-radius: 50%;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.home-parcours__step-text {
    margin: 0;
    max-width: 140px;
    font-size: 18px;
    line-height: 1.35;
    color: var(--universim-white);
}

.home-parcours__arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: var(--universim-gold);
}

/* En-dessous de 1600px, les 9 éléments (5 étapes + 4 flèches) ne tiennent
   plus systématiquement sur une seule ligne dans les 1500px de large :
   justify-content: space-between (ci-dessus) répartit alors l'espace
   restant ligne par ligne — une dernière ligne ne contenant que peu
   d'éléments (typiquement les étapes 4 et 5 isolées) se retrouve étirée
   avec un vide énorme entre elles. On passe donc à un gap fixe qui ne
   redistribue jamais l'espace libre. Les flèches n'ont alors plus de sens
   dès qu'un retour à la ligne peut les séparer de l'étape qu'elles
   visent : on les masque (les numéros 1 à 5 sur chaque bulle suffisent à
   indiquer l'ordre), comme en mobile où elles reviennent — alignées
   verticalement sur une colonne unique, sans ambiguïté possible. */
@media (max-width: 1600px) {
    .home-parcours__steps {
        justify-content: center;
        gap: 32px 32px;
    }

    .home-parcours__arrow {
        display: none;
    }
}

@media (max-width: 1100px) {
    .home-parcours__steps {
        gap: 20px 10px;
    }

    .home-parcours__step-icon-wrap {
        width: 80px;
        height: 80px;
    }

    .home-parcours__step-icon {
        width: 40px;
    }

    .home-parcours__step-number {
        width: 28px;
        height: 28px;
        font-size: 14px;
        line-height: 24px;
    }

    .home-parcours__arrow {
        width: 28px;
        height: 28px;
    }

    .home-parcours__step-text {
        max-width: 120px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .home-parcours {
        margin-top: 24px;
        padding: 0 20px clamp(48px, 8vw, 72px);
    }

    .home-parcours__title {
        font-size: 30px;
        margin-bottom: 28px;
    }

    .home-parcours__steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .home-parcours__step {
        width: 100%;
    }

    .home-parcours__step-text {
        max-width: none;
    }

    /* La colonne unique lève toute ambiguïté : la flèche revient (masquée
       par le palier ≤1600px ci-dessus) et redevient verticale entre deux
       étapes empilées. */
    .home-parcours__arrow {
        display: block;
        align-self: center;
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   Accueil — Pourquoi choisir universim ? / Bloc 6
   (front-page.php + template-parts/home/avantages-universim.php)
   ========================================================================== */
.home-pourquoi {
    position: relative;
    background-color: var(--universim-black);
    /* Respiration avec le Bloc 5 : valeur inchangée, déjà validée. */
    margin-top: clamp(56px, 5vw, 90px);
}

/* Même largeur générale que "Comment ça fonctionne ?" (.home-parcours,
   max-width:1500px) pour une occupation horizontale cohérente entre les
   deux sections — padding identique (48px) à celui des autres grandes
   sections. flex-row avec align-items:center rapproche naturellement le
   titre de l'image. gap légèrement augmenté (56px, contre 48px) pour une
   respiration un peu plus marquée avec l'image. */
.home-pourquoi__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 56px 48px;
    display: flex;
    align-items: center;
    gap: 72px;
}

/* Fenêtre de cadrage à taille fixe, réduite d'environ 10% (520→468px) pour
   redonner un peu plus de place au contenu, tout en restant un élément
   important de la composition. object-fit: cover + object-position
   "left" affiche uniquement la partie gauche nette de la photo (la
   femme), sans jamais déformer l'image. mask-image ajoute une fonte
   propre sur son bord droit vers le noir de la section. */
.home-pourquoi__visual {
    flex: 0 0 468px;
    width: 468px;
    height: 396px;
    overflow: hidden;
    mask-image: linear-gradient(to right, black 0%, black 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 65%, transparent 100%);
}

.home-pourquoi__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.home-pourquoi__content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Cadre OUVERT (haut + bas uniquement, jamais de bordure complète) :
   les deux traits débordent vers la gauche (dans l'espace entre l'image
   et le contenu, sans jamais l'atteindre) pour donner l'impression de
   prolonger l'image, puis traversent presque toute la largeur du
   contenu avant de s'effacer en douceur — pleins à gauche, ils perdent
   en opacité vers la droite plutôt que de s'arrêter net. */
.home-pourquoi__content::before,
.home-pourquoi__content::after {
    content: '';
    position: absolute;
    left: -60px;
    right: 24px;
    height: 1px;
    background: linear-gradient(to right, var(--universim-gold) 0%, rgba(245, 179, 1, 0.55) 75%, transparent 100%);
    pointer-events: none;
}

.home-pourquoi__content::before {
    top: -28px;
}

.home-pourquoi__content::after {
    bottom: -28px;
}

/* Léger accent doré (petit trait), au lieu d'un gros halo. */
.home-pourquoi__title {
    position: relative;
    display: inline-block;
    margin: 0 0 32px;
    padding-bottom: 14px;
    font-size: 44px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--universim-white);
}

.home-pourquoi__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--universim-gold);
}

/* Liste à une colonne (3 avantages) : évite la cellule vide qu'un
   grid 2x2 laisserait avec un nombre impair d'éléments. */
.home-pourquoi__features {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.home-pourquoi__feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.home-pourquoi__feature-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Petite montée au survol (transform uniquement : ne change jamais
       la taille de la boîte ni ne déplace les éléments voisins). */
    transition: transform var(--universim-transition);
}

/* Halo doré local et très discret, propre à chaque pictogramme (pas une
   grande lumière traversant la section). Légèrement renforcé au survol
   du bloc "avantage" (voir .home-pourquoi__feature:hover ci-dessous). */
.home-pourquoi__feature-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 179, 1, 0.1), transparent 72%);
    transition: background var(--universim-transition);
}

.home-pourquoi__feature:hover .home-pourquoi__feature-icon-wrap {
    transform: translateY(-3px) scale(1.02);
}

.home-pourquoi__feature:hover .home-pourquoi__feature-icon-wrap::before {
    background: radial-gradient(circle, rgba(245, 179, 1, 0.34), transparent 72%);
}

/* Hauteur pilotée uniquement ici, largeur automatique : chaque picto
   conserve son ratio natif, aucune déformation. */
.home-pourquoi__feature-icon {
    position: relative;
    display: block;
    width: auto;
    height: 82px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: filter var(--universim-transition);
}

/* Halo local (drop-shadow suit le contour du pictogramme, pas un bloc
   rectangulaire) + légère hausse de luminosité — reste discret, jamais
   agressif. */
.home-pourquoi__feature:hover .home-pourquoi__feature-icon {
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(245, 179, 1, 0.45));
}

.home-pourquoi__feature-title {
    position: relative;
    display: inline-block;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--universim-white);
    transition: color var(--universim-transition);
}

.home-pourquoi__feature:hover .home-pourquoi__feature-title {
    color: var(--universim-gold);
}

/* Fine ligne dorée, courte, qui se déploie de gauche à droite au survol
   (scaleX plutôt qu'une largeur animée : plus fluide, jamais de "gros
   soulignement" puisque sa largeur reste fixe et modeste). */
.home-pourquoi__feature-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 28px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--universim-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--universim-transition);
}

.home-pourquoi__feature:hover .home-pourquoi__feature-title::after {
    transform: scaleX(1);
}

.home-pourquoi__feature-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--universim-footer-text);
}

@media (max-width: 1200px) {
    .home-pourquoi__inner {
        gap: 56px;
    }

    .home-pourquoi__content::before,
    .home-pourquoi__content::after {
        left: -44px;
    }

    .home-pourquoi__visual {
        flex-basis: 378px;
        width: 378px;
        height: 342px;
    }

    .home-pourquoi__title {
        font-size: 38px;
    }

    .home-pourquoi__feature-icon-wrap {
        width: 78px;
        height: 78px;
    }

    .home-pourquoi__feature-icon {
        height: 72px;
    }
}

@media (max-width: 1024px) {
    .home-pourquoi__inner {
        padding: 48px 32px;
        gap: 44px;
    }

    .home-pourquoi__content::before,
    .home-pourquoi__content::after {
        left: -32px;
    }

    .home-pourquoi__visual {
        flex-basis: 324px;
        width: 324px;
        height: 306px;
    }

    .home-pourquoi__title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .home-pourquoi__features {
        gap: 22px;
    }

    .home-pourquoi__feature-icon-wrap {
        width: 64px;
        height: 64px;
    }

    .home-pourquoi__feature-icon {
        height: 58px;
    }

    .home-pourquoi__feature-title {
        font-size: 16px;
    }

    .home-pourquoi__feature-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .home-pourquoi__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 20px;
        gap: 28px;
    }

    .home-pourquoi__visual {
        width: 100%;
        max-width: 460px;
        height: 280px;
    }

    /* En colonne empilée, l'image passe au-dessus du contenu : les
       traits n'ont plus de "gauche" à prolonger, ils repartent donc
       simplement du bord du contenu. */
    .home-pourquoi__content::before,
    .home-pourquoi__content::after {
        left: 0;
        right: 20px;
    }

    .home-pourquoi__title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .home-pourquoi__features {
        gap: 24px;
    }
}

/* ==========================================================================
   Accueil — FAQ (Bloc 7)
   L'accordéon lui-même réutilise tel quel .faq-item / .faq-item__trigger /
   .faq-item__panel... (voir plus haut, section "Page FAQ") : même script
   (Assets/JS/faq-accordion.js), même comportement, même accessibilité.
   Seule cette enveloppe de section est propre à l'accueil.
   ========================================================================== */
.home-faq {
    position: relative;
    background-color: var(--universim-black);
    /* Respiration cohérente avec les autres sections de l'accueil
       (voir .home-pourquoi) : ni min-height, ni grand vide inutile. */
    margin-top: clamp(56px, 5vw, 90px);
}

.home-faq__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 48px;
}

.home-faq__header {
    margin-bottom: 40px;
}

.home-faq__title {
    margin: 0 0 14px;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--universim-gold);
}

.home-faq__subtitle {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--universim-white);
}

.home-faq__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    color: var(--universim-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: color var(--universim-transition);
}

.home-faq__cta:hover,
.home-faq__cta:focus-visible {
    color: var(--universim-gold);
}

.home-faq__cta-arrow {
    display: inline-block;
    transition: transform var(--universim-transition);
}

.home-faq__cta:hover .home-faq__cta-arrow,
.home-faq__cta:focus-visible .home-faq__cta-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .home-faq__inner {
        padding: 48px 20px;
    }
}

/* ==========================================================================
   Accueil — Contact (Bloc 8, dernière section)
   Coordonnées + carte réutilisent .contact-info__* et la même structure
   de carte que la page Contact dédiée (template-contact.php) — cette
   section n'ajoute que son enveloppe (.home-contact*) et son CTA.
   ========================================================================== */
.home-contact {
    position: relative;
    background-color: var(--universim-black);
    margin-top: clamp(56px, 5vw, 90px);
    overflow: hidden;
}

/* Fond décoratif (Illustration_basPage) : image très large, cadrée sur
   son centre (background-size:cover + position:center rogne les côtés
   plutôt que de réduire l'image). Le dégradé horizontal en premier plan
   de la pile de fonds fait disparaître les deux bords progressivement
   dans le noir (jamais de coupure nette) ; le second, vertical, adoucit
   le haut/bas. z-index + isolation : ce layer reste confiné derrière
   .home-contact__inner, quoi qu'il arrive (voir le bug de fondu de la
   map Globtel, déjà corrigé une fois pour cette même raison). */
.home-contact__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    isolation: isolate;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, var(--universim-black) 0%, transparent 18%, transparent 82%, var(--universim-black) 100%),
        linear-gradient(90deg, var(--universim-black) 0%, transparent 18%, transparent 82%, var(--universim-black) 100%),
        var(--home-contact-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%, cover;
    opacity: 0.6;
}

.home-contact__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 48px;
}

.home-contact__header {
    margin-bottom: 40px;
}

.home-contact__title {
    margin: 0 0 14px;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--universim-gold);
}

.home-contact__subtitle {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--universim-white);
}

.home-contact__grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 56px;
    align-items: start;
}

.home-contact__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

/* Micro-interaction discrète (2px max) sur les coordonnées, propre à
   cette section : la page Contact garde son propre rendu inchangé. */
.home-contact__info .contact-info__item {
    transition: transform var(--universim-transition);
}

.home-contact__info .contact-info__item:hover {
    transform: translateX(2px);
}

.home-contact__info .contact-info__item:hover .contact-info__icon {
    filter: brightness(1.2);
}

.home-contact__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 999px;
    background-color: var(--universim-gold);
    color: var(--universim-black);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--universim-transition);
}

.home-contact__cta:hover,
.home-contact__cta:focus-visible {
    background-color: var(--universim-gold-hover);
}

.home-contact__map {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background-color: #0a0a0a;
    /* Ombre très légère pour détacher la carte du fond lumineux derrière elle. */
    box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.7);
}

.home-contact__map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

@media (max-width: 900px) {
    .home-contact__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .home-contact__inner {
        padding: 48px 20px;
    }

    .home-contact__map iframe {
        height: 240px;
    }
}

/* ==========================================================================
   Header — base responsive (tablette)
   ========================================================================== */
@media (max-width: 1024px) {
    .site-header__inner {
        padding: 14px 20px;
        gap: 16px;
    }

    .site-header__branding .custom-logo,
    .site-header__logo-fallback img {
        height: 64px;
    }

    .site-nav__list {
        gap: 18px;
    }

    .site-nav__list a {
        font-size: 15px;
    }

    .site-header__cart-link {
        font-size: 15px;
    }

    .site-header__cart-label {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Uniquement les réglages qui réduisent la hauteur prise par l'en-tête
       une fois ses éléments répartis sur plusieurs lignes (logo, liens,
       panier) — la structure/le comportement du header ne changent pas. */
    .site-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 10px 16px;
    }

    .site-header__branding .custom-logo,
    .site-header__logo-fallback img {
        height: 48px;
    }

    .site-nav__list {
        justify-content: center;
        gap: 8px 16px;
    }

    .site-nav__list a {
        padding: 4px 2px;
    }

    /* Sous-menus : évite tout débordement hors viewport sur petit écran
       en les recentrant sous leur parent plutôt qu'à gauche. */
    .site-nav__dropdown {
        left: 50%;
        transform: translate(-50%, -4px);
        max-width: calc(100vw - 32px);
    }

    .site-nav__item--has-dropdown:hover .site-nav__dropdown,
    .site-nav__item--has-dropdown:focus-within .site-nav__dropdown,
    .site-nav__item--has-dropdown.is-open .site-nav__dropdown {
        transform: translate(-50%, 0);
    }
}