/* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { font-family: "Source Sans Pro"; color:rgb(31,41,55); direction:ltr; font-weight:400; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-family: "Source Sans Pro"; font-weight:700; color:rgb(11,58,117); font-style:normal; text-decoration:none; direction:ltr; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-family: "Source Sans Pro"; font-weight:600; color:rgb(11,58,117); font-style:normal; text-decoration:none; direction:ltr; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-family: "Source Sans Pro"; font-weight:700; color:rgb(11,58,117); direction:ltr; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent h6, #dmRoot *#dm div.dmFooter h6, #dmRoot *#dm div.p_hfcontainer h6, #dmRoot *#dm div.flex_hfcontainer h6, #dmRoot *#dm div.dm-title h6 { font-family: "Source Sans Pro"; font-weight:bold; color:rgb(0,142,150); direction:ltr; font-style:normal; text-decoration:none; text-transform:uppercase; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { color:rgb(31,41,55); direction:ltr; font-family: "Source Sans Pro"; font-weight:700; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } } @media (min-width:1025px) { #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:56px; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-size:40px; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-size:24px; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { font-size:20px; } #dmRoot *#dm div.dmContent h6, #dmRoot *#dm div.dmFooter h6, #dmRoot *#dm div.p_hfcontainer h6, #dmRoot *#dm div.flex_hfcontainer h6, #dmRoot *#dm div.dm-title h6 { font-size:18px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:16px; } } /* ============================================================ HISSEZ-HAUT FORMATION — site.css CSS GLOBAL — appliqué sur tous les écrans ============================================================ Ce fichier contient : - Les variables CSS du site (palette, typo, layout) - Le fond global du site - La contrainte de largeur 1280px sur les sections Duda - Les classes utilitaires (.hh-btn, .tache, .bloc-pastel, etc.) ============================================================ */ /* === 1. VARIABLES CSS GLOBALES === */ :root { /* --- Couleurs : palette officielle de la maquette --- */ --hh-bleu-fonce: #0B3A75; --hh-bleu: #4478BE; --hh-bleu-clair: #6EABE0; --hh-jaune: #F0C24B; --hh-beige: #F0E4D1; --hh-teal: #008E96; --hh-ivoire: #FFFFFF; --hh-texte: #1F2937; --hh-gris: #5A5A5A; /* --- Layout --- */ --hh-content-width: 1280px; --hh-content-padding: 32px; --hh-content-padding-mob: 20px; /* --- Radius & ombres --- */ --hh-radius-sm: 8px; --hh-radius-md: 16px; --hh-radius-lg: 24px; --hh-radius-xl: 32px; --hh-shadow-sm: 0 2px 8px rgba(11,58,117,.08); --hh-shadow-md: 0 4px 16px rgba(11,58,117,.12); /* --- Typographies --- */ --hh-font-titre: 'Fraunces', 'Playfair Display', Georgia, serif; --hh-font-courant: 'Inter', 'Nunito', system-ui, sans-serif; --hh-font-manuscrit: 'Caveat', 'Kalam', cursive; } /* === 2. FOND GLOBAL ET COULEUR DE TEXTE === */ body, .dmBody { background: var(--hh-ivoire); color: var(--hh-texte); } /* === 3. CONTRAINTE DE LARGEUR 1280px === */ /* Le wrapper Duda .dmRespRow est limité a 1280px et centré. Les sections gardent leur fond pleine largeur. */ .dmRespRow, .dm-section-content, .dmContent > .dmRespRow { max-width: var(--hh-content-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--hh-content-padding); padding-right: var(--hh-content-padding); box-sizing: border-box; } /* Header et footer : contenu contraint, fond pleine largeur */ .dmHeader .dmRespRow, .dmFooter .dmRespRow { max-width: var(--hh-content-width) !important; margin-left: auto !important; margin-right: auto !important; } .dmHeader, .dmFooter { width: 100%; } /* Exceptions : sections qui doivent rester pleine largeur */ .hh-fullbleed, .hh-fullbleed .dmRespRow { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* === 4. CLASSES UTILITAIRES — BOUTONS === */ .hh-btn { display: inline-block; padding: 14px 28px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; font-family: var(--hh-font-courant); cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; } .hh-btn--primary { background: var(--hh-bleu); color: #fff; } .hh-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--hh-shadow-md); color: #fff; } .hh-btn--secondary { background: var(--hh-jaune); color: var(--hh-bleu-fonce); } .hh-btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--hh-shadow-md); } .hh-btn--outline { background: transparent; color: var(--hh-bleu); border: 2px solid var(--hh-bleu); } .hh-btn--outline:hover { background: var(--hh-bleu); color: #fff; } /* === 5. CLASSES UTILITAIRES — TACHES PASTEL DERRIERE UN MOT === */ .tache-bleu, .tache-jaune, .tache-beige, .tache-teal { position: relative; display: inline-block; padding: 0 8px; z-index: 1; } .tache-bleu::before, .tache-jaune::before, .tache-beige::before, .tache-teal::before { content: ""; position: absolute; left: 0; right: 0; bottom: 5%; height: 70%; z-index: -1; border-radius: 30% 70% 65% 35% / 50% 45% 55% 50%; opacity: 0.35; } .tache-bleu::before { background: var(--hh-bleu-clair); } .tache-jaune::before { background: var(--hh-jaune); } .tache-beige::before { background: var(--hh-beige); opacity: 1; } .tache-teal::before { background: var(--hh-teal); opacity: 0.25; } /* === 6. CLASSES UTILITAIRES — BLOCS PASTEL ARRONDIS === */ .bloc-pastel-bleu, .bloc-pastel-jaune, .bloc-pastel-beige, .bloc-pastel-teal { border-radius: var(--hh-radius-lg); padding: 28px; position: relative; } .bloc-pastel-bleu { background: rgba(110, 171, 224, 0.20); } .bloc-pastel-jaune { background: rgba(240, 194, 75, 0.25); } .bloc-pastel-beige { background: var(--hh-beige); } .bloc-pastel-teal { background: rgba(0, 142, 150, 0.15); } /* === 7. CLASSES UTILITAIRES — STYLE MANUSCRIT === */ .manuscrit { font-family: var(--hh-font-manuscrit); font-size: 1.5em; color: var(--hh-bleu); font-weight: 400; } /* === 8. CLASSES UTILITAIRES — DOODLE FLOTTANT === */ .doodle-decor { pointer-events: none; opacity: 0.7; position: absolute; font-family: var(--hh-font-manuscrit); } /* === 9. CLASSES UTILITAIRES — BADGE ROND === */ .badge-rond { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; background: var(--hh-ivoire); border: 2px dashed var(--hh-jaune); padding: 12px; text-align: center; font-family: var(--hh-font-courant); color: var(--hh-bleu-fonce); box-shadow: var(--hh-shadow-sm); } .badge-rond strong { font-family: var(--hh-font-titre); font-size: 22px; display: block; color: var(--hh-bleu-fonce); } .badge-rond small { font-size: 11px; color: var(--hh-gris); } /* === 10. CLASSES UTILITAIRES — LISTE AVEC COCHES === */ .liste-coches { list-style: none; padding: 0; margin: 0; } .liste-coches li { position: relative; padding: 6px 0 6px 32px; margin-bottom: 4px; font-size: 15px; } .liste-coches li::before { content: "✓"; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--hh-bleu); color: white; text-align: center; font-weight: bold; font-size: 13px; line-height: 22px; } /* === 11. CARTES POLAROIDS (rotation legere) === */ .carte-rotate-gauche { transform: rotate(-2deg); transition: transform 0.3s ease; } .carte-rotate-droite { transform: rotate(2deg); transition: transform 0.3s ease; } .carte-rotate-gauche:hover, .carte-rotate-droite:hover { transform: rotate(0deg) scale(1.02); } /* === BANDEAU D'INDICATEURS — 4 chiffres clés === */ .hh-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--hh-radius-xl); overflow: hidden; box-shadow: var(--hh-shadow-md); margin: 32px 0; } .hh-stats-bar .hh-stat { display: flex; align-items: center; gap: 16px; padding: 28px 24px; } /* 4 fonds de couleur différents par colonne */ .hh-stats-bar .hh-stat:nth-child(1) { background: var(--hh-beige); } .hh-stats-bar .hh-stat:nth-child(2) { background: var(--hh-jaune: #F0C24B); } .hh-stats-bar .hh-stat:nth-child(3) { background: var(--hh-teal); } .hh-stats-bar .hh-stat:nth-child(4) { background: var(--hh-bleu-fonce); } /* Icône à gauche */ .hh-stats-bar .hh-stat-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; } .hh-stats-bar .hh-stat-icon img { width: 100%; height: 100%; object-fit: contain; } /* Bloc texte à droite */ .hh-stats-bar .hh-stat-content { display: flex; flex-direction: column; } .hh-stats-bar .hh-stat-number { font-family: var(--hh-font-titre); font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .hh-stats-bar .hh-stat-label { font-family: var(--hh-font-courant); font-size: 14px; line-height: 1.3; } /* Couleurs de texte selon le fond de la colonne */ .hh-stats-bar .hh-stat:nth-child(1) .hh-stat-number, .hh-stats-bar .hh-stat:nth-child(1) .hh-stat-label { color: var(--hh-bleu-fonce); } .hh-stats-bar .hh-stat:nth-child(2) .hh-stat-number, .hh-stats-bar .hh-stat:nth-child(2) .hh-stat-label, .hh-stats-bar .hh-stat:nth-child(3) .hh-stat-number, .hh-stats-bar .hh-stat:nth-child(3) .hh-stat-label, .hh-stats-bar .hh-stat:nth-child(4) .hh-stat-number, .hh-stats-bar .hh-stat:nth-child(4) .hh-stat-label { color: #fff; } /* Responsive : 2 colonnes sur tablette, 1 sur mobile */ @media (max-width: 1024px) { .hh-stats-bar { grid-template-columns: repeat(2, 1fr); border-radius: var(--hh-radius-lg); } } @media (max-width: 600px) { .hh-stats-bar { grid-template-columns: 1fr; } .hh-stats-bar .hh-stat { padding: 22px 20px; } .hh-stats-bar .hh-stat-number { font-size: 30px; } } /* === PORTES D'ENTREE — cartes catégories === */ .hh-portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; } .hh-porte { background: var(--hh-ivoire); border-radius: var(--hh-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--hh-shadow-sm); transition: transform .2s, box-shadow .2s; } .hh-porte:hover { transform: translateY(-4px); box-shadow: var(--hh-shadow-md); } .hh-porte-header { display: flex; align-items: center; gap: 14px; } .hh-porte-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hh-porte-icon img { width: 60%; height: 60%; object-fit: contain; } .hh-porte-icon--enfants { background: var(--hh-jaune); } .hh-porte-icon--parents { background: #E89A3F; } .hh-porte-icon--pro { background: var(--hh-teal); } .hh-porte-titre { font-family: var(--hh-font-titre); font-size: 22px; font-weight: 700; color: var(--hh-bleu-fonce); margin: 0; } .hh-porte-texte { font-family: var(--hh-font-courant); font-size: 15px; color: var(--hh-texte); margin: 0; line-height: 1.5; } .hh-porte-link { margin-top: auto; color: var(--hh-bleu); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; } .hh-porte-link:hover { gap: 10px; color: var(--hh-bleu-fonce); } /* Responsive */ @media (max-width: 900px) { .hh-portes { grid-template-columns: 1fr; } }/* ============================================================ HISSEZ-HAUT FORMATION — site-desktop.css SURCHARGES SPECIFIQUES DESKTOP (>= 1025px) ============================================================ */ @media (min-width: 1025px) { /* Padding lateral plus genereux sur desktop */ .dmRespRow, .dm-section-content, .dmContent > .dmRespRow { padding-left: 40px; padding-right: 40px; } /* Boutons un peu plus grands sur desktop */ .hh-btn { padding: 16px 32px; font-size: 16px; } }@media all { :root { --btn-text-direction: ltr; --btn-border-r-color: var(--btn-border-color); --btn-border-l-color: var(--btn-border-color); --btn-border-b-width: var(--btn-border-width); --btn-border-width: 1px; --btn-border-radius: 50px; --btn-border-t-width: var(--btn-border-width); --btn-border-tl-radius: 10px; --btn-border-br-radius: 10px; --btn-border-bl-radius: 10px; --btn-bg-color: var(--color_1); --btn-box-shadow: rgba(0, 0, 0, 0.25) 3px 0px 11px 0px; --btn-border-color: rgba(0, 0, 0, 0); --btn-border-tr-radius: 10px; --btn-border-r-width: var(--btn-border-width); --btn-border-b-color: var(--btn-border-color); --btn-border-l-width: var(--btn-border-width); --btn-border-t-color: var(--btn-border-color); --btn-text-align: center; --btn-text-color: var(--color_7); --btn-text-decoration: none; --btn-text-font-weight: normal; --btn-text-font-family: Source Sans Pro; --btn-icon-color: var(--color_7); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: var(--color_2); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: rgba(0,0,0,0); --btn-hover-text-color: var(--color_3); --btn-hover-text-font-weight: var(--btn-text-font-weight); --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } .button_2 { --btn-border-l-color: var(--color_1); --btn-border-r-color: var(--color_1); --btn-border-b-width: 1px; --btn-text-direction: ltr; --btn-border-radius: 50px; --btn-border-t-width: 1px; --btn-border-tl-radius: 10px; --btn-border-br-radius: 10px; --btn-border-bl-radius: 10px; --btn-bg-color: rgba(0, 0, 0, 0); --btn-border-r-width: 1px; --btn-border-tr-radius: 10px; --btn-border-b-color: var(--color_1); --btn-border-l-width: 1px; --border-style: solid; --btn-border-t-color: var(--color_1); --btn-text-align: center; --btn-text-color: var(--color_1); --btn-text-decoration: none; --btn-text-font-weight: normal; --btn-icon-color: var(--color_4); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: var(--color_1); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: var(--color_1); --btn-hover-text-color: var(--color_3); --btn-hover-text-font-weight: bold; --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } :root { --section-padding-top: 1%; --section-padding-left: 0%; --section-padding-right: 0%; --section-padding-bottom: 1%; --column-padding-top: 4px; --column-padding-right: 10px; --column-padding-left: 10px; --column-padding-bottom: 4px; --inner-column-padding-left: 10px; --inner-column-padding-right: 10px; --inner-column-padding-top: 10px; --inner-column-padding-bottom: 10px; } } @media (min-width: 1025px) { :root { --btn-text-font-size: 16px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 14px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 16px; } .button_2 { --btn-text-font-size: 16px; } :root { --section-padding-left: 2%; --section-padding-right: 2%; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 13px; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 18px; } .button_2 { --btn-text-font-size: 18px; } :root { --section-padding-left: 4%; --section-padding-right: 4%; } } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] { border-radius: 7px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] { border-radius: 0px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] { background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] { box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.2), 0 -3px 0 0 #ccc; transition: box-shadow 0.1s ease; position: relative; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 #ccc; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'].flexButton { padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .text { position: relative; top: -3px; transition: all 0.1s ease; padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover .text { top: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TRANSPARENT'] { border-radius: 5px / 4px; box-shadow: 0 0 18px rgba(5, 5, 6, 0.3); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS']:before { content: ""; width: 100%; height: 50%; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.15); display: block; position: absolute; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] { border-radius: 21px; background-clip: border-box; box-shadow: 0 3px 3px rgba(5, 5, 6, 0.07), inset 0 0 0 2px rgba(0, 0, 0, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:hover { box-shadow: 0 3px 3px rgba(5, 5, 6, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:active { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 3px 3px rgba(5, 5, 6, 0.3); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjUiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] { background-clip: border-box; box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5); padding-left: 46px; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON']:hover { box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5), inset 0 0 0 800px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .iconBg { background-color: #f7f7f7; top: 0; bottom: 0; margin: 0; width: 50px; text-align: center; display: block; height: 100%; border-top-left-radius: inherit; border-bottom-left-radius: inherit; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .icon { display: inline-block; float: none; position: absolute; top: 50%; left: 0; right: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] { overflow: hidden; background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .text { opacity: 1; display: inline-block; transition: all 0.3s; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .text { opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .iconBg { position: absolute; top: -200%; bottom: 0; margin: auto; width: 100%; left: 0; transition: all 0.3s; opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .iconBg { top: 0; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .icon { display: block; float: left; position: absolute; font-size: 27px; width: 100%; height: 100%; margin-top: -13px; top: 50%; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] { overflow: initial; background-clip: border-box; border-radius: 2px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] { border-radius: 6px; overflow: initial; background-clip: border-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] { background-clip: border-box; border-radius: 6px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] { background-clip: border-box; border-radius: 3px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] { background-clip: border-box; border-radius: 6px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'].flexButton { padding: 10px 7px 10px 47px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .iconBg { display: block; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] { overflow: initial; background-clip: border-box; border-radius: 1px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'].flexButton { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .text { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .iconBg { display: none; } @media (min-width: 768px) { #dm .dmRespRow .dmRespCol > .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container-global .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container .dmWidget[data-buttonstyle='BORDER_SHORT'] { width: 222px; } } #dm .dmWidget:not([data-buttonstyle]), div.buttons , #dm .button_2 .dmWidget:not([data-buttonstyle]), #dm .dmWidget.button_2:not([data-buttonstyle]), div.buttons .button_2, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] { border-radius: 50px; } #dm .dmWidget:not([data-buttonstyle]).flexButton, div.buttons .flexButton, #dm .button_2 .dmWidget:not([data-buttonstyle]).flexButton, #dm .dmWidget.button_2:not([data-buttonstyle]).flexButton, div.buttons .button_2.flexButton, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'].flexButton { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .textonly, #dm .dmWidget:not([data-buttonstyle]) input, #dm .dmWidget:not([data-buttonstyle]) .text, div.buttons .text, #dm .button_2 .dmWidget:not([data-buttonstyle]) .textonly, #dm .button_2 .dmWidget:not([data-buttonstyle]) input, #dm .button_2 .dmWidget:not([data-buttonstyle]) .text, #dm .dmWidget.button_2:not([data-buttonstyle]) .textonly, #dm .dmWidget.button_2:not([data-buttonstyle]) input, #dm .dmWidget.button_2:not([data-buttonstyle]) .text, div.buttons .button_2 .text, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .text { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .iconBg, #dm .button_2 .dmWidget:not([data-buttonstyle]) .iconBg, #dm .dmWidget.button_2:not([data-buttonstyle]) .iconBg, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .iconBg { display: none; } #dm div.dmInner #site_content .dmWidget, #dm div.dmInner .dmHeader .dmWidget { background-color: var(--btn-bg-color); border-color: var(--btn-border-color); border-bottom-color: var(--btn-border-b-color); border-left-color: var(--btn-border-l-color); border-right-color: var(--btn-border-r-color); border-top-color: var(--btn-border-t-color); border-radius: var(--btn-border-radius); border-bottom-left-radius: var(--btn-border-bl-radius); border-bottom-right-radius: var(--btn-border-br-radius); border-top-left-radius: var(--btn-border-tl-radius); border-top-right-radius: var(--btn-border-tr-radius); border-width: var(--btn-border-width); border-bottom-width: var(--btn-border-b-width); border-left-width: var(--btn-border-l-width); border-right-width: var(--btn-border-r-width); border-top-width: var(--btn-border-t-width); box-shadow: var(--btn-box-shadow); direction: var(--btn-text-direction); text-align: var(--btn-text-align); } #dm div.dmInner #site_content .dmWidget span.text, #dm div.dmInner #site_content .dmformsubmit input { color: var(--btn-text-color); font-family: var(--btn-text-font-family); font-size: var(--btn-text-font-size); font-weight: var(--btn-text-font-weight); text-decoration: var(--btn-text-decoration); } #dm div.dmInner #site_content .dmWidget:hover, #dm div.dmInner #site_content .dmWidget.hover, #dm div.dmInner .dmHeader .dmWidget:hover, #dm div.dmInner .dmHeader .dmWidget.hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border-color); border-bottom-color: var(--btn-hover-border-b-color); border-left-color: var(--btn-hover-border-l-color); border-right-color: var(--btn-hover-border-r-color); border-top-color: var(--btn-hover-border-t-color); } #dm div.dmInner #site_content .dmWidget:hover span.text, #dm div.dmInner #site_content .dmWidget.hover span.text, #dm div.dmInner .dmHeader .dmWidget:hover span.text, #dm div.dmInner .dmHeader .dmWidget.hover span.text, #dm div.dmInner #site_content .dmWidget:hover input[type="submit"], #dm div.dmInner #site_content .dmWidget.hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget:hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget.hover input[type="submit"] { color: var(--btn-hover-text-color); font-weight: var(--btn-hover-text-font-weight); } #dm div.dmInner #site_content .dmWidget span.icon, #dm div.dmInner .dmHeader .dmWidget span.icon { color: var(--btn-icon-color); fill: var(--btn-icon-fill); } #dm div.dmInner #site_content .dmWidget:not([data-buttonstyle]) .iconBg, #dm div.dmInner .dmHeader .dmWidget:not([data-buttonstyle]) .iconBg { display: var(--btn-icon-wrpr-display); } .dmBody [data-layout-grid] > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group { padding-bottom: var(--section-padding-bottom); padding-left: var(--section-padding-left); padding-right: var(--section-padding-right); padding-top: var(--section-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group { padding-bottom: var(--column-padding-bottom); padding-left: var(--column-padding-left); padding-right: var(--column-padding-right); padding-top: var(--column-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]), .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]) { padding-bottom: var(--inner-column-padding-bottom); padding-left: var(--inner-column-padding-left); padding-right: var(--inner-column-padding-right); padding-top: var(--inner-column-padding-top); } .dmHeader { background:var(--hh-ivoire) !important; border-bottom:1px solid rgba(11,58,117,0.08) !important; padding:12px 0 !important; } .dmRespNav a { font-family:var(--hh-font-courant) !important; color:var(--hh-texte) !important; font-weight:500 !important; font-size:15px !important; padding:8px 16px !important; border-bottom:2px solid transparent !important; transition:color .2s,border-color .2s !important; } .dmRespNav a:hover { color:var(--hh-bleu) !important; border-bottom-color:var(--hh-bleu-clair) !important; } .dmRespNav .dmActiveLink { color:var(--hh-bleu) !important; border-bottom:2px solid var(--hh-bleu) !important; } .dmHeader a.dmButtonLink { background:var(--hh-bleu-fonce) !important; color:#fff !important; border-radius:999px !important; padding:10px 22px !important; font-weight:600 !important; border:none !important; box-shadow:none !important; transition:transform .2s,box-shadow .2s !important; } .dmHeader a.dmButtonLink:hover { transform:translateY(-1px) !important; box-shadow:var(--hh-shadow-md) !important; background:var(--hh-bleu) !important; } .dmFooter { background:var(--hh-bleu-fonce) !important; color:#fff !important; padding:48px 0 24px !important; } .dmFooterContainer h4 { color:var(--hh-jaune) !important; font-family:var(--hh-font-courant) !important; font-size:14px !important; text-transform:uppercase !important; letter-spacing:1px !important; margin-bottom:16px !important; } .dmFooterContainer p,.dmFooterContainer li,.dmFooterContainer span { color:rgba(255,255,255,0.85) !important; font-size:14px !important; } .dmFooterContainer a { color:rgba(255,255,255,0.85) !important; text-decoration:none !important; transition:color 0.2s ease !important; } .dmFooterContainer a:hover { color:var(--hh-jaune) !important; } .dmFooter .dmFooterMentions,.dmFooter .dmCopyright { font-size:12px !important; color:rgba(255,255,255,0.6) !important; border-top:1px solid rgba(255,255,255,0.15) !important; padding-top:16px !important; margin-top:24px !important; } @media (max-width:767px) { .dmHeader { padding:8px 0 !important; } .dmFooter { padding:32px 0 16px !important; } .dmRespNav a { font-size:14px !important; padding:6px 12px !important; } } @media all { *#dm .dmInner nav.u_1540747981.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:var(--color_9) !important; text-transform:capitalize !important; } *#dm .dmInner nav.u_1540747981.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item .nav-item-text::after { border-style:solid !important; border-width:2px 0px 0px 0px !important; border-color:var(--color_4) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) !important; } *#dm .dmInner div.u_1743862518 hr { color:rgba(255,255,255,1) !important; } } @media (min-width:1025px) {} @media (min-width:0px) and (max-width:767px) { *#dm .dmInner *#hamburger-drawer.layout-drawer:not([data-origin="top"]) { width:61vw !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(61vw,0) !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content.hamburger-reverse { transform:translate(-61vw,0) !important; } } @media all { #flex-header[data-changeable-on-scroll][data-scrolling] [data-widget-type="image"] img { transform: scale(0.83); } #flex-header { background-color: rgba(255,255,255,1); background-image: none; padding: 0px 0px 0px 0px; } #flex-header[data-changeable-on-scroll][data-scrolling] { padding-top: 0px; padding-bottom: 0px; background-color: rgba(255,255,255,1); background-image: none; } } @media all { #flex-footer { background-color: var(--color_1); } } @media all { #\36 3a049320d35b55b4ef2a374 { min-height: 8px; column-gap: 4%; row-gap: 24px; background-color: rgba(0, 0, 0, 0); width: 100%; min-width: 4%; padding: 16px 16px 16px 16px; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #\36 3a049320d35b55b4ef2a376 { background-color: rgba(0, 0, 0, 0); } #\36 3a049320d35b55b4ef2a377 { min-height: 437px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 4% 4%; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #\36 3a049ca0d35b55b4ef2a5c3 { align-self: auto; max-width: 100%; width: 544px; justify-self: auto; height: auto; order: 0; grid-area: auto / auto / auto / auto; } #\36 2d6a167a824ca526194d9a5 { background-color: rgba(232, 255, 133, 1); } } @media all { #\36 406026c90e1521f6ecb0ecd { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; justify-content: flex-end; padding: 16px 16px 16px 16px; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #\36 406026c90e1521f6ecb0ecc { min-height: 118px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 4% 4%; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #widget_s4l { max-width: 100%; width: 100%; height: auto; order: 1; } #\31 53c8f7b { max-width: 100%; width: 100%; height: auto; order: 1; align-self: auto; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #widget_3ib { width: auto; height: auto; max-width: 100%; order: 2; } } @media all { #\37 7d0ec24 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; align-items: flex-end; padding: 16px 16px 16px 16px; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #b5c06542 { min-height: 100px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 4% 4%; margin-bottom: 0%; margin-right: 0%; margin-top: 0%; margin-left: 0%; } #\32 a06aa5a svg { fill: var(--color_3); } #\32 a06aa5a .hamburgerButton { background-color: rgba(0,0,0,0); } #\32 a06aa5a { width: 30px; height: 30px; } } @media all { #\36 2790979 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 1; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #d4bf4595 { min-height: 0; column-gap: 0%; row-gap: 0px; width: 100%; padding-left: 2%; padding-right: 2%; flex-wrap: nowrap; flex-direction: column; } #group_kt6 { width: 100%; min-width: 4%; min-height: 80px; column-gap: 4%; row-gap: 24px; flex-wrap: nowrap; } #group_li7 { flex-direction: row; align-items: flex-start; width: 100%; min-height: 160px; max-height: 100%; row-gap: 24px; column-gap: 2.1021898559459773%; margin-right: 0%; margin-left: 0%; flex-wrap: nowrap; order: 0; } #group_r81 { justify-content: flex-start; align-items: center; width: 72.77%; min-height: 160px; max-height: 100%; row-gap: 24px; column-gap: 2.1396731831175555%; margin-right: 0%; margin-left: 0%; flex-wrap: nowrap; } #\32 1b3df58 { justify-content: flex-start; align-items: center; width: 72.77%; min-height: 160px; max-height: 100%; row-gap: 24px; column-gap: 2.1396731831175555%; margin-right: 0%; margin-left: 0%; flex-wrap: nowrap; } #\34 40572bd { justify-content: flex-start; align-items: center; width: 72.77%; min-height: 160px; max-height: 100%; row-gap: 24px; column-gap: 2.1396731831175555%; margin-right: 0%; margin-left: 0%; flex-wrap: nowrap; } #de62e535 { justify-content: flex-start; align-items: center; width: 72.77%; min-height: 160px; max-height: 100%; row-gap: 24px; column-gap: 2.1396731831175555%; margin-right: 0%; margin-left: 0%; flex-wrap: nowrap; } #widget_hdc { width: 100%; height: auto; max-width: 100%; margin-right: 0%; margin-left: 0%; order: 0; } #widget_hcc { width: 100%; height: auto; max-width: 100%; order: 1; margin-right: 0%; margin-left: 0%; } #widget_393 { width: 100%; height: auto; max-width: 100%; margin-right: 0%; margin-left: 0%; } #widget_hk4 { width: 100%; height: auto; max-width: 100%; align-self: stretch; } #cbd18488 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #b56453b5 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #widget_lfp { width: 100%; height: auto; max-width: 100%; order: 1; } #widget_8dh { width: 100%; height: auto; max-width: 100%; order: 3; align-self: stretch; } #widget_qmt.flex-element.widget-wrapper > [data-element-type] { padding-top: 4px; padding-bottom: 4px; } #widget_qmt { width: 100%; height: auto; min-height: 1px; max-width: 100%; order: 2; } } @media all { #dd7f2975 { min-height: 0px; column-gap: 0%; row-gap: 0px; max-width: none; width: 100%; flex-wrap: nowrap; padding: 10px 4% 10px 4%; margin: 0% 0% 0% 0%; } #\34 faae6bc { flex-direction: row; justify-content: flex-end; align-items: center; width: 14.82%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #\39 699e990.flex-element.widget-wrapper > [data-element-type] { padding-top: 0%; } #\39 699e990 { width: 241px; height: 55px; max-width: 100%; order: 0; grid-area: auto / auto / auto / auto; } #\33 6906e04 { width: 100%; height: auto; max-width: 100%; justify-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\36 4f36fde { width: 180px; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\30 0503c57 { min-height: 8px; column-gap: 4%; row-gap: 24px; flex-direction: row; width: 25%; justify-content: flex-end; align-items: center; min-width: 4%; padding: 16px 16px 16px 16px; margin: 0% 0% 0% 0%; } #\32 ca491ff { flex-direction: row; justify-content: flex-start; align-items: center; width: 15.26%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #\32 31f8530 { flex-direction: row; align-items: center; width: 69.87840655249441%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #a676611d { width: 60px; height: 60px; max-width: 100%; } #\31 3ca7a85 { width: 30px; height: 30px; max-width: 100%; } } @media all { #aa09fdc9 { min-height: 240px; column-gap: 4%; row-gap: 24px; max-width: none; width: 100%; flex-wrap: nowrap; } #\39 1d5e1bf { grid-template-rows: minmax(300px, max-content); width: 100%; max-width: 100%; } #b5e93ce5 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; } } @media all { #\36 3c7b8b76c596a2813341bc5 { height: auto; } #\33 b99ac45 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; margin: 0% 0% 0% 0%; } #b33acb97 { min-height: 51px; column-gap: 4%; row-gap: 24px; width: 100%; flex-wrap: nowrap; margin: 0% 0% 0% 0%; } #\32 11a328d { border-width: 0px; border-color: rgba(0, 0, 0, 1); border-style: solid; background-color: rgba(0, 0, 0, 0); } #widget_h7i { width: 95.94%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 1; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } } @media (min-width: 1025px) { } @media (min-width: 1025px) { #widget_s4l { align-self: auto; width: 95.8158273381295%; justify-self: auto; grid-area: auto / auto / auto / auto; } } @media (min-width: 768px) and (max-width: 1024px) { } @media (min-width: 768px) and (max-width: 1024px) { #flex-header { padding-left: 0%; padding-right: 0%; } } @media (min-width: 768px) and (max-width: 1024px) { #flex-footer { } } @media (min-width: 768px) and (max-width: 1024px) { #\36 3a049320d35b55b4ef2a374 { padding-top: 16px; justify-content: center; } #\36 3a049320d35b55b4ef2a377 { min-height: 501px; padding: 4% 4% 4% 4%; } } @media (min-width: 768px) and (max-width: 1024px) { #\36 406026c90e1521f6ecb0ecc { min-height: 283px; padding: 4% 4% 4% 4%; } #\36 406026c90e1521f6ecb0ecd { justify-content: flex-end; padding: 16px 16px 16px 16px; } #\31 53c8f7b { justify-self: auto; align-self: auto; width: 100%; order: 1; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #widget_s4l { order: 0; } #widget_3ib { order: 2; } } @media (min-width: 768px) and (max-width: 1024px) { #b5c06542 { min-height: 0px; padding-left: 4%; padding-right: 4%; } } @media (min-width: 768px) and (max-width: 1024px) { #d4bf4595 { padding-left: 4%; padding-right: 4%; } } @media (min-width: 768px) and (max-width: 1024px) { #dd7f2975 { padding-left: 2%; padding-right: 2%; flex-direction: row; flex-wrap: nowrap; min-height: 0px; } #\34 faae6bc { width: 45.55%; order: 2; justify-content: flex-end; min-height: 8px; } #\39 699e990 { width: 235px; } #\36 4f36fde { width: 206px; height: auto; } #\30 0503c57 { order: 3; width: 9.41%; min-height: 8px; } #\32 ca491ff { width: 44.96%; margin-left: -0.0011659701492537314%; justify-content: flex-start; order: 0; min-height: 8px; } #\32 31f8530 { width: 20.7%; order: 1; justify-content: flex-end; padding-right: 50px; } #a676611d { width: 32px; height: 32px; } #\31 3ca7a85 { justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } } @media (min-width: 768px) and (max-width: 1024px) { #aa09fdc9 { padding-left: 2%; padding-right: 2%; } } @media (min-width: 768px) and (max-width: 1024px) { #b33acb97 { padding-left: var(--section-padding-left); padding-right: var(--section-padding-right); } #\31 4f73696 { margin: 0px 0% 0px 0%; } } @media (max-width: 767px) { } @media (max-width: 767px) { #flex-header { } } @media (max-width: 767px) { #flex-footer { } } @media (max-width: 767px) { #\36 3a049320d35b55b4ef2a374 { padding-top: 16px; width: 100%; min-height: 301px; justify-content: flex-start; height: auto; } #\36 3a049320d35b55b4ef2a377 { flex-direction: column; min-height: unset; padding: 4% 4% 4% 4%; } #\36 3a049ca0d35b55b4ef2a5c3 { align-self: flex-start; margin-left: 0px; margin-right: 0px; } } @media (max-width: 767px) { #\36 406026c90e1521f6ecb0ecd { width: 100%; padding-bottom: 16px; min-height: 216px; justify-content: flex-end; height: auto; } #\36 406026c90e1521f6ecb0ecc { flex-direction: column; min-height: unset; padding: 4% 4% 4% 4%; } #widget_s4l { margin-left: 0px; margin-right: 0px; } #\31 53c8f7b { margin-left: 0px; margin-right: 0px; } } @media (max-width: 767px) { #\37 7d0ec24 { width: 100%; min-height: 62px; height: auto; } #b5c06542 { min-height: unset; flex-direction: column; padding-left: 4%; padding-right: 4%; } } @media (max-width: 767px) { #d4bf4595 { flex-direction: row; padding-left: 4%; padding-right: 4%; flex-wrap: nowrap; min-height: 80px; } #group_kt6 { width: 100%; min-height: 8px; } } @media (max-width: 767px) { #dd7f2975 { padding-left: 2%; padding-right: 2%; min-height: 0px; } #\34 faae6bc { width: 20.5%; order: 0; justify-content: flex-start; } #\36 4f36fde { width: 172px; height: auto; } #\30 0503c57 { align-items: center; width: 18%; order: 3; } #\32 ca491ff { width: 48.86%; justify-content: center; order: 1; } #\32 31f8530 { width: 12.3%; order: 2; } #a676611d { width: 32px; height: 32px; } } @media (max-width: 767px) { #aa09fdc9 { min-height: 0; flex-direction: column; padding-left: 4%; padding-right: 4%; flex-wrap: nowrap; } #b5e93ce5 { width: 100%; min-height: 80px; align-items: center; } } @media (max-width: 767px) { #\33 b99ac45 { min-height: 80px; align-items: center; width: 100%; } #b33acb97 { min-height: 0; flex-direction: column; padding-left: var(--section-padding-left); padding-right: var(--section-padding-right); flex-wrap: nowrap; } }