/* ═══════════════════════════════════════════════════════════════════════
   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é. */

.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; } }