/* ═══════════════════════════════════════════════════════════════════════
   Ce que le CRM ajoute à une maquette livrée en HTML.

   Tout est préfixé « aswell- » : la maquette a ses propres classes, et une
   règle trop large irait les bousculer. On se pose à côté d'elle, jamais
   par-dessus. Une seule règle fait exception, en fin de fichier, parce
   qu'elle corrige un défaut de l'export lui-même ; elle y est expliquée.

   Les couleurs reprennent celles de la maquette : le bleu de son fond, le
   rouge d'Aswell sur les boutons.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête de la maquette ──
   Rien à corriger ici. La version livrée le 14 octobre refait sa barre de
   navigation : le menu tient sur une ligne, le logo ne déborde plus, et les
   pages sont reliées par le développeur lui-même. Le bloc de rattrapage qui
   vivait ici — espacements resserrés, logo bridé, retour à la ligne interdit
   — visait des classes qui n'existent plus. Il a été retiré plutôt que laissé
   à vide : un correctif qui ne corrige plus rien finit par être recopié. */

/* ── Le premier écran : accueil et pages produit ──
   Landing::remonteLesChiffres() y remonte les deux chiffres et le bandeau
   rouge que la maquette laissait sous la photo. Il pose « aswell-premier-
   écran » sur la section, avec les proportions de la photo (--aswell-ratio),
   et « aswell-hero » sur le conteneur : tout ce qui suit ne vaut que là.

   La maquette tient son haut de page par des décalages fixes — titre remonté
   de 73 px, bouton tiré de 176 ou 266 px vers la gauche, photo remontée de
   613 px sur téléphone, section suivante posée à une distance fixe du haut
   de la page — tous calculés pour l'ancien contenu, et différents d'une page
   à l'autre. Ajouter les chiffres les faisait se chevaucher. Chaque bloc est
   donc remis dans le flux, à toutes les largeurs : sur grand écran, texte et
   photo côte à côte dans le premier écran ; sur téléphone, le texte, les
   chiffres et le bandeau d'abord, la photo ensuite. */

.aswell-hero-chiffres {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    animation: aswell-entree .8s ease-out .6s both;
}

.aswell-hero-chiffres .count-block {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 560px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 10px 30px rgba(10, 40, 90, .18);
}

.aswell-hero-chiffres .div-block-190 {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    margin: 0;
    padding: 14px 20px;
}

.aswell-hero-chiffres .count-div,
.aswell-hero-chiffres .div-block-194 {
    flex: none;
    align-items: baseline;
}

.aswell-hero-chiffres .plus {
    margin: 0;
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1;
}

/* La maquette écrit « %100 » : le signe passe derrière le nombre. */
.aswell-hero-chiffres .div-block-194 .plus {
    order: 2;
    margin-left: 4px;
}

.aswell-hero-chiffres .count {
    color: #FFFFFF;
    font-size: 46px;
    line-height: 1;
}

