, en hérite aussi. */ body.tnl-page { background: #f4f5f9; background-image: none; --t-bg: #f4f5f9; --t-card: #ffffff; --t-line: #e5e7ef; --t-line-soft: #eef0f6; --t-ink: #16232e; --t-muted: #7b8794; --t-primary: #0c5b86; --t-primary-dark: #08466a; --t-primary-soft: #edf5fa; --t-green: #1f9d6b; --t-green-soft: #e8f7f0; --t-red: #e0475e; --t-red-soft: #fdeef0; --t-orange: #e07a3e; --t-radius: 14px; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--t-ink); line-height: 1.5; } .tnl { display: block; padding: 26px 0 90px; } .tnl .hidden, .tnl [hidden] { display: none !important; } /* Neutralisation des règles globales de style.css qui s'appliqueraient ici : `section { padding: 96px 0 }` et les champs de formulaire (bordure, padding et surtout `margin-bottom: 18px`) sont redéfinis par les boîtes `.t-fld`. */ .tnl section { padding: 0; } .tnl input, .tnl select, .tnl textarea { margin-bottom: 0; } .tnl label { margin-bottom: 0; } .tnl input:focus, .tnl select:focus { box-shadow: none; } .t-wrap { max-width: 940px; margin: 0 auto; padding: 0 18px; } /* ---------- Header du tunnel + avancement en 4 blocs ---------- */ .t-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--t-line); } /* Grille à 3 colonnes : le logo occupe la 1ʳᵉ, le stepper la colonne du milieu, la 3ᵉ reste vide. Les deux colonnes latérales étant identiques (1fr), le stepper est centré sur la PAGE et non dans l'espace laissé par le logo. */ .t-header-in { max-width: 1280px; margin: 0 auto; padding: 11px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; } /* Pas de `gap` ici : les fragments de texte deviendraient des items flex et le logo s'écrirait « Louer Ma Clim ». La marge est portée par l'image. */ .t-logo { justify-self: start; display: inline-flex; align-items: center; font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; color: var(--t-ink); text-decoration: none; white-space: nowrap; } .t-logo img { width: 28px; height: 28px; margin-right: 8px; } .t-logo span { color: var(--t-primary); } /* Fil d'étapes : pastilles numérotées reliées par un trait, libellé dessous. Franchie = pastille verte à coche · en cours = pastille bleue · à venir = grise. */ .t-steps { grid-column: 2; width: 620px; max-width: 100%; margin: 0; display: flex; list-style: none; padding: 0; } .t-stepb { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; } /* Trait de liaison : va du centre de la pastille précédente à celle-ci, et se colore dès que CETTE étape est atteinte. */ .t-stepb + .t-stepb::before { content: ''; position: absolute; z-index: 0; top: 12px; right: 50%; left: -50%; height: 3px; background: #e3e6ee; transition: background .3s; } .t-stepb.is-done::before, .t-stepb.is-on::before { background: var(--t-green); } .t-stepb-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef0f6; color: var(--t-muted); font-size: .78rem; font-weight: 700; transition: background .25s, color .25s; } .t-stepb-ok { display: none; width: 14px; height: 14px; } .t-stepb.is-done .t-stepb-dot { background: var(--t-green); color: #fff; } .t-stepb.is-done .t-stepb-n { display: none; } .t-stepb.is-done .t-stepb-ok { display: block; } .t-stepb.is-on .t-stepb-dot { background: var(--t-primary); color: #fff; } .t-stepb-l { max-width: 100%; font-size: .76rem; font-weight: 500; color: var(--t-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; } .t-stepb.is-done .t-stepb-l { color: var(--t-green); } .t-stepb.is-on .t-stepb-l { color: var(--t-primary); font-weight: 600; } /* Une étape déjà franchie se reclique pour revenir en arrière. */ .t-stepb.is-done { cursor: pointer; } .t-stepb.is-done:hover .t-stepb-dot { background: var(--t-primary); } .t-stepb.is-done:hover .t-stepb-l { color: var(--t-primary); } /* ---------- Titres de question ---------- */ .tnl h2.t-q, .tnl h3.t-q { font-family: 'Outfit', system-ui, sans-serif; font-size: 1.24rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--t-ink); margin: 0 0 14px; } .tnl h3.t-q { font-size: 1.1rem; margin-top: 30px; } .t-q + .t-sub { margin-top: -8px; } .t-sub { font-size: .93rem; color: var(--t-muted); margin: 0 0 16px; } .t-q-gap { margin-top: 34px; } /* ---------- Cartes ---------- */ .t-card { background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: 0 1px 2px rgba(20, 35, 50, .04); } /* ---------- Champs de formulaire (boîtes label + valeur) ---------- */ .t-fld { background: var(--t-card); border: 1px solid var(--t-line); border-radius: 12px; padding: 10px 16px 11px; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; } .t-fld:focus-within { border-color: var(--t-primary); box-shadow: 0 0 0 3px rgba(12, 91, 134, .10); } .t-fld.is-err { border-color: var(--t-red); } /* Message sous un champ fautif. Le bouton « Suivant » reste cliquable : c'est ce message qui explique ce qui manque, plutôt qu'un bouton grisé sans raison. */ .t-ferr { margin: 5px 0 0; font-size: .84rem; line-height: 1.35; font-weight: 500; color: var(--t-red); } .t-fld label, .t-fld-cell label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 2px; } .t-lbl-soft { font-weight: 500; text-transform: none; letter-spacing: .01em; opacity: .85; } .t-fld input[type="text"], .t-fld input[type="tel"], .t-fld input[type="email"] { width: 100%; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 1.02rem; color: var(--t-ink); padding: 0; line-height: 1.5; } .t-fld input::placeholder { color: #b3bcc7; } /* Deux champs côte à côte (téléphone + e-mail) — empilés sur mobile. */ .t-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .t-fld-row .t-fld { margin-bottom: 12px; min-width: 0; } /* « Particulier / Professionnel » — le switcher seul, aligné à gauche (plus de carte `.t-fld` autour). */ .t-seg { display: inline-flex; background: #f2f3f8; border-radius: 99px; padding: 4px; gap: 2px; margin: 2px 0 4px; } .t-seg-btn { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--t-muted); padding: 7px 16px; border-radius: 99px; transition: all .15s; } .t-seg-btn.is-on { background: #fff; color: var(--t-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 35, 50, .12); } /* ---------- Bandeau zone de livraison ---------- */ .t-zone { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 12px 14px; margin: 4px 0 6px; font-size: .92rem; line-height: 1.45; } .t-zone svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; } .t-zone.is-ok { background: var(--t-green-soft); color: #14684a; } .t-zone.is-err { background: var(--t-red-soft); color: #a52a3c; } .t-zone.is-wait { background: #f2f3f8; color: var(--t-muted); } .t-zone b { font-weight: 600; } .t-zone span { display: block; } .t-zone small { display: block; opacity: .8; font-size: .84em; margin-top: 2px; } /* ---------- Navigation bas d'étape ---------- */ .t-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; } .t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 1rem; font-weight: 600; border: 0; border-radius: 11px; padding: 15px 26px; cursor: pointer; transition: background .15s, transform .12s, opacity .15s; text-decoration: none; line-height: 1; } .t-btn:active { transform: translateY(1px); } .t-btn-ghost { background: #e7e9f0; color: #3d4956; } .t-btn-ghost:hover { background: #dee1eb; } .t-btn-primary { background: var(--t-primary); color: #fff; } .t-btn-primary:hover { background: var(--t-primary-dark); } .t-btn:disabled, .t-btn[disabled] { background: #d9dce5; color: #9aa3b0; cursor: not-allowed; transform: none; } /* « Pas encore prêt » — atténué pour le signaler, mais bel et bien cliquable : le clic déclenche les messages d'erreur au lieu de ne rien faire. */ .t-btn.is-idle { opacity: .55; } .t-btn.is-idle:hover { opacity: .75; } .t-btn.is-busy { opacity: .7; cursor: progress; } .t-missing { margin: 10px 0 0; font-size: .86rem; color: var(--t-muted); } /* ---------- Étape 2 — Quantité ---------- */ .t-help { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--t-line); border-radius: 99px; padding: 9px 18px 9px 12px; margin: -4px 0 18px; font-family: inherit; font-size: .92rem; font-weight: 500; color: var(--t-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .t-help:hover { border-color: var(--t-primary); box-shadow: 0 2px 10px rgba(12, 91, 134, .10); } .t-help i { font-style: normal; font-weight: 700; color: #e0475e; width: 20px; height: 20px; border-radius: 50%; background: #fdeef0; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .t-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .t-prod { display: flex; flex-direction: column; align-items: center; padding: 26px 22px 24px; text-align: center; min-height: 340px; } .t-prod-img { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 170px; margin-bottom: 14px; } .t-prod-img img { max-height: 190px; width: auto; object-fit: contain; } .t-kit-emoji { font-size: 4.6rem; line-height: 1; filter: saturate(1.05); } .t-prod-desc { font-size: .95rem; color: var(--t-muted); margin: 0 0 18px; line-height: 1.5; } .t-incl { font-size: 1rem; font-weight: 700; letter-spacing: .05em; color: var(--t-primary); } .t-stepper { display: inline-flex; align-items: center; gap: 16px; } .t-stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--t-line); background: #fff; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--t-ink); display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; } .t-stepper button:hover:not(:disabled) { border-color: var(--t-primary); color: var(--t-primary); } .t-stepper button:disabled { opacity: .35; cursor: not-allowed; } .t-stepper .t-stepper-val { width: 42px; height: 42px; border-radius: 50%; background: var(--t-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 600; } .t-note { font-size: .86rem; color: var(--t-muted); margin: 14px 0 0; text-align: center; } /* ---------- Étape 3 — Dates de livraison (une petite carte par jour) ---------- */ /* auto-fit : 5 colonnes tant que la carte « + » est là, 4 une fois dépliée. */ .t-dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .t-dcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 116px; text-align: left; font-family: inherit; background: var(--t-card); border: 1px solid var(--t-line); border-radius: 12px; padding: 12px 13px 11px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; } .t-dcard:hover:not(.is-off) { border-color: var(--t-primary); transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(12, 91, 134, .5); } .t-dcard.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); box-shadow: 0 0 0 1px var(--t-primary); } .t-dcard.is-off { opacity: .55; } .t-dcard-day { font-size: .95rem; font-weight: 600; line-height: 1.25; } .t-dcard-date { font-size: .76rem; color: var(--t-muted); } .t-dcard-tag { margin-top: 5px; } /* Le prix est poussé en bas : toutes les cartes s'alignent, avec ou sans badge. */ .t-dcard-price { margin-top: auto; padding-top: 8px; font-size: 1.06rem; font-weight: 700; white-space: nowrap; } .t-dcard-sub { font-size: .73rem; color: var(--t-muted); } .t-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; border-radius: 99px; padding: 4px 10px; white-space: nowrap; } .t-tag-hot { background: #fdeef0; color: #d63a54; } .t-tag-off { background: #f0f1f6; color: #7b8794; } /* Carte « + » — même gabarit que les cartes de jour, mais en pointillés. */ .t-dmore { align-items: center; justify-content: center; gap: 4px; border-style: dashed; background: transparent; color: var(--t-muted); } .t-dmore:hover { border-color: var(--t-primary); color: var(--t-primary); background: #fff; } .t-dmore-plus { font-size: 1.7rem; font-weight: 300; line-height: 1; } .t-dmore-lbl { font-size: .78rem; font-weight: 500; } /* Plus de dates — calendrier mensuel complet (n'importe quelle date de livraison). Réutilise le gabarit `.t-cal` de l'étape 4 ; chaque jour porte en plus son coût. */ .t-dcal-wrap { margin-top: 16px; } .t-dcal-t { font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 10px; } .t-dcal .t-cal-d { height: 54px; flex-direction: column; gap: 1px; line-height: 1.15; } .t-dcal .t-cal-d.is-on { background: var(--t-primary); color: #fff; font-weight: 600; } .t-dcal-n { font-size: .96rem; } .t-dcal-p { font-size: .66rem; color: var(--t-primary); font-weight: 600; } .t-dcal .t-cal-d.is-on .t-dcal-p { color: #fff; } .t-dcal .t-cal-d.is-off { opacity: .5; } .t-dcal .t-cal-d.is-off .t-dcal-p { color: var(--t-muted); font-weight: 500; } .t-dcal .t-cal-d:disabled .t-dcal-n { color: #cfd5de; } .t-dcal-legend { font-size: .76rem; color: var(--t-muted); padding: 10px 4px 4px; line-height: 1.4; } .t-slots { margin-top: 22px; } .t-slots-t { font-size: .95rem; font-weight: 600; margin-bottom: 10px; } .t-slot-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .t-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 1px solid var(--t-line); border-radius: 12px; padding: 13px 8px; cursor: pointer; font-family: inherit; transition: all .15s; } .t-slot:hover:not(:disabled) { border-color: var(--t-primary); } .t-slot.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); } .t-slot-time { font-size: .97rem; font-weight: 600; } .t-slot-price { font-size: .8rem; color: var(--t-muted); } .t-slot:disabled { opacity: .4; cursor: not-allowed; } /* Liste d'attente — ligne discrète sous les dates (pas un bandeau coloré). */ .t-avail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 0 4px; font-size: .87rem; color: var(--t-muted); } .t-avail button { border: 0; background: transparent; color: var(--t-primary); cursor: pointer; font-family: inherit; font-size: .87rem; font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .t-avail button:hover { color: var(--t-primary-dark); } /* ---------- Étape 4 — Durée ---------- */ .t-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-bottom: 26px; } .t-preset { position: relative; background: #fff; border: 1px solid var(--t-line); border-radius: 12px; padding: 16px 10px 14px; cursor: pointer; font-family: inherit; text-align: center; transition: all .15s; } .t-preset:hover:not(.is-off) { border-color: var(--t-primary); transform: translateY(-2px); } .t-preset.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); box-shadow: 0 0 0 1px var(--t-primary); } .t-preset.is-off { opacity: .45; cursor: not-allowed; } .t-preset-d { display: block; font-size: 1.32rem; font-weight: 700; line-height: 1.1; } .t-preset-l { display: block; font-size: .78rem; color: var(--t-muted); margin: 1px 0 8px; } .t-preset-p { display: block; font-size: .98rem; font-weight: 600; color: var(--t-primary); } /* Raccourci « Choisir manuellement » : mobile uniquement (en desktop, le calendrier est juste sous les forfaits, le raccourci n'a pas d'intérêt). */ .t-preset-manual { display: none; } .t-preset-badge { position: absolute; top: -9px; right: -6px; background: var(--t-green); color: #fff; border-radius: 99px; font-size: .72rem; font-weight: 700; padding: 3px 8px; box-shadow: 0 2px 6px rgba(31, 157, 107, .35); } .t-or { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font-size: .74rem; letter-spacing: .1em; color: #a8b0bb; font-weight: 600; } .t-or::before, .t-or::after { content: ''; flex: 1; height: 1px; background: var(--t-line); } .t-range { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .t-rangebox { flex: 0 1 190px; background: #fff; border: 1px solid var(--t-line); border-radius: 12px; padding: 10px 16px; text-align: left; font-family: inherit; cursor: pointer; transition: all .15s; } .t-rangebox span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); } .t-rangebox b { font-size: 1.02rem; font-weight: 500; } .t-rangebox.is-target { border-color: var(--t-primary); box-shadow: 0 0 0 2px rgba(12, 91, 134, .12); } .t-range-arrow { color: var(--t-muted); font-size: 1.1rem; } .t-cal { padding: 18px 18px 12px; } .t-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .t-cal-head b { font-size: 1.05rem; font-weight: 600; } .t-cal-nav { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--t-primary); cursor: pointer; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; } .t-cal-nav:hover:not(:disabled) { background: var(--t-primary-soft); } .t-cal-nav:disabled { opacity: .25; cursor: not-allowed; } .t-cal-wd, .t-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .t-cal-wd { font-size: .76rem; color: var(--t-muted); text-align: center; margin-bottom: 6px; font-weight: 500; } .t-cal-d { height: 44px; border: 0; background: transparent; border-radius: 9px; font-family: inherit; font-size: .96rem; color: var(--t-ink); cursor: pointer; position: relative; transition: background .13s; display: flex; align-items: center; justify-content: center; } .t-cal-d:hover:not(:disabled) { background: #f1f4f8; } .t-cal-d:disabled { color: #cfd5de; cursor: default; } .t-cal-d.is-start, .t-cal-d.is-end { background: var(--t-primary); color: #fff; font-weight: 600; } .t-cal-d.is-range { background: var(--t-primary-soft); border-radius: 0; } .t-cal-d.is-closed { color: #cfd5de; text-decoration: line-through; cursor: not-allowed; } .t-cal-foot { display: flex; gap: 18px; padding: 12px 4px 4px; } .t-cal-foot button { border: 0; background: transparent; font-family: inherit; font-size: .88rem; color: var(--t-muted); cursor: pointer; padding: 0; } .t-cal-foot button:hover { color: var(--t-primary); } .t-durinfo { margin-top: 20px; } .t-durinfo-h { font-size: .93rem; color: var(--t-muted); margin-bottom: 10px; } .t-save { display: inline-flex; align-items: center; gap: 8px; background: var(--t-green-soft); color: #14684a; border-radius: 10px; padding: 10px 16px; font-size: .93rem; font-weight: 600; margin-bottom: 12px; } .t-durprice { display: flex; align-items: baseline; gap: 12px; } .t-durprice b { font-size: 1.9rem; font-weight: 700; color: var(--t-primary); letter-spacing: -.02em; } .t-durprice s { font-size: 1.15rem; color: #adb5c0; } /* ---------- Étape 5 — Récapitulatif ---------- */ .t-recap { overflow: hidden; margin-bottom: 6px; } .t-rrow { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--t-line-soft); } .t-rrow:last-child { border-bottom: 0; } .t-rrow-ic { font-size: 1.5rem; flex: 0 0 34px; text-align: center; line-height: 1; } .t-rrow-txt { flex: 1 1 auto; min-width: 0; } .t-rrow-txt b { display: block; font-size: 1.02rem; font-weight: 500; } .t-rrow-txt span { display: block; font-size: .86rem; color: var(--t-muted); margin-top: 2px; } .t-rrow-txt .t-rrow-save { color: var(--t-green); font-weight: 600; } .t-rrow-p { flex: 0 0 auto; font-size: 1.06rem; font-weight: 700; white-space: nowrap; } .t-rrow-p.is-free { color: var(--t-green); font-size: 1rem; letter-spacing: .04em; } .t-mini-stepper { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; background: #f4f5f9; border-radius: 10px; padding: 5px; } .t-mini-stepper button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--t-line); background: #fff; cursor: pointer; font-size: .95rem; line-height: 1; color: var(--t-ink); display: inline-flex; align-items: center; justify-content: center; } .t-mini-stepper button:disabled { opacity: .35; cursor: not-allowed; } .t-mini-stepper b { min-width: 22px; text-align: center; font-size: .98rem; } /* Accordéon « Informations de livraison » (étape 5) */ .t-acc { background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--t-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 35, 50, .04); } .t-acc-head { display: flex; align-items: center; gap: 14px; width: 100%; background: transparent; border: 0; padding: 15px 20px; cursor: pointer; font-family: inherit; text-align: left; color: inherit; } .t-acc-head:hover { background: #fafbfd; } .t-acc-ic { flex: 0 0 26px; font-size: 1.3rem; line-height: 1; text-align: center; } .t-acc-t { flex: 1 1 auto; min-width: 0; } .t-acc-t b { display: block; font-size: 1rem; font-weight: 600; } .t-acc-t span { display: block; font-size: .83rem; color: var(--t-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-acc-chev { flex: 0 0 auto; color: var(--t-muted); transition: transform .2s; } .t-acc-head.is-open .t-acc-chev { transform: rotate(180deg); } .t-acc-body { padding: 16px 20px 6px; border-top: 1px solid var(--t-line-soft); } .t-acc-body .t-zone { margin: -4px 0 12px; } .t-installs { margin: 22px 0; } .t-inst { display: block; text-align: left; background: #fff; cursor: pointer; border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: 18px 20px; font-family: inherit; transition: all .15s; } .t-inst:hover { border-color: var(--t-primary); } .t-inst.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); box-shadow: 0 0 0 1px var(--t-primary); } .t-inst-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .t-inst-head b { font-size: 1.04rem; font-weight: 600; } .t-sw { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 99px; background: #d3d7e0; position: relative; transition: background .18s; } .t-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s; } .t-inst.is-on .t-sw { background: var(--t-primary); } .t-inst.is-on .t-sw::after { transform: translateX(18px); } .t-inst-sub { display: block; font-size: .88rem; color: var(--t-muted); line-height: 1.45; } .t-inst-price { display: block; font-size: .92rem; font-weight: 600; color: var(--t-primary); margin-top: 6px; } .t-total { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; margin-bottom: 12px; } .t-total span:first-child { font-size: 1.1rem; font-weight: 500; } .t-total span:last-child { font-size: 1.62rem; font-weight: 700; letter-spacing: -.02em; } .t-tva { font-size: .84rem; color: var(--t-muted); margin: 0 0 8px; padding: 0 4px; } .t-cgv { display: flex; align-items: flex-start; gap: 11px; font-size: .86rem; font-weight: 400; color: var(--t-muted); line-height: 1.5; margin: 16px 0 4px; padding: 0 4px; cursor: pointer; } .t-cgv input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--t-primary); } .t-cgv a { color: var(--t-primary); text-decoration: underline; } /* Garanties (étape 5) — petites cartes sous le total + popup de détail. */ .t-guar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; } .t-guar-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--t-card); border: 1px solid var(--t-line); border-radius: 12px; padding: 14px 10px 11px; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; } .t-guar-card:hover { border-color: var(--t-primary); transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(12, 91, 134, .5); } .t-guar-card:hover .t-guar-link { text-decoration: underline; } .t-guar-eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t-muted); margin-top: 9px; } .t-guar-title { font-size: .85rem; font-weight: 600; line-height: 1.3; margin-top: 1px; } .t-guar-link { margin-top: auto; padding: 8px 0 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--t-primary); } .t-guar-link:hover { color: var(--t-primary-dark); text-decoration: underline; } .t-guar-link span { margin-left: 2px; } .t-guar-list { display: grid; gap: 8px; } .t-guar-row { display: flex; align-items: flex-start; gap: 13px; border-radius: 11px; padding: 10px; transition: background .3s; } /* Ligne mise en avant quand on ouvre la popup depuis une carte précise. */ .t-guar-row.is-target { background: var(--t-primary-soft); } .t-guar-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--t-primary-soft); color: var(--t-primary); } .t-guar-ic svg { width: 18px; height: 18px; } .tnl .t-guar-row h4 { font-family: 'Outfit', system-ui, sans-serif; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; margin: 2px 0 4px; color: var(--t-ink); } .t-guar-row p { font-size: .86rem; line-height: 1.5; color: var(--t-muted); margin: 0; } .t-guar-row b { color: var(--t-ink); font-weight: 600; } #checkout-embed:not(:empty) { margin-top: 22px; } /* ---------- Messages ---------- */ .tnl .feedback { border-radius: 11px; padding: 13px 16px; font-size: .92rem; margin-top: 16px; } .tnl .feedback.err { background: var(--t-red-soft); color: #a52a3c; } .tnl .feedback.info { background: var(--t-primary-soft); color: var(--t-primary-dark); } /* ---------- Modales ---------- */ .t-ov { position: fixed; inset: 0; z-index: 200; background: rgba(16, 28, 40, .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; } .t-modal { position: relative; background: #fff; border-radius: 18px; padding: 30px 28px 26px; width: 100%; max-width: 470px; max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(10, 25, 40, .3); font-family: 'Outfit', system-ui, sans-serif; color: var(--t-ink); } .t-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; background: #f2f3f8; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--t-muted); } .t-modal-x svg { width: 16px; height: 16px; } .t-modal-t { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; } .t-modal-s { font-size: .92rem; color: var(--t-muted); margin: 0 0 20px; } .t-modal .t-btn { width: 100%; margin-top: 18px; } .t-places { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .t-place { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: 1px solid var(--t-line); border-radius: 11px; background: #fff; padding: 12px 14px; cursor: pointer; font-family: inherit; text-align: left; transition: all .15s; } .t-place:hover { border-color: var(--t-primary); } .t-place.is-on { border-color: var(--t-primary); background: var(--t-primary-soft); } .t-place span { font-size: .94rem; } .t-place b { font-size: .82rem; color: var(--t-muted); font-weight: 600; } .t-surface-row { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px; font-size: .94rem; } .t-surface-row b { font-size: 1.15rem; } .t-range-input { width: 100%; accent-color: var(--t-primary); } .t-bounds { display: flex; justify-content: space-between; font-size: .78rem; color: var(--t-muted); } .t-reco { text-align: center; } .t-reco-ic { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 10px; } .t-reco p { font-size: 1rem; margin: 0 0 4px; line-height: 1.55; } .t-back-link { display: block; width: 100%; text-align: center; border: 0; background: transparent; font-family: inherit; font-size: .88rem; color: var(--t-muted); margin-top: 12px; cursor: pointer; } .t-aa-fields { display: grid; gap: 10px; } .t-aa-fields input { width: 100%; border: 1px solid var(--t-line); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: .96rem; outline: 0; } .t-aa-fields input:focus { border-color: var(--t-primary); } .t-aa-hp { position: absolute; left: -9999px; opacity: 0; height: 0; } .t-aa-hint { font-size: .82rem; color: var(--t-muted); margin: 10px 0 0; } .t-aa-date { background: var(--t-primary-soft); border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin-bottom: 12px; } .t-aa-msg { margin-top: 10px; font-size: .88rem; } .t-aa-msg.ok { color: var(--t-green); } .t-aa-msg.err { color: var(--t-red); } .t-aa-done { background: var(--t-green-soft); color: #14684a; border-radius: 11px; padding: 16px; font-size: .95rem; } /* ---------- Aide WhatsApp ---------- */ .t-wa { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: 16px 20px; margin-top: 34px; text-decoration: none; color: var(--t-ink); font-size: .92rem; transition: border-color .15s; } .t-wa:hover { border-color: #25d366; } .t-wa svg { width: 24px; height: 24px; flex: 0 0 24px; color: #25d366; } .t-wa-go { margin-left: auto; color: var(--t-primary); font-weight: 600; white-space: nowrap; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .tnl { padding: 18px 0 80px; } /* Le logo passe au-dessus, le stepper prend toute la largeur : on repasse en flux vertical, la grille à 3 colonnes n'a plus lieu d'être ici. */ .t-header-in { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 14px 11px; } .t-logo { font-size: .98rem; } .t-steps { align-self: stretch; width: auto; max-width: none; } .t-stepb { gap: 4px; } .t-stepb-dot { width: 22px; height: 22px; font-size: .7rem; } .t-stepb-ok { width: 12px; height: 12px; } .t-stepb + .t-stepb::before { top: 10px; height: 2px; } .t-stepb-l { font-size: .63rem; } .tnl h2.t-q { font-size: 1.12rem; } .t-grid2 { grid-template-columns: 1fr; } .t-fld-row { grid-template-columns: 1fr; gap: 0; } .t-prod { min-height: 0; padding: 22px 18px; } .t-prod-img { min-height: 130px; } .t-prod-img img { max-height: 140px; } .t-dcards { grid-template-columns: repeat(2, 1fr); gap: 9px; } .t-dcard { min-height: 108px; padding: 11px 12px; } /* La pastille (« ⚡ Même jour », « Complet »…) sort du coin haut-droit de la case, comme le badge « −x% » des durées : elle ne mange plus de hauteur. */ .t-dcard-tag { position: absolute; top: -9px; right: -6px; margin-top: 0; } .t-dcard-tag .t-tag { font-size: .68rem; gap: 3px; padding: 3px 8px; } .t-dcard-tag .t-tag-hot { background: var(--t-red); color: #fff; box-shadow: 0 2px 6px rgba(224, 71, 94, .35); } .t-dcard-tag .t-tag-off { background: #e6e8ef; color: #6b7482; box-shadow: 0 2px 6px rgba(20, 30, 50, .16); } .t-dcard-price { font-size: 1rem; } /* « + Plus de dates » : barre pleine largeur et basse sous les 4 dates — c'est une action, pas une 5ᵉ carte de jour. */ .t-dmore { grid-column: 1 / -1; min-height: 0; flex-direction: row; gap: 8px; padding: 11px 12px; } .t-dmore-plus { font-size: 1.2rem; } .t-dmore-lbl { font-size: .88rem; font-weight: 600; } .t-cal-wd, .t-cal-grid { gap: 2px; } .t-presets { grid-template-columns: repeat(3, 1fr); gap: 9px; } .t-preset { padding: 13px 6px 12px; } .t-preset-d { font-size: 1.12rem; } .t-preset-p { font-size: .88rem; } /* Raccourci vers le calendrier, sur les 2 cases libres de la 2ᵉ rangée : les durées longues se choisissent à la main, pas via un forfait. */ .t-preset-manual { grid-column: span 2; /* même hauteur que les forfaits voisins */ display: flex; align-items: center; justify-content: center; gap: 6px; border-style: dashed; background: transparent; color: var(--t-muted); padding: 13px 8px; } .t-preset-manual:hover { border-color: var(--t-primary); color: var(--t-primary); } .t-pm-i { font-size: 1.1rem; font-weight: 300; line-height: 1; } .t-pm-l { font-size: .84rem; font-weight: 500; } .t-rangebox { flex: 1 1 40%; } .t-nav { flex-direction: column-reverse; } .t-nav .t-btn { width: 100%; } .t-slot-list { grid-template-columns: 1fr; } .t-cal { padding: 14px 10px 8px; } .t-cal-d { height: 38px; font-size: .9rem; } .t-dcal .t-cal-d { height: 46px; } .t-dcal-n { font-size: .9rem; } .t-dcal-p { font-size: .58rem; } .t-guar { grid-template-columns: repeat(2, 1fr); gap: 8px; } .t-rrow { padding: 15px 16px; gap: 12px; } .t-total span:last-child { font-size: 1.4rem; } .t-modal { padding: 26px 20px 22px; } .t-places { grid-template-columns: 1fr; } }