/* ========================================================================== * redesign.css — refonte visuelle (branche redesign/compte-achat) * Charge APRES photoweb.css : prime sur les styles existants. * Palette : turquoise #6bccd0 (marque), jaune #ffe14f (action), teal fonce * #14707a / #0c4a4f (texte sur turquoise / icones). * ========================================================================== */ /* ---------------------- Menu Compte : en-tete (titre + avatar) ------------ * * Titre « Compte » aligne a gauche, turquoise fonce, poids 500 (au lieu du gros * titre centre fin par defaut), avec un avatar rond a droite (comme la maquette). */ #compteHeader { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; margin-bottom: 2px; } .menuLabel { margin: 0 auto; font-size: 22px; font-weight: 500; color: #14707a; padding-top: 6px; padding-bottom: 14px; } #compteAvatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #e1f2f3; display: flex; align-items: center; justify-content: center; } /* ---------------------- Menu Compte : carte hero credits ------------------ */ #compteHeroCard { background: #6bccd0; border-radius: 16px; padding: 15px 18px; margin: 8px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #compteHeroText { min-width: 0; } #compteHeroLabel { color: #0f5c62; font-size: 12px; margin-bottom: 2px; } #compteHeroCard #compteCredit { color: #0c4a4f; font-size: 16px; line-height: 1.2; font-weight: 400; } #compteHeroCard .hero-num { font-size: 32px; font-weight: 500; color: #0c4a4f; line-height: 1.1; } #compteHeroCard .hero-unit { font-size: 14px; color: #0f5c62; } #compteHeroBuy { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: #ffe14f; color: #4a3b00; font-weight: 500; font-size: 14px; padding: 9px 16px; border-radius: 22px; cursor: pointer; white-space: nowrap; } #compteHeroBuy .ti { font-size: 18px; color: #4a3b00; } /* ---------------- Lignes de menu : icones Tabler teal + libelle etendu ----- * * On remplace les anciennes icones (PNG base64 non recolorables) par la police * Tabler (memes icones que la maquette), teintees en turquoise. */ #compte .menuPrincipalZone .menuIconTi, #menu .menuPrincipalZone .menuIconTi { color: #14707a; font-size: 24px; line-height: 1; } /* Alignement vertical icone/libelle : on neutralise le margin-top et la hauteur fixe de .menuIcon (qui descendaient l'icone) et le padding-top de .menuLibelle (qui descendait le texte), puis on centre le glyphe dans son conteneur. */ #compte .menuPrincipalZone .menuIcon, #menu .menuPrincipalZone .menuIcon { margin-top: 0 !important; height: auto !important; display: flex; align-items: center; justify-content: center; } #compte .menuPrincipalZone .menuLibelle, #menu .menuPrincipalZone .menuLibelle { padding-top: 0 !important; } .menuPrincipalZone > .menuLibelle { flex: 1 1 auto; } #compte #draftPanelQuantity, #menu #draftPanelQuantity { flex: 0 0 auto; background: #eef0f0; color: #5f7d80; font-size: 12px; font-weight: 500; padding: 2px 9px !important; border-radius: 11px; align-self: center; } /* Chevron « > » redessine en CSS (pas de dependance police icone). */ .menuPrincipalZone::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid #c7c7c2; border-bottom: 2px solid #c7c7c2; transform: rotate(-45deg); } /* Menus Compte et Plus d'infos : centres verticalement dans la page. Si la liste * est plus haute que l'ecran, elle grandit et la page defile (min-height, pas * height) ; sinon elle est centree. La hauteur retranche le padding vertical que * le body porte (footer ~76px + safe-areas) : sinon 100vh + ce padding depasse le * viewport et cree un scroll vertical parasite. */ #compte, #menu { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-height: calc(100vh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); -webkit-box-sizing: border-box; box-sizing: border-box; } /* Composer (Carte Postale + Duo) : depuis le passage du WKWebView en plein ecran, * le contenu (carte/animation + boutons d'action #undercarteZone) plus les * reserves safe-area (haut) et footer (bas) depassait le viewport -> scroll * pirate sur ces 2 pages. Le gap carte<->boutons (.boutonDispositionCentralZone, * 50px) etait du vide : on le resserre sur les hauteurs d'ecran de telephone * pour que la page tienne sans scroll. Les grands ecrans (tablette) gardent 50px. */ @media (max-height: 950px) { #boutonDisposition.boutonDispositionCentralZone { padding-top: 6px !important; } } /* ---------------------- Achat de credits : en-tete + code promo ----------- * * Titre 'Acheter des credits' (menuLabel) + lien 'Devise X' a droite, au-dessus * de la ligne de validite. Champ code promo arrondi gris + bouton 'Ajouter' * jaune (comme la maquette). */ /* Titre de page retire (redondant avec l'en-tete d'app). En-tete en ligne : * liens utilitaires empiles a gauche, carte d'etat du solde a droite (elle * prend la largeur restante, donc plus etroite pour laisser la place). */ #buyCreditHeaderZone { display: flex; align-items: center; gap: 10px; } #buyCreditHeader { flex: 0 0 auto; display: flex; align-items: center; } #buyCreditHeaderLinks { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } #buyCreditPlusInfos, #buyCreditDevise { color: #14707a; font-size: 13px; cursor: pointer; white-space: nowrap; } .rd-promo { display: flex; align-items: center; gap: 8px; margin: 10px 0 18px; } .rd-promo input[type="text"] { flex: 1 1 auto; min-width: 0; background: #ffffff; border: 0 !important; border-bottom: 0 !important; border-radius: 12px; padding: 0 14px; height: 46px; font-size: 14px; color: #444444; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-promo-btn { flex: 0 0 auto; background: #ffe14f; color: #4a3b00; font-weight: 500; font-size: 14px; border-radius: 12px; padding: 0 18px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; } /* ---------------------- Achat de credits : cartes de packs ---------------- * * On garde la hauteur (57px) et les floats internes intacts (le stepper +/- de * l'achat a l'unite est positionne en absolu par rapport a cette hauteur), on * ne retouche que le fond, la bordure et la mise en avant du pack favori. */ #listBundlesZone .bundle-row { background: #ffffff !important; border: 1px solid #e2e2dc !important; border-radius: 12px !important; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.07); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 12px 14px; height: auto !important; margin-bottom: 10px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } #listBundlesZone .bundle-row.bundle-fav { background: #eafafa !important; border: 2px solid #6bccd0 !important; } .bundle-left { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #2c2c2a; } .bundle-name { font-weight: 500; font-size: 15px; color: #2c2c2a; } .bundle-percredit { font-size: 13px; color: #8a8a86; font-weight: 400; } /* Montant total du pack : affiche dans une pastille (pilule teal claire). */ .bundle-price { flex: 0 0 auto; width: auto !important; text-align: center; white-space: nowrap; font-size: 15px; font-weight: 500; color: #0c4a4f; background: #d2edef; border-radius: 10px; padding: 4px 12px; } /* Stepper 'Achat a l'unite' : - quantite + (ronds jaunes), comme la maquette. */ .rd-stepper { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; } .rd-step-btn { width: 30px; height: 30px; border-radius: 50%; background: #ffe14f; display: flex; align-items: center; justify-content: center; cursor: pointer; } .rd-step-btn .material-icons-outline { display: inline-block; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; } .rd-step-val { min-width: 14px; text-align: center; font-weight: 500; font-size: 16px; color: #444444; } /* Badge « favori » (remplace le petit coeur rouge) en haut a gauche. */ .bundle-badge { position: absolute; top: -10px; left: 14px; z-index: 2; display: flex; align-items: center; background: #6bccd0; color: #0c4a4f; border-radius: 11px; padding: 1px 8px 1px 6px; font-size: 11px; font-weight: 500; line-height: 1.6; } /* Colonne droite du pack : badge -X% empile AU-DESSUS du prix (aligne a droite). */ .bundle-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .bundle-economie { background: #eaf3de; color: #3b6d11; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 9px; line-height: 1.5; } /* Prix / credit en pastille sous le montant du pack (remplace le -X%). */ .bundle-percredit-pill { background: #eef0f0; color: #5f7d80; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 9px; line-height: 1.6; white-space: nowrap; } /* Mention « Envoi dans le monde entier inclus » : centree sous les packs (l'ancien style float:right;margin-top:-20px chevauchait la liste). */ .rd-worldwide { clear: both; display: flex; align-items: center; justify-content: center; gap: 6px; color: #8a8a86; font-size: 12px; padding: 8px 0 6px; } .rd-worldwide .ti { font-size: 16px; color: #6bccd0; } /* Bloc parrainage : carte turquoise (icone + texte + chevron), cliquable. */ #displayBundlesList-parrainage.rd-parrain { clear: both; float: none; display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 14px 16px; background: #6bccd0; border-radius: 14px; color: #0c4a4f; font-size: 14px; line-height: 1.35; cursor: pointer; } .rd-parrain-ic { flex: 0 0 auto; font-size: 26px; color: #0c4a4f; } .rd-parrain-text { flex: 1 1 auto; min-width: 0; } .rd-parrain-arrow { flex: 0 0 auto; font-size: 20px; color: #0c4a4f; } /* ========================================================================== * Toasts (jquery.toastmessage) — refonte : carte arrondie centree, icone * Tabler, ombre, au lieu de la banniere pleine largeur. * ========================================================================== */ .toast-container.toast-position-top-center { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 0; right: 0; width: 100%; padding: 0 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } .toast-item-wrapper { text-align: center; margin-bottom: 8px; } .toast-item { position: relative !important; display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; max-width: 100%; margin: 0 auto !important; text-align: left !important; padding: 13px 16px !important; border: 0 !important; border-radius: 14px !important; color: #ffffff !important; font-size: 15px !important; overflow: hidden; -webkit-box-shadow: 0 6px 22px rgba(0,0,0,0.20); box-shadow: 0 6px 22px rgba(0,0,0,0.20); } .toast-item p { margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 15px; line-height: 1.35; color: #ffffff; } .toast-item-image { width: 24px !important; height: 24px !important; margin: 0 !important; float: none !important; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #ffffff; background-color: #ffffff; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 22px; mask-size: 22px; } .toast-item-image-success { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='translate(0 896) scale(1 -1)' d='M505 -17Q392 -17 296 39Q203 93 149 186Q93 282 93 395Q93 479 125.5 556.5Q158 634 217 692Q278 752 360 781Q447 813 548 806Q649 795 731 741Q808 690 856 610Q904 532 915.0 441.0Q926 350 897 266Q870 185 813.0 121.0Q756 57 678 21Q597 -17 505 -17ZM832 352Q843 447 805 531Q768 611 696.0 663.0Q624 715 537 724Q444 733 356 689Q299 659 262 619Q193 543 178 445Q165 354 202.0 267.0Q239 180 314 126Q394 68 495 65Q578 62 651.0 98.5Q724 135 771 201Q820 269 832 352ZM618 518Q611 516 603.0 509.0Q595 502 556 463L463 371L436 400Q412 424 405.0 429.0Q398 434 388 436Q375 438 363.0 431.5Q351 425 344.5 413.0Q338 401 341 388Q342 380 345.0 375.5Q348 371 358 360L393 325Q437 281 443 277Q460 267 480 275Q484 277 498 290L569 361L639 431Q659 450 664 458Q668 463 669 470V471Q672 487 664.5 499.0Q657 511 643.5 516.5Q630 522 618 518Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='translate(0 896) scale(1 -1)' d='M505 -17Q392 -17 296 39Q203 93 149 186Q93 282 93 395Q93 479 125.5 556.5Q158 634 217 692Q278 752 360 781Q447 813 548 806Q649 795 731 741Q808 690 856 610Q904 532 915.0 441.0Q926 350 897 266Q870 185 813.0 121.0Q756 57 678 21Q597 -17 505 -17ZM832 352Q843 447 805 531Q768 611 696.0 663.0Q624 715 537 724Q444 733 356 689Q299 659 262 619Q193 543 178 445Q165 354 202.0 267.0Q239 180 314 126Q394 68 495 65Q578 62 651.0 98.5Q724 135 771 201Q820 269 832 352ZM618 518Q611 516 603.0 509.0Q595 502 556 463L463 371L436 400Q412 424 405.0 429.0Q398 434 388 436Q375 438 363.0 431.5Q351 425 344.5 413.0Q338 401 341 388Q342 380 345.0 375.5Q348 371 358 360L393 325Q437 281 443 277Q460 267 480 275Q484 277 498 290L569 361L639 431Q659 450 664 458Q668 463 669 470V471Q672 487 664.5 499.0Q657 511 643.5 516.5Q630 522 618 518Z'/%3E%3C/svg%3E"); } .toast-item-image-error { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='translate(0 896) scale(1 -1)' d='M406 769Q422 793 451.0 808.0Q480 823 512 821Q547 819 577 797Q584 792 592.0 783.5Q600 775 604 769Q610 760 777.5 480.0Q945 200 948 194Q962 164 957.5 128.0Q953 92 929 65Q903 35 862 26Q858 25 841 25H154Q102 36 75 71Q53 100 52 139Q50 172 63 197Q65 202 233.0 482.0Q401 762 406 769ZM850 108Q870 116 874 135Q878 149 872 160Q869 166 702.0 445.5Q535 725 532 728Q522 739 507 739Q488 739 478 727Q475 724 308.0 445.5Q141 167 137 158Q132 147 135 134Q140 116 160 108ZM464 527Q468 548 486.0 556.0Q504 564 522.5 556.0Q541 548 546 527Q547 523 547 436L546 371Q546 352 545.0 346.0Q544 340 541 335V334Q538 329 532.5 324.0Q527 319 522.5 316.5Q518 314 511 314H499Q492 314 487.5 316.5Q483 319 477.0 324.0Q471 329 469 334V335Q466 340 465.0 346.0Q464 352 464 371L463 436Q463 523 464 527ZM495 270Q479 267 471.0 253.0Q463 239 466.0 222.0Q469 205 482.0 195.0Q495 185 517 190Q530 194 538.5 205.0Q547 216 547 230Q547 250 531.0 262.5Q515 275 495 270Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='translate(0 896) scale(1 -1)' d='M406 769Q422 793 451.0 808.0Q480 823 512 821Q547 819 577 797Q584 792 592.0 783.5Q600 775 604 769Q610 760 777.5 480.0Q945 200 948 194Q962 164 957.5 128.0Q953 92 929 65Q903 35 862 26Q858 25 841 25H154Q102 36 75 71Q53 100 52 139Q50 172 63 197Q65 202 233.0 482.0Q401 762 406 769ZM850 108Q870 116 874 135Q878 149 872 160Q869 166 702.0 445.5Q535 725 532 728Q522 739 507 739Q488 739 478 727Q475 724 308.0 445.5Q141 167 137 158Q132 147 135 134Q140 116 160 108ZM464 527Q468 548 486.0 556.0Q504 564 522.5 556.0Q541 548 546 527Q547 523 547 436L546 371Q546 352 545.0 346.0Q544 340 541 335V334Q538 329 532.5 324.0Q527 319 522.5 316.5Q518 314 511 314H499Q492 314 487.5 316.5Q483 319 477.0 324.0Q471 329 469 334V335Q466 340 465.0 346.0Q464 352 464 371L463 436Q463 523 464 527ZM495 270Q479 267 471.0 253.0Q463 239 466.0 222.0Q469 205 482.0 195.0Q495 185 517 190Q530 194 538.5 205.0Q547 216 547 230Q547 250 531.0 262.5Q515 275 495 270Z'/%3E%3C/svg%3E"); } .toast-type-success { background: #14707a !important; } .toast-type-error { background: #e24b4a !important; } .toast-type-warning { background: #ba7517 !important; } .toast-type-notice { background: #444444 !important; } /* Barre de progression (compte a rebours) integree au bas de la carte. */ .toast-item-progress { bottom: 0; height: 3px; border-radius: 0; background: rgba(255,255,255,0.4); } /* ========================================================================== * Historique credits / commandes (#historyCreditList) — cartes coherentes : * fond blanc, bordure fine + ombre, coins arrondis ; la couleur de statut * (ex-barre 5px) devient une bordure gauche accent (inline). * ========================================================================== */ #historyCreditList .celluleliste { border: 1px solid #e2e2dc; border-radius: 12px !important; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.07); -webkit-box-sizing: border-box; box-sizing: border-box; color: #2c2c2a; } /* Fleche de fin de ligne : lisible sur fond blanc. */ #historyCreditList .material-icons.white { color: #9fb0b1 !important; } /* ========================================================================== * Codes promo disponibles (#codePromoListZone) — cartes + etat vide. * ========================================================================== */ #codePromoListZone .promo-card { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e2e2dc; border-radius: 12px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.07); padding: 14px; margin-bottom: 10px; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .promo-card-ic { flex: 0 0 auto; color: #14707a; font-size: 26px; line-height: 1; } .promo-card-info { flex: 1 1 auto; min-width: 0; } .promo-card-code { color: #2c2c2a; font-size: 14px; } .promo-card-libelle { font-weight: 500; color: #e24b4a; font-size: 17px; } .promo-card-desc { color: #8a8a86; font-size: 12px; margin-top: 4px; } .promo-card-arrow { flex: 0 0 auto; color: #c7c7c2; font-size: 20px; } /* Etat vide (aucun code dispo). */ .promo-empty { text-align: center; color: #8a8a86; padding: 24px 12px 8px; } .promo-empty .ti { display: block; font-size: 40px; color: #c7c7c2; margin-bottom: 10px; } .promo-empty-text { font-size: 16px; color: #5f5f5f; } /* ========================================================================== * Divers : fond des pages, hero conditionnel, etat vide brouillons * ========================================================================== */ /* Fond gris clair #f4f4f4 pour toutes les pages (au lieu du blanc). */ html, body { background: #f7f7f7 !important; } /* cordova-plugin-googlemaps ajoute la classe _gmaps_cdv_ au pour rendre le * fond transparent (carte NATIVE derriere le webview) et la laisse apres coup -> * page blanche au retour. On reforce le fond de l'app, mais PAS sur searchAddress * (marqueur .sc-searchaddress pose en JS dans changePage) sinon la carte native ne * s'affiche plus. Specificite body.classe:not(.classe) > body._gmaps_cdv_ du plugin. */ body._gmaps_cdv_:not(.sc-searchaddress) { background: #f7f7f7 !important; } /* Carte hero Compte masquee quand non connecte (preserve display:flex sinon). */ #compteHeroCard.is-hidden { display: none !important; } /* Brouillons : etat vide (aucun brouillon). */ .draft-empty { text-align: center; color: #8a8a86; padding: 20px 12px; } .draft-empty .ti { display: block; font-size: 40px; color: #c7c7c2; margin-bottom: 10px; } .draft-empty-text { font-size: 16px; color: #5f5f5f; } /* ========================================================================== * Page Parametres : boites grises -> cartes blanches coherentes. * ========================================================================== */ #parametersZone [style*="#eeeeee"] { background: #ffffff !important; border: 1px solid #e2e2dc !important; border-radius: 12px !important; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.06); box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px !important; margin-bottom: 12px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } #parametersZone .menuLibelle { font-weight: 500; color: #2c2c2a; font-size: 15px; } /* Boutons d'action : pilules teal coherentes (fini le style jQuery Mobile gris). */ #parametersZone .ui-btn { background: #14707a !important; background-image: none !important; border: 0 !important; border-radius: 10px !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; padding: 9px 16px !important; margin: 4px 0 0 !important; min-width: 0 !important; width: auto !important; } #parametersZone .ui-btn .boutonText { color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 0 !important; } /* Deconnexion : action neutre secondaire. */ #parametersZone #parametersLogoutButton { background: #8a8a86 !important; } /* Supprimer le compte : action destructrice en rouge. */ #parametersZone #parametersDeleteAccountButton { background: #e24b4a !important; } /* Toggle "code promo sur les cartes" : switch iOS moderne (pilule grise off / turquoise on). */ #parametersZoneCodePromoOnCardButton.switchButton { width: 52px !important; height: 30px !important; background-color: #cfd4d4 !important; border-radius: 999px !important; cursor: pointer; -webkit-transition: background-color .25s; transition: background-color .25s; } #parametersZoneCodePromoOnCardButton.switchButton:has(.onButton) { background-color: #6bccd0 !important; } #parametersZoneCodePromoOnCardButton .sliderButton { width: 24px; height: 24px; left: 3px; bottom: 3px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } #parametersZoneCodePromoOnCardButton .offButton { background-color: #ffffff !important; } #parametersZoneCodePromoOnCardButton .onButton { -webkit-transform: translateX(22px) !important; -ms-transform: translateX(22px) !important; transform: translateX(22px) !important; } /* La pastille OUI/NON n'a plus de sens dans une pilule compacte. */ #parametersZoneCodePromoOnCardButtonSliderValue { display: none !important; } /* ========================================================================== * Parrainage : bloc "comment ça marche" (#inviterAmisDescriptifText1) en carte * teintee avec icone, texte aligne a gauche et lisible. * ========================================================================== */ .parrain-how { display: flex; align-items: flex-start; gap: 12px; background: #eafafa; border: 1px solid #cdeef0; border-radius: 14px; padding: 16px; margin: 8px 4px 4px; text-align: left; font-size: 15px; line-height: 1.5; color: #0c4a4f; -webkit-box-sizing: border-box; box-sizing: border-box; } .parrain-how-ic { flex: 0 0 auto; color: #14707a; font-size: 26px; line-height: 1.3; } .parrain-how #inviterAmisDescriptifText1 { color: #0c4a4f; } /* ========================================================================== * Mode de paiement : recap de commande (#modepaymentSubHeaderText) en carte. * ========================================================================== */ #modepaymentSubHeaderText { background: #eafafa; border: 1px solid #cdeef0; border-radius: 14px; padding: 14px 18px !important; margin: 16px 8px !important; color: #0c4a4f !important; font-size: 16px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } #modepaymentSubHeaderText .mp-sum-credits { font-weight: 500; } #modepaymentSubHeaderText .mp-sum-sep { color: #8fb9bd; margin: 0 8px; } #modepaymentSubHeaderText .mp-sum-price { font-weight: 500; font-size: 20px; } /* ========================================================================== * Segmented control reutilisable (.rd-histtabs) : remplace les paires de * zones dupliquees a base de PNG (historique cartes/credits, offrir/utiliser * un code cadeau). Un seul controle, libelles i18n via ressources(), etat * actif pilote par la classe .is-active. * ========================================================================== */ .rd-histtabs { display: flex; gap: 4px; background: #e7eaea; border-radius: 12px; padding: 4px; margin: 6px 0 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-histtab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 1.2; font-weight: 500; color: #8a8a86; padding: 9px 8px; border-radius: 9px; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background .18s, color .18s; transition: background .18s, color .18s; } .rd-histtab.is-active { background: #6bccd0; color: #0c4a4f; } /* ========================================================================== * Offrir des credits : contenu (offrirCreditList). * Carte "nombre a offrir" + stepper, etat vide, champ code cadeau (reutilise * .rd-promo) et liste des codes cadeaux disponibles. * ========================================================================== */ .offrir-card { background: #fff; border: 1px solid #e2e2dc; border-radius: 12px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.07); padding: 14px 16px; margin-bottom: 16px; } .offrir-card-title { font-size: 15px; font-weight: 500; color: #2c2c2a; margin-bottom: 14px; } .offrir-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* CTA "Creer le code cadeau" : largeur naturelle (ne s'etire pas sur toute la * ligne, notamment en version web). */ .offrir-cta { flex: 0 0 auto; max-width: 100%; text-align: center; background: #ffe14f; color: #4a3b00; font-weight: 500; font-size: 14px; padding: 11px 20px; border-radius: 22px; cursor: pointer; } /* Glyphe +/- dans le stepper : icone Tabler centree par le flex de .rd-step-btn ; * pointer-events none -> le tap vise toujours le bouton. */ .rd-step-btn .rd-step-glyph { pointer-events: none; font-size: 20px; line-height: 1; color: #4a3b00; } /* Etat vide : pas de credit a offrir. */ .offrir-empty { text-align: center; padding: 26px 16px 6px; color: #8a8a86; } .offrir-empty .ti { font-size: 44px; color: #c7d6d7; display: block; margin-bottom: 10px; } .offrir-empty-text { font-size: 15px; } /* Liste des codes cadeaux disponibles. */ .giftcode-title { font-size: 13px; font-weight: 500; color: #8a8a86; margin: 14px 0 8px; } .giftcode-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e2dc; border-radius: 12px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.07); padding: 12px 14px; margin-bottom: 10px; } .giftcode-card.is-used { opacity: .55; } .giftcode-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #eafafa; display: flex; align-items: center; justify-content: center; color: #14707a; font-size: 22px; } .giftcode-info { flex: 1 1 auto; min-width: 0; } .giftcode-label { font-size: 12px; color: #8a8a86; } .giftcode-credits { font-size: 15px; font-weight: 500; color: #2c2c2a; } .giftcode-valid { font-size: 12px; color: #8a8a86; font-style: italic; margin-top: 2px; } .giftcode-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .giftcode-code { font-size: 16px; font-weight: 500; color: #e24b4a; letter-spacing: .5px; } .giftcode-copy { color: #6bccd0; font-size: 22px; cursor: pointer; line-height: 1; } /* ========================================================================== * Historique : barre d'onglets collee sous le header (#headerPage, 45px). * position:sticky -> reste en haut, la liste defile dessous. La barre etant * en flux, elle se cache automatiquement avec la page (pas de residu comme * l'ancien position:fixed). Le fond opaque (#f4f4f4) couvre la liste qui * passe sous les coins arrondis de la pilule. * ========================================================================== */ #commandsHistoryTabs { position: -webkit-sticky; position: sticky; /* Defaut = mobile/Cordova : pas de #headerPage (il est retire), on se cale * juste sous l'encoche. Desktop web (header affiche 45px) : main.js surcharge * top a calc(env(safe-area-inset-top) + 45px). */ top: env(safe-area-inset-top); z-index: 50; background: #f4f4f4; padding: 8px 0 6px; margin: 0 0 4px; } #commandsHistoryTabs .rd-histtabs { margin: 0; } /* ========================================================================== * CTA "Achetez des credits" (offrirCreditBoutonAchat, et reutilisable) : * pilule jaune centree avec icone, remplace l'ancien bouton jQuery Mobile. * ========================================================================== */ .rd-buycta { display: inline-flex; align-items: center; gap: 8px; background: #ffe14f; color: #4a3b00; font-weight: 500; font-size: 15px; padding: 12px 22px; border-radius: 24px; cursor: pointer; } .rd-buycta .ti { font-size: 20px; color: #4a3b00; } /* ========================================================================== * Achat de credits : carte d'etat du solde (#buyCreditCreditStatus) + liens. * Carte info turquoise clair avec icone piece, a la place de l'ancien bandeau * rouge a bordure gauche. Les liens Devise / Plus d'infos passent dessous. * ========================================================================== */ .rd-creditstatus { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; background: #eafafa; border: 1px solid #cdeef0; border-radius: 12px; padding: 11px 14px; color: #0c4a4f; font-size: 14px; line-height: 1.35; } .rd-creditstatus .ti { flex: 0 0 auto; font-size: 22px; color: #14707a; } .rd-creditstatus #buyCreditCreditStatus { color: #0c4a4f; font-size: 13px; } /* ========================================================================== * Inviter des amis (parrainage) : refonte de #inviterAmisZone. * Titre + carte value-prop turquoise, section "Comment ca marche", carte code * de parrainage, et boutons Partager / Copier en pilules. * ========================================================================== */ #inviterAmis .menuLabel { text-align: left; } .parrain-hero { display: flex; align-items: center; gap: 12px; background: #6bccd0; border-radius: 16px; padding: 16px 18px; margin: 6px 0 18px; color: #0c4a4f; font-size: 16px; font-weight: 500; line-height: 1.3; } .parrain-hero .ti { flex: 0 0 auto; font-size: 30px; color: #0c4a4f; } .parrain-section-title { font-size: 15px; font-weight: 500; color: #14707a; margin: 4px 4px 6px; } .parrain-desc { color: #5f5e5a; font-size: 15px; line-height: 1.5; margin: 4px 4px 10px; } /* Code de parrainage : carte dediee, code en grand espace. */ #inviterAmisCode.parrain-code { display: block; width: auto !important; max-width: 300px; margin: 16px auto 0 !important; float: none !important; background: #eafafa !important; border: 1px dashed #6bccd0; border-radius: 12px; padding: 16px !important; text-align: center; font-size: 26px !important; font-weight: 500; letter-spacing: 3px; color: #0c4a4f !important; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Boutons Partager / Copier en pilules (remplacent les ronds bleuPhotoweb). */ #inviterAmisShareZone.parrain-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: auto !important; margin: 18px 0 0 !important; padding-top: 0 !important; } .parrain-share-btn { display: flex; align-items: center; gap: 8px; background: #6bccd0; color: #0c4a4f; font-weight: 500; font-size: 14px; padding: 11px 18px; border-radius: 24px; cursor: pointer; float: none !important; } .parrain-share-btn .ti { font-size: 18px; color: #0c4a4f; } .parrain-share-btn-outline { background: #ffffff; border: 1px solid #6bccd0; color: #14707a; } .parrain-share-btn-outline .ti { color: #14707a; } /* ========================================================================== * footerPage : barre d'onglets mobile (Tabler). L'etat actif reste pilote par * la couleur (.ripple -> gris #5f5f5f ; actif -> #14707a via JS), les icones * Tabler heritent de `color`. Proposition A (sans indicateur). * ========================================================================== */ #footerPage { border-top: 1px solid #e2e2dc; } #footerPage .footer-icon { font-size: 24px; line-height: 1; } #footerPage .ripple .rippleImage { height: auto !important; padding: 2px 0; } #footerPage [id$="Text"] { font-size: 11px !important; line-height: 12px !important; margin-top: 2px !important; } /* ========================================================================== * draftHeader (page Brouillons) : bouton "copier dans mes brouillons" en * pilule pleine largeur (l'etat active/inactif reste pilote par le fond de * #compositionSaveDraftButton : #6bccd0 actif / #b3bbbb inactif via draft.js) * + lien plus d'infos. Barre blanche, bordure basse discrete. * ========================================================================== */ .draft-save-btn { display: flex; align-items: center; gap: 10px; background: #6bccd0; color: #0c4a4f; border-radius: 14px; padding: 12px 16px; cursor: pointer; font-weight: 500; font-size: 14px; line-height: 1.3; text-align: left; } .draft-save-btn .ti { flex: 0 0 auto; font-size: 24px; color: #0c4a4f; } .draft-save-btn #compositionSaveDraftButtonText { flex: 1 1 auto; } .draft-moreinfo { text-align: center; color: #14707a; font-size: 13px; cursor: pointer; margin-top: 12px; } /* ========================================================================== * Code promo applique (etat "code accepte") : carte teal claire + lien Annuler, * a la place du bloc gris + bouton rond jaune. * ========================================================================== */ .rd-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #eafafa; border: 1px solid #cdeef0; border-radius: 12px; padding: 12px 14px; margin: 10px 0 18px; } .rd-promo-applied-info { display: flex; align-items: center; gap: 10px; color: #0c4a4f; font-size: 14px; min-width: 0; } .rd-promo-applied-info .ti { flex: 0 0 auto; font-size: 22px; color: #14707a; } .rd-promo-applied-info b { font-weight: 500; } .rd-promo-annuler { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; color: #e24b4a; font-size: 13px; cursor: pointer; white-space: nowrap; } .rd-promo-annuler .ti { font-size: 18px; } /* ========================================================================== * Scroll / footer : le body avait height:100% en content-box + un * padding-bottom (reserve pour le footer fixe). Le padding s'ajoutait HORS des * 100% -> le body depassait le viewport de ~84px -> scroll fantome sur les * pages courtes. * * Correctif initial (height:auto; min-height:0) : trop radical. Le body * retrecissait a la hauteur de son contenu, donc PLUS COURT que l'ecran sur les * pages peu remplies. Or sur iOS WKWebView, quand le document est plus court que * le viewport, un `position:fixed; bottom:0` (le #footerPage, enfant direct de * body) se cale sur le BAS DU DOCUMENT et non du viewport -> le footer remontait, * a une hauteur variable selon le contenu de la page, avec une bande blanche * sous lui. * * Vrai correctif : garder le body >= viewport (min-height:100%) ET absorber le * padding-bottom dans cette hauteur (box-sizing:border-box). Resultat : pas de * depassement (fin du scroll fantome) et le body remplit toujours l'ecran (le * footer fixe reste colle au bas physique, identique sur toutes les pages). * ========================================================================== */ html { height: 100%; } body { height: auto !important; min-height: 100% !important; box-sizing: border-box; } /* ========================================================================== * headerPage (nav desktop) — option A : barre turquoise, onglet actif en * pilule blanche. L'etat actif reste marque par le border-bottom "solid white" * pose en JS (dans 5 fichiers) ; on le detecte via selecteur d'attribut et on * le transforme en pilule (fond blanc + texte teal), sans toucher a ce JS. * Icones Tabler (.header-ic) comme le footer. * ========================================================================== */ #headerPageMenu [id$="Zone"] { float: none !important; display: inline-flex !important; align-items: center; gap: 6px; background: transparent !important; color: #ffffff !important; border: 0 !important; border-radius: 20px; padding: 5px 14px !important; font-size: 15px !important; line-height: 1 !important; } /* Actif = border-bottom "3px solid white" pose en JS. Chrome garde le raccourci * ("border-bottom: 3px solid white"), mais Safari l'ECLATE en longhand * ("border-bottom-width: 3px; border-bottom-style: solid; ...") -> ni "3px solid" * ni "solid white" ne sont contigus. On couvre les deux formes ; cote Safari on * matche "border-bottom-style: solid" (les inactifs ont "...: none"). */ #headerPageMenu [id$="Zone"][style*="3px solid"], #headerPageMenu [id$="Zone"][style*="border-bottom-style: solid"] { background: #ffffff !important; color: #14707a !important; } #headerPageMenu [id$="Zone"] .header-ic { font-size: 20px; line-height: 1; } #headerPageMenu [id$="Zone"] [id$="Text"] { float: none !important; padding: 0 !important; font-size: 15px !important; line-height: 1 !important; } /* ========================================================================== * footerPage : pastille sur l'onglet actif. L'actif est marque par la couleur * inline (rgb(107,204,208) posee en JS) ; on la detecte via selecteur * d'attribut et on pose une pastille light-teal derriere l'icone. L'icone et le * libelle restent #6bccd0 (couleur de l'element selectionne). * ========================================================================== */ /* La pastille est posee sur le WRAPPER de l'icone (.rippleImage > 1er div), et * NON sur .footer-icon : depuis le passage aux icones SVG en masque, * .footer-icon a background-color = remplissage de l'icone, donc un background * pose dessus serait clippe a la silhouette de l'icone (pas de pastille). Meme * principe que la pilule du header (posee sur le conteneur [id$="Zone"]). */ #footerPage .ripple .rippleImage > div:first-child { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 15px !important; /* neutralise le padding-top:3px inline */ border-radius: 16px; -webkit-transition: background .15s; transition: background .15s; } /* Onglet actif : la couleur inline #14707a est serialisee differemment selon le * navigateur (Chrome: rgb(20, 112, 122) avec espaces ; Safari peut garder le hex * ou omettre les espaces). On couvre les 3 formes. */ #footerPage .ripple[style*="20, 112, 122"] .rippleImage > div:first-child, #footerPage .ripple[style*="20,112,122"] .rippleImage > div:first-child, #footerPage .ripple[style*="14707a"] .rippleImage > div:first-child { background: #d2edef; } /* Centrage vertical de la barre header : on passe #headerPageMenu en flex * (au lieu des floats + padding-top d'origine) pour centrer les pilules dans * les 45px de la barre. */ #headerPageMenu { display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 45px; gap: 8px; } #headerPageMenu > div { float: none !important; padding-top: 0 !important; } #headerPageMenu > div > div { width: auto !important; margin: 0 !important; } /* ========================================================================== * headerPage : logo "SimplyCards" (blanc, fond transparent) a gauche. Positionne * en absolu pour ne pas decaler les onglets centres. Masque quand la largeur ne * suffit plus a l'afficher sans chevaucher les 4 menus (media query). * ========================================================================== */ #headerLogoZone { position: absolute; left: 20px; top: 0; height: 45px; display: flex; align-items: center; color: #ffffff; font-size: 20px; font-weight: 500; letter-spacing: .2px; background: transparent; } #headerLogoZone img { height: 34px; width: 34px; border-radius: 8px; display: block; } @media (max-width: 900px) { #headerLogoZone { display: none; } } /* ========================================================================== * galleryTopZone (page Galerie) : en-tete fixe (titre + sous-titre) au-dessus * de la grille. On remplace le gros titre fin turquoise par un titre teal * compact + sous-titre gris, sur un bandeau opaque #f4f4f4 (la grille defile * dessous proprement). * ========================================================================== */ #galleryTopZone { background: #f4f4f4; padding: 12px 16px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } #galleryTopZone #galleryTitle { font-size: 20px !important; font-weight: 500 !important; color: #14707a !important; text-align: center; line-height: 1.2; } #galleryTopZone #gallerySubTitle { font-size: 14px !important; font-weight: 400 !important; color: #8a8a86 !important; margin-top: 2px !important; } /* ========================================================================== * Page connexion (identification) : refonte type carte auth (logo + onglets * Se connecter / Creer un compte + champs a icone + CTA jaune). Tous les ids * de formulaire (j_username/j_password/_spring_security_remember_me/ * createAccountEmail/checkValidCGU...) et handlers sont conserves. * ========================================================================== */ .is-hidden { display: none !important; } .rd-auth { max-width: 420px; margin: 0 auto; padding: 10px 20px 24px; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-auth-logo { width: 80px; height: 80px; margin: 8px auto 14px; display: flex; align-items: center; justify-content: center; } .rd-auth-logo img { width: 80px; height: 80px; border-radius: 20px; display: block; } .rd-auth-logo .ti { font-size: 38px; color: #0c4a4f; } .rd-auth-back { display: flex; align-items: center; justify-content: center; gap: 6px; color: #14707a; font-size: 14px; cursor: pointer; margin-top: 16px; } .rd-auth-back .ti { font-size: 18px; } .rd-auth-title { text-align: center; font-size: 28px; font-weight: 500; color: #14707a; line-height: 1.1; } .rd-auth-sub { text-align: center; font-size: 15px; color: #8a8a86; margin: 4px 0 20px; } .rd-auth-tabs { display: flex; gap: 4px; background: #e7eaea; border-radius: 12px; padding: 4px; margin-bottom: 22px; } .rd-field { display: flex; align-items: center; background: #fff; border: 1px solid #e2e2dc; border-radius: 12px; height: 52px; padding: 0 12px; margin-bottom: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-field-ic { flex: 0 0 auto; font-size: 20px; color: #8a8a86; margin-right: 8px; } .rd-field input { flex: 1 1 auto; min-width: 0; border: 0 !important; border-bottom: 0 !important; background: transparent !important; height: 100%; font-size: 15px; color: #2c2c2a; outline: none; padding: 0 !important; } .rd-field-eye { flex: 0 0 auto; color: #8a8a86; cursor: pointer; padding-left: 8px; display: flex; align-items: center; } .rd-field-eye .ti { font-size: 20px; } .rd-auth-forgot { text-align: right; color: #14707a; font-size: 13px; cursor: pointer; margin: -4px 0 18px; } .rd-auth-btn { display: block; width: 100%; background: #ffe14f; color: #4a3b00; font-weight: 500; font-size: 16px; border: 0; border-radius: 12px; padding: 14px; cursor: pointer; } .rd-auth-newprompt { font-size: 15px; color: #5f5e5a; margin-bottom: 14px; text-align: center; } /* CGU : "Je valide" + lien CGU dans un flux de texte (meme ligne, retour a la * ligne naturel), meme taille, CGU en rouge. */ .rd-cgu { font-size: 14px; color: #5f5e5a; margin-bottom: 14px; line-height: 1.6; } .rd-cgu-je { cursor: pointer; } #validCGU { color: #fb5656; cursor: pointer; } /* Checkbox CGU : case custom turquoise, en flux inline. pointer-events:none -> * les clics passent au label (la bascule native est non fiable sur cette * webview ; le toggle est fait en JS au clic sur le label). */ .rd-cgu input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-block; vertical-align: -6px; width: 22px; height: 22px; margin: 0 8px 0 0; border: 1px solid #c7d6d7; border-radius: 6px; background: #fff; cursor: pointer; position: relative; pointer-events: none; } .rd-cgu input[type="checkbox"]:checked { background: #6bccd0; border-color: #6bccd0; } .rd-cgu input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* ========================================================================== * selectAddressZoneFixed : selecteur de methode d'adresse (nouveau destinataire * / cartes envoyees / repertoire). Passe en flex -> les boutons se repartissent * quel que soit leur nombre (le bouton repertoire est masque sur web). Icones * Tabler ; l'etat actif reste le soulignement turquoise pose en JS (border-bottom * rgb(107,204,208)) -> on colore aussi l'icone active en teal. * ========================================================================== */ /* Segmented control (option A) : rail gris, chaque item icone + libelle ; item * actif = pilule turquoise. L'actif est marque en JS par border-bottom * rgb(107,204,208) -> detecte via selecteur d'attribut et transforme en pilule. */ #selectAddressSelectorZone.rd-addrsel { display: flex; gap: 4px; width: 100% !important; max-width: 340px; margin: 6px auto 0; background: #e7eaea; border-radius: 12px; padding: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-addrsel-btn { flex: 1 1 0; width: auto !important; margin: 0 !important; padding: 7px 2px !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: #8a8a86; } .rd-addrsel-btn .ti { font-size: 20px; color: inherit; } .rd-addrsel-btn span { font-size: 11px; font-weight: 500; text-transform: none !important; } .rd-addrsel-btn[style*="107, 204, 208"] { background: #6bccd0 !important; color: #0c4a4f !important; } /* Libelle de methode redondant (les onglets portent deja le libelle). */ #contactMethodSelected { display: none !important; } /* ========================================================================== * Choix d'un modele (galerie) : formatFilter en segmented control, categories * en chips pilules, scrollbar fine turquoise. Restyle par selecteurs d'attribut * (+ !important pour battre les styles inline). On ne touche pas a `display` de * .formatFilter (le JS le bascule flex/none selon le format choisi). * ========================================================================== */ .formatFilter { gap: 4px; background: #e7eaea; border-radius: 12px; padding: 4px !important; width: 100%; max-width: 340px; margin: 10px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .formatFilter [data-format-button] { flex: 1 1 0; text-transform: none !important; border: 0 !important; background: transparent !important; color: #8a8a86 !important; font-size: 13px !important; font-weight: 500 !important; padding: 5px 6px !important; margin: 0 !important; border-radius: 9px !important; white-space: nowrap !important; line-height: 1.2 !important; } .formatFilter [data-format-button].active-button { background: #6bccd0 !important; color: #0c4a4f !important; } [data-category-button] { text-transform: none !important; border: 1px solid #e2e2dc !important; background: #ffffff !important; color: #5f5e5a !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px !important; margin: 3px !important; border-radius: 18px !important; } [data-category-button].active-button { background: #6bccd0 !important; color: #0c4a4f !important; border-color: #6bccd0 !important; } /* Scrollbars .scrollbarWeb : masquees par defaut (tactile = on defile au doigt, * une barre ferait sale). MAIS a la souris (web desktop) il n'y a pas de swipe * horizontal et la molette defile en vertical : sans barre visible, les * carrousels horizontaux (compositions, cadres, galerie, palette signature) * deviennent INDEFILABLES. On remet donc une barre fine et discrete des que le * pointeur est fin (souris/pave tactile). Cross-navigateur. */ .scrollbarWeb { scrollbar-width: none !important; -ms-overflow-style: none !important; } .scrollbarWeb::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } @media (pointer: fine) { .scrollbarWeb { scrollbar-width: thin !important; } .scrollbarWeb::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; } .scrollbarWeb::-webkit-scrollbar-thumb { background: #c4c9c9 !important; border-radius: 4px !important; } .scrollbarWeb::-webkit-scrollbar-thumb:hover { background: #a9afaf !important; } .scrollbarWeb::-webkit-scrollbar-track { background: transparent !important; } } /* ========================================================================== * selectAddress : refonte des champs (nouveau destinataire + recherches cartes * envoyees / repertoire). Champs arrondis gris, sans le soulignement noir force * par jqm-shim (battu par la specificite #id). Ids/handlers inchanges. * ========================================================================== */ #selectAddressNewAddressZone form input[type="text"], #selectAddressNewAddressZone #addressCountry { display: block; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; background: white !important; border: 0 !important; border-bottom: 0 !important; border-radius: 12px; height: 46px; padding: 0 14px !important; margin: 0 auto 10px !important; max-width: 420px; font-size: 14px; color: #2c2c2a; } /* Barre de recherche redesign (cartes envoyees + repertoire) : champ blanc pilule, * bordure fine, ombre douce, icone teal + champ nu + bouton effacer. */ .rd-search { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e2e2dc; border-radius: 14px; height: 46px; padding: 0 14px; max-width: 520px; margin: 0 auto; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.05); box-shadow: 0 1px 4px rgba(0,0,0,0.05); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color .18s, box-shadow .18s; transition: border-color .18s, box-shadow .18s; } /* Focus : accent turquoise discret. */ .rd-search:focus-within { border-color: #6bccd0; -webkit-box-shadow: 0 0 0 3px rgba(107,204,208,0.18); box-shadow: 0 0 0 3px rgba(107,204,208,0.18); } .rd-search-ic { flex: 0 0 auto; font-size: 20px; color: #14707a; } .rd-search input { flex: 1 1 auto; min-width: 0; border: 0 !important; border-bottom: 0 !important; background: transparent !important; height: 100%; font-size: 15px; color: #2c2c2a; outline: none; padding: 0 !important; } .rd-search input::-webkit-input-placeholder { color: #a6a6a2; } .rd-search-clear { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f2f3; cursor: pointer; color: #8a8a86; } .rd-search-clear .ti { font-size: 16px; } /* Conteneur fixe des barres de recherche : respiration laterale + fond de page. */ #selectAddressCardsSentZoneSub, #selectAddressPhoneBookZoneSub { padding: 8px 16px 10px !important; background: #f4f4f4 !important; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ========================================================================== * Lignes historique (historyCreditList) : boutons d'action en pilules * compactes coherentes. Reutiliser = teal, Annuler = rouge. Fini les vieilles * boites material-icons. * ========================================================================== */ .rd-reuse-btn, .rd-cancel-btn { float: left; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 5px; margin-left: 8px; margin-top: 2px; padding: 6px 11px; color: #ffffff !important; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; z-index: 500; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .rd-reuse-btn { background: #14707a !important; } .rd-cancel-btn { background: #fb5656 !important; } .rd-reuse-btn .ti, .rd-cancel-btn .ti { font-size: 16px; line-height: 1; } /* ========================================================================== * Popup "Que souhaitez-vous reutiliser ?" (restoreCardPopupMenu) : liste * verticale de cases a cocher (avant : labels inline -> texte en bloc illisible). * Case custom turquoise, ligne cliquable, icone d'aide alignee a droite. * ========================================================================== */ .rd-restore-list { margin: 0; } .rd-restore-opt { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 12px; margin: 0; padding: 13px 2px; border-bottom: 1px solid #ececec; font-size: 16px; color: #444444; line-height: 1.25; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .rd-restore-opt input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; border: 2px solid #c9c9c4; border-radius: 6px; background: #fff; position: relative; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-restore-opt input[type="checkbox"]:checked { background: #6bccd0; border-color: #6bccd0; } .rd-restore-opt input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rd-restore-opt input[type="checkbox"]:disabled { border-color: #e0e0dc; background: #f4f4f2; } .rd-restore-txt { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .rd-restore-help { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; color: #b7b7b2; cursor: pointer; } .rd-restore-help .ti { font-size: 20px; display: block; } /* ========================================================================== * chapodateenvoi : carte "date d'envoi / date de reception" (#dateenvoi). * Avant : 2 blocs en float avec PNG + chevron positionne en absolu (valeurs * magiques). Refonte en carte teintee flex, icones Tabler, chevron a droite. * ========================================================================== */ .rd-sched { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 12px; max-width: 380px; margin: 0 auto; background: #eafafa; border: 1px solid #d2edef; border-radius: 14px; padding: 16px 18px; cursor: pointer; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-sched-lines { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 14px; min-width: 0; } .rd-sched-line { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 12px; } .rd-sched-ic { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; font-size: 24px; color: #14707a; line-height: 1; } .rd-sched-txt { min-width: 0; } .rd-sched-label { font-size: 12px; color: #6a807f; } .rd-sched-val { font-size: 15px; font-weight: 600; color: #0c4a4f; line-height: 1.3; } .rd-sched-arrow { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; font-size: 22px; color: #14707a; } /* ========================================================================== * openMoreInfopopup : pop info "brouillons stockes sur l'appareil". Avant : * texte brut centre dans un bloc a hauteur fixe + croix jaune/noire debordante. * Refonte : icone, texte lisible, bouton fermer rond discret en haut a droite. * ========================================================================== */ .rd-info-pop { position: relative; width: 300px; max-width: 84vw; padding: 28px 24px 24px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-info-pop-ic { color: #14707a; margin-bottom: 12px; line-height: 1; } .rd-info-pop-ic .ti { font-size: 42px; } .rd-info-pop-body { font-size: 15px; line-height: 1.5; color: #3a3a38; } .rd-info-pop-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #f1f2f3; color: #6a6a66; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .rd-info-pop-close .ti { font-size: 18px; } /* ========================================================================== * pixabayFilterZone : barre de recherche d'images Pixabay. Avant : layout en * float avec chevauchements (top:-35px/-63px), input a soulignement noir, PNG. * Refonte : back + champ .rd-search + bouton recherche teal + credit Pixabay. * ========================================================================== */ .rd-pixbar { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 10px; max-width: 620px; margin: 0 auto; padding: 12px 16px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-pixbar-field { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; max-width: none; margin: 0; } .rd-pixbar-btn { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; } .rd-pixbar-btn .ti { font-size: 22px; } .rd-pixbar-back { background: #f1f2f3; color: #444444; } .rd-pixbar-go { background: #6bccd0; color: #0c4a4f; } .rd-pixbar-credit { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; gap: 5px; font-size: 10px; color: #9a9a96; padding-top: 8px; } .rd-pixbar-credit img { vertical-align: middle; } /* Pixabay : bande de categories (#categorieListe) -> chips pilules identiques a * la galerie ([data-category-button]), disposees en ligne horizontale scrollable. */ #categorieListe { display: inline-block; white-space: nowrap; width: auto !important; padding: 4px 0; } #categorieListe [data-category-button] { float: none !important; display: inline-block; vertical-align: middle; } /* Garde-fou largeur : la bande de categories (large, en nowrap) doit TOUJOURS etre * clippee/scrollable dans son conteneur, jamais deborder le header fixe. Sinon, sur * webview mobile, un debordement horizontal peut gonfler window.innerWidth et faire * surdimensionner les cartes (ecranLargeur). Pose en CSS (pas seulement en JS). */ #categorieListeContainer { max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; box-sizing: border-box; /* Chips centrees quand elles tiennent, alignees au debut + scroll quand elles * debordent (safe center). Coherent avec la recherche et les onglets centres. */ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; justify-content: safe center; } #categorieListe { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; } /* Header fixe : ancre en pleine largeur viewport. Sans left explicite, un fixed * width:100% se place a sa position statique (decalee par le padding:16px du body) * -> il debordait de 16px a droite (bouton recherche coupe) et desaligne du contenu. */ #pixabayFilterZone { overflow-x: hidden; left: 0 !important; right: 0 !important; width: auto !important; } /* Le contenu interieur du header respecte le meme retrait lateral (16px) que le * corps de page, pour rester aligne avec les images en dessous. */ .rd-pixbar, #categorieListeContainer, #pixabaySubFilterZone { padding-left: 16px; padding-right: 16px; } /* ========================================================================== * greetChangePage (Carte Duo) : navigateur de pages en stepper a points relies. * Avant : petites boites bordees + PNG d'enveloppe, actif pose en inline (color/ * border) par navGreeting. Desormais : cercles numerotes relies par une ligne, * etape active = pastille turquoise pleine (classe is-active), enveloppe = icone * Tabler ti-mail. L'actif est bascule via .is-active dans navGreeting. * ========================================================================== */ .rd-greetnav { text-align: center; padding: 6px 16px 10px; } .rd-greetnav-label { font-size: 12px; color: #14707a; margin-bottom: 8px; } .rd-greetnav-steps { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 100%; max-width: 300px; } .rd-greetstep { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 13px; color: #8a8a86; background: #ffffff; border: 1.5px solid #d5d5d0; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .rd-greetstep.is-active { background: #6bccd0; border-color: #6bccd0; color: #0c4a4f; font-weight: 500; } .rd-greetstep-env .ti { font-size: 17px; line-height: 1; } .rd-greetstep-line { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 2px; min-width: 8px; background: #e2e2dc; } /* ========================================================================== * Signature (version web) : le selecteur contient ~110 couleurs (colorMajor). * Avant, height:112px + overflow-x:scroll faisait deborder la grille par-dessus * les boutons. On la cale sur ~3 lignes visibles avec defilement vertical et un * scrollbar fin VISIBLE (la classe scrollbarWeb le masquait) pour indiquer qu'on * peut faire defiler. Grille centree, pastilles a taille normale. Scope web * (>=700px) : le strip mobile etroit reste inchange. * ========================================================================== */ @media (min-width: 700px) { #signature .paletteZone { height: 160px !important; overflow-y: auto !important; overflow-x: hidden !important; width: 100% !important; max-width: 540px; margin: 0 auto; scrollbar-width: thin !important; } #signature .paletteZone::-webkit-scrollbar { width: 7px !important; height: 0 !important; display: block !important; } #signature .paletteZone::-webkit-scrollbar-thumb { background: #cfd4d4; border-radius: 4px; } #signature .paletteZone .palette-case { width: auto !important; } #signature .paletteZone .palette-box { float: none !important; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; gap: 6px; padding: 4px !important; } #signature .paletteZone .palette { float: none !important; margin: 0 !important; } } /* placeForAddText : descendre la zone d'ajout de texte (input + boutons ronds * d'origine conserves). Valeur a ajuster selon le rendu voulu. */ #placeForAddText { margin-top: 80px; } /* addTextZoneValue : le champ de saisie du texte. Avant : soulignement noir du * shim. Refonte en champ blanc arrondi (l'apercu de la police, pose en JS via * font-family, et la taille 20px sont conserves). Boutons non touches. */ #addTextZoneValue { width: 100%; border: 1px solid #e2e2dc !important; border-radius: 12px !important; background: #ffffff !important; padding: 11px 16px !important; color: #2c2c2a; outline: none; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.05); box-shadow: 0 1px 4px rgba(0,0,0,0.05); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color .18s, box-shadow .18s; transition: border-color .18s, box-shadow .18s; } #addTextZoneValue:focus { border-color: #6bccd0 !important; -webkit-box-shadow: 0 0 0 3px rgba(107,204,208,0.18); box-shadow: 0 0 0 3px rgba(107,204,208,0.18); } #addTextZoneValue::-webkit-input-placeholder { color: #a6a6a2; } /* ========================================================================== * Page upload : statut d'envoi + barre de progression. La barre jQuery Mobile * (jQMProgressBar) est reimplementee en .rd-progress (voir jQMProgressBar.js). * Statut centre, barre turquoise arrondie animee, compteur en %. * ========================================================================== */ #uploadStatus { color: #14707a !important; font-weight: 500; } .rd-progress { max-width: 340px; margin: 22px auto 0; } .rd-progress-track { height: 12px; background: #e7eaea; border-radius: 999px; overflow: hidden; } .rd-progress-fill { height: 100%; width: 0; background: #6bccd0; border-radius: 999px; -webkit-transition: width .25s ease; transition: width .25s ease; } .rd-progress-counter { text-align: center; margin-top: 10px; font-size: 15px; font-weight: 500; color: #14707a; } /* ========================================================================== * Page searchAddress : recherche d'adresse (Google Places). * L'input avait le soulignement noir du shim ; la liste de suggestions * (