@font-face { font-family: "euclidflex-bold"; src: url("/fonts/euclidflex-bold-webfont.woff2") format("woff2"), url("/fonts/euclidflex-bold-webfont.ttf") format("truetype"); } @font-face { font-family: "euclidflex-regular"; src: url("/fonts/euclidflex-regular-webfont.woff2") format("woff2"), url("/fonts/euclidflex-regular-webfont.ttf") format("truetype"); } body { background-color: #F6F6F6; font-family: "euclidflex-regular", sans-serif; } h1 { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; text-transform: uppercase; font-size: 23px; } h2 { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; font-size: 18px; } h3 { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; } a, b, .bold { font-family: "euclidflex-bold", sans-serif; } #back-button { margin: 0px; } /* bouton retour : même style que le sélecteur de langue (pilule blanche) */ #back-button a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; background-color: #ffffff; border-radius: 25px; color: var(--color-second); font-family: "euclidflex-bold", sans-serif; font-size: 16px; text-transform: uppercase; text-decoration: none; } #back-button a b { display: inline-flex; align-items: center; } /* ===== AdditionalInfos — formulaire « lieu de résidence » (maquette) ===== */ .title-create-card-guest { color: #000000; text-transform: none; /* pas en capitales */ font-family: "euclidflex-bold", sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; } #translation_select_address_in_list_below { color: #000000; font-size: 16px; margin: 0 0 16px; } #address-field { border: 1px solid var(--color-main); /* bordure verte */ border-radius: 12px; color: var(--color-main); /* texte vert */ background-color: #ffffff; width: 100%; /* remplit la largeur du bloc */ max-width: 100%; height: 48px; padding: 0 16px 0 44px; /* marge gauche pour le picto (épingle) */ background-position: 14px center; /* picto centré verticalement */ font-size: 16px; box-sizing: border-box; } #address-field::placeholder { color: var(--color-main); opacity: 0.6; } .menu-lang-button .bi-chevron-down { -webkit-text-stroke: 2px; } .menu-lang-button .bi-globe { margin-right: 2px; } #current-lang { color: #282828; font-family: "euclidflex-bold", sans-serif; font-size: 16px; text-transform: uppercase; margin-right: 2px; } .menu-lang-button { border: 0px; display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; margin-top: 0px; border-radius: 25px; } .menu-lang-content { border: 0; background-color: #ffffff; /* maquette : menu blanc (ex-#D5E8F3 bleu) */ border-radius: 16px; overflow: hidden; } /* autres langues listées : gris (comme les puces inactives du breadcrumb) */ .menu-lang-content a { color: #8A8A8A; } .lang-card { align-items: var(--align-lang-back-button); } .lang-card-element { min-width: 0; width: fit-content; height: fit-content; min-height: 13px; align-self: flex-start; } .header_separator { display: none; /* masqué pour geneva (maquette sans trait sous le header) */ } /* ===== Header : bandeau unique localisé par étape ========================= Un seul visuel pleine largeur sur #header-logo (remplace l'ancien système part1 + part2). Le bandeau varie selon trois axes, 100% en CSS : - la vue → classe .header- posée par HeaderBar (home / additionalInfos / createCard / deliveryCards / process) - la langue → attribut [data-lang] sur (posé par AppShellRoot) - le format → media query mobile plus bas (≤ 800px) Assets : /images/geneva/// Desktop_*_header_*.png (+ Mobile_* pour le format mobile) Désormais inutilisés pour geneva : .header-logo-part1 / .header-logo-part2. ------------------------------------------------------------------------- */ #header-logo { display: block; width: 80vw; max-width: 1120px; /* largeur native du bandeau desktop */ height: auto; aspect-ratio: 1120 / 191; /* ratio commun des bandeaux desktop */ margin: 20px auto; background-repeat: no-repeat; background-position: center; background-size: contain; } #header-logo .header-logo-part1, #header-logo .header-logo-part2 { display: none; /* plus utilisés : bandeau tout-en-un */ } /* --- Desktop · EN (langue par défaut / fallback) --- */ #header-logo.header-home { background-image: url("/images/geneva/EN/guest/Desktop_Guest_header_EN.png"); } #header-logo.header-additionalInfos { background-image: url("/images/geneva/EN/infos/Desktop_Info_header_EN.png"); } #header-logo.header-createCard { background-image: url("/images/geneva/EN/send/Desktop_Send_header_EN.png"); } #header-logo.header-deliveryCards { background-image: url("/images/geneva/EN/ready/Desktop_Ready_header_EN.png"); } #header-logo.header-process { background-image: url("/images/geneva/EN/proccessing/Desktop_Processing_header_EN.png"); } /* --- Desktop · FR --- */ [data-lang="fr"] #header-logo.header-home { background-image: url("/images/geneva/FR/guest/Desktop_Guest_header_FR.png"); } [data-lang="fr"] #header-logo.header-additionalInfos { background-image: url("/images/geneva/FR/infos/Desktop_Info_header_FR.png"); } [data-lang="fr"] #header-logo.header-createCard { background-image: url("/images/geneva/FR/send/Desktop_Send_header_FR.png"); } [data-lang="fr"] #header-logo.header-deliveryCards { background-image: url("/images/geneva/FR/ready/Desktop_Ready_header_FR.png"); } [data-lang="fr"] #header-logo.header-process { background-image: url("/images/geneva/FR/proccessing/Desktop_Processing_header_FR.png"); } /* --- Desktop · DE --- */ [data-lang="de"] #header-logo.header-home { background-image: url("/images/geneva/DE/guest/Desktop_Guest_header_DE.png"); } [data-lang="de"] #header-logo.header-additionalInfos { background-image: url("/images/geneva/DE/infos/Desktop_Info_header_DE.png"); } [data-lang="de"] #header-logo.header-createCard { background-image: url("/images/geneva/DE/send/Desktop_Send_header_DE.png"); } [data-lang="de"] #header-logo.header-deliveryCards { background-image: url("/images/geneva/DE/ready/Desktop_Ready_header_DE.png"); } [data-lang="de"] #header-logo.header-process { background-image: url("/images/geneva/DE/proccessing/Desktop_Processing_header_DE.png"); } /* ===== Largeur de page (desktop) alignée sur la largeur max du bandeau header Tous ces blocs sont en width:80vw et déjà centrés (margin:auto) ; on les plafonne à 1120px (= largeur native du bandeau header desktop) pour qu'au-delà d'un grand écran le contenu reste aligné sur le header au lieu de déborder. En dessous de ~1400px, 80vw < 1120px : le plafond est inactif (aucun impact). */ /* header et footer sont HORS de .body-content (autres régions du DOM) : ils ne peuvent pas hériter de sa limite, on les plafonne donc à part. */ .header-body, #footer { max-width: 1120px; } /* ===== Sélecteur de langue remonté à la hauteur du breadcrumb ============= Le wrapper (enfant direct du body, pleine largeur) est contraint à la largeur du contenu et sert de référence de positionnement ; on sort le sélecteur du flux de .header-body pour l'épingler en haut à droite, au niveau du breadcrumb. Le titre / bouton-retour restent dans .header-body. ------------------------------------------------------------------------- */ #breadcrumb-lang-wrapper { position: relative; width: 80vw; max-width: 1120px; margin: 0 auto; } .language-selector { position: absolute; top: 0; right: 0; z-index: 5; } /* Vues post-soumission (process / finale / échec) : plus de sélecteur de langue ni de retour → on resserre l'espace header/contenu (le padding-top de .body-content, prévu pour la ligne langue/breadcrumb, n'a plus lieu). */ #header-logo.header-process ~ #content .body-content, #header-logo.header-deliveryCards ~ #content .body-content, #header-logo.header-generateFail ~ #content .body-content { padding-top: 6px; } #header-logo-mobile { display: none; } .header-title { margin: 0; color: #000000; font-family: "euclidflex-bold", sans-serif; /* = EuclidFlexGeneva2017 (équivalent dispo) */ font-weight: 700; font-style: normal; text-transform: none; /* annule le h1 { text-transform: uppercase } du thème */ min-width: 0; font-size: 36px; /* "Bienvenue !" (×0,9) */ line-height: 36px; letter-spacing: -0.005em; /* -0.5% */ width: 100%; } .header-body { margin-top: 0; width: 80vw; min-width: 0px; display: var(--page-header); flex-direction: row-reverse; justify-content: space-between; } .header-body-element { margin: 0px; } /* ===== Breadcrumb : pilules par étape (maquette GTC) ====================== 3 étapes — GUESTS / INFOS / SEND. Étape active = pilule verte pleine (icône + label blancs) ; étapes inactives = icône + label gris (#8A8A8A), fond transparent. Séparateurs + numéro "1." masqués. NB : le fond vert pâle du CONTENEUR est volontairement omis pour l'instant. Icônes posées en background CSS — les du composant pointent vers des assets 404, on les masque et on utilise les SVG du kit : /images/geneva/icones/breadcrumb/__icon.svg -------------------------------------------------------------------------- */ #breadcrumb { width: fit-content; /* la barre épouse les puces (toutes langues) */ min-width: 0; max-width: 100%; justify-content: flex-start; align-items: center; gap: 0; /* segments verts consécutifs collés = pilule continue */ margin: 0 auto; flex-wrap: nowrap; background: #FFFFFF; /* barre de fond blanche */ border-radius: 999px; padding: 4px; } /* séparateurs masqués (les segments verts sont continus) */ #breadcrumb .breadcrumb_separator { display: none; } /* maquette = label seul, pas de "1." */ .breadcrumb_number, .breadcrumb_dot { display: none; } /* chaque étape = pilule horizontale (icône + label) */ .breadcrumb_step { flex-direction: row; align-items: center; gap: 8px; padding: 5px 18px; border-radius: 999px; background: transparent; } .breadcrumb_step p { color: #8A8A8A; /* gris inactif = gris des icônes */ font-family: var(--theme-font-family-bold); font-size: 14px; margin: 0; display: flex; align-items: center; } .breadcrumb_text { text-transform: uppercase; letter-spacing: 0.5px; } /* icône via background (l' du composant est masquée) */ .breadcrumb_img_wrap { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; } .breadcrumb_img_wrap img { display: none; } /* icônes inactives (grey) */ #breadcrumb_step1 .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Guest_grey_icon.svg"); } #breadcrumb_step2 .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Info_grey_icon.svg"); } #breadcrumb_step3 .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Send_grey_icon.svg"); } /* étape ACTIVE *et* étapes COMPLÉTÉES (passées) = vert, contenu blanc. Avec gap:0, les segments verts consécutifs se touchent et forment UNE pilule continue ; on n'arrondit que les extrémités (gauche = étape 1, droite = active), les jointures internes restant droites. Les étapes FUTURES restent grises. */ .breadcrumb_step.breadcrumb_active, .breadcrumb_step.breadcrumb_prev_active { background: var(--color-main); /* #006845 */ border-radius: 0; } /* extrémité gauche du segment vert : toujours l'étape 1 (progression linéaire) */ #breadcrumb_step1.breadcrumb_active, #breadcrumb_step1.breadcrumb_prev_active { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } /* extrémité droite du segment vert : l'étape courante */ .breadcrumb_step.breadcrumb_active { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .breadcrumb_step.breadcrumb_active p, .breadcrumb_step.breadcrumb_active .breadcrumb_text, .breadcrumb_step.breadcrumb_prev_active p, .breadcrumb_step.breadcrumb_prev_active .breadcrumb_text { color: #ffffff; } #breadcrumb_step1.breadcrumb_active .breadcrumb_img_wrap, #breadcrumb_step1.breadcrumb_prev_active .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Guest_white_icon.svg"); } #breadcrumb_step2.breadcrumb_active .breadcrumb_img_wrap, #breadcrumb_step2.breadcrumb_prev_active .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Info_White_icon.svg"); } #breadcrumb_step3.breadcrumb_active .breadcrumb_img_wrap, #breadcrumb_step3.breadcrumb_prev_active .breadcrumb_img_wrap { background-image: url("/images/geneva/icones/breadcrumb/Send_White_icon.svg"); } #translation_header_welcome span, #translation_header_welcome_one span { font-family: "euclidflex-regular", sans-serif; font-weight: 400; /* 2e ligne en regular (pas bold) */ font-style: normal; font-size: 29px; /* "… gratuitement en 3 étapes" (×0,9) */ line-height: 36px; letter-spacing: -0.005em; /* -0.5% */ text-transform: none; } #translation_discover_region { font-family: "euclidflex-bold", sans-serif; font-weight: 700; font-size: 24px; } #translation_discover_region p { font-family: "euclidflex-regular", sans-serif; /* sinon hérite du bold du parent */ font-weight: 400; font-size: 16px; } /* AdditionalInfos — titre du panneau infos : bleu, « tailored… » à la ligne + bold (classe portée par l'i18n geneva, scopée par l'id pour ne pas toucher le home) */ #translation_discover_region .infos-title { display: block; margin-bottom: 12px; color: #003DA5; font-family: "euclidflex-regular", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.25; } #translation_discover_region .infos-title b { font-family: "euclidflex-bold", sans-serif; font-weight: 700; } .reservation-element #card-and-discount { background-image: url("/images/geneva/reservation_image.jpg"); flex: 0 0 220px; /* image plus petite */ width: 220px; height: auto !important; align-self: stretch; border-radius: 16px; background-size: cover; background-position: center; } /* le bloc texte prend la place restante (image poussée à droite) */ .reservation-element .reservation-left { flex: 1 1 auto; min-width: 0; margin-right: 20px; } /* icônes des lignes → kit geneva (remplacement à l'affichage, src d'origine global) */ .reservation-item img[src*="icon_user.svg"] { content: url("/images/geneva/icones/account%201.svg"); } .reservation-item img[src*="icon_users"] { content: url("/images/geneva/icones/family%201.svg"); } .reservation-item img[src*="icon_bed"] { content: url("/images/geneva/icones/hotel%201.svg"); } .reservation-item img[src*="icon_date_range"] { content: url("/images/geneva/icones/calendar-today%201.svg"); } .reservation-item img[src*="icon_phone"] { content: url("/images/geneva/icones/phone%201.svg"); } /* footer-note : icône "question" avant le texte (l' d'origine 404 et est retirée par le composant) */ #footer-note #translation_footer_contact_establishment::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; background: url("/images/geneva/icones/question_icon.svg") no-repeat center / contain; } .card-and-discount-en { background-image: url("../images/geneva/card_and_discount_without_resort.png"); /* card_and_discount_mobile_en */ } .card-and-discount-fr { background-image: url("../images/geneva/card_and_discount_without_resort.png"); /* card_and_discount_mobile_fr */ } .card-and-discount-de { background-image: url("../images/geneva/card_and_discount_without_resort.png"); /* card_and_discount_mobile_de */ } .body-content { width: 80vw; max-width: 1120px; /* largeur de page : LIMITE UNIQUE pour la zone contenu. Les vues à l'intérieur (home-content, #reservation, …) sont en width:100% et en héritent automatiquement. */ margin: 0 auto; justify-content: space-between; min-width: 0px; } .body-panel { width: 100%; } #content { background-color: transparent; } .home-content { width: 100%; /* hérite de la limite de .body-content */ flex-direction: row-reverse; align-items: stretch; /* panneaux de hauteur égale (desktop) */ gap: 24px; /* 1120 − 643 − 453 = 24 */ padding-top: 0px; } .panel-details { display: flex; flex-direction: row; /* texte à gauche, téléphone à droite (maquette) */ align-items: flex-start; gap: 16px; width: 100%; /* tient dans le panneau (453px) au lieu de 40vw */ } /* colonne texte (tout SAUF la colonne image téléphone : panel_side1 = home, panel_side3 = createCard) */ .panel-details > div:not(:has(img[src*="panel_side1"])):not(:has(img[src*="panel_side3"])) { flex: 1 1 auto; min-width: 0; } /* colonne image téléphone (à droite) */ .panel-details > div:has(img[src*="panel_side1"]) { flex: 0 0 140px; } .panel-details > div:has(img[src*="panel_side3"]) { flex: 0 0 150px; } .panel-details > div:has(img[src*="panel_side1"]) img, .panel-details > div:has(img[src*="panel_side3"]) img { margin-top: 0 !important; /* annule le margin-top:20px inline */ max-width: 100% !important; } /* ============================================================ Panneau de l'étape createCard — maquette "wallet" (badge wallet + titre + sous-texte + visuel "My wallet"). Scopé via .panel-wallet-title, injecté uniquement pour createCard (le home garde son contenu/fond). ============================================================ */ .left-body-panel:has(.panel-wallet-title) { background-color: #E7F1EB; /* vert pâle (cohérent avec la vue process) */ } .panel-wallet-badge { display: block; width: 72px; height: auto; margin-bottom: 18px; } .panel-wallet-title { display: block; color: var(--color-second); font-family: "euclidflex-bold", sans-serif; font-size: 18px; line-height: 1.3; } .panel-wallet-sub { display: block; color: #2c2c2c; font-family: var(--theme-font-family); font-weight: var(--font-weight-normal); font-size: 16px; line-height: 22px; margin-top: 10px; } .close-modal-more-info { display: none; } #available-card-management { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 80%; /* aligné sur le bouton START (#start-button-section) */ box-sizing: border-box; margin: 0 auto 20px; /* centré ; 20px = écart avec le bouton */ background-color: #ffffff; /* boîte blanche (maquette) */ border-radius: 16px; color: #006845; padding: 10px 20px; /* moins haut */ } /* le compteur "4" (carré vert pâle) à GAUCHE, le libellé à droite (DOM = [texte][compteur], on remonte le compteur via order) */ #available-card-management .children-buttons { order: -1; background-color: #E6F0EC; /* carré vert pâle */ border: 0; border-radius: 10px; flex: 0 0 auto; width: 36px; /* carré */ height: 36px; padding: 0; margin-right: 0; align-items: center; justify-content: center; } /* les vides (boutons +/− ailleurs) ne servent pas ici */ #available-card-management .children-buttons span { display: none; } /* le "6" : pas de marge de paragraphe ni de line-height qui gonfle la box */ #available-card-management #available-card-quantity { margin: 0; line-height: 1; } #available-card-text { color: #006845; /* libellé vert */ padding-left: 0; text-transform: none; /* pas de capitales */ font-family: "euclidflex-bold", sans-serif; font-size: 18px !important; font-weight: bold; margin: 0; } #available-card-quantity { color: var(--color-main); font-family: "euclidflex-regular", sans-serif !important; /* pas en bold */ font-weight: 400; font-size: 20px !important; } #start-create-card-button { border-color: var(--color-main); } /* flèche "→" APRÈS le label, sur les boutons "suivant" (home START + Continuer + generate) */ #start-create-card-button::before { content: none; } #start-create-card-button::after, .content-create-card-buttons .action-button::after, .content-create-card-buttons .disabled-action-button::after { content: "→"; } .action-button-inner { color: var(--color-main); } #children-management { background-color: #ffffff; border-radius: 0 0 25px 25px; flex-direction: row; box-shadow: none; margin: 10px; gap: 5px; } #children-count-management { display: var(--children-management-count); padding: 15px; align-items: center; } #children-count-management p { color: var(--color-main); font-family: "euclidflex-bold", sans-serif; font-size: var(--font-size-16); line-height: 24px; max-width: 70%; } .number-children-text { font-size: 16px; padding-left: 10px; padding-right: 10px; } #children-management-info-block { display: var(--children-management-info); width: 90%; background-color: #E5F0EC; border-radius: 5px; padding: 10px; } #children-management-info-block p { margin: 0; margin-left: 15px; } #children-management-info-block i { font-size: 16px; } .info-children-text { font-size: 14px; } #traveler-type { display: flex; flex-direction: row; width: 90%; justify-content: space-between; margin-bottom: 20px; } #children-activation { display: flex; flex-direction: row; width: 90%; justify-content: space-between } .children-radio-buttons, .traveler-type-radio-buttons { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: "euclidflex-bold", sans-serif; margin-right: 20px; } .traveler-type-radio-buttons { margin-top: 15px; } select { appearance: none; width: 85%; margin: 0px; max-width: 100%; margin-bottom: 20px; } #segmentation-management { display: flex; flex-direction: row; align-items: center; /* label et dropdown alignés verticalement */ justify-content: space-between; gap: 16px; width: 100%; margin-top: 16px; } #segmentation-management::after { content: none; /* on retire l'ancien chevron mal placé */ } #segmentation-management p { flex: 1 1 0; min-width: 0; margin: 0; color: #000000; font-size: 16px; line-height: 1.3; } #segmentation-management select { flex: 0 0 auto; width: 50%; max-width: 50%; margin: 0 !important; height: 44px; padding: 0 38px 0 16px; /* place pour le chevron à droite */ border: 1px solid #C7C7C7; border-radius: 12px; background-color: #ffffff; color: #000000; font-size: 16px; box-sizing: border-box; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .children-radio-buttons label, .traveler-type-radio-buttons label { margin-left: 5px; margin-bottom: 0px; font-size: 16px; } .children-buttons { border: 1px solid var(--color-main); border-radius: 10px; height: 40px; justify-content: space-around; width: auto; margin-right: 25px; } .children-quantity { border-left: 1px solid var(--color-main); border-right: 1px solid var(--color-main); margin: 0; height: 40px; display: flex; align-items: center; padding-left: 10px; padding-right: 10px; width: 15px; justify-content: center; } #removeChildButton i, #addChildButton i { color: var(--color-main); padding-left: 10px; padding-right: 10px; } #removeChildButton, #addChildButton { display: flex; justify-content: center; } input[type='radio'] { appearance: none; background-color: #fff; margin: 0; font: small-caption; color: currentColor; width: 18px; height: 18px; border: 2px solid #006845; border-radius: 50%; display: grid; place-content: center; outline: none; } input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em #006845; outline: 0px; } input[type="radio"]:focus { outline: 0px; } input[type="radio"]:checked:focus { outline: 0px; } input[type="radio"]:checked::before { transform: scale(1); } .child-radio-button, .traveler-type-radio-button { display: flex; align-items: center; margin-bottom: 5px; min-width: 100px; } .children-count-value { color: var(--color-main); font-family: "euclidflex-bold", sans-serif; font-size: var(--font-size-16); border-left: 1px solid var(--color-main); border-right: 1px solid var(--color-main); margin: 0; height: 40px; display: flex; align-items: center; padding-left: 10px; padding-right: 10px; width: 15px; justify-content: center; } .icon-establishment-contact { max-width: 18px; max-height: 18px; } .icon-circle { border: 1.5px solid var(--color-main); } .children-increment i, .children-decrement i { color: var(--color-main); padding-left: 10px; padding-right: 10px; } .icon-minus, .icon-plus { margin-left: 10px; margin-right: 10px; } .icon-minus::before, .icon-plus::before, .icon-plus::after { background-color: var(--color-main); } .children-text, .traveler-text { font-family: "euclidflex-bold", sans-serif; color: #000000; font-size: 16px; width: 60%; line-height: 24px; } .children-text { padding-left: 0px; } #no-children-managment-block { width: 90%; } .enabled-action-button { background-color: #282828; color: white; font-family: "euclidflex-bold", sans-serif; border: 0; width: 100%; height: 42px; border-radius: 50px; font-size: 16px; } .enabled-action-button:hover { background-color: #ffffff !important; color: #282828; border: 1px solid #282828; font-family: "euclidflex-bold", sans-serif; } #discover-resort-pass-button:hover { background-color: var(--color-button-hover) !important; } #discover-resort-pass-button:active { background-color: #282828 !important; color: white; } #discover-resort-pass-button-2:active { background-color: #282828 !important; color: white; } /* ===== Boutons d'action (maquette GTC) ==================================== Rendus par : .action-button (enable) / .disabled-action-button (disable). Texte blanc. Fonds par état : enable #282828 · hover #C7C7C7 · disable #006845. Pilule, hauteur fixe, padding asymétrique + gap (flèche/icône). NB : disable = vert et enable = foncé, selon la spec fournie. ------------------------------------------------------------------------- */ .action-button, .disabled-action-button { box-sizing: border-box; /* la hauteur inclut le padding */ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 643px; height: 48px; border: 0; border-radius: 100px; padding: 11px 58px 11px 77px; color: #ffffff; font-family: "euclidflex-bold", sans-serif; font-size: 16px; } .action-button { background-color: #006845; } /* enable (vert) */ .action-button:hover { background-color: #282828 !important; color: #ffffff; } /* hover (foncé) */ .disabled-action-button { background-color: #C7C7C7; } /* disable (gris) */ .action-button .action-button-inner, .disabled-action-button .action-button-inner { color: #ffffff; /* le label vit dans ce span */ display: inline-flex; align-items: center; gap: 8px; } #start-button-section { width: 80%; margin: 0 auto; /* l'écart avec la boîte cartes vient de son margin-bottom ; haut/bas du panneau = padding 24px symétrique */ } .right-body-panel { flex: 643 1 0; /* largeur ≈ 643px à 1120 (ratio 643:453), rétrécit en dessous */ max-width: 643px; min-width: 0; box-sizing: border-box; padding: 24px 0; /* espace haut/bas entre le contenu et les bords du panneau */ display: flex; flex-direction: column; justify-content: center; /* contenu (boîte + bouton) centré verticalement */ align-items: center; background-color: #E6F0EC; border-radius: 25px; } /* breadcrumb déplacé dans le panneau (geneva : breadcrumbInPanel) */ .right-body-panel #breadcrumb { margin: 0 auto 32px; } /* texte d'intro au-dessus de la boîte blanche */ .panel-intro-text { width: 80%; margin: 0 auto 16px; color: #000000; font-family: "euclidflex-bold", sans-serif; font-weight: 700; font-size: 18px; text-align: center; } .right-body-panel-content { background-color: #D5E8F3; border-radius: 25px; color: #000000; padding: 15px 20px 20px 20px; display: flex; width: 100%; height: fit-content; justify-content: space-between; } .right-block-side-image p { margin: 0; } .right-block-side-image img { max-width: 80%; float: right; } .left-body-panel { box-sizing: border-box; border-radius: 25px; background-color: #D5E8F3; border-radius: 25px; color: #000000; padding: 15px 20px 20px 20px; flex: 453 1 0; /* largeur ≈ 453px à 1120 (ratio 643:453) */ max-width: 453px; min-width: 0; height: fit-content; } #translation_more_info { font-weight: bold; font-family: "euclidflex-bold", sans-serif; color: #0D447B; } .left-body-panel-desc { color: #282828; padding-right: 20px; padding-top: 5px; min-width: auto; font-size: 16px; line-height: 24px; } .moreinfo-button, .lessinfo-button { color: #0D447B; padding-left: 0px; border: 0; background: none; font-family: "euclidflex-bold", sans-serif; font-size: 16px; text-align: left; } .moreinfo-button:hover, .lessinfo-button:hover { background: none; } .moreinfo-button i, .lessinfo-button i { padding-right: 10px; font-family: "euclidflex-bold", sans-serif; -webkit-text-stroke: 2px; } #modal-more-info { margin: 0; background-color: #D5E8F3; border-radius: 0 0 25px 25px; position: relative; box-shadow: none; padding: 0; border: 0px; width: 100%; } #modal-more-info #translation_issued_by { font-size: var(--font-size-12); } #modal-more-info p, #modal-more-info h2 { font-size: var(--font-size-16); } #modal-more-info p { line-height: 24px; } #right-block-desc { width: 70%; } .card-guest-header { border-radius: 20px 20px 0 0; font-size: 18px; text-transform: uppercase; font-family: "euclidflex-bold", sans-serif; height: 50px; padding-top: 0; } .card-guest-body { border-radius: 0 0 20px 20px; } /* ===== CreateCard (étape 3) — cartes empilées façon maquette ============== */ /* titre de section : bold noir, non-caps (était h1 uppercase) */ #content-create-card > h1 { color: #000000; text-transform: none; font-family: "euclidflex-bold", sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 16px; } /* conteneur : cartes empilées verticalement (était flex-wrap row) */ #card-guest-content, .card-guest-content { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px; width: 100%; margin: 8px 0 0; } /* VcardChildren enveloppe chaque carte dans .body-panel.right-body-panel : on neutralise ce wrapper dans le contexte createCard */ .card-guest-content .right-body-panel { display: block; width: 100%; max-width: none; min-width: 0; flex: none; padding: 0; background: transparent; border-radius: 0; } /* la carte : fond blanc, arrondi */ .card-guest-content .card-guest { width: 100%; min-width: 0; max-width: none; margin: 0; flex: none; background: #ffffff; border-radius: 16px; padding: 20px; box-sizing: border-box; } /* titre de carte : texte vert, sans barre ni majuscules */ .card-guest-content .card-guest-header { background: transparent; border-radius: 0; height: auto; padding: 0; margin-bottom: 14px; text-transform: none; } .card-guest-content .card-guest-header p { color: var(--color-main); font-family: "euclidflex-bold", sans-serif; font-size: 18px; height: auto; } /* corps : transparent, sans ombre */ .card-guest-content .card-guest-body { background: transparent; box-shadow: none; border-radius: 0; } /* libellés masqués (maquette = placeholders dans le champ) */ .card-guest-content .card-guest-body label { display: none; } /* le wrapper .input-field est bridé à 500px/95% (global) → pleine largeur de la carte */ .card-guest-content .input-field { width: 100%; max-width: 100%; } /* inputs gris arrondis */ .card-guest-content .card-guest-body input { width: 100%; max-width: 100%; /* le global bride à max-width:300px → on l'annule */ min-width: 0; height: 48px; margin: 0 0 12px; padding: 0 16px; background: #F0F0F0; border: 1px solid transparent; border-radius: 12px; box-sizing: border-box; color: #000; } /* bouton "Add a person" : pilule verte outline (secondaire) */ .add-card-plus { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 24px; margin-top: 4px; border-radius: 100px; border: 1px solid var(--color-main); background: #ffffff; color: var(--color-main); font-family: "euclidflex-bold", sans-serif; font-size: 16px; cursor: pointer; box-sizing: border-box; } .add-card-plus::before { content: "+"; font-size: 20px; line-height: 1; } /* bouton "Continue" (generate) : pleine largeur (pas de double inset), sans ✓ */ #generateButton::before { content: none; } #content-create-card .content-create-card-buttons { width: 100%; padding: 0; } #content-create-card .content-create-card-buttons .action-button, #content-create-card .content-create-card-buttons .disabled-action-button { width: 100%; max-width: 100%; } .card-guest-header p { display: flex; align-items: center; height: 100%; font-size: 16px; } #translation_all_infos_correct { font-size: 16px; } .guest-number { padding-left: 5px; } input[type=text], input[type=email], input[type=date] { border-radius: 15px; height: 25px; margin-bottom: 5px; color: black; } #mail-to-send-all-cards { border-radius: 10px; padding: 15px; border: 0px; color: black; } .send-card-to, .send-card-to-name { color: black; font-family: "euclidflex-bold", sans-serif; } .content-card { align-self: stretch; /* prend toute la largeur du panneau... */ box-sizing: border-box; width: 100%; padding: 0 24px; /* ...marge gauche/droite ; pas de padding-bottom (global=30px) */ background-color: transparent; /* pas de fond : évite le double cadre vert dans le panneau */ border-radius: 25px; } /* le bloc des questions est bridé à 420px dans le global → on l'annule pour geneva */ #additional-infos { max-width: none; gap: 12px; /* petit espace entre les cartes blanches */ } /* bouton "Continuer" aligné sur le contenu de la content-card. (.content-create-card-buttons est un FRÈRE de .content-card, donc il ne subit pas son padding de 24px → on le rajoute ici pour aligner le bouton sur les blocs) */ .content-create-card-buttons { width: 100%; min-width: 0; box-sizing: border-box; padding: 0 24px; } /* la marge basse du wrapper d'adresse créait un gap résiduel sous la résidence */ #create-card-postal-address { margin-bottom: 0; } /* ===== BLOC 2 — « What type of visitor are you? » : carte blanche + toggle segmenté ===== */ #traveler-type { display: flex; flex-direction: column; /* titre au-dessus, toggle en dessous */ width: 100%; gap: 14px; margin-bottom: 0; } .traveler-text { color: #000000; font-family: "euclidflex-bold", sans-serif; font-weight: 700; font-size: 18px; text-transform: none; width: 100%; margin: 0; } .traveler-type-radio-buttons { display: flex; flex-direction: row; gap: 8px; width: 100%; margin: 0; } .traveler-type-radio-button { flex: 1; display: block; min-width: 0; margin: 0; } .traveler-type-radio-button input[type="radio"] { display: none; /* on masque le rond radio */ } .traveler-type-radio-button label { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 999px; border: 1px solid transparent; background: #E5E5E5; /* non sélectionné : gris */ color: #8A8A8A; font-family: "euclidflex-bold", sans-serif; font-size: 16px; margin: 0; cursor: pointer; box-sizing: border-box; } .traveler-type-radio-button input[type="radio"]:checked + label { background: #E6F0EC; /* sélectionné : pilule vert pâle, bordure + texte verts */ border-color: var(--color-main); color: var(--color-main); } .additional-infos-block { background: #ffffff; /* carte blanche derrière chaque question */ border: 0; border-radius: 16px; padding: 20px; } .send-all-guest-card-to-one-mail { max-width: 100%; } /* ============================================================ Vue "process" (« Preparing your cards. ») — maquette geneva. Panneau vert pâle → UNE carte blanche : [anneau + icône téléphone + texte] à gauche, photo QR à droite. Titre + sous-texte posés sur le panneau, au-dessus de la carte (sous-texte = .process-subtext-top, rendu pour geneva uniquement). Le texte « vert » est masqué. ============================================================ */ #content-process-card { width: 100%; max-width: 100%; box-sizing: border-box; background: #E7F1EB; /* vert pâle */ border-radius: 24px; padding: 32px 36px 36px; } .title-process-card-guest { text-transform: none; color: var(--color-second); /* noir */ font-family: "euclidflex-bold", sans-serif; font-size: 30px; line-height: 1.2; margin: 0 0 6px; } .process-subtext-top { color: #2c2c2c; font-family: var(--theme-font-family); font-weight: var(--font-weight-normal); font-size: 16px; line-height: 24px; width: 100%; max-width: 660px; margin: 0 0 24px; } /* carte blanche unique (porte le fond blanc + l'ombre) */ .content-process-card-body { width: 100%; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 32px; background: #ffffff; border-radius: 20px; padding: 32px 40px; } /* colonne gauche : anneau + icône + texte, centrés */ .process-left-body-panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* la "carte interne" devient transparente (le blanc vient du parent) */ .process-left-body-panel .process-pdf-loading-block, .process-left-body-panel .process-pdf-fail-block { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; align-items: center; } /* sous-texte (dans le panneau) et « Let's be greener » : non rendus ici */ .process-left-body-panel .processing-green-text, .process-left-body-panel .processing-blue-text { display: none; } /* anneau gris (statique) */ .process-pdf-loading-block { position: relative; width: 132px; height: 132px; margin: 0 auto 24px; } /* Le GIF */ .process-pdf-loading-block img.image-center { width: 132px; height: 132px; display: block; } /* Le téléphone au centre */ .process-pdf-loading-block::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); background: url("/images/geneva/icones/Desktop_Processing_PhoneG_icon_EN.svg") center center no-repeat; background-size: contain; pointer-events: none; } #translation_processing_cards_info { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; } .process-pdf-loading-block p, .process-pdf-fail-block p { margin: 0; font-size: 18px; } #translation_fail_processing_cards_info { color: #727272; } /* colonne droite : photo QR, à l'intérieur de la carte */ /* note statistique, intégrée dans le panneau sous le bouton Continue. Override de styles.css (#info_asterix { width:60vw; margin:auto }) qui la faisait déborder du panneau (panneau en align-items:center). */ .content-create-card-asterix#info_asterix { width: 100%; max-width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 0 24px; /* aligne le texte avec le bouton Continue (même retrait) */ font-size: 12px; line-height: 1.35; color: #5a5a5a; text-align: left; } .process-right-body-panel { flex: 0 0 auto; display: flex; justify-content: center; } #pdf-sending-img { width: 300px !important; max-width: 100%; height: auto; border-radius: 14px; } .process-body-panel-fantom { display: none; } /* bandeau bleu « HELLO GENEVA — Your smart guide to Geneva » sous la carte */ .process-hellogeneva-banner { display: block; width: 100%; height: auto; margin-top: 24px; border-radius: 16px; } .newsletter-right-body-panel img { width: 20vw !important; } .newsletter-right-body-panel { /*margin-top: 40px;*/ justify-content: center; /*margin-left: 30px;*/ } #newsletter-box { display: var(--newsletter-subscribing); background-color: #FFCD00; padding: 30px 20px; border-radius: 20px; left: -20px; position: relative; width: 100%; /* margin-top: 40px;*/ } #newsletter-right-image { margin-top: 100px; margin-left: 50px; margin-right: 50px; } #newsletter-right-image img { max-width: 300px; } #translation_wish_you_great_time { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; font-size: 20px; } .newsletter-left-body-panel { width: 100%; max-width: 90%; } .newsletter-left-body-panel .title-checkspam { color: var(--color-second); font-size: 20px; margin-top: 0; } .title-newsletter, .newsletter-right-body-panel { margin-bottom: 22px; margin-top: 0px; } #subscribe-newsletter-button { max-width: 250px; } #translation_checkbox_newsletter_text, #translation_checkbox_specialoffer_text { font-family: "euclidflex-bold", sans-serif; } #mail-subscribe { border: 0px; color: black; height: 42px; width: 80%; max-width: unset; margin-top: 0px; } #translation_checkbox_newsletter_subtext, #translation_checkbox_newsletter_text { font-size: 16px; } #discover-resort-pass-button { color: var(--color-second); border: 2px solid var(--color-second); max-width: 190px; font-family: "euclidflex-bold", sans-serif; height: 48px; } input[type=checkbox] { -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; -ms-appearance: checkbox !important; -o-appearance: checkbox !important; appearance: checkbox !important; width: 20px; height: 20px; } input[type=checkbox]:before { font-family: initial; content: normal; font-size: 15px; color: black; display: block; margin-right: 0px; border: 2px solid var(--color-second); border-radius: 3px; width: 20px; height: 20px; } #reservation { /* même largeur que le panneau droit (cartes) à TOUTES les tailles : le panneau droit = (conteneur − gap 24) × 643/1096 (ratio flex 643:453). On reproduit ce calcul ici puisque #reservation est hors de home-content. */ width: calc((100% - 24px) * 643 / 1096); max-width: 643px; margin: 0 auto 0 0; /* aligné à gauche (sous le panneau cartes) */ background-color: transparent; } .reservation-element { width: 100%; /* remplit #reservation (= largeur du panneau cartes) */ box-sizing: border-box; background-color: #ffffff; border-radius: 25px; padding: 20px; margin-left: 0; margin-bottom: 20px; max-width: 100%; min-width: 0; } #footer-note { background-color: transparent; color: #3F785C; font-weight: normal; } .reservation-left h2 { margin-top: 0; /* moins de marge en haut du titre */ } #translation_your_reservation { font-family: "euclidflex-bold", sans-serif; color: #8A8A8A; /* gris */ text-transform: uppercase; /* caps */ letter-spacing: 0.5px; font-weight: bold; font-size: 16px; } .reservation-item { color: #000000; padding-bottom: 0px; font-size: 16px; /* texte des lignes à côté des icônes */ } /* Genève : ligne hôtel = nom seul (rue + CP + ville masqués) */ #reservationEstablishment .reservation-establishment-address { display: none; } #translation_copyright { font-size: 10px; } #footer-note { width: 100%; } #footer { width: 80vw; } #footer-links a { font-family: "euclidflex-regular", sans-serif; } #footer-copyright { display: flex; flex-direction: column-reverse; gap: 20px; } #footer-copyright a { text-decoration: underline; } .content-process-card-body { width: 100%; } #subscribeNews, #subscribeSpecialOffer { /* background-color: white; */ border: 0px; border-radius: 7px; } #newsletter-left-panel { min-width: 50%; } #subscribeNews::before, #subscribeSpecialOffer::before { border: 0px; width: 25px; height: 25px; margin: 0; } .newsletter-right-body-panel-done { margin-top: 40px; text-align: center; } .newsletter-blue-text { font-family: "euclidflex-bold", sans-serif; font-size: 20px; } #newsletter-first-block { display: flex; align-items: center; } #newsletter-first-blocks { width: 60%; } .title-newsletter, #translation_well_done, .newsletter-left-body-panel h3 { width: 100%; } #newsletter-second-block { display: var(--newsletter-subscribing); } .image-desktop { display: inline; height: fit-content; } .image-mobile { display: none; } #discover-resort-pass-button-2 { padding: 0 20px; max-width: fit-content; } #footer img { margin-bottom: 47px; height: 57px; width: fit-content; } /* ============================================================ Vue finale (deliveryCards) — maquette "ready" geneva. 3 zones : héros (carte verte, 2 colonnes) / bande e-mail / rangée du bas (Newsletter | Culture | Print). ============================================================ */ /* en-tête "All set!" masqué : la maquette démarre sur le héros */ #header-done-view { display: none; } .done-view-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .done-view-block { border-radius: 16px; padding: 24px; background: #ffffff; box-sizing: border-box; } .done-view-block--span-2 { grid-column: span 2; } .done-view-block--span-3 { grid-column: span 3; } /* ── Zone 1 : héros ──────────────────────────────────────── */ .done-view-block--hero { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; background: #E7F1EB; padding: 28px 32px; } /* colonne gauche : carte QR + logo + badges */ .hero-qr-col { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-qr-col .done-view-qr-code { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); } .hero-qr-col .done-view-qr-code img, .hero-qr-col .done-view-qr-code-placeholder { width: 168px; height: 168px; border: 0; border-radius: 0; background: #fff; } .hero-hg-logo { display: block; height: 22px; width: auto; margin: 16px 0 14px; } .hero-qr-col > p { margin: 0 0 10px; font-size: 13px; color: #4b4b4b; } .hero-store-badges { display: block; width: 200px; max-width: 100%; height: auto; } /* colonne droite : infos + étapes + coupon */ .hero-info-col { display: flex; flex-direction: column; } .hero-info-col > h3 { margin: 0 0 4px; font-size: 24px; font-family: "euclidflex-bold", sans-serif; color: var(--color-second); } .hero-info-col > p { margin: 0 0 20px; font-size: 15px; color: #4b4b4b; } /* étapes : icône SIM + liste numérotée */ .hero-steps { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; } .hero-sim-icon { width: 40px; height: auto; flex: 0 0 auto; } .hero-steps-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .hero-steps-list li { display: flex; align-items: center; gap: 12px; font-family: "euclidflex-bold", sans-serif; font-size: 16px; color: var(--color-main); } .hero-steps-list li::before { content: none; } .hero-steps-list li span { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-main); background: #fff; color: var(--color-main); font-size: 13px; font-weight: 700; } /* sous-carte coupon-ID */ .hero-coupon { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 14px; padding: 16px 20px; } .hero-coupon > div:first-child { flex: 0 0 auto; text-align: center; } .hero-coupon .done-view-access-code-label { display: block; margin-bottom: 6px; color: var(--color-main); font-size: 13px; } .hero-coupon .done-view-access-code { display: inline-block; margin: 0; padding: 4px 8px; border: 0; background: transparent; font-family: "euclidflex-bold", sans-serif; font-size: 22px; letter-spacing: 4px; color: var(--color-second); } .hero-coupon-text { flex: 1 1 auto; } .hero-coupon-text p:first-child { margin: 0 0 4px; font-family: "euclidflex-bold", sans-serif; font-size: 14px; color: var(--color-main); } .hero-coupon-text p:last-child { margin: 0; font-size: 13px; color: #4b4b4b; } /* ── Zone 2 : bande e-mail (pleine largeur, sans carte) ────── */ .done-view-block--email { background: transparent; display: flex; align-items: center; gap: 16px; padding: 4px 8px; } .email-icon { flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #eef2f0; box-sizing: border-box; } .email-text p:first-child { margin: 0 0 2px; font-family: "euclidflex-bold", sans-serif; font-size: 15px; color: var(--color-main); } .email-text p:last-child { margin: 0; font-size: 14px; color: #6b6b6b; } /* ── Zone 3 : rangée du bas ──────────────────────────────── */ .done-view-list { padding-left: 0; list-style: none; } /* ── Zone 3 : carte blanche = Newsletter (gauche) + Culture grise (droite) ── */ .done-view-block--engage { background: #ffffff; display: flex; flex-direction: row; align-items: stretch; gap: 28px; padding: 28px 32px; } /* colonne gauche : newsletter */ .done-view-block--engage #content-newsletter { flex: 1.3 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .done-view-block--engage #content-newsletter h2 { margin: 0 0 2px; font-family: "euclidflex-bold", sans-serif; font-size: 17px; line-height: 1.2; text-transform: none; color: var(--color-second); } .done-view-block--engage #content-newsletter > p { margin: 0 0 10px; font-size: 17px; line-height: 1.2; color: #4b4b4b; } .done-view-block--engage #mail-subscribe { width: 100%; max-width: 420px; height: 42px; margin: 0; padding: 0 16px; border: 1px solid #cfcfcf; border-radius: 10px; background: #fff; box-sizing: border-box; font-size: 15px; } .done-view-block--engage .checkbox-subscribe-block { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; } .done-view-block--engage .checkbox-subscribe-block label, .done-view-block--engage #translation_checkbox_newsletter_text { font-family: var(--theme-font-family); font-weight: var(--font-weight-normal); font-size: 13px; line-height: 1.25; color: #6b6b6b; } /* case à cocher : visible avant cochage (bordure) — cochée = verte */ .done-view-block--engage #subscribeNews { -webkit-appearance: none !important; appearance: none !important; flex: 0 0 auto; width: 16px; height: 16px; margin: 0; border: 1.5px solid #b0b0b0; border-radius: 4px; background: #fff; position: relative; cursor: pointer; } .done-view-block--engage #subscribeNews:checked { background: var(--color-main); border-color: var(--color-main); } .done-view-block--engage #subscribeNews:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* colonne droite : Culture, carte grise nichée */ .engage-culture { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #ededed; border-radius: 14px; padding: 28px 24px; } .engage-culture h3 { margin: 0 0 2px; font-family: var(--theme-font-family); font-weight: var(--font-weight-normal); font-size: 16px; text-transform: none; color: #2c2c2c; } .engage-culture p { margin: 0 0 18px; font-size: 16px; color: #2c2c2c; } /* ── Boutons "contour" : label NOIR (geneve.com + Subscribe now) ── */ .engage-culture .action-button, .done-view-block--engage #subscribe-newsletter-button { width: auto; min-width: 0; max-width: none; height: auto; padding: 11px 26px; background: #fff; border: 1.5px solid var(--color-second); border-radius: 999px; } .engage-culture .action-button .action-button-inner, .done-view-block--engage #subscribe-newsletter-button .action-button-inner { color: var(--color-second); font-family: "euclidflex-bold", sans-serif; font-size: 14px; } .engage-culture .action-button::before, .engage-culture .action-button::after, .done-view-block--engage #subscribe-newsletter-button::before, .done-view-block--engage #subscribe-newsletter-button::after { content: none; } /* survol : fond foncé (#282828 via le global !important) + label blanc */ .engage-culture .action-button:hover, .done-view-block--engage #subscribe-newsletter-button.action-button:hover { border-color: #282828; } .engage-culture .action-button:hover .action-button-inner, .done-view-block--engage #subscribe-newsletter-button.action-button:hover .action-button-inner { color: #ffffff; } /* désactivé (Subscribe tant que e-mail/case invalides) : grisé */ .done-view-block--engage #subscribe-newsletter-button.disabled-action-button { background: #ffffff; border-color: #d6d6d6; cursor: not-allowed; } .done-view-block--engage #subscribe-newsletter-button.disabled-action-button .action-button-inner { color: #bcbcbc; } /* ── Zone 4 : bande "Need to print" (outils PDF / e-mail) ───────── */ .done-view-block--print { background: #fff; border: 1px solid #e6e6e6; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; } .print-text h3 { margin: 0 0 2px; font-family: "euclidflex-bold", sans-serif; font-size: 16px; text-transform: none; color: var(--color-second); } .print-text p { margin: 0; font-size: 13px; color: #6b6b6b; } .print-actions { display: flex; gap: 12px; flex: 0 0 auto; } .print-actions .action-button, .print-actions .disabled-action-button { width: auto; max-width: none; padding: 0 22px; } .action-button { margin-bottom: 10px; } #header-done-view { text-align: center; } #header-done-view .title-done-view { font-weight: bold; font-size: clamp(1.5rem, 1rem + 2vw, 3rem); } @media (max-width: 1700px) { .header-title { width: 100%; } } @media (max-width: 1200px) { #header-logo { width: 100%; } .header-title { width: 100%; } .home-content { width: 80vw; } #footer-note p { width: 80vw; } } @media (max-width: 800px) { h2 { font-size: 16px; } /* Header : bandeau mobile localisé par étape (ratio 342/88). Pas de plafond : suit la largeur de la vue avec une petite marge. */ #header-logo { width: 92vw; max-width: none; height: auto; aspect-ratio: 342 / 88; } /* Mobile · EN (défaut) */ #header-logo.header-home { background-image: url("/images/geneva/EN/guest/Mobile_Guest_header_EN.png"); } #header-logo.header-additionalInfos { background-image: url("/images/geneva/EN/infos/Mobile_Info_header_EN.png"); } #header-logo.header-createCard { background-image: url("/images/geneva/EN/send/Mobile_Send_header_EN.png"); } #header-logo.header-deliveryCards { background-image: url("/images/geneva/EN/ready/Mobile_Ready_header_EN.png"); } #header-logo.header-process { background-image: url("/images/geneva/EN/proccessing/Mobile_Processing_header_EN.png"); } /* Mobile · FR */ [data-lang="fr"] #header-logo.header-home { background-image: url("/images/geneva/FR/guest/Mobile_Guest_header_FR.png"); } [data-lang="fr"] #header-logo.header-additionalInfos { background-image: url("/images/geneva/FR/infos/Mobile_Info_header_FR.png"); } [data-lang="fr"] #header-logo.header-createCard { background-image: url("/images/geneva/FR/send/Mobile_Send_header_FR.png"); } [data-lang="fr"] #header-logo.header-deliveryCards { background-image: url("/images/geneva/FR/ready/Mobile_Ready_header_FR.png"); } [data-lang="fr"] #header-logo.header-process { background-image: url("/images/geneva/FR/proccessing/Mobile_Processing_header_FR.png"); } /* Mobile · DE */ [data-lang="de"] #header-logo.header-home { background-image: url("/images/geneva/DE/guest/Mobile_Guest_header_DE.png"); } [data-lang="de"] #header-logo.header-additionalInfos { background-image: url("/images/geneva/DE/infos/Mobile_Info_header_DE.png"); } [data-lang="de"] #header-logo.header-createCard { background-image: url("/images/geneva/DE/send/Mobile_Send_header_DE.png"); } [data-lang="de"] #header-logo.header-deliveryCards { background-image: url("/images/geneva/DE/ready/Mobile_Ready_header_DE.png"); } [data-lang="de"] #header-logo.header-process { background-image: url("/images/geneva/DE/proccessing/Mobile_Processing_header_DE.png"); } #header-logo-mobile { background-color: #006843; margin-bottom: 20px; height: fit-content; display: block; } #header-logo-mobile img { max-width: 100%; width: 100%; } .header-body { width: 90vw; margin-bottom: 30px; margin-top: 0; display: var(--page-header); margin-top: 10px; } /* .header-title { display: var(--card-image-title-header);; font-size: 19px; line-height: 26px; width: 100%; margin-top : 30px; } */ .header-body-element { margin-bottom: 0; } .lang-card { justify-content: space-between; flex-direction: var(--mobile-direction-lang-back-button); align-self: flex-center; margin-top: 5px; } .lang-card-element { width: fit-content; } .language-selector { width: fit-content; } .menu-lang-button { margin-top: 0px; } .header_separator { width: 95vw; } #available-card-text { font-size: 16px; } #available-card-quantity { margin: 0; font-size: 20px } /* Mobile : on "aplatit" home-content (display:contents) pour que left/right panels deviennent frères de #reservation dans body-content, puis on les réordonne : right → réservation → left. Le flex est scopé aux vues à panneaux via :has(.home-content) — les autres vues (deliveryCards, process…) gardent leur flux normal. */ .home-content { display: contents; } .body-content:has(.home-content) { display: flex; flex-direction: column; gap: 20px; } .right-body-panel { order: 1; } #reservation { order: 2; } .left-body-panel { order: 3; } /* sinon #footer-note (order 0 par défaut) remonte tout en haut */ #footer-note { order: 4; } /* mobile = colonne : on annule les ratios/largeurs desktop → pleine largeur. */ .right-body-panel, .left-body-panel { flex: 0 0 auto; width: 100%; max-width: 100%; } #reservation { width: 100%; /* annule le calc desktop : pleine largeur en mobile */ max-width: 100%; } /* YOUR RESERVATION : empilé en mobile (texte puis image paysage pleine largeur) */ .reservation-element { flex-direction: column; } .reservation-element .reservation-left { margin-right: 0; margin-bottom: 16px; } .reservation-element #card-and-discount { flex: 0 0 auto; width: 100%; height: 150px !important; } .children-text { width: 100%; } /* formulaire infos/cartes : conteneurs contraints au panneau (sinon styles-mobile .content-card{width:80vw} et #content-create-card{width:90vw;box-sizing:unset} débordent du bloc vert pâle) */ .content-card, #additional-infos, #content-create-card { width: 100%; max-width: 100%; box-sizing: border-box; } .additional-infos-block, #cards-container, .card-guest { max-width: 100%; box-sizing: border-box; } #start-button-section { width: 90%; } /* Boutons d'action — variante mobile (maquette GTC) */ .action-button, .disabled-action-button { max-width: 342px; height: 40px; border-radius: 53.19px; padding: 5.85px 30.85px 5.85px 40.95px; gap: 4.26px; } .right-body-panel img { width: 100px; } .right-body-panel-content { min-width: 0; align-items: center; width: 100%; padding: 0; margin-top: 30px; } #right-block-desc { width: 60%; padding: 20px 10px 20px 20px; } .left-body-panel-desc { min-width: 0; padding: 0; } .moreinfo-button, .lessinfo-button { font-size: 16px; } #button-more-info i #button-more-info { font-size: 18px; } #footer-note p { width: 80vw; } #footer img { max-width: 50%; width: auto; } h1 { font-size: 20px; } h3 { font-size: 20px; } .card-guest { width: 90vw; max-width: none; } #validate-card-button, #send-card-button { width: 87vw; } #subscribe-newsletter-button { max-width: 90vw; } .newsletter-right-body-panel { height: fit-content; } .newsletter-right-body-panel img { width: 90vw !important; max-width: 90vw !important; height: auto; } #newsletter-first-blocks { width: 100%; } #newsletter-second-block { margin-left: 20px; width: 95%; } .title-newsletter, .newsletter-right-body-panel { margin-top: 20px; padding: 0 20px; width: auto; margin-bottom: 0; } #translation_sending_by_mail_prior_arrival_news, .title-checkspam { display: inline-block; font-size: 16px; } .title-newsletter { padding: 0 20px; } .newsletter-left-body-panel h3 { padding: 5px 20px; padding-bottom: 10px; font-size: 16px; line-height: 20px; } .title-checkspam { padding: 5px 20px; } #translation_checkspam { font-size: 16px; line-height: 20px; } #newsletter-box { width: 100vw; position: static; left: 0; padding: 0; border-radius: 0; margin-top: 20px; } #newsletter-box-inner { padding: 20px; } .body-panel { width: 100%; } .body-content { /* width: 90vw; */ align-items: center; padding-top: 0px; } .body-panel { width: 100%; } .left-body-panel { margin-right: 0px; } .right-block-side-image img { margin-right: 20px; } #newsletter-first-block { flex-direction: column; } .newsletter-left-body-panel h3 { margin-bottom: 0; } .newsletter-left-body-panel-done { padding-left: 20px; } .newsletter-blue-text { margin-top: 20px; margin-right: 20px; } #translation_sending_by_mail_prior_arrival_news { padding-top: 0; } .title-checkspam { padding-top: 0; } .image-desktop { /*display: none;*/ } .newsletter-right-body-panel { /* display: none;*/ margin-left: auto; } .image-mobile { display: none; } .reservation-element, #footer { width: 85vw; } #translation_copyright { font-size: 12px; } .done-view-grid { grid-template-columns: 1fr; gap: 16px; } .done-view-block, .done-view-block--span-2, .done-view-block--span-3, .done-view-block--row-2, .done-view-block--row-3 { grid-column: span 1; grid-row: span 1; } /* héros : empilé (carte QR puis infos) */ .done-view-block--hero { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; } /* coupon-ID : code puis explication empilés (au lieu de mot-à-mot) */ .hero-coupon { flex-direction: column; align-items: stretch; gap: 12px; } .hero-coupon > div:first-child { text-align: left; } /* engage : newsletter puis Culture empilés */ .done-view-block--engage { flex-direction: column; gap: 18px; padding: 22px 18px; } .done-view-block--engage #mail-subscribe { max-width: 100%; } /* bande print : texte puis boutons empilés */ .done-view-block--print { flex-direction: column; align-items: stretch; gap: 14px; } .print-actions { flex-direction: column; } /* boutons contour : padding symétrique en mobile (pas de flèche) */ .engage-culture .action-button, .done-view-block--engage #subscribe-newsletter-button { padding: 9px 24px; } /* vue process : panneau + carte empilés (anneau/texte puis photo) */ #content-process-card { padding: 22px 16px 24px; border-radius: 18px; } .content-process-card-body { flex-direction: column; gap: 18px; padding: 24px 18px; } .process-right-body-panel { width: 100%; } /* la photo QR est masquée en mobile par styles-mobile.css : on la ré-affiche */ #pdf-sending-img { display: block; width: 240px !important; margin: 0 auto; } .done-view-block--transportApp { display: none; } }