/* ==========================================================================
Thème Swisscom pour rendez_vous (Bootstrap 5)
--------------------------------------------------------------------------
Portage du module Swisscom du socle v1 (www/ERDV/client + www/ERDV/directory)
vers rendez_vous. Reprend la charte de client/swisscomLibs/client/StyleSwisscomDesktop.css
et les variantes de boutons de SDX, SANS charger SDX lui-même : SDX est bâti sur les
conventions Bootstrap 3 (.col-xs-*, .row, .container, .modal, + un normalize complet)
et entrerait en conflit direct avec le Bootstrap 5 chargé par index.html.
Usage réel de SDX dans le module v1 : 19 occurrences, uniquement la barre de
progression — reconstruite ici en natif.
Chargé par erdvService::addTagLibraryForSwisscom() pour les marques Swisscom.
========================================================================== */
/* --- Polices Swisscom : woff2 uniquement (le v1 embarquait eot/svg/ttf/woff/woff2,
soit 21 Mo pour le seul dossier dist). Poids retenus : ceux réellement utilisés. --- */
@font-face {
font-family: 'TheSans';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('../fonts/TheSansB_300_.woff2') format('woff2');
}
@font-face {
font-family: 'TheSans';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('../fonts/TheSansB_400_.woff2') format('woff2');
}
@font-face {
font-family: 'TheSans';
font-weight: 400;
font-style: italic;
font-display: swap;
src: url('../fonts/TheSansB_400i.woff2') format('woff2');
}
@font-face {
font-family: 'TheSans';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('../fonts/TheSansB_500_.woff2') format('woff2');
}
@font-face {
font-family: 'TheSans';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('../fonts/TheSansB_700_.woff2') format('woff2');
}
/* --- Fonte d'icones Swisscom. Le v1 utilise sdx-icons ; on embarque le seul woff2
(28 Ko) plutot que d'approximer avec Font Awesome, et on declare uniquement
les glyphes utilises par le parcours. Codes releves dans sdx.css. --- */
@font-face {
font-family: 'sdx-icons';
font-weight: normal;
font-style: normal;
font-display: block;
src: url('../fonts/sdx-icons.woff2') format('woff2');
}
.sc-icon {
font-family: 'sdx-icons';
font-weight: normal;
font-style: normal;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sc-icon-information-circle::before { content: "\e02e"; }
.sc-icon-account::before { content: "\e001"; }
.sc-icon-present::before { content: "\e0d6"; }
.sc-icon-tv::before { content: "\e0a6"; }
.sc-icon-laptop::before { content: "\e071"; }
.sc-icon-phone-basic::before { content: "\e098"; }
.sc-icon-smartphone::before { content: "\e06f"; }
.sc-icon-assistant::before { content: "\e068"; }
.sc-icon-weather-cloud::before { content: "\e0ac"; }
.sc-icon-calendar::before { content: "\e009"; }
/* --- Jetons de charte. Relevés sur l'application v1 : computed styles de
client/app.html + client/swisscomLibs/client/StyleSwisscomDesktop.css
+ variantes de boutons de sdx.css. --- */
.swisscom-theme {
--sc-navy: #001155; /* bandeau d'en-tête et pied de page */
--sc-blue: #1781E3; /* primaire : boutons, étape active */
--sc-blue-dark: #1776C8; /* bleu sombre */
--sc-blue-hover: #0851DA; /* survol du bouton primaire (releve SDX) */
--sc-blue-light: #41B7FD; /* accents, focus */
--sc-green: #25B252; /* .button--confirm : validation finale */
--sc-green-dark: #1E9444;
--sc-grey-btn: #CFD5D9; /* .button--secondary : Retour */
--sc-grey-line: #D9D9D9; /* filets et bordures de champs */
--sc-tile-border: #D6D6D6; /* bordure des tuiles produit (releve v1) */
--sc-step-line: #ADADAD; /* trait du fil d'ariane (releve v1) */
--sc-grey-bg: #EAEAEA; /* fond des zones neutres */
--sc-page-bg: #E4E9EC; /* fond de page hors carte (releve v1) */
--sc-text: #333333;
--sc-text-soft: #666666;
--sc-red: #DD1122; /* erreurs et champs obligatoires */
--sc-radius: 5px;
/* Gouttiere laterale. Le v1 ne donne AUCUNE largeur fixe a la carte : le
conteneur occupe 100 % et reserve un pourcentage de chaque cote, si bien
que la carte vaut 100 % - 2 x cette valeur. Mesure sur la production :
`.main-content-tab-content` et `#bouttonMenu` (ecran 1), `.gray_box` et
`#buttonsDiv` (ecrans 2 et 3) portent TOUS le meme retrait — c'est ce qui
aligne la barre d'actions sur les bords de la carte, sans calcul. */
--sc-gouttiere: 20%;
/* Largeur de la grille des champs de l'ecran 3, en part de la carte :
2 colonnes de 30 % + une gouttiere de 3,6 %. */
--sc-grille: 63.6%;
--sc-font: 'TheSans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
/* --------------------------------------------------------------------------
Socle de page
-------------------------------------------------------------------------- */
.swisscom-theme,
.swisscom-theme body {
font-family: var(--sc-font);
font-size: 18px;
/* Le v1 compose tout le parcours en graisse 300 (light) : releve sur chaque
element mesure — titres de section, libelles, champs, calendrier. */
font-weight: 300;
color: var(--sc-text);
background-color: var(--sc-page-bg);
}
.swisscom-theme h1,
.swisscom-theme h2,
.swisscom-theme h3 {
font-family: var(--sc-font);
font-weight: 400;
color: var(--sc-text);
}
/* Le socle v3 contraint #content dans un conteneur ; le parcours Swisscom est
pleine largeur, bandeau et pied de page compris. */
.swisscom-theme #principal,
.swisscom-theme #content,
.swisscom-theme #main {
max-width: none;
width: 100%;
padding: 0;
margin: 0;
}
/* Colonne pleine hauteur : la zone grise s'etire pour pousser le pied de page en bas
de la fenetre quand le contenu est court, comme en v1. */
/* NB : #page-top EST le (cf. index.html). Le selecteur doit donc porter sur
l'element lui-meme, pas sur un descendant. */
body.swisscom-theme {
padding-top: 0;
margin-top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.swisscom-theme #main { flex: 1 1 auto; display: flex; flex-direction: column; }
.swisscom-theme #principal,
.swisscom-theme #content,
.swisscom-theme #content > .swisscom-theme { flex: 1 1 auto; display: flex; flex-direction: column; }
.swisscom-theme .sc-page { flex: 1 1 auto; }
/* Le conteneur du fil d'ariane du socle reste dans le flux meme quand #progressbar
est masque : il laissait une bande blanche de 101 px sous le bandeau Swisscom. */
.swisscom-theme #principal > .stepBar,
.swisscom-theme #principal > .button-login-container_iframe,
.swisscom-theme #principal > .footer-cp {
display: none !important;
}
/* Bandeau supérieur : le v1 n'y met que le logo et l'accès au compte. */
.sc-header {
background-color: var(--sc-navy);
min-height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
}
.sc-header__logo img { height: 26px; }
.sc-header__account {
color: #fff;
font-size: 28px;
line-height: 1;
background: none;
border: 0;
padding: 0;
}
/* Zone de contenu sur fond gris, titre HORS de la carte comme en v1. */
.sc-page {
background-color: var(--sc-page-bg);
border-top: 1px solid var(--sc-grey-line);
padding: 34px var(--sc-gouttiere) 80px;
}
/* L'ecran 1 est servi par le projet `directory` en v1, les suivants par
`client` : leurs feuilles ne reduisent pas la gouttiere dans les memes cas.
`directory` la ramene a 10 % entre 1200 et 1920 px, `client` jamais. C'est une
incoherence du v1 — sur un ecran 1920 sa carte passe de 1536 px a l'etape 1 a
1143 px a l'etape 2 — mais elle est reproduite telle quelle, la recette
comparant chaque ecran a sa reference.
`device-width` vise l'ECRAN et non la fenetre : c'est bien ce que fait le v1,
d'ou un rendu qui ne change pas quand on redimensionne la fenetre. */
@media all and (min-device-width: 1200px) and (max-device-width: 1920px) {
.swisscom-theme.sc-step-motif { --sc-gouttiere: 10%; }
/* Meme media query, meme regle que le v1 : les tuiles produit passent de
12px 24px a 12px 12px (StyleSwisscomDesktop.css du projet `directory`). */
.swisscom-theme .sc-product { padding: 12px 12px; }
}
.swisscom-theme .sc-page__title {
/* Mesure v1 : #stepName commence a l'exacte abscisse du bord gauche de la
carte (192 px a l'ecran 1), et non au bord de son contenu. La gouttiere
etant portee par .sc-page, le titre n'a donc aucun retrait propre. */
margin: 0 0 22px;
font-size: 30px;
font-weight: 400;
color: var(--sc-navy);
}
/* Carte blanche, large, sans ombre : le v1 la pose a plat sur le fond gris. */
.sc-card {
background-color: #fff;
/* Aucune largeur : elle remplit ce que la gouttiere de .sc-page lui laisse. */
padding: 30px 32px;
}
/* Valeurs de la production, relevees par la recette du 22/10 (P2) :
question 24px / 300, titre 30px navy, lien business 18px / 400 #2D90EC. */
/* Titres de colonne de l'ecran de gestion (« Vous connaissez votre reference. »,
« Envoyez-moi la reference de mon rendez-vous. ») : 17px sur la production,
contre 24px pour un sous-titre de section ordinaire. */
.swisscom-theme .sc-step-manage .sc-card__subtitle { font-size: 17px; }
/* L'intro de « Gerer mes rendez-vous » partage ce gabarit mais reste a 18px :
c'est la taille relevee sur la production (recette P2, 22/10), la ou la
question de l'ecran 1 est a 24px. */
.sc-step-manage .sc-card__question { font-size: 18px; }
.sc-card__question {
font-size: 24px;
font-weight: 300;
color: var(--sc-navy);
margin-bottom: 14px;
}
.sc-card__business { margin: 34px 0 0; }
.sc-card__title {
font-size: 24px;
margin-bottom: 24px;
}
/* Carte de l'etape 2 : le v1 la pose a 1143px avec un retrait interne different
de l'ecran Motif (padding 30px 0 100px 30px, releve sur #AppointementsFirstBox). */
.sc-card--step2 {
padding: 30px 30px 100px;
}
/* Les champs n'occupent pas toute la carte. La largeur suit celle de la carte,
elle n'est PAS fixe : 846px pour une carte de 1083px de contenu a 1920 (78 %),
560px pour 702px a 1280 (80 %) — c'est la meme regle, mesuree aux deux bouts.
Un `max-width` en pixels donnait 100 % de la carte des qu'elle devenait plus
etroite que 846px, d'ou le champ pleine largeur releve a 1280.
Restreint a l'ecran 2 : a l'ecran 3 les champs sont en grille (voir
.sc-form-grid), ou un pourcentage s'appliquerait a chaque colonne. */
.sc-step-shopdate .sc-field,
.sc-step-shopdate .sc-slots { max-width: 80%; }
/* Le premier titre de section ne porte pas la marge haute. */
.sc-card__subtitle--first { margin-top: 0; }
/* Titres de section de l'etape 2 : 24px, navy, graisse 300 (releve v1).
Selecteur porte par .swisscom-theme : ces titres sont des
, que la regle
groupee `.swisscom-theme h1, h2, h3` (specificite 0,1,1) repeindrait en gris. */
.swisscom-theme .sc-card__subtitle {
font-size: 24px;
font-weight: 300;
color: var(--sc-navy);
margin: 28px 0 16px;
}
.sc-card__title { font-weight: 300; }
.sc-link { color: #2D90EC; text-decoration: none; font-size: 18px; font-weight: 400; }
.sc-link:hover { text-decoration: underline; }
.sc-link__info { color: var(--sc-blue); margin-left: 6px; cursor: default; }
/* Infobulle du lien business — reprise du theme tooltipster `my-custom-theme` du
v1 (directory/swisscomLibs/directory/StyleSwisscomDesktop.css) : rayon 10px,
bordure rgb(216,216,216), fond blanc, contenu 17px / interligne 19 / graisse
300 / padding 12px 15px / largeur max 300px. Position 'top' du v1 = au-dessus
de l'icone, pointe vers le bas.
Pas de librairie : tooltipster n'est pas charge par rendez_vous, et une
infobulle statique au survol se fait tres bien en CSS. */
.sc-tooltip-host { position: relative; display: inline-block; }
.sc-tooltip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: none;
width: max-content;
max-width: 300px;
border: 1px solid rgb(216, 216, 216);
border-radius: 10px;
background: #fff;
padding: 12px 15px;
font-family: var(--sc-font);
font-size: 17px;
line-height: 19px;
font-weight: 300;
text-align: left;
white-space: normal;
}
.sc-tooltip-host:hover .sc-tooltip,
.sc-tooltip-host:focus-within .sc-tooltip { display: block; }
/* Titre en #000066 et corps en #666666 : couleurs posees en ligne par le v1 dans
le contenu de l'infobulle, avec une ligne vide entre les deux. */
.sc-tooltip__title {
display: block;
color: #000066;
margin-bottom: 19px;
}
.sc-tooltip__body { display: block; color: #666666; }
/* Pointe : deux triangles superposes, le gris servant de bordure au blanc. */
.sc-tooltip::before,
.sc-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
border: 10px solid transparent;
border-bottom: 0;
}
.sc-tooltip::before {
margin-left: -10px;
border-top-color: rgb(216, 216, 216);
}
.sc-tooltip::after {
margin-left: -10px;
margin-top: -1px;
border-top-color: #fff;
}
/* --------------------------------------------------------------------------
Fil d'ariane 3 étapes
Remplace .sdx-progress-full / .sdx-progress-full-step du module v1 — seules
classes SDX réellement utilisées. Reconstruit en flex natif BS5.
-------------------------------------------------------------------------- */
/* Geometrie relevee au pixel sur le composant SDX du v1 (sdx-progress-full) :
bandeau blanc de 74px, contenu de 768px centre, 3 colonnes de 256px.
Dans chaque colonne : pastille de 24px centree, et les traits sont des
pseudo-elements INTERNES a la colonne — c'est ce qui evite les espaces et
donne une ligne continue de pastille a pastille.
Trait : 1px, #ADADAD, a 12px du haut (centre de la pastille), avec un retrait
de 26px de chaque cote de la pastille. */
.sc-steps {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
background: #fff;
padding: 0 0 14px;
}
.sc-steps__inner {
display: flex;
width: 768px;
max-width: 100%;
padding-top: 20px;
}
.sc-steps__item {
flex: 1 1 0;
position: relative;
text-align: center;
min-width: 0;
}
.sc-steps__item::before,
.sc-steps__item::after {
content: "";
position: absolute;
top: 12px;
height: 1px;
background: #ADADAD;
}
.sc-steps__item::before { left: 0; right: calc(50% + 38px); }
.sc-steps__item::after { right: 0; left: calc(50% + 38px); }
.sc-steps__item:first-child::before,
.sc-steps__item:last-child::after { content: none; }
.sc-steps__bullet {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--sc-blue);
color: var(--sc-blue);
background: transparent;
font-family: var(--sc-font);
font-size: 14px;
position: relative;
z-index: 1;
}
.sc-steps__label {
display: block;
font-size: 14px;
color: var(--sc-text);
margin-top: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Étape franchie : pastille et traits verts. Étape courante : pastille pleine bleue. */
.sc-steps__item--done .sc-steps__bullet {
background: var(--sc-green);
border-color: var(--sc-green);
color: #fff;
}
.sc-steps__item--done::before,
.sc-steps__item--done::after,
.sc-steps__item--current::before { background: var(--sc-green); }
.sc-steps__item--current .sc-steps__bullet {
background: var(--sc-blue);
border-color: var(--sc-blue);
color: #fff;
}
/* --------------------------------------------------------------------------
Boutons — reprise des variantes SDX, sans SDX.
Portent aussi .btn pour rester compatibles des composants BS5 (modales…).
-------------------------------------------------------------------------- */
.sc-btn {
font-family: 'TheSaB5', var(--sc-font);
font-size: 18px;
font-weight: 400;
padding: 12px 24px;
border: 0;
border-radius: var(--sc-radius);
cursor: pointer;
line-height: 1.2;
}
.sc-btn--primary { background-color: var(--sc-blue); color: #fff; }
.sc-btn--primary:hover,
.sc-btn--primary:focus { background-color: var(--sc-blue-hover); color: #fff; }
.sc-btn--confirm { background-color: var(--sc-green); color: #fff; }
.sc-btn--confirm:hover,
.sc-btn--confirm:focus { background-color: var(--sc-green-dark); color: #fff; }
.sc-btn--secondary { background-color: var(--sc-grey-btn); color: var(--sc-text); }
.sc-btn--secondary:hover,
.sc-btn--secondary:focus { background-color: #BFC6CB; color: var(--sc-text); }
.sc-btn--link {
background: none;
border: 0;
color: var(--sc-blue);
padding: 12px 0;
}
.sc-btn:disabled,
.sc-btn.disabled { opacity: .45; cursor: not-allowed; }
/* Barre d'actions en pied de parcours : Annuler à gauche, Retour/Continuer à droite.
Hors de la carte de contenu, comme en v1. */
/* Barre d'actions : bandeau blanc pleine largeur, contenu retrait de 10% de chaque
cote — valeur relevee sur #bouttonMenu du v1 (la feuille annonce 20% mais le rendu
effectif est de 10%, un override intervient ailleurs ; on s'aligne sur le mesure). */
/* La barre d'actions s'aligne sur les bords de la CARTE, pas sur ceux de la
fenetre (recette P2, 22/10) : avec `padding: 10px 10%` Annuler et Continuer
debordaient largement de la carte. Meme largeur maximale et meme centrage
qu'elle ; les ecrans qui posent une carte plus etroite ajustent ci-dessous. */
/* La bande blanche reste pleine largeur, mais son CONTENU s'aligne sur les bords
de la carte (recette P2, 22/10) : avec `padding: 10px 10%` Annuler et Continuer
debordaient. Le retrait est calcule pour que le contenu occupe la largeur de la
carte, centre ; `max()` evite un retrait negatif sous cette largeur. */
.sc-actions {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 10px var(--sc-gouttiere) 20px;
gap: 12px;
}
.sc-actions__right { display: flex; gap: 12px; }
.sc-actions .sc-btn--link { font-size: 18px; color: var(--sc-blue); padding: 12px 0; }
/* --------------------------------------------------------------------------
Étape 1 — choix du motif (produits)
-------------------------------------------------------------------------- */
.sc-products {
display: flex;
flex-wrap: wrap;
/* 12px : le `margin-right` des labels du .toggle-button-group SDX, dont les
tuiles produit reprennent le gabarit. */
gap: 12px;
margin-top: 12px;
}
.sc-product {
display: inline-flex;
align-items: center;
/* Gabarit de `.toggle-button-group [type=radio] + label` dans sdx.css, que
le v1 emprunte tel quel : bordure #d6d6d6, rayon 5px, 18px/400, et un
retrait de 12px 24px — ramene a 12px 12px par les deux media queries
`device-width` de StyleSwisscomDesktop.css (voir plus bas). D'ou une
tuile « Mobile » de 133px au repos et de 109px sous ces media queries ;
nous etions bloques sur 109 avec une graisse 100. */
gap: 5px;
border: 1px solid var(--sc-tile-border);
border-radius: var(--sc-radius);
background: #fff;
padding: 12px 24px;
height: 52px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
margin: 0;
}
.sc-product:hover { border-color: var(--sc-blue-light); }
.sc-product input { position: absolute; opacity: 0; pointer-events: none; }
/* Etat selectionne releve sur le v1 : SEULES la bordure, la couleur du texte et
celle de l'icone passent au bleu. La bordure reste a 1px — pas d'epaississement
ni d'ombre interne, contrairement a ce que je faisais. */
.sc-product--selected,
.sc-product:has(input:checked) {
border-color: var(--sc-blue);
color: var(--sc-blue);
}
.sc-product--selected .sc-product__icon,
.sc-product:has(input:checked) .sc-product__icon { color: var(--sc-blue); }
/* Icone : 24px et couleur du texte (#333), valeurs du v1. */
.sc-product__icon { font-size: 24px; color: var(--sc-text); }
/* --------------------------------------------------------------------------
Champs de formulaire — style Swisscom : filet bas uniquement.
NB : en v3 les identifiants de champs doivent être STABLES. En v1 ils étaient
dérivés du libellé français accentué (DPrénom, DNumérodetéléphoneportable…),
ce qui changeait avec la langue et imposait au SSO un adressage positionnel
.eq(n) — à l'origine du bug où cust_lname était écrasé par cust_street.
-------------------------------------------------------------------------- */
.sc-field { margin-bottom: 22px; }
.sc-field__label {
display: block;
font-size: 18px;
font-weight: 300;
color: var(--sc-text-soft);
margin-bottom: 4px;
}
.sc-field__label .sc-required { color: var(--sc-text-soft); }
/* Les libelles de la fiche client sont plus petits que ceux des ecrans 2 :
14px sur le v1 (mesure sur Prenom, Nom, Numero de telephone, Adresse e-mail),
contre 18px pour « Shop: » et « Date : ». */
.sc-step-cardfields .sc-field__label { font-size: 14px; }
.sc-field__input {
width: 100%;
border: 0;
border-bottom: 1px solid var(--sc-grey-line);
border-radius: 0;
background: #fff;
padding: 6px 0;
font-family: var(--sc-font);
font-size: 18px;
color: var(--sc-text);
}
/* Etape 3 : les champs sont sur deux colonnes dans le v1, qui les pose a 33% avec
4% de gouttiere (commonSwisscom.js:2015-2021) : Prenom / Nom, puis Mobile /
E-mail, puis le reste de la fiche. Le nombre de champs n'est pas fige, il vient
de la fiche client du pro. */
/* Deux colonnes dont la largeur suit la carte, comme l'ecran 2 : 324px par
champ pour 1083px de contenu a 1920 (30 %), 215px pour 702px a 1280 (30,6 %).
La gouttiere suit le meme principe (39px a 1920, soit 3,6 %). En colonnes
`1fr` bornees par un max-width en pixels, les champs occupaient toute la
carte des qu'elle passait sous 846px.
`--sc-grille` sert aussi au groupe « Langue de correspondance », qui occupe
exactement la meme largeur sur le v1. */
.sc-form-grid {
display: grid;
/* Les colonnes se partagent la grille ; c'est `--sc-grille` qui les borne.
Un `repeat(2, 30%)` etait faux : les pourcentages d'une grille se comptent
sur la GRILLE, pas sur la carte — les colonnes tombaient a 207px au lieu
de 325. La gouttiere vaut 5,66 % de la grille, soit les 39px du v1. */
grid-template-columns: 1fr 1fr;
gap: 0 5.66%;
max-width: var(--sc-grille);
}
/* Un champ a saisie longue (isBigInputSize) occupe la largeur des deux colonnes. */
.sc-form-grid .sc-field--wide { grid-column: 1 / -1; }
/* Champs encadres, comme le champ date : le v1 n'utilise le filet bas nulle part
sur cet ecran. */
.sc-field__input--boxed {
height: 48px;
background: #F8FAFB;
border: 1px solid #DDE3E7;
border-radius: var(--sc-radius);
padding: 0 16px;
font-size: 18px;
font-weight: 300;
}
/* Zone de texte : meme encadre, mais une hauteur libre et pas de centrage vertical. */
.sc-field__input--area {
height: auto;
padding: 12px 16px;
line-height: 1.4;
resize: vertical;
}
.sc-field__input--boxed:focus { border-color: var(--sc-blue); }
.sc-field__input--boxed.sc-error { border-color: var(--sc-red); }
/* Pictogrammes de validation dans le champ, comme en production. Le champ est
un : il ne peut pas porter de ::after, l'icone passe donc par une
image de fond.
Les deux traces sont ceux que SDX livre dans dist/icons, repris tels quels —
`026-exclamation-mark-circle.svg` et `011-check-mark.svg` — avec pour seule
modification la couleur de remplissage. Ce sont des surfaces pleines (fill)
dans un viewBox de 30 ; les redessiner au trait donnait une autre forme.
Geometrie et couleurs relevees dans le sdx.css de production, sur les regles
`.input-field input.invalid--inline` et `.input-field input.valid` :
background-size 22px, position `center right 16px`, padding-right 52px,
#DD1122 et #25B252 — soit exactement --sc-red et --sc-green. */
.sc-field__input--boxed.sc-error,
.sc-field__input--boxed.sc-valid {
background-repeat: no-repeat;
background-position: center right 16px;
background-size: 22px 22px;
padding-right: 52px;
}
.sc-field__input--boxed.sc-error {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%23DD1122'%20d='M15,2C7.83,2,2,7.83,2,15s5.83,13,13,13s13-5.83,13-13S22.17,2,15,2z%20M15,26C8.93,26,4,21.07,4,15S8.93,4,15,4%20s11,4.93,11,11S21.07,26,15,26z%20M17,21c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2S17,19.9,17,21z%20M13,7h4v4l-1,6h-2l-1-6V7z'/%3E%3C/svg%3E");
}
.sc-field__input--boxed.sc-valid {
/* La production ne passe PAS la bordure au vert : elle la fonce simplement
(#666), seule l'icone porte le vert. */
border-color: #666666;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%2325B252'%20d='M14,24c0.38,0,0.7-0.21,0.87-0.51l9-16c0.27-0.48,0.1-1.09-0.38-1.36c-0.48-0.27-1.09-0.1-1.36,0.38l-8.35,14.85l-6.07-6.07%20c-0.39-0.39-1.02-0.39-1.41,0s-0.39,1.02,0,1.41l7,7C13.48,23.9,13.74,24,14,24z'/%3E%3C/svg%3E");
}
/* Remplissage automatique du navigateur : il ne declenche ni `blur` ni, selon
les cas, `input`. Chrome joue en revanche une animation sur `:-webkit-autofill`
— on en declare une, vide et instantanee, dont `animationstart` sert de signal
a swisscom.js pour revalider le champ et poser la coche verte. */
@keyframes scAutofill { from { } to { } }
.swisscom-theme .sc-field__input:-webkit-autofill {
animation-name: scAutofill;
animation-duration: .01s;
}
.sc-field__input:focus {
outline: none;
border-bottom-color: var(--sc-blue);
box-shadow: none;
}
.sc-field__input.sc-error { border-bottom-color: var(--sc-red); }
.sc-field__error { color: var(--sc-red); font-size: 13px; margin-top: 4px; }
/* Champ portant une icone a droite (le champ Date). L'icone est decorative :
`pointer-events: none` pour que le clic atteigne le champ, qui ouvre le
calendrier. */
.sc-field__withicon { position: relative; display: block; }
/* 48px : l'icone occupe toute la hauteur du champ a droite, le texte ne doit
pas passer dessous. */
.sc-field__withicon .sc-field__input { padding-right: 48px; }
/* Gabarit repris de SDX, `.input-field.flatpickr input ~ a .icon-009-calendar` :
une boite de 48x48 calee en bas a droite, le glyphe centre dedans par
`line-height` et `text-align`. Mesure sur le v1 : 48x48, font-size 30px,
marge `0 6px 1px 0`. Nous avions 20px et du bleu — d'ou une icone nettement
plus petite et de la mauvaise couleur. */
.sc-field__icon {
position: absolute;
right: 0;
bottom: 0;
width: 48px;
height: 48px;
margin: 0 6px 1px 0;
line-height: 48px;
text-align: center;
font-size: 30px;
color: var(--sc-text-soft);
pointer-events: none;
}
/* Les trois etats de SDX. Notre champ Date est `readonly` — comme celui du v1,
que flatpickr verrouille — il tombe donc sur le gris clair, et c'est bien la
couleur mesuree sur la production : rgb(187,187,187). */
.sc-field__input[readonly] ~ .sc-field__icon { color: #BBBBBB; }
.sc-field__input:focus:not([readonly]) ~ .sc-field__icon { color: var(--sc-blue); }
/* Message d'erreur d'un ECRAN (et non d'un champ) : le v1 n'a qu'une regle,
`.errorMessage { color: red }` (directory/swisscomLibs/directory/
StyleSwisscomDesktop.css), taille heritee du parcours et marges laissees
a celles du
. On reprend ce rouge vif, different du #DD1122 des champs. */
/* Variante neutre : meme emplacement, mais pour une information et non un echec. */
.swisscom-theme .sc-error-message--neutre { color: var(--sc-text-soft); }
.swisscom-theme .sc-error-message {
color: red;
font-size: 18px;
/* Ecart au-dessus releve sur la capture de reference du v1 : le message
respire nettement sous les tuiles, il n'est pas colle. En dessous, la
marge de 34px du lien business prend le relais (fusion des marges). */
margin: 56px 0 16px;
}
/* 12px : la taille de `.asterisk` sur le v1. */
.sc-legend { font-size: 12px; color: var(--sc-text-soft); margin-top: 24px; }
/* Mention posee sous la carte : elle suit son alignement et sa largeur. */
.sc-legend--outside {
/* Posee dans .sc-page, elle herite de la gouttiere et occupe donc exactement
la largeur de la carte — ce que fait `.asterisk` sur le v1 (1143 px). */
margin: 16px 0 0;
}
/* --------------------------------------------------------------------------
Ecran « Gerer mes rendez-vous »
--------------------------------------------------------------------------
Deux colonnes de meme largeur, comme en v1 : acces par reference a gauche,
renvoi de la reference a droite. On reutilise .sc-field et .sc-btn du
parcours, seuls la grille et le mot en italique sont propres a cet ecran. */
.sc-manage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 60px;
max-width: 1080px;
margin-top: 24px;
}
.sc-manage-col .sc-field { max-width: 420px; }
/* Le bouton suit la largeur de son texte, il ne s'etire pas sur la colonne. */
.sc-manage-col .sc-btn { display: inline-block; width: auto; }
/* Mention de rappel sous le bouton d'envoi : en italique dans le v1. */
.sc-manage-note {
margin-top: 24px;
font-size: 15px;
font-style: italic;
color: var(--sc-text-soft);
}
@media (max-width: 767px) {
.sc-manage-grid { grid-template-columns: 1fr; gap: 40px 0; }
}
/* --------------------------------------------------------------------------
Liste des rendez-vous
--------------------------------------------------------------------------
Sur cet ecran le titre est DANS la carte, suivi d'un filet — contrairement a
l'ecran d'acces ou il est pose au-dessus, sur le fond gris. */
.sc-apt__title {
font-size: 28px;
font-weight: 300;
color: var(--sc-text);
margin: 0 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--sc-grey-line);
}
.sc-apt__subtitle {
font-size: 18px;
font-weight: 500;
color: var(--sc-navy);
margin: 0 0 20px;
}
.sc-apt-group + .sc-apt-group { margin-top: 44px; }
/* Une ligne par rendez-vous : heure, motif, boutique, puis le bouton d'annulation
pour les rendez-vous a venir seulement. */
.sc-apt {
display: flex;
align-items: center;
gap: 24px;
padding: 8px 0;
font-size: 17px;
font-weight: 300;
}
.sc-apt__time { color: var(--sc-blue); flex: 0 0 160px; }
.sc-apt__product { flex: 0 0 300px; color: var(--sc-text); }
.sc-apt__shop { flex: 1 1 auto; color: var(--sc-text); }
.sc-apt__cancel { flex: 0 0 auto; }
.sc-apt__empty { color: var(--sc-text-soft); font-size: 17px; }
/* Modale d'annulation du socle (#cancelRdvPop), reprise dans l'ecran liste.
Le v1 presente les motifs d'annulation sur un ecran a part ; le socle v3 les
met dans cette modale. On garde la modale — son balisage et son comportement
sont pilotes par showCancelAppointmentPop() — et on se contente de l'habiller,
comme pour la modale OTP. Le socle centre son contenu : on le remet a gauche,
la liste des motifs est illisible centree. */
.swisscom-theme #cancelRdvPop .modal-content {
font-family: var(--sc-font);
font-weight: 300;
border: 0;
border-radius: 0;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
}
.swisscom-theme #cancelRdvPop .modal-body {
padding: 24px 28px;
text-align: left;
font-size: 18px;
color: var(--sc-text);
}
.swisscom-theme #cancelRdvPop #reasons h4 {
font-size: 18px;
font-weight: 500;
color: var(--sc-navy);
margin: 0 0 12px;
}
.swisscom-theme #cancelRdvPop #reasons label {
font-size: 17px;
font-weight: 300;
color: var(--sc-text);
line-height: 28px;
}
.swisscom-theme #cancelRdvPop #reasons hr { margin: 20px 0; }
.swisscom-theme #cancelRdvPop .modal-footer {
border-top: 0;
padding: 0 28px 24px;
}
.swisscom-theme #cancelRdvPop .modal-footer .btn {
border: 0;
border-radius: var(--sc-radius);
padding: 12px 24px;
min-width: 160px;
font-family: var(--sc-font);
font-size: 18px;
font-weight: 400;
}
.swisscom-theme #cancelRdvPop .modal-footer .buttonClose {
background: var(--sc-grey-btn);
color: var(--sc-text);
}
.swisscom-theme #cancelRdvPop .modal-footer #confirmAppCancel {
background: var(--sc-blue);
color: #fff;
}
.swisscom-theme #cancelRdvPop .modal-footer #confirmAppCancel:hover {
background: var(--sc-blue-hover);
}
/* Modale de fin de session. Le v1 passe par alert() : meme information, mais
dans le ton du parcours. Elle ne se ferme pas — seul le bouton agit. */
.swisscom-theme #scSessionPop .modal-content {
font-family: var(--sc-font);
font-weight: 300;
border: 0;
border-radius: 0;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
}
.swisscom-theme #scSessionPop .modal-body {
padding: 28px 28px 8px;
font-size: 18px;
color: var(--sc-text);
}
.swisscom-theme #scSessionPop .sc-session__msg { margin: 0; }
.swisscom-theme #scSessionPop .modal-footer {
border-top: 0;
padding: 0 28px 24px;
justify-content: flex-end;
}
@media (max-width: 767px) {
.sc-apt { flex-direction: column; align-items: flex-start; gap: 4px; }
.sc-apt__time, .sc-apt__product, .sc-apt__shop { flex: 0 0 auto; }
.sc-apt__cancel { margin-top: 8px; }
}
/* --------------------------------------------------------------------------
Liste deroulante — portage du composant SDX `.select` du v1
--------------------------------------------------------------------------
Le v1 n'affiche pas un