s: scoped by ID so theme paragraph sizes/margins don't apply. No side padding, so text lines up with the buttons and links. */ .cookieadmin_law_container p#cookieadmin_notice_title{ margin: 0 0 6px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.4; } .cookieadmin_law_container p#cookieadmin_notice{ margin: 0; padding: 0; font-size: 14px; line-height: 22px; } .cookieadmin_notice_con{ padding: 0; flex: 1; } /* Box layout: space between the notice and the buttons (footer layout uses the group's gap) */ .cookieadmin_consent_inside > .cookieadmin_consent_btns{ margin-top: 12px; } .cookieadmin_cookie_modal{ display: none; flex-direction: column; position: fixed; max-height: 80vh; background-color: #FFFFFF; border: 1px solid #F4F4F4; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 999999; } .cookieadmin_center{ top: 10%; left: 22%; max-width: 60vw; } .cookieadmin_side{ flex-direction: column; position: fixed; width: 35vw; bottom: 0px; animation: 0.5s ease-out forwards cookieadmin_slideSide; max-height: 100vh; left: 0px; top: 0px; border-radius: 0px; } .cookieadmin_down{ position: fixed; max-width: 100%; max-height: 55vh; bottom: 0px; animation: 0.5s ease-out forwards cookieadmin_slideUp; } .cookieadmin_cookie_modal:focus{ outline: none; } .cookieadmin_modal_overlay{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1000; } /* Centered, not baseline: the CSS-drawn close button has no text baseline */ .cookieadmin_mod_head{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #CCCCCC; } /* Close icon drawn in CSS, font-size 0 hides any glyph left in filtered templates. "all: unset" + (0,3,1) selector keeps theme button/hover styles out, same as the category buttons. */ .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref{ all: unset; display: inline-block; position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 4px; color: #6b7280; font-size: 0; cursor: pointer; transition: color .15s, background-color .15s; } .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::before, .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: currentColor; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); } .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::after{ transform: translate(-50%, -50%) rotate(-45deg); } .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:hover{ color: #111827; background-color: rgba(0, 0, 0, 0.06); } .cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:focus-visible{ outline: 2px solid var(--cookieadmin-secondary-color); outline-offset: 2px; } .cookieadmin_preference_title{ margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; } /* 5px + the wrapper's 15px lines the intro up with the title's 20px */ .cookieadmin_preference_details{ padding: 0px 5px; } /* break-word (not overflow:auto) so long URLs wrap instead of adding an inner scrollbar */ .cookieadmin_preference{ padding: 10px 0px; font-size: 14px; line-height: 28px; overflow-wrap: break-word; } /* Admin-entered HTML: keep theme paragraph margins and link colors out */ .cookieadmin_cookie_modal .cookieadmin_preference p{ margin: 0 0 8px; padding: 0; font-size: inherit; line-height: inherit; } .cookieadmin_cookie_modal .cookieadmin_preference p:last-child{ margin-bottom: 0; } .cookieadmin_cookie_modal .cookieadmin_preference a{ color: inherit; text-decoration: underline; } .cookieadmin_details_wrapper{ padding: 0px 15px; height: calc(100% - 6%); overflow: auto; scrollbar-width: thin; } .cookieadmin_types{ padding: 10px 10px; border-top: 1px solid #CCCCCC; } .cookieadmin_header{ display: flex; justify-content: space-between; } /* Clickable header text, e.g. Pro's "Override GPC" label */ .cookieadmin_header label[for]{ cursor: pointer; } /* Header labels get explicit displays scoped to .cookieadmin_header so theme rules like "label { display: block }" can't push them onto their own line */ .cookieadmin_header label.stitle{ display: inline; } .cookieadmin_header .cookieadmin_remark{ display:none; justify-self:right; } .cookieadmin_header .cookieadmin_act{ display: inline; color: #1863dc; } /* Lines up with .cookieadmin_desc; the old 4rem right margin squeezed cards on phones */ .cookieadmin-modal-cookies-list{ display:none; margin: 8px 20px 4px; font-size: 14px; text-align: left; } .cookieadmin-modal-cookies-list .cookieadmin-nocookie-cat{ display: block; padding: 4px 0; font-size: 13px; font-weight: 600; text-align: center; opacity: 0.7; } .cookieadmin_desc{ padding:5px 20px; font-size: 15px; padding-right: 4rem; } .cookieadmin_footer{ left: 0px; padding: 15px; flex-wrap: wrap; width: 100%; } /* Padding matches the header */ .cookieadmin_modal_footer{ display: flex; padding: 14px 20px; flex-wrap: wrap; gap: 8px; border-top: 1px solid #CCCCCC; } /* GPC block and links take their own row above/below the buttons */ .cookieadmin_modal_footer > :not(.cookieadmin_btn){ flex-basis: 100%; } /* Side panel is narrow: stack everything. nowrap matters, a wrapping column overflows into extra columns beside the panel when height is limited. */ .cookieadmin_side .cookieadmin_modal_footer{ flex-direction: column; flex-wrap: nowrap; } .cookieadmin_cookie_modal.cookieadmin_side .cookieadmin_modal_footer > *{ flex: none; } /* Scoped to the containers so common theme rules (e.g. ".elementor-kit-N button") don't win. Colors stay admin-controlled via the inline styles set in consent.js. */ .cookieadmin_law_container button.cookieadmin_btn, .cookieadmin_cookie_modal button.cookieadmin_btn{ display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 40px; margin: 0; padding: 8px 16px; background-color: transparent; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: none; color: #1863dc; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: normal; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; text-wrap: auto; cursor: pointer; transition: filter .15s; } /* Footer buttons size to their labels so "Save My Preferences" doesn't wrap; they still fill the row. The banner keeps equal widths. */ .cookieadmin_modal_footer button.cookieadmin_btn{ flex: 1 1 auto; } /* Banner box is narrow (25% of the screen at 1366px = ~338px): size buttons to their labels with tighter padding so "Accept All" stays on one line; they still fill the row. */ .cookieadmin_consent_inside > .cookieadmin_consent_btns button.cookieadmin_btn{ flex: 1 1 auto; padding-left: 12px; padding-right: 12px; } .cookieadmin_law_container button.cookieadmin_btn:hover, .cookieadmin_cookie_modal button.cookieadmin_btn:hover{ filter: brightness(0.92); } .cookieadmin_law_container button.cookieadmin_btn:focus-visible, .cookieadmin_cookie_modal button.cookieadmin_btn:focus-visible{ outline: 2px solid var(--cookieadmin-secondary-color); outline-offset: 2px; } /* Category name + chevron in one accordion button. "all: unset" drops theme button styles; the selector (0,3,1) outranks state rules like ".elementor-kit-N button:hover". Scoped to .cookieadmin_header: Pro reuses this class for a shortcode button. */ .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies{ all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: inherit; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer; } .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies::before{ content: ""; flex-shrink: 0; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; } .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies.dwn::before{ transform: rotate(45deg); } /* all: unset removes the outline, so the focus ring is added back */ .cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies:focus-visible{ outline: 2px solid var(--cookieadmin-secondary-color); outline-offset: 2px; border-radius: 2px; } /* Reconsent: all:unset drops theme button styles (min-height, hover/focus rules); the wrapper selector (0,2,2) outranks ".elementor-kit-N button:hover". Plain selector kept for templates filtered without the wrapper class. JS toggles display inline (none/block). */ button.cookieadmin_re_consent, body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent{ all: unset; display: none; position: fixed; bottom: 15px; left: 15px; z-index: 99999; box-sizing: border-box; width: 50px; height: 50px; padding: 5px; border-radius: 50%; background-color: #374FD4; box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); cursor: pointer; transition: filter .15s; } button.cookieadmin_re_consent:hover, body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent:hover{ filter: brightness(0.92); } button.cookieadmin_re_consent:focus-visible, body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent:focus-visible{ outline: 2px solid var(--cookieadmin-secondary-color); outline-offset: 3px; } /* Block + the button's 5px padding centres the 40px icon; theme img rules kept out */ .cookieadmin_re_consent img.cookieadmin_reconsent_img{ display: block; width: 40px; height: 40px; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; } /* Flat card: theme font, 4px corners like the buttons. Muted text uses opacity so it works on any admin-chosen modal background. */ .cookieadmin-cookie-card { margin: 0 0 8px; padding: 12px 14px; border: 1px solid rgb(187 187 187 / 12%); border-radius: 4px; text-align: left; } .cookieadmin-cookie-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14px; } .cookieadmin-cookie-name { font-weight: 600; word-break: break-word; overflow-wrap: anywhere; } .cookieadmin-cookie-duration { font-size: 13px; opacity: 0.75; } .cookieadmin-cookie-duration > b { font-weight: 600; } /* Scoped so theme paragraph margins/sizes don't apply */ .cookieadmin-cookie-card p.cookieadmin-cookie-description { margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 1.5; } .cookieadmin-cookie-tags { display: flex; gap: 8px; margin-top: 8px; } .cookieadmin-tag { background: rgba(0, 0, 0, 0.06); padding: 2px 8px; border-radius: 4px; font-size: 12px; } /* Pro DPDP contact box. Keyed on the ID (not a new class) so it also restyles older Pro versions that still output the shared .cookieadmin-cookie-card class. */ #cookieadmin_dpdp_contact { margin: 4px 0 12px; padding: 12px 14px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; box-shadow: none; font-family: inherit; font-size: 14px; line-height: 1.5; text-align: left; } #cookieadmin_dpdp_contact a { color: inherit; text-decoration: underline; } /* "Exercise your rights" link, the card's main action */ #cookieadmin_dpdp_contact > a { display: inline-block; margin-top: 6px; font-weight: 600; } /* Website consent box End*/ /* Checkbox switch Start */ /* Box matches the 34x21 slider; the modal's generic label/input padding is cancelled so the switch no longer overflows its box */ .cookieadmin_toggle, .cookieadmin_cookie_modal .cookieadmin_toggle { position: relative; display: inline-block; flex-shrink: 0; width: 34px; height: 21px; margin: 0; padding: 0; } /* Hide the checkbox input */ .cookieadmin_toggle input, .cookieadmin_cookie_modal .cookieadmin_toggle input{ /* display: none; */ position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; } /* Text for screen readers / a11y checkers only, so toggle labels aren't empty */ .cookieadmin_sr_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keyboard accessibility: When the checkbox is focused, add a visible outline to indicate focus. */ .cookieadmin_show_pref_cookies:focus-visible{ outline: 1px solid #000; } .cookieadmin_toggle input:focus + .cookieadmin_slider { outline: 1px solid #000; } /* end keyboard accessibility */ /* Describe slider's look and position. */ .cookieadmin_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; height: 21px; width: 34px; background-color: gray; transition: .4s; border-radius: 34px; } /* Describe the white ball's location and appearance in the slider. */ .cookieadmin_slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 3.2px; bottom: 3.2px; background-color: white; transition: .2s; border-radius: 50%; } /* Modify the slider's background color to green once the checkbox has been selected. */ input:checked+.cookieadmin_slider { background-color: #3582c4; } /* When the checkbox is checked, shift the white ball towards the right within the slider. */ input:checked+.cookieadmin_slider:before { transform: translateX(13px); } /* Checkbox switch End */ .cookieadmin_law_container .cookieadmin-poweredby{ margin-top: 10px; } .cookieadmin_modal_footer_links .cookieadmin-poweredby{ margin-left: auto; } .cookieadmin-poweredby a img{ height: 15px; } .cookieadmin-poweredby a{ color : unset; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 11px; gap: 2px; text-decoration: none; } .cookieadmin_modal_footer .cookieadmin-poweredby a{ justify-content: end; } #cookieadmin-gpc-toast{ display:flex; visibility: hidden; position: fixed; bottom: 24px; right: 24px; color: #ffffff; padding: 10px 14px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; z-index: 99999; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; line-height:1.5; } #cookieadmin_gpc_override{ padding-bottom:10px; } /* Policy Links */ .cookieadmin_policy_link_box{ display: flex; justify-content: space-around; gap: 4px 16px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; } /* Same treatment as the modal links, so theme link colors don't apply */ .cookieadmin_law_container .cookieadmin_policy_link_box a{ color: inherit; text-decoration: underline; } .cookieadmin_modal_policy_link_box{ display: flex; gap: 4px 16px; font-size: 13px; flex-wrap: wrap; } /* Same treatment as the intro and DPDP links, so theme link colors don't apply */ .cookieadmin_cookie_modal .cookieadmin_modal_policy_link_box a{ color: inherit; text-decoration: underline; } /* Footer gap handles spacing; the old 9px side margins pushed links out of line with the buttons */ .cookieadmin_modal_footer_links{ display:flex; flex-wrap: wrap; align-items: center; justify-content:space-between; gap: 8px 16px; margin-top: 4px; } /* Hidden when there are no policy links and "Powered by" is off (Pro) */ .cookieadmin_modal_footer_links:not(:has(*)){ display: none; } /* CSS for phones only */ @media (max-width: 767px) { .cookieadmin_center{ top: 10%; left: 5%; max-width: 90vw; } .cookieadmin_show_pref_cookies{ font-size: 14px; } /* Even 16px on both sides; the footer bar keeps its 100% width */ .cookieadmin_box{ left: 16px; right: 16px; width: auto; max-width: none; } .cookieadmin_side{ width: 100%; } } /* CSS for tablet */ @media (min-width: 768px) and (max-width: 991px) { .cookieadmin_box{ width: 45%; } } /* CSS for small laptop */ @media (min-width: 992px) and (max-width: 1199px) { .cookieadmin_box{ width: 35%; } } /* CSS for HD TV screens */ @media (min-width: 1200px) and (max-width: 1360px) { .cookieadmin_box{ width: 30%; } } /* Desktop Layout */ @media (min-width: 768px) { .cookieadmin_notice_group { flex-direction: row; justify-content: space-between; align-items: center; } .cookieadmin_notice_con { flex: 1; /* take remaining space */ } .cookieadmin_consent_btns { flex-shrink: 0; } /* Footer layout: the button group sizes to its content, so equal-width (flex-basis 0) buttons would shrink and wrap their labels. Size them to their labels instead. */ .cookieadmin_footer .cookieadmin_consent_btns button.cookieadmin_btn{ flex: 0 0 auto; } } @media (max-width:480px){ .cookieadmin_preference_title{ font-size: 18px; } /* 28px leaves no room for the categories on phones */ .cookieadmin_preference{ line-height: 22px; } .cookieadmin_law_container button.cookieadmin_btn, .cookieadmin_cookie_modal button.cookieadmin_btn, .cookieadmin_consent_inside > .cookieadmin_consent_btns button.cookieadmin_btn{ flex-basis: 100%; } .cookieadmin_modal_footer{ padding: 12px 16px; } } @media (prefers-reduced-motion: reduce){ .cookieadmin_law_container *, .cookieadmin_cookie_modal *{ transition: none !important; } } .cookieadmin_remark, .cookieadmin_showmore { color: #1863dc !important; }input:checked+.cookieadmin_slider, input:disabled+.cookieadmin_slider { background-color: #3582C4 !important; }.cookieadmin_slider{ background-color: #808080 !important; } /*# sourceURL=cookieadmin-style-inline-css */ /* Pages construites avec Elementor : raccord avec style.css (chargé après Elementor). Les conteneurs portent les classes du thème (hero, intro-grille, atouts…), qui font la mise en page ; ici, seulement ce que le balisage des widgets change. Rien ne s'applique hors .elementor. */ /* Secours si la feuille propre à la page (post-XX.css) arrive en retard : conteneurs en flex, sans marge */ .elementor .e-con { --display: flex; --flex-direction: column; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px 0px; --row-gap: 0px; --column-gap: 0px; } /* Titres : la balise h1/h2/h3 prend le style posé sur le widget (classe hero-titre, titre-bloc…) */ .elementor :is(.hero-titre, .titre-bloc, .services-nom) .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: balance; } /* Largeurs du thème qu'Elementor ramène à 100 % sur ses widgets et conteneurs */ .elementor .e-con > .elementor-widget.hero-accroche { max-width: 560px; } .elementor .e-con > .elementor-widget.titre-bloc { max-width: 760px; } .elementor .e-con.hero { width: auto; } .elementor .e-con.hero-texte { width: auto; max-width: 1000px; } .elementor .e-con > .elementor-widget.hero-tags { max-width: 400px; } @media (max-width: 960px) { .elementor .e-con.hero-texte { max-width: none; } .elementor .e-con > .elementor-widget.hero-tags { max-width: none; } } .elementor .specs ul { padding: 0; list-style: none; } /* « Pour qui », mobile : le thème place le paragraphe, ici c'est son widget qui est dans la grille */ @media (max-width: 960px) { .elementor .services-item > .elementor-widget:has(.services-desc) { grid-column: 2; grid-row: 2; } } .elementor .e-con.hero-encart { width: 420px; max-width: calc(100% - 2 * var(--marge)); } @media (max-width: 960px) { .elementor .e-con.hero-encart { width: auto; } } /* Barre jaune au-dessus des chiffres (Elementor réserve ::before aux calques de fond) */ .elementor .chiffres > .e-con::before { content: ''; display: block; position: static; inset: auto; width: 28px; height: 4px; margin-bottom: 22px; background: var(--accent); opacity: 1; } /* Titres des cartes « atout » : le thème vise la balise h3 elle-même */ .elementor .atout .elementor-widget-heading { margin-top: 6px; } .elementor .atout .elementor-heading-title { font-size: 20px; font-weight: 500; line-height: 1.3; } /* Images remplissant leur cadre (photo du bandeau, visuels au survol) */ .elementor :is(.hero-photo, .services-visuel .wp-block-image, .fiche-visuel, .appareil-visuel) .elementor-widget-container { height: 100%; } /* Matériel : paragraphes que le thème vise comme enfants directs de leur bloc */ .elementor .fiche-texte > .elementor-widget.fiche-para { margin-top: 20px; max-width: 520px; } .elementor .fiche-texte .fiche-para p { font-size: var(--t-corps); line-height: 1.7; color: var(--texte-doux); } .elementor .appareil .appareil-desc { margin-top: 8px; } .elementor .appareil .appareil-desc p { font-size: var(--t-petit); line-height: 1.65; color: var(--texte-doux); } .elementor .appareil h3 a:hover { color: var(--accent); } .elementor .elementor-widget-image img { display: block; } /* Pastilles du bandeau : une liste dans un widget Texte */ .elementor .hero-tags ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } @media (max-width: 480px) { .elementor .hero-tags ul { gap: 8px; } } /* Boutons : pilule + rond fléché, comme le bloc Boutons (classes b-plein, b-contour, b-sombre sur le widget) */ .elementor .elementor-widget-button.ct-bouton { width: auto; max-width: max-content; padding-right: 58px; } .elementor .ct-bouton .elementor-button { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--encre); font-family: var(--police); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; } .elementor .ct-bouton .elementor-button::after { content: ''; position: absolute; top: -1px; right: -59px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent) var(--fleche) center / 16px no-repeat; transition: transform .25s; } .elementor .ct-bouton .elementor-button:hover::after { transform: rotate(45deg); } .elementor .ct-bouton.b-contour .elementor-button { background: none; border-color: var(--contour); color: var(--texte); } .elementor .ct-bouton.b-contour .elementor-button:hover { background: var(--accent); border-color: var(--accent); color: var(--encre); } .elementor .ct-bouton.b-sombre .elementor-button { background: var(--encre); color: var(--accent); } .elementor .ct-bouton.b-sombre .elementor-button::after { background-color: var(--encre); background-image: var(--fleche-jaune); } /* Bouton réduit dans l'encart du bandeau, espacé du texte au-dessus */ .elementor .intro-texte .ct-bouton { margin-top: 24px; } .elementor .hero-encart .ct-bouton { margin-top: 18px; padding-right: 52px; } .elementor .hero-encart .ct-bouton .elementor-button { height: 46px; padding: 0 24px; font-size: 12px; } .elementor .hero-encart .ct-bouton .elementor-button::after { width: 46px; height: 46px; right: -53px; } @media (max-width: 480px) { .elementor .ct-bouton .elementor-button { padding: 0 22px; } } /* Boutons groupés dans un conteneur « wp-block-buttons » : le thème espace le groupe, pas chaque bouton */ .elementor .e-con.wp-block-buttons { flex-direction: row; } /* Autres « flex » du thème pensés en ligne (Elementor met ses conteneurs en colonne par défaut) */ .elementor .e-con:is(.defile-piste, .carte-verre, .bento-carte) { flex-direction: row; flex-wrap: nowrap; } /* Cartes du bandeau d'accueil : largeur fixe du thème (Elementor les met à 100 % sur mobile) */ .elementor .e-con.carte-verre { width: 380px; flex: none; } .elementor .e-con.carte-texte { width: auto; flex: 1; } .elementor .carte-verre > .elementor-widget-image { flex: none; width: auto; } @media (max-width: 960px) { .elementor .e-con.carte-verre { width: 300px; } } @media (max-width: 480px) { .elementor .e-con.carte-verre { width: 270px; } } .elementor .wp-block-buttons > .ct-bouton { margin-top: 0; } /* Pages de texte (guide, mentions légales, CGV) : largeur de lecture du thème */ .elementor .e-con > .elementor-widget.texte-legal { max-width: 860px; } /* Contact : paragraphes que le thème vise comme enfants directs de leur bloc */ .elementor .contact-infos > .elementor-widget.titre-bloc { max-width: 560px; } .elementor .contact-infos > .elementor-widget-text-editor:has(> p:not(.repere)) { margin-top: 40px; max-width: 480px; } .elementor .contact-infos > .elementor-widget-text-editor > p:not(.repere) { font-size: var(--t-corps); line-height: 1.7; color: var(--texte-doux); } .elementor .contact-infos > .elementor-widget-text-editor > p:not(.repere) strong { font-weight: 600; } .elementor .formulaire > .elementor-widget-text-editor:has(> p) { margin-top: 8px; } .elementor .formulaire > .elementor-widget-text-editor > p { font-size: var(--t-petit); color: var(--texte-doux); } @media (max-width: 960px) { .elementor .contact-infos > .elementor-widget-text-editor:has(> p:not(.repere)) { margin-top: 32px; } } /* Contact : fiche de coordonnées. Une ligne par moyen de contact (conteneur coord-ligne + coord-tel, coord-mail ou coord-adresse, un widget Texte : libellé, valeur en lien, précision) ; la pastille d'icône et le rond fléché sont dessinés ici et la ligne entière est cliquable. Pied coord-pied : un widget Texte par information. */ .elementor .e-con.coord-fiche { margin-top: 44px; border-radius: var(--rayon); background: var(--surface); overflow: hidden; box-shadow: 0 0 0 1px var(--ligne), 0 24px 48px -36px rgba(28, 31, 35, .45); } .elementor .e-con.coord-ligne { position: relative; padding: 22px 24px; transition: background-color .25s; } .elementor .e-con.coord-ligne + .coord-ligne { border-top: 1px solid var(--ligne); } .elementor .coord-ligne > .elementor-widget-text-editor { position: static; display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px; column-gap: 18px; align-items: center; } .elementor .coord-ligne > .elementor-widget-text-editor::before { content: ''; grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: var(--rayon-s); background: var(--anthracite) var(--icone) center / 20px no-repeat; } .elementor .coord-ligne > .elementor-widget-text-editor::after { content: ''; grid-column: 3; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ligne); background: var(--fleche) center / 14px no-repeat; transition: transform .25s, background-color .25s, box-shadow .25s; } .elementor .coord-ligne > .elementor-widget-text-editor > p { grid-column: 2; } .elementor .coord-ligne:hover { background-color: rgba(28, 31, 35, .025); } .elementor .coord-ligne:hover > .elementor-widget-text-editor::after { background-color: var(--accent); box-shadow: none; transform: rotate(45deg); } .elementor .coord-tel { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } .elementor .coord-mail { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .elementor .coord-adresse { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 15 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .elementor .coord-fiche .coord-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); } .elementor .coord-fiche .coord-valeur { margin-top: 5px; font-family: var(--police-titre); font-size: clamp(16px, 1.6vw, 21px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .elementor .coord-fiche .coord-valeur a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .25s; } .elementor .coord-ligne:hover .coord-valeur a { text-decoration-color: var(--accent); } .elementor .coord-ligne .coord-valeur a::after { content: ''; position: absolute; inset: 0; } .elementor .coord-ligne .coord-valeur a:focus-visible { outline: none; } .elementor .coord-ligne:has(.coord-valeur a:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; } .elementor .coord-fiche .coord-note { margin-top: 4px; font-size: var(--t-petit); line-height: 1.5; color: var(--texte-doux); } .elementor .e-con.coord-pied { display: grid; grid-template-columns: 1.4fr 1fr; padding: 18px 24px 20px; border-top: 1px solid var(--ligne); background: rgba(28, 31, 35, .035); } .elementor .coord-pied > .elementor-widget + .elementor-widget { padding-left: 22px; margin-left: 22px; border-left: 1px solid var(--ligne); } .elementor .coord-fiche .coord-info { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums; } .elementor .coord-fiche .coord-info a { text-decoration: underline; text-decoration-color: var(--lien-souligne); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Colonne étroite (deux colonnes sous 1200 px) : la flèche s'efface (la ligne reste cliquable), le pied passe sur une colonne */ @media (max-width: 1200px) and (min-width: 961px) { .elementor .coord-ligne > .elementor-widget-text-editor { grid-template-columns: 46px minmax(0, 1fr); } .elementor .coord-ligne > .elementor-widget-text-editor::after { display: none; } .elementor .e-con.coord-pied { grid-template-columns: 1fr; row-gap: 14px; } .elementor .coord-pied > .elementor-widget + .elementor-widget { padding: 14px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--ligne); } } @media (max-width: 960px) { .elementor .e-con.coord-fiche { margin-top: 32px; } .elementor .coord-fiche .coord-valeur { font-size: 20px; } } @media (max-width: 480px) { .elementor .e-con.coord-ligne { padding: 18px 16px; } .elementor .coord-ligne > .elementor-widget-text-editor { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; } .elementor .coord-ligne > .elementor-widget-text-editor::before { width: 42px; height: 42px; background-size: 18px; } .elementor .coord-ligne > .elementor-widget-text-editor::after { display: none; } .elementor .coord-fiche .coord-valeur { font-size: 17px; } .elementor .e-con.coord-pied { grid-template-columns: 1fr; padding: 16px; row-gap: 14px; } .elementor .coord-pied > .elementor-widget + .elementor-widget { padding: 14px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--ligne); } } /* Tarifs : l'étiquette « Recommandée » se place dans le coin de la carte, pas de son widget */ .elementor .formule > .elementor-widget:has(.formule-badge) { position: static; } /* Tarifs : « h3 + p » du bloc « Dans toutes les formules », devenus deux widgets */ .elementor .formules-inclus .elementor-widget:has(> h3) + .elementor-widget > p { margin-top: 10px; font-size: var(--t-petit); line-height: 1.6; color: var(--texte-doux); } /* Tarifs : calculateur et paragraphe du bloc déplacement */ .elementor .tarifs > .elementor-widget-shortcode { margin-top: 48px; } .elementor .deplacement-texte > .elementor-widget-text-editor:has(> p:not(.repere)) { margin-top: 20px; max-width: 520px; } .elementor .deplacement-texte > .elementor-widget-text-editor > p:not(.repere) { font-size: var(--t-corps); line-height: 1.7; color: var(--texte-doux); } @media (max-width: 960px) { .elementor .tarifs > .elementor-widget-shortcode { margin-top: 32px; } } /* Photos en cadre (mosaïque, cartes du bandeau, zone) : le widget prend la hauteur du cadre */ .elementor :is(.bento-carte, .carte-verre, .zone-home-photo) .elementor-widget-container { height: 100%; } /* Fin de page : même respiration que les pages en blocs */ .elementor > .e-con:last-child:is(.services, .section-atouts, .drones) { padding-bottom: 110px; } @media (max-width: 960px) { .elementor > .e-con:last-child:is(.services, .section-atouts, .drones) { padding-bottom: 80px; } } /* FAQ : photo dans la colonne de gauche, sous l'introduction */ .elementor .e-con.faq-gauche { width: auto; max-width: 100%; padding-right: 56px; } .elementor .e-con > .elementor-widget.faq-photo { align-self: flex-start; width: 100%; max-width: 420px; margin-top: 48px; position: sticky; top: 110px; } .elementor .faq-photo .elementor-widget-container { height: 100%; } .elementor .faq-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); } @media (max-width: 960px) { .elementor .e-con.faq-gauche { padding-right: 0; } .elementor .e-con > .elementor-widget.faq-photo { max-width: none; margin-top: 32px; position: static; } .elementor .faq-photo img { aspect-ratio: 4 / 3; } } /* Effets maison des pages Elementor, ceux qu'Elementor gratuit ne sait pas régler. Mise en page, marges, polices, tailles et couleurs sont réglées dans Elementor (onglets Style et Avancé) : ces classes n'ajoutent QUE l'effet, à poser dans Avancé > Classes CSS. */ /* Zone sombre (bandeau photo, panneau quadrillé) : liens, gras et boutons passent en clair */ .fx-sombre { --fond: var(--anthracite); --surface: var(--beton); --texte: var(--blanc-casse); --texte-doux: var(--gris-clair); --texte-inactif: #7C8289; --ligne: rgba(242, 240, 235, .14); --contour: rgba(242, 240, 235, .7); --lien-souligne: transparent; color: var(--texte); } /* Plan quadrillé en fond (panneaux sombres, bandeaux courts) */ .fx-quadrille { background-image: linear-gradient(rgba(242, 240, 235, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 240, 235, .05) 1px, transparent 1px); background-size: 48px 48px; } /* Repère : numéro dans un carré jaune (mettre le numéro en gras) */ .fx-repere p { display: flex; align-items: center; gap: 12px; } .fx-repere strong { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--accent); color: var(--encre); font-size: 12px; letter-spacing: 0; } /* Mot surligné au marqueur jaune : mettre le mot en italique dans le titre */ .fx-surligne em { font-style: normal; padding: 0 .06em; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); } .fx-surligne-jaune em { font-style: normal; color: var(--accent); } /* Verre dépoli (encart et pastilles posés sur une photo) */ .fx-verre { background: var(--verre); border: 1px solid var(--verre-bord); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Pastilles : chaque élément de la liste devient une pastille en verre */ .fx-pastilles ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .fx-pastilles li { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; white-space: nowrap; } @media (max-width: 480px) { .fx-pastilles ul { gap: 8px; } .fx-pastilles li { height: 36px; padding: 0 16px; font-size: 13px; } } /* Petite barre jaune au-dessus d'un bloc (chiffres) */ .fx-barre::before { content: ''; display: block; position: static; width: 28px; height: 4px; margin-bottom: 22px; background: var(--accent); opacity: 1; } /* Liens soulignés en jaune dans un texte */ .fx-liens a { text-decoration: underline; text-decoration-color: var(--lien-souligne); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Bouton réduit (encart du bandeau) */ .elementor .ct-bouton.ct-bouton-petit { padding-right: 52px; } .elementor .ct-bouton.ct-bouton-petit .elementor-button { height: 46px; padding: 0 24px; font-size: 12px; } .elementor .ct-bouton.ct-bouton-petit .elementor-button::after { width: 46px; height: 46px; right: -53px; } /* Titres d'Elementor : équilibrés sur leurs lignes, comme le reste du site */ .elementor .elementor-heading-title { text-wrap: balance; } .elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-list-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-list-item-base{display:flex;flex-direction:row;gap:8px;}.elementor .e-list-item-marker-base{width:auto;height:1lh;display:flex;align-items:center;}.elementor .e-list-item-content-base{flex:1 1 auto;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-icon-open-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{display:block;}.elementor .e-collection-loop-base{display:block;}.elementor .e-carousel-base{display:block;}.elementor .e-heading-base{margin:0px;}.elementor .e-heading-link-base{all:unset;cursor:pointer;}.elementor .e-image-link-base{width:fit-content;all:unset;cursor:pointer;display:inherit;}.elementor .e-image-base{display:block;}.elementor .e-paragraph-base{margin:0px;}.elementor .e-paragraph-link-base{all:unset;cursor:pointer;}.elementor .e-svg-base{display:inline-block;}.elementor .e-button-base{text-align:center;padding-block-start:12px;padding-block-end:12px;padding-inline-start:24px;padding-inline-end:24px;border-radius:2px;border-width:0px;background-color:#375EFB;display:inline-block;}.elementor .e-youtube-base{overflow:hidden;aspect-ratio:16/9;}.elementor .e-divider-base{width:100%;height:1px;border-width:0px;border-color:transparent;border-style:none;background-color:#000;}.elementor .e-self-hosted-video-base{max-width:100vw;aspect-ratio:16/9;display:inline-block;}.elementor .e-google-maps-base{width:100%;border-style:none;display:block;} @media (max-width:480px){ @media(max-width:480px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}} }