.aswell-hero-chiffres .count em {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.aswell-hero-chiffres .descp {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

.aswell-hero-chiffres .count-sec-divider { background: rgba(255, 255, 255, .3); }
.aswell-hero-chiffres .count-div-wrapper:last-child .count-sec-divider { display: none; }

.aswell-hero-accroche {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;                 /* la largeur des chiffres, juste au-dessus */
    margin: 0;
    padding: 9px 18px;
    border-radius: 999px;
    background: #B00D10;              /* le rouge du bandeau d'origine */
    box-shadow: 0 6px 18px rgba(90, 0, 0, .25);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

@keyframes aswell-entree {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aswell-hero-chiffres { animation: none; }
}

/* ── Le haut de page, remis dans le flux ── */

.aswell-premier-ecran {
    --aswell-haut: 180px;             /* où commence le contenu : le menu prend 160 px */
    margin: 0;
    padding: 0;
}

/* La marge basse du menu (26 px sur l'accueil, aucune sur les pages
   produit) laissait voir le fond blanc entre lui et le haut de page. */
.w-nav:has(+ .aswell-premier-ecran) { margin-bottom: 0; }

/* « flow-root » : sans lui, les marges des blocs intérieurs traversent
   celui-ci. */
.aswell-premier-ecran .header-2 {
    display: flow-root;
    position: relative;
    top: auto;
    width: 100%;                      /* bornée à 1470 px entre 1440 et 1920 : une bande blanche restait à droite */
    margin: 0;
    padding: 0;
}

.aswell-premier-ecran .hero-2 {
    top: auto;
    margin: 0;
    padding: calc(var(--aswell-haut) - 160px) 32px 56px;
}

/* Trois classes : la maquette remonte encore ce conteneur sous 480 px par
   une règle qui en porte autant. */
.aswell-premier-ecran .hero-2 > .container-2 {
    margin: 0 auto;
    padding: 0;
}

/* Au-delà de 1920 px, la maquette lâche la largeur de son conteneur. */
.aswell-hero {
    max-width: 1296px;
    margin: 0 auto;
}

.aswell-hero .hero-content-left,
.aswell-hero .hero-content-top,
.aswell-hero .hero-description-button,
.aswell-hero .hero-title-description,
.aswell-hero .hero-tag-title,
.aswell-hero .hero-description-block,
.aswell-hero .text-emphasize,
.aswell-hero .back-to-home-btn,
.aswell-hero .grid-21,
.aswell-hero .avatar-wrapper,
.aswell-hero .rating-div,
.aswell-hero .hero-title,
.aswell-hero .hero-description,
.aswell-hero .paragraph-large {
    position: static;
    margin: 0;
}

/* Trois pages produit portent leur sous-titre dans un « paragraph-large »
   et laissent le bloc de description vide : vide, il ajoutait un écart. Le
   titre de la prévoyance finit par un retour à la ligne, suivi d'un
   caractère invisible : une ligne blanche de 67 px sous le titre. */
.aswell-hero .hero-description-block:empty,
.aswell-hero .hero-title br:last-child { display: none; }

.aswell-hero .paragraph-large {
    padding: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 22px;
    line-height: 1.35;
}

/* La photo garde ses proportions, sauf un portrait trop haut, recoupé en
   4:5 : seuls un peu de ciel et le bas des vêtements y passent. */
.aswell-hero .hero-content-right-2 {
    position: relative;               /* le dégradé du bas s'y accroche */
    top: auto;
    left: auto;
    margin: 0;
    aspect-ratio: var(--aswell-ratio, .8);
}

.aswell-hero .hero-content-right-2 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

/* La section suivante était posée à distance fixe du haut de la page, par
   plusieurs marges imbriquées jusqu'aux badges (jusqu'à 1547 px cumulés).
   Le haut de page revenu dans le flux, elles ne creusaient plus qu'un trou :
   on les retire sur le chemin des badges, et la section suit à distance
   fixe. « !important » pour celle-ci seulement : sa marge d'origine est
   posée par des règles de poids différents selon la page et la largeur. */
.aswell-premier-ecran ~ :has(.bedges-wrapper),
.aswell-premier-ecran ~ * :has(.bedges-wrapper) {
    margin-top: 0;
    padding-top: 0;
}

.aswell-premier-ecran + * { margin-top: 48px !important; }

/* ── Grand écran : texte et photo côte à côte, dans le premier écran ── */
@media (min-width: 992px) {
    .aswell-hero {
        justify-content: center;
        align-items: flex-start;
        column-gap: clamp(40px, 5vw, 96px);
    }

    .aswell-hero .hero-content-left {
        align-self: flex-start;
        padding: 0;
    }

    /* Haute comme la fenêtre, moins le menu et une marge : elle ne dépasse
       plus sous le pli, où elle prenait jusqu'à 1500 px de haut. */
    .aswell-hero .hero-content-right-2 {
        flex: none;
        align-self: flex-start;
        width: min(44%, calc((100vh - var(--aswell-haut) - 24px) * var(--aswell-ratio, .8)));
    }

    /* Le titre suit la fenêtre, en largeur comme en hauteur : à 65 px fixes,
       il prenait cinq lignes vers 1024 px de large, et sur un portable il
       repoussait les chiffres sous le pli. */
    .aswell-hero .hero-title {
        padding: 0 32px 0 0;              /* plus de mots par ligne : il venait toucher la photo */
        font-size: clamp(40px, min(4.6vw, 7.4vh), 65px);
        line-height: 1.04;
    }

    .aswell-hero .hero-description-button { gap: 28px; }

    .aswell-hero .text-emphasize {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 28px;
    }
}

/* Plus étroit, le texte manquait de place à côté de la photo. */
@media (min-width: 992px) and (max-width: 1199px) {
    .aswell-hero .hero-content-right-2 {
        width: min(38%, calc((100vh - var(--aswell-haut) - 24px) * var(--aswell-ratio, .8)));
    }
}

/* Une fenêtre basse — un portable, le plus souvent : on resserre. */
@media (min-width: 992px) and (max-height: 800px) {
    .aswell-premier-ecran { --aswell-haut: 172px; }
    .aswell-hero .hero-title-description,
    .aswell-hero .hero-description-button { gap: 18px; }
    .aswell-hero .hero-description { font-size: 17px; }
    .aswell-hero .paragraph-large { font-size: 19px; }

    .aswell-hero-accroche {
        padding: 6px 16px;
        font-size: 15px;
    }
}

/* 1366 × 768 : il ne reste qu'environ 650 px une fois le navigateur ouvert. */
@media (min-width: 992px) and (max-height: 700px) {
    .aswell-hero .hero-title { font-size: clamp(36px, min(4.6vw, 6.6vh), 65px); }
}

/* ── Tablette et téléphone : une seule colonne, centrée, la photo en bas ── */
@media (max-width: 991px) {
    .aswell-premier-ecran .hero-2 { padding: 20px 20px 48px; }

    .aswell-hero {
        flex-direction: column;
        align-items: center;
        gap: 36px;
        width: 100%;
    }

    .aswell-hero .hero-content-left {
        width: 100%;
        max-width: 600px;
        padding: 0;
        text-align: center;
    }

    .aswell-hero .hero-content-left,
    .aswell-hero .hero-content-top,
    .aswell-hero .hero-description-button,
    .aswell-hero .hero-title-description,
    .aswell-hero .hero-tag-title,
    .aswell-hero .aswell-hero-chiffres {
        align-items: center;
        gap: 18px;
        width: 100%;
    }

    .aswell-hero .hero-title {
        padding: 0;
        font-size: clamp(30px, 7.6vw, 48px);
        line-height: 1.1;
        text-align: center;
    }

    .aswell-hero .hero-description-block {
        justify-content: center;
        height: auto;
    }

    .aswell-hero .hero-description,
    .aswell-hero .paragraph-large {
        padding: 0;
        font-size: 16px;
        line-height: 1.4;
        text-align: center;
    }

    .aswell-hero .text-emphasize {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: auto;
        padding: 0;
    }

    /* Les deux chiffres restent côte à côte : nombre au-dessus, libellé
       dessous, comme dans la section d'où ils viennent. */
    .aswell-hero-chiffres .div-block-190 {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 14px 10px;
    }

    .aswell-hero-chiffres .count { font-size: 40px; }
    .aswell-hero-chiffres .plus { font-size: 26px; }

    .aswell-hero-chiffres .descp {
        font-size: 14px;
        text-align: center;
    }

    .aswell-hero-accroche {
        border-radius: 22px;
        font-size: 15px;
    }

    .aswell-hero .hero-content-right-2 {
        display: block;
        width: 100%;
        max-width: 440px;
    }

    .aswell-premier-ecran + * { margin-top: 40px !important; }
}

/* Téléphone : on resserre pour que les chiffres et le bandeau tiennent dans
   le premier écran sous le menu, qui en prend déjà 160 px. */
@media (max-width: 767px) {
    .aswell-premier-ecran .hero-2 { padding: 16px 16px 40px; }

    .aswell-hero .hero-content-left,
    .aswell-hero .hero-content-top,
    .aswell-hero .hero-description-button,
    .aswell-hero .hero-title-description,
    .aswell-hero .hero-tag-title,
    .aswell-hero .aswell-hero-chiffres { gap: 14px; }

    .aswell-hero .text-emphasize { gap: 10px; }

    .aswell-hero .hero-title { font-size: clamp(27px, 7.4vw, 40px); }
    .aswell-hero .hero-description { font-size: 15px; }
    .aswell-hero .paragraph-large { font-size: 17px; }

    .aswell-hero-chiffres .div-block-190 { padding: 10px 8px; }
    .aswell-hero-chiffres .count { font-size: 36px; }
    .aswell-hero-chiffres .plus { font-size: 24px; }
    .aswell-hero-chiffres .descp { font-size: 13px; }

    .aswell-hero-accroche {
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* ── Les badges « Totalement neutre · Humain · Transparent · Agréé FINMA » ──
   Livrés en bleu clair sur un voile bleu presque transparent (contraste
   1,5:1) et en blanc sur un violet pâle (2:1) : on les lisait mal. Aswell a
   demandé le 22 octobre 2026 qu'ils soient plus lisibles, sur toutes les
   pages. L'alternance clair / foncé est gardée ; les contrastes passent à
   6,5:1 et 6:1. */
.bedges-wrapper .creativity-bedge {
    border: 1px solid #C9DFF7;
    background-color: #E4F0FC;
}

.bedges-wrapper .creativity-txt { color: #14549E; }

.bedges-wrapper .innovation-bedge { background-color: #1F63B5; }

.bedges-wrapper .innovation-txt { color: #FFFFFF; }

/* ── Le bandeau de consentement (integration.js) ──
   En bas à gauche : le bouton « Être rappelé » tient déjà le coin droit.
   Refuser et accepter ont la même taille ; seule la couleur les distingue. */
.aswell-cookies {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
    padding: 18px 20px;
    border: 1px solid #DCE3EC;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(15, 27, 45, .18);
    color: #0F1B2D;
    font-size: 14px;
    line-height: 1.45;
}

.aswell-cookies p { margin: 0; }
.aswell-cookies a { color: #14549E; text-decoration: underline; }

.aswell-cookies-boutons {
    display: flex;
    gap: 10px;
}

.aswell-cookies-boutons button {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #14549E;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.aswell-cookies-non { background: #FFFFFF; color: #14549E; }
.aswell-cookies-oui { background: #14549E; color: #FFFFFF; }

@media (max-width: 600px) {
    .aswell-cookies {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

.aswell-bloc {
    --aswell-rouge: #E2001A;
    --aswell-rouge-f: #B80015;
    --aswell-bleu: #2B7FE0;
    --aswell-encre: #0F1B2D;
    --aswell-gris: #5A6577;
    --aswell-filet: #DCE3EC;
    --aswell-feuille: #FFFFFF;
    --aswell-creux: #F2F6FB;

    box-sizing: border-box;
    padding: 72px 20px;
    background: var(--aswell-creux);
    color: var(--aswell-encre);
    font-family: inherit;
}

.aswell-bloc *,
.aswell-bloc *::before,
.aswell-bloc *::after { box-sizing: border-box; }

.aswell-bloc--clair { background: var(--aswell-feuille); }

.aswell-largeur { max-width: 74rem; margin: 0 auto; }

.aswell-surtitre {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aswell-bleu);
}

.aswell-titre {
    margin: 0 0 12px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--aswell-encre);
    text-wrap: balance;
}

.aswell-chapo {
    margin: 0 0 28px;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--aswell-gris);
}

/* ── Le cadre du simulateur ── */

.aswell-cadre {
    border: 1px solid var(--aswell-filet);
    border-radius: 20px;
    overflow: hidden;
    background: var(--aswell-feuille);
    box-shadow: 0 20px 50px -34px rgba(15, 27, 45, .45);
}

.aswell-cadre iframe {
    display: block;
    width: 100%;
    /* Remplacée par la hauteur réelle dès que le simulateur est monté. Cette
       valeur ne sert qu'à éviter que la page saute pendant le chargement. */
    height: 880px;
    border: 0;
}

/* ── Contact et rendez-vous ── */

.aswell-duo {
    display: grid;
    gap: 40px;
    align-items: start;
}

@media (min-width: 62rem) {
    .aswell-duo { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.aswell-points { margin: 0; padding: 0; list-style: none; }

.aswell-points li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 15px;
    color: var(--aswell-gris);
}

.aswell-points li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--aswell-bleu);
}

.aswell-carte {
    padding: 26px;
    border-radius: 20px;
    background: var(--aswell-feuille);
    border: 1px solid var(--aswell-filet);
    box-shadow: 0 20px 50px -34px rgba(15, 27, 45, .45);
}

.aswell-champs { display: grid; gap: 14px; }

@media (min-width: 30rem) {
    .aswell-champs { grid-template-columns: 1fr 1fr; }
}

.aswell-carte label { display: block; margin-bottom: 14px; }
.aswell-champs label { margin-bottom: 0; }

.aswell-carte label > span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aswell-encre);
}

.aswell-carte input[type="text"],
.aswell-carte input[type="email"],
.aswell-carte input[type="tel"],
.aswell-carte textarea {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--aswell-encre);
    background: var(--aswell-feuille);
    border: 1px solid var(--aswell-filet);
    border-radius: 11px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.aswell-carte input:focus,
.aswell-carte textarea:focus {
    outline: none;
    border-color: var(--aswell-bleu);
    box-shadow: 0 0 0 3px rgba(43, 127, 224, .16);
}

.aswell-carte textarea { resize: vertical; min-height: 84px; }

.aswell-carte [aria-invalid="true"] { border-color: var(--aswell-rouge); }

.aswell-pleine { margin-top: 14px; }

/* ── Les créneaux ── */

.aswell-creneaux {
    margin: 4px 0 16px;
    padding: 14px;
    border: 1px dashed var(--aswell-filet);
    border-radius: 14px;
    background: var(--aswell-creux);
}

.aswell-etiquette {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aswell-gris);
}

.aswell-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 168px;
    overflow-y: auto;
}

.aswell-creneau {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid var(--aswell-filet);
    background: var(--aswell-feuille);
    color: var(--aswell-encre);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.aswell-creneau:hover { border-color: var(--aswell-bleu); }

.aswell-creneau[aria-pressed="true"] {
    background: var(--aswell-bleu);
    border-color: var(--aswell-bleu);
    color: #fff;
}

.aswell-creneau:focus-visible {
    outline: 2px solid var(--aswell-encre);
    outline-offset: 2px;
}

/* ── Consentement, piège, bouton ── */

.aswell-consent {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 18px !important;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--aswell-gris);
}

.aswell-consent input { margin-top: 3px; flex: none; }
.aswell-consent a { color: var(--aswell-bleu); }

/* Hors de l'écran plutôt que display:none : certains robots ignorent ce qui
   est masqué, et rempliraient alors le piège sans se faire prendre. */
.aswell-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aswell-bouton {
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    padding: 13px 20px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--aswell-rouge);
    color: #fff;
    transition: background 160ms ease, transform 160ms ease;
}

.aswell-bouton:hover { background: var(--aswell-rouge-f); }
.aswell-bouton:active { transform: translateY(1px); }
.aswell-bouton:focus-visible { outline: 2px solid var(--aswell-encre); outline-offset: 3px; }
.aswell-bouton[disabled] { opacity: .6; cursor: progress; }

.aswell-retour {
    margin: 12px 0 0;
    min-height: 1.2em;
    font-size: 13.5px;
    line-height: 1.5;
}

.aswell-retour[data-ton="ok"] { color: #0F7A47; font-weight: 600; }
.aswell-retour[data-ton="erreur"] { color: var(--aswell-rouge); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .aswell-bloc * { transition: none !important; }
}

/* ── Le choix de la langue ──────────────────────────────────────────────
   Posé dans l'en-tête par le script : la maquette n'en prévoit pas. Sobre
   à dessein — il doit se trouver quand on le cherche, sans disputer la
   vedette au bouton d'appel. */

.aswell-langues {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    padding: 2px;
    border: 1px solid rgba(15, 27, 45, .14);
    border-radius: 999px;
    vertical-align: middle;
}

.aswell-langues button {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    padding: 4px 9px;
    min-height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .6;
    transition: background 160ms ease, opacity 160ms ease;
}

.aswell-langues button:hover { opacity: 1; }

.aswell-langues button[aria-pressed="true"] {
    background: #E2001A;
    color: #fff;
    opacity: 1;
}

.aswell-langues button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Le placeholder « No items found. » de Webflow ──
   Seule règle de ce fichier qui ne porte pas le préfixe « aswell- », et elle
   est ici pour une raison précise.

   Chaque carte de la roue des solutions est une « collection list » Webflow.
   L'export statique garde, à côté des éléments, la boîte que Webflow affiche
   quand la collection est vide : un rectangle gris portant « No items found. »
   Dans le Designer elle est masquée dès qu'un élément existe ; dans l'export,
   plus rien ne la masque. Les quatre cartes ont pourtant leur contenu écrit en
   dur, et la boîte vient se poser par-dessus leur texte.

   C'est ce que le client a signalé comme « le texte est dédoublé dans la
   roue » : ce n'est pas un doublon, c'est ce rectangle anglais superposé.
   Il apparaît sur le bureau et pas sur mobile parce que les cartes y passent
   en flux normal et que la boîte n'a plus rien à recouvrir.

   On la masque partout : une collection réellement vide ne doit pas annoncer
   « No items found. » en anglais sur un site romand — mieux vaut ne rien
   afficher du tout. */

.w-dyn-empty { display: none !important; }

/* ── Le bouton de rappel ──
   Il vit en bas à droite de toutes les pages, par-dessus le reste. La
   maquette y posait une icône WhatsApp au lien vide : on la masque ici
   plutôt que de la réparer, puisque la nôtre prend sa place. */

.image-43 { display: none !important; }

.aswell-rappel {
    --aswell-rouge: #E2001A;
    --aswell-rouge-f: #B80015;
    --aswell-encre: #0F1B2D;
    --aswell-gris: #5A6577;
    --aswell-filet: #DCE3EC;

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    /* Inverse : le bouton reste en bas, collé au coin, et le panneau pousse
       vers le haut. Dans l'autre sens il s'ouvrait sous le bouton, donc hors
       de l'écran, puisque le tout est ancré au bas de la fenêtre. */
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    font-family: inherit;
}

.aswell-rappel * { box-sizing: border-box; }

.aswell-rappel-bulle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--aswell-rouge);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(226, 0, 26, .32);
    transition: background 160ms ease, transform 160ms ease;
}

.aswell-rappel-bulle:hover { background: var(--aswell-rouge-f); }
.aswell-rappel-bulle:active { transform: translateY(1px); }

.aswell-rappel-bulle:focus-visible {
    outline: 3px solid var(--aswell-encre);
    outline-offset: 2px;
}

/* Sur un téléphone, la pastille se réduit à son icône : une étiquette
   « Être rappelé » y mangerait le tiers de la largeur utile. */
@media (max-width: 600px) {
    .aswell-rappel { right: 14px; bottom: 14px; }
    .aswell-rappel-texte { display: none; }
    .aswell-rappel-bulle { padding: 0; width: 52px; justify-content: center; }
}

.aswell-rappel-panneau {
    width: min(330px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid var(--aswell-filet);
    border-radius: 18px;
    background: #fff;
    color: var(--aswell-encre);
    box-shadow: 0 18px 48px rgba(15, 27, 45, .18);
}

.aswell-rappel-panneau[hidden] { display: none; }

.aswell-rappel-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.aswell-rappel-tete strong { font-size: 17px; }

.aswell-rappel-fermer {
    border: 0;
    background: transparent;
    color: var(--aswell-gris);
    font-size: 24px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 8px;
}

.aswell-rappel-fermer:hover { color: var(--aswell-encre); }

.aswell-rappel-chapo {
    margin: 0 0 14px;
    color: var(--aswell-gris);
    font-size: 13px;
    line-height: 1.45;
}

.aswell-rappel-panneau form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aswell-rappel-panneau label { display: block; }

.aswell-rappel-panneau label > span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aswell-gris);
}

.aswell-rappel-panneau input[type="text"],
.aswell-rappel-panneau input[type="tel"],
.aswell-rappel-panneau input[type="email"],
.aswell-rappel-panneau textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--aswell-filet);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.aswell-rappel-panneau textarea { resize: vertical; min-height: 54px; }

.aswell-rappel-panneau input:focus-visible,
.aswell-rappel-panneau textarea:focus-visible {
    outline: 2px solid var(--aswell-rouge);
    outline-offset: 1px;
    border-color: var(--aswell-rouge);
}

.aswell-rappel-panneau .aswell-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--aswell-gris);
}

