.elementor-790 .elementor-element.elementor-element-c7bfb06{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-790 .elementor-element.elementor-element-4dd4932a:not(.elementor-motion-effects-element-type-background), .elementor-790 .elementor-element.elementor-element-4dd4932a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-nvlightbg );}.elementor-790 .elementor-element.elementor-element-4dd4932a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 60px 70px 60px;}.elementor-790 .elementor-element.elementor-element-4dd4932a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-790 .elementor-element.elementor-element-ca7cfbf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:76px 60px 76px 60px;}.elementor-790 .elementor-element.elementor-element-ca7cfbf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-790 .elementor-element.elementor-element-d6a12b5{--display:flex;}.elementor-790 .elementor-element.elementor-element-4142d3e{--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;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-790 .elementor-element.elementor-element-4142d3e:not(.elementor-motion-effects-element-type-background), .elementor-790 .elementor-element.elementor-element-4142d3e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3FAFD;}.elementor-790 .elementor-element.elementor-element-be0bf26{--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-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-790 .elementor-element.elementor-element-0659722{text-align:start;}.elementor-790 .elementor-element.elementor-element-0659722 .elementor-heading-title{font-size:34px;font-weight:800;text-transform:uppercase;color:#0B4C61;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-790 .elementor-element.elementor-element-7db9dec{--divider-border-style:solid;--divider-color:#F66D9B;--divider-border-width:3px;}.elementor-790 .elementor-element.elementor-element-7db9dec .elementor-divider-separator{width:70px;margin:0 auto;margin-left:0;}.elementor-790 .elementor-element.elementor-element-7db9dec .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-790 .elementor-element.elementor-element-5d9caa9{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group > label, .elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-subgroup label{color:#176575;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group > label{font-family:"DM Sans", Sans-serif;font-size:13px;font-weight:800;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-type-html{padding-bottom:0px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group .elementor-field{color:#12333B;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFFFFF;border-color:rgba(23,101,117,0.18);border-width:1px 1px 1px 1px;border-radius:16px 16px 16px 16px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group .elementor-select-wrapper select{background-color:#FFFFFF;border-color:rgba(23,101,117,0.18);border-width:1px 1px 1px 1px;border-radius:16px 16px 16px 16px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-field-group .elementor-select-wrapper::before{color:rgba(23,101,117,0.18);}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-button{font-family:"DM Sans", Sans-serif;font-weight:800;border-radius:999px 999px 999px 999px;}.elementor-790 .elementor-element.elementor-element-33d0e55 .e-form__buttons__wrapper__button-next{background-color:#F66D9B;color:#FFFFFF;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-button[type="submit"]{background-color:#F66D9B;color:#FFFFFF;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-button[type="submit"] svg *{fill:#FFFFFF;}.elementor-790 .elementor-element.elementor-element-33d0e55 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-790 .elementor-element.elementor-element-33d0e55 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-790 .elementor-element.elementor-element-33d0e55 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-790 .elementor-element.elementor-element-33d0e55 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-790 .elementor-element.elementor-element-33d0e55{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );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-790 .elementor-element.elementor-element-1c505d5{font-size:14px;color:#07344A;}.elementor-790 .elementor-element.elementor-element-7eb0e61{--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-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-790 .elementor-element.elementor-element-b54d72e{text-align:center;}.elementor-790 .elementor-element.elementor-element-b54d72e img{border-radius:20px 20px 20px 20px;}.elementor-790 .elementor-element.elementor-element-26fe077:not(.elementor-motion-effects-element-type-background), .elementor-790 .elementor-element.elementor-element-26fe077 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0c2d35;}.elementor-790 .elementor-element.elementor-element-26fe077 > .elementor-container{max-width:1180px;}.elementor-790 .elementor-element.elementor-element-26fe077{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:48px 20px 28px 20px;}.elementor-790 .elementor-element.elementor-element-26fe077 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-790 .elementor-element.elementor-element-998928c > .elementor-element-populated{padding:10px 10px 10px 10px;}.elementor-790 .elementor-element.elementor-element-ae56b49{text-align:start;}.elementor-790 .elementor-element.elementor-element-ae56b49 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:800;line-height:1.2em;color:#ffffff;}.elementor-790 .elementor-element.elementor-element-aa023e9{--display:flex;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(12px/2);}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(12px/2);}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(12px/2);}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-12px/2);}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-12px/2);}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-790 .elementor-element.elementor-element-88ee2a4{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-790 .elementor-element.elementor-element-88ee2a4 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-790 .elementor-element.elementor-element-2b5b18f > .elementor-element-populated{padding:10px 10px 10px 10px;}.elementor-790 .elementor-element.elementor-element-0294dba{--display:flex;}.elementor-790 .elementor-element.elementor-element-541df7e{text-align:center;}.elementor-790 .elementor-element.elementor-element-541df7e .elementor-heading-title{font-size:14px;color:#FFFFFF;}.elementor-790 .elementor-element.elementor-element-d711be2 > .elementor-element-populated{padding:10px 10px 10px 10px;}.elementor-790 .elementor-element.elementor-element-9d341cd{text-align:start;}.elementor-790 .elementor-element.elementor-element-9d341cd .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:800;line-height:1.2em;color:#ffffff;}.elementor-790 .elementor-element.elementor-element-f7937de{text-align:start;font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;line-height:1.55em;color:rgba(255,255,255,.68);}.elementor-790 .elementor-element.elementor-element-bfa5013{--display:flex;}@media(min-width:768px){.elementor-790 .elementor-element.elementor-element-be0bf26{--width:55%;}.elementor-790 .elementor-element.elementor-element-7eb0e61{--width:45%;}}/* Start custom CSS for html, class: .elementor-element-e82f606 *//* ========================================================= HERO "DÉCOUVRIR CANVA" VERSION SO'EASY DESKTOP UNIQUEMENT LE RESPONSIVE EST GÉRÉ PAR LE CSS GLOBAL ========================================================= */ /* ========================================================= HERO ========================================================= */ .soeasy-hero{ position:relative; min-height:700px; display:flex; align-items:center; padding:95px 0 105px; background:transparent; overflow:visible; isolation:isolate; } /* ========================================================= FOND PLEINE LARGEUR ========================================================= */ .soeasy-hero::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; background: radial-gradient( circle at 78% 18%, rgba(246,109,155,.16), transparent 27% ), linear-gradient( 135deg, #EAF6FA 0%, #F5FBFD 55%, #FFFFFF 100% ); } /* ========================================================= FORME DECORATIVE ========================================================= */ .soeasy-hero::after{ content:""; position:absolute; width:210px; height:210px; left:-80px; bottom:-95px; border-radius:50%; background:rgba(246,109,155,.10); z-index:0; pointer-events:none; } /* ========================================================= GRID ========================================================= */ .soeasy-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr .9fr; gap:75px; align-items:center; } /* ========================================================= CONTENU TEXTE ========================================================= */ .soeasy-hero-content{ position:relative; z-index:2; } /* ========================================================= EYEBROW ========================================================= */ .soeasy-hero .soeasy-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; padding:8px 14px; border-radius:999px; background:#FFFFFF; color:#176575; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow: 0 5px 18px rgba(23,101,117,.06); } .soeasy-hero .soeasy-eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:#F66D9B; } /* ========================================================= TITRE ========================================================= */ .soeasy-hero h1{ max-width:660px; margin:0 0 24px; color:#176575; font-size:clamp(48px,6vw,78px); line-height:.98; font-weight:800; letter-spacing:-.045em; } .soeasy-hero h1 span{ display:inline; color:#F66D9B; } /* ========================================================= INTRO ========================================================= */ .soeasy-hero-intro{ max-width:610px; margin:0 0 30px; color:#4E676E!important; font-size:20px!important; line-height:1.6!important; } /* ========================================================= CTA ========================================================= */ .soeasy-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; } /* ========================================================= BOUTON PRINCIPAL ========================================================= */ .soeasy-hero .soeasy-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:15px 24px; border:0; border-radius:999px; background:#F66D9B; color:#FFFFFF!important; font-size:15px; font-weight:800; text-decoration:none!important; box-shadow:none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .soeasy-hero .soeasy-btn::after{ content:"→"; font-size:18px; transition:transform .22s ease; } .soeasy-hero .soeasy-btn:hover{ transform:translateY(-3px); background:#E85C8A; box-shadow: 0 12px 25px rgba(246,109,155,.25); } .soeasy-hero .soeasy-btn:hover::after{ transform:translateX(4px); } /* ========================================================= BOUTON SECONDAIRE ========================================================= */ .soeasy-hero .soeasy-btn-outline{ background:#FFFFFF; border:2px solid #176575; color:#176575!important; } .soeasy-hero .soeasy-btn-outline:hover{ background:#176575; color:#FFFFFF!important; box-shadow: 0 12px 25px rgba(23,101,117,.15); } /* ========================================================= ZONE VISUELLE ========================================================= */ .soeasy-canva-stage{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; z-index:2; } /* ========================================================= CADRE VISUEL ========================================================= */ .soeasy-visual-frame{ position:relative; width:90%; max-width:470px; aspect-ratio:4/5; padding:16px; border-radius:32px; background:#FFFFFF; box-shadow: 12px 14px 0 rgba(246,109,155,.14), 0 18px 45px rgba(23,101,117,.10); transform:rotate(2deg); } /* ========================================================= IMAGE ========================================================= */ .soeasy-visual-frame img{ width:100%; height:100%; object-fit:cover; border-radius:22px; } /* ========================================================= PLACEHOLDER VISUEL ========================================================= */ .soeasy-visual-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:30px; border-radius:22px; background: linear-gradient( 135deg, #EAF6FA, #FDF0F5 ); color:#176575; text-align:center; font-size:15px; font-weight:800; } /* ========================================================= BADGES VISUELS ========================================================= */ .soeasy-visual-badge{ position:absolute; padding:10px 15px; border-radius:999px; background:#FFFFFF; color:#176575; font-size:12px; font-weight:800; box-shadow: 0 8px 20px rgba(23,101,117,.09); } .soeasy-visual-badge-one{ top:75px; left:-10px; transform:rotate(-4deg); } .soeasy-visual-badge-two{ right:-5px; bottom:75px; background:#F66D9B; color:#FFFFFF; transform:rotate(3deg); } /* ========================================================= PETITES INFOS SOUS LES CTA ========================================================= */ .soeasy-hero-note{ display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .soeasy-hero-note span{ display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.75); color:#176575; font-size:12px; font-weight:700; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2115640 *//* ========================================================= BLOC PROMESSE "CANVA, OUI. AU HASARD, NON." ========================================================= */ .soeasy-promise{ position:relative; padding:105px 0 115px; overflow:hidden; background:#FFFFFF; } /* PETITE FORME DECORATIVE */ .soeasy-promise::before{ content:""; position:absolute; width:230px; height:230px; left:-120px; top:65px; border-radius:50%; background:#EAF6FA; } /* ========================================================= MISE EN PAGE ========================================================= */ .soeasy-promise-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:start; } /* ========================================================= COLONNE GAUCHE ========================================================= */ .soeasy-big-question{ max-width:540px; color:#176575; font-size:clamp(38px,4.5vw,58px); line-height:1.04; font-weight:800; letter-spacing:-.045em; } .soeasy-big-question span{ color:#F66D9B; } /* ========================================================= COLONNE DROITE ========================================================= */ .soeasy-promise-text{ max-width:650px; margin-bottom:22px; color:#19323A!important; font-size:21px!important; line-height:1.55!important; font-weight:500; } .soeasy-promise-grid > div:last-child > p:not(.soeasy-promise-text){ max-width:650px; margin-bottom:0; color:#53686E; font-size:17px; line-height:1.7; } /* ========================================================= TAGS ========================================================= */ .soeasy-mini-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .soeasy-mini-points .soeasy-tag{ padding:8px 13px; border-radius:999px; background:#EAF6FA; color:#176575; font-size:12px; font-weight:800; transition: transform .2s ease, background .2s ease; } .soeasy-mini-points .soeasy-tag:nth-child(2n){ background:#FDE5ED; color:#F66D9B; } .soeasy-mini-points .soeasy-tag:hover{ transform:translateY(-2px); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-072ed68 *//* ========================================================= CE QUE VOUS ALLEZ APPRENDRE ========================================================= */ .se-learn{ padding:115px 0 125px; background:#FFFFFF; } .se-section-head{ max-width:720px; margin-bottom:55px; } .se-section-head h2{ margin:0 0 22px; color:#176575; font-size:clamp(38px,5vw,64px); line-height:1; font-weight:800; letter-spacing:-.045em; } .se-section-head p{ max-width:650px; margin:0; color:#53686E; font-size:18px; line-height:1.7; } /* DEUX BLOCS */ .se-learn-cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } .se-learn-card{ position:relative; min-height:410px; padding:42px; overflow:hidden; border-radius:30px; transition: transform .25s ease, box-shadow .25s ease; } .se-learn-card:hover{ transform:translateY(-6px); } /* BLOC 01 */ .se-learn-card-blue{ background:#EAF6FA; color:#176575; box-shadow: 10px 10px 0 rgba(23,101,117,.10); } .se-learn-card-blue:hover{ box-shadow: 14px 16px 0 rgba(23,101,117,.12); } /* BLOC 02 */ .se-learn-card-pink{ background:#F66D9B; color:#FFFFFF; box-shadow: 10px 10px 0 #FDE5ED; } .se-learn-card-pink:hover{ box-shadow: 14px 16px 0 #FDE5ED; } /* NUMERO */ .se-card-number{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; margin-bottom:38px; border-radius:50%; font-size:20px; font-weight:800; } .se-learn-card-blue .se-card-number{ background:#176575; color:white; } .se-learn-card-pink .se-card-number{ background:white; color:#F66D9B; } /* PETIT TITRE */ .se-mini-label{ display:block; margin-bottom:12px; font-size:12px; font-weight:800; letter-spacing:.1em; } .se-learn-card-blue .se-mini-label{ color:#F66D9B; } .se-learn-card-pink .se-mini-label{ color:rgba(255,255,255,.78); } /* TITRE */ .se-learn-card h3{ margin:0 0 18px; font-size:32px; line-height:1.08; font-weight:800; } .se-learn-card-blue h3{ color:#176575; } .se-learn-card-pink h3{ color:white; } /* TEXTE */ .se-learn-card p{ max-width:500px; margin:0; font-size:17px; line-height:1.7; } .se-learn-card-blue p{ color:#53686E; } .se-learn-card-pink p{ color:rgba(255,255,255,.88); } /* TAGS */ .se-card-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; } .se-card-tags span{ padding:7px 12px; border-radius:30px; font-size:11px; font-weight:800; text-transform:uppercase; } .se-learn-card-blue .se-card-tags span{ background:white; color:#176575; } .se-learn-card-pink .se-card-tags span{ background:rgba(255,255,255,.16); color:white; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d064b1c *//* ========================================================= DEROULE DE LA JOURNEE VERSION SO'EASY ========================================================= */ .se-day{ position:relative; padding:110px 0 115px; overflow:hidden; background:#176575; } /* PETITES FORMES DECORATIVES */ .se-day::before{ content:""; position:absolute; width:300px; height:300px; right:-150px; top:-160px; border-radius:50%; background:rgba(234,246,250,.06); } .se-day::after{ content:""; position:absolute; width:170px; height:170px; left:-80px; bottom:-90px; border-radius:50%; background:rgba(246,109,155,.10); } /* ========================================================= TITRE ========================================================= */ .se-day-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .se-day .se-kicker{ display:block; margin-bottom:16px; color:#F9B1CA; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .se-day-heading h2{ margin:0 0 22px; color:#FFFFFF; font-size:clamp(38px,5vw,62px); line-height:1; font-weight:800; letter-spacing:-.045em; } .se-day-heading p{ max-width:650px; margin:0 auto; color:rgba(255,255,255,.78); font-size:18px; line-height:1.7; } /* ========================================================= GRILLE ========================================================= */ .se-day-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } /* ========================================================= CARTES ========================================================= */ .se-day-card{ position:relative; min-height:430px; display:flex; flex-direction:column; padding:38px 40px; border-radius:30px; transition: transform .25s ease, box-shadow .25s ease; } .se-day-card:hover{ transform:translateY(-5px); } /* CARTE 01 */ .se-day-card-blue{ background:#EAF6FA; box-shadow: 10px 10px 0 rgba(255,255,255,.09); } /* CARTE 02 */ .se-day-card-pink{ background:#FDE5ED; box-shadow: 10px 10px 0 rgba(246,109,155,.16); } /* ========================================================= HAUT CARTE ========================================================= */ .se-day-card-top{ display:flex; align-items:center; gap:16px; margin-bottom:32px; } /* NUMERO */ .se-day-number{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#176575; color:#FFFFFF; font-size:17px; font-weight:800; } .se-day-card-pink .se-day-number{ background:#F66D9B; } /* PETITE ACCROCHE */ .se-day-small-title{ color:#176575; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } /* ========================================================= TITRES CARTE ========================================================= */ .se-day-card h3{ margin:0 0 25px; color:#176575; font-size:31px; line-height:1.08; font-weight:800; letter-spacing:-.025em; } /* ========================================================= LISTE ========================================================= */ .se-day-card ul{ margin:0 0 30px; padding:0; list-style:none; } .se-day-card li{ position:relative; padding:12px 0 12px 27px; border-bottom:1px solid rgba(23,101,117,.14); color:#53686E; font-size:16px; line-height:1.5; } .se-day-card li:last-child{ border-bottom:0; } /* PETITE PASTILLE DEVANT CHAQUE POINT */ .se-day-card li::before{ content:""; position:absolute; width:8px; height:8px; left:0; top:20px; border-radius:50%; background:#176575; } .se-day-card-pink li::before{ background:#F66D9B; } /* ========================================================= BADGE BAS CARTE ========================================================= */ .se-day-badge{ align-self:flex-start; margin-top:auto; padding:10px 16px; border-radius:999px; background:#176575; color:#FFFFFF; font-size:13px; font-weight:800; } .se-day-card-pink .se-day-badge{ background:#F66D9B; } /* ========================================================= PETITE PHRASE SOUS LES CARTES ========================================================= */ .se-day-bottom{ max-width:760px; display:flex; align-items:center; justify-content:center; gap:14px; margin:38px auto 0; text-align:center; } .se-day-bottom-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#F66D9B; color:#FFFFFF; font-size:21px; font-weight:700; } .se-day-bottom p{ margin:0; color:rgba(255,255,255,.82); font-size:15px; line-height:1.5; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0f3a76b */.se-takeaway{ padding:110px 0 0; background:#FFFFFF; } .se-takeaway-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:start; padding-bottom:90px; } .se-takeaway-title h2{ margin:0 0 22px; color:#176575; font-size:clamp(38px,5vw,64px); line-height:1; font-weight:800; letter-spacing:-.045em; } .se-takeaway-title h2 span{ display:block; color:#F66D9B; } .se-takeaway-title p{ max-width:430px; color:#53686E; font-size:18px; line-height:1.7; } .se-takeaway-list{ border-top:1px solid rgba(23,101,117,.18); } .se-takeaway-item{ display:grid; grid-template-columns:62px 1fr; gap:20px; align-items:center; padding:26px 0; border-bottom:1px solid rgba(23,101,117,.18); } .se-takeaway-item span{ color:#F66D9B; font-size:14px; font-weight:800; } .se-takeaway-item strong{ color:#176575; font-size:22px; line-height:1.25; } /* PETITE BARRE BASSE */ .se-more{ background:#EAF6FA; } .se-more-inner{ min-height:90px; display:flex; flex-wrap:wrap; align-items:center; gap:25px 40px; } .se-more strong{ color:#176575; font-size:18px; } .se-more span{ color:#53686E; font-size:14px; } .se-more span::before{ content:"•"; margin-right:9px; color:#F66D9B; font-weight:800; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-570b0f9 *//* ========================================================= BANDEAU BLEU CIEL - FORMATRICES DESKTOP UNIQUEMENT LE RESPONSIVE EST GÉRÉ PAR LE CSS GLOBAL ========================================================= */ /* ========================================================= SECTION ========================================================= */ .se-trainers{ padding:115px 0; background:#EAF6FA; } /* ========================================================= GRID ========================================================= */ .se-trainers-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; } /* ========================================================= ZONE VISUELLE ========================================================= */ .se-trainers-visual{ position:relative; min-height:510px; } /* ========================================================= PHOTOS ========================================================= */ .se-photo{ position:absolute; overflow:hidden; border-radius:26px; } .se-photo img{ width:100%; height:100%; object-fit:cover; } /* PHOTO 01 */ .se-photo-one{ width:62%; height:400px; top:0; left:0; border:3px solid #176575; transform:rotate(-4deg); box-shadow: 12px 15px 0 rgba(23,101,117,.10); } /* PHOTO 02 */ .se-photo-two{ width:55%; height:335px; right:0; bottom:0; border:7px solid #EAF6FA; transform:rotate(4deg); box-shadow: 0 20px 40px rgba(23,101,117,.12); } /* ========================================================= PETITE NOTE SUR LES PHOTOS ========================================================= */ .se-photo-note{ position:absolute; right:-10px; top:20px; padding:13px 17px; border-radius:14px; background:#F66D9B; color:#FFFFFF; font-size:13px; line-height:1.3; font-weight:800; transform:rotate(4deg); box-shadow: 6px 7px 0 rgba(23,101,117,.12); } /* ========================================================= TITRE ========================================================= */ .se-trainers h2{ margin:0 0 22px; color:#176575; font-size:clamp(38px,5vw,64px); line-height:1; font-weight:800; letter-spacing:-.045em; } .se-trainers h2 span{ display:block; color:#F66D9B; } /* ========================================================= TEXTE ========================================================= */ .se-trainers-text > p{ max-width:650px; color:#53686E; font-size:17px; line-height:1.7; } /* ========================================================= PETITS POINTS / TAGS ========================================================= */ .se-inline-points{ display:flex; flex-wrap:wrap; gap:9px; margin:30px 0; } .se-inline-points span{ padding:8px 13px; border-radius:40px; background:#FFFFFF; color:#176575; font-size:12px; font-weight:800; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d4e4d79 */.se-quote{ padding:72px 0; background:#F66D9B; } .se-quote p{ max-width:920px; margin:0 auto; color:#FFFFFF; text-align:center; font-size:clamp(28px,4vw,46px); line-height:1.12; letter-spacing:-.03em; } .se-quote strong{ font-weight:800; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fcfc093 *//* ========================================================= CTA FINAL DESKTOP UNIQUEMENT RESPONSIVE GÉRÉ PAR LE CSS GLOBAL ========================================================= */ .se-final{ padding:90px 0 105px; background:#FFFFFF; } /* ========================================================= CARTE CTA ========================================================= */ .se-final-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:52px 58px; border-radius:30px; background:#EAF6FA; } /* ========================================================= TITRE ========================================================= */ .se-final-card h2{ margin:0 0 18px; color:#176575; font-size:clamp(36px,4.5vw,56px); line-height:1; font-weight:800; letter-spacing:-.04em; } .se-final-card-full{ display:block !important; grid-template-columns:none !important; text-align:left; } .se-final-card-full .se-kicker{ display:inline-flex; justify-content:flex-start; margin-left:0; margin-right:auto; text-align:left; } .se-final-card-full h2, .se-final-card-full p{ text-align:left; max-width:100%; }/* End custom CSS */ /* Start custom CSS *//* ========================================================= SO'EASY COMMUNICATION FORMATION CANVA CSS GLOBAL PROPRE ========================================================= */ /* ========================================================= 01 - VARIABLES ========================================================= */ .soeasy-canva{ --petrol:#176575; --petrol-dark:#104F5C; --pink:#F66D9B; --pink-dark:#E85C8A; --pink-soft:#FDE5ED; --blue-soft:#EAF6FA; --blue-medium:#D5EDF3; --white:#FFFFFF; --cream:#FFF9F6; --text:#19323A; --text-soft:#53686E; --line:rgba(23,101,117,.18); --shadow: 0 20px 45px rgba(23,101,117,.10); --shadow-strong: 0 28px 60px rgba(23,101,117,.15); --radius-small:14px; --radius-medium:22px; --radius-large:30px; font-family:"DM Sans",Arial,sans-serif; color:var(--text); /* IMPORTANT : visible permet notamment au fond pleine largeur du Hero de dépasser du container Elementor. */ overflow:visible; } /* ========================================================= 02 - RESET LOCAL ========================================================= */ .soeasy-canva *, .soeasy-canva *::before, .soeasy-canva *::after{ box-sizing:border-box; } .soeasy-canva section{ position:relative; width:100%; } .soeasy-canva img{ display:block; max-width:100%; } .soeasy-canva a{ text-decoration:none; } .soeasy-canva h1, .soeasy-canva h2, .soeasy-canva h3, .soeasy-canva h4, .soeasy-canva p, .soeasy-canva ul{ margin-top:0; } /* ========================================================= 03 - CONTAINERS ========================================================= */ .soeasy-container, .se-container{ position:relative; z-index:2; width:min(1180px,calc(100% - 48px)); margin-left:auto; margin-right:auto; } /* ========================================================= 04 - TYPOGRAPHIE GLOBALE ========================================================= */ .soeasy-canva h1, .soeasy-canva h2, .soeasy-canva h3, .soeasy-canva h4{ font-family:"DM Sans",Arial,sans-serif; } .soeasy-canva h1{ color:var(--petrol); font-size:clamp(48px,6vw,78px); line-height:.98; font-weight:800; letter-spacing:-.045em; } .soeasy-canva h2{ color:var(--petrol); font-size:clamp(38px,5vw,64px); line-height:1; font-weight:800; letter-spacing:-.045em; } .soeasy-canva h3{ color:var(--petrol); font-size:clamp(22px,2.5vw,30px); line-height:1.12; font-weight:800; letter-spacing:-.025em; } .soeasy-canva p, .soeasy-canva li{ font-size:17px; line-height:1.7; } .soeasy-canva p{ color:var(--text-soft); } /* ========================================================= 05 - KICKERS / PETITS TITRES ========================================================= */ .soeasy-eyebrow, .se-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--pink); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } /* ========================================================= 06 - BOUTONS PRINCIPAUX ========================================================= */ .soeasy-btn, .se-btn, .se-link, .se-final-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:15px 24px; border:0; border-radius:999px; background:var(--pink); color:var(--white)!important; font-size:15px; font-weight:800; text-decoration:none!important; cursor:pointer; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; } .soeasy-btn:hover, .se-btn:hover, .se-link:hover, .se-final-btn:hover{ transform:translateY(-3px); background:var(--pink-dark); box-shadow: 0 12px 25px rgba(246,109,155,.25); } /* ========================================================= 07 - BOUTON SECONDAIRE ========================================================= */ .soeasy-btn-outline{ background:var(--white); border:2px solid var(--petrol); color:var(--petrol)!important; } .soeasy-btn-outline:hover{ background:var(--petrol); color:var(--white)!important; box-shadow: 0 12px 25px rgba(23,101,117,.15); } /* ========================================================= 08 - TAGS ========================================================= */ .soeasy-tag{ display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px; background:var(--blue-soft); color:var(--petrol); font-size:12px; font-weight:800; } /* ========================================================= 09 - LIENS SIMPLES ========================================================= */ .soeasy-canva a:not(.soeasy-btn):not(.se-btn):not(.se-link):not(.se-final-btn){ color:var(--petrol); } .soeasy-canva a:not(.soeasy-btn):not(.se-btn):not(.se-link):not(.se-final-btn):hover{ color:var(--pink); } /* ========================================================= 10 - LISTES ========================================================= */ .soeasy-canva ul{ padding-left:20px; } /* ========================================================= 11 - ACCESSIBILITE ========================================================= */ .soeasy-canva a:focus-visible, .soeasy-canva button:focus-visible{ outline:3px solid rgba(246,109,155,.35); outline-offset:4px; } .soeasy-canva ::selection{ background:var(--pink); color:var(--white); } /* ========================================================= ========================================================= RESPONSIVE UNIQUE ========================================================= ========================================================= */ /* ========================================================= 12 - TABLETTE LARGE 1024 PX ========================================================= */ @media(max-width:1024px){ /* GLOBAL */ .soeasy-container, .se-container{ width:min(calc(100% - 40px),1180px); } /* HERO */ .soeasy-hero{ min-height:auto; padding:80px 0 85px; } .soeasy-hero-grid{ grid-template-columns:1fr 1fr; gap:45px; } .soeasy-hero h1{ font-size:clamp(46px,6vw,66px); } .soeasy-canva-stage{ min-height:450px; } .soeasy-visual-frame{ width:92%; max-width:410px; } /* PROMESSE */ .soeasy-promise{ padding:90px 0; } .soeasy-promise-grid{ gap:55px; } /* PROGRAMME 01 / 02 */ .se-learn{ padding:95px 0; } .se-learn-card{ min-height:390px; padding:35px; } /* DEROULE */ .se-day{ padding:90px 0; } .se-day-card{ padding:34px; } /* LIVRABLES */ .se-takeaway{ padding-top:95px; } .se-takeaway-layout{ gap:65px; } /* FORMATRICES */ .se-trainers{ padding:95px 0; } .se-trainers-grid{ gap:55px; } } /* ========================================================= 13 - TABLETTE VERTICALE 850 PX ========================================================= */ @media(max-width:850px){ /* GLOBAL */ .soeasy-container, .se-container{ width:calc(100% - 36px); } /* ===================================================== HERO ===================================================== */ .soeasy-hero{ padding:70px 0 75px; } .soeasy-hero-grid{ grid-template-columns:1fr; gap:45px; } .soeasy-hero-content{ max-width:680px; } .soeasy-hero h1{ max-width:600px; font-size:58px; } .soeasy-hero-intro{ max-width:620px; } .soeasy-canva-stage{ min-height:auto; padding:15px 0 20px; } .soeasy-visual-frame{ width:min(76%,430px); aspect-ratio:4/5; } .soeasy-visual-badge-one{ left:6%; top:60px; } .soeasy-visual-badge-two{ right:7%; bottom:60px; } /* ===================================================== PROMESSE ===================================================== */ .soeasy-promise{ padding:80px 0; } .soeasy-promise-grid{ grid-template-columns:1fr; gap:30px; } .soeasy-big-question{ max-width:650px; } .soeasy-promise-text{ max-width:680px; } /* ===================================================== PROGRAMME 01 / 02 ===================================================== */ .se-learn{ padding:85px 0; } .se-section-head{ margin-bottom:40px; } .se-learn-cards{ grid-template-columns:1fr; gap:20px; } .se-learn-card{ min-height:auto; padding:34px; } .se-card-number{ margin-bottom:28px; } /* ===================================================== DEROULE JOURNEE ===================================================== */ .se-day{ padding:80px 0; } .se-day-heading{ margin-bottom:45px; } .se-day-grid{ grid-template-columns:1fr; gap:20px; } .se-day-card{ min-height:auto; padding:32px; } .se-day-bottom{ margin-top:30px; } /* ===================================================== LIVRABLES ===================================================== */ .se-takeaway{ padding-top:85px; } .se-takeaway-layout{ grid-template-columns:1fr; gap:40px; padding-bottom:70px; } .se-takeaway-title{ max-width:650px; } .se-more-inner{ min-height:auto; flex-direction:column; align-items:flex-start; gap:10px; padding-top:25px; padding-bottom:25px; } /* ===================================================== FORMATRICES ===================================================== */ .se-trainers{ padding:85px 0; } .se-trainers-grid{ grid-template-columns:1fr; gap:45px; } .se-trainers-visual{ width:100%; max-width:580px; min-height:480px; } .se-trainers-text{ max-width:680px; } /* ===================================================== MANIFESTE ===================================================== */ .se-quote{ padding:65px 0; } /* ===================================================== CTA FINAL ===================================================== */ .se-final{ padding:75px 0; } .se-final-card{ grid-template-columns:1fr; gap:25px; padding:40px; } } /* ========================================================= 14 - MOBILE 600 PX ========================================================= */ @media(max-width:600px){ /* ===================================================== GLOBAL ===================================================== */ .soeasy-container, .se-container{ width:calc(100% - 28px); } .soeasy-canva h1{ font-size:44px; line-height:.98; } .soeasy-canva h2, .se-section-head h2, .se-day-heading h2, .se-takeaway-title h2, .se-trainers h2, .se-final-card h2{ font-size:34px; line-height:1.04; } .soeasy-canva h3{ font-size:25px; } .soeasy-canva p, .soeasy-canva li{ font-size:16px; } /* ===================================================== BOUTONS ===================================================== */ .soeasy-btn, .se-btn, .se-link, .se-final-btn{ width:100%; text-align:center; } /* ===================================================== HERO ===================================================== */ .soeasy-hero{ padding:55px 0 60px; } .soeasy-hero-grid{ gap:34px; } .soeasy-hero .soeasy-eyebrow{ margin-bottom:14px; } .soeasy-hero h1{ max-width:100%; margin-bottom:20px; font-size:44px; } .soeasy-hero-intro{ margin-bottom:24px; font-size:17px!important; line-height:1.55!important; } .soeasy-hero-actions{ flex-direction:column; align-items:stretch; gap:10px; } .soeasy-hero-note{ gap:6px; margin-top:18px; } .soeasy-hero-note span{ padding:6px 9px; font-size:11px; } /* VISUEL HERO */ .soeasy-canva-stage{ min-height:auto; padding:12px 0 5px; } .soeasy-visual-frame{ width:min(82%,310px); padding:10px; border-radius:24px; transform:rotate(1deg); } .soeasy-visual-frame img, .soeasy-visual-placeholder{ border-radius:17px; } .soeasy-visual-badge{ padding:7px 10px; font-size:10px; } .soeasy-visual-badge-one{ top:35px; left:0; } .soeasy-visual-badge-two{ right:0; bottom:35px; } /* ===================================================== PROMESSE ===================================================== */ .soeasy-promise{ padding:65px 0; } .soeasy-promise-grid{ gap:24px; } .soeasy-big-question{ font-size:34px; } .soeasy-promise-text{ font-size:18px!important; } .soeasy-mini-points{ margin-top:22px; } /* ===================================================== PROGRAMME 01 / 02 ===================================================== */ .se-learn{ padding:70px 0; } .se-section-head{ margin-bottom:32px; } .se-section-head p{ font-size:16px; } .se-learn-cards{ gap:16px; } .se-learn-card{ min-height:auto; padding:28px; border-radius:24px; } .se-card-number{ width:54px; height:54px; margin-bottom:22px; } .se-learn-card h3{ font-size:26px; } .se-card-tags{ margin-top:24px; } /* ===================================================== DEROULE JOURNEE ===================================================== */ .se-day{ padding:65px 0; } .se-day-heading{ margin-bottom:35px; } .se-day-heading p{ font-size:16px; } .se-day-grid{ gap:16px; } .se-day-card{ min-height:auto; padding:27px 24px; border-radius:24px; } .se-day-card-top{ gap:12px; margin-bottom:24px; } .se-day-number{ flex:0 0 50px; width:50px; height:50px; } .se-day-small-title{ font-size:10px; } .se-day-card h3{ margin-bottom:18px; font-size:26px; } .se-day-card ul{ padding-left:0; } .se-day-card li{ padding: 10px 0 10px 22px; font-size:15px; } .se-day-card li::before{ top:18px; } .se-day-bottom{ align-items:flex-start; margin-top:25px; text-align:left; } /* ===================================================== LIVRABLES ===================================================== */ .se-takeaway{ padding-top:70px; } .se-takeaway-layout{ gap:30px; padding-bottom:55px; } .se-takeaway-item{ grid-template-columns:40px 1fr; gap:12px; padding:20px 0; } .se-takeaway-item strong{ font-size:18px; } .se-more-inner{ padding-top:20px; padding-bottom:20px; } /* ===================================================== FORMATRICES ===================================================== */ .se-trainers{ padding:70px 0; } .se-trainers-grid{ gap:35px; } .se-trainers-visual{ width:100%; min-height:390px; } .se-photo-one{ width:66%; height:300px; } .se-photo-two{ width:58%; height:235px; } .se-photo-note{ top:10px; right:0; padding:10px 12px; font-size:11px; } .se-inline-points{ margin:24px 0; } /* ===================================================== PHRASE ROSE ===================================================== */ .se-quote{ padding:55px 0; } .se-quote p{ font-size:28px; line-height:1.12; } /* ===================================================== CTA FINAL ===================================================== */ .se-final{ padding:60px 0; } .se-final-card{ padding:30px 24px; border-radius:24px; } .se-final-btn{ width:100%; white-space:normal; text-align:center; } } /* ========================================================= 15 - PETITS MOBILES 400 PX ========================================================= */ @media(max-width:400px){ .soeasy-container, .se-container{ width:calc(100% - 22px); } /* TYPO */ .soeasy-canva h1{ font-size:40px; } .soeasy-canva h2, .se-section-head h2, .se-day-heading h2, .se-takeaway-title h2, .se-trainers h2, .se-final-card h2{ font-size:31px; } /* HERO */ .soeasy-visual-frame{ width:86%; } .soeasy-visual-badge{ font-size:9px; } /* CARTES */ .se-learn-card, .se-day-card{ padding:24px 20px; } /* FORMATRICES */ .se-photo-note{ max-width:130px; } } /* ========================================================= RESPONSIVE FINAL SO'EASY À PLACER TOUT EN BAS DU CSS GLOBAL ========================================================= */ /* ========================================================= TABLETTE ========================================================= */ @media (max-width:850px){ .soeasy-container, .se-container{ width:calc(100% - 36px) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; } /* HERO */ .soeasy-hero{ min-height:auto !important; padding:70px 0 75px !important; } .soeasy-hero-grid{ display:grid !important; grid-template-columns:1fr !important; gap:42px !important; } .soeasy-hero-content{ width:100% !important; max-width:none !important; } .soeasy-canva-stage{ width:100% !important; min-height:auto !important; padding:15px 0 !important; } .soeasy-visual-frame{ width:min(76%,430px) !important; margin:0 auto !important; } /* PROMESSE */ .soeasy-promise-grid{ display:grid !important; grid-template-columns:1fr !important; gap:30px !important; } .soeasy-big-question, .soeasy-promise-text{ width:100% !important; max-width:680px !important; } /* PROGRAMME 01 / 02 */ .se-learn-cards{ display:grid !important; grid-template-columns:1fr !important; gap:20px !important; } .se-learn-card{ width:100% !important; min-height:auto !important; } /* DÉROULÉ */ .se-day-grid{ display:grid !important; grid-template-columns:1fr !important; gap:20px !important; } .se-day-card{ width:100% !important; min-width:0 !important; min-height:auto !important; } /* LIVRABLES */ .se-takeaway-layout{ display:grid !important; grid-template-columns:1fr !important; gap:40px !important; } /* FORMATRICES */ .se-trainers-grid{ display:grid !important; grid-template-columns:1fr !important; gap:45px !important; } .se-trainers-visual{ width:100% !important; max-width:580px !important; min-height:480px !important; margin:0 auto !important; } .se-trainers-text{ width:100% !important; max-width:none !important; } /* CTA FINAL */ .se-final-card{ display:grid !important; grid-template-columns:1fr !important; gap:25px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .soeasy-container, .se-container{ width:calc(100% - 28px) !important; } /* TYPO */ .soeasy-canva h1, .soeasy-hero h1{ font-size:44px !important; line-height:.98 !important; } .soeasy-canva h2, .se-section-head h2, .se-day-heading h2, .se-takeaway-title h2, .se-trainers h2, .se-final-card h2{ font-size:34px !important; line-height:1.04 !important; } /* ===================================================== HERO ===================================================== */ .soeasy-hero{ padding:55px 0 60px !important; } .soeasy-hero-grid{ grid-template-columns:1fr !important; gap:32px !important; } .soeasy-hero-content{ width:100% !important; } .soeasy-hero h1{ width:100% !important; max-width:none !important; margin-bottom:20px !important; } .soeasy-hero-intro{ width:100% !important; max-width:none !important; margin-bottom:24px !important; font-size:17px !important; line-height:1.55 !important; } .soeasy-hero-actions{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; } .soeasy-hero .soeasy-btn{ width:100% !important; } .soeasy-canva-stage{ width:100% !important; min-height:auto !important; padding:10px 0 !important; } .soeasy-visual-frame{ width:min(82%,310px) !important; max-width:310px !important; margin:0 auto !important; padding:10px !important; border-radius:24px !important; transform:rotate(1deg) !important; } .soeasy-visual-badge{ padding:7px 10px !important; font-size:10px !important; } .soeasy-visual-badge-one{ top:35px !important; left:0 !important; } .soeasy-visual-badge-two{ right:0 !important; bottom:35px !important; } /* ===================================================== PROMESSE ===================================================== */ .soeasy-promise{ padding:65px 0 !important; } .soeasy-promise-grid{ grid-template-columns:1fr !important; gap:24px !important; } .soeasy-big-question{ width:100% !important; max-width:none !important; font-size:34px !important; word-break:normal !important; overflow-wrap:normal !important; } .soeasy-promise-text{ width:100% !important; max-width:none !important; font-size:18px !important; } /* ===================================================== PROGRAMME 01 / 02 ===================================================== */ .se-learn{ padding:70px 0 !important; } .se-learn-cards{ grid-template-columns:1fr !important; gap:16px !important; } .se-learn-card{ width:100% !important; min-height:auto !important; padding:28px !important; border-radius:24px !important; } .se-card-number{ width:54px !important; height:54px !important; margin-bottom:22px !important; } /* ===================================================== DÉROULÉ ===================================================== */ .se-day{ padding:65px 0 !important; } .se-day-heading{ width:100% !important; margin-bottom:35px !important; } .se-day-grid{ grid-template-columns:1fr !important; gap:16px !important; } .se-day-card{ width:100% !important; min-width:0 !important; min-height:auto !important; padding:27px 24px !important; border-radius:24px !important; } .se-day-card-top{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:12px !important; margin-bottom:24px !important; } .se-day-number{ flex:0 0 50px !important; width:50px !important; height:50px !important; } .se-day-small-title{ display:block !important; width:auto !important; max-width:none !important; writing-mode:horizontal-tb !important; white-space:normal !important; word-break:normal !important; overflow-wrap:normal !important; } .se-day-card h3{ font-size:26px !important; } /* ===================================================== LIVRABLES ===================================================== */ .se-takeaway{ padding-top:70px !important; } .se-takeaway-layout{ grid-template-columns:1fr !important; gap:30px !important; padding-bottom:55px !important; } .se-takeaway-item{ grid-template-columns:40px 1fr !important; gap:12px !important; padding:20px 0 !important; } /* ===================================================== FORMATRICES ===================================================== */ .se-trainers{ padding:70px 0 !important; } .se-trainers-grid{ grid-template-columns:1fr !important; gap:35px !important; } .se-trainers-visual{ position:relative !important; width:100% !important; max-width:380px !important; min-height:360px !important; margin:0 auto !important; } .se-photo-one{ width:64% !important; height:280px !important; top:0 !important; left:3% !important; } .se-photo-two{ width:56% !important; height:220px !important; right:2% !important; bottom:0 !important; } .se-photo-note{ top:10px !important; right:0 !important; max-width:145px !important; padding:10px 12px !important; font-size:11px !important; } .se-trainers-text{ width:100% !important; max-width:none !important; } /* ===================================================== PHRASE ROSE ===================================================== */ .se-quote{ padding:55px 0 !important; } .se-quote p{ font-size:28px !important; line-height:1.12 !important; } /* ===================================================== CTA FINAL ===================================================== */ .se-final{ padding:60px 0 !important; } .se-final-card{ grid-template-columns:1fr !important; padding:30px 24px !important; border-radius:24px !important; } .se-final-btn{ width:100% !important; white-space:normal !important; text-align:center !important; } }/* End custom CSS */