.elementor-3604 .elementor-element.elementor-element-280052bb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-3604 .elementor-element.elementor-element-38c4d7c2{--display:flex;}.elementor-3604 .elementor-element.elementor-element-38c4d7c2:not(.elementor-motion-effects-element-type-background), .elementor-3604 .elementor-element.elementor-element-38c4d7c2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.zelij.com/wp-content/uploads/2026/08/Samir-Mazer-RD-Studio-Creative-Process-Ksima.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3604 .elementor-element.elementor-element-75348a5e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3604 .elementor-element.elementor-element-a8853b5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:var(--space-2xs) var(--space-2xs);--row-gap:var(--space-2xs);--column-gap:var(--space-2xs);--margin-top:0;--margin-bottom:0;--margin-left:auto;--margin-right:auto;}.elementor-3604 .elementor-element.elementor-element-a8853b5.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-3604 .elementor-element.elementor-element-fbe365d{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-3604 .elementor-element.elementor-element-fbe365d > .elementor-widget-container{margin:0 0 0 0;}.elementor-3604 .elementor-element.elementor-element-fbe365d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3604 .elementor-element.elementor-element-fbe365d .jet-inline-svg{max-width:100;}.elementor-3604 .elementor-element.elementor-element-fbe365d .jet-inline-svg__wrapper{text-align:center;}.elementor-3604 .elementor-element.elementor-element-f90132f{--display:flex;--min-height:1px;}.elementor-3604 .elementor-element.elementor-element-f90132f:not(.elementor-motion-effects-element-type-background), .elementor-3604 .elementor-element.elementor-element-f90132f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.zelij.com/wp-content/uploads/2026/07/Ateliers-Zelig_h-lign.svg");}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3604 .elementor-element.elementor-element-ef230a1{font-family:"Chivo Mono", Sans-serif;font-size:1em;font-weight:100;line-height:1em;letter-spacing:0.03em;}.elementor-3604 .elementor-element.elementor-element-ef230a1 p{margin-block-end:0px;}.elementor-3604 .elementor-element.elementor-element-2c54182c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3604 .elementor-element.elementor-element-54f3025e{color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3604 .elementor-element.elementor-element-32e86e42 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:6.4em;font-weight:800;line-height:1em;}.elementor-widget-countdown .elementor-countdown-item{background-color:var( --e-global-color-primary );}.elementor-widget-countdown .elementor-countdown-digits{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-countdown .elementor-countdown-label{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-widget-countdown .elementor-countdown-expire--message{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-3604 .elementor-element.elementor-element-79bd71ae .elementor-countdown-wrapper{max-width:100%;}body:not(.rtl) .elementor-3604 .elementor-element.elementor-element-79bd71ae .elementor-countdown-item:not(:first-of-type){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-3604 .elementor-element.elementor-element-79bd71ae .elementor-countdown-item:not(:last-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-3604 .elementor-element.elementor-element-79bd71ae .elementor-countdown-item:not(:first-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-3604 .elementor-element.elementor-element-79bd71ae .elementor-countdown-item:not(:last-of-type){margin-left:calc( 10px/2 );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-countdown .elementor-countdown-digits{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-countdown .elementor-countdown-expire--message{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(min-width:768px){.elementor-3604 .elementor-element.elementor-element-a8853b5{--width:25%;}.elementor-3604 .elementor-element.elementor-element-f90132f{--width:88%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3604 .elementor-element.elementor-element-a8853b5{--width:33%;}}@media(max-width:767px){.elementor-3604 .elementor-element.elementor-element-a8853b5{--width:75%;--gap:var(--space-s) var(--space-s);--row-gap:var(--space-s);--column-gap:var(--space-s);}.elementor-3604 .elementor-element.elementor-element-fbe365d{width:100%;max-width:100%;}.elementor-3604 .elementor-element.elementor-element-fbe365d > .elementor-widget-container{margin:0 0 0 0;}.elementor-3604 .elementor-element.elementor-element-fbe365d .jet-inline-svg{max-width:100%;}.elementor-3604 .elementor-element.elementor-element-f90132f:not(.elementor-motion-effects-element-type-background), .elementor-3604 .elementor-element.elementor-element-f90132f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.zelij.com/wp-content/uploads/2026/07/Ateliers-Zelig_h-lign.svg");}.elementor-3604 .elementor-element.elementor-element-f90132f{--width:100%;--min-height:1px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-3604 .elementor-element.elementor-element-ef230a1{width:100%;max-width:100%;text-align:center;font-size:1.2em;}.elementor-3604 .elementor-element.elementor-element-ef230a1.elementor-element{--align-self:center;}.elementor-widget-countdown .elementor-countdown-digits{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-countdown .elementor-countdown-expire--message{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS *//* ========================================================================== TEASER « COMING SOON » — Ateliers Zelij Modèle Elementor 3604 · CSS personnalisé de la page -------------------------------------------------------------------------- Sommaire 1. Mise en page (2 colonnes) 2. Blocs de la colonne de droite 3. Textes 4. Compte à rebours 5. Liens du bas 6. Garde-fous de visibilité 7. Desktop ≥ 768 px : tout tient dans la hauteur de l'écran 8. Tablette 768–1024 px 9. Mobile ≤ 767 px : colonnes empilées, la page défile -------------------------------------------------------------------------- Classes à poser dans Elementor (Avancé → Classes CSS) : z-teaser conteneur principal z-teaser__visuel colonne image z-teaser__contenu colonne texte z-teaser__marque logo + « Créateurs de surfaces » (copie du pied de page) z-teaser__corps surtitre + titre + texte + compte à rebours z-teaser__surtitre « New website - coming soon » z-teaser__titre titre H1 z-teaser__texte paragraphe z-teaser__decompte widget compte à rebours z-teaser__liens Instagram / contact Les !important passent devant les réglages des panneaux Elementor. ========================================================================== */ /* 1. MISE EN PAGE ---------------------------------------------------------- */ .z-teaser { flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; padding: 0 !important; min-height: 100vh; min-height: 100svh; background: var(--color-bg); color: var(--color-fg); } .z-teaser__visuel { flex: 0 0 50% !important; width: 50% !important; min-height: 100svh; } .z-teaser__contenu { flex: 0 0 50% !important; width: 50% !important; justify-content: space-between !important; /* marque en haut, liens en bas */ gap: var(--space-l) !important; padding: var(--space-l) !important; border-left: var(--filet-ep) solid var(--color-filet); } /* 2. BLOCS DE LA COLONNE DE DROITE ----------------------------------------- */ /* Logo + « Créateurs de surfaces » : copie conforme du bloc du pied de page (logo SVG, écart, typo : réglés dans ses widgets, comme au pied de page). Au pied de page, sa largeur vaut un % de la zone utile du pied de page : zone utile = largeur écran − 2 × --space-s − 2 × --space-xl desktop 25 % · tablette 33 % · mobile 75 % On reprend exactement ce calcul pour obtenir la même taille ici, puis on cale le bloc à gauche de la colonne. */ .z-teaser__marque { --z-pied-utile: calc(100vw - 2 * var(--space-s) - 2 * var(--space-xl)); align-self: flex-start; flex: 0 0 auto !important; width: calc(var(--z-pied-utile) * .25) !important; max-width: 100% !important; margin: 0 !important; } @media (max-width: 1024px) { .z-teaser__marque { width: calc(var(--z-pied-utile) * .33) !important; } } @media (max-width: 767px) { .z-teaser__marque { width: calc(var(--z-pied-utile) * .75) !important; } } .z-teaser__corps { gap: var(--space-s) !important; padding: 0 !important; } /* 3. TEXTES ---------------------------------------------------------------- */ /* Surtitre */ .z-teaser__surtitre, .z-teaser__surtitre p { margin: 0; font-family: "Chivo", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-ink); } .z-teaser__surtitre p { font-size: max(11px, .75vw) !important; } /* Titre La taille suit la largeur de la colonne (unités cqi) : la ligne insécable la plus longue, « IS TAKING » (4,60 em), doit tenir dedans → maximum 21,7cqi. Réglage retenu : 20cqi. En desktop, voir aussi la limite en hauteur (section 7). */ .z-teaser__titre { width: 100%; container-type: inline-size; } .z-teaser__titre .elementor-heading-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20cqi !important; font-weight: 800; line-height: .92 !important; letter-spacing: -.03em; color: var(--color-fg); overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Paragraphe */ .z-teaser__texte p { max-width: 36ch; margin: 0; font-family: "Chivo Mono", monospace; font-size: max(13px, .9vw) !important; line-height: 1.5; color: var(--color-fg); } /* 4. COMPTE À REBOURS ------------------------------------------------------ */ .z-teaser__decompte { margin-top: var(--space-s); } /* 4 cases côte à côte, séparées par des filets */ .z-teaser__decompte .elementor-countdown-wrapper { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 560px; } /* Une case : libellé en haut à gauche, chiffres en bas à droite */ .z-teaser__decompte .elementor-countdown-item { display: flex !important; flex-direction: column; justify-content: space-between; min-height: 96px; margin: 0 !important; padding: 10px 12px !important; text-align: left; background: none !important; border: 0; border-top: var(--filet-ep) solid var(--color-filet); border-left: var(--filet-ep) solid var(--color-filet); border-radius: 0 !important; } .z-teaser__decompte .elementor-countdown-item:first-child { padding-left: 0 !important; border-left: 0; } .z-teaser__decompte .elementor-countdown-digits { order: 2; font-family: "Chivo Mono", monospace !important; font-size: 28px !important; /* mobile ; desktop en section 7 */ line-height: 1; text-align: right; color: var(--color-fg) !important; } .z-teaser__decompte .elementor-countdown-label { order: 1; font-family: "Chivo", sans-serif !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-ink) !important; } /* Message affiché à l'échéance */ .z-teaser__decompte .elementor-countdown-expire--message { font-family: "Chivo Mono", monospace; font-size: 14px; } /* 5. LIENS DU BAS ---------------------------------------------------------- Même comportement que les liens du plan du pied de page (classe .z-plan). */ .z-teaser__liens .z-plan { padding: 0 !important; border: 0 !important; } .z-teaser__liens .z-plan ul { flex-direction: row; flex-wrap: wrap; gap: var(--space-m); margin: 0; } /* 6. GARDE-FOUS DE VISIBILITÉ ---------------------------------------------- */ .z-teaser__surtitre, .z-teaser__surtitre p, .z-teaser__texte, .z-teaser__liens { display: block !important; opacity: 1 !important; visibility: visible !important; } /* 7. DESKTOP ≥ 768 px — tout tient dans la hauteur de l'écran -------------- */ @media (min-width: 768px) { .z-teaser { height: 100vh; height: 100svh; min-height: 560px !important; overflow: hidden; } .z-teaser__visuel { height: auto; min-height: 0 !important; } .z-teaser__contenu { min-height: 0; padding: clamp(20px, 4.5vh, 64px) clamp(24px, 4vw, 64px) !important; gap: clamp(12px, 3vh, 64px) !important; } .z-teaser__corps { flex: 1 1 auto !important; min-height: 0 !important; gap: clamp(10px, 2vh, 24px) !important; } /* Titre : sa boîte prend toute la hauteur restante (container-type: size). Taille = la plus petite de 20cqi (largeur) et 19cqh (hauteur). 4 lignes × interligne 0,92 → maximum 27cqh. */ .z-teaser__titre { flex: 1 1 0 !important; min-height: 0 !important; container-type: size; } .z-teaser__titre .elementor-heading-title { font-size: min(20cqi, 19cqh) !important; } .z-teaser__decompte { margin-top: clamp(4px, 1.5vh, 24px) !important; } .z-teaser__decompte .elementor-countdown-item { min-height: clamp(60px, 8vh, 96px) !important; } .z-teaser__decompte .elementor-countdown-digits { font-size: min(3rem, 2.6vw, 5vh) !important; } } /* 8. TABLETTE 768–1024 px -------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .z-teaser__surtitre p { font-size: 11px !important; } .z-teaser__texte p { font-size: 13px !important; } } /* 9. MOBILE ≤ 767 px — colonnes empilées, la page défile ------------------- */ @media (max-width: 767px) { .z-teaser { flex-direction: column !important; } .z-teaser__visuel { flex: 0 0 auto !important; width: 100% !important; min-height: 38svh; } .z-teaser__contenu { flex: 1 1 auto !important; width: 100% !important; justify-content: flex-start !important; gap: 32px !important; padding: 28px 20px 40px !important; border-left: 0; border-top: var(--filet-ep) solid var(--color-filet); } .z-teaser__corps { gap: 16px !important; } .z-teaser__surtitre p { font-size: 12px !important; } .z-teaser__texte p { max-width: none !important; font-size: 14px !important; } .z-teaser__decompte .elementor-countdown-item { min-height: 72px !important; padding: 8px 6px !important; } .z-teaser__decompte .elementor-countdown-label { font-size: 10px !important; letter-spacing: .08em !important; } .z-teaser__liens .z-plan ul { flex-direction: column; gap: var(--space-xs); } .z-teaser__liens .z-plan li a { font-size: 14px !important; } }/* End custom CSS */