.aswell-rappel-panneau .aswell-consent input { margin-top: 2px; flex: none; }
.aswell-rappel-panneau .aswell-consent a { color: var(--aswell-rouge); }
.aswell-rappel-panneau .aswell-consent > span { font-weight: 400; }

.aswell-rappel-panneau .aswell-bouton {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--aswell-rouge);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.aswell-rappel-panneau .aswell-bouton:hover { background: var(--aswell-rouge-f); }
.aswell-rappel-panneau .aswell-bouton[disabled] { opacity: .6; cursor: progress; }

.aswell-rappel-panneau .aswell-retour { margin: 0; font-size: 12.5px; line-height: 1.4; }
.aswell-rappel-panneau .aswell-retour.ok { color: #0B7A3B; }
.aswell-rappel-panneau .aswell-retour.erreur { color: var(--aswell-rouge-f); }

/* Le piège à robots : présent dans le document, jamais à l'écran. */
.aswell-rappel .aswell-piege {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media print { .aswell-rappel { display: none; } }

/* ── L'agenda ──
   Trois colonnes comme le modèle montré par le client : ce qu'on sait
   d'avance à gauche, le calendrier au milieu, les heures du jour choisi à
   droite. Le formulaire prend toute la largeur une fois le créneau retenu. */

.aswell-ancre {
    display: block;
    position: relative;
    top: -90px;      /* la barre de navigation de la maquette est fixe */
    height: 0;
}

.aswell-agenda {
    display: grid;
    grid-template-columns: minmax(200px, 250px) 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--aswell-filet, #DCE3EC);
    border-radius: 20px;
    background: var(--aswell-feuille, #fff);
    box-shadow: 0 10px 34px rgba(15, 27, 45, .07);
}

.aswell-agenda-infos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 22px;
    border-right: 1px solid var(--aswell-filet, #DCE3EC);
}

.aswell-agenda-duree,
.aswell-agenda-lieu {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--aswell-gris, #5A6577);
}

.aswell-agenda-duree svg,
.aswell-agenda-lieu svg { flex: none; margin-top: 2px; color: var(--aswell-rouge, #E2001A); }
.aswell-agenda-lieu strong { display: block; color: var(--aswell-encre, #0F1B2D); }
.aswell-agenda-lieu em { font-style: normal; font-size: 13px; }

.aswell-agenda-choix {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(160px, .85fr);
    gap: 24px;
}

/* ── Le calendrier ── */

.aswell-calendrier-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.aswell-calendrier-tete strong {
    font-size: 15px;
    text-transform: capitalize;
    color: var(--aswell-encre, #0F1B2D);
}

.aswell-calendrier-tete button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--aswell-filet, #DCE3EC);
    border-radius: 10px;
    background: #fff;
    color: var(--aswell-encre, #0F1B2D);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.aswell-calendrier-tete button:hover { border-color: var(--aswell-rouge, #E2001A); }
.aswell-calendrier-tete button[disabled] { opacity: .35; cursor: default; }

.aswell-calendrier-jours {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.aswell-calendrier-jours .aswell-jour-nom {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aswell-gris, #5A6577);
}

.aswell-calendrier-jours button {
    aspect-ratio: 1;
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--aswell-encre, #0F1B2D);
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* Un jour sans créneau reste lisible mais ne réagit pas : le griser
   complètement le ferait passer pour un défaut d'affichage. */
.aswell-calendrier-jours button[disabled] { color: #B9C2CF; cursor: default; }
.aswell-calendrier-jours button:not([disabled]) { background: var(--aswell-creux, #F2F6FB); font-weight: 600; }
.aswell-calendrier-jours button:not([disabled]):hover { background: #E3ECF8; }

.aswell-calendrier-jours button[aria-pressed="true"] {
    background: var(--aswell-rouge, #E2001A);
    color: #fff;
}

/* ── Les heures ── */

.aswell-heures .aswell-etiquette {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aswell-gris, #5A6577);
}

.aswell-heures-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 290px;
    overflow-y: auto;
}

.aswell-heures-liste button {
    padding: 10px 12px;
    border: 1px solid var(--aswell-filet, #DCE3EC);
    border-radius: 10px;
    background: #fff;
    color: var(--aswell-encre, #0F1B2D);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.aswell-heures-liste button:hover {
    border-color: var(--aswell-rouge, #E2001A);
    color: var(--aswell-rouge, #E2001A);
}

.aswell-heures-vide {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--aswell-gris, #5A6577);
}

/* ── Le formulaire, deuxième étape ── */

.aswell-agenda-form {
    /* Deuxieme colonne, celle du calendrier qu'il remplace. Sans cette ligne
       il retombait dans la colonne de gauche, large de 250 px, et le
       formulaire s'affichait en bande etroite a cote d'un vide. */
    grid-column: 2;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aswell-agenda-form[hidden] { display: none; }

.aswell-retour-creneau {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--aswell-gris, #5A6577);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.aswell-retour-creneau:hover { color: var(--aswell-rouge, #E2001A); }

.aswell-agenda-recap {
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--aswell-creux, #F2F6FB);
    font-size: 14px;
    font-weight: 600;
    color: var(--aswell-encre, #0F1B2D);
}

.aswell-agenda-form label { display: block; }

.aswell-agenda-form label > span:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aswell-gris, #5A6577);
}

.aswell-agenda-form input[type="text"],
.aswell-agenda-form input[type="tel"],
.aswell-agenda-form input[type="email"],
.aswell-agenda-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--aswell-filet, #DCE3EC);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.aswell-agenda-form textarea { resize: vertical; }

.aswell-agenda-form input:focus-visible,
.aswell-agenda-form textarea:focus-visible {
    outline: 2px solid var(--aswell-rouge, #E2001A);
    outline-offset: 1px;
    border-color: var(--aswell-rouge, #E2001A);
}

/* Le lieu n'est pas un choix : Aswell n'a qu'une adresse. On l'affiche
   comme une valeur arrêtée plutôt qu'en bouton radio seul de sa catégorie. */
.aswell-lieu-fixe {
    display: block;
    padding: 10px 12px;
    border: 1px dashed var(--aswell-filet, #DCE3EC);
    border-radius: 10px;
    font-size: 14px;
    color: var(--aswell-encre, #0F1B2D);
}

.aswell-agenda-form .aswell-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--aswell-gris, #5A6577);
}

.aswell-agenda-form .aswell-consent input { margin-top: 2px; flex: none; }
.aswell-agenda-form .aswell-consent a { color: var(--aswell-rouge, #E2001A); }

.aswell-agenda-form .aswell-bouton {
    align-self: flex-start;
    min-height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--aswell-rouge, #E2001A);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.aswell-agenda-form .aswell-bouton:hover { background: var(--aswell-rouge-f, #B80015); }
.aswell-agenda-form .aswell-bouton[disabled] { opacity: .6; cursor: progress; }

.aswell-agenda-secours {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--aswell-gris, #5A6577);
}

.aswell-agenda-secours button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--aswell-rouge, #E2001A);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Sur un écran étroit, les trois colonnes se rangent l'une sous l'autre et
   le filet de séparation devient un trait horizontal. */
@media (max-width: 900px) {
    .aswell-agenda { grid-template-columns: 1fr; gap: 20px; }
    .aswell-agenda-infos {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 22px;
        padding: 0 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--aswell-filet, #DCE3EC);
    }
    .aswell-agenda-infos .aswell-points { width: 100%; }
    .aswell-agenda-choix { grid-template-columns: 1fr; }
    .aswell-agenda-form { grid-column: 1; max-width: none; }
    .aswell-heures-liste { max-height: none; }